@ogcio/design-system-react 1.14.0 → 1.15.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.
@@ -1,34 +1,34 @@
1
1
  "use client";
2
- import { jsx as f } from "react/jsx-runtime";
3
- import { forwardRef as l } from "react";
4
- import { cn as p } from "../cn.js";
5
- import { isButtonDisabled as c, getSizeClass as b, getVariantAppearanceClass as g } from "./helpers.js";
6
- const r = l(
2
+ import { jsx as l } from "react/jsx-runtime";
3
+ import { forwardRef as p } from "react";
4
+ import { cn as u } from "../cn.js";
5
+ import { getSizeClass as c, isButtonDisabled as b, getVariantAppearanceClass as B } from "./helpers.js";
6
+ const r = p(
7
7
  ({
8
8
  variant: e,
9
9
  appearance: o,
10
- size: n,
10
+ size: a,
11
11
  disabled: t,
12
- className: a,
13
- children: i,
14
- dataTestid: s,
12
+ className: n,
13
+ children: s,
14
+ dataTestid: i,
15
15
  ...m
16
- }, u) => /* @__PURE__ */ f(
16
+ }, f) => /* @__PURE__ */ l(
17
17
  "button",
18
18
  {
19
19
  ...m,
20
- "data-testid": s || "govie-button",
21
- ref: u,
20
+ "data-testid": i,
21
+ ref: f,
22
22
  "aria-disabled": t,
23
23
  disabled: t,
24
- className: p(
24
+ className: u(
25
25
  "gi-btn",
26
- g({ disabled: t, variant: e, appearance: o }),
27
- b(n),
28
- c({ disabled: t, variant: e, appearance: o }),
29
- a
26
+ B({ disabled: t, variant: e, appearance: o }),
27
+ b({ disabled: t, variant: e, appearance: o }),
28
+ c(a),
29
+ n
30
30
  ),
31
- children: i
31
+ children: s
32
32
  }
33
33
  )
34
34
  );
@@ -0,0 +1,12 @@
1
+ import { default as React } from 'react';
2
+ interface DataGridFooterTypeProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ children: React.ReactNode;
4
+ }
5
+ interface DataGridFooterProps extends React.HTMLAttributes<HTMLDivElement> {
6
+ children?: React.ReactNode;
7
+ }
8
+ export type { DataGridFooterProps, DataGridFooterTypeProps };
9
+ export declare const DataGridFooterStart: React.FC<DataGridFooterTypeProps>;
10
+ export declare const DataGridFooterCenter: React.FC<DataGridFooterTypeProps>;
11
+ export declare const DataGridFooterEnd: React.FC<DataGridFooterTypeProps>;
12
+ export declare const DataGridFooter: React.FC<DataGridFooterProps>;
@@ -0,0 +1,66 @@
1
+ import { jsx as s, jsxs as E } from "react/jsx-runtime";
2
+ import i from "react";
3
+ import { cn as l } from "../cn.js";
4
+ const n = (t, e) => i.isValidElement(t) && t.type === e, o = (t, e, a) => t ? /* @__PURE__ */ s(
5
+ "div",
6
+ {
7
+ className: l(
8
+ e,
9
+ a,
10
+ t.props.className
11
+ ),
12
+ style: t.props.style,
13
+ children: t.props.children
14
+ }
15
+ ) : null, F = ({
16
+ children: t,
17
+ ...e
18
+ }) => /* @__PURE__ */ s("div", { ...e, children: t });
19
+ F.displayName = "DataGridFooterStart";
20
+ const D = ({
21
+ children: t,
22
+ ...e
23
+ }) => /* @__PURE__ */ s("div", { ...e, children: t });
24
+ D.displayName = "DataGridFooterCenter";
25
+ const G = ({
26
+ children: t,
27
+ ...e
28
+ }) => /* @__PURE__ */ s("div", { ...e, children: t });
29
+ G.displayName = "DataGridFooterEnd";
30
+ const N = ({
31
+ children: t,
32
+ className: e,
33
+ ...a
34
+ }) => {
35
+ const C = i.useMemo(() => {
36
+ let f = null, u = null, y = null;
37
+ return i.Children.forEach(t, (r) => {
38
+ n(r, F) ? f = r : n(r, D) ? u = r : n(r, G) && (y = r);
39
+ }), { start: f, center: u, end: y };
40
+ }, [t]), { start: d, center: c, end: m } = C, p = !!!d && !!!c && !!m, g = "gi-grow gi-basis-0 gi-min-w-0", S = `${g} gi-text-center`, x = l("gi-min-w-0", {
41
+ "gi-basis-1/2 gi-text-right": !p
42
+ });
43
+ return /* @__PURE__ */ E(
44
+ "div",
45
+ {
46
+ ...a,
47
+ className: l(
48
+ "gi-flex gi-flex-row gi-w-full gi-items-center gi-py-2",
49
+ p ? "gi-justify-end" : "gi-gap-2",
50
+ e
51
+ ),
52
+ children: [
53
+ o(d, g),
54
+ o(c, S),
55
+ o(m, x)
56
+ ]
57
+ }
58
+ );
59
+ };
60
+ N.displayName = "DataGridFooter";
61
+ export {
62
+ N as DataGridFooter,
63
+ D as DataGridFooterCenter,
64
+ G as DataGridFooterEnd,
65
+ F as DataGridFooterStart
66
+ };
@@ -0,0 +1,12 @@
1
+ import { default as React } from 'react';
2
+ interface DataGridHeaderTypeProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ children: React.ReactNode;
4
+ }
5
+ interface DataGridHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
6
+ children?: React.ReactNode;
7
+ }
8
+ export declare const DataGridHeader: React.FC<DataGridHeaderProps>;
9
+ export declare const DataGridHeaderSearch: React.FC<DataGridHeaderTypeProps>;
10
+ export declare const DataGridHeaderFilter: React.FC<DataGridHeaderTypeProps>;
11
+ export declare const DataGridHeaderActions: React.FC<DataGridHeaderTypeProps>;
12
+ export {};
@@ -0,0 +1,82 @@
1
+ import { jsxs as D, jsx as n } from "react/jsx-runtime";
2
+ import s from "react";
3
+ import { cn as i } from "../cn.js";
4
+ const l = (e, a) => s.isValidElement(e) && e.type === a, u = ({
5
+ children: e,
6
+ className: a,
7
+ ...r
8
+ }) => {
9
+ const { search: g, filter: b, actions: y } = s.useMemo(() => {
10
+ let f = null, m = null, p = null;
11
+ return s.Children.forEach(e, (t) => {
12
+ l(t, o) ? f = t : l(t, d) ? m = t : l(t, c) && (p = t);
13
+ }), { search: f, filter: m, actions: p };
14
+ }, [e]);
15
+ return /* @__PURE__ */ D(
16
+ "div",
17
+ {
18
+ ...r,
19
+ className: i(
20
+ "gi-flex gi-flex-wrap gi-items-center gi-w-full gi-gap-4 gi-mb-2",
21
+ a
22
+ ),
23
+ children: [
24
+ g,
25
+ b,
26
+ y
27
+ ]
28
+ }
29
+ );
30
+ };
31
+ u.displayName = "DataGridHeader";
32
+ Object.defineProperty(u, "componentType", {
33
+ value: "DataGridHeader",
34
+ writable: !1,
35
+ enumerable: !1
36
+ });
37
+ const o = ({
38
+ children: e,
39
+ className: a,
40
+ ...r
41
+ }) => /* @__PURE__ */ n("div", { className: i("gi-flex gi-flex-1", a), ...r, children: e });
42
+ o.displayName = "DataGridHeaderSearch";
43
+ Object.defineProperty(o, "componentType", {
44
+ value: "DataGridHeaderSearch",
45
+ writable: !1,
46
+ enumerable: !1
47
+ });
48
+ const d = ({
49
+ children: e,
50
+ className: a,
51
+ ...r
52
+ }) => /* @__PURE__ */ n("div", { className: i("gi-flex gi-items-center", a), ...r, children: e });
53
+ d.displayName = "DataGridHeaderFilter";
54
+ Object.defineProperty(d, "componentType", {
55
+ value: "DataGridHeaderFilter",
56
+ writable: !1,
57
+ enumerable: !1
58
+ });
59
+ const c = ({
60
+ children: e,
61
+ className: a,
62
+ ...r
63
+ }) => /* @__PURE__ */ n(
64
+ "div",
65
+ {
66
+ className: i("gi-flex gi-items-center gi-ml-auto", a),
67
+ ...r,
68
+ children: e
69
+ }
70
+ );
71
+ c.displayName = "DataGridHeaderActions";
72
+ Object.defineProperty(c, "componentType", {
73
+ value: "DataGridHeaderActions",
74
+ writable: !1,
75
+ enumerable: !1
76
+ });
77
+ export {
78
+ u as DataGridHeader,
79
+ c as DataGridHeaderActions,
80
+ d as DataGridHeaderFilter,
81
+ o as DataGridHeaderSearch
82
+ };
@@ -1,34 +1,35 @@
1
- import { jsx as a, jsxs as l, Fragment as u } from "react/jsx-runtime";
2
- import { useState as h } from "react";
1
+ import { jsx as a, jsxs as l, Fragment as p } from "react/jsx-runtime";
2
+ import { useState as u } from "react";
3
3
  import { cn as d } from "../../cn.js";
