@1771technologies/lytenyte-pro 1.0.0-beta.34 → 1.0.0-beta.36

package/dist/sort-manager/hooks/use-sort-row-item.js

@@ -2,144 +2,139 @@ import { useMemo } from "react";
 import { useSortableColumnItems } from "./use-sortable-column-items.js";
 import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 export function useSortRowItems(sortItems, setSortItems, grid, pivotMode) {
-    const columnItems = useSortableColumnItems(grid, pivotMode);
-    const pivotColumns = grid.state.columnPivotColumns.useValue();
-    const columns = grid.state.columns.useValue();
-    const lookup = useMemo(() => {
-        return itemsWithIdToMap(pivotMode ? pivotColumns : columns);
-    }, [columns, pivotColumns, pivotMode]);
-    const unselectedSortedColumns = useMemo(() => {
-        const selected = new Set(sortItems.map((c) => c.columnId).filter((c) => c != null));
-        return columnItems.filter((c) => !selected.has(c.value));
-    }, [columnItems, sortItems]);
-    const sortRows = useMemo(() => {
-        return sortItems.map((item, i) => {
-            const columnItem = columnItems.find((s) => item.columnId === s.value) ?? null;
-            const columnOptions = columnItem
-                ? [columnItem, ...unselectedSortedColumns]
-                : unselectedSortedColumns;
-            // Handle select
-            const columnOnSelect = (column) => {
-                setSortItems((prev) => {
-                    const v = { ...prev[i] };
-                    v.columnId = column?.value;
-                    const next = [...prev];
-                    next.splice(i, 1, v);
-                    return next;
-                });
-            };
-            const columnSelected = columnItem;
-            const column = lookup.get(item.columnId);
-            let sortOptions;
-            if (!column)
-                sortOptions = [];
-            else if (column?.type === "number")
-                sortOptions = sortValuesForNumber;
-            else if (column?.type === "date")
-                sortOptions = sortValuesForDateAndDateTime;
-            else
-                sortOptions = sortValuesString;
-            const sortSelected = sortOptions.find((v) => v.value === item.sortOn) ?? null;
-            const sortOnSelect = (sortOn) => {
-                if (!sortOn)
-                    return;
-                setSortItems((prev) => {
-                    const v = { ...prev[i] };
-                    v.sortOn = sortOn.value;
-                    const next = [...prev];
-                    next.splice(i, 1, v);
-                    return next;
-                });
-            };
-            const sortDirectionOptions = sortDirectionValues;
-            const sortDirectionSelected = item.sortDirection === "ascending"
-                ? { label: "Asc", value: "ascending" }
-                : { label: "Desc", value: "descending" };
-            const sortDirectionOnSelect = (item) => {
-                if (!item)
-                    return;
-                setSortItems((prev) => {
-                    const v = { ...prev[i] };
-                    v.sortDirection = item.value;
-                    const next = [...prev];
-                    next.splice(i, 1, v);
-                    return next;
-                });
-            };
-            const onDelete = () => {
-                setSortItems((prev) => {
-                    const next = [...prev];
-                    next.splice(i, 1);
-                    if (!next.length) {
-                        return [{ sortDirection: "ascending", isCustom: false }];
-                    }
-                    return next;
-                });
-            };
-            const onAdd = () => {
-                setSortItems((prev) => {
-                    const next = [...prev];
-                    next.splice(i + 1, 0, { sortDirection: "ascending", isCustom: false });
-                    return next;
-                });
-            };
-            const maxSortCount = columnItems.length;
-            return {
-                index: i,
-                isCustom: item.isCustom,
-                columnItem,
-                columnOptions,
-                columnSelected,
-                columnOnSelect,
-                sortOptions,
-                sortSelected,
-                sortOnSelect,
-                sortDirectionOptions,
-                sortDirectionSelected,
-                sortDirectionOnSelect,
-                canAdd: maxSortCount > sortItems.length,
-                onAdd,
-                onDelete,
-            };
+  const columnItems = useSortableColumnItems(grid, pivotMode);
+  const pivotColumns = grid.state.columnPivotColumns.useValue();
+  const columns = grid.state.columns.useValue();
+  const lookup = useMemo(() => {
+    return itemsWithIdToMap(pivotMode ? pivotColumns : columns);
+  }, [columns, pivotColumns, pivotMode]);
+  const unselectedSortedColumns = useMemo(() => {
+    const selected = new Set(sortItems.map((c) => c.columnId).filter((c) => c != null));
+    return columnItems.filter((c) => !selected.has(c.value));
+  }, [columnItems, sortItems]);
+  const sortRows = useMemo(() => {
+    return sortItems.map((item, i) => {
+      const columnItem = columnItems.find((s) => item.columnId === s.value) ?? null;
+      const columnOptions = columnItem
+        ? [columnItem, ...unselectedSortedColumns]
+        : unselectedSortedColumns;
+      // Handle select
+      const columnOnSelect = (column) => {
+        setSortItems((prev) => {
+          const v = { ...prev[i] };
+          v.columnId = column?.value;
+          const next = [...prev];
+          next.splice(i, 1, v);
+          return next;
         });
-    }, [columnItems, lookup, setSortItems, sortItems, unselectedSortedColumns]);
-    return sortRows;
+      };
+      const columnSelected = columnItem;
+      const column = lookup.get(item.columnId);
+      let sortOptions;
+      if (!column) sortOptions = [];
+      else if (column?.type === "number") sortOptions = sortValuesForNumber;
+      else if (column?.type === "date") sortOptions = sortValuesForDateAndDateTime;
+      else sortOptions = sortValuesString;
+      const sortSelected = sortOptions.find((v) => v.value === item.sortOn) ?? null;
+      const sortOnSelect = (sortOn) => {
+        if (!sortOn) return;
+        setSortItems((prev) => {
+          const v = { ...prev[i] };
+          v.sortOn = sortOn.value;
+          const next = [...prev];
+          next.splice(i, 1, v);
+          return next;
+        });
+      };
+      const sortDirectionOptions = sortDirectionValues;
+      const sortDirectionSelected =
+        item.sortDirection === "ascending"
+          ? { label: "Asc", value: "ascending" }
+          : { label: "Desc", value: "descending" };
+      const sortDirectionOnSelect = (item) => {
+        if (!item) return;
+        setSortItems((prev) => {
+          const v = { ...prev[i] };
+          v.sortDirection = item.value;
+          const next = [...prev];
+          next.splice(i, 1, v);
+          return next;
+        });
+      };
+      const onDelete = () => {
+        setSortItems((prev) => {
+          const next = [...prev];
+          next.splice(i, 1);
+          if (!next.length) {
+            return [{ sortDirection: "ascending", isCustom: false }];
+          }
+          return next;
+        });
+      };
+      const onAdd = () => {
+        setSortItems((prev) => {
+          const next = [...prev];
+          next.splice(i + 1, 0, { sortDirection: "ascending", isCustom: false });
+          return next;
+        });
+      };
+      const maxSortCount = columnItems.length;
+      return {
+        index: i,
+        isCustom: item.isCustom,
+        columnItem,
+        columnOptions,
+        columnSelected,
+        columnOnSelect,
+        sortOptions,
+        sortSelected,
+        sortOnSelect,
+        sortDirectionOptions,
+        sortDirectionSelected,
+        sortDirectionOnSelect,
+        canAdd: maxSortCount > sortItems.length,
+        onAdd,
+        onDelete,
+      };
+    });
+  }, [columnItems, lookup, setSortItems, sortItems, unselectedSortedColumns]);
+  return sortRows;
 }
 const sortValuesForNumber = [
-    { label: "Values", value: "values" },
-    { label: "Absolute", value: "values_absolute" },
-    { label: "Nulls First", value: "values_nulls_first" },
-    { label: "Nulls First, Absolute", value: "values_nulls_first_absolute" },
+  { label: "Values", value: "values" },
+  { label: "Absolute", value: "values_absolute" },
+  { label: "Nulls First", value: "values_nulls_first" },
+  { label: "Nulls First, Absolute", value: "values_nulls_first_absolute" },
 ];
 const sortValuesForDateAndDateTime = [
-    { label: "Values", value: "values" },
-    { label: "Nulls First", value: "values_nulls_first" },
+  { label: "Values", value: "values" },
+  { label: "Nulls First", value: "values_nulls_first" },
 ];
 const sortValuesString = [
-    { label: "Values", value: "values" },
-    { label: "Insensitive", value: "values_insensitive" },
-    { label: "Insensitive, Ignore Punctuation", value: "value_insensitive_ignore" },
-    { label: "Insensitive, Trim", value: "value_insensitive_trim" },
-    { label: "Insensitive, Ignore Punctuation, Trim", value: "value_insensitive_ignore_trim" },
-    { label: "Ignore Punctuation", value: "values_ignore_punctuation" },
-    { label: "Ignore Punctuation, Trim", value: "values_ignore_punctuation_trim" },
-    { label: "Trim Whitespace", value: "values_trim" },
-    { label: "Nulls First", value: "values_nulls_first" },
-    { label: "Nulls First, Insensitive", value: "values_nulls_first_insensitive" },
-    { label: "Nulls First, Trim", value: "values_nulls_first_trim" },
-    { label: "Nulls First, Ignore Punctuation", value: "values_nulls_first_ignore" },
-    { label: "Nulls First, Insensitive, Trim", value: "values_nulls_first_insensitive_trim" },
-    {
-        label: "Nulls First, Insensitive, Ignore Punctuation",
-        value: "values_nulls_insensitive_first_ignore",
-    },
-    {
-        label: "Nulls First, Insensitive, Ignore Punctuation, Trim",
-        value: "values_nulls_first_insensitive_ignore_trim",
-    },
-    { label: "Nulls First, Ignore Punctuation, Trim", value: "values_nulls_first_ignore_trim" },
+  { label: "Values", value: "values" },
+  { label: "Insensitive", value: "values_insensitive" },
+  { label: "Insensitive, Ignore Punctuation", value: "value_insensitive_ignore" },
+  { label: "Insensitive, Trim", value: "value_insensitive_trim" },
+  { label: "Insensitive, Ignore Punctuation, Trim", value: "value_insensitive_ignore_trim" },
+  { label: "Ignore Punctuation", value: "values_ignore_punctuation" },
+  { label: "Ignore Punctuation, Trim", value: "values_ignore_punctuation_trim" },
+  { label: "Trim Whitespace", value: "values_trim" },
+  { label: "Nulls First", value: "values_nulls_first" },
+  { label: "Nulls First, Insensitive", value: "values_nulls_first_insensitive" },
+  { label: "Nulls First, Trim", value: "values_nulls_first_trim" },
+  { label: "Nulls First, Ignore Punctuation", value: "values_nulls_first_ignore" },
+  { label: "Nulls First, Insensitive, Trim", value: "values_nulls_first_insensitive_trim" },
+  {
+    label: "Nulls First, Insensitive, Ignore Punctuation",
+    value: "values_nulls_insensitive_first_ignore",
+  },
+  {
+    label: "Nulls First, Insensitive, Ignore Punctuation, Trim",
+    value: "values_nulls_first_insensitive_ignore_trim",
+  },
+  { label: "Nulls First, Ignore Punctuation, Trim", value: "values_nulls_first_ignore_trim" },
 ];
 const sortDirectionValues = [
-    { label: "Asc", value: "ascending" },
-    { label: "Desc", value: "descending" },
+  { label: "Asc", value: "ascending" },
+  { label: "Desc", value: "descending" },
 ];

package/dist/sort-manager/hooks/use-sortable-column-items.d.ts

@@ -1,5 +1,8 @@
 import type { Grid } from "../../+types";
-export declare function useSortableColumnItems(grid: Grid<any>, pivotMode: boolean): {
-    label: string;
-    value: string;
+export declare function useSortableColumnItems(
+  grid: Grid<any>,
+  pivotMode: boolean,
+): {
+  label: string;
+  value: string;
 }[];

package/dist/sort-manager/hooks/use-sortable-column-items.js

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 export function useSortableColumnItems(grid, pivotMode) {
-    const columns = grid.state.columns.useValue();
-    const pivotColumns = grid.state.columnPivotColumns.useValue();
-    const base = grid.state.columnBase.useValue();
-    const candidateColumns = useMemo(() => {
-        const candidates = pivotMode ? pivotColumns : columns;
-        return candidates.filter((c) => c.uiHints?.sortable ?? base.uiHints?.sortable);
-    }, [base.uiHints?.sortable, columns, pivotColumns, pivotMode]);
-    return useMemo(() => {
-        return candidateColumns.map((c) => ({ label: c.name ?? c.id, value: c.id }));
-    }, [candidateColumns]);
+  const columns = grid.state.columns.useValue();
+  const pivotColumns = grid.state.columnPivotColumns.useValue();
+  const base = grid.state.columnBase.useValue();
+  const candidateColumns = useMemo(() => {
+    const candidates = pivotMode ? pivotColumns : columns;
+    return candidates.filter((c) => c.uiHints?.sortable ?? base.uiHints?.sortable);
+  }, [base.uiHints?.sortable, columns, pivotColumns, pivotMode]);
+  return useMemo(() => {
+    return candidateColumns.map((c) => ({ label: c.name ?? c.id, value: c.id }));
+  }, [candidateColumns]);
 }

package/dist/sort-manager/root.d.ts

@@ -1,3 +1,9 @@
 import { type PropsWithChildren } from "react";
 import { type SortManagerContext } from "./context";
-export declare function Root({ sortItems, setSortItems, grid, mode, children, }: PropsWithChildren<SortManagerContext>): import("react/jsx-runtime").JSX.Element;
+export declare function Root({
+  sortItems,
+  setSortItems,
+  grid,
+  mode,
+  children,
+}: PropsWithChildren<SortManagerContext>): import("react/jsx-runtime").JSX.Element;

package/dist/sort-manager/root.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { context } from "./context";
-export function Root({ sortItems, setSortItems, grid, mode, children, }) {
-    const value = useMemo(() => {
-        return {
-            sortItems,
-            setSortItems,
-            grid,
-            mode,
-        };
-    }, [grid, mode, setSortItems, sortItems]);
-    return _jsx(context.Provider, { value: value, children: children });
+export function Root({ sortItems, setSortItems, grid, mode, children }) {
+  const value = useMemo(() => {
+    return {
+      sortItems,
+      setSortItems,
+      grid,
+      mode,
+    };
+  }, [grid, mode, setSortItems, sortItems]);
+  return _jsx(context.Provider, { value: value, children: children });
 }

package/dist/sort-manager/sort-add.d.ts

@@ -1,8 +1,16 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface SortAddProps {
-    readonly as?: SlotComponent<{
-        onAdd: () => void;
-        disabled: boolean;
-    }>;
+  readonly as?: SlotComponent<{
+    onAdd: () => void;
+    disabled: boolean;
+  }>;
 }
-export declare const SortAdd: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortAddProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SortAdd: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLButtonElement> &
+      import("react").ButtonHTMLAttributes<HTMLButtonElement> &
+      SortAddProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/sort-manager/sort-add.js

@@ -3,12 +3,12 @@ import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
 export const SortAdd = forwardRef(function SortAdd({ as: as, ...props }, forwarded) {
-    const row = useSortRowCtx();
-    const renderer = useSlot({
-        props: [typeof as !== "function" ? { onClick: row.onAdd, disabled: !row.canAdd } : {}, props],
-        ref: forwarded,
-        slot: as ?? _jsx("button", { children: "+" }),
-        state: { onAdd: row.onAdd, disabled: !row.canAdd },
-    });
-    return renderer;
+  const row = useSortRowCtx();
+  const renderer = useSlot({
+    props: [typeof as !== "function" ? { onClick: row.onAdd, disabled: !row.canAdd } : {}, props],
+    ref: forwarded,
+    slot: as ?? _jsx("button", { children: "+" }),
+    state: { onAdd: row.onAdd, disabled: !row.canAdd },
+  });
+  return renderer;
 });

package/dist/sort-manager/sort-apply.d.ts

@@ -1,7 +1,15 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface SortApplyProps {
-    readonly as?: SlotComponent<{
-        onApply: () => void;
-    }>;
+  readonly as?: SlotComponent<{
+    onApply: () => void;
+  }>;
 }
-export declare const SortApply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortApplyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SortApply: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLButtonElement> &
+      import("react").ButtonHTMLAttributes<HTMLButtonElement> &
+      SortApplyProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/sort-manager/sort-apply.js

@@ -5,20 +5,20 @@ import { useSortManagerCtx } from "./context";
 import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 import { sortItemsToSortModel } from "./utils/sort-item-to-sort-model";
 export const SortApply = forwardRef(function SortApply({ as, ...props }, forwarded) {
-    const ctx = useSortManagerCtx();
-    const onApply = useEvent(() => {
-        const lookup = itemsWithIdToMap(ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get());
-        const model = sortItemsToSortModel(ctx.sortItems, lookup);
-        if (ctx.mode)
-            ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sort: model }));
-        else
-            ctx.grid.state.sortModel.set(model);
-    });
-    const renderer = useSlot({
-        props: [typeof as !== "function" ? { onClick: onApply } : {}, props],
-        ref: forwarded,
-        slot: as ?? _jsx("button", {}),
-        state: { onApply },
-    });
-    return renderer;
+  const ctx = useSortManagerCtx();
+  const onApply = useEvent(() => {
+    const lookup = itemsWithIdToMap(
+      ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get(),
+    );
+    const model = sortItemsToSortModel(ctx.sortItems, lookup);
+    if (ctx.mode) ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sort: model }));
+    else ctx.grid.state.sortModel.set(model);
+  });
+  const renderer = useSlot({
+    props: [typeof as !== "function" ? { onClick: onApply } : {}, props],
+    ref: forwarded,
+    slot: as ?? _jsx("button", {}),
+    state: { onApply },
+  });
+  return renderer;
 });

