@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/data-grid/DataGrid.recipe.d.ts

@@ -38,7 +38,7 @@ export declare const CLASSES: {
     };
     readonly interactive: "data-grid--interactive";
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "data-grid";
     readonly slots: {
         readonly root: {};

package/dist/components/data-grid/createDataGrid.d.ts

@@ -1,4 +1,5 @@
-import { type Accessor, type JSX } from "solid-js";
+import { type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 /**
  * The imperative grid model.
  *

package/dist/components/data-grid/createDataGrid.js

@@ -1,5 +1,4 @@
-import { createMemo, createSignal, getOwner } from "solid-js";
-import { createStore, produce } from "solid-js/store";
+import { createMemo, createSignal, createStore, flush, getOwner } from "solid-js";
 const derive = (fn)=>getOwner() ? createMemo(fn) : fn;
 const compareValues = (a, b, dataType)=>{
     if (a === b) return 0;
@@ -19,22 +18,34 @@ function createDataGrid(options = {}) {
         sortable: options.sortable ?? true,
         searchable: options.searchable ?? false
     };
-    const [columnStore, setColumnStore] = createStore({
+    const settled = (write)=>(...args)=>{
+            write(...args);
+            flush();
+        };
+    const [columnStore, writeColumnStore] = createStore({
         items: [
             ...options.columns ?? []
         ]
     });
-    const [rowStore, setRowStore] = createStore({
+    const setColumnStore = settled(writeColumnStore);
+    const [rowStore, writeRowStore] = createStore({
         items: [
             ...options.rows ?? []
         ]
     });
-    const [sort, writeSort] = createSignal(options.sort ?? null);
-    const [queries, setQueries] = createSignal({});
-    const [page, setPage] = createSignal(0);
-    const [pageSize, setPageSize] = createSignal(options.pageSize ?? 0);
-    const [selectedIds, setSelectedIds] = createSignal(new Set());
-    const [groupBy, setGroupBy] = createSignal(options.groupBy ?? null);
+    const setRowStore = settled(writeRowStore);
+    const [sort, writeSortSignal] = createSignal(options.sort ?? null);
+    const writeSort = settled(writeSortSignal);
+    const [queries, writeQueries] = createSignal({});
+    const setQueries = settled(writeQueries);
+    const [page, writePage] = createSignal(0);
+    const setPage = settled(writePage);
+    const [pageSize, writePageSize] = createSignal(options.pageSize ?? 0);
+    const setPageSize = settled(writePageSize);
+    const [selectedIds, writeSelectedIds] = createSignal(new Set());
+    const setSelectedIds = settled(writeSelectedIds);
+    const [groupBy, writeGroupBy] = createSignal(options.groupBy ?? null);
+    const setGroupBy = settled(writeGroupBy);
     const selectionMode = ()=>options.selection ?? "none";
     const identify = (row, index)=>{
         if (options.getRowId) return options.getRowId(row, index);
@@ -112,8 +123,8 @@ function createDataGrid(options = {}) {
     });
     return {
         addColumn (name, label, dataType = "string", columnOptions = {}) {
-            setColumnStore("items", produce((items)=>{
-                items.push({
+            setColumnStore((store)=>{
+                store.items.push({
                     name,
                     label,
                     dataType,
@@ -122,35 +133,41 @@ function createDataGrid(options = {}) {
                     ...columnDefaults,
                     ...columnOptions
                 });
-            }));
+            });
         },
         removeColumn (name) {
-            setColumnStore("items", (items)=>items.filter((column)=>column.name !== name));
+            setColumnStore((store)=>{
+                store.items = store.items.filter((column)=>column.name !== name);
+            });
         },
         addRow (row, index) {
-            setRowStore("items", produce((items)=>{
-                if (void 0 === index) items.push(row);
-                else items.splice(index, 0, row);
-            }));
+            setRowStore((store)=>{
+                if (void 0 === index) store.items.push(row);
+                else store.items.splice(index, 0, row);
+            });
         },
         deleteRow (index) {
-            setRowStore("items", produce((items)=>{
-                items.splice(index, 1);
-            }));
+            setRowStore((store)=>{
+                store.items.splice(index, 1);
+            });
         },
         setRows (next) {
-            setRowStore("items", [
-                ...next
-            ]);
+            setRowStore((store)=>{
+                store.items = [
+                    ...next
+                ];
+            });
         },
         columns,
         visibleColumns,
         columnsByName,
         toggleColumn (name, visible) {
-            setColumnStore("items", (items)=>items.map((column)=>column.name === name ? {
+            setColumnStore((store)=>{
+                store.items = store.items.map((column)=>column.name === name ? {
                         ...column,
                         visible: visible ?? !column.visible
-                    } : column));
+                    } : column);
+            });
         },
         rows,
         filteredRows,

package/dist/components/data-grid/index.d.ts

@@ -1,7 +1,7 @@
 export type { CreateDataGridOptions, DataGridCellContext, DataGridColumn, DataGridColumnOptions, DataGridDataType, DataGridModel, DataGridRow, DataGridSelectionMode, DataGridSort, DataGridSortDirection, } from "./createDataGrid";
 export { createDataGrid } from "./createDataGrid";
 export type { DataGridBorders, DataGridProps, DataGridSticky, DataGridStriping, } from "./DataGrid.generated";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { DataGridProps as Props } from "./DataGrid.generated";
 import type { DataGridRow as Row } from "./createDataGrid";
 declare const DataGrid: <R extends Row = Row>(props: Props<R>) => JSX.Element;

package/dist/components/date-field/DateField.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DateField.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type DateFieldVariant = "primary" | "secondary";
 export type DateFieldRenderProps = {

package/dist/components/date-field/DateField.generated.js

@@ -1,8 +1,8 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DateField.css";
-import { createContext, createSignal, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createSignal, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./DateField.recipe.js";
 import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<input>"), _tmpl$3 = /*#__PURE__*/ template("<span>");
@@ -12,34 +12,18 @@ const invokeEventHandler = (handler, event)=>{
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutDateFieldRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "name",
-        "value",
-        "defaultValue",
-        "onChange",
-        "onBlur",
-        "fullWidth",
-        "variant",
-        "state",
-        "disabled",
-        "issues",
-        "required"
-    ]);
-    const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
-    const isControlled = ()=>void 0 !== local.value;
-    const value = ()=>isControlled() ? local.value ?? "" : internalValue();
-    const variant = ()=>local.variant ?? "primary";
-    const fullWidth = ()=>Boolean(local.fullWidth);
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
-    const isRequired = ()=>Boolean(local.required) || Boolean(local.required);
+    const others = omit(p, "children", "class", "dataTheme", "style", "name", "value", "defaultValue", "onChange", "onBlur", "fullWidth", "variant", "state", "disabled", "issues", "required");
+    const [internalValue, setInternalValue] = createSignal(p.defaultValue ?? "");
+    const isControlled = ()=>void 0 !== p.value;
+    const value = ()=>isControlled() ? p.value ?? "" : internalValue();
+    const variant = ()=>p.variant ?? "primary";
+    const fullWidth = ()=>Boolean(p.fullWidth);
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues));
+    const isRequired = ()=>Boolean(p.required) || Boolean(p.required);
     const setValue = (nextValue)=>{
         if (!isControlled()) setInternalValue(nextValue);
-        local.onChange?.(nextValue);
+        p.onChange?.(nextValue);
     };
     const renderProps = ()=>({
             value: value(),
@@ -49,21 +33,21 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
         });
     const contextValue = {
         value,
-        name: ()=>local.name,
+        name: ()=>p.name,
         variant,
         fullWidth,
         isDisabled,
         isInvalid,
         isRequired,
-        onBlur: ()=>local.onBlur,
+        onBlur: ()=>p.onBlur,
         setValue
     };
