@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.2

package/dist/components/RichSelect/components/SelectOptions.js

@@ -1,102 +1,208 @@
-import "react/jsx-runtime";
-import "../../../helpers/form/getValueAsEvent.js";
-import "react";
-import { f as Vo } from "../../../Filter-Bwk7SIlJ.js";
-import "../../Alert/Alert.js";
+import { jsx as s, jsxs as F, Fragment as W } from "react/jsx-runtime";
+import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
+import { useCallback as O, useRef as j, useId as k, useEffect as P } from "react";
+import { IressSelectSearch as $ } from "../SelectSearch/SelectSearch.js";
+import { toArray as D } from "../../../helpers/formatting/toArray.js";
+import { IressSelectMenu as y } from "../SelectMenu/SelectMenu.js";
+import { IressAlert as T } from "../../Alert/Alert.js";
 import "../../Alert/Alert.styles.js";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.styles.js";
-import "../../../Button-BXzmntRi.js";
-import "../../Button/CloseButton/CloseButton.js";
-import "../../../helpers/formatting/toArray.js";
-import "../../ButtonGroup/ButtonGroup.styles.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.styles.js";
-import "../../Checkbox/Checkbox.js";
-import "../../Checkbox/Checkbox.styles.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../CheckboxGroup/CheckboxGroup.styles.js";
-import "../../Col/Col.styles.js";
-import "../../Col/Col.js";
-import "../../Container/Container.styles.js";
-import "../../Container/Container.js";
-import "../../Divider/Divider.styles.js";
-import "../../Expander/Expander.styles.js";
-import "../../Label/Label.styles.js";
-import "../../Field/Field.styles.js";
-import "../../Icon/Icon.styles.js";
-import "../../Tooltip/Tooltip.styles.js";
-import "../../Field/FieldGroup/FieldGroup.styles.js";
-import "../../Hide/Hide.js";
-import "../../Image/Image.js";
-import "../../Image/Image.styles.js";
-import "../../Inline/Inline.styles.js";
-import "../../Inline/Inline.js";
-import "../../Input/Input.js";
-import "../../Input/Input.styles.js";
-import "../../InputCurrency/InputCurrency.js";
-import "../../Link/Link.js";
-import "../../Link/Link.styles.js";
+import { IressSelectSearchInput as z } from "../SelectSearchInput/SelectSearchInput.js";
+import { IressSelectHeading as B } from "../SelectHeading/SelectHeading.js";
 import "../../Menu/Menu.js";
 import "../../Menu/Menu.styles.js";
