@ogcio/design-system-react 1.13.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.
Files changed (55) hide show
  1. package/dist/autocomplete/autocomplete.d.ts +21 -3
  2. package/dist/autocomplete/autocomplete.js +208 -159
  3. package/dist/autocomplete/types.d.ts +8 -4
  4. package/dist/autocomplete/types.js +2 -1
  5. package/dist/autocomplete/use-autocomplete-controller.d.ts +4 -2
  6. package/dist/autocomplete/use-autocomplete-controller.js +123 -79
  7. package/dist/button/button.js +27 -22
  8. package/dist/data-grid/data-grid-footer.d.ts +12 -0
  9. package/dist/data-grid/data-grid-footer.js +66 -0
  10. package/dist/data-grid/data-grid-header.d.ts +12 -0
  11. package/dist/data-grid/data-grid-header.js +82 -0
  12. package/dist/header/components/header-slot.js +34 -31
  13. package/dist/header/helper.d.ts +0 -1
  14. package/dist/header/helper.js +37 -62
  15. package/dist/hooks/use-combined-refs.d.ts +5 -0
  16. package/dist/hooks/use-combined-refs.js +10 -0
  17. package/dist/hooks/use-scroll-highlighted-item.d.ts +1 -0
  18. package/dist/hooks/use-scroll-highlighted-item.js +16 -0
  19. package/dist/icon/icon.js +15 -15
  20. package/dist/icon-button/icon-button.js +14 -12
  21. package/dist/index.d.ts +5 -2
  22. package/dist/index.js +68 -63
  23. package/dist/list/list.js +1 -1
  24. package/dist/modal/modal.d.ts +8 -2
  25. package/dist/modal/modal.js +155 -134
  26. package/dist/popover/popover.d.ts +1 -1
  27. package/dist/popover/popover.js +296 -286
  28. package/dist/popover/types.d.ts +1 -0
  29. package/dist/popover/utilities.d.ts +2 -0
  30. package/dist/popover/utilities.js +16 -0
  31. package/dist/primitives/button.d.ts +3 -0
  32. package/dist/primitives/button.js +9 -0
  33. package/dist/select/select-menu.d.ts +2 -2
  34. package/dist/select/select-menu.js +96 -99
  35. package/dist/select/select-next.d.ts +13 -2
  36. package/dist/select/select-next.js +182 -167
  37. package/dist/select/select-search.js +17 -17
  38. package/dist/select/types.d.ts +3 -1
  39. package/dist/styles.css +1 -1
  40. package/dist/table/table-data.js +1 -1
  41. package/dist/tabs/scrollable-tab-list.d.ts +9 -0
  42. package/dist/tabs/scrollable-tab-list.js +84 -0
  43. package/dist/tabs/tab-item.d.ts +9 -15
  44. package/dist/tabs/tab-item.js +85 -38
  45. package/dist/tabs/tab-list.d.ts +2 -5
  46. package/dist/tabs/tab-list.js +83 -49
  47. package/dist/tabs/tab-panel.d.ts +2 -7
  48. package/dist/tabs/tab-panel.js +2 -5
  49. package/dist/tabs/tabs.d.ts +2 -7
  50. package/dist/tabs/tabs.js +24 -20
  51. package/dist/tabs/types.d.ts +64 -0
  52. package/dist/tabs/types.js +1 -0
  53. package/dist/textarea/textarea.d.ts +1 -2
  54. package/dist/textarea/textarea.js +60 -61
  55. package/package.json +4 -4