package/dist/sort-manager/sort-cancel.d.ts

@@ -1,7 +1,15 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface SortCancelProps {
-    readonly as?: SlotComponent<{
-        onCancel: () => void;
-    }>;
+  readonly as?: SlotComponent<{
+    onCancel: () => void;
+  }>;
 }
-export declare const SortCancel: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortCancelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SortCancel: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLButtonElement> &
+      import("react").ButtonHTMLAttributes<HTMLButtonElement> &
+      SortCancelProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/sort-manager/sort-cancel.js

@@ -5,23 +5,23 @@ import { useSortManagerCtx } from "./context";
 import { sortModelToSortItems } from "./utils/sort-model-to-sort-items";
 import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 export const SortCancel = forwardRef(function SortCancel({ as, ...props }, forwarded) {
-    const ctx = useSortManagerCtx();
-    const onCancel = useEvent(() => {
-        const model = ctx.mode
-            ? ctx.grid.state.columnPivotModel.get().sorts
-            : ctx.grid.state.sortModel.get();
-        const lookup = itemsWithIdToMap(ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get());
-        const state = sortModelToSortItems(model, lookup);
-        if (!state.length)
-            ctx.setSortItems([{ isCustom: false, sortDirection: "ascending" }]);
-        else
-            ctx.setSortItems(state);
-    });
-    const renderer = useSlot({
-        props: [typeof as !== "function" ? { onClick: onCancel } : {}, props],
-        ref: forwarded,
-        slot: as ?? _jsx("button", {}),
-        state: { onCancel },
-    });
-    return renderer;
+  const ctx = useSortManagerCtx();
+  const onCancel = useEvent(() => {
+    const model = ctx.mode
+      ? ctx.grid.state.columnPivotModel.get().sorts
+      : ctx.grid.state.sortModel.get();
+    const lookup = itemsWithIdToMap(
+      ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get(),
+    );
+    const state = sortModelToSortItems(model, lookup);
+    if (!state.length) ctx.setSortItems([{ isCustom: false, sortDirection: "ascending" }]);
+    else ctx.setSortItems(state);
+  });
+  const renderer = useSlot({
+    props: [typeof as !== "function" ? { onClick: onCancel } : {}, props],
+    ref: forwarded,
+    slot: as ?? _jsx("button", {}),
+    state: { onCancel },
+  });
+  return renderer;
 });