-import "../../Menu/MenuDivider/MenuDivider.js";
+import { IressMenuDivider as G } from "../../Menu/MenuDivider/MenuDivider.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import "../../Popover/hooks/usePopover.js";
-import "../../Modal/Modal.styles.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Panel/Panel.styles.js";
-import "../../Placeholder/Placeholder.styles.js";
-import "../../Popover/Popover.js";
-import "../../Popover/Popover.styles.js";
-import "../../../InputPopover-BWWuoQZ2.js";
-import "../../Progress/Progress.styles.js";
-import "../../../index-DlGwAtoO.js";
-import "../../../ToasterProvider-XqpAGfRs.js";
-import "../../Toaster/Toaster.styles.js";
-import "../../Toaster/components/Toast/Toast.styles.js";
-import "../../Slideout/Slideout.styles.js";
-import "../../Slideout/SlideoutProvider.js";
-import "react-dom";
-import "../../../typography--vGt_ztU.js";
-import "../../Radio/Radio.js";
-import "../../Radio/Radio.styles.js";
-import "../../RadioGroup/RadioGroup.js";
-import "../../RadioGroup/RadioGroup.styles.js";
-import "../../Readonly/Readonly.js";
-import "../../Readonly/Readonly.styles.js";
-import "../SelectBody/SelectBody.styles.js";
-import "../SelectLabel/SelectLabel.styles.js";
-import "../SelectMenu/SelectMenu.js";
-import "../SelectSearchInput/SelectSearchInput.js";
-import "../SelectTags/SelectTags.styles.js";
-import "../../Row/Row.styles.js";
-import "../../Row/Row.js";
-import "../../Select/Select.styles.js";
-import "../../Select/Select.js";
-import "../../Skeleton/Skeleton.styles.js";
-import "../../SkipLink/SkipLink.js";
-import "../../SkipLink/SkipLink.styles.js";
-import "../../Slider/Slider.js";
-import "../../Slider/Slider.styles.js";
-import "../../Spinner/Spinner.styles.js";
-import "../../Stack/Stack.styles.js";
-import "../../../TableProvider-D8SQKIG8.js";
-import "../../Table/Table.styles.js";
-import "../../TabSet/TabSetProvider.js";
-import "../../TabSet/TabSet.styles.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/Tab/Tab.styles.js";
-import "../../Tag/Tag.styles.js";
-import "../../Tag/TagInput/TagInput.js";
-import "../../CheckboxMark/CheckboxMark.styles.js";
-import "../../Toggle/Toggle.styles.js";
-import "../../../patterns/Form/Form.js";
-import "../../../patterns/Form/FormContext.js";
-import "../../../patterns/Form/FormValidationSummary/FormValidationSummary.js";
-import "../../../patterns/Form/HookForm/HookForm.js";
-import "../../../patterns/Loading/Loading.js";
-import "../../../patterns/Loading/LoadingSuspense.js";
+const H = ({
+  minSearchLength: e,
+  multiSelect: n,
+  onChange: a,
+  query: I,
+  results: o,
+  shouldShowInstructions: d,
+  shouldShowNoResults: c,
+  value: t
+}) => /* @__PURE__ */ s(
+  y,
+  {
+    heading: n ? "Search results" : void 0,
+    items: o,
+    multiSelect: n,
+    noResults: (() => {
+      if (I) {
+        if (d)
+          return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
+        if (c)
+          return "No results found";
+      }
+    })(),
+    onChange: a,
+    selected: t,
+    hideSelectedItems: n
+  }
+), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ F(W, { children: [
+  "An unknown error occurred.",
+  /* @__PURE__ */ s("br", {}),
+  " Please contact support if the error persists."
+] }) }) : null, K = ({
+  autoHighlight: e,
+  error: n,
+  loading: a,
+  minSearchLength: I,
+  multiSelect: o,
+  onChange: d,
+  onClear: c,
+  query: t,
+  results: f,
+  setQuery: p,
+  show: A,
+  value: i,
+  shouldShowInstructions: R,
+  shouldShowNoResults: S
+}) => {
+  const r = D(i).map(
+    (l) => {
+      const { formattedLabel: g, ...b } = l;
+      return b;
+    }
+  ), u = !n && (!!f?.length || t && !a), m = !!r.length && o, N = u && m, h = j(null), x = k();
+  P(() => {
+    A || p?.("");
+  }, [A, p]);
+  const v = m ? r.length + 1 : 0;
+  return /* @__PURE__ */ F(
+    $,
+    {
+      activator: /* @__PURE__ */ s(
+        z,
+        {
+          "aria-label": "Search",
+          loading: a,
+          onChange: (l) => p?.(l.target.value),
+          ref: h,
+          placeholder: "Search and select",
+          value: t
+        }
+      ),
+      autoHighlight: e,
+      focusStartIndex: e ? t && u ? v : m ? 1 : 0 : void 0,
+      children: [
+        m && /* @__PURE__ */ s(
+          y,
+          {
+            "aria-labelledby": x,
+            heading: /* @__PURE__ */ s(
+              B,
+              {
+                clearAll: !0,
+                onClearAll: (l) => {
+                  c?.(l), h.current?.focus();
+                },
+                children: /* @__PURE__ */ F("h2", { id: x, children: [
+                  "Selected (",
+                  r.length,
+                  ")"
+                ] })
+              }
+            ),
+            items: r,
+            multiSelect: o,
+            onChange: d,
+            selected: i
+          }
+        ),
+        N && /* @__PURE__ */ s(G, {}),
+        u && /* @__PURE__ */ s(
+          H,
+          {
+            minSearchLength: I,
+            multiSelect: o,
+            onChange: d,
+            query: t,
+            results: f,
+            value: i,
+            shouldShowInstructions: R,
+            shouldShowNoResults: S
+          }
+        ),
+        /* @__PURE__ */ s(J, { error: n })
+      ]
+    }
+  );
+}, oe = ({
+  autoHighlight: e,
+  debouncedQuery: n,
+  error: a,
+  initialOptions: I,
+  loading: o,
+  minSearchLength: d,
+  multiSelect: c,
+  onChange: t,
+  options: f,
+  query: p,
+  renderOptions: A,
+  results: i,
+  setQuery: R,
+  setShow: S,
+  setValue: r,
+  show: u,
+  shouldShowInstructions: m,
+  shouldShowNoResults: N,
+  value: h
+}) => {
+  const x = typeof f == "function", v = I ?? (x ? [] : f), M = i.length ? i : v, C = O(
+    (g) => {
+      r(g), t?.(E(g), g), c || S(!1);
+    },
+    [S, r, t, c]
+  ), l = O(
+    (g) => {
+      g.stopPropagation();
+      const b = [];
+      r(b), t?.(E([]), b);
+    },
+    [r, t]
+  );
+  return A ? A({
+    close: () => S(!1),
+    debouncedQuery: n,
+    error: a,
+    loading: o,
+    query: p,
+    results: M,
+    setValue: r,
+    setQuery: R,
+    show: u,
+    value: h
+  }) : x ? /* @__PURE__ */ s(
+    K,
+    {
+      autoHighlight: e,
+      error: a,
+      loading: o,
+      minSearchLength: d,
+      multiSelect: c,
+      onChange: C,
+      onClear: l,
+      query: p,
+      results: i,
+      setQuery: R,
+      show: u,
+      value: h,
+      shouldShowInstructions: m,
+      shouldShowNoResults: N
+    }
+  ) : /* @__PURE__ */ s(
+    y,
+    {
+      items: M,
+      multiSelect: c,
+      onChange: C,
+      selected: h,
+      selectedFirst: !0
+    }
+  );
+};
 export {
-  Vo as SelectOptions
+  oe as SelectOptions
 };

