@caspeco/casper-ui-library 7.2.1 → 7.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/table/table-toolbar.d.ts +7 -2
  2. package/dist/components/table/table-toolbar.d.ts.map +1 -1
  3. package/dist/components/table/table-toolbar.js +100 -86
  4. package/dist/components/table/translations.d.ts +5 -0
  5. package/dist/components/table/translations.d.ts.map +1 -1
  6. package/dist/components/table/translations.js +4 -0
  7. package/package.json +8 -8
package/dist/components/table/table-toolbar.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import { MenuList } from '../menu/index.js';
1
2
  import { ThemeStyleProps } from '../../theme/index.js';
2
- import { ChangeEvent } from 'react';
3
+ import { ChangeEvent, ComponentProps } from 'react';
3
4
  export type TableToolbarProps = {
4
5
  /**
5
6
  * Text for the header above the table, describing what the table is used for
@@ -13,8 +14,12 @@ export type TableToolbarProps = {
13
14
  * Use this to add a new item. Optional.
14
15
  */
15
16
  onAddNewItem?: () => void;
17
+ /**
18
+ * Use this to add a action menu. Needs a [MenuList](https://caspeco.github.io/casper-ui-library/components/menu/) to render correctly. Optional.
19
+ */
20
+ actionMenu?: React.ReactElement<ComponentProps<typeof MenuList>, typeof MenuList>;
16
21
  };
