@dmsi/wedgekit-react 0.0.5 → 0.0.6

package/dist/{chunk-25Y2OMTD.js → chunk-6ZY524ID.js}

@@ -6,9 +6,13 @@ import {
 } from "./chunk-IGQVA7SC.js";
 
 // src/components/ModalButtons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ModalButtons = ({ onClose, onContinue }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: [
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -29,7 +33,7 @@ var ModalButtons = ({ onClose, onContinue }) => {
         children: "Continue"
       }
     )
-  ] });
+  ] }) });
 };
 ModalButtons.displayName = "ModalButtons";
 

package/dist/{chunk-UGXT677T.js → chunk-BWRHL2AG.js}

@@ -255,7 +255,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -309,7 +311,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ jsx(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) });
       default:

package/dist/{chunk-VFWFORJJ.js → chunk-DKKYR6DS.js}

@@ -104,6 +104,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ jsx(
           Paragraph,
           {
+            as: "span",
             padded: true,
             className: clsx(
               "text-nowrap",

package/dist/{chunk-TBHTISFW.js → chunk-GTCSRHPF.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-UGXT677T.js";
+} from "./chunk-BWRHL2AG.js";
 import {
   __objRest,
   __spreadValues

package/dist/chunk-I2UVVKQI.js

@@ -0,0 +1,12 @@
+// src/components/Theme.tsx
+import { jsx } from "react/jsx-runtime";
+function Theme({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "contents", "data-theme": theme, children });
+}
+
+export {
+  Theme
+};

package/dist/{chunk-CABAANHQ.js → chunk-L4UM372R.js}

@@ -15,7 +15,11 @@ import {
 
 // src/components/Menu.tsx
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { createPortal } from "react-dom";
 import { jsxs } from "react/jsx-runtime";
 var Menu = (_a) => {

package/dist/chunk-Q3FKEKIN.js

@@ -0,0 +1,23 @@
+// src/components/ModalContent.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function ModalContent({
+  fixedHeightScrolling,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "flex-grow desktop:flex-grow-0 p-4",
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
+}
+ModalContent.displayName = "ModalContent";
+
+export {
+  ModalContent
+};

package/dist/{chunk-YD462QK7.js → chunk-TAW5ZZ4Z.js}

@@ -1,15 +1,15 @@
-import {
-  Search
-} from "./chunk-TBHTISFW.js";
 import {
   Menu
-} from "./chunk-CABAANHQ.js";
+} from "./chunk-L4UM372R.js";
 import {
   useSubMenuSystem
 } from "./chunk-Z4UCFUF7.js";
 import {
   MenuOption
 } from "./chunk-E5ALT5W7.js";
+import {
+  Search
+} from "./chunk-GTCSRHPF.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";

package/dist/{chunk-UEN5BURK.js → chunk-TRUPPHBQ.js}

@@ -1,20 +1,17 @@
 import {
   InputBase
-} from "./chunk-UGXT677T.js";
+} from "./chunk-BWRHL2AG.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "./chunk-ORMEWXMH.js";
 
 // src/components/Select.tsx
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
+import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Select = (_a) => {
@@ -27,7 +24,9 @@ var Select = (_a) => {
     onClick,
     className,
     wrapperClassName,
-    removeRoundness
+    removeRoundness,
+    displayValue,
+    value
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -37,7 +36,9 @@ var Select = (_a) => {
     "onClick",
     "className",
     "wrapperClassName",
-    "removeRoundness"
+    "removeRoundness",
+    "displayValue",
+    "value"
   ]);
   const inputRef = useRef(null);
   const inputContainerRef = useRef(null);
@@ -50,11 +51,11 @@ var Select = (_a) => {
       return;
     }
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [props.value]);
+  }, [value]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       InputBase,
-      __spreadValues({
+      __spreadProps(__spreadValues({
         inputContainerRef,
         ref: inputRef,
         label,
@@ -89,7 +90,9 @@ var Select = (_a) => {
         readOnly,
         removeRoundness,
         focus: show
-      }, props)
+      }, props), {
+        value: displayValue != null ? displayValue : value
+      })
     ),
     renderMenu ? renderMenu({
       positionTo: inputContainerRef,

package/dist/{chunk-2B7WUAOV.js → chunk-TU55CHXU.js}

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 var ModalScrim = ({
   show = false,
+  size = "small",
   children,
   onClick,
   ref
@@ -11,11 +12,12 @@ var ModalScrim = ({
     "div",
     {
       className: clsx(
-        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
+        size === "small" && "p-4",
         "inset-0 z-50"
       ),
-      onClick,
+      onMouseDown: onClick,
       ref,
       children
     }

package/dist/{chunk-PMQOPIJZ.js → chunk-U42SKNR6.js}

@@ -1,11 +1,28 @@
 // src/components/Stack.tsx
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
+var useFlexClassNames = ({ items, justify, grow }) => clsx(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
 var Stack = ({
   children,
   items,
   justify,
+  grow,
   padding,
+  paddingX,
   horizontal,
   horizontalMobile,
   elevation = 0,
@@ -13,48 +30,60 @@ var Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
-  overflowY = "inherit"
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
 }) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        height: height !== void 0 ? `${height}px` : void 0,
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
         maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
-        width: width !== void 0 ? `${width}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
-        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
       },
       className: clsx(
         "scrollbar-thin",
-        "w-full",
-        "flex",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
         centered && "mx-auto",
         overflowY == "auto" && "overflow-y-auto",
         overflowY == "hidden" && "overflow-y-hidden",
         overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
         padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
         padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
         padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
         padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
         horizontal ? "desktop:flex-row" : "desktop:flex-col",
         horizontalMobile ? "flex-row" : "flex-col",
-        items === "start" && "items-start",
-        items === "center" && "items-center",
-        items === "end" && "items-end",
-        items === "start-center" && "items-start desktop:items-center",
-        justify === "start" && "justify-start",
-        justify === "center" && "justify-center",
-        justify === "end" && "justify-end",
-        justify === "end" && "justify-end",
-        justify === "between" && "justify-between",
-        justify === "around" && "justify-around",
+        flexClassNames,
         sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
         sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
         sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",

package/dist/{chunk-SPQH4CSJ.js → chunk-XUIPGYP5.js}

@@ -10,10 +10,18 @@ import {
 
 // src/components/ModalHeader.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var ModalHeader = ({ title, onClose }) => {
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose
+}) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
-    title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      headerIcon,
+      title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title })
+    ] }),
+    !hideCloseIcon && /* @__PURE__ */ jsx(
       Button,
       {
         iconOnly: true,

package/dist/components/Checkbox.cjs

@@ -350,6 +350,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Paragraph,
           {
+            as: "span",
             padded: true,
             className: (0, import_clsx4.default)(
               "text-nowrap",

package/dist/components/Checkbox.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-VFWFORJJ.js";
+} from "../chunk-DKKYR6DS.js";
 import "../chunk-K3IKUSZW.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-KX3O6GJ6.js";

package/dist/components/DataGrid.cjs

@@ -494,6 +494,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Paragraph,
           {
+            as: "span",
             padded: true,
             className: (0, import_clsx5.default)(
               "text-nowrap",
@@ -846,7 +847,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -900,7 +903,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
       default:
@@ -2167,7 +2170,9 @@ var Select = (_a) => {
     onClick,
     className,
     wrapperClassName,
-    removeRoundness
+    removeRoundness,
+    displayValue,
+    value
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -2177,7 +2182,9 @@ var Select = (_a) => {
     "onClick",
     "className",
     "wrapperClassName",
-    "removeRoundness"
+    "removeRoundness",
+    "displayValue",
+    "value"
   ]);
   const inputRef = (0, import_react9.useRef)(null);
   const inputContainerRef = (0, import_react9.useRef)(null);
@@ -2190,11 +2197,11 @@ var Select = (_a) => {
       return;
     }
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [props.value]);
+  }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       InputBase,
-      __spreadValues({
+      __spreadProps(__spreadValues({
         inputContainerRef,
         ref: inputRef,
         label,
@@ -2229,7 +2236,9 @@ var Select = (_a) => {
         readOnly,
         removeRoundness,
         focus: show
-      }, props)
+      }, props), {
+        value: displayValue != null ? displayValue : value
+      })
     ),
     renderMenu ? renderMenu({
       positionTo: inputContainerRef,
@@ -2460,7 +2469,8 @@ function DataGrid({
   filteredSortedData,
   totalRowCount,
   hideStatusBar,
-  centerHeader
+  centerHeader,
+  enableColumnSelector
 }) {
   var _a, _b, _c, _d, _e;
   const [columnOrder, setColumnOrder] = (0, import_react12.useState)(
@@ -2488,6 +2498,34 @@ function DataGrid({
   } : setLocalRowSelection;
   const id = (0, import_react12.useId)();
   const containerRef = import_react12.default.useRef(null);
+  const [columnVisibility, setColumnVisibility] = (0, import_react12.useState)(() => {
+    const initialVisibility = {};
+    columns.forEach((column) => {
+      var _a2, _b2;
+      if (column.id) {
+        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+      }
+    });
+    return initialVisibility;
+  });
+  const toggleColumnVisibility = (0, import_react12.useCallback)(
+    (id2, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [id2]: isVisible }));
+    },
+    [setColumnVisibility]
+  );
+  const resetColumnVisibility = (0, import_react12.useCallback)(() => {
+    setColumnVisibility(() => {
+      const initialVisibility = {};
+      columns.forEach((column) => {
+        var _a2, _b2;
+        if (column.id) {
+          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        }
+      });
+      return initialVisibility;
+    });
+  }, [columns]);
   const table = (0, import_react_table.useReactTable)({
     columns,
     data,
@@ -2503,7 +2541,8 @@ function DataGrid({
       columnOrder,
       sorting: sortingState,
       columnFilters: columnFilterState,
-      rowSelection
+      rowSelection,
+      columnVisibility
     },
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
@@ -2596,11 +2635,11 @@ function DataGrid({
         {
           items: columnOrder,
           strategy: import_sortable2.horizontalListSortingStrategy,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 max-h-screen m-4 rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
-                className: "overflow-auto scrollbar-thin max-h-full relative contain-paint will-change-transform",
+                className: "overflow-auto scrollbar-thin h-full relative contain-paint will-change-transform",
                 ref: containerRef,
                 children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full grid", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
@@ -2685,7 +2724,15 @@ function DataGrid({
                           style: { display: "flex", width: virtualPaddingRight }
                         }
                       )
-                    ) : null
+                    ) : null,
+                    enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      ColumnSelectorHeaderCell,
+                      {
+                        table,
+                        toggleColumnVisibility,
+                        resetColumnVisibility
+                      }
+                    )
                   ] }, headerGroup.id)) }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     TableBody,
@@ -2698,7 +2745,8 @@ function DataGrid({
                       pagination,
                       isLoadingMore,
                       hasMore,
-                      showFilterRow
+                      showFilterRow,
+                      enableColumnSelector
                     }
                   )
                 ] })
@@ -2800,7 +2848,8 @@ function TableBody({
   pagination,
   isLoadingMore,
   hasMore,
-  showFilterRow
+  showFilterRow,
+  enableColumnSelector = false
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -2873,7 +2922,8 @@ function TableBody({
               virtualPaddingLeft,
               virtualPaddingRight,
               virtualRow,
-              showFilterRow
+              showFilterRow,
+              enableColumnSelector
             },
             row.id
           );
@@ -2902,7 +2952,8 @@ function TableBodyRow({
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualRow,
-  showFilterRow
+  showFilterRow,
+  enableColumnSelector = false
 }) {
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -2943,7 +2994,8 @@ function TableBodyRow({
         virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
-        ) : null
+        ) : null,
+        enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", {})
       ]
     },
     row.id
@@ -2968,6 +3020,82 @@ var LoadingCell = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 };
+function ColumnSelectorHeaderCell({
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility
+}) {
+  const ref = (0, import_react12.useRef)(null);
+  const [show, setShow] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DataGridCell,
+    {
+      width: "48",
+      type: "header",
+      color: "text-secondary-normal",
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Button,
+          {
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          Menu,
+          {
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Button,
+                {
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              table.getAllColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                ColumnSelectorMenuOption,
+                {
+                  column,
+                  toggleColumnVisibility
+                },
+                column.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnSelectorMenuOption({
+  column,
+  toggleColumnVisibility
+}) {
+  const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
+  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Checkbox,
+    {
+      label: label != null ? label : "Unknown",
+      checked: isVisible,
+      onChange: (e) => {
+        setIsVisible(e.target.checked);
+        toggleColumnVisibility(column.id, e.target.checked);
+      }
+    }
+  ) });
+}
 function getSortIcon(sort, nextSort = false) {
   const iconClassName = (0, import_clsx14.default)(
     "text-icon-on-action-primary-normal",