package/dist/components/RichSelect/index.js

@@ -1,19 +1,22 @@
-import { useRichSelectState as s } from "./hooks/useRichSelectState.js";
-import { b as c, c as o, d as S, e as a } from "../../Filter-Bwk7SIlJ.js";
-import { IressSelectBody as I } from "./SelectBody/SelectBody.js";
-import { IressSelectCreate as f } from "./SelectCreate/SelectCreate.js";
+import { useRichSelectState as t } from "./hooks/useRichSelectState.js";
+import { I as s } from "../../Autocomplete-C5ubHBTi.js";
+import { IressSelectBody as S } from "./SelectBody/SelectBody.js";
+import { IressSelectCreate as p } from "./SelectCreate/SelectCreate.js";
+import { IressSelectHeading as f } from "./SelectHeading/SelectHeading.js";
 import { IressSelectLabel as x } from "./SelectLabel/SelectLabel.js";
-import { IressSelectMenu as d } from "./SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as n } from "./SelectSearchInput/SelectSearchInput.js";
+import { IressSelectMenu as h } from "./SelectMenu/SelectMenu.js";
+import { IressSelectSearch as n } from "./SelectSearch/SelectSearch.js";
+import { IressSelectSearchInput as d } from "./SelectSearchInput/SelectSearchInput.js";
+import { IressSelectTags as R } from "./SelectTags/SelectTags.js";
 export {
-  c as IressRichSelect,
-  I as IressSelectBody,
-  f as IressSelectCreate,
-  o as IressSelectHeading,
+  s as IressRichSelect,
+  S as IressSelectBody,
+  p as IressSelectCreate,
+  f as IressSelectHeading,
   x as IressSelectLabel,
-  d as IressSelectMenu,
-  S as IressSelectSearch,
-  n as IressSelectSearchInput,
-  a as IressSelectTags,
-  s as useRichSelectState
+  h as IressSelectMenu,
+  n as IressSelectSearch,
+  d as IressSelectSearchInput,
+  R as IressSelectTags,
+  t as useRichSelectState
 };