17
- declare function TableToolbarInner({ tableName, onSearch, onAddNewItem, ...props }: TableToolbarProps & ThemeStyleProps): import("react/jsx-runtime").JSX.Element;
22
+ declare const TableToolbarInner: ({ tableName, onSearch, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
18
23
  export declare const TableToolbar: typeof TableToolbarInner;
19
24
  export {};
20
25
  //# sourceMappingURL=table-toolbar.d.ts.map
package/dist/components/table/table-toolbar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAMN,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAIrE,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;CAC1B,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACR,EAAE,iBAAiB,GAAG,eAAe,2CA2JrC;AAED,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
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"}
package/dist/components/table/table-toolbar.js CHANGED
@@ -1,135 +1,149 @@
1
- import { jsx as e, jsxs as r, Fragment as j } from "react/jsx-runtime";
2
- import { useMediaQuery as V, Flex as a, Portal as z, Box as S } from "@chakra-ui/react";
3
- import { memo as v, useCallback as l, useMemo as T } from "react";
4
- import { useTableContext as H } from "./table-context.js";
5
- import { translations as O } from "./translations.js";
6
- import { Input as A } from "../input/input.js";
7
- import { Icon as M } from "../icon/icon.js";
8
- import { Icons as h } from "../icon/types.js";
9
- import { Menu as D } from "../menu/menu.js";
10
- import { MenuButton as G } from "../menu/menu-button.js";
11
- import { MenuList as E } from "../menu/menu-list.js";
12
- import { Text as x } from "../text/text.js";
13
- import { MenuItem as y } from "../menu/menu-item.js";
14
- import { Checkbox as P } from "../checkbox/checkbox.js";
15
- import { MenuDivider as Q } from "../menu/menu-divider.js";
16
- import { Switch as W } from "../switch/switch.js";
17
- import { IconButton as X } from "../icon-button/icon-button.js";
18
- import { ThemeIconSizeVariable as Y, ThemeSpaceVariable as i, ThemeColorVariable as I, ThemeFontVariable as q, ThemeFontSizeVariable as J } from "../../theme/theme-types.js";
19
- function K({
20
- tableName: p,
21
- onSearch: b,
22
- onAddNewItem: g,
23
- ...w
24
- }) {
25
- const t = H(), [B] = V("(min-width: 48em)"), o = O[t.localeString], f = l(() => t.table.getAllColumns().length === Object.keys(t.breakingContentState).length && !Object.values(t.breakingContentState).includes(!1), [t.breakingContentState, t.table]), C = l(
1
+ import { jsx as e, jsxs as o, Fragment as v } from "react/jsx-runtime";
2
+ import { useMediaQuery as A, Flex as a, Portal as H, Box as M } from "@chakra-ui/react";
3
+ import { memo as O, useCallback as l, useMemo as x } from "react";
4
+ import { useTableContext as D } from "./table-context.js";
5
+ import { translations as G } from "./translations.js";
6
+ import { Input as E } from "../input/input.js";
7
+ import { Icon as y } from "../icon/icon.js";
8
+ import { Icons as c } from "../icon/types.js";
9
+ import { Menu as I } from "../menu/menu.js";
10
+ import { MenuButton as P } from "../menu/menu-button.js";
11
+ import { MenuList as Q } from "../menu/menu-list.js";
12
+ import { Text as w } from "../text/text.js";
13
+ import { MenuItem as B } from "../menu/menu-item.js";
14
+ import { Checkbox as W } from "../checkbox/checkbox.js";
15
+ import { MenuDivider as X } from "../menu/menu-divider.js";
16
+ import { Switch as Y } from "../switch/switch.js";
17
+ import { IconButton as q } from "../icon-button/icon-button.js";
18
+ import { MenuIconButton as J } from "../menu/menu-icon-button.js";
19
+ import { ThemeIconSizeVariable as K, ThemeSpaceVariable as i, ThemeColorVariable as F, ThemeFontVariable as R, ThemeFontSizeVariable as U } from "../../theme/theme-types.js";
20
+ const Z = ({
21
+ tableName: g,
22
+ onSearch: f,
23
+ onAddNewItem: C,
24
+ actionMenu: p,
25
+ ...L
26
+ }) => {
27
+ 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(
26
28
  (n) => {
27
- const u = {};
28
- t.table.getAllColumns().forEach((k) => {
29
- u[k.id] = n.target.checked;
30
- }), t.setBreakingContentState(u), t.onBreakingContentChange?.(u);
29
+ const b = {};
30
+ t.table.getAllColumns().forEach((T) => {
31
+ b[T.id] = n.target.checked;
32
+ }), t.setBreakingContentState(b), t.onBreakingContentChange?.(b);
31
33
  },
32
34
  [t]
33
- ), c = l(
35
+ ), s = l(
34
36
  () => /* @__PURE__ */ e(
35
- A,
37
+ E,
36
38
  {
37
- leftElement: /* @__PURE__ */ e(M, { icon: h.Search }),
38
- onChange: (n) => b?.(n),
39
+ leftElement: /* @__PURE__ */ e(y, { icon: c.Search }),
40
+ onChange: (n) => f?.(n),
39
41
  size: "md",
40
42
  type: "search",
41
43
  w: { base: "100%", md: "170px" },
42
44
  "data-testid": "filterInput"
43
45
  }
44
46
  ),
45
- [b]
46
- ), s = l(
47
- () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r(D, { closeOnSelect: !1, isLazy: !0, children: [
48
- /* @__PURE__ */ e(G, { "aria-label": o.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ e(M, { icon: h.Sliders, size: Y.Medium }) }),
49
- /* @__PURE__ */ e(z, { children: /* @__PURE__ */ r(E, { children: [
47
+ [f]
48
+ ), m = l(
49
+ () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ o(I, { closeOnSelect: !1, isLazy: !0, children: [
50
+ /* @__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 }) }),
51
+ /* @__PURE__ */ e(H, { children: /* @__PURE__ */ o(Q, { children: [
50
52
  /* @__PURE__ */ e(
51
- x,
53
+ w,
52
54
  {
53
- color: I.OnSurfaceSubdued,
55
+ color: F.OnSurfaceSubdued,
54
56
  py: i.Small,
55
57
  px: i.Medium,
56
- children: o.showColumns
58
+ children: r.showColumns
57
59
  }
58
60
  ),
59
- /* @__PURE__ */ e(S, { maxHeight: "320px", overflowY: "auto", children: t.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ r(y, { itemType: "checkbox", leftIcon: h.GripMore, children: [
60
- /* @__PURE__ */ e(j, { children: n.columnDef.header }),
61
+ /* @__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: [
62
+ /* @__PURE__ */ e(v, { children: n.columnDef.header }),
61
63
  /* @__PURE__ */ e(
62
- P,
64
+ W,
63
65
  {
64
66
  isChecked: n.getIsVisible(),
65
67
  onChange: n.getToggleVisibilityHandler()
66
68
  }
67
69
  )
68
70
  ] }, n.id)) }),
69
- /* @__PURE__ */ e(Q, {}),
70
- /* @__PURE__ */ r(y, { itemType: "switch", children: [
71
- o.breakingContent,
72
- /* @__PURE__ */ e(W, { onChange: C, isChecked: f() })
71
+ /* @__PURE__ */ e(X, {}),
72
+ /* @__PURE__ */ o(B, { itemType: "switch", children: [
73
+ r.breakingContent,
74
+ /* @__PURE__ */ e(Y, { onChange: S, isChecked: k() })
73
75
  ] })
74
76
  ] }) })
75
77
  ] }) }),
76
78
  [
77
- f,
78
- C,
79
+ k,
80
+ S,
79
81
  t.table,
80
- o.breakingContent,
81
- o.presets,
82
- o.showColumns
82
+ r.breakingContent,
83
+ r.presets,
84
+ r.showColumns
83
85
  ]
84
- ), m = l(
86
+ ), d = l(
85
87
  () => /* @__PURE__ */ e(
86
- X,
88
+ q,
87
89
  {
88
- "aria-label": o.new,
89
- icon: h.Increase,
90
- onClick: g,
90
+ "aria-label": r.new,
91
+ icon: c.Increase,
92
+ onClick: C,
91
93
  variant: "secondary"
92
94
  }
93
95
  ),
94
- [g, o.new]
95
- ), d = l(
96
+ [C, r.new]
97
+ ), u = l(() => p ? /* @__PURE__ */ o(I, { children: [
98
+ /* @__PURE__ */ e(
99
+ J,
100
+ {
101
+ icon: c.MoreVertical,
102
+ variant: "ghost",
103
+ size: "md",
104
+ "aria-label": r.toolbarActions
105
+ }
106
+ ),
107
+ p
108
+ ] }) : null, [p, r.toolbarActions]), h = l(
96
109
  () => /* @__PURE__ */ e(
97
- x,
110
+ w,
98
111
  {
99
- fontSize: J.X2Large,
100
- color: I.OnBackgroundHeader,
112
+ fontSize: U.X2Large,
113
+ color: F.OnBackgroundHeader,
101
114
  fontWeight: "bold",
102
- fontFamily: q.Header,
103
- children: p
115
+ fontFamily: R.Header,
116
+ children: g
104
117
  }
105
118
  ),
106
- [p]
107
- ), F = T(
108
- () => /* @__PURE__ */ e(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: /* @__PURE__ */ r(a, { justifyContent: "space-between", alignItems: "center", children: [
109
- d(),
110
- /* @__PURE__ */ r(a, { gap: i.Medium, children: [
111
- c(),
119
+ [g]
120
+ ), j = x(
121
+ () => /* @__PURE__ */ e(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: /* @__PURE__ */ o(a, { justifyContent: "space-between", alignItems: "center", children: [
122
+ h(),
123
+ /* @__PURE__ */ o(a, { gap: i.Medium, children: [
112
124
  s(),
113
- m()
125
+ m(),
126
+ u(),
127
+ d()
114
128
  ] })
115
129
  ] }) }),
116
- [m, c, s, d]
117
- ), L = T(
118
- () => /* @__PURE__ */ r(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: [
119
- /* @__PURE__ */ r(a, { justifyContent: "space-between", children: [
120
- d(),
121
- m()
130
+ [d, s, m, h, u]
131
+ ), z = x(
132
+ () => /* @__PURE__ */ o(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: [
133
+ /* @__PURE__ */ o(a, { justifyContent: "space-between", children: [
134
+ h(),
135
+ d()
122
136
  ] }),
123
- /* @__PURE__ */ r(a, { justifyContent: "space-between", gap: i.Medium, children: [
124
- c(),
125
- s()
137
+ /* @__PURE__ */ o(a, { justifyContent: "space-between", gap: i.Medium, children: [
138
+ s(),
139
+ u(),
140
+ m()
126
141
  ] })
127
142
  ] }),
128
- [m, c, s, d]
143
+ [d, s, m, h, u]
129
144
  );
130
- return /* @__PURE__ */ e(S, { id: "tableToolbar", ...w, children: B ? F : L });
131
- }
132
- const ue = v(K);
145
+ return /* @__PURE__ */ e(M, { id: "tableToolbar", ...L, children: V ? j : z });
146
+ }, ge = O(Z);
133
147
  export {
134
- ue as TableToolbar
148
+ ge as TableToolbar
135
149
  };
package/dist/components/table/translations.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare const translations: {
18
18
  settings: string;
19
19
  more: string;
20
20
  moreActions: string;
21
+ toolbarActions: string;
21
22
  filterBoxReset: string;
22
23
  filterReset: string;
23
24
  };
@@ -39,6 +40,7 @@ export declare const translations: {
39
40
  settings: string;
40
41
  more: string;
41
42
  moreActions: string;
43
+ toolbarActions: string;
42
44
  filterBoxReset: string;
43
45
  filterReset: string;
44
46
  };
@@ -60,6 +62,7 @@ export declare const translations: {
60
62
  settings: string;
61
63
  more: string;
62
64
  moreActions: string;
65
+ toolbarActions: string;
63
66
  filterBoxReset: string;
64
67
  filterReset: string;
65
68
  };
@@ -81,6 +84,7 @@ export declare const translations: {
81
84
  settings: string;
82
85
  more: string;
83
86
  moreActions: string;
87
+ toolbarActions: string;
84
88
  filterBoxReset: string;
85
89
  filterReset: string;
86
90
  };
@@ -102,6 +106,7 @@ export declare const translations: {
102
106
  settings: string;
103
107
  more: string;
104
108
  moreActions: string;
109
+ toolbarActions: string;
105
110
  filterBoxReset: string;
106
111
  filterReset: string;
107
112
  };
package/dist/components/table/translations.d.ts.map CHANGED
@@ -1 +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,CAAC;AAwBtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkExB,CAAC"}
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,CAAC;AAyBtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqExB,CAAC"}
package/dist/components/table/translations.js CHANGED
@@ -16,6 +16,7 @@ const e = {
16
16
  settings: "Settings",
17
17
  more: "More",
18
18
  moreActions: "More actions",
19
+ toolbarActions: "Toolbar actions",
19
20
  filterBoxReset: "Clear selection",
20
21
  filterReset: "Clear filter"
21
22
  }, n = {
@@ -37,6 +38,7 @@ const e = {
37
38
  settings: "Inställningar",
38
39
  more: "Mer",
39
40
  moreActions: "Fler åtgärder",
41
+ toolbarActions: "Verktygsfältsåtgärder",
40
42
  filterBoxReset: "Rensa val",
41
43
  filterReset: "Rensa filter"
42
44
  },
@@ -60,6 +62,7 @@ const e = {
60
62
  settings: "Innstillinger",
61
63
  more: "Flere",
62
64
  moreActions: "Flere handlinger",
65
+ toolbarActions: "Verktøylinjehandlinger",
63
66
  filterBoxReset: "Fjern valg",
64
67
  filterReset: "Fjern filter"
65
68
  },
@@ -81,6 +84,7 @@ const e = {
81
84
  settings: "Indstillinger",
82
85
  more: "Mere",
83
86
  moreActions: "Flere handlinger",
87
+ toolbarActions: "Værktøjslinjehandlinger",
84
88
  filterBoxReset: "Fjern valg",
85
89
  filterReset: "Fjern filter"
86
90
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@caspeco/casper-ui-library",
3
- "version": "7.2.1",
3
+ "version": "7.3.0",
4
4
  "prettier": "@caspeco/prettier-config",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -29,28 +29,28 @@
29
29
  "devDependencies": {
30
30
  "@arethetypeswrong/cli": "^0.18.2",
31
31
  "@caspeco/eslint-config": "^4.1.1",
32
- "@caspeco/prettier-config": "^1.0.6",
33
- "@eslint/js": "^9.38.0",
32
+ "@caspeco/prettier-config": "^1.0.7",
33
+ "@eslint/js": "^9.39.0",
34
34
  "@testing-library/jest-dom": "^6.9.1",
35
35
  "@testing-library/react": "^16.3.0",
36
36
  "@testing-library/user-event": "^14.6.1",
37
37
  "@types/jest": "^30.0.0",
38
- "@types/node": "^24.9.1",
38
+ "@types/node": "^24.10.0",
39
39
  "@types/react": "^18.3.12",
40
40
  "@types/react-dom": "^18.3.1",
41
41
  "@vitejs/plugin-react-swc": "^4.2.0",
42
- "eslint": "^9.38.0",
42
+ "eslint": "^9.39.0",
43
43
  "eslint-plugin-react-hooks": "^7.0.1",
44
44
  "eslint-plugin-react-refresh": "^0.4.24",
45
- "globals": "^16.4.0",
46
- "jsdom": "^27.0.1",
45
+ "globals": "^16.5.0",
46
+ "jsdom": "^27.1.0",
47
47
  "tsc-alias": "^1.8.16",
48
48
  "typescript": "~5.9.3",
49
49
  "typescript-eslint": "^8.46.2",
50
50
  "vite": "^7.1.12",
51
51
  "vite-plugin-dts": "^4.5.4",
52
52
  "vite-tsconfig-paths": "^5.1.4",
53
- "vitest": "^4.0.3"
53
+ "vitest": "^4.0.6"
54
54
  },
55
55
  "peerDependencies": {
56
56
  "@chakra-ui/react": "^2.8.2",