@worknice/whiteboard 0.13.0 → 0.15.0

package/dist/fields/SingleSelectComboboxField.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode } from "react";
+import { type Dispatch, type ReactNode } from "react";
 import type { ValidationError } from "../forms/_types";
 type Props<Option> = {
     autoFocus?: boolean;
@@ -6,7 +6,6 @@ type Props<Option> = {
     id: string;
     includeValueInTracking?: boolean;
     onChange: Dispatch<Option>;
-    options: Array<Option>;
     optionToId: (option: Option) => string;
     optionToLabel: (option: Option) => ReactNode;
     value: Option | null;
@@ -20,6 +19,15 @@ type Props<Option> = {
     label: ReactNode;
     labelFont?: "heading" | "subheading" | "label" | "regular-bold" | "regular";
     required?: boolean;
-};
-declare const SingleSelectComboBoxField: <Option>({ autoFocus, disabled, id, includeValueInTracking, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, description, errors, label, labelFont, required, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+} & ({
+    options: Array<Option>;
+    optionGroups?: never;
+} | {
+    options?: never;
+    optionGroups: Array<{
+        header: string;
+        options: Array<Option>;
+    }>;
+});
+declare const SingleSelectComboBoxField: <Option>({ autoFocus, disabled, id, includeValueInTracking, onChange, options, optionGroups, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, description, errors, label, labelFont, required, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectComboBoxField;

package/dist/fields/SingleSelectComboboxField.js

@@ -1,13 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__ from "../forms/RegularField.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_SingleSelectComboboxInput_js_15b92560__ from "../inputs/SingleSelectComboboxInput.js";
-const SingleSelectComboBoxField = ({ autoFocus = false, disabled = false, id, includeValueInTracking, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, description, errors, label, labelFont = "label", required = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
-        description: description,
-        errors: errors,
-        label: label,
-        labelFont: labelFont,
-        required: required,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SingleSelectComboboxInput_js_15b92560__["default"], {
+const SingleSelectComboBoxField = ({ autoFocus = false, disabled = false, id, includeValueInTracking, onChange, options, optionGroups, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, description, errors, label, labelFont = "label", required = false })=>{
+    const comboboxInput = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (options) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SingleSelectComboboxInput_js_15b92560__["default"], {
             autoFocus: autoFocus,
             disabled: disabled,
             id: id,
@@ -22,7 +19,48 @@ const SingleSelectComboBoxField = ({ autoFocus = false, disabled = false, id, in
             searchFields: searchFields,
             onCreate: onCreate,
             onClear: onClear
-        })
+        });
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SingleSelectComboboxInput_js_15b92560__["default"], {
+            autoFocus: autoFocus,
+            disabled: disabled,
+            id: id,
+            includeValueInTracking: includeValueInTracking,
+            onChange: onChange,
+            optionGroups: optionGroups,
+            optionToId: optionToId,
+            optionToLabel: optionToLabel,
+            value: value,
+            placeholder: placeholder,
+            searchPlaceholder: searchPlaceholder,
+            searchFields: searchFields,
+            onCreate: onCreate,
+            onClear: onClear
+        });
+    }, [
+        autoFocus,
+        disabled,
+        id,
+        includeValueInTracking,
+        onChange,
+        optionGroups,
+        optionToId,
+        optionToLabel,
+        value,
+        placeholder,
+        searchPlaceholder,
+        searchFields,
+        onCreate,
+        onClear,
+        options
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
+        description: description,
+        errors: errors,
+        label: label,
+        labelFont: labelFont,
+        required: required,
+        children: comboboxInput
     });
+};
 const SingleSelectComboboxField_rslib_entry_ = SingleSelectComboBoxField;
 export { SingleSelectComboboxField_rslib_entry_ as default };

package/dist/inputs/SingleSelectComboboxInput.d.ts

@@ -5,7 +5,6 @@ type Props<Option> = {
     id: string;
     includeValueInTracking?: boolean;
     onChange: Dispatch<Option>;
-    options: Array<Option>;
     optionToId: (option: Option) => string;
     optionToLabel: (option: Option) => ReactNode;
     value: Option | null;
@@ -14,6 +13,15 @@ type Props<Option> = {
     searchFields: Array<keyof Option & string>;
     onCreate?: (onClose: () => void, searchTerm: string) => ReactNode;
     onClear?: () => void;
-};
-declare const SingleSelectComboBoxInput: <Option>({ autoFocus, disabled, id, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+} & ({
+    options: Array<Option>;
+    optionGroups?: never;
+} | {
+    options?: never;
+    optionGroups: Array<{
+        header: string;
+        options: Array<Option>;
+    }>;
+});
+declare const SingleSelectComboBoxInput: <Option>({ autoFocus, disabled, id, onChange, options, optionGroups, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectComboBoxInput;

package/dist/inputs/SingleSelectComboboxInput.js

@@ -5,7 +5,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__ from "../utils/search.js";
 import * as __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__ from "./SingleSelectComboboxInput.module.js";
-const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear })=>{
+const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, onChange, options, optionGroups, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear })=>{
+    const listboxId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useId)();
+    const buttonId = id;
     const optionsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)([]);
     const searchRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const listBoxRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
@@ -13,10 +15,16 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
     const [createNewOption, setCreateNewOption] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [activeIndex, setActiveIndex] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
-    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(options.map((option)=>({
-            ...option,
-            id: optionToId(option)
-        })), searchFields, searchTerm) : options;
+    const filteredOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>"" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])((options ?? optionGroups.flatMap((group)=>group.options) ?? []).map((option)=>({
+                ...option,
+                id: optionToId(option)
+            })), searchFields, searchTerm) : options ?? optionGroups.flatMap((group)=>group.options) ?? [], [
+        options,
+        optionGroups,
+        searchFields,
+        searchTerm,
+        optionToId
+    ]);
     const { refs: floatingUiRefs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
         open: isOpen,
         onOpenChange: (open)=>{
@@ -54,9 +62,79 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
         dismiss,
         listNav
     ]);
+    const renderOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((option, index)=>{
+        const optionId = optionToId(option);
+        const optionLabel = optionToLabel(option);
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+            role: "option",
+            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem, {
+                [__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].activeListItem]: activeIndex === index
+            }),
+            ...getItemProps({
+                onClick: ()=>{
+                    setIsOpen(false);
+                    onChange(option);
+                },
+                ref: (node)=>{
+                    optionsRef.current[index] = node;
+                }
+            }),
+            children: [
+                optionLabel,
+                value && optionToId(value) === optionToId(option) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "CheckMark"
+                }) : null
+            ]
+        }, optionId);
+    }, [
+        activeIndex,
+        onChange,
+        optionToId,
+        optionToLabel,
+        value,
+        getItemProps
+    ]);
+    const renderOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if (options) return filteredOptions.map(renderOption);
+        return optionGroups.map((group)=>{
+            if (0 === group.options.length) return null;
+            const groupOptionIds = new Set(group.options.map((o)=>optionToId(o)));
+            const filteredGroupOptions = filteredOptions.filter((o)=>groupOptionIds.has(optionToId(o)));
+            if (0 === filteredGroupOptions.length) return null;
+            const headerId = `${listboxId}-group-${group.header}`;
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+                role: "presentation",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        id: headerId,
+                        className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItemGroupHeader,
+                        children: group.header
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+                        role: "group",
+                        "aria-labelledby": headerId,
+                        children: filteredGroupOptions.map((option)=>{
+                            const optionIndex = optionGroups.flatMap((group)=>group.options).indexOf(option);
+                            return renderOption(option, optionIndex);
+                        })
+                    })
+                ]
+            }, group.header);
+        });
+    }, [
+        filteredOptions,
+        listboxId,
+        optionGroups,
+        optionToId,
+        renderOption,
+        options
+    ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                "aria-controls": listboxId,
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
                 autoFocus: autoFocus,
                 disabled: disabled,
                 className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].toggleButton,