@@ -1,4 +1,22 @@
1
- import { FC } from 'react';
2
- import { AutocompleteItemProps, AutocompleteProps } from './types.js';
3
- export declare const Autocomplete: FC<AutocompleteProps>;
1
+ import { FC, ChangeEvent } from 'react';
2
+ import { AutocompleteItemProps } from './types.js';
3
+ export declare const Autocomplete: import('react').ForwardRefExoticComponent<{
4
+ id?: string;
5
+ defaultValue?: string;
6
+ disabled?: boolean;
7
+ onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
8
+ freeSolo?: boolean;
9
+ isLoading?: boolean;
10
+ onSelectItem?: (item: string) => void;
11
+ onOpen?: () => void;
12
+ onClose?: () => void;
13
+ isOpen?: boolean;
14
+ } & {
15
+ children?: import('react').ReactNode | undefined;
16
+ } & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
17
+ export declare const renderSelectMenuOptions: (options: any[], state: any, handleOnSelectItem: (value: string) => void) => React.ReactNode[];
4
18
  export declare const AutocompleteItem: FC<AutocompleteItemProps>;
19
+ export declare const AutocompleteGroupItem: FC<{
20
+ children?: any;
21
+ label: string;
22
+ }>;
@@ -1,178 +1,227 @@
1
1
  "use client";