package/dist/components/Row/Row.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { row as m } from "./Row.styles.js";
-import { s as t } from "../../factory-DHLOr79I.js";
+import { s as t } from "../../factory-oPXoMw9H.js";
 import { c as p } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as a } from "../../enums.js";
 const i = t("div", m), w = ({ className: o, ...r }) => /* @__PURE__ */ s(i, { ...r, className: p(o, a.Row) });

package/dist/components/Row/Row.styles.js

@@ -1,4 +1,4 @@
-import { a as t } from "../../cva-B2x59Dph.js";
+import { c as t } from "../../cva-JiDXAa83.js";
 const n = t({
   base: {
     display: "flex",

package/dist/components/Select/Select.js

@@ -1,96 +1,96 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as y, useRef as j, useCallback as V, useImperativeHandle as k } from "react";
-import { propagateTestid as N } from "../../helpers/utility/propagateTestid.js";
-import { useControlledState as A } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as D } from "../../hooks/useIdIfNeeded.js";
-import { findValueFromStringInSelectOptions as G, mapNodesToSelectOptions as H } from "./helpers/nodesToSelectOptions.js";
-import { getValueAsEvent as P } from "../../helpers/form/getValueAsEvent.js";
-import { SelectReadonly as T } from "./components/SelectReadonly.js";
-import { SelectControl as q } from "./components/SelectControl.js";
-import { select as z } from "./Select.styles.js";
-import { input as B } from "../Input/Input.styles.js";
-import { c as J } from "../../cva-B2x59Dph.js";
-import { c as K } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as R } from "../../enums.js";
-import { s as L } from "../../is-valid-prop-DFFvE05x.js";
-import { useNoDefaultValueInForms as M } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-const O = ({
-  children: r,
-  className: w,
-  "data-testid": s,
-  defaultValue: f,
-  onChange: o,
-  readOnly: m,
-  style: i,
-  value: x,
-  width: l,
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as F, useRef as b, useCallback as C, useImperativeHandle as y } from "react";
+import { propagateTestid as V } from "../../helpers/utility/propagateTestid.js";
+import { useControlledState as j } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as k } from "../../hooks/useIdIfNeeded.js";
+import { findValueFromStringInSelectOptions as A, mapNodesToSelectOptions as D } from "./helpers/nodesToSelectOptions.js";
+import { getValueAsEvent as G } from "../../helpers/form/getValueAsEvent.js";
+import { SelectReadonly as H } from "./components/SelectReadonly.js";
+import { SelectControl as P } from "./components/SelectControl.js";
+import { select as T } from "./Select.styles.js";
+import { input as q } from "../Input/Input.styles.js";
+import { c as z } from "../../css-fGu_jDvv.js";
+import { c as B } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+import { s as J } from "../../is-valid-prop-Ce0wiweq.js";
+import { useNoDefaultValueInForms as K } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const L = ({
+  children: o,
+  className: N,
+  "data-testid": r,
+  defaultValue: c,
+  onChange: p,
+  readOnly: s,
+  style: f,
+  value: R,
+  width: m,
   ...a
-}, E) => {
-  M({
+}, w) => {
+  K({
     component: "IressSelect",
-    defaultValue: f
+    defaultValue: c
   });
-  const u = D(a), S = j(null), { value: c, setValue: n } = A({
+  const i = k(a), u = b(null), { value: l, setValue: S } = j({
     component: "IressSelect",
-    defaultValue: f,
-    value: x
-  }), F = z.raw({ width: l }), [b, d] = L(a), v = V(
-    (t) => G(
-      t,
-      H(r)
+    defaultValue: c,
+    value: R
+  }), x = T.raw({ width: m }), [E, d] = J(a), v = C(
+    (e) => A(
+      e,
+      D(o)
     ),
-    [r]
-  ), I = V((t) => {
-    S.current = t;
+    [o]
+  ), I = C((e) => {
+    u.current = e;
   }, []);
-  return k(E, () => S.current), /* @__PURE__ */ p(
+  return y(w, () => u.current), /* @__PURE__ */ n(
     "div",
     {
-      "data-testid": s,
-      className: K(
-        w,
-        J(B.raw({ readOnly: m }).wrapper, F.wrapper, b),
-        R.FormElement,
-        R.Select
+      "data-testid": r,
+      className: B(
+        N,
+        z(q.raw({ readOnly: s }).wrapper, x.wrapper, E),
+        g.FormElement,
+        g.Select
       ),
-      style: m ? void 0 : i,
-      children: m ? /* @__PURE__ */ p(
-        T,
+      style: s ? void 0 : f,
+      children: s ? /* @__PURE__ */ n(
+        H,
         {
           ...d,
-          "data-testid": N(s, "select"),
-          id: u,
+          "data-testid": V(r, "select"),
+          id: i,
           name: a.name,
           ref: I,
-          style: i,
-          value: c,
-          width: l,
-          children: r
+          style: f,
+          value: l,
+          width: m,
+          children: o
         }
-      ) : /* @__PURE__ */ p(
-        q,
+      ) : /* @__PURE__ */ n(
+        P,
         {
           ...d,
-          "data-testid": N(s, "select"),
-          id: u,
-          onChange: (t) => {
-            const e = v(t.currentTarget.value);
-            n(e), o == null || o(t, e);
+          "data-testid": V(r, "select"),
+          id: i,
+          onChange: (e) => {
+            const t = v(e.currentTarget.value);
+            S(t), p?.(e, t);
           },
-          ref: (t) => {
-            if (I(t), !c && (t != null && t.value)) {
-              const e = v(t.value);
-              n(e), o == null || o(P(t.value), e);
+          ref: (e) => {
+            if (I(e), !l && e?.value) {
+              const t = v(e.value);
+              S(t), p?.(G(e.value), t);
             }
           },
-          value: c,
-          width: l,
-          children: r
+          value: l,
+          width: m,
+          children: o
         }
       )
     }
   );
-}, mt = y(O);
+}, me = F(L);
 export {
-  mt as IressSelect
+  me as IressSelect
 };

package/dist/components/Select/Select.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-TRyehFkb.js";
+import { s as e } from "../../sva-OmxClA9g.js";
 const t = ["wrapper", "control", "element"], c = e({
   slots: t,
   base: {
@@ -16,7 +16,7 @@ const t = ["wrapper", "control", "element"], c = e({
       display: "block",
       width: "[100%]",
       height: "[calc({sizes.input.height} - 2px)]",
-      paddingInline: "spacing.200",
+      paddingInline: "spacing.2",
       appearance: "none",
       border: "[0]",
       background: "[transparent]",
@@ -32,7 +32,7 @@ const t = ["wrapper", "control", "element"], c = e({
     width: {
       2: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
         },
         element: {
           width: "auto"
@@ -40,7 +40,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       4: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
         },
         element: {
           width: "auto"
@@ -48,7 +48,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       6: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
         },
         element: {
           width: "auto"
@@ -56,7 +56,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       8: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
         },
         element: {
           width: "auto"
@@ -64,7 +64,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       10: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
         },
         element: {
           width: "auto"
@@ -72,12 +72,12 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       12: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
         }
       },
       16: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
         },
         element: {
           width: "auto"

package/dist/components/Select/SelectOption/SelectOption.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../../factory-DHLOr79I.js";
+import { s as e } from "../../../factory-oPXoMw9H.js";
 import { getFormControlValueAsString as s } from "../../../helpers/form/getFormControlValueAsString.js";
 const l = ({
   value: o,

package/dist/components/Select/components/SelectControl.js

@@ -3,7 +3,7 @@ import { forwardRef as S } from "react";
 import { GlobalCSSClass as t } from "../../../enums.js";
 import { getFormControlValueAsStringIfDefined as m } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
 import { select as n } from "../Select.styles.js";
-import { c as x } from "../../../cva-B2x59Dph.js";
+import { c as x } from "../../../css-fGu_jDvv.js";
 import { c as l } from "../../../cx-DN21T1EH.js";
 import "../../Input/Input.js";
 import { input as v } from "../../Input/Input.styles.js";