@@ -64,7 +142,7 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
                 type: "button",
                 ref: floatingUiRefs.setReference,
                 ...getReferenceProps({
-                    id: id
+                    id: buttonId
                 }),
                 children: [
                     value ? optionToLabel(value) : placeholder ?? "Select an option",
@@ -90,82 +168,60 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
                     })
                 ]
             }),
-            !disabled && isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingPortal, {
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingFocusManager, {
-                        context: context,
-                        initialFocus: searchRef,
-                        modal: false,
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            ref: floatingUiRefs.setFloating,
-                            style: floatingStyles,
-                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].menu),
-                            ...getFloatingProps(),
-                            children: [
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
-                                    type: "text",
-                                    className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].searchInput,
-                                    placeholder: searchPlaceholder ?? "Search for an option",
-                                    "aria-autocomplete": "list",
-                                    onChange: (e)=>{
-                                        setSearchTerm(e.target.value);
-                                        setActiveIndex(0);
-                                    },
-                                    value: searchTerm,
-                                    ref: searchRef,
-                                    onKeyDown: (e)=>{
-                                        if ("Enter" === e.key && null != activeIndex) {
-                                            setIsOpen(false);
-                                            onChange(filteredOptions[activeIndex]);
-                                        }
+            !disabled && isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingPortal, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingFocusManager, {
+                    context: context,
+                    initialFocus: searchRef,
+                    modal: false,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                        ref: floatingUiRefs.setFloating,
+                        style: floatingStyles,
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].menu),
+                        ...getFloatingProps(),
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                                type: "text",
+                                className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].searchInput,
+                                placeholder: searchPlaceholder ?? "Search for an option",
+                                "aria-autocomplete": "list",
+                                onChange: (e)=>{
+                                    setSearchTerm(e.target.value);
+                                    setActiveIndex(0);
+                                },
+                                value: searchTerm,
+                                ref: searchRef,
+                                onKeyDown: (e)=>{
+                                    if ("Enter" === e.key && null != activeIndex) {
+                                        setIsOpen(false);
+                                        onChange(filteredOptions[activeIndex]);
                                     }
-                                }),
-                                0 !== filteredOptions.length || onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("ul", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listBox,
-                                    ref: listBoxRef,
-                                    children: [
-                                        filteredOptions.map((option, index)=>{
-                                            const optionId = optionToId(option);
-                                            const optionLabel = optionToLabel(option);
-                                            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
-                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem, {
-                                                    [__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].activeListItem]: activeIndex === index
-                                                }),
-                                                ...getItemProps({
-                                                    onClick: ()=>{
-                                                        setIsOpen(false);
-                                                        onChange(option);
-                                                    },
-                                                    ref: (node)=>{
-                                                        optionsRef.current[index] = node;
-                                                    }
-                                                }),
-                                                children: [
-                                                    optionLabel,
-                                                    value && optionToId(value) === optionToId(option) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
-                                                        symbol: "CheckMark"
-                                                    }) : null
-                                                ]
-                                            }, optionId);
-                                        }),
-                                        onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
-                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-                                                __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem,
-                                                __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItemCreate
-                                            ]),
-                                            onClick: ()=>{
-                                                setIsOpen(false);
-                                                setCreateNewOption(true);
-                                            },
-                                            children: [
-                                                "+ Create new option ",
-                                                searchTerm ? `"${searchTerm}"` : null
-                                            ]
-                                        }) : null
-                                    ]
-                                }) : null
-                            ]
-                        })
+                                }
+                            }),
+                            0 !== filteredOptions.length || onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("ul", {
+                                className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listBox,
+                                ref: listBoxRef,
+                                id: listboxId,
+                                role: "listbox",
+                                "aria-labelledby": buttonId,
+                                children: [
+                                    renderOptions(),
+                                    onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+                                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                            __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem,
+                                            __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItemCreate
+                                        ]),
+                                        onClick: ()=>{
+                                            setIsOpen(false);
+                                            setCreateNewOption(true);
+                                        },
+                                        children: [
+                                            "+ Create new option ",
+                                            searchTerm ? `"${searchTerm}"` : null
+                                        ]
+                                    }) : null
+                                ]
+                            }) : null
+                        ]
                     })
                 })
             }) : null,