package/dist/sort-manager/sort-clear.d.ts

@@ -1,7 +1,15 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface SortClearProps {
-    readonly as?: SlotComponent<{
-        onClear: () => void;
-    }>;
+  readonly as?: SlotComponent<{
+    onClear: () => void;
+  }>;
 }
-export declare const SortClear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortClearProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SortClear: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLButtonElement> &
+      import("react").ButtonHTMLAttributes<HTMLButtonElement> &
+      SortClearProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/sort-manager/sort-clear.js

@@ -3,20 +3,19 @@ import { useEvent, useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortManagerCtx } from "./context";
 export const SortClear = forwardRef(function SortClear({ as, ...props }, forwarded) {
-    const ctx = useSortManagerCtx();
-    const onClear = useEvent(() => {
-        if (ctx.mode) {
-            ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sorts: [] }));
-        }
-        else {
-            ctx.grid.state.sortModel.set([]);
-        }
-    });
-    const renderer = useSlot({
-        props: [typeof as !== "function" ? { onClick: onClear } : {}, props],
-        ref: forwarded,
-        slot: as ?? _jsx("button", {}),
-        state: { onClear },
-    });
-    return renderer;
+  const ctx = useSortManagerCtx();
+  const onClear = useEvent(() => {
+    if (ctx.mode) {
+      ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sorts: [] }));
+    } else {
+      ctx.grid.state.sortModel.set([]);
+    }
+  });
+  const renderer = useSlot({
+    props: [typeof as !== "function" ? { onClick: onClear } : {}, props],
+    ref: forwarded,
+    slot: as ?? _jsx("button", {}),
+    state: { onClear },
+  });
+  return renderer;
 });