-    return createComponent(DateFieldContext.Provider, {
+    return createComponent(DateFieldContext, {
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, p.class)
                 }), {
                 "data-slot": "date-field",
                 get ["data-invalid"] () {
@@ -82,15 +66,15 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : void 0;
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
+            }), true);
             insert(_el$, (()=>{
-                var _c$ = memo(()=>"function" == typeof local.children);
-                return ()=>_c$() ? local.children(renderProps()) : memo(()=>!!local.children)() ? local.children : createComponent(DateFieldGroup, {
+                var _c$ = memo(()=>"function" == typeof p.children);
+                return ()=>_c$() ? p.children(renderProps()) : memo(()=>!!p.children)() ? p.children : createComponent(DateFieldGroup, {
                         get children () {
                             return createComponent(DateFieldInput, {});
                         }
@@ -107,43 +91,36 @@ const DateFieldRoot = defineComponent({
 });
 const __solidLayoutDateFieldGroup = (_stable, p)=>{
     const context = useContext(DateFieldContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style");
     const renderProps = ()=>({
             value: context?.value() ?? "",
             isInvalid: context?.isInvalid() ?? false,
             isDisabled: context?.isDisabled() ?? false,
             isRequired: context?.isRequired() ?? false
         });
-    return (()=>{
-        var _el$2 = _tmpl$();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, local.class)
-            }), {
-            "data-slot": "date-input-group",
-            get ["data-invalid"] () {
-                return context?.isInvalid() ? "true" : void 0;
-            },
-            get ["data-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$2, (()=>{
-            var _c$2 = memo(()=>"function" == typeof local.children);
-            return ()=>_c$2() ? local.children(renderProps()) : local.children;
-        })());
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$();
+    spread(_el$2, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, p.class)
+        }), {
+        "data-slot": "date-input-group",
+        get ["data-invalid"] () {
+            return context?.isInvalid() ? "true" : void 0;
+        },
+        get ["data-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$2, (()=>{
+        var _c$2 = memo(()=>"function" == typeof p.children);
+        return ()=>_c$2() ? p.children(renderProps()) : p.children;
+    })());
+    return _el$2;
 };
 const DateFieldGroup = defineComponent({
     recipe: componentRecipe,
@@ -152,60 +129,51 @@ const DateFieldGroup = defineComponent({
 });
 const __solidLayoutDateFieldInput = (_stable, p)=>{
     const context = useContext(DateFieldContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "onInput",
-        "onBlur",
-        "name"
-    ]);
+    const others = omit(p, "class", "dataTheme", "style", "onInput", "onBlur", "name");
     const handleInput = (event)=>{
-        invokeEventHandler(local.onInput, event);
+        invokeEventHandler(p.onInput, event);
         if (event.defaultPrevented) return;
         context?.setValue(event.currentTarget.value);
     };
     const handleBlur = (event)=>{
-        invokeEventHandler(local.onBlur, event);
+        invokeEventHandler(p.onBlur, event);
         invokeEventHandler(context?.onBlur(), event);
     };
-    return (()=>{
-        var _el$3 = _tmpl$2();
-        spread(_el$3, mergeProps(others, {
-            type: "date"
-        }, ()=>({
-                class: twMerge(CLASSES.Input.base, local.class)
-            }), {
-            "data-slot": "date-input-group-input",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get name () {
-                return local.name ?? context?.name();
-            },
-            get value () {
-                return context?.value() ?? "";
-            },
-            get disabled () {
-                return context?.isDisabled();
-            },
-            get required () {
-                return context?.isRequired();
-            },
-            get ["aria-invalid"] () {
-                return context?.isInvalid() ? "true" : void 0;
-            },
-            get ["aria-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            onInput: handleInput,
-            onBlur: handleBlur
-        }), false, false);
-        return _el$3;
-    })();
+    var _el$3 = _tmpl$2();
+    spread(_el$3, mergeProps(others, {
+        type: "date"
+    }, ()=>({
+            class: twMerge(CLASSES.Input.base, p.class)
+        }), {
+        "data-slot": "date-input-group-input",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get name () {
+            return p.name ?? context?.name();
+        },
+        get value () {
+            return context?.value() ?? "";
+        },
+        get disabled () {
+            return context?.isDisabled();
+        },
+        get required () {
+            return context?.isRequired();
+        },
+        get ["aria-invalid"] () {
+            return context?.isInvalid() ? "true" : void 0;
+        },
+        get ["aria-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        onInput: handleInput,
+        onBlur: handleBlur
+    }), false);
+    return _el$3;
 };
 const DateFieldInput = defineComponent({
     recipe: componentRecipe,
@@ -213,28 +181,21 @@ const DateFieldInput = defineComponent({
     embedded: true
 });
 const __solidLayoutDateFieldInputContainer = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$4 = _tmpl$();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.InputContainer.base, local.class)
-            }), {
-            "data-slot": "date-input-group-input-container",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children);
-        return _el$4;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$4 = _tmpl$();
+    spread(_el$4, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.InputContainer.base, p.class)
+        }), {
+        "data-slot": "date-input-group-input-container",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$4, ()=>p.children);
+    return _el$4;
 };
 const DateFieldInputContainer = defineComponent({
     recipe: componentRecipe,
@@ -242,44 +203,36 @@ const DateFieldInputContainer = defineComponent({
     embedded: true
 });
 const __solidLayoutDateFieldSegment = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "segment"
-    ]);
-    return (()=>{
-        var _el$5 = _tmpl$3();
-        spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Segment.base, local.class)
-            }), {
-            "data-slot": "date-input-group-segment",
-            get ["data-type"] () {
-                return local.segment?.type;
-            },
-            get ["data-placeholder"] () {
-                return local.segment?.isPlaceholder ? "true" : void 0;
-            },
-            get ["data-invalid"] () {
-                return local.segment?.issues?.length ? "true" : void 0;
-            },
-            get ["data-focused"] () {
-                return local.segment?.isFocused ? "true" : void 0;
-            },
-            get ["data-disabled"] () {
-                return local.segment?.state === "disabled" ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$5, ()=>local.children ?? local.segment?.text);
-        return _el$5;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style", "segment");
+    var _el$5 = _tmpl$3();
+    spread(_el$5, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Segment.base, p.class)
+        }), {
+        "data-slot": "date-input-group-segment",
+        get ["data-type"] () {
+            return p.segment?.type;
+        },
+        get ["data-placeholder"] () {
+            return p.segment?.isPlaceholder ? "true" : void 0;
+        },
+        get ["data-invalid"] () {
+            return p.segment?.issues?.length ? "true" : void 0;
+        },
+        get ["data-focused"] () {
+            return p.segment?.isFocused ? "true" : void 0;
+        },
+        get ["data-disabled"] () {
+            return p.segment?.state === "disabled" ? "true" : void 0;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$5, ()=>p.children ?? p.segment?.text);
+    return _el$5;
 };
 const DateFieldSegment = defineComponent({
     recipe: componentRecipe,
@@ -287,28 +240,21 @@ const DateFieldSegment = defineComponent({
     embedded: true
 });
 const __solidLayoutDateFieldPrefix = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$6 = _tmpl$();
-        spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Prefix.base, local.class)
-            }), {
-            "data-slot": "date-input-group-prefix",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$6;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$6 = _tmpl$();
+    spread(_el$6, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Prefix.base, p.class)
+        }), {
+        "data-slot": "date-input-group-prefix",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$6, ()=>p.children);
+    return _el$6;
 };
 const DateFieldPrefix = defineComponent({
     recipe: componentRecipe,
@@ -316,28 +262,21 @@ const DateFieldPrefix = defineComponent({
     embedded: true
 });
 const __solidLayoutDateFieldSuffix = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$();
-        spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Suffix.base, local.class)
-            }), {
-            "data-slot": "date-input-group-suffix",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$7 = _tmpl$();
+    spread(_el$7, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Suffix.base, p.class)
+        }), {
+        "data-slot": "date-input-group-suffix",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const DateFieldSuffix = defineComponent({
     recipe: componentRecipe,

package/dist/components/date-field/DateField.recipe.d.ts

@@ -35,7 +35,7 @@ export declare const CLASSES: {
         readonly base: "date-input-group__suffix";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "date-field";
     readonly slots: {
         readonly "date-field": {};

package/dist/components/date-picker/DatePicker.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DatePicker.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type CalendarWeekdayFormat } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 type DatePickerBaseProps = {