package/dist/inputs/SingleSelectComboboxInput.module.js

@@ -5,6 +5,7 @@ const SingleSelectComboboxInput_module_rslib_entry_ = {
     searchInput: "searchInput-s9NjcM",
     menu: "menu-f81oko",
     listBox: "listBox-biTMkv",
+    listItemGroupHeader: "listItemGroupHeader-SdoaP2",
     listItem: "listItem-ASZkke",
     listItemCreate: "listItemCreate-_tGId1",
     activeListItem: "activeListItem-_B_E3X"

package/dist/inputs/SingleSelectComboboxInput_module.css

@@ -54,6 +54,11 @@
   overflow-y: auto;
 }
 
+.listItemGroupHeader-SdoaP2 {
+  padding: var(--size-n2) var(--size-n2) var(--size-n2) 0;
+  font: var(--font-regular-bold);
+}
+
 .listItem-ASZkke {
   padding: var(--size-n2);
   border-radius: var(--size-n3);

package/dist/layouts/FullLayout_module.css

@@ -199,12 +199,12 @@
 
 @media (min-width: 1440px) {
   .centerLayoutContent-OXDuxB {
-    padding: var(--size-p5) var(--size-p5);
+    padding: var(--size-p4) var(--size-p4);
   }
 }
 
 .narrowLayoutContent-v6PtTH {
-  padding: 70px var(--size-00) var(--size-00);
+  padding: 60px var(--size-00) var(--size-00);
   grid-template-columns: minmax(0, 720px);
   justify-content: center;
   display: grid;
@@ -212,19 +212,19 @@
 
 @media (min-width: 768px) {
   .narrowLayoutContent-v6PtTH {
-    padding: 70px var(--size-p3) var(--size-p3);
+    padding: 60px var(--size-p3) var(--size-p3);
   }
 }
 
 @media (min-width: 1440px) {
   .narrowLayoutContent-v6PtTH {
-    padding: 70px var(--size-p5) var(--size-p5);
+    padding: 60px var(--size-p4) var(--size-p4);
   }
 }
 
 .content-kaxfp0 {
   column-gap: var(--size-p2);
-  padding-top: 70px;
+  padding-top: 60px;
   padding-bottom: var(--size-00);
   padding-left: var(--size-00);
   padding-right: var(--size-00);
@@ -234,7 +234,7 @@
 
 @media (min-width: 768px) {
   .content-kaxfp0 {
-    padding: 70px var(--size-p3) var(--size-p3);
+    padding: 60px var(--size-p3) var(--size-p3);
   }
 }
 
@@ -255,9 +255,9 @@
 
 @media (min-width: 1440px) {
   .content-kaxfp0 {
-    padding-bottom: var(--size-p5);
-    padding-left: var(--size-p5);
-    padding-right: var(--size-p5);
+    padding-bottom: var(--size-p4);
+    padding-left: var(--size-p4);
+    padding-right: var(--size-p4);
   }
 }
 

package/dist/layouts/MinimalLayout_module.css

@@ -8,18 +8,20 @@
 }
 
 .main-dwl9Kv {
-  padding: 70px var(--size-00) var(--size-00);
+  padding: 60px var(--size-00) var(--size-00);
 }
 
 @media (min-width: 768px) {
   .main-dwl9Kv {
-    padding: 70px var(--size-p3) var(--size-p3);
+    padding: 60px var(--size-p3) var(--size-p3);
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1440px) {
   .main-dwl9Kv {
-    padding: var(--size-p5);
+    padding-bottom: var(--size-p4);
+    padding-left: var(--size-p4);
+    padding-right: var(--size-p4);
   }
 }
 

package/dist/presentation/Table.d.ts

@@ -62,10 +62,9 @@ type Props<Type> = {
     estimatedRowSize?: number;
     emptyState?: ReactNode;
     id?: string;
-    showRowCount?: boolean;
     pathName?: string;
     localStorageSchema?: ZodTypeAny;
     getRowId: (row: Type) => string;
 };
-declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, showRowCount, localStorageSchema, getRowId, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, localStorageSchema, getRowId, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/dist/presentation/Table.js

@@ -21,7 +21,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText
 import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
 const selectColumnId = "_selectColumn";
-const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, showRowCount = true, localStorageSchema, getRowId })=>{
+const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, localStorageSchema, getRowId })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
     const { refs, x: bulkSelectionModalXCoordinate } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.useFloating)({
@@ -336,9 +336,9 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                             }) : null
                         ]
                     }) : null,
