@ogcio/design-system-react 1.29.0 → 1.30.0

package/dist/atoms/icons/KeyboardArrowDown.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowDown(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowDown;

package/dist/atoms/icons/KeyboardArrowDown.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+function d(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.role,
+      "aria-label": a.ariaLabel,
+      "aria-hidden": a.ariaHidden ?? "true",
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "keyboard_arrow_down",
+      children: /* @__PURE__ */ e("path", { d: "M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/atoms/icons/KeyboardArrowUp.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowUp(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowUp;

package/dist/atoms/icons/KeyboardArrowUp.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+function d(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.role,
+      "aria-label": a.ariaLabel,
+      "aria-hidden": a.ariaHidden ?? "true",
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "keyboard_arrow_up",
+      children: /* @__PURE__ */ e("path", { d: "M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/atoms/icons/Visibility.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Visibility(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Visibility;

package/dist/atoms/icons/Visibility.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+function e(i) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: i.size ?? 24,
+      height: i.size ?? 24,
+      className: i.className,
+      id: i.id,
+      role: i.role,
+      "aria-label": i.ariaLabel,
+      "aria-hidden": i.ariaHidden ?? "true",
+      fill: i.color ?? "currentColor",
+      "data-testid": i.dataTestId ?? "visibility",
+      children: /* @__PURE__ */ t("path", { d: "M607.5-372.5Q660-425 660-500t-52.5-127.5Q555-680 480-680t-127.5 52.5Q300-575 300-500t52.5 127.5Q405-320 480-320t127.5-52.5Zm-204-51Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM214-281.5Q94-363 40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200q-146 0-266-81.5ZM480-500Zm207.5 160.5Q782-399 832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q113 0 207.5-59.5Z" })
+    }
+  );
+}
+export {
+  e as default
+};

package/dist/atoms/icons/VisibilityOff.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function VisibilityOff(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default VisibilityOff;

package/dist/atoms/icons/VisibilityOff.js

@@ -0,0 +1,22 @@
+import { jsx as i } from "react/jsx-runtime";
+function e(t) {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: t.size ?? 24,
+      height: t.size ?? 24,
+      className: t.className,
+      id: t.id,
+      "data-testid": t.dataTestId,
+      role: t.role,
+      "aria-label": t.ariaLabel,
+      "aria-hidden": t.ariaHidden ?? "true",
+      fill: t.color ?? "currentColor",
+      children: /* @__PURE__ */ i("path", { d: "m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" })
+    }
+  );
+}
+export {
+  e as default
+};

package/dist/atoms/icons/index.d.ts

@@ -0,0 +1,6 @@
+export { default as KeyboardArrowDown } from './KeyboardArrowDown';
+export { default as KeyboardArrowUp } from './KeyboardArrowUp';
+export { default as Close } from './Close';
+export { default as Visibility } from './Visibility';
+export { default as VisibilityOff } from './VisibilityOff';
+export * from './types';

package/dist/atoms/icons/index.js

@@ -0,0 +1,12 @@
+import { default as e } from "./KeyboardArrowDown.js";
+import { default as f } from "./KeyboardArrowUp.js";
+import { default as i } from "./Close.js";
+import { default as s } from "./Visibility.js";
+import { default as p } from "./VisibilityOff.js";
+export {
+  i as Close,
+  e as KeyboardArrowDown,
+  f as KeyboardArrowUp,
+  s as Visibility,
+  p as VisibilityOff
+};

package/dist/atoms/icons/types.d.ts

@@ -0,0 +1,10 @@
+export type IconProps = {
+    id?: string;
+    className?: string;
+    size?: string | number;
+    color?: string;
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    dataTestId?: string;
+};

package/dist/atoms/icons/types.js

@@ -0,0 +1 @@
+

package/dist/atoms/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DsButton } from './DsButton';
+export * from './icons';

package/dist/atoms/index.js

@@ -0,0 +1,14 @@
+import { default as t } from "./DsButton.js";
+import { default as a } from "./icons/KeyboardArrowDown.js";
+import { default as s } from "./icons/KeyboardArrowUp.js";
+import { default as d } from "./icons/Close.js";
+import { default as p } from "./icons/Visibility.js";
+import { default as m } from "./icons/VisibilityOff.js";
+export {
+  d as Close,
+  t as DsButton,
+  a as KeyboardArrowDown,
+  s as KeyboardArrowUp,
+  p as Visibility,
+  m as VisibilityOff
+};

package/dist/autocomplete/autocomplete.js

@@ -1,83 +1,67 @@
 "use client";
-import { jsxs as z, jsx as h } from "react/jsx-runtime";
-import { forwardRef as J, useRef as N, useImperativeHandle as Q, useEffect as W, useCallback as D, createElement as Y, Children as Z, isValidElement as ee } from "react";
-import { cn as P } from "../cn.js";
-import { useDomId as te } from "../hooks/use-dom-id.js";
+import { jsxs as z, jsx as y } from "react/jsx-runtime";
+import { forwardRef as J, useRef as D, useImperativeHandle as Q, useEffect as W, useCallback as P, createElement as Y, Children as Z, isValidElement as ee } from "react";
+import { c as te } from "../index-CB-zPpNk.js";
+import { cn as oe } from "../cn.js";
+import { useDomId as ne } from "../hooks/use-dom-id.js";
 import { translate as G } 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 ae, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
-import { cycleEnabledIndex as le } from "../utilities.js";
-import { AUTOCOMPLETE_ACTIONS as pe } from "./types.js";
-import { useAutocompleteController as ie } from "./use-autocomplete-controller.js";
+import { InputText as re } from "../input-text/input-text.js";
+import { Popover as ae } from "../popover/popover.js";
+import { SelectMenu as le, SelectMenuOption as L, SelectMenuGroupItem as pe } from "../select/select-menu.js";
+import { cycleEnabledIndex as ie } from "../utilities.js";
+import { AUTOCOMPLETE_ACTIONS as se } from "./types.js";
+import { useAutocompleteController as ce } from "./use-autocomplete-controller.js";
 const {
-  ON_RESET: se,
-  ON_SELECT_ITEM: ce,
+  ON_RESET: ue,
+  ON_SELECT_ITEM: de,
   SET_INPUT_VALUE: R,
   SET_IS_OPEN: i,
-  TOGGLE_CLEAR_BUTTON: C,
-  SET_HIGHLIGHTED_INDEX: ue,
-  SET_VALUE: de
-} = pe, me = (a) => a ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (a, r) => (p) => {
-  a && a({
-    target: { name: r, value: p },
-    currentTarget: { name: r, value: p },
-    type: "change",
-    bubbles: !0,
-    isTrusted: !0
-  });
-}, fe = (a, r) => (p) => {
-  a && a({
-    target: { name: r, value: p },
-    currentTarget: { name: r, value: p },
-    type: "blur",
-    bubbles: !0,
-    isTrusted: !0
-  });
-}, ke = J(
-  (a, r) => {
-    var x;
-    const p = N(null), {
-      disabled: l,
-      children: c,
-      placeholder: y,
+  TOGGLE_CLEAR_BUTTON: S,
+  SET_HIGHLIGHTED_INDEX: me,
+  SET_VALUE: fe
+} = se, Pe = J(
+  (r, a) => {
+    var k;
+    const l = D(null), {
+      disabled: p = !1,
+      children: s,
+      placeholder: h,
       onSelectItem: m,
       isLoading: g,
-      freeSolo: s = !1,
+      freeSolo: c = !1,
       onChange: b,
       onBlur: B,
       name: u,
       value: E,
       id: M
-    } = a, v = N(!1), {
+    } = r, v = D(!1), C = be({ freeSolo: c, disabled: p }), {
       state: t,
       dispatch: o,
       inputRef: f,
-      getOptionLabelByValue: S,
-      listRef: A,
-      debouncedFilter: U,
-      validChildren: be
-    } = ie({
-      ...a,
+      getOptionLabelByValue: A,
+      listRef: _,
+      debouncedFilter: U
+    } = ce({
+      ...r,
       onChange: T(b, u)
-    }), _ = te();
-    Q(r, () => f.current), W(() => {
-      E !== void 0 && (o({ type: de, payload: E }), o({
+    }), w = ne();
+    Q(a, () => f.current), W(() => {
+      E !== void 0 && (o({ type: fe, payload: E }), o({
         type: R,
-        payload: S(c, E)
-      }), o({ type: C }));
+        payload: A(s, E)
+      }), o({ type: S }));
     }, [E]);
-    const w = a["aria-label"] ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }), V = (e) => {
-      o({ type: i, payload: e }), e || o({ type: C, payload: !1 });
+    const x = r["aria-label"] ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }), V = (e) => {
+      o({ type: i, payload: e }), e || o({ type: S, payload: !1 });
     }, H = () => {
-      o({ type: se }), o({ type: i, payload: !1 }), T(b, u)("");
+      o({ type: ue }), o({ type: i, payload: !1 }), T(b, u)("");
     }, j = (e) => {
-      o({ type: R, payload: e }), s && T(b, u)(e), e && o({ type: i, payload: !0 }), U(e);
+      o({ type: R, payload: e }), c && T(b, u)(e), e && o({ type: i, payload: !0 }), U(e);
     }, $ = (e) => {
       const {
         target: { value: n }
       } = e;
-      e.__origin === "clear_button" && H(), !/^\s/.test(n) && (j(n), o({ type: C }), setTimeout(() => {
+      e.__origin === "clear_button" && H(), !/^\s/.test(n) && (j(n), o({ type: S }), setTimeout(() => {
         var d;
         return (d = f.current) == null ? void 0 : d.focus();
       }));
@@ -89,12 +73,12 @@ const {
         type: i,
         payload: !0
       });
-    }, I = D(
+    }, I = P(
       (e) => {
         o({
-          type: ce,
+          type: de,
           payload: {
-            inputValue: S(c, e),
+            inputValue: A(s, e),
             value: e
           }
         }), T(b, u)(e), setTimeout(() => {
@@ -102,28 +86,28 @@ const {
           (n = f.current) == null || n.focus();
         }, 0), m == null || m(e);
       },
-      [c, o, u, b, m]
+      [s, o, u, b, m]
     ), X = (e) => {
-      var O, k;
+      var O, N;
       const { relatedTarget: n } = e;
-      if (n && ((O = A.current) != null && O.contains(n) || (k = p.current) != null && k.contains(n)) || v.current) {
+      if (n && ((O = _.current) != null && O.contains(n) || (N = l.current) != null && N.contains(n)) || v.current) {
         setTimeout(() => v.current = !1, 0);
         return;
       }
       const d = t.value ?? t.inputValue ?? "";
-      fe(B, u)(d);
-    }, q = D(
+      Ie(B, u)(d);
+    }, q = P(
       (e) => {
         switch (e.key) {
           case "ArrowDown":
           case "ArrowUp": {
             e.preventDefault();
-            const n = () => t.highlightedIndex === -1 ? d === -1 ? 0 : -1 : t.highlightedIndex, d = e.key === "ArrowDown" ? 1 : -1, O = le(
+            const n = () => t.highlightedIndex === -1 ? d === -1 ? 0 : -1 : t.highlightedIndex, d = e.key === "ArrowDown" ? 1 : -1, O = ie(
               t.autocompleteOptions,
               n(),
               d
             );
-            o({ type: ue, payload: O }), o({ type: i, payload: !0 });
+            o({ type: me, payload: O }), o({ type: i, payload: !0 });
             break;
           }
           case "Enter":
@@ -149,12 +133,12 @@ const {
     return /* @__PURE__ */ z(
       "div",
       {
-        "aria-disabled": l,
-        className: P("gi-autocomplete gi-not-prose", a.className),
+        "aria-disabled": p,
+        className: oe(C.root(), r.className),
         children: [
-          /* @__PURE__ */ h("span", { id: _, className: "gi-sr-only", children: w }),
-          /* @__PURE__ */ h(
-            oe,
+          /* @__PURE__ */ y("span", { id: w, className: "gi-sr-only", children: x }),
+          /* @__PURE__ */ y(
+            re,
             {
               autoComplete: "off",
               id: M,
@@ -166,28 +150,25 @@ const {
               onBlur: X,
               clearButtonEnabled: t.isClearButtonEnabled,
               inputActionPosition: "beforeSuffix",
-              "aria-label": w,
-              "aria-labelledby": _,
-              "aria-disabled": l,
-              disabled: l,
-              placeholder: y ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }),
-              iconEndClassName: P({
-                "gi-cursor-pointer": !l && !s,
-                "gi-cursor-not-allowed gi-pointer-events-none": l && !s
-              }),
-              iconEnd: s ? void 0 : me(t.isOpen),
+              "aria-label": x,
+              "aria-labelledby": w,
+              "aria-disabled": p,
+              disabled: p,
+              placeholder: h ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }),
+              iconEndClassName: C.iconEnd(),
+              iconEnd: c ? void 0 : Ee(t.isOpen),
               ref: f,
-              iconEndRef: p,
+              iconEndRef: l,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ h(
-            ne,
+          /* @__PURE__ */ y(
+            ae,
             {
               onOpenChange: V,
               triggerRef: f,
-              extraRefs: [p],
+              extraRefs: [l],
               open: t.isOpen,
               maxHeight: 304,
               options: {
@@ -201,14 +182,14 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ h(
-                ae,
+              children: /* @__PURE__ */ y(
+                le,
                 {
                   onChange: I,
                   isLoading: g,
-                  showNoData: !((x = t.autocompleteOptions) != null && x.length),
-                  ref: A,
-                  children: he(
+                  showNoData: !((k = t.autocompleteOptions) != null && k.length),
+                  ref: _,
+                  children: ye(
                     t.autocompleteOptions,
                     t,
                     I
@@ -221,44 +202,44 @@ const {
       }
     );
   }
-), he = (a, r, p) => a.map((l, c) => {
-  if (r.optionType === "AutocompleteItem")
+), ye = (r, a, l) => r.map((p, s) => {
+  if (a.optionType === "AutocompleteItem")
     return /* @__PURE__ */ Y(
       L,
       {
-        ...l.props,
-        key: `AutocompleteItem-${l.props.value}`,
-        selected: r.value === l.props.value,
-        isHighlighted: c === r.highlightedIndex,
-        index: c
+        ...p.props,
+        key: `AutocompleteItem-${p.props.value}`,
+        selected: a.value === p.props.value,
+        isHighlighted: s === a.highlightedIndex,
+        index: s
       }
     );
-  if (r.optionType === "AutocompleteGroupItem") {
-    const y = l, m = Z.toArray(y.props.children).filter((g) => ee(g)).map((g) => {
-      const s = g.props;
-      return /* @__PURE__ */ h(
+  if (a.optionType === "AutocompleteGroupItem") {
+    const h = p, m = Z.toArray(h.props.children).filter((g) => ee(g)).map((g) => {
+      const c = g.props;
+      return /* @__PURE__ */ y(
         L,
         {
-          ...s,
-          selected: r.value.toString() === s.value.toString(),
-          onChange: p,
-          index: c
+          ...c,
+          selected: a.value.toString() === c.value.toString(),
+          onChange: l,
+          index: s
         },
-        `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
+        `SelectGroupItemNext-SelectItemNext-${c.value.toString()}`
       );
     });
-    return /* @__PURE__ */ h(
-      re,
+    return /* @__PURE__ */ y(
+      pe,
       {
-        label: y.props.label,
+        label: h.props.label,
         children: m
       },
-      `Group-${y.props.label}`
+      `Group-${h.props.label}`
     );
   }
   return null;
-}), ye = () => null;
-Object.defineProperty(ye, "componentType", {
+}), he = () => null;
+Object.defineProperty(he, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
@@ -269,9 +250,44 @@ Object.defineProperty(ge, "componentType", {
   writable: !1,
   enumerable: !1
 });
+const be = te({
+  slots: {
+    root: "gi-relative gi-w-full gi-not-prose",
+    iconEnd: ""
+  },
+  variants: {
+    freeSolo: {
+      true: {},
+      false: {
+        iconEnd: "gi-cursor-pointer"
+      }
+    },
+    disabled: {
+      true: {
+        iconEnd: "gi-cursor-not-allowed gi-pointer-events-none"
+      }
+    }
+  }
+}), Ee = (r) => r ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (r, a) => (l) => {
+  r == null || r({
+    target: { name: a, value: l },
+    currentTarget: { name: a, value: l },
+    type: "change",
+    bubbles: !0,
+    isTrusted: !0
+  });
+}, Ie = (r, a) => (l) => {
+  r && r({
+    target: { name: a, value: l },
+    currentTarget: { name: a, value: l },
+    type: "blur",
+    bubbles: !0,
+    isTrusted: !0
+  });
+};
 export {
-  ke as Autocomplete,
+  Pe as Autocomplete,
   ge as AutocompleteGroupItem,
-  ye as AutocompleteItem,
-  he as renderSelectMenuOptions
+  he as AutocompleteItem,
+  ye as renderSelectMenuOptions
 };