@caspeco/casper-ui-library 7.9.3 → 7.10.0

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

@@ -10,6 +10,10 @@ export type TableToolbarProps = {
      * Use this to filter your data. Optional.
      */
     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.
      */
@@ -19,7 +23,7 @@ export type TableToolbarProps = {
      */
     actionMenu?: React.ReactElement<ComponentProps<typeof MenuList>, typeof MenuList>;
 };
-declare const TableToolbarInner: ({ tableName, onSearch, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableToolbarInner: ({ tableName, onSearch, defaultValue, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
 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,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,6DAMxB,iBAAiB,GAAG,eAAe,4CA4KrC,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":"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"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "7.9.3",
+	"version": "7.10.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,