2
- import { jsxs as R, jsx as h } from "react/jsx-runtime";
3
- import { useRef as B, createElement as G } from "react";
4
- import { cn as T } from "../cn.js";
5
- import { translate as H } from "../i18n/utility.js";
6
- import { InputText as M } from "../input-text/input-text.js";
7
- import { Popover as V } from "../popover/popover.js";
8
- import { SelectMenu as j, SelectMenuOption as K } from "../select/select-menu.js";
9
- import { AUTOCOMPLETE_ACTIONS as X } from "./types.js";
10
- import { useAutocompleteController as $ } from "./use-autocomplete-controller.js";
2
+ import { jsxs as j, jsx as y } from "react/jsx-runtime";
3
+ import { forwardRef as B, useRef as V, useImperativeHandle as $, createElement as K, Children as X, isValidElement as q } from "react";
4
+ import { cn as _ } from "../cn.js";
5
+ import { translate as A } from "../i18n/utility.js";
6
+ import { InputText as z } from "../input-text/input-text.js";
7
+ import { Popover as F } from "../popover/popover.js";
8
+ import { SelectMenu as J, SelectMenuOption as x, SelectMenuGroupItem as Q } from "../select/select-menu.js";
9
+ import { AUTOCOMPLETE_ACTIONS as W } from "./types.js";
10
+ import { useAutocompleteController as Y } from "./use-autocomplete-controller.js";
11
11
  const {
12
- ON_RESET: q,
13
- ON_SELECT_ITEM: z,
14
- SET_INPUT_VALUE: F,
15
- SET_IS_OPEN: s,
16
- TOGGLE_CLEAR_BUTTON: _,
17
- SET_HIGHLIGHTED_INDEX: x
18
- } = X, J = (n) => n ? "arrow_drop_up" : "arrow_drop_down", g = (n) => (c, a) => {
19
- if (n && a.current) {
20
- const u = {
12
+ ON_RESET: Z,
13
+ ON_SELECT_ITEM: ee,
14
+ SET_INPUT_VALUE: te,
15
+ SET_IS_OPEN: i,
16
+ TOGGLE_CLEAR_BUTTON: N,
17
+ SET_HIGHLIGHTED_INDEX: v
18
+ } = W, oe = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (n, r) => (p) => {
19
+ if (n) {
20
+ const l = {
21
21
  target: {
22
- ...a.current,
23
- value: c
22
+ name: r,
23
+ value: p
24
+ },
25
+ currentTarget: {
26
+ name: r,
27
+ value: p
24
28
  },
25
- currentTarget: a.current,
26
29
  bubbles: !0,
27
30
  isTrusted: !0
28
31
  };
29
- n == null || n(u);
32
+ n == null || n(l);
30
33
  }
31
- }, re = (n) => {
32
- var E, I;
33
- const c = B(null), {
34
- disabled: a,
35
- children: u,
36
- placeholder: C,
37
- onSelectItem: y,
38
- isLoading: S,
39
- freeSolo: m = !1,
40
- onChange: f
41
- } = n, { state: t, dispatch: o, inputRef: i, getOptionLabelByValue: A } = $({
42
- ...n,
43
- onChange: g(f)
44
- }), w = (e) => {
45
- o({ type: s, payload: e }), e || o({ type: _, payload: !1 });
46
- }, N = () => {
47
- o({ type: q }), o({ type: s, payload: !1 }), g(f)("", i);
48
- }, k = (e) => {
49
- o({ type: F, payload: e }), g(f)(e, i), e && o({ type: s, payload: !0 });
50
- }, v = (e) => {
51
- const {
52
- target: { value: l }
53
- } = e;
54
- e.__origin === "clear_button" ? N() : k(l), o({ type: _ }), setTimeout(() => {
55
- var p;
56
- return (p = i.current) == null ? void 0 : p.focus();
57
- });
58
- }, D = () => {
59
- var e;
60
- o({ type: s, payload: !t.isOpen }), (e = i.current) == null || e.focus();
61
- }, L = () => {
62
- t.isOpen || o({
63
- type: s,
64
- payload: !0
34
+ }, ye = B(
35
+ (n, r) => {
36
+ var S;
37
+ const p = V(null), {
38
+ disabled: l,
39
+ children: c,
40
+ placeholder: d,
41
+ onSelectItem: g,
42
+ isLoading: u,
43
+ freeSolo: a = !1,
44
+ onChange: b,
45
+ name: O
46
+ } = n, { state: t, dispatch: o, inputRef: m, getOptionLabelByValue: w, listRef: k } = Y({
47
+ ...n,
48
+ onChange: T(b, O)
65
49
  });
66
- }, O = (e) => {
67
- o({
68
- type: z,
69
- payload: {
70
- inputValue: A(u, e),
71
- value: e
72
- }
73
- }), y && y(e);
74
- }, P = (e) => {
75
- const l = t.autocompleteOptions.length, p = (r, U) => {
76
- let d = r;
77
- for (let b = 0; b < l; b++)
78
- if (d = (d + U + l) % l, !t.autocompleteOptions[d].props.disabled)
79
- return d;
80
- return -1;
81
- };
82
- if (e.key === "ArrowDown")
83
- e.preventDefault(), o({
84
- type: x,
85
- payload: t.isOpen ? p(t.highlightedIndex, 1) : 0
50
+ $(r, () => m.current);
51
+ const G = (e) => {
52
+ o({ type: i, payload: e }), e || o({ type: N, payload: !1 });
53
+ }, P = () => {
54
+ o({ type: Z }), o({ type: i, payload: !1 }), T(b, O)("");
55
+ }, R = (e) => {
56
+ o({ type: te, payload: e }), a && T(b, O)(e), e && o({ type: i, payload: !0 });
57
+ }, D = (e) => {
58
+ const {
59
+ target: { value: f }
60
+ } = e;
61
+ e.__origin === "clear_button" ? P() : R(f), o({ type: N }), setTimeout(() => {
62
+ var h;
63
+ return (h = m.current) == null ? void 0 : h.focus();
86
64
  });
87
- else if (e.key === "ArrowUp")
88
- e.preventDefault(), o({
89
- type: x,
90
- payload: p(t.highlightedIndex, -1)
65
+ }, L = () => {
66
+ var e;
67
+ o({ type: i, payload: !t.isOpen }), (e = m.current) == null || e.focus();
68
+ }, H = () => {
69
+ t.isOpen || o({
70
+ type: i,
71
+ payload: !0
91
72
  });
92
- else if (e.key === "Enter" && t.highlightedIndex >= 0) {
93
- const r = t.autocompleteOptions[t.highlightedIndex];
94
- r && r.props.value && !r.props.disabled && O(r.props.value);
95
- }
96
- };
97
- return /* @__PURE__ */ R(
98
- "div",
99
- {
100
- ...n,
101
- "aria-disabled": a,
102
- className: T("gi-autocomplete gi-not-prose", n.className),
103
- children: [
104
- /* @__PURE__ */ h(
105
- M,
106
- {
107
- onKeyDown: P,
108
- onIconEndClick: D,
109
- onChange: v,
110
- onClick: L,
111
- clearButtonEnabled: t.isClearButtonEnabled,
112
- inputActionPosition: "beforeSuffix",
113
- "aria-label": "Type to Search",
114
- "aria-disabled": a,
115
- disabled: a,
116
- placeholder: C || H("autocomplete.placeholder"),
117
- iconEndClassName: T({
118
- "gi-cursor-pointer": !a && !m,
119
- "gi-cursor-not-allowed gi-pointer-events-none": a && !m
120
- }),
121
- iconEnd: m ? void 0 : J(t.isOpen),
122
- ref: i,
123
- iconEndRef: c,
124
- value: t.inputValue,
125
- "data-highlighted-index": t.highlightedIndex
126
- }
127
- ),
128
- /* @__PURE__ */ h(
129
- V,
130
- {
131
- onOpenChange: w,
132
- triggerRef: i,
133
- extraRefs: [c],
134
- open: t.isOpen,
135
- options: {
136
- placement: "bottom-start",
137
- strategy: "absolute",
138
- modifiers: [
139
- { name: "offset", options: { offset: [0, 4] } },
140
- { name: "preventOverflow", options: { padding: 8 } },
141
- {
142
- name: "flip",
143
- options: { fallbackPlacements: ["top", "right", "left"] }
144
- }
145
- ]
146
- },
147
- children: /* @__PURE__ */ h(
148
- j,
149
- {
150
- onChange: O,
151
- isLoading: S,
152
- showNoData: !((E = t.autocompleteOptions) != null && E.length),
153
- children: (I = t.autocompleteOptions) == null ? void 0 : I.map((e, l) => /* @__PURE__ */ G(
154
- K,
73
+ }, E = (e) => {
74
+ o({
75
+ type: ee,
76
+ payload: {
77
+ inputValue: w(c, e),
78
+ value: e
79
+ }
80
+ }), g && g(e);
81
+ }, M = (e) => {
82
+ const f = t.autocompleteOptions.length, h = (s, U) => {
83
+ let I = s;
84
+ for (let C = 0; C < f; C++)
85
+ if (I = (I + U + f) % f, !t.autocompleteOptions[I].props.disabled)
86
+ return I;
87
+ return -1;
88
+ };
89
+ if (e.key === "ArrowDown")
90
+ e.preventDefault(), o({
91
+ type: v,
92
+ payload: t.isOpen ? h(t.highlightedIndex, 1) : 0
93
+ }), o({ type: i, payload: !0 });
94
+ else if (e.key === "ArrowUp")
95
+ e.preventDefault(), o({
96
+ type: v,
97
+ payload: h(t.highlightedIndex, -1)
98
+ }), o({ type: i, payload: !0 });
99
+ else if (e.key === "Enter" && t.highlightedIndex >= 0) {
100
+ const s = t.autocompleteOptions[t.highlightedIndex];
101
+ s && s.props.value && !s.props.disabled && E(s.props.value);
102
+ }
103
+ };
104
+ return /* @__PURE__ */ j(
105
+ "div",
106
+ {
107
+ "aria-disabled": l,
108
+ className: _("gi-autocomplete gi-not-prose", n.className),
109
+ children: [
110
+ /* @__PURE__ */ y(
111
+ z,
112
+ {
113
+ name: O,
114
+ onKeyDown: M,
115
+ onIconEndClick: L,
116
+ onChange: D,
117
+ onClick: H,
118
+ clearButtonEnabled: t.isClearButtonEnabled,
119
+ inputActionPosition: "beforeSuffix",
120
+ "aria-label": A("autocomplete.placeholder"),
121
+ "aria-disabled": l,
122
+ disabled: l,
123
+ placeholder: d || A("autocomplete.placeholder"),
124
+ iconEndClassName: _({
125
+ "gi-cursor-pointer": !l && !a,
126
+ "gi-cursor-not-allowed gi-pointer-events-none": l && !a
127
+ }),
128
+ iconEnd: a ? void 0 : oe(t.isOpen),
129
+ ref: m,
130
+ iconEndRef: p,
131
+ value: t.inputValue,
132
+ "data-highlighted-index": t.highlightedIndex
133
+ }
134
+ ),
135
+ /* @__PURE__ */ y(
136
+ F,
137
+ {
138
+ onOpenChange: G,
139
+ triggerRef: m,
140
+ extraRefs: [p],
141
+ open: t.isOpen,
142
+ maxHeight: 304,
143
+ options: {
144
+ placement: "bottom-start",
145
+ strategy: "absolute",
146
+ modifiers: [
147
+ { name: "offset", options: { offset: [0, 4] } },
155
148
  {
156
- ...e.props,
157
- key: `AutocompleteItem-${e.props.value}`,
158
- selected: t.value === e.props.value,
159
- isHighlighted: l === t.highlightedIndex
149
+ name: "flip",
150
+ options: { fallbackPlacements: ["top"] }
160
151
  }
161
- ))
162
- }
163
- )
164
- }
165
- )
166
- ]
167
- }
168
- );
169
- }, Q = () => null;
170
- Object.defineProperty(Q, "componentType", {
152
+ ]
153
+ },
154
+ children: /* @__PURE__ */ y(
155
+ J,
156
+ {
157
+ onChange: E,
158
+ isLoading: u,
159
+ showNoData: !((S = t.autocompleteOptions) != null && S.length),
160
+ ref: k,
161
+ children: ne(
162
+ t.autocompleteOptions,
163
+ t,
164
+ E
165
+ )
166
+ }
167
+ )
168
+ }
169
+ )
170
+ ]
171
+ }
172
+ );
173
+ }
174
+ ), ne = (n, r, p) => n.map((l, c) => {
175
+ if (r.optionType === "AutocompleteItem")
176
+ return /* @__PURE__ */ K(
177
+ x,
178
+ {
179
+ ...l.props,
180
+ key: `AutocompleteItem-${l.props.value}`,
181
+ selected: r.value === l.props.value,
182
+ isHighlighted: c === r.highlightedIndex,
183
+ index: c
184
+ }
185
+ );
186
+ if (r.optionType === "AutocompleteGroupItem") {
187
+ const d = l, g = X.toArray(d.props.children).filter((u) => q(u)).map((u) => {
188
+ const a = u.props;
189
+ return /* @__PURE__ */ y(
190
+ x,
191
+ {
192
+ ...a,
193
+ selected: r.value.toString() === a.value.toString(),
194
+ onChange: p,
195
+ index: c
196
+ },
197
+ `SelectGroupItemNext-SelectItemNext-${a.value.toString()}`
198
+ );
199
+ });
200
+ return /* @__PURE__ */ y(
201
+ Q,
202
+ {
203
+ label: d.props.label,
204
+ children: g
205
+ },
206
+ `Group-${d.props.label}`
207
+ );
208
+ }
209
+ return null;
210
+ }), le = () => null;
211
+ Object.defineProperty(le, "componentType", {
171
212
  value: "AutocompleteItem",
172
213
  writable: !1,
173
214
  enumerable: !1
174
215
  });
216
+ const re = () => null;
217
+ Object.defineProperty(re, "componentType", {
218
+ value: "AutocompleteGroupItem",
219
+ writable: !1,
220
+ enumerable: !1
221
+ });
175
222
  export {
176
- re as Autocomplete,
177
- Q as AutocompleteItem
223
+ ye as Autocomplete,
224
+ re as AutocompleteGroupItem,
225
+ le as AutocompleteItem,
226
+ ne as renderSelectMenuOptions
178
227
  };
@@ -1,4 +1,4 @@
1
- import { ChangeEvent, ReactElement } from 'react';
1
+ import { ChangeEvent, PropsWithChildren, ReactElement } from 'react';
2
2
  import { SelectMenuOptionProps } from '../select/types.js';
3
3
  export declare const AUTOCOMPLETE_ACTIONS: {
4
4
  readonly SET_IS_OPEN: "SET_IS_OPEN";
@@ -9,6 +9,7 @@ export declare const AUTOCOMPLETE_ACTIONS: {
9
9
  readonly TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON";
10
10
  readonly ON_SELECT_ITEM: "ON_SELECT_ITEM";
11
11
  readonly SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX";
12
+ readonly SET_OPTION_TYPE: "SET_OPTION_TYPE";
12
13
  };
13
14
  export type AutocompleteState = {
14
15
  isOpen: boolean;
@@ -17,6 +18,7 @@ export type AutocompleteState = {
17
18
  isClearButtonEnabled: boolean;
18
19
  autocompleteOptions: any[];
19
20
  highlightedIndex: number;
21
+ optionType: string;
20
22
  };
21
23
  export type AutocompleteAction = {
22
24
  type: typeof AUTOCOMPLETE_ACTIONS.SET_IS_OPEN;
@@ -32,6 +34,9 @@ export type AutocompleteAction = {
32
34
  payload: string;
33
35
  } | {
34
36
  type: typeof AUTOCOMPLETE_ACTIONS.ON_RESET;
37
+ } | {
38
+ type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTION_TYPE;
39
+ payload: string;
35
40
  } | {
36
41
  type: typeof AUTOCOMPLETE_ACTIONS.TOGGLE_CLEAR_BUTTON;
37
42
  payload?: boolean;
@@ -48,8 +53,7 @@ export type AutocompleteAction = {
48
53
  export type AutocompleteOptionItemElement = ReactElement<SelectMenuOptionProps & {
49
54
  selectedValue: string;
50
55
  }>;
51
- export type AutocompleteProps = {
52
- children: ReactElement<AutocompleteItemProps> | ReactElement<AutocompleteItemProps>[];
56
+ export type AutocompleteProps = PropsWithChildren<{
53
57
  /** Unique identifier for the autocomplete component. */
54
58
  id?: string;
55
59
  /** Initial selected value when the component is first rendered. */
@@ -70,7 +74,7 @@ export type AutocompleteProps = {
70
74
  onClose?: () => void;
71
75
  /** Controls whether the dropdown is open (controlled mode). */
72
76
  isOpen?: boolean;
73
- } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
77
+ }> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
74
78
  export type AutocompleteItemProps = {
75
79
  children: string;
76
80
  className?: string;
@@ -6,7 +6,8 @@ const E = {
6
6
  ON_RESET: "ON_RESET",
7
7
  TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON",
8
8
  ON_SELECT_ITEM: "ON_SELECT_ITEM",
9
- SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX"
9
+ SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX",
10
+ SET_OPTION_TYPE: "SET_OPTION_TYPE"
10
11
  };
11
12
  export {
12
13
  E as AUTOCOMPLETE_ACTIONS
@@ -1,10 +1,12 @@
1
1
  import { AutocompleteAction, AutocompleteState, AutocompleteOptionItemElement, AutocompleteProps } from './types.js';
2
2
  export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, }: {
3
- onChange?: (input: string, inputRef: any) => void;
3
+ onChange?: (input: string, name?: string) => void;
4
+ ref?: any;
4
5
  } & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose">) => {
5
6
  state: AutocompleteState;
6
7
  dispatch: import('react').ActionDispatch<[action: AutocompleteAction]>;
7
8
  inputRef: import('react').RefObject<HTMLInputElement | null>;
9
+ listRef: import('react').RefObject<HTMLDivElement | null>;
8
10
  validChildren: AutocompleteOptionItemElement[];
9
- getOptionLabelByValue: (children: AutocompleteProps["children"], value: string) => string;
11
+ getOptionLabelByValue: (children: any, value: string) => string;
10
12
  };