4
- import { DrawerWrapper as b, DrawerBody as f } from "../../drawer/drawer.js";
5
- import { translate as c } from "../../i18n/utility.js";
6
- import { Icon as i } from "../../icon/icon.js";
4
+ import { DrawerWrapper as b, DrawerBody as I } from "../../drawer/drawer.js";
5
+ import { translate as s } from "../../i18n/utility.js";
6
+ import { Icon as o } from "../../icon/icon.js";
7
7
  import { Input as m } from "../../primitives/input.js";
8
- const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
8
+ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
9
9
  "div",
10
10
  {
11
11
  id: `SlotContainer-${e}`,
12
+ "data-testid": `SlotContainer-${e}`,
12
13
  "data-index": e,
13
- "aria-label": c("header.headerSlot", {
14
+ "aria-label": s("header.headerSlot", {
14
15
  index: e + 1,
15
16
  defaultValue: `Slot Container ${e + 1}`
16
17
  }),
17
18
  className: "gi-hidden gi-bg-gray-50 gi-py-4 gi-px-4 gi-border-b-2xl gi-border-b-color-surface-system-primary-default gi-order-3",
18
19
  children: r
19
20
  }
20
- ), I = ({
21
+ ), $ = ({
21
22
  index: e,
22
- item: { component: r, drawerPosition: p, icon: n, label: o, ariaLabel: s }
23
+ item: { component: r, drawerPosition: h, icon: c, label: i, ariaLabel: g }
23
24
  }) => {
24
- const [t, g] = h(!1);
25
- return /* @__PURE__ */ l(u, { children: [
25
+ const [t, n] = u(!1);
26
+ return /* @__PURE__ */ l(p, { children: [
26
27
  /* @__PURE__ */ l(
27
28
  "label",
28
29
  {
29
30
  htmlFor: `ItemActionDrawerTrigger-${e}`,
30
31
  className: "gi-header-tool-item",
31
- onClick: () => g(!0),
32
+ onClick: () => n(!0),
32
33
  children: [
33
34
  /* @__PURE__ */ a(
34
35
  m,
@@ -37,33 +38,33 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
37
38
  className: "gi-block gi-w-0 gi-absolute gi-h-0",
38
39
  id: `ItemActionDrawerTrigger-${e}`,
39
40
  "data-index": e,
40
- "aria-label": s || o || "",
41
- type: "button"
41
+ "aria-label": g || i || "",
42
+ type: "checkbox"
42
43
  }
43
44
  ),
44
- o && /* @__PURE__ */ a(
45
+ i && /* @__PURE__ */ a(
45
46
  "span",
46
47
  {
47
48
  id: `ItemActionDrawerTrigger-${e}-label`,
48
49
  className: "label",
49
- "aria-hidden": s ? "true" : "false",
50
- children: o
50
+ "aria-hidden": g ? "true" : "false",
51
+ children: i
51
52
  }
52
53
  ),
53
- n && /* @__PURE__ */ a(
54
- i,
54
+ c && /* @__PURE__ */ a(
55
+ o,
55
56
  {
56
57
  className: d({
57
58
  "gi-hidden": t,
58
59
  "gi-block": !t
59
60
  }),
60
- icon: n,
61
+ icon: c,
61
62
  id: `ItemIconDrawerActionTrigger-${e}`,
62
63
  ariaHidden: !0
63
64
  }
64
65
  ),
65
66
  /* @__PURE__ */ a(
66
- i,
67
+ o,
67
68
  {
68
69
  className: d({
69
70
  "gi-hidden": !t,
@@ -71,6 +72,7 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
71
72
  }),
72
73
  id: `ItemCloseTrigger-${e}`,
73
74
  ariaHidden: !0,
75
+ "data-testid": `ItemCloseTrigger-${e}`,
74
76
  icon: "close"
75
77
  }
76
78
  )
@@ -81,21 +83,21 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
81
83
  b,
82
84
  {
83
85
  isOpen: t,
84
- onClose: () => g(!1),
85
- position: p || "right",
86
- closeButtonLabel: c("header.drawer.close", {
86
+ onClose: () => n(!1),
87
+ position: h || "right",
88
+ closeButtonLabel: s("header.drawer.close", {
87
89
  defaultValue: "Close"
88
90
  }),
89
91
  closeButtonSize: "large",
90
- children: /* @__PURE__ */ a(f, { children: r })
92
+ children: /* @__PURE__ */ a(I, { children: r })
91
93
  }
92
94
  )
93
95
  ] });
94
- }, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(I, { index: r, item: e }) : /* @__PURE__ */ l(
96
+ }, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a($, { index: r, item: e }) : /* @__PURE__ */ l(
95
97
  "label",
96
98
  {
97
99
  htmlFor: `ItemActionTrigger-${r}`,
98
- "aria-label": c("header.toggleActionItem", {
100
+ "aria-label": s("header.toggleActionItem", {
99
101
  item: e.label || `item ${r + 1}`,
100
102
  defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
101
103
  }),
@@ -115,7 +117,7 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
115
117
  ),
116
118
  e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
117
119
  e.icon && /* @__PURE__ */ a(
118
- i,
120
+ o,
119
121
  {
120
122
  icon: e.icon,
121
123
  ariaHidden: !0,
@@ -123,18 +125,19 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
123
125
  }
124
126
  ),
125
127
  /* @__PURE__ */ a(
126
- i,
128
+ o,
127
129
  {
128
130
  className: "gi-hidden close-icon",
129
131
  ariaHidden: !0,
130
132
  id: `ItemCloseTrigger-${r}`,
131
- icon: "close"
133
+ icon: "close",
134
+ "data-testid": `ItemCloseTrigger-${r}`
132
135
  }
133
136
  )
134
137
  ]
135
138
  }
136
139
  );
137
140
  export {
138
- S as SlotContainer,
141
+ D as SlotContainer,
139
142
  y as SlotItemAction
140
143
  };
@@ -1,2 +1 @@
1
1
  export declare const attachEventsToItemActionTriggers: () => (() => void) | undefined;
2
- export declare const attachEventsToSearchTrigger: () => () => void;
@@ -1,79 +1,54 @@
1
- const i = "gi-hidden", d = "gi-block", f = () => {
2
- const e = document.querySelectorAll(
1
+ const l = "gi-hidden", d = "gi-block", u = () => {
2
+ const i = document.querySelectorAll(
3
3
  "[id^='ItemActionTrigger-']"
4
- ), a = document.querySelectorAll("[id^='SlotContainer-']"), c = document.querySelector(
4
+ ), m = document.querySelectorAll("[id^='SlotContainer-']"), o = document.querySelector(
5
5
  "#SearchTrigger"
6
6
  );
7
7
  return {
8
- itemSlotActions: e,
9
- slotContainers: a,
10
- searchTrigger: c
8
+ itemSlotActions: i,
9
+ slotContainers: m,
10
+ searchTrigger: o
11
11
  };
12
- }, A = (e) => {
13
- const { itemSlotActions: a } = f();
14
- if (e.checked)
15
- for (const c of a) {
16
- const h = c;
17
- h.checked = !1, h.dispatchEvent(
18
- new CustomEvent("change", {
19
- detail: {
20
- fromSearchTrigger: !0
21
- }
22
- })
23
- );
24
- }
25
- }, v = (e) => {
26
- A(e.target);
27
- }, T = () => {
28
- const { itemSlotActions: e, slotContainers: a, searchTrigger: c } = f();
29
- if (e.length > 0) {
30
- const h = (t, o, m) => {
31
- const l = t.dataset.index || "", s = document.querySelector(
32
- `#ItemIconActionTrigger-${l}`
33
- ), r = document.querySelector(
34
- `#ItemCloseTrigger-${l}`
35
- ), { itemSlotActions: g } = f(), u = document.querySelector(
36
- `#SlotContainer-${l}`
12
+ }, k = () => {
13
+ const { itemSlotActions: i, slotContainers: m, searchTrigger: o } = u();
14
+ if (i.length > 0) {
15
+ const S = (e, t, f) => {
16
+ const a = e.dataset.index || "", s = document.querySelector(
17
+ `#ItemIconActionTrigger-${a}`
18
+ ), c = document.querySelector(
19
+ `#ItemCloseTrigger-${a}`
20
+ ), { itemSlotActions: r } = u(), g = document.querySelector(
21
+ `#SlotContainer-${a}`
37
22
  );
38
- if (!o || m)
39
- for (const n of a)
40
- n.classList.remove(d), n.classList.add(i);
41
- if (t.checked && !o)
42
- s.classList.add(i), r.classList.add(d), r.classList.remove(i), u.classList.remove(i), u.classList.add(d);
23
+ if (!t || f)
24
+ for (const n of m)
25
+ n.classList.remove(d), n.classList.add(l);
26
+ if (e.dataset.open === "false" && !t)
27
+ s.classList.add(l), c.classList.add(d), c.classList.remove(l), g.classList.remove(l), g.classList.add(d), e.dataset.open = "true";
43
28
  else {
44
- r.classList.add(i), r.classList.remove(d), s.classList.add(d), s.classList.remove(i);
29
+ c.classList.add(l), c.classList.remove(d), s.classList.add(d), s.classList.remove(l), e.dataset.open = "false";
45
30
  return;
46
31
  }
47
- const L = [...g].filter(
48
- (n) => n.checked && n.id !== t.id
32
+ const I = [...r].filter(
33
+ (n) => n.id !== e.id
49
34
  );
50
- for (const n of L)
51
- n.checked = !1, n.dispatchEvent(
52
- new CustomEvent("change", {
53
- detail: {
54
- fromFilteredItems: !0
55
- }
56
- })
57
- );
58
- }, S = (t) => {
59
- var r, g;
60
- const o = t, m = (r = o == null ? void 0 : o.detail) == null ? void 0 : r.fromFilteredItems, l = (g = o == null ? void 0 : o.detail) == null ? void 0 : g.fromSearchTrigger, s = t.target;
61
- h(s, m, l), c != null && c.checked && (s != null && s.checked) && (c.checked = !1, c.dispatchEvent(new Event("change", { bubbles: !0 })));
35
+ for (const n of I) {
36
+ const h = n;
37
+ h.dataset.open = "false", S(h, !0);
38
+ }
39
+ }, L = (e) => {
40
+ var c, r;
41
+ const t = e, f = (c = t == null ? void 0 : t.detail) == null ? void 0 : c.fromFilteredItems, a = (r = t == null ? void 0 : t.detail) == null ? void 0 : r.fromSearchTrigger, s = e.target;
42
+ S(s, f, a), o != null && o.checked && (s != null && s.checked) && (o.checked = !1, o.dispatchEvent(new Event("click", { bubbles: !0 })));
62
43
  };
63
- for (const t of e)
64
- t == null || t.addEventListener("change", S);
44
+ for (const e of i)
45
+ e.dataset.open = "false", e == null || e.addEventListener("click", L);
65
46
  return () => {
66
- for (const t of e)
67
- t == null || t.removeEventListener("change", S);
47
+ for (const e of i)
48
+ e == null || e.removeEventListener("click", L);
68
49
  };
69
50
  }
70
- }, k = () => {
71
- const e = document.querySelector("#SearchTrigger");
72
- return e && e.addEventListener("change", v), () => {
73
- e && e.removeEventListener("change", v);
74
- };
75
51
  };
76
52
  export {
77
- T as attachEventsToItemActionTriggers,
78
- k as attachEventsToSearchTrigger
53
+ k as attachEventsToItemActionTriggers
79
54
  };
package/dist/icon/icon.js CHANGED
@@ -149,8 +149,8 @@ function j({
149
149
  return /* @__PURE__ */ e(
150
150
  "span",
151
151
  {
152
- ...f,
153
152
  "data-testid": "govie-icon",
153
+ ...f,
154
154
  onClick: m,
155
155
  "aria-hidden": l || void 0,
156
156
  "aria-label": a,
package/dist/index.d.ts CHANGED
@@ -97,6 +97,8 @@ export { TabList } from './tabs/tab-list.js';
97
97
  export { TabPanel } from './tabs/tab-panel.js';
98
98
  export { Tabs } from './tabs/tabs.js';
99
99
  export type { TabItemProps, TabsProps, TabPanelProps } from './tabs/types.js';
100
+ export type { DataGridFooterProps, DataGridFooterTypeProps, } from './data-grid/data-grid-footer.js';
101
+ export { DataGridFooter, DataGridFooterStart, DataGridFooterCenter, DataGridFooterEnd, } from './data-grid/data-grid-footer.js';
100
102
  export { Tag, TagTypeEnum, type TagProps, type TagType } from './tag/tag.js';
101
103
  export { TextInput, type TextInputProps } from './text-input/text-input.js';
102
104
  export { TextArea, type TextAreaProps } from './textarea/textarea.js';