pull in new form stuffs from dev

src/blitz-client.ts

@@ -7,5 +7,14 @@ export const authConfig = {
 }
 
 export const { withBlitz } = setupBlitzClient({
-  plugins: [AuthClientPlugin(authConfig), BlitzRpcPlugin({})],
+  plugins: [
+    AuthClientPlugin(authConfig),
+    BlitzRpcPlugin({
+      reactQueryOptions: {
+        queries: {
+          refetchOnWindowFocus: false,
+        },
+      },
+    }),
+  ],
 })

src/core/components/DaisyTheme.tsx

@@ -15,7 +15,18 @@ import {
   getUiOptions,
   getSubmitButtonOptions,
   SubmitButtonProps,
+  schemaRequiresTrueValue,
+  descriptionId,
+  ariaDescribedByIds,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsDeselectValue,
+  enumOptionsValueForIndex,
+  optionId,
 } from "@rjsf/utils"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import remarkBreaks from "remark-breaks"
 
 import { ThemeProps } from "@rjsf/core"
 
@@ -74,9 +85,12 @@ function MyDescriptionField<
   }
   if (typeof description === "string") {
     return (
-      <p id={id} className="text-md italic">
-        {description}
-      </p>
+      <div
+        id={id}
+        className="markdown-display prose max-w-none dark:prose-invert text-md italic mb-2"
+      >
+        <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{description}</ReactMarkdown>
+      </div>
     )
   } else {
     return (
@@ -186,6 +200,118 @@ const MyEmailWidget = (props: WidgetProps) => {
   )
 }
 
+const MyCheckboxWidget = (props: WidgetProps) => {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    label,
+    hideLabel,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    uiSchema,
+    registry,
+  } = props
+  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options)
+  const description = options.description ?? schema.description
+  const required = schemaRequiresTrueValue(schema)
+
+  return (
+    <div className="field-checkbox">
+      {!hideLabel && label && (
+        <label className="text-lg font-bold block mb-1" htmlFor={id}>
+          {label}
+          {required && <span className="italic">{REQUIRED_FIELD_SYMBOL}</span>}
+        </label>
+      )}
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <label className="flex items-center gap-2 mt-1 cursor-pointer">
+        <input
+          type="checkbox"
+          id={id}
+          name={id}
+          checked={typeof value === "undefined" ? false : value}
+          required={required}
+          disabled={disabled || readonly}
+          aria-describedby={ariaDescribedByIds(id)}
+          onChange={(e) => onChange(e.target.checked)}
+          onBlur={(e) => onBlur(id, e.target.checked)}
+          onFocus={(e) => onFocus(id, e.target.checked)}
+        />
+      </label>
+    </div>
+  )
+}
+
+const MyCheckboxesWidget = (props: WidgetProps) => {
+  const {
+    id,
+    disabled,
+    options,
+    value,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus = false,
+  } = props
+  const { enumOptions, enumDisabled, emptyValue } = options
+  const checkboxesValues = Array.isArray(value) ? value : [value]
+
+  return (
+    <div className="checkboxes-group" id={id}>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const checked = enumOptionsIsSelected(option.value, checkboxesValues)
+          const itemDisabled =
+            Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1
+          const disabledCls = disabled || itemDisabled || readonly ? "disabled" : ""
+
+          return (
+            <label key={index} className={`checkboxes-option ${disabledCls}`}>
+              <input
+                type="checkbox"
+                id={optionId(id, index)}
+                name={id}
+                checked={checked}
+                value={String(index)}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={(event) => {
+                  if (event.target.checked) {
+                    onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions))
+                  } else {
+                    onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions))
+                  }
+                }}
+                onBlur={({ target: { value: v } }) =>
+                  onBlur(id, enumOptionsValueForIndex(v, enumOptions, emptyValue))
+                }
+                onFocus={({ target: { value: v } }) =>
+                  onFocus(id, enumOptionsValueForIndex(v, enumOptions, emptyValue))
+                }
+                aria-describedby={ariaDescribedByIds(id)}
+              />
+              <span>{option.label}</span>
+            </label>
+          )
+        })}
+    </div>
+  )
+}
+
 // create Registry information
 // templates
 const myTemplates: Partial<TemplatesType> = {
@@ -217,6 +343,8 @@ const myTemplates: Partial<TemplatesType> = {
 const myWidgets: RegistryWidgetsType = {
   TextWidget: MyTextWidget,
   EmailWidget: MyEmailWidget,
+  CheckboxWidget: MyCheckboxWidget,
+  CheckboxesWidget: MyCheckboxesWidget,
 }
 
 // create the overall theme to use on the other page

src/core/components/Filter.tsx

@@ -154,18 +154,20 @@ function DebouncedInput({
   debounce?: number
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
   const [value, setValue] = React.useState(initialValue)
+  const onChangeRef = React.useRef(onChange)
+  onChangeRef.current = onChange
 
   React.useEffect(() => {
     setValue(initialValue)
   }, [initialValue])
 
   React.useEffect(() => {
     const timeout = setTimeout(() => {
-      onChange(value)
+      onChangeRef.current(value)
     }, debounce)
 
     return () => clearTimeout(timeout)
-  }, [value, debounce, onChange])
+  }, [value, debounce])
 
   return <input {...props} value={value} onChange={(e) => setValue(e.target.value)} />
 }

src/core/components/Table.tsx

@@ -1,5 +1,6 @@
 import {
   ColumnDef,
+  ColumnFiltersState,
   FilterFn,
   flexRender,
   getCoreRowModel,
@@ -138,6 +139,8 @@ type TableProps<TData> = {
   onPaginationChange?: OnChangeFn<PaginationState>
   pageCount?: number
   pageSizeOptions?: number[]
+  onGlobalFilterChange?: (filter: string) => void
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void
   classNames?: {
     table?: string
     thead?: string
@@ -191,9 +194,12 @@ const Table = <TData,>({
   onPaginationChange,
   pageCount: controlledPageCount,
   pageSizeOptions = [5, 10, 20, 30, 40, 50],
+  onGlobalFilterChange,
+  onColumnFiltersChange,
 }: TableProps<TData>) => {
   const [sorting, setSorting] = React.useState([])
   const [globalFilter, setGlobalFilter] = React.useState("")
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
   const [internalPagination, setInternalPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 5,
@@ -222,10 +228,12 @@ const Table = <TData,>({
     pageCount: manualPagination ? controlledPageCount : undefined,
     state: {
       sorting: sorting,
+      columnFilters: columnFilters,
       globalFilter: globalFilter,
       pagination: resolvedPaginationState,
     },
     onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
     onGlobalFilterChange: setGlobalFilter,
     onPaginationChange: handlePaginationChange,
     globalFilterFn: defaultGlobalFilterFn,
@@ -239,14 +247,41 @@ const Table = <TData,>({
   const globalSearchTooltipId = React.useId()
 
   React.useEffect(() => {
-    if (!addPagination) {
+    if (!addPagination) return
+    if (!manualPagination && pageCount > 0 && pageIndex >= pageCount) {
+      table.setPageIndex(0)
+    }
+  }, [addPagination, pageCount, pageIndex, table, manualPagination])
+
+  const isFirstFilterRender = React.useRef(true)
+  React.useEffect(() => {
+    if (isFirstFilterRender.current) {
+      isFirstFilterRender.current = false
       return
     }
+    if (!addPagination) return
+    if (manualPagination) {
+      onGlobalFilterChange?.(globalFilter)
+    } else {
+      table.setPageIndex(0)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globalFilter])
 
-    if (!manualPagination && pageCount > 0 && pageIndex >= pageCount) {
+  const isFirstColumnFilterRender = React.useRef(true)
+  React.useEffect(() => {
+    if (isFirstColumnFilterRender.current) {
+      isFirstColumnFilterRender.current = false
+      return
+    }
+    if (!addPagination) return
+    if (manualPagination) {
+      onColumnFiltersChange?.(columnFilters)
+    } else {
       table.setPageIndex(0)
     }
-  }, [addPagination, pageCount, pageIndex, table, manualPagination])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columnFilters])
 
   return (
     <>