-                    showRowCount || showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                    showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
                         children: [
-                            showRowCount ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
                                 children: [
                                     "Showing ",
                                     table.getPreGroupedRowModel().flatRows.length,
@@ -346,8 +346,8 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                     " ",
                                     table.getPreFilteredRowModel().flatRows.length
                                 ]
-                            }) : null,
-                            showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
                                 onClick: ()=>{
                                     table.setColumnFilters(columnFiltersInitialState);
                                     table.resetGlobalFilter();
@@ -356,7 +356,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                 type: "secondary",
                                 size: "small",
                                 children: "Reset filters and search"
-                            }) : null
+                            })
                         ]
                     }) : null,
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -461,7 +461,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                             ]
                         })
                     }),
-                    showRowCount || shouldShowCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                         className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].downloadLink,
                         children: [
                             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
@@ -479,7 +479,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                 children: "Download all rows as CSV"
                             }) : null
                         ]
-                    }) : null
+                    })
                 ]
             })
         ]

package/dist/validators/isValidDate.d.ts

@@ -0,0 +1,8 @@
+declare const isValidDate: <Model extends {
+    [Field: string]: any;
+}>(field: keyof Model, message?: string) => (data: Model) => {
+    id: string;
+    field: keyof Model;
+    message: string;
+} | null;
+export default isValidDate;

