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

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

@@ -2,139 +2,144 @@ 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 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 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;
+    }, [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,8 +1,5 @@
 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,9 +1,3 @@
 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,16 +1,8 @@
 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,15 +1,7 @@
 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,15 +1,7 @@
 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,15 +1,7 @@
 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,19 +3,20 @@ 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,18 +1,10 @@
 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,26 +3,18 @@ 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;
 });