@ogcio/design-system-react 1.15.1 → 1.15.3

package/dist/autocomplete/autocomplete.d.ts

@@ -1,6 +1,6 @@
-import { FC, ChangeEvent } from 'react';
+import { default as React, FC, ChangeEvent } from 'react';
 import { AutocompleteItemProps } from './types.js';
-export declare const Autocomplete: import('react').ForwardRefExoticComponent<{
+export declare const Autocomplete: React.ForwardRefExoticComponent<{
     id?: string;
     defaultValue?: string;
     disabled?: boolean;
@@ -11,9 +11,10 @@ export declare const Autocomplete: import('react').ForwardRefExoticComponent<{
     onOpen?: () => void;
     onClose?: () => void;
     isOpen?: boolean;
+    value?: any;
 } & {
-    children?: import('react').ReactNode | undefined;
-} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
+    children?: React.ReactNode | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange"> & 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<{

package/dist/autocomplete/autocomplete.js

@@ -1,141 +1,179 @@
 "use client";
-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";
+import { jsxs as J, jsx as O } from "react/jsx-runtime";
+import { forwardRef as Q, useRef as G, useImperativeHandle as W, useEffect as Y, createElement as Z, Children as ee, isValidElement as te } from "react";
+import { cn as P } from "../cn.js";
+import { translate as D } from "../i18n/utility.js";
+import { InputText as oe } from "../input-text/input-text.js";
+import { Popover as ne } from "../popover/popover.js";
+import { SelectMenu as le, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
+import { AUTOCOMPLETE_ACTIONS as ae } from "./types.js";
+import { useAutocompleteController as pe } from "./use-autocomplete-controller.js";
 const {
-  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);
-  }
-}, ye = B(
-  (n, r) => {
-    var S;
-    const p = V(null), {
-      disabled: l,
-      children: c,
-      placeholder: d,
-      onSelectItem: g,
-      isLoading: u,
-      freeSolo: a = !1,
+  ON_RESET: ie,
+  ON_SELECT_ITEM: se,
+  SET_INPUT_VALUE: R,
+  SET_IS_OPEN: d,
+  TOGGLE_CLEAR_BUTTON: v,
+  SET_HIGHLIGHTED_INDEX: B,
+  SET_VALUE: ce
+} = ae, ue = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", C = (n, l) => (p) => {
+  n && n({
+    target: {
+      name: l,
+      value: p
+    },
+    currentTarget: {
+      name: l,
+      value: p
+    },
+    type: "change",
+    bubbles: !0,
+    isTrusted: !0
+  });
+}, M = (n, l) => (p) => {
+  n && n({
+    target: { name: l, value: p },
+    currentTarget: { name: l, value: p },
+    type: "blur",
+    bubbles: !0,
+    isTrusted: !0
+  });
+}, ve = Q(
+  (n, l) => {
+    var N;
+    const p = G(null), {
+      disabled: r,
+      children: f,
+      placeholder: h,
+      onSelectItem: y,
+      isLoading: g,
+      freeSolo: s = !1,
       onChange: b,
-      name: O
-    } = n, { state: t, dispatch: o, inputRef: m, getOptionLabelByValue: w, listRef: k } = Y({
+      onBlur: A,
+      name: c,
+      value: E,
+      id: U
+    } = n, _ = G(!1), {
+      state: t,
+      dispatch: o,
+      inputRef: m,
+      getOptionLabelByValue: x,
+      listRef: w,
+      debouncedFilter: V
+    } = pe({
       ...n,
-      onChange: T(b, O)
+      onChange: C(b, c)
     });
-    $(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) => {
+    W(l, () => m.current), Y(() => {
+      E !== void 0 && (o({ type: ce, payload: E }), o({
+        type: R,
+        payload: x(f, E)
+      }), o({ type: v }));
+    }, [E]);
+    const H = (e) => {
+      o({ type: d, payload: e }), e || o({ type: v, payload: !1 });
+    }, j = () => {
+      o({ type: ie }), o({ type: d, payload: !1 }), C(b, c)("");
+    }, $ = (e) => {
+      o({ type: R, payload: e }), s && C(b, c)(e), e && o({ type: d, payload: !0 }), V(e);
+    }, K = (e) => {
       const {
-        target: { value: f }
+        target: { value: a }
       } = e;
-      e.__origin === "clear_button" ? P() : R(f), o({ type: N }), setTimeout(() => {
-        var h;
-        return (h = m.current) == null ? void 0 : h.focus();
+      e.__origin === "clear_button" ? j() : $(a), o({ type: v }), setTimeout(() => {
+        var u;
+        return (u = m.current) == null ? void 0 : u.focus();
       });
-    }, L = () => {
+    }, F = () => {
       var e;
-      o({ type: i, payload: !t.isOpen }), (e = m.current) == null || e.focus();
-    }, H = () => {
+      o({ type: d, payload: !t.isOpen }), (e = m.current) == null || e.focus();
+    }, X = () => {
       t.isOpen || o({
-        type: i,
+        type: d,
         payload: !0
       });
-    }, E = (e) => {
+    }, S = (e) => {
       o({
-        type: ee,
+        type: se,
         payload: {
-          inputValue: w(c, e),
+          inputValue: x(f, e),
           value: e
         }
-      }), 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;
+      }), C(b, c)(e), setTimeout(() => {
+        var a;
+        M(A, c)(e), (a = m.current) == null || a.blur();
+      }, 0), y == null || y(e);
+    }, q = (e) => {
+      var i, I;
+      const { relatedTarget: a } = e;
+      if (a && ((i = w.current) != null && i.contains(a) || (I = p.current) != null && I.contains(a)) || _.current) {
+        setTimeout(() => _.current = !1, 0);
+        return;
+      }
+      const u = t.value ?? t.inputValue ?? "";
+      M(A, c)(u);
+    }, z = (e) => {
+      const a = t.autocompleteOptions.length, u = (i, I) => {
+        let T = i;
+        for (let k = 0; k < a; k++)
+          if (T = (T + I + a) % a, !t.autocompleteOptions[T].props.disabled)
+            return T;
         return -1;
       };
       if (e.key === "ArrowDown")
         e.preventDefault(), o({
-          type: v,
-          payload: t.isOpen ? h(t.highlightedIndex, 1) : 0
-        }), o({ type: i, payload: !0 });
+          type: B,
+          payload: t.isOpen ? u(t.highlightedIndex, 1) : 0
+        }), o({ type: d, payload: !0 });
       else if (e.key === "ArrowUp")
         e.preventDefault(), o({
-          type: v,
-          payload: h(t.highlightedIndex, -1)
-        }), o({ type: i, payload: !0 });
+          type: B,
+          payload: u(t.highlightedIndex, -1)
+        }), o({ type: d, 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);
+        const i = t.autocompleteOptions[t.highlightedIndex];
+        i && i.props.value && !i.props.disabled && S(i.props.value);
       }
     };
-    return /* @__PURE__ */ j(
+    return /* @__PURE__ */ J(
       "div",
       {
-        "aria-disabled": l,
-        className: _("gi-autocomplete gi-not-prose", n.className),
+        "aria-disabled": r,
+        className: P("gi-autocomplete gi-not-prose", n.className),
         children: [
-          /* @__PURE__ */ y(
-            z,
+          /* @__PURE__ */ O(
+            oe,
             {
-              name: O,
-              onKeyDown: M,
-              onIconEndClick: L,
-              onChange: D,
-              onClick: H,
+              id: U,
+              name: c,
+              onKeyDown: z,
+              onIconEndClick: F,
+              onChange: K,
+              onClick: X,
+              onBlur: q,
               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
+              "aria-label": D("autocomplete.placeholder", {
+                defaultValue: "Type to Search"
+              }),
+              "aria-disabled": r,
+              disabled: r,
+              placeholder: h ?? D("autocomplete.placeholder", { defaultValue: "Type to Search" }),
+              iconEndClassName: P({
+                "gi-cursor-pointer": !r && !s,
+                "gi-cursor-not-allowed gi-pointer-events-none": r && !s
               }),
-              iconEnd: a ? void 0 : oe(t.isOpen),
+              iconEnd: s ? void 0 : ue(t.isOpen),
               ref: m,
               iconEndRef: p,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ y(
-            F,
+          /* @__PURE__ */ O(
+            ne,
             {
-              onOpenChange: G,
+              onOpenChange: H,
               triggerRef: m,
               extraRefs: [p],
               open: t.isOpen,
@@ -151,17 +189,17 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ y(
-                J,
+              children: /* @__PURE__ */ O(
+                le,
                 {
-                  onChange: E,
-                  isLoading: u,
-                  showNoData: !((S = t.autocompleteOptions) != null && S.length),
-                  ref: k,
-                  children: ne(
+                  onChange: S,
+                  isLoading: g,
+                  showNoData: !((N = t.autocompleteOptions) != null && N.length),
+                  ref: w,
+                  children: de(
                     t.autocompleteOptions,
                     t,
-                    E
+                    S
                   )
                 }
               )
@@ -171,57 +209,57 @@ const {
       }
     );
   }
-), ne = (n, r, p) => n.map((l, c) => {
-  if (r.optionType === "AutocompleteItem")
-    return /* @__PURE__ */ K(
-      x,
+), de = (n, l, p) => n.map((r, f) => {
+  if (l.optionType === "AutocompleteItem")
+    return /* @__PURE__ */ Z(
+      L,
       {
-        ...l.props,
-        key: `AutocompleteItem-${l.props.value}`,
-        selected: r.value === l.props.value,
-        isHighlighted: c === r.highlightedIndex,
-        index: c
+        ...r.props,
+        key: `AutocompleteItem-${r.props.value}`,
+        selected: l.value === r.props.value,
+        isHighlighted: f === l.highlightedIndex,
+        index: f
       }
     );
-  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,
+  if (l.optionType === "AutocompleteGroupItem") {
+    const h = r, y = ee.toArray(h.props.children).filter((g) => te(g)).map((g) => {
+      const s = g.props;
+      return /* @__PURE__ */ O(
+        L,
         {
-          ...a,
-          selected: r.value.toString() === a.value.toString(),
+          ...s,
+          selected: l.value.toString() === s.value.toString(),
           onChange: p,
-          index: c
+          index: f
         },
-        `SelectGroupItemNext-SelectItemNext-${a.value.toString()}`
+        `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
       );
     });
-    return /* @__PURE__ */ y(
-      Q,
+    return /* @__PURE__ */ O(
+      re,
       {
-        label: d.props.label,
-        children: g
+        label: h.props.label,
+        children: y
       },
-      `Group-${d.props.label}`
+      `Group-${h.props.label}`
     );
   }
   return null;
-}), le = () => null;
-Object.defineProperty(le, "componentType", {
+}), fe = () => null;
+Object.defineProperty(fe, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
 });
-const re = () => null;
-Object.defineProperty(re, "componentType", {
+const me = () => null;
+Object.defineProperty(me, "componentType", {
   value: "AutocompleteGroupItem",
   writable: !1,
   enumerable: !1
 });
 export {
-  ye as Autocomplete,
-  re as AutocompleteGroupItem,
-  le as AutocompleteItem,
-  ne as renderSelectMenuOptions
+  ve as Autocomplete,
+  me as AutocompleteGroupItem,
+  fe as AutocompleteItem,
+  de as renderSelectMenuOptions
 };

package/dist/autocomplete/types.d.ts

@@ -74,6 +74,7 @@ export type AutocompleteProps = PropsWithChildren<{
     onClose?: () => void;
     /** Controls whether the dropdown is open (controlled mode). */
     isOpen?: boolean;
+    value?: any;
 }> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
 export type AutocompleteItemProps = {
     children: string;

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

@@ -1,12 +1,13 @@
 import { AutocompleteAction, AutocompleteState, AutocompleteOptionItemElement, AutocompleteProps } from './types.js';
-export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, }: {
+export declare const useAutocompleteController: ({ children, defaultValue, isOpen, freeSolo, onOpen, onClose, onChange, value, }: {
     onChange?: (input: string, name?: string) => void;
     ref?: any;
-} & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose">) => {
+} & Pick<AutocompleteProps, "children" | "defaultValue" | "isOpen" | "freeSolo" | "onOpen" | "onClose" | "value">) => {
     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;
+    debouncedFilter: import('lodash').DebouncedFunc<(input: string) => void>;
 };