@caspeco/casper-ui-library 7.11.0 → 8.0.0

package/dist/components/alert/helper.js

@@ -10,7 +10,6 @@ const o = (e) => {
       return r.OnWarningContainer;
     case "neutral":
       return r.OnNeutralContainer;
-    case "success":
     default:
       return r.OnSuccessContainer;
   }
@@ -24,7 +23,6 @@ const o = (e) => {
       return r.WarningContainer;
     case "neutral":
       return r.NeutralContainer;
-    case "success":
     default:
       return r.SuccessContainer;
   }

package/dist/components/checkbox/checkbox-icon.js

@@ -5,13 +5,7 @@ import { Minus as m } from "./icons/minus.js";
 import { Plus as f } from "./icons/plus.js";
 function p(o, c, r) {
   if (c && !r)
-    switch (o) {
-      case "sm":
-        return "9px";
-      case "md":
-      default:
-        return "10px";
-    }
+    return o === "sm" ? "9px" : "10px";
   switch (o) {
     case "sm":
       return "14px";

package/dist/components/menu/helper.js

@@ -8,7 +8,6 @@ function t(e) {
       return "a";
     case "none":
       return "div";
-    case "button":
     default:
       return "button";
   }

package/dist/components/stepper/step.js

@@ -22,7 +22,6 @@ function I(e, r) {
       return "4px";
     case "13px":
       return "-6px";
-    case "24px":
     default:
       return "0px";
   }

package/dist/components/table/index.d.ts

@@ -4,5 +4,9 @@ export { TableContent } from './table-content.js';
 export { useTableContext } from './table-context.js';
 export { TableFilter } from './table-filter.js';
 export { TableToolbar } from './table-toolbar.js';
+export { TableToolbarSearch } from './table-toolbar-search.js';
+export { TableToolbarSettings } from './table-toolbar-settings.js';
+export { TableToolbarActions } from './table-toolbar-actions.js';
+export { TableToolbarAddButton } from './table-toolbar-add-button.js';
 export type { CellContext, ColumnDef, ExpandedState, Row, RowSelectionState, TableContentProps, TableProps, TableRow, TableToolbarProps, VisibilityState, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,YAAY,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,eAAe,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,YAAY,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,GAAG,EACH,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,eAAe,GACf,MAAM,SAAS,CAAC"}

package/dist/components/table/table-cell.js

@@ -91,7 +91,7 @@ const X = ({
         borderBottom: 0,
         paddingLeft: A()
       },
-      children: /* @__PURE__ */ k(j, { w: "100%", align: "center", children: [
+      children: /* @__PURE__ */ k(j, { w: "100%", h: "100%", align: "center", children: [
         d && /* @__PURE__ */ n(G, { children: ({ isOpen: e }) => /* @__PURE__ */ k(
           h,
           {

package/dist/components/table/table-content.d.ts

@@ -49,6 +49,11 @@ export interface TableContentProps<TData extends TableData = TableData> {
     portalContainerRef?: React.RefObject<HTMLElement | null>;
 }
 declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, portalContainerRef, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders table rows and columns with support for row interactions, nested data, and virtualization.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table
+ */
 export declare const TableContent: typeof TableContentInner;
 export {};
 //# sourceMappingURL=table-content.d.ts.map

package/dist/components/table/table-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,+IASjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAuJ5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,+IASjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAuJ5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

package/dist/components/table/table-row-expand-toggle-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row-expand-toggle-button.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row-expand-toggle-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,UAAU,+BAA+B;IACxC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,0BAA0B,qFACS,+BAA+B,6CAoC9E,CAAC"}
+{"version":3,"file":"table-row-expand-toggle-button.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row-expand-toggle-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,UAAU,+BAA+B;IACxC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,0BAA0B,qFACS,+BAA+B,6CAkC9E,CAAC"}

package/dist/components/table/table-row-expand-toggle-button.js

@@ -1,33 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Box as c } from "@chakra-ui/react";
-import { memo as d } from "react";
-import { translations as x } from "./translations.js";
-import { IconButton as g } from "../icon-button/icon-button.js";
-import { Icons as i } from "../icon/types.js";
-import { ThemeSpaceVariable as f } from "../../theme/theme-types.js";
-const B = d(
-  ({ row: o, localeString: l, rowIsExpanded: n, hidden: a }) => {
-    const r = x[l], p = o.getToggleExpandedHandler(), s = (e) => {
-      e.stopPropagation(), p();
-    }, m = () => n ? `${r.collapseRow} ${o.index + 1}` : `${r.expandRow} ${o.index + 1}`;
-    return /* @__PURE__ */ t(c, { as: "span", h: "100%", children: /* @__PURE__ */ t(
-      g,
+import { jsx as m } from "react/jsx-runtime";
+import { memo as c } from "react";
+import { translations as d } from "./translations.js";
+import { IconButton as x } from "../icon-button/icon-button.js";
+import { Icons as r } from "../icon/types.js";
+import { ThemeSpaceVariable as g } from "../../theme/theme-types.js";
+const w = c(
+  ({ row: o, localeString: i, rowIsExpanded: a, hidden: e }) => {
+    const n = d[i], l = o.getToggleExpandedHandler(), p = (t) => {
+      t.stopPropagation(), l();
+    }, s = () => a ? `${n.collapseRow} ${o.index + 1}` : `${n.expandRow} ${o.index + 1}`;
+    return /* @__PURE__ */ m(
+      x,
       {
         size: "xs",
-        mr: f.XSmall,
+        mr: g.XSmall,
         variant: "ghost",
-        "aria-label": m(),
-        icon: n ? i.TreeViewCollapse : i.TreeViewExpand,
-        onClick: s,
-        onKeyDown: (e) => e.stopPropagation(),
-        visibility: a ? "hidden" : "initial",
-        "aria-hidden": a,
-        tabIndex: a ? -1 : 0,
+        "aria-label": s(),
+        icon: a ? r.TreeViewCollapse : r.TreeViewExpand,
+        onClick: p,
+        onKeyDown: (t) => t.stopPropagation(),
+        visibility: e ? "hidden" : "initial",
+        "aria-hidden": e,
+        tabIndex: e ? -1 : 0,
         borderRadius: "0"
       }
-    ) });
+    );
   }
 );
 export {
-  B as TableRowExpandToggleButton
+  w as TableRowExpandToggleButton
 };

package/dist/components/table/table-toolbar-actions.d.ts

@@ -0,0 +1,17 @@
+import { MenuList } from '../menu/index.js';
+import { ComponentProps, ReactElement } from 'react';
+export type TableToolbarActionsProps = {
+    /**
+     * The MenuList content to render in the actions menu
+     */
+    children: ReactElement<ComponentProps<typeof MenuList>, typeof MenuList>;
+};
+declare const TableToolbarActionsInner: ({ children }: TableToolbarActionsProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom action menu for table operations. Accepts MenuList as children. Use inside TableToolbar.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table#table-toolbar
+ */
+export declare const TableToolbarActions: typeof TableToolbarActionsInner;
+export {};
+//# sourceMappingURL=table-toolbar-actions.d.ts.map

package/dist/components/table/table-toolbar-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar-actions.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-actions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,wBAAwB,GAAG;IACtC;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,CAAC;CACzE,CAAC;AAEF,QAAA,MAAM,wBAAwB,GAAI,cAAc,wBAAwB,4CAevE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAqC,OAAO,wBAAwB,CAAC"}

package/dist/components/table/table-toolbar-actions.js

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { useTableContext as e } from "./table-context.js";
+import { translations as m } from "./translations.js";
+import { Menu as s } from "../menu/menu.js";
+import { MenuIconButton as l } from "../menu/menu-icon-button.js";
+import { Icons as c } from "../icon/types.js";
+const b = ({ children: o }) => {
+  const t = e(), r = m[t.localeString];
+  return /* @__PURE__ */ n(s, { children: [
+    /* @__PURE__ */ a(
+      l,
+      {
+        icon: c.MoreVertical,
+        variant: "ghost",
+        size: "md",
+        "aria-label": r.toolbarActions
+      }
+    ),
+    o
+  ] });
+}, M = i(b);
+export {
+  M as TableToolbarActions
+};

package/dist/components/table/table-toolbar-add-button.d.ts

@@ -0,0 +1,13 @@
+import { IconButtonProps } from '../icon-button/index.js';
+export type TableToolbarAddButtonProps = Omit<IconButtonProps, "icon" | "aria-label"> & {
+    "aria-label"?: string;
+};
+declare const TableToolbarAddButtonInner: (props: TableToolbarAddButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Add button with icon for creating new items. Use inside TableToolbar.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table#table-toolbar
+ */
+export declare const TableToolbarAddButton: typeof TableToolbarAddButtonInner;
+export {};
+//# sourceMappingURL=table-toolbar-add-button.d.ts.map

package/dist/components/table/table-toolbar-add-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar-add-button.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-add-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK5E,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY,CAAC,GAAG;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,0BAA0B,GAAI,OAAO,0BAA0B,4CAMpE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAuC,OAAO,0BAA0B,CAAC"}

package/dist/components/table/table-toolbar-add-button.js

@@ -0,0 +1,13 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as e } from "react";
+import { useTableContext as l } from "./table-context.js";
+import { translations as i } from "./translations.js";
+import { IconButton as m } from "../icon-button/icon-button.js";
+import { Icons as s } from "../icon/types.js";
+const c = (o) => {
+  const t = l(), a = i[t.localeString], r = o["aria-label"] ?? a.new;
+  return /* @__PURE__ */ n(m, { "aria-label": r, icon: s.Increase, variant: "secondary", ...o });
+}, I = e(c);
+export {
+  I as TableToolbarAddButton
+};

package/dist/components/table/table-toolbar-search.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../input/index.js';
+export type TableToolbarSearchProps = InputProps;
+declare const TableToolbarSearchInner: ({ ...props }: TableToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Search input with icon for filtering table data. Use inside TableToolbar.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table#table-toolbar
+ */
+export declare const TableToolbarSearch: typeof TableToolbarSearchInner;
+export {};
+//# sourceMappingURL=table-toolbar-search.d.ts.map

package/dist/components/table/table-toolbar-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar-search.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-search.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG5D,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC;AAEjD,QAAA,MAAM,uBAAuB,GAAI,cAAc,uBAAuB,4CAWrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAoC,OAAO,uBAAuB,CAAC"}

package/dist/components/table/table-toolbar-search.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as e } from "react";
+import { Input as t } from "../input/input.js";
+import { Icon as m } from "../icon/icon.js";
+import { Icons as a } from "../icon/types.js";
+const n = ({ ...r }) => /* @__PURE__ */ o(
+  t,
+  {
+    leftElement: /* @__PURE__ */ o(m, { icon: a.Search }),
+    size: "md",
+    type: "search",
+    w: { base: "100%", md: "170px" },
+    "data-testid": "filterInput",
+    ...r
+  }
+), l = e(n);
+export {
+  l as TableToolbarSearch
+};

package/dist/components/table/table-toolbar-settings.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Settings menu for column visibility and breaking content. Use inside TableToolbar.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table#column-visibility-and-how-to-store-it
+ */
+export declare const TableToolbarSettings: import('react').MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=table-toolbar-settings.d.ts.map

package/dist/components/table/table-toolbar-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar-settings.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-settings.tsx"],"names":[],"mappings":"AA8EA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oFAAkC,CAAC"}

package/dist/components/table/table-toolbar-settings.js

@@ -0,0 +1,59 @@
+import { jsx as t, jsxs as r, Fragment as g } from "react/jsx-runtime";
+import { Flex as p, Portal as C, Box as d } from "@chakra-ui/react";
+import { memo as u, useCallback as a } from "react";
+import { useTableContext as f } from "./table-context.js";
+import { translations as k } from "./translations.js";
+import { Menu as S } from "../menu/menu.js";
+import { MenuButton as x } from "../menu/menu-button.js";
+import { Icon as T } from "../icon/icon.js";
+import { Icons as s } from "../icon/types.js";
+import { MenuList as I } from "../menu/menu-list.js";
+import { Text as M } from "../text/text.js";
+import { MenuItem as m } from "../menu/menu-item.js";
+import { Checkbox as B } from "../checkbox/checkbox.js";
+import { MenuDivider as w } from "../menu/menu-divider.js";
+import { Switch as y } from "../switch/switch.js";
+import { ThemeIconSizeVariable as V, ThemeSpaceVariable as c, ThemeColorVariable as j } from "../../theme/theme-types.js";
+const v = () => {
+  const e = f(), l = k[e.localeString], h = a(() => e.table.getAllColumns().length === Object.keys(e.breakingContentState).length && !Object.values(e.breakingContentState).includes(!1), [e.breakingContentState, e.table]), b = a(
+    (n) => {
+      const o = {};
+      e.table.getAllColumns().forEach((i) => {
+        o[i.id] = n.target.checked;
+      }), e.setBreakingContentState(o), e.onBreakingContentChange?.(o);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ r(S, { closeOnSelect: !1, isLazy: !0, children: [
+    /* @__PURE__ */ t(x, { "aria-label": l.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(T, { icon: s.Sliders, size: V.Medium }) }),
+    /* @__PURE__ */ t(C, { children: /* @__PURE__ */ r(I, { children: [
+      /* @__PURE__ */ t(
+        M,
+        {
+          color: j.OnSurfaceSubdued,
+          py: c.Small,
+          px: c.Medium,
+          children: l.showColumns
+        }
+      ),
+      /* @__PURE__ */ t(d, { maxHeight: "320px", overflowY: "auto", children: e.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ r(m, { itemType: "checkbox", leftIcon: s.GripMore, children: [
+        /* @__PURE__ */ t(g, { children: n.columnDef.header }),
+        /* @__PURE__ */ t(
+          B,
+          {
+            isChecked: n.getIsVisible(),
+            onChange: n.getToggleVisibilityHandler()
+          }
+        )
+      ] }, n.id)) }),
+      /* @__PURE__ */ t(w, {}),
+      /* @__PURE__ */ r(m, { itemType: "switch", children: [
+        l.breakingContent,
+        /* @__PURE__ */ t(y, { onChange: b, isChecked: h() })
+      ] })
+    ] }) })
+  ] }) });
+}, R = u(v);
+export {
+  R as TableToolbarSettings
+};

package/dist/components/table/table-toolbar.d.ts

@@ -1,29 +1,21 @@
-import { MenuList } from '../menu/index.js';
 import { ThemeStyleProps } from '../../theme/index.js';
-import { ChangeEvent, ComponentProps } from 'react';
+import { ReactNode } from 'react';
 export type TableToolbarProps = {
     /**
-     * Text for the header above the table, describing what the table is used for
+     * Optional title for the header above the table
      */
-    tableName: string;
+    title?: string;
     /**
-     * Use this to filter your data. Optional.
+     * Toolbar subcomponents (TableToolbarSearch, TableToolbarSettings, TableToolbarActions, TableToolbarAddButton)
      */
-    onSearch?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * DefaultValue for the search input, e.g. if you have a persisted filter state you want to hydrate after refresh or routing.
-     */
-    defaultValue?: string;
-    /**
-     * Use this to add a new item. Optional.
-     */
-    onAddNewItem?: () => void;
-    /**
-     * Use this to add a action menu. Needs a [MenuList](https://caspeco.github.io/casper-ui-library/components/menu/) to render correctly. Optional.
-     */
-    actionMenu?: React.ReactElement<ComponentProps<typeof MenuList>, typeof MenuList>;
+    children?: ReactNode;
 };
-declare const TableToolbarInner: ({ tableName, onSearch, defaultValue, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableToolbarInner: ({ title, children, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Composable toolbar for tables. Accepts title prop and renders subcomponents in a responsive layout.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/table#table-toolbar
+ */
 export declare const TableToolbar: typeof TableToolbarInner;
 export {};
 //# sourceMappingURL=table-toolbar.d.ts.map

package/dist/components/table/table-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGtG,OAAO,EAMN,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAA8B,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI1F,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,CAAC;CAClF,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,2EAOxB,iBAAiB,GAAG,eAAe,4CA6KrC,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKN,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnF,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,+BAA+B,iBAAiB,GAAG,eAAe,4CAqF5F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

package/dist/components/table/table-toolbar.js

@@ -1,151 +1,57 @@
-import { jsx as e, jsxs as o, Fragment as A } from "react/jsx-runtime";
-import { useMediaQuery as H, Flex as a, Portal as O, Box as x } from "@chakra-ui/react";
-import { memo as D, useCallback as l, useMemo as y } from "react";
-import { useTableContext as G } from "./table-context.js";
-import { translations as E } from "./translations.js";
-import { Input as P } from "../input/input.js";
-import { Icon as I } from "../icon/icon.js";
-import { Icons as c } from "../icon/types.js";
-import { Menu as w } from "../menu/menu.js";
-import { MenuButton as Q } from "../menu/menu-button.js";
-import { MenuList as W } from "../menu/menu-list.js";
-import { Text as B } from "../text/text.js";
-import { MenuItem as F } from "../menu/menu-item.js";
-import { Checkbox as X } from "../checkbox/checkbox.js";
-import { MenuDivider as Y } from "../menu/menu-divider.js";
-import { Switch as q } from "../switch/switch.js";
-import { IconButton as J } from "../icon-button/icon-button.js";
-import { MenuIconButton as K } from "../menu/menu-icon-button.js";
-import { ThemeIconSizeVariable as R, ThemeSpaceVariable as i, ThemeColorVariable as L, ThemeFontVariable as U, ThemeFontSizeVariable as Z } from "../../theme/theme-types.js";
-const _ = ({
-  tableName: g,
-  onSearch: f,
-  defaultValue: C,
-  onAddNewItem: k,
-  actionMenu: p,
-  ...j
-}) => {
-  const t = G(), [z] = H("(min-width: 48em)"), r = E[t.localeString], S = l(() => t.table.getAllColumns().length === Object.keys(t.breakingContentState).length && !Object.values(t.breakingContentState).includes(!1), [t.breakingContentState, t.table]), T = l(
-    (n) => {
-      const b = {};
-      t.table.getAllColumns().forEach((M) => {
-        b[M.id] = n.target.checked;
-      }), t.setBreakingContentState(b), t.onBreakingContentChange?.(b);
-    },
-    [t]
-  ), s = l(
-    () => /* @__PURE__ */ e(
-      P,
-      {
-        leftElement: /* @__PURE__ */ e(I, { icon: c.Search }),
-        onChange: (n) => f?.(n),
-        defaultValue: C,
-        size: "md",
-        type: "search",
-        w: { base: "100%", md: "170px" },
-        "data-testid": "filterInput"
-      }
-    ),
-    [f, C]
-  ), m = l(
-    () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ o(w, { closeOnSelect: !1, isLazy: !0, children: [
-      /* @__PURE__ */ e(Q, { "aria-label": r.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ e(I, { icon: c.Sliders, size: R.Medium }) }),
-      /* @__PURE__ */ e(O, { children: /* @__PURE__ */ o(W, { children: [
-        /* @__PURE__ */ e(
-          B,
-          {
-            color: L.OnSurfaceSubdued,
-            py: i.Small,
-            px: i.Medium,
-            children: r.showColumns
-          }
-        ),
-        /* @__PURE__ */ e(x, { maxHeight: "320px", overflowY: "auto", children: t.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ o(F, { itemType: "checkbox", leftIcon: c.GripMore, children: [
-          /* @__PURE__ */ e(A, { children: n.columnDef.header }),
-          /* @__PURE__ */ e(
-            X,
-            {
-              isChecked: n.getIsVisible(),
-              onChange: n.getToggleVisibilityHandler()
-            }
-          )
-        ] }, n.id)) }),
-        /* @__PURE__ */ e(Y, {}),
-        /* @__PURE__ */ o(F, { itemType: "switch", children: [
-          r.breakingContent,
-          /* @__PURE__ */ e(q, { onChange: T, isChecked: S() })
-        ] })
-      ] }) })
-    ] }) }),
-    [
-      S,
-      T,
-      t.table,
-      r.breakingContent,
-      r.presets,
-      r.showColumns
-    ]
-  ), d = l(
-    () => /* @__PURE__ */ e(
-      J,
-      {
-        "aria-label": r.new,
-        icon: c.Increase,
-        onClick: k,
-        variant: "secondary"
-      }
-    ),
-    [k, r.new]
-  ), h = l(() => p ? /* @__PURE__ */ o(w, { children: [
-    /* @__PURE__ */ e(
-      K,
-      {
-        icon: c.MoreVertical,
-        variant: "ghost",
-        size: "md",
-        "aria-label": r.toolbarActions
-      }
-    ),
-    p
-  ] }) : null, [p, r.toolbarActions]), u = l(
-    () => /* @__PURE__ */ e(
-      B,
-      {
-        fontSize: Z.X2Large,
-        color: L.OnBackgroundHeader,
-        fontWeight: "bold",
-        fontFamily: U.Header,
-        children: g
-      }
-    ),
-    [g]
-  ), V = y(
-    () => /* @__PURE__ */ e(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: /* @__PURE__ */ o(a, { justifyContent: "space-between", alignItems: "center", children: [
-      u(),
-      /* @__PURE__ */ o(a, { gap: i.Medium, children: [
-        s(),
-        m(),
-        h(),
-        d()
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import { useMediaQuery as M, Flex as o, Box as S } from "@chakra-ui/react";
+import { memo as C, useMemo as l, Children as j } from "react";
+import { useTableContext as B } from "./table-context.js";
+import { TableToolbarActions as L } from "./table-toolbar-actions.js";
+import { TableToolbarAddButton as w } from "./table-toolbar-add-button.js";
+import { TableToolbarSearch as F } from "./table-toolbar-search.js";
+import { TableToolbarSettings as V } from "./table-toolbar-settings.js";
+import { Text as I } from "../text/text.js";
+import { ThemeFontVariable as z, ThemeColorVariable as A, ThemeFontSizeVariable as H, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
+const k = ({ title: m, children: c, ...T }) => {
+  const d = B(), [h] = M("(min-width: 48em)"), g = d.id ? `${d.id}-toolbar` : void 0, e = l(() => {
+    let u = null, b = null, p = null, f = null;
+    return j.forEach(c, (a) => {
+      if (!a || typeof a != "object" || !("type" in a)) return;
+      const t = a;
+      t.type === F ? u = t : t.type === V ? b = t : t.type === L ? p = t : t.type === w && (f = t);
+    }), { search: u, settings: b, actions: p, addButton: f };
+  }, [c]), i = l(() => m ? /* @__PURE__ */ s(
+    I,
+    {
+      fontSize: H.X2Large,
+      color: A.OnBackgroundHeader,
+      fontWeight: "bold",
+      fontFamily: z.Header,
+      children: m
+    }
+  ) : null, [m]), y = l(
+    () => /* @__PURE__ */ s(o, { direction: "column", gap: r.Medium, mb: r.Medium, children: /* @__PURE__ */ n(o, { justifyContent: "space-between", alignItems: "center", children: [
+      i,
+      /* @__PURE__ */ n(o, { gap: r.Medium, children: [
+        e.search,
+        e.settings,
+        e.actions,
+        e.addButton
       ] })
     ] }) }),
-    [d, s, m, u, h]
-  ), v = y(
-    () => /* @__PURE__ */ o(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: [
-      /* @__PURE__ */ o(a, { justifyContent: "space-between", children: [
-        u(),
-        d()
+    [i, e]
+  ), x = l(
+    () => /* @__PURE__ */ n(o, { direction: "column", gap: r.Medium, mb: r.Medium, children: [
+      /* @__PURE__ */ n(o, { justifyContent: "space-between", children: [
+        i,
+        e.addButton
       ] }),
-      /* @__PURE__ */ o(a, { justifyContent: "space-between", gap: i.Medium, children: [
-        s(),
-        h(),
-        m()
+      /* @__PURE__ */ n(o, { justifyContent: "space-between", gap: r.Medium, children: [
+        e.search,
+        e.actions,
+        e.settings
       ] })
     ] }),
-    [d, s, m, u, h]
+    [i, e]
   );
-  return /* @__PURE__ */ e(x, { id: "tableToolbar", ...j, children: z ? V : v });
-}, fe = D(_);
+  return /* @__PURE__ */ s(S, { id: g, ...T, children: h ? y : x });
+}, J = C(k);
 export {
-  fe as TableToolbar
+  J as TableToolbar
 };

package/dist/components/table/table-toolbar.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-toolbar.spec.d.ts.map

package/dist/components/table/table-toolbar.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-toolbar.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.spec.tsx"],"names":[],"mappings":""}

package/dist/components/table/table.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.composition.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AA8GH,eAAO,MAAM,UAAU,+CAgEtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAyDvB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAqBD,eAAO,MAAM,aAAa,+CAqEzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAmElC,CAAC"}
+{"version":3,"file":"table.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.composition.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AA8GH,eAAO,MAAM,UAAU,+CAoEtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAyDvB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAqBD,eAAO,MAAM,aAAa,+CAqEzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAmElC,CAAC"}