@ogcio/design-system-react 1.12.4 → 1.14.0

package/dist/accordion/accordion-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
 import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as r } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({

package/dist/alert/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { useState as D } from "react";
-import { c as h } from "../index-DNkhmzZp.js";
+import { c as h } from "../index-CB-zPpNk.js";
 import { cn as v } from "../cn.js";
 import { translate as k } from "../i18n/utility.js";
 import { Icon as w } from "../icon/icon.js";

package/dist/autocomplete/autocomplete.d.ts

@@ -1,4 +1,22 @@
-import { FC } from 'react';
-import { AutocompleteItemProps, AutocompleteProps } from './types.js';
-export declare const Autocomplete: FC<AutocompleteProps>;
+import { FC, ChangeEvent } from 'react';
+import { AutocompleteItemProps } from './types.js';
+export declare const Autocomplete: import('react').ForwardRefExoticComponent<{
+    id?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    freeSolo?: boolean;
+    isLoading?: boolean;
+    onSelectItem?: (item: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    isOpen?: boolean;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const renderSelectMenuOptions: (options: any[], state: any, handleOnSelectItem: (value: string) => void) => React.ReactNode[];
 export declare const AutocompleteItem: FC<AutocompleteItemProps>;
+export declare const AutocompleteGroupItem: FC<{
+    children?: any;
+    label: string;
+}>;

package/dist/autocomplete/autocomplete.js

@@ -1,252 +1,227 @@
 "use client";
-import { jsxs as G, jsx as E } from "react/jsx-runtime";
-import { useRef as C, useReducer as H, useEffect as m, createElement as j, isValidElement as K, Children as X } from "react";
-import { cn as N } from "../cn.js";
-import { InputText as $ } from "../input-text/input-text.js";
-import { Popover as q } from "../popover/popover.js";
-import { SelectMenu as z, SelectMenuOption as F } from "../select/select-menu.js";
-import { AUTOCOMPLETE_ACTIONS as J } from "./types.js";
+import { jsxs as j, jsx as y } from "react/jsx-runtime";
+import { forwardRef as B, useRef as V, useImperativeHandle as $, createElement as K, Children as X, isValidElement as q } from "react";
+import { cn as _ } from "../cn.js";
+import { translate as A } from "../i18n/utility.js";
+import { InputText as z } from "../input-text/input-text.js";
+import { Popover as F } from "../popover/popover.js";
+import { SelectMenu as J, SelectMenuOption as x, SelectMenuGroupItem as Q } from "../select/select-menu.js";
+import { AUTOCOMPLETE_ACTIONS as W } from "./types.js";
+import { useAutocompleteController as Y } from "./use-autocomplete-controller.js";
 const {
-  ON_RESET: v,
-  ON_SELECT_ITEM: L,
-  SET_INPUT_VALUE: h,
-  SET_IS_OPEN: u,
-  SET_OPTIONS: T,
-  TOGGLE_CLEAR_BUTTON: O,
-  SET_VALUE: R,
-  SET_HIGHLIGHTED_INDEX: b
-} = J, Q = (t, o) => {
-  switch (o.type) {
-    case u:
-      return { ...t, isOpen: o.payload };
-    case h:
-      return { ...t, inputValue: o.payload };
-    case T:
-      return { ...t, autocompleteOptions: o.payload };
-    case R:
-      return { ...t, value: o.payload };
-    case O:
-      return {
-        ...t,
-        isClearButtonEnabled: o.payload || !!t.inputValue
-      };
-    case v:
-      return {
-        ...t,
-        value: "",
-        inputValue: "",
-        isClearButtonEnabled: !1,
-        highlightedIndex: -1
-      };
-    case L:
-      return {
-        ...t,
-        inputValue: o.payload.inputValue,
-        value: o.payload.value,
-        isOpen: !1,
-        isClearButtonEnabled: !0
-      };
-    case b:
-      return { ...t, highlightedIndex: o.payload, isOpen: !0 };
-    default:
-      return t;
+  ON_RESET: Z,
+  ON_SELECT_ITEM: ee,
+  SET_INPUT_VALUE: te,
+  SET_IS_OPEN: i,
+  TOGGLE_CLEAR_BUTTON: N,
+  SET_HIGHLIGHTED_INDEX: v
+} = W, oe = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (n, r) => (p) => {
+  if (n) {
+    const l = {
+      target: {
+        name: r,
+        value: p
+      },
+      currentTarget: {
+        name: r,
+        value: p
+      },
+      bubbles: !0,
+      isTrusted: !0
+    };
+    n == null || n(l);
   }
-}, W = (t, o) => {
-  var l, y;
-  const r = ((l = t.props.children) == null ? void 0 : l.toString().toLowerCase()) || "", s = (y = t.props.value) == null ? void 0 : y.toLowerCase(), c = o.toLowerCase();
-  return r.includes(c) || s.includes(c);
-}, _ = (t) => {
-  var r, s;
-  const o = ((r = t == null ? void 0 : t.type) == null ? void 0 : r.componentType) || ((s = t == null ? void 0 : t.props) == null ? void 0 : s.__mdxType);
-  return K(t) && o === "AutocompleteItem";
-}, S = (t) => X.toArray(t).filter((o) => _(o)) || [], I = (t, o) => {
-  var r;
-  return (((r = S(t).find((s) => s.props.value === o)) == null ? void 0 : r.props.children) || "").toString();
-}, re = ({
-  disabled: t,
-  children: o,
-  defaultValue: r = "",
-  onChange: s,
-  ...c
-}) => {
-  const l = C(null), y = C(null), x = C(!1), [n, a] = H(Q, {
-    isOpen: !1,
-    value: r,
-    inputValue: r ? I(o, r) : "",
-    autocompleteOptions: o,
-    isClearButtonEnabled: !1,
-    highlightedIndex: -1
-  }), f = S(n.autocompleteOptions), V = (e) => {
-    if (s && l.current) {
-      const p = {
-        target: {
-          ...l.current,
+}, ye = B(
+  (n, r) => {
+    var S;
+    const p = V(null), {
+      disabled: l,
+      children: c,
+      placeholder: d,
+      onSelectItem: g,
+      isLoading: u,
+      freeSolo: a = !1,
+      onChange: b,
+      name: O
+    } = n, { state: t, dispatch: o, inputRef: m, getOptionLabelByValue: w, listRef: k } = Y({
+      ...n,
+      onChange: T(b, O)
+    });
+    $(r, () => m.current);
+    const G = (e) => {
+      o({ type: i, payload: e }), e || o({ type: N, payload: !1 });
+    }, P = () => {
+      o({ type: Z }), o({ type: i, payload: !1 }), T(b, O)("");
+    }, R = (e) => {
+      o({ type: te, payload: e }), a && T(b, O)(e), e && o({ type: i, payload: !0 });
+    }, D = (e) => {
+      const {
+        target: { value: f }
+      } = e;
+      e.__origin === "clear_button" ? P() : R(f), o({ type: N }), setTimeout(() => {
+        var h;
+        return (h = m.current) == null ? void 0 : h.focus();
+      });
+    }, L = () => {
+      var e;
+      o({ type: i, payload: !t.isOpen }), (e = m.current) == null || e.focus();
+    }, H = () => {
+      t.isOpen || o({
+        type: i,
+        payload: !0
+      });
+    }, E = (e) => {
+      o({
+        type: ee,
+        payload: {
+          inputValue: w(c, e),
           value: e
-        },
-        currentTarget: l.current,
-        bubbles: !0,
-        isTrusted: !0
+        }
+      }), g && g(e);
+    }, M = (e) => {
+      const f = t.autocompleteOptions.length, h = (s, U) => {
+        let I = s;
+        for (let C = 0; C < f; C++)
+          if (I = (I + U + f) % f, !t.autocompleteOptions[I].props.disabled)
+            return I;
+        return -1;
       };
-      s(p);
-    }
-  }, k = (e) => {
-    a({ type: u, payload: e }), e || a({ type: O, payload: !1 });
-  }, B = (e) => {
-    const {
-      target: { value: p }
-    } = e;
-    e.__origin === "clear_button" ? (a({ type: v }), a({ type: u, payload: !1 }), V("")) : (a({ type: h, payload: p }), p && a({ type: u, payload: !0 })), a({ type: O }), setTimeout(() => {
-      var i;
-      return (i = l.current) == null ? void 0 : i.focus();
-    });
-  }, P = () => {
-    var e;
-    a({ type: u, payload: !n.isOpen }), (e = l.current) == null || e.focus();
-  }, D = () => {
-    n.isOpen || a({
-      type: u,
-      payload: !0
-    });
-  }, w = (e) => {
-    a({
-      type: L,
-      payload: {
-        inputValue: I(o, e),
-        value: e
+      if (e.key === "ArrowDown")
+        e.preventDefault(), o({
+          type: v,
+          payload: t.isOpen ? h(t.highlightedIndex, 1) : 0
+        }), o({ type: i, payload: !0 });
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), o({
+          type: v,
+          payload: h(t.highlightedIndex, -1)
+        }), o({ type: i, payload: !0 });
+      else if (e.key === "Enter" && t.highlightedIndex >= 0) {
+        const s = t.autocompleteOptions[t.highlightedIndex];
+        s && s.props.value && !s.props.disabled && E(s.props.value);
       }
-    }), V(e);
-  };
-  m(() => {
-    var p;
-    const e = f.find(
-      (i) => _(i) && i.props.value === n.value
-    );
-    e && a({
-      type: h,
-      payload: ((p = e.props.children) == null ? void 0 : p.toString()) || ""
-    });
-  }, [n.value]), m(() => {
-    var p;
-    if (!x.current) {
-      x.current = !0;
-      return;
-    }
-    n.inputValue === "" && n.value === "" && ((p = l.current) == null || p.focus());
-  }, [n.isClearButtonEnabled]), m(() => {
-    var e;
-    if (n.isOpen)
-      (e = l.current) == null || e.focus();
-    else {
-      const p = I(o, n.value);
-      p && n.value ? (a({
-        type: h,
-        payload: p
-      }), a({ type: u, payload: !1 })) : a({ type: v }), a({ type: O });
-    }
-  }, [n.isOpen]), m(() => {
-    if (n.inputValue && o) {
-      const e = S(o).filter(
-        (p) => W(p, n.inputValue)
-      );
-      a({ type: T, payload: e }), !n.isOpen && !n.value && a({ type: u, payload: !0 });
-    } else
-      a({ type: R, payload: "" }), a({ type: T, payload: o });
-  }, [n.inputValue]);
-  const U = (e) => {
-    const p = f.length, i = (d, M) => {
-      let g = d;
-      for (let A = 0; A < p; A++)
-        if (g = (g + M + p) % p, !f[g].props.disabled)
-          return g;
-      return -1;
     };
-    if (e.key === "ArrowDown")
-      e.preventDefault(), a({
-        type: b,
-        payload: n.isOpen ? i(n.highlightedIndex, 1) : 0
-      });
-    else if (e.key === "ArrowUp")
-      e.preventDefault(), a({
-        type: b,
-        payload: i(n.highlightedIndex, -1)
-      });
-    else if (e.key === "Enter" && n.highlightedIndex >= 0) {
-      const d = f[n.highlightedIndex];
-      d && d.props.value && !d.props.disabled && w(d.props.value);
-    }
-  };
-  return /* @__PURE__ */ G(
-    "div",
-    {
-      ...c,
-      "aria-disabled": t,
-      className: N("gi-autocomplete gi-not-prose", c.className),
-      children: [
-        /* @__PURE__ */ E(
-          $,
-          {
-            onKeyDown: U,
-            onIconEndClick: P,
-            onChange: B,
-            onClick: D,
-            clearButtonEnabled: n.isClearButtonEnabled,
-            inputActionPosition: "beforeSuffix",
-            "aria-label": "Type to Search",
-            "aria-disabled": t,
-            disabled: t,
-            placeholder: n.inputValue || "Type to Search",
-            iconEndClassName: N({
-              "gi-cursor-pointer": !t,
-              "gi-cursor-not-allowed gi-pointer-events-none": t
-            }),
-            iconEnd: n.isOpen ? "arrow_drop_up" : "arrow_drop_down",
-            ref: l,
-            iconEndRef: y,
-            value: n.inputValue,
-            "data-highlighted-index": n.highlightedIndex
-          }
-        ),
-        /* @__PURE__ */ E(
-          q,
-          {
-            onOpenChange: k,
-            triggerRef: l,
-            extraRefs: [y],
-            open: n.isOpen,
-            options: {
-              placement: "bottom-start",
-              strategy: "absolute",
-              modifiers: [
-                { name: "preventOverflow", options: { padding: 8 } },
+    return /* @__PURE__ */ j(
+      "div",
+      {
+        "aria-disabled": l,
+        className: _("gi-autocomplete gi-not-prose", n.className),
+        children: [
+          /* @__PURE__ */ y(
+            z,
+            {
+              name: O,
+              onKeyDown: M,
+              onIconEndClick: L,
+              onChange: D,
+              onClick: H,
+              clearButtonEnabled: t.isClearButtonEnabled,
+              inputActionPosition: "beforeSuffix",
+              "aria-label": A("autocomplete.placeholder"),
+              "aria-disabled": l,
+              disabled: l,
+              placeholder: d || A("autocomplete.placeholder"),
+              iconEndClassName: _({
+                "gi-cursor-pointer": !l && !a,
+                "gi-cursor-not-allowed gi-pointer-events-none": l && !a
+              }),
+              iconEnd: a ? void 0 : oe(t.isOpen),
+              ref: m,
+              iconEndRef: p,
+              value: t.inputValue,
+              "data-highlighted-index": t.highlightedIndex
+            }
+          ),
+          /* @__PURE__ */ y(
+            F,
+            {
+              onOpenChange: G,
+              triggerRef: m,
+              extraRefs: [p],
+              open: t.isOpen,
+              maxHeight: 304,
+              options: {
+                placement: "bottom-start",
+                strategy: "absolute",
+                modifiers: [
+                  { name: "offset", options: { offset: [0, 4] } },
+                  {
+                    name: "flip",
+                    options: { fallbackPlacements: ["top"] }
+                  }
+                ]
+              },
+              children: /* @__PURE__ */ y(
+                J,
                 {
-                  name: "flip",
-                  options: { fallbackPlacements: ["top", "right", "left"] }
+                  onChange: E,
+                  isLoading: u,
+                  showNoData: !((S = t.autocompleteOptions) != null && S.length),
+                  ref: k,
+                  children: ne(
+                    t.autocompleteOptions,
+                    t,
+                    E
+                  )
                 }
-              ]
-            },
-            children: /* @__PURE__ */ E(z, { onChange: w, children: f.map(
-              (e, p) => _(e) ? /* @__PURE__ */ j(
-                F,
-                {
-                  ...e.props,
-                  key: `AutocompleteItem-${e.props.value}`,
-                  selected: n.value === e.props.value,
-                  isHighlighted: p === n.highlightedIndex
-                }
-              ) : null
-            ) })
-          }
-        )
-      ]
-    }
-  );
-}, Y = () => null;
-Object.defineProperty(Y, "componentType", {
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+), ne = (n, r, p) => n.map((l, c) => {
+  if (r.optionType === "AutocompleteItem")
+    return /* @__PURE__ */ K(
+      x,
+      {
+        ...l.props,
+        key: `AutocompleteItem-${l.props.value}`,
+        selected: r.value === l.props.value,
+        isHighlighted: c === r.highlightedIndex,
+        index: c
+      }
+    );
+  if (r.optionType === "AutocompleteGroupItem") {
+    const d = l, g = X.toArray(d.props.children).filter((u) => q(u)).map((u) => {
+      const a = u.props;
+      return /* @__PURE__ */ y(
+        x,
+        {
+          ...a,
+          selected: r.value.toString() === a.value.toString(),
+          onChange: p,
+          index: c
+        },
+        `SelectGroupItemNext-SelectItemNext-${a.value.toString()}`
+      );
+    });
+    return /* @__PURE__ */ y(
+      Q,
+      {
+        label: d.props.label,
+        children: g
+      },
+      `Group-${d.props.label}`
+    );
+  }
+  return null;
+}), le = () => null;
+Object.defineProperty(le, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
 });
+const re = () => null;
+Object.defineProperty(re, "componentType", {
+  value: "AutocompleteGroupItem",
+  writable: !1,
+  enumerable: !1
+});
 export {
-  re as Autocomplete,
-  Y as AutocompleteItem
+  ye as Autocomplete,
+  re as AutocompleteGroupItem,
+  le as AutocompleteItem,
+  ne as renderSelectMenuOptions
 };

package/dist/autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ChangeEvent, PropsWithChildren, ReactElement } from 'react';
 import { SelectMenuOptionProps } from '../select/types.js';
 export declare const AUTOCOMPLETE_ACTIONS: {
     readonly SET_IS_OPEN: "SET_IS_OPEN";
@@ -9,14 +9,16 @@ export declare const AUTOCOMPLETE_ACTIONS: {
     readonly TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON";
     readonly ON_SELECT_ITEM: "ON_SELECT_ITEM";
     readonly SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX";
+    readonly SET_OPTION_TYPE: "SET_OPTION_TYPE";
 };
 export type AutocompleteState = {
     isOpen: boolean;
     value: string;
     inputValue: string;
     isClearButtonEnabled: boolean;
-    autocompleteOptions: React.ReactNode;
+    autocompleteOptions: any[];
     highlightedIndex: number;
+    optionType: string;
 };
 export type AutocompleteAction = {
     type: typeof AUTOCOMPLETE_ACTIONS.SET_IS_OPEN;
@@ -26,12 +28,15 @@ export type AutocompleteAction = {
     payload: string;
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTIONS;
-    payload: React.ReactNode;
+    payload: any[];
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.SET_VALUE;
     payload: string;
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.ON_RESET;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTION_TYPE;
+    payload: string;
 } | {
     type: typeof AUTOCOMPLETE_ACTIONS.TOGGLE_CLEAR_BUTTON;
     payload?: boolean;
@@ -48,11 +53,28 @@ export type AutocompleteAction = {
 export type AutocompleteOptionItemElement = ReactElement<SelectMenuOptionProps & {
     selectedValue: string;
 }>;
-export type AutocompleteProps = {
+export type AutocompleteProps = PropsWithChildren<{
+    /** Unique identifier for the autocomplete component. */
+    id?: string;
+    /** Initial selected value when the component is first rendered. */
     defaultValue?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    children: ReactElement<AutocompleteItemProps> | ReactElement<AutocompleteItemProps>[];
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
+    /** When true, disables the autocomplete input and prevents user interaction. */
+    disabled?: boolean;
+    /** Callback function triggered when the input value changes */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Enables typing freeform values not limited to the dropdown options and keep the value inside the Input. */
+    freeSolo?: boolean;
+    /** Displays loading spinner inside the dropdown list. */
+    isLoading?: boolean;
+    /** Callback triggered when an option is selected from the dropdown. */
+    onSelectItem?: (item: string) => void;
+    /** Callback triggered when the dropdown is opened. */
+    onOpen?: () => void;
+    /** Callback triggered when the dropdown is closed. */
+    onClose?: () => void;
+    /** Controls whether the dropdown is open (controlled mode). */
+    isOpen?: boolean;
+}> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
 export type AutocompleteItemProps = {
     children: string;
     className?: string;

package/dist/autocomplete/types.js

@@ -6,7 +6,8 @@ const E = {
   ON_RESET: "ON_RESET",
   TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON",
   ON_SELECT_ITEM: "ON_SELECT_ITEM",
-  SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX"
+  SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX",
+  SET_OPTION_TYPE: "SET_OPTION_TYPE"
 };
 export {
   E as AUTOCOMPLETE_ACTIONS

package/dist/autocomplete/use-autocomplete-controller.d.ts

@@ -0,0 +1,12 @@
+import { AutocompleteAction, AutocompleteState, AutocompleteOptionItemElement, AutocompleteProps } from './types.js';
+export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, }: {
+    onChange?: (input: string, name?: string) => void;
+    ref?: any;
+} & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose">) => {
+    state: AutocompleteState;
+    dispatch: import('react').ActionDispatch<[action: AutocompleteAction]>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    listRef: import('react').RefObject<HTMLDivElement | null>;
+    validChildren: AutocompleteOptionItemElement[];
+    getOptionLabelByValue: (children: any, value: string) => string;
+};