package/dist/sort-manager/sort-column-select.d.ts

@@ -1,10 +1,18 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { Option } from "./+types";
 export interface SortColumnSelectProps {
-    readonly as?: SlotComponent<{
-        options: Option[];
-        onSelect: (v: Option | null) => void;
-        value: Option | null;
-    }>;
+  readonly as?: SlotComponent<{
+    options: Option[];
+    onSelect: (v: Option | null) => void;
+    value: Option | null;
+  }>;
 }
-export declare const SortColumnSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & SortColumnSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+export declare const SortColumnSelect: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLDivElement> &
+      import("react").HTMLAttributes<HTMLDivElement> &
+      SortColumnSelectProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLSelectElement>
+>;

package/dist/sort-manager/sort-column-select.js

@@ -3,18 +3,26 @@ import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
 export const SortColumnSelect = forwardRef(function SortColumnSelect({ as, ...props }, forwarded) {
-    const row = useSortRowCtx();
-    const el = (_jsxs("select", { "aria-label": "Select column to sort", value: row.columnItem?.value ?? "", onChange: (e) => {
-            const item = row.columnOptions.find((c) => c.value === e.target.value);
-            row.columnOnSelect(item ?? null);
-        }, children: [_jsx("option", { value: "", children: "Select..." }), row.columnOptions.map((c) => {
-                return (_jsx("option", { value: c.value, children: c.label }, c.value));
-            })] }));
-    const renderer = useSlot({
-        props: [props],
-        ref: forwarded,
-        slot: as ?? el,
-        state: { options: row.columnOptions, onSelect: row.columnOnSelect, value: row.columnSelected },
-    });
-    return renderer;
+  const row = useSortRowCtx();
+  const el = _jsxs("select", {
+    "aria-label": "Select column to sort",
+    value: row.columnItem?.value ?? "",
+    onChange: (e) => {
+      const item = row.columnOptions.find((c) => c.value === e.target.value);
+      row.columnOnSelect(item ?? null);
+    },
+    children: [
+      _jsx("option", { value: "", children: "Select..." }),
+      row.columnOptions.map((c) => {
+        return _jsx("option", { value: c.value, children: c.label }, c.value);
+      }),
+    ],
+  });
+  const renderer = useSlot({
+    props: [props],
+    ref: forwarded,
+    slot: as ?? el,
+    state: { options: row.columnOptions, onSelect: row.columnOnSelect, value: row.columnSelected },
+  });
+  return renderer;
 });