package/dist/validators/isValidDate.js

@@ -0,0 +1,18 @@
+import * as __WEBPACK_EXTERNAL_MODULE_temporal_polyfill_11c1db1c__ from "temporal-polyfill";
+import * as __WEBPACK_EXTERNAL_MODULE_uuid__ from "uuid";
+const isValidDate = (field, message = "Invalid date.")=>(data)=>{
+        const value = data[field];
+        if (null == value) return null;
+        if ("string" == typeof value && "" !== value.trim()) try {
+            __WEBPACK_EXTERNAL_MODULE_temporal_polyfill_11c1db1c__.Temporal.PlainDate.from(value);
+        } catch  {
+            return {
+                id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                field,
+                message
+            };
+        }
+        return null;
+    };
+const isValidDate_rslib_entry_ = isValidDate;
+export { isValidDate_rslib_entry_ as default };

package/dist/validators/isValidDate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/validators/isValidDate.test.js

@@ -0,0 +1,107 @@
+import * as __WEBPACK_EXTERNAL_MODULE_vitest__ from "vitest";
+import * as __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__ from "./isValidDate.js";
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.describe)("isValidDate", ()=>{
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns null for null values", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: null
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toBeNull();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns null for undefined values", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({});
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toBeNull();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns null for valid date strings", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(validator({
+            date: "2023-12-25"
+        })).toBeNull();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(validator({
+            date: "2023-01-01"
+        })).toBeNull();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(validator({
+            date: "2024-02-29"
+        })).toBeNull();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns error for invalid date strings", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: "invalid-date"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toEqual({
+            id: __WEBPACK_EXTERNAL_MODULE_vitest__.expect.any(String),
+            field: "date",
+            message: "Invalid date."
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns error for invalid date formats", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: "25/12/2023"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toEqual({
+            id: __WEBPACK_EXTERNAL_MODULE_vitest__.expect.any(String),
+            field: "date",
+            message: "Invalid date."
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns error for impossible dates", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: "2023-02-30"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toEqual({
+            id: __WEBPACK_EXTERNAL_MODULE_vitest__.expect.any(String),
+            field: "date",
+            message: "Invalid date."
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns null for empty strings", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: ""
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toBeNull();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("returns null for whitespace-only strings", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result = validator({
+            date: "   "
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toBeNull();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("uses custom error message when provided", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("birthDate", "Please enter a valid birth date.");
+        const result = validator({
+            birthDate: "invalid"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toEqual({
+            id: __WEBPACK_EXTERNAL_MODULE_vitest__.expect.any(String),
+            field: "birthDate",
+            message: "Please enter a valid birth date."
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("works with different field names", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("startDate");
+        const result = validator({
+            startDate: "not-a-date"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result).toEqual({
+            id: __WEBPACK_EXTERNAL_MODULE_vitest__.expect.any(String),
+            field: "startDate",
+            message: "Invalid date."
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.it)("generates unique IDs for each error", ()=>{
+        const validator = (0, __WEBPACK_EXTERNAL_MODULE__isValidDate_js_ab620b77__["default"])("date");
+        const result1 = validator({
+            date: "invalid1"
+        });
+        const result2 = validator({
+            date: "invalid2"
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(result1?.id).not.toEqual(result2?.id);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -38,7 +38,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^3.22.3",
-    "@worknice/utils": "^0.6.35"
+    "@worknice/utils": "^0.6.37"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^1.1.10",
@@ -70,7 +70,8 @@
     "semantic-release-scope-filter": "^1.0.0",
     "temporal-polyfill": "^0.2.5",
     "typescript": "~5.5.0",
-    "uuid": "^11.0.5"
+    "uuid": "^11.0.5",
+    "vitest": "^2.1.0"
   },
   "peerDependencies": {
     "@react-email/components": "^0.0.7",
@@ -87,7 +88,8 @@
     "fix": "if [[ -z $TURBO_HASH ]]; then pnpm turbo fix; else exit 0; fi",
     "fix:lint": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
     "fix:format": "prettier '**/*.{js,ts,tsx,css}' --write",
-    "test": "exit 0",
+    "test": "vitest run",
+    "test:unit": "vitest run",
     "test:format": "prettier '**/*.{js,ts,tsx,css}' --check",
     "test:lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "test:types": "tsc --noEmit --pretty"