@caspeco/casper-ui-library 9.1.0 → 9.2.1

package/dist/components/list/list.d.ts

@@ -1,14 +1,16 @@
-import { List as ChakraList, ConditionalValue } from '@chakra-ui/react';
-import { ThemeSpaceVariable, ThemeStyleProps } from '../../theme/index.js';
-export type CustomListProps = {
+import { List as ChakraList } from '@chakra-ui/react';
+import { ThemeStyleProps } from '../../theme/index.js';
+type ChakraListProps = Pick<ChakraList.RootProps, "listStyleType" | "children">;
+type CustomListProps = {
     /** Adjust vertical spacing between List Items */
-    spacing?: ConditionalValue<ThemeSpaceVariable | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"> | undefined;
+    spacing?: ChakraList.RootProps["gap"];
 };
-export type ListProps = CustomListProps & ChakraList.RootProps & ThemeStyleProps;
+export type ListProps = CustomListProps & ChakraListProps & ThemeStyleProps;
 /**
  * List is used to display list items.
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/list
  */
-export declare function List({ fontFamily, listStyleType, children, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+export declare function List({ fontFamily, listStyleType, spacing, children, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=list.d.ts.map

package/dist/components/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../lib/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAqB,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC7B,iDAAiD;IACjD,OAAO,CAAC,EACL,gBAAgB,CACd,kBAAkB,GAClB,CAAC,MAAM,GAAG,EAAE,CAAC,GACb,cAAc,GACd,SAAS,GACT,SAAS,GACT,QAAQ,GACR,cAAc,GACd,OAAO,GACP,MAAM,CACP,GACD,SAAS,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,SAAS,GAAG,eAAe,CAAC;AAEjF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACpB,UAAmC,EACnC,aAAsB,EACtB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,SAAS,2CAMX"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../lib/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AAGhF,KAAK,eAAe,GAAG;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACpB,UAAmC,EACnC,aAAsB,EACtB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,SAAS,2CAMX"}

package/dist/components/list/list.js

@@ -1,14 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { List as e } from "@chakra-ui/react";
-import { ThemeFontVariable as n } from "../../theme/theme-types.js";
-function a({
-  fontFamily: o = n.Body,
+import { jsx as e } from "react/jsx-runtime";
+import { List as n } from "@chakra-ui/react";
+import { ThemeFontVariable as p } from "../../theme/theme-types.js";
+function L({
+  fontFamily: o = p.Body,
   listStyleType: t = "none",
-  children: r,
-  ...i
+  spacing: r,
+  children: i,
+  ...m
 }) {
-  return /* @__PURE__ */ m(e.Root, { fontFamily: o, listStyleType: t, ...i, children: r });
+  return /* @__PURE__ */ e(n.Root, { gap: r, fontFamily: o, listStyleType: t, ...m, children: i });
 }
 export {
-  a as List
+  L as List
 };

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

@@ -1,7 +1,21 @@
+type TableToolbarSettingsProps = {
+    /**
+     * The current selected value in the Rows per page section.
+     * If provided, the rows-per-page selection becomes controlled and should be updated through `onPageSizeChange`.
+     * Note: This does not change the number of rendered rows automatically; handle that in your own table or pagination logic.
+     */
+    pageSize?: number;
+    /**
+     * Called when a new option is selected in the Rows per page section.
+     * Receives the selected number of rows to display per page.
+     */
+    onPageSizeChange?: (newPageSize: number) => void;
+};
 /**
  * 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>;
+export declare const TableToolbarSettings: import('react').MemoExoticComponent<({ pageSize, onPageSizeChange }: TableToolbarSettingsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
 //# sourceMappingURL=table-toolbar-settings.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"table-toolbar-settings.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar-settings.tsx"],"names":[],"mappings":"AAaA,KAAK,yBAAyB,GAAG;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAiGF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,uEApGkC,yBAAyB,6CAoGzB,CAAC"}

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

@@ -1,59 +1,86 @@
-import { jsx as n, jsxs as r, Fragment as b } from "react/jsx-runtime";
-import { Flex as C, Portal as g, Box as p } from "@chakra-ui/react";
-import { memo as d, useCallback as a } from "react";
-import { useTableContext as u } from "./table-context.js";
-import { translations as f } from "./translations.js";
-import { Menu as k } from "../menu/menu.js";
-import { MenuButton as S } from "../menu/menu-button.js";
-import { SlidersIcon as x } from "../icon/icons/sliders-icon.js";
-import { MenuList as T } from "../menu/menu-list.js";
-import { Text as I } from "../text/text.js";
-import { MenuItem as s } from "../menu/menu-item.js";
-import { GripMoreIcon as B } from "../icon/icons/grip-more-icon.js";
-import { Checkbox as M } from "../checkbox/checkbox.js";
-import { MenuDivider as v } from "../menu/menu-divider.js";
-import { Switch as w } from "../switch/switch.js";
-import { ThemeIconSizeVariable as y, ThemeSpaceVariable as m, ThemeColorVariable as V } from "../../theme/theme-types.js";
-const j = () => {
-  const e = u(), l = f[e.localeString], c = a(() => e.table.getAllColumns().length === Object.keys(e.breakingContentState).length && !Object.values(e.breakingContentState).includes(!1), [e.breakingContentState, e.table]), h = a(
-    ({ checked: t }) => {
-      const o = {};
-      e.table.getAllColumns().forEach((i) => {
-        o[i.id] = t;
-      }), e.setBreakingContentState(o), e.onBreakingContentChange?.(o);
+import { jsx as t, jsxs as o, Fragment as u } from "react/jsx-runtime";
+import { Flex as S, Portal as k, Box as T } from "@chakra-ui/react";
+import { memo as x, useCallback as h } from "react";
+import { useTableContext as I } from "./table-context.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS as v } from "./table.constants.js";
+import { translations as B } from "./translations.js";
+import { Menu as M } from "../menu/menu.js";
+import { MenuButton as w } from "../menu/menu-button.js";
+import { SlidersIcon as y } from "../icon/icons/sliders-icon.js";
+import { MenuList as O } from "../menu/menu-list.js";
+import { Text as d } from "../text/text.js";
+import { MenuItem as i } from "../menu/menu-item.js";
+import { GripMoreIcon as V } from "../icon/icons/grip-more-icon.js";
+import { Checkbox as A } from "../checkbox/checkbox.js";
+import { MenuDivider as b } from "../menu/menu-divider.js";
+import { RadioGroup as F } from "../radio/radio-group.js";
+import { Radio as G } from "../radio/radio.js";
+import { Switch as P } from "../switch/switch.js";
+import { ThemeIconSizeVariable as j, ThemeSpaceVariable as a, ThemeColorVariable as g } from "../../theme/theme-types.js";
+const D = ({ pageSize: m, onPageSizeChange: s }) => {
+  const r = I(), l = B[r.localeString], p = !!s && Number.isInteger(m), C = h(() => r.table.getAllColumns().length === Object.keys(r.breakingContentState).length && !Object.values(r.breakingContentState).includes(!1), [r.breakingContentState, r.table]), f = h(
+    ({ checked: e }) => {
+      const n = {};
+      r.table.getAllColumns().forEach((c) => {
+        n[c.id] = e;
+      }), r.setBreakingContentState(n), r.onBreakingContentChange?.(n);
     },
-    [e]
+    [r]
   );
-  return /* @__PURE__ */ n(C, { children: /* @__PURE__ */ r(k, { closeOnSelect: !1, isLazy: !0, children: [
-    /* @__PURE__ */ n(S, { "aria-label": l.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ n(x, { size: y.Medium }) }),
-    /* @__PURE__ */ n(g, { children: /* @__PURE__ */ r(T, { children: [
-      /* @__PURE__ */ n(
-        I,
+  return /* @__PURE__ */ t(S, { children: /* @__PURE__ */ o(M, { closeOnSelect: !1, isLazy: !0, children: [
+    /* @__PURE__ */ t(w, { "aria-label": l.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(y, { size: j.Medium }) }),
+    /* @__PURE__ */ t(k, { children: /* @__PURE__ */ o(O, { children: [
+      /* @__PURE__ */ t(
+        d,
         {
-          color: V.OnSurfaceSubdued,
-          py: m.Small,
-          px: m.Medium,
+          color: g.OnSurfaceSubdued,
+          py: a.Small,
+          px: a.Medium,
           children: l.showColumns
         }
       ),
-      /* @__PURE__ */ n(p, { maxHeight: "320px", overflowY: "auto", children: e.table.getAllLeafColumns().filter((t) => t.getCanHide()).map((t) => /* @__PURE__ */ r(s, { itemType: "checkbox", leftIcon: B, value: t.id, children: [
-        /* @__PURE__ */ n(b, { children: t.columnDef.header }),
-        /* @__PURE__ */ n(
-          M,
+      /* @__PURE__ */ t(T, { maxHeight: "320px", overflowY: "auto", children: r.table.getAllLeafColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ o(i, { itemType: "checkbox", leftIcon: V, value: e.id, children: [
+        /* @__PURE__ */ t(u, { children: e.columnDef.header }),
+        /* @__PURE__ */ t(
+          A,
           {
-            isChecked: t.getIsVisible(),
-            onCheckedChange: ({ checked: o }) => t.toggleVisibility(!!o)
+            isChecked: e.getIsVisible(),
+            onCheckedChange: ({ checked: n }) => e.toggleVisibility(!!n)
           }
         )
-      ] }, t.id)) }),
-      /* @__PURE__ */ n(v, {}),
-      /* @__PURE__ */ r(s, { itemType: "switch", value: "breakingContent", children: [
+      ] }, e.id)) }),
+      /* @__PURE__ */ t(b, {}),
+      p && /* @__PURE__ */ o(u, { children: [
+        /* @__PURE__ */ t(
+          d,
+          {
+            color: g.OnSurfaceSubdued,
+            py: a.Small,
+            px: a.Medium,
+            children: l.rowsPerPage
+          }
+        ),
+        /* @__PURE__ */ t(
+          F,
+          {
+            gap: "unset",
+            value: String(m),
+            onValueChange: (e) => s?.(Number(e.value)),
+            children: v.map((e) => /* @__PURE__ */ o(i, { itemType: "radio", value: String(e), children: [
+              l.numberOfRows.replace("{count}", String(e)),
+              /* @__PURE__ */ t(G, { value: String(e) })
+            ] }, e))
+          }
+        ),
+        /* @__PURE__ */ t(b, {})
+      ] }),
+      /* @__PURE__ */ o(i, { itemType: "switch", value: "breakingContent", children: [
         l.breakingContent,
-        /* @__PURE__ */ n(w, { onCheckedChange: h, isChecked: c() })
+        /* @__PURE__ */ t(P, { onCheckedChange: f, isChecked: C() })
       ] })
     ] }) })
   ] }) });
-}, R = d(j);
+}, re = x(D);
 export {
-  R as TableToolbarSettings
+  re as TableToolbarSettings
 };

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: readonly [10, 25, 50, 100];
+//# sourceMappingURL=table.constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.constants.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,4BAA6B,CAAC"}

package/dist/components/table/table.constants.js

@@ -0,0 +1,4 @@
+const E = [10, 25, 50, 100];
+export {
+  E as DEFAULT_PAGE_SIZE_OPTIONS
+};

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

@@ -23,6 +23,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -49,6 +51,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -75,6 +79,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -101,6 +107,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -127,6 +135,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -153,6 +163,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };
@@ -179,6 +191,8 @@ export declare const translations: {
         filterReset: string;
         selected: string;
         selectedSingular: string;
+        rowsPerPage: string;
+        numberOfRows: string;
         action: string;
         deleteSelectedRows: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/table/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AA6B1F,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIxB,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/table/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AA+B1F,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IxB,CAAC"}

package/dist/components/table/translations.js

@@ -21,6 +21,8 @@ const e = {
   filterReset: "Clear filter",
   selected: "{count} selected",
   selectedSingular: "{count} selected",
+  rowsPerPage: "Rows per page",
+  numberOfRows: "{count} rows",
   action: "Action",
   deleteSelectedRows: "Delete selected rows"
 }, n = {
@@ -47,6 +49,8 @@ const e = {
     filterReset: "Rensa filter",
     selected: "{count} valda",
     selectedSingular: "{count} vald",
+    rowsPerPage: "Rader per sida",
+    numberOfRows: "{count} rader",
     action: "Åtgärd",
     deleteSelectedRows: "Ta bort valda rader"
   },
@@ -75,6 +79,8 @@ const e = {
     filterReset: "Fjern filter",
     selected: "{count} valgte",
     selectedSingular: "{count} valgt",
+    rowsPerPage: "Rader per side",
+    numberOfRows: "{count} rader",
     action: "Handling",
     deleteSelectedRows: "Fjern valgte rader"
   },
@@ -101,6 +107,8 @@ const e = {
     filterReset: "Fjern filter",
     selected: "{count} valgte",
     selectedSingular: "{count} valgt",
+    rowsPerPage: "Rækker per side",
+    numberOfRows: "{count} rækker",
     action: "Handling",
     deleteSelectedRows: "Fjern valgte rækker"
   },
@@ -127,6 +135,8 @@ const e = {
     filterReset: "Effacer le filtre",
     selected: "{count} sélectionnées",
     selectedSingular: "{count} sélectionnée",
+    rowsPerPage: "Lignes par page",
+    numberOfRows: "{count} lignes",
     action: "Action",
     deleteSelectedRows: "Supprimer les lignes sélectionnées"
   },
@@ -153,6 +163,8 @@ const e = {
     filterReset: "Filter wissen",
     selected: "{count} geselecteerd",
     selectedSingular: "{count} geselecteerd",
+    rowsPerPage: "Rijen per pagina",
+    numberOfRows: "{count} rijen",
     action: "Actie",
     deleteSelectedRows: "Verwijder geselecteerde rijen"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "9.1.0",
+	"version": "9.2.1",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,
@@ -38,7 +38,7 @@
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.18.2",
-		"@caspeco/eslint-config-react": "^5.1.0",
+		"@caspeco/eslint-config-react": "^5.2.1",
 		"@caspeco/prettier-config": "^1.0.7",
 		"@chakra-ui/cli": "^3.35.0",
 		"@eslint/js": "^9.39.2",
@@ -51,11 +51,11 @@
 		"eslint": "^9.39.2",
 		"eslint-plugin-react-hooks": "^7.1.1",
 		"eslint-plugin-react-refresh": "^0.5.2",
-		"globals": "^17.5.0",
+		"globals": "^17.6.0",
 		"rimraf": "^6.1.3",
-		"tsc-alias": "^1.8.16",
+		"tsc-alias": "^1.8.17",
 		"typescript": "~6.0.3",
-		"typescript-eslint": "^8.59.0",
+		"typescript-eslint": "^8.59.1",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-tsconfig-paths": "^6.1.1",