@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTableToolbar/index.mjs

@@ -0,0 +1,222 @@
+import { EyeIcon, FloppyDiskIcon, MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { useState } from "react";
+import { Button, Input } from "@multiplatform.one/forms";
+import { Popover, Separator, Text, View, XStack, YStack, styled } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const SearchIconWrapperFrame = styled(View, {
+  name: "DataTableSearchIconFrame",
+  paddingLeft: "$3",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const ClearButtonWrapperFrame = styled(View, {
+  name: "DataTableClearButtonFrame",
+  paddingRight: "$2",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const ToolbarDividerFrame = styled(View, {
+  name: "DataTableToolbarDividerFrame",
+  width: 1,
+  alignSelf: "stretch",
+  backgroundColor: "$color6"
+});
+function DataTableToolbar(props) {
+  const ctx = useDataTableState();
+  const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
+  const onGlobalFilterChange = props.onGlobalFilterChange ?? ctx?.actions.setGlobalFilter ?? (() => {});
+  const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
+  const onSaveView = props.onSaveView ?? ctx?.actions.saveView ?? (() => {});
+  const views = props.views ?? ctx?.state.views ?? [];
+  const activeViewId = props.activeViewId ?? ctx?.state.activeViewId;
+  const {
+    enableViews = false,
+    enableGlobalSearch = true,
+    enableFiltering: _enableFiltering = true,
+    showFilterCount: _showFilterCount = true,
+    showViewSelector = true,
+    customActions,
+    size,
+    compact: _compact = true
+  } = props;
+  const [showSaveViewDialog, setShowSaveViewDialog] = useState(false);
+  const [newViewName, setNewViewName] = useState("");
+  const activeView = views.find(v => v.id === activeViewId);
+  const handleSaveView = () => {
+    if (newViewName.trim()) {
+      onSaveView(newViewName.trim());
+      setNewViewName("");
+      setShowSaveViewDialog(false);
+    }
+  };
+  const {
+    knobProps
+  } = useResolvedKnobs({
+    size,
+    compact: true
+  });
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "stretch",
+    backgroundColor: "$color3",
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: "$color6",
+    borderTopLeftRadius: knobProps.borderRadius.borderRadius,
+    borderTopRightRadius: knobProps.borderRadius.borderRadius,
+    overflow: "hidden",
+    role: "toolbar",
+    "aria-label": "Table toolbar",
+    children: [enableGlobalSearch && /* @__PURE__ */jsxs(XStack, {
+      flex: 1,
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(SearchIconWrapperFrame, {
+        children: /* @__PURE__ */jsx(MagnifyingGlassIcon, {
+          size: 16
+        })
+      }), /* @__PURE__ */jsx(View, {
+        flex: 1,
+        children: /* @__PURE__ */jsx(Input, {
+          value: globalFilter,
+          onChangeText: onGlobalFilterChange,
+          placeholder: "Search...",
+          "aria-label": "Search table data",
+          chromeless: true,
+          compact: true,
+          size: "$3"
+        })
+      }), globalFilter && /* @__PURE__ */jsx(ClearButtonWrapperFrame, {
+        children: /* @__PURE__ */jsx(Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          padding: "$1",
+          onPress: () => {
+            onGlobalFilterChange("");
+            onClearFilters();
+          },
+          icon: /* @__PURE__ */jsx(XIcon, {
+            size: 14
+          }),
+          "aria-label": "Clear search"
+        })
+      })]
+    }), (customActions || enableViews) && /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(ToolbarDividerFrame, {}), /* @__PURE__ */jsx(RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */jsxs(XStack, {
+          alignItems: "center",
+          paddingHorizontal: "$2",
+          gap: "$1",
+          children: [customActions, enableViews && showViewSelector && /* @__PURE__ */jsxs(Fragment, {
+            children: [/* @__PURE__ */jsx(RovingFocusGroup.Item, {
+              focusable: true,
+              asChild: true,
+              children: /* @__PURE__ */jsxs(Popover, {
+                open: showSaveViewDialog,
+                onOpenChange: setShowSaveViewDialog,
+                children: [/* @__PURE__ */jsx(Popover.Trigger, {
+                  asChild: true,
+                  children: /* @__PURE__ */jsx(Button, {
+                    chromeless: true,
+                    size: "$2",
+                    icon: /* @__PURE__ */jsx(FloppyDiskIcon, {
+                      size: 16
+                    }),
+                    "aria-label": "Save view",
+                    focusStyle: {
+                      outlineColor: "$accentBackground",
+                      outlineWidth: 2
+                    }
+                  })
+                }), /* @__PURE__ */jsx(Popover.Content, {
+                  ...knobProps.borderRadius,
+                  borderColor: "$color6",
+                  enterStyle: {
+                    x: 0,
+                    y: -10,
+                    opacity: 0
+                  },
+                  exitStyle: {
+                    x: 0,
+                    y: -10,
+                    opacity: 0
+                  },
+                  children: /* @__PURE__ */jsxs(YStack, {
+                    ...knobProps.gap,
+                    ...knobProps.panelPadding,
+                    minWidth: 250,
+                    children: [/* @__PURE__ */jsx(Text, {
+                      fontWeight: "600",
+                      children: "Save Current View"
+                    }), /* @__PURE__ */jsx(Input, {
+                      placeholder: "Enter view name...",
+                      value: newViewName,
+                      onChangeText: setNewViewName,
+                      size: "$3",
+                      compact: true,
+                      inputProps: {
+                        onKeyDown: e => {
+                          if (e.key === "Enter") handleSaveView();
+                        }
+                      }
+                    }), /* @__PURE__ */jsxs(XStack, {
+                      gap: "$2",
+                      justifyContent: "flex-end",
+                      children: [/* @__PURE__ */jsx(Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        onPress: () => setShowSaveViewDialog(false),
+                        children: "Cancel"
+                      }), /* @__PURE__ */jsx(Button, {
+                        size: "$2",
+                        onPress: handleSaveView,
+                        disabled: !newViewName.trim(),
+                        children: "Save"
+                      })]
+                    })]
+                  })
+                })]
+              })
+            }), activeView && /* @__PURE__ */jsxs(XStack, {
+              alignItems: "center",
+              gap: "$1",
+              paddingHorizontal: "$2",
+              children: [/* @__PURE__ */jsx(EyeIcon, {
+                size: 14
+              }), /* @__PURE__ */jsx(Text, {
+                fontSize: "$2",
+                color: "$color10",
+                children: activeView.name
+              })]
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}
+function DataTableToolbarActions({
+  children
+}) {
+  return /* @__PURE__ */jsx(XStack, {
+    alignItems: "center",
+    gap: "$1",
+    children
+  });
+}
+function DataTableToolbarSeparator({
+  orientation = "vertical"
+}) {
+  return /* @__PURE__ */jsx(Separator, {
+    vertical: orientation === "vertical",
+    marginHorizontal: orientation === "vertical" ? "$1" : 0,
+    marginVertical: orientation === "horizontal" ? "$1" : 0
+  });
+}
+export { DataTableToolbar, DataTableToolbarActions, DataTableToolbarSeparator };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/DataTableToolbar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["EyeIcon","FloppyDiskIcon","MagnifyingGlassIcon","XIcon","useResolvedKnobs","RovingFocusGroup","useState","Button","Input","Popover","Separator","Text","View","XStack","YStack","styled","useDataTableState","Fragment","jsx","jsxs","SearchIconWrapperFrame","name","paddingLeft","alignItems","justifyContent","ClearButtonWrapperFrame","paddingRight","ToolbarDividerFrame","width","alignSelf","backgroundColor","DataTableToolbar","props","ctx","globalFilter","state","onGlobalFilterChange","actions","setGlobalFilter","onClearFilters","clearFilters","onSaveView","saveView","views","activeViewId","enableViews","enableGlobalSearch","enableFiltering","_enableFiltering","showFilterCount","_showFilterCount","showViewSelector","customActions","size","compact","_compact","showSaveViewDialog","setShowSaveViewDialog","newViewName","setNewViewName","activeView","find","v","id","handleSaveView","trim","knobProps","borderWidth","borderBottomWidth","borderColor","borderTopLeftRadius","borderRadius","borderTopRightRadius","overflow","role","children","flex","value","onChangeText","placeholder","chromeless","circular","padding","onPress","icon","orientation","loop","asChild","paddingHorizontal","gap","Item","focusable","open","onOpenChange","Trigger","focusStyle","outlineColor","outlineWidth","Content","enterStyle","x","y","opacity","exitStyle","panelPadding","minWidth","fontWeight","inputProps","onKeyDown","e","key","variant","disabled","fontSize","color","DataTableToolbarActions","DataTableToolbarSeparator","vertical","marginHorizontal","marginVertical"],"sources":["../../../../src/components/DataTableToolbar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTableToolbar/index.native.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EyeIcon, FloppyDiskIcon, MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { useState } from "react";
+import { Button, Input } from "@multiplatform.one/forms";
+import { Popover, Separator, Text, View, XStack, YStack, styled } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+var SearchIconWrapperFrame = styled(View, {
+  name: "DataTableSearchIconFrame",
+  paddingLeft: "$3",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var ClearButtonWrapperFrame = styled(View, {
+  name: "DataTableClearButtonFrame",
+  paddingRight: "$2",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var ToolbarDividerFrame = styled(View, {
+  name: "DataTableToolbarDividerFrame",
+  width: 1,
+  alignSelf: "stretch",
+  backgroundColor: "$color6"
+});
+function DataTableToolbar(props) {
+  var _ref, _props_globalFilter, _ref1, _props_onGlobalFilterChange, _ref2, _props_onClearFilters, _ref3, _props_onSaveView, _ref4, _props_views, _props_activeViewId;
+  var ctx = useDataTableState();
+  var globalFilter = (_ref = (_props_globalFilter = props.globalFilter) !== null && _props_globalFilter !== void 0 ? _props_globalFilter : ctx === null || ctx === void 0 ? void 0 : ctx.state.globalFilter) !== null && _ref !== void 0 ? _ref : "";
+  var onGlobalFilterChange = (_ref1 = (_props_onGlobalFilterChange = props.onGlobalFilterChange) !== null && _props_onGlobalFilterChange !== void 0 ? _props_onGlobalFilterChange : ctx === null || ctx === void 0 ? void 0 : ctx.actions.setGlobalFilter) !== null && _ref1 !== void 0 ? _ref1 : function () {};
+  var onClearFilters = (_ref2 = (_props_onClearFilters = props.onClearFilters) !== null && _props_onClearFilters !== void 0 ? _props_onClearFilters : ctx === null || ctx === void 0 ? void 0 : ctx.actions.clearFilters) !== null && _ref2 !== void 0 ? _ref2 : function () {};
+  var onSaveView = (_ref3 = (_props_onSaveView = props.onSaveView) !== null && _props_onSaveView !== void 0 ? _props_onSaveView : ctx === null || ctx === void 0 ? void 0 : ctx.actions.saveView) !== null && _ref3 !== void 0 ? _ref3 : function () {};
+  var views = (_ref4 = (_props_views = props.views) !== null && _props_views !== void 0 ? _props_views : ctx === null || ctx === void 0 ? void 0 : ctx.state.views) !== null && _ref4 !== void 0 ? _ref4 : [];
+  var activeViewId = (_props_activeViewId = props.activeViewId) !== null && _props_activeViewId !== void 0 ? _props_activeViewId : ctx === null || ctx === void 0 ? void 0 : ctx.state.activeViewId;
+  var {
+    enableViews = false,
+    enableGlobalSearch = true,
+    enableFiltering: _enableFiltering = true,
+    showFilterCount: _showFilterCount = true,
+    showViewSelector = true,
+    customActions,
+    size,
+    compact: _compact = true
+  } = props;
+  var [showSaveViewDialog, setShowSaveViewDialog] = useState(false);
+  var [newViewName, setNewViewName] = useState("");
+  var activeView = views.find(function (v) {
+    return v.id === activeViewId;
+  });
+  var handleSaveView = function handleSaveView2() {
+    if (newViewName.trim()) {
+      onSaveView(newViewName.trim());
+      setNewViewName("");
+      setShowSaveViewDialog(false);
+    }
+  };
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    size,
+    compact: true
+  });
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "stretch",
+    backgroundColor: "$color3",
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: "$color6",
+    borderTopLeftRadius: knobProps.borderRadius.borderRadius,
+    borderTopRightRadius: knobProps.borderRadius.borderRadius,
+    overflow: "hidden",
+    role: "toolbar",
+    "aria-label": "Table toolbar",
+    children: [/* Search Section - fills available space */
+    enableGlobalSearch && /* @__PURE__ */_jsxs(XStack, {
+      flex: 1,
+      alignItems: "center",
+      children: [/* @__PURE__ */_jsx(SearchIconWrapperFrame, {
+        children: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {
+          size: 16
+        })
+      }), /* @__PURE__ */_jsx(View, {
+        flex: 1,
+        children: /* @__PURE__ */_jsx(Input, {
+          value: globalFilter,
+          onChangeText: onGlobalFilterChange,
+          placeholder: "Search...",
+          "aria-label": "Search table data",
+          chromeless: true,
+          compact: true,
+          size: "$3"
+        })
+      }), globalFilter && /* @__PURE__ */_jsx(ClearButtonWrapperFrame, {
+        children: /* @__PURE__ */_jsx(Button, {
+          chromeless: true,
+          circular: true,
+          size: "$2",
+          padding: "$1",
+          onPress: function onPress() {
+            onGlobalFilterChange("");
+            onClearFilters();
+          },
+          icon: /* @__PURE__ */_jsx(XIcon, {
+            size: 14
+          }),
+          "aria-label": "Clear search"
+        })
+      })]
+    }), /* Right Section - Actions with roving focus for keyboard navigation */
+    (customActions || enableViews) && /* @__PURE__ */_jsxs(_Fragment, {
+      children: [/* @__PURE__ */_jsx(ToolbarDividerFrame, {}), /* @__PURE__ */_jsx(RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */_jsxs(XStack, {
+          alignItems: "center",
+          paddingHorizontal: "$2",
+          gap: "$1",
+          children: [/* Custom Actions */
+          customActions, /* View Management */
+          enableViews && showViewSelector && /* @__PURE__ */_jsxs(_Fragment, {
+            children: [/* Save View Button */
+            /* @__PURE__ */_jsx(RovingFocusGroup.Item, {
+              focusable: true,
+              asChild: true,
+              children: /* @__PURE__ */_jsxs(Popover, {
+                open: showSaveViewDialog,
+                onOpenChange: setShowSaveViewDialog,
+                children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+                  asChild: true,
+                  children: /* @__PURE__ */_jsx(Button, {
+                    chromeless: true,
+                    size: "$2",
+                    icon: /* @__PURE__ */_jsx(FloppyDiskIcon, {
+                      size: 16
+                    }),
+                    "aria-label": "Save view",
+                    focusStyle: {
+                      outlineColor: "$accentBackground",
+                      outlineWidth: 2
+                    }
+                  })
+                }), /* @__PURE__ */_jsx(Popover.Content, {
+                  ...knobProps.borderRadius,
+                  borderColor: "$color6",
+                  enterStyle: {
+                    x: 0,
+                    y: -10,
+                    opacity: 0
+                  },
+                  exitStyle: {
+                    x: 0,
+                    y: -10,
+                    opacity: 0
+                  },
+                  children: /* @__PURE__ */_jsxs(YStack, {
+                    ...knobProps.gap,
+                    ...knobProps.panelPadding,
+                    minWidth: 250,
+                    children: [/* @__PURE__ */_jsx(Text, {
+                      fontWeight: "600",
+                      children: "Save Current View"
+                    }), /* @__PURE__ */_jsx(Input, {
+                      placeholder: "Enter view name...",
+                      value: newViewName,
+                      onChangeText: setNewViewName,
+                      size: "$3",
+                      compact: true,
+                      inputProps: {
+                        onKeyDown: function onKeyDown(e) {
+                          if (e.key === "Enter") handleSaveView();
+                        }
+                      }
+                    }), /* @__PURE__ */_jsxs(XStack, {
+                      gap: "$2",
+                      justifyContent: "flex-end",
+                      children: [/* @__PURE__ */_jsx(Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        onPress: function onPress() {
+                          return setShowSaveViewDialog(false);
+                        },
+                        children: "Cancel"
+                      }), /* @__PURE__ */_jsx(Button, {
+                        size: "$2",
+                        onPress: handleSaveView,
+                        disabled: !newViewName.trim(),
+                        children: "Save"
+                      })]
+                    })]
+                  })
+                })]
+              })
+            }), /* Active View Indicator */
+            activeView && /* @__PURE__ */_jsxs(XStack, {
+              alignItems: "center",
+              gap: "$1",
+              paddingHorizontal: "$2",
+              children: [/* @__PURE__ */_jsx(EyeIcon, {
+                size: 14
+              }), /* @__PURE__ */_jsx(Text, {
+                fontSize: "$2",
+                color: "$color10",
+                children: activeView.name
+              })]
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}
+function DataTableToolbarActions(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */_jsx(XStack, {
+    alignItems: "center",
+    gap: "$1",
+    children
+  });
+}
+function DataTableToolbarSeparator(param) {
+  var {
+    orientation = "vertical"
+  } = param;
+  return /* @__PURE__ */_jsx(Separator, {
+    vertical: orientation === "vertical",
+    marginHorizontal: orientation === "vertical" ? "$1" : 0,
+    marginVertical: orientation === "horizontal" ? "$1" : 0
+  });
+}
+export { DataTableToolbar, DataTableToolbarActions, DataTableToolbarSeparator };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/DataTableToolbar/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","EyeIcon","FloppyDiskIcon","MagnifyingGlassIcon","XIcon","useResolvedKnobs","RovingFocusGroup","useState","Button","Input","Popover","Separator","Text","View","XStack","YStack","styled","useDataTableState","SearchIconWrapperFrame","name","paddingLeft","alignItems","justifyContent","ClearButtonWrapperFrame","paddingRight","ToolbarDividerFrame","width","alignSelf","backgroundColor","DataTableToolbar","props","_ref","_props_globalFilter","_ref1","_props_onGlobalFilterChange","_ref2","_props_onClearFilters","_ref3","_props_onSaveView","_ref4","_props_views","_props_activeViewId","ctx","globalFilter","state","onGlobalFilterChange","actions","setGlobalFilter","onClearFilters","clearFilters","onSaveView","saveView","views","activeViewId","enableViews","enableGlobalSearch","enableFiltering","_enableFiltering","showFilterCount","_showFilterCount","showViewSelector","customActions","size","compact","_compact","showSaveViewDialog","setShowSaveViewDialog","newViewName","setNewViewName","activeView","find","v","id","handleSaveView","handleSaveView2","trim","knobProps","borderWidth","borderBottomWidth","borderColor","borderTopLeftRadius","borderRadius","borderTopRightRadius","overflow","role","children","flex","value","onChangeText","placeholder","chromeless","circular","padding","onPress","icon","orientation","loop","asChild","paddingHorizontal","gap","Item","focusable","open","onOpenChange","Trigger","focusStyle","outlineColor","outlineWidth","Content","enterStyle","x","y","opacity","exitStyle","panelPadding","minWidth","fontWeight","inputProps","onKeyDown","e","key","variant"],"sources":["../../../../src/components/DataTableToolbar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTableViewOptions/DataTableViewOptions.spec.mjs

@@ -0,0 +1,126 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DataTableViewOptions } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+const mockColumns = [{
+  id: "name",
+  label: "Name",
+  visible: true,
+  order: 0,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "email",
+  label: "Email",
+  visible: true,
+  order: 1,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "status",
+  label: "Status",
+  visible: true,
+  order: 2,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "createdAt",
+  label: "Created At",
+  visible: true,
+  order: 3,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}];
+describe("DataTableViewOptions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it("renders view options button", () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+  it("opens popover when clicked", async () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    const button = screen.getByText("View");
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+  });
+  it("displays column visibility toggles", async () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    fireEvent.click(screen.getByText("View"));
+    await waitFor(() => {
+      expect(screen.getByText("Name")).toBeInTheDocument();
+      expect(screen.getByText("Email")).toBeInTheDocument();
+      expect(screen.getByText("Status")).toBeInTheDocument();
+    });
+  });
+  it("calls onColumnVisibilityChange when column is toggled", async () => {
+    const mockOnChange = vi.fn();
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: mockOnChange,
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    fireEvent.click(screen.getByText("View"));
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+    const switches = screen.getAllByRole("switch");
+    expect(switches.length).toBeGreaterThan(0);
+    fireEvent.click(switches[0]);
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+  it("handles empty columns array", () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: [],
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+});
+//# sourceMappingURL=DataTableViewOptions.spec.mjs.map

package/dist/esm/components/DataTableViewOptions/DataTableViewOptions.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["fireEvent","screen","waitFor","renderWithProviders","beforeEach","describe","expect","it","vi","DataTableViewOptions","jsx","mockColumns","id","label","visible","order","canHide","canResize","canReorder","clearAllMocks","columns","onColumnVisibilityChange","fn","onColumnOrderChange","onColumnSizingChange","onSaveView","onLoadView","onResetToDefault","compact","getByText","toBeInTheDocument","button","click","mockOnChange","switches","getAllByRole","length","toBeGreaterThan","toHaveBeenCalled"],"sources":["../../../../src/components/DataTableViewOptions/DataTableViewOptions.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,MAAA,EAAQC,OAAA,QAAe;AAC3C,SAASC,mBAAA,QAA2B;AACpC,SAASC,UAAA,EAAYC,QAAA,EAAUC,MAAA,EAAQC,EAAA,EAAIC,EAAA,QAAU;AAErD,SAASC,oBAAA,QAA4B;AAiD/B,SAAAC,GAAA;AA9CN,MAAMC,WAAA,GAAc,CAClB;EACEC,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,SAAA,EAAW;EACXC,UAAA,EAAY;AACd,GACA;EACEN,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,SAAA,EAAW;EACXC,UAAA,EAAY;AACd,GACA;EACEN,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,SAAA,EAAW;EACXC,UAAA,EAAY;AACd,GACA;EACEN,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,SAAA,EAAW;EACXC,UAAA,EAAY;AACd,EACF;AAEAb,QAAA,CAAS,wBAAwB,MAAM;EACrCD,UAAA,CAAW,MAAM;IACfI,EAAA,CAAGW,aAAA,CAAc;EACnB,CAAC;EAEDZ,EAAA,CAAG,+BAA+B,MAAM;IACtCJ,mBAAA,CACE,eAAAO,GAAA,CAACD,oBAAA;MACCW,OAAA,EAAST,WAAA;MACTU,wBAAA,EAA0Bb,EAAA,CAAGc,EAAA,CAAG;MAChCC,mBAAA,EAAqBf,EAAA,CAAGc,EAAA,CAAG;MAC3BE,oBAAA,EAAsBhB,EAAA,CAAGc,EAAA,CAAG;MAC5BG,UAAA,EAAYjB,EAAA,CAAGc,EAAA,CAAG;MAClBI,UAAA,EAAYlB,EAAA,CAAGc,EAAA,CAAG;MAClBK,gBAAA,EAAkBnB,EAAA,CAAGc,EAAA,CAAG;MACxBM,OAAA,EAAS;IAAA,CACX,CACF;IAEAtB,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,MAAM,CAAC,EAAEC,iBAAA,CAAkB;EACrD,CAAC;EAEDvB,EAAA,CAAG,8BAA8B,YAAY;IAC3CJ,mBAAA,CACE,eAAAO,GAAA,CAACD,oBAAA;MACCW,OAAA,EAAST,WAAA;MACTU,wBAAA,EAA0Bb,EAAA,CAAGc,EAAA,CAAG;MAChCC,mBAAA,EAAqBf,EAAA,CAAGc,EAAA,CAAG;MAC3BE,oBAAA,EAAsBhB,EAAA,CAAGc,EAAA,CAAG;MAC5BG,UAAA,EAAYjB,EAAA,CAAGc,EAAA,CAAG;MAClBI,UAAA,EAAYlB,EAAA,CAAGc,EAAA,CAAG;MAClBK,gBAAA,EAAkBnB,EAAA,CAAGc,EAAA,CAAG;MACxBM,OAAA,EAAS;IAAA,CACX,CACF;IAEA,MAAMG,MAAA,GAAS9B,MAAA,CAAO4B,SAAA,CAAU,MAAM;IACtC7B,SAAA,CAAUgC,KAAA,CAAMD,MAAM;IAEtB,MAAM7B,OAAA,CAAQ,MAAM;MAClBI,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,mBAAmB,CAAC,EAAEC,iBAAA,CAAkB;IAClE,CAAC;EACH,CAAC;EAEDvB,EAAA,CAAG,sCAAsC,YAAY;IACnDJ,mBAAA,CACE,eAAAO,GAAA,CAACD,oBAAA;MACCW,OAAA,EAAST,WAAA;MACTU,wBAAA,EAA0Bb,EAAA,CAAGc,EAAA,CAAG;MAChCC,mBAAA,EAAqBf,EAAA,CAAGc,EAAA,CAAG;MAC3BE,oBAAA,EAAsBhB,EAAA,CAAGc,EAAA,CAAG;MAC5BG,UAAA,EAAYjB,EAAA,CAAGc,EAAA,CAAG;MAClBI,UAAA,EAAYlB,EAAA,CAAGc,EAAA,CAAG;MAClBK,gBAAA,EAAkBnB,EAAA,CAAGc,EAAA,CAAG;MACxBM,OAAA,EAAS;IAAA,CACX,CACF;IAEA5B,SAAA,CAAUgC,KAAA,CAAM/B,MAAA,CAAO4B,SAAA,CAAU,MAAM,CAAC;IAExC,MAAM3B,OAAA,CAAQ,MAAM;MAClBI,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,MAAM,CAAC,EAAEC,iBAAA,CAAkB;MACnDxB,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,OAAO,CAAC,EAAEC,iBAAA,CAAkB;MACpDxB,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,QAAQ,CAAC,EAAEC,iBAAA,CAAkB;IACvD,CAAC;EACH,CAAC;EAEDvB,EAAA,CAAG,yDAAyD,YAAY;IACtE,MAAM0B,YAAA,GAAezB,EAAA,CAAGc,EAAA,CAAG;IAE3BnB,mBAAA,CACE,eAAAO,GAAA,CAACD,oBAAA;MACCW,OAAA,EAAST,WAAA;MACTU,wBAAA,EAA0BY,YAAA;MAC1BV,mBAAA,EAAqBf,EAAA,CAAGc,EAAA,CAAG;MAC3BE,oBAAA,EAAsBhB,EAAA,CAAGc,EAAA,CAAG;MAC5BG,UAAA,EAAYjB,EAAA,CAAGc,EAAA,CAAG;MAClBI,UAAA,EAAYlB,EAAA,CAAGc,EAAA,CAAG;MAClBK,gBAAA,EAAkBnB,EAAA,CAAGc,EAAA,CAAG;MACxBM,OAAA,EAAS;IAAA,CACX,CACF;IAEA5B,SAAA,CAAUgC,KAAA,CAAM/B,MAAA,CAAO4B,SAAA,CAAU,MAAM,CAAC;IAExC,MAAM3B,OAAA,CAAQ,MAAM;MAClBI,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,mBAAmB,CAAC,EAAEC,iBAAA,CAAkB;IAClE,CAAC;IAGD,MAAMI,QAAA,GAAWjC,MAAA,CAAOkC,YAAA,CAAa,QAAQ;IAC7C7B,MAAA,CAAO4B,QAAA,CAASE,MAAM,EAAEC,eAAA,CAAgB,CAAC;IAGzCrC,SAAA,CAAUgC,KAAA,CAAME,QAAA,CAAS,CAAC,CAAC;IAE3B5B,MAAA,CAAO2B,YAAY,EAAEK,gBAAA,CAAiB;EACxC,CAAC;EAED/B,EAAA,CAAG,+BAA+B,MAAM;IACtCJ,mBAAA,CACE,eAAAO,GAAA,CAACD,oBAAA;MACCW,OAAA,EAAS,EAAC;MACVC,wBAAA,EAA0Bb,EAAA,CAAGc,EAAA,CAAG;MAChCC,mBAAA,EAAqBf,EAAA,CAAGc,EAAA,CAAG;MAC3BE,oBAAA,EAAsBhB,EAAA,CAAGc,EAAA,CAAG;MAC5BG,UAAA,EAAYjB,EAAA,CAAGc,EAAA,CAAG;MAClBI,UAAA,EAAYlB,EAAA,CAAGc,EAAA,CAAG;MAClBK,gBAAA,EAAkBnB,EAAA,CAAGc,EAAA,CAAG;MACxBM,OAAA,EAAS;IAAA,CACX,CACF;IAEAtB,MAAA,CAAOL,MAAA,CAAO4B,SAAA,CAAU,MAAM,CAAC,EAAEC,iBAAA,CAAkB;EACrD,CAAC;AACH,CAAC","ignoreList":[]}