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

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

@@ -1,39 +1,102 @@
 import "react/jsx-runtime";
 import "../../../helpers/form/getValueAsEvent.js";
 import "react";
-import { Y as I } from "../../../LoadingSuspense-D0TO0TDT.js";
+import { f as Vo } from "../../../Filter-Bwk7SIlJ.js";
+import "../../Alert/Alert.js";
+import "../../Alert/Alert.styles.js";
 import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.js";
-import "../../../index-2QXL0WYc.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.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 "../../Expander/Expander.js";
-import "../../Form/FormContext.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 "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../../PopoverProvider-Cw5-iAgZ.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
+import "../../Menu/Menu.styles.js";
+import "../../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/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.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 "../../Text/Text.js";
-import "../../Skeleton/Skeleton.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 "../../Stack/Stack.js";
-import "../../Table/TableContext.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/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.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";
 export {
-  I as SelectOptions
+  Vo as SelectOptions
 };

package/dist/components/RichSelect/index.js

@@ -1,16 +1,19 @@
-import { useRichSelectState as r } from "./hooks/useRichSelectState.js";
-import { w as a, x as c, y as S, z as l, A as I, B as o, C as p } from "../../LoadingSuspense-D0TO0TDT.js";
-import { IressSelectBody as f } from "./SelectBody/SelectBody.js";
-import { IressSelectCreate as m } from "./SelectCreate/SelectCreate.js";
+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 { IressSelectLabel as x } from "./SelectLabel/SelectLabel.js";
+import { IressSelectMenu as d } from "./SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as n } from "./SelectSearchInput/SelectSearchInput.js";
 export {
-  a as IressRichSelect,
-  f as IressSelectBody,
-  m as IressSelectCreate,
-  c as IressSelectHeading,
-  S as IressSelectLabel,
-  l as IressSelectMenu,
-  I as IressSelectSearch,
-  o as IressSelectSearchInput,
-  p as IressSelectTags,
-  r as useRichSelectState
+  c as IressRichSelect,
+  I as IressSelectBody,
+  f as IressSelectCreate,
+  o as IressSelectHeading,
+  x as IressSelectLabel,
+  d as IressSelectMenu,
+  S as IressSelectSearch,
+  n as IressSelectSearchInput,
+  a as IressSelectTags,
+  s as useRichSelectState
 };

package/dist/components/Row/Row.js

@@ -1,40 +1,9 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import "./Row.types.js";
-import "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import { D as L } from "../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-import "../../fuzzysort-eoXOpoo6.js";
-import "../Badge/Badge.js";
-import "../ButtonGroup/ButtonGroupProvider.js";
-import "../../enums.js";
-import "../Card/Card.js";
-import "../CheckboxGroup/CheckboxGroup.js";
-import "../Col/Col.js";
-import "../Expander/Expander.js";
-import "../Form/FormContext.js";
-import "../Menu/Menu.js";
-import "../Menu/MenuProvider.js";
-import "../../PopoverProvider-Cw5-iAgZ.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
-import "../Modal/ModalProvider.js";
-import "../Panel/Panel.js";
-import "../Popover/Popover.js";
-import "../Popover/InputPopover/InputPopover.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../RadioGroup/RadioGroup.js";
-import "../Text/Text.js";
-import "../Skeleton/Skeleton.js";
-import "../SkipLink/SkipLink.js";
-import "../Stack/Stack.js";
-import "../Table/TableContext.js";
-import "../TabSet/Tab/Tab.js";
-import "../TabSet/TabSet.js";
-import "../Toggle/Toggle.js";
-import "../Tooltip/Tooltip.js";
-import "../ValidationMessage/ValidationMessage.js";
+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 { 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) });
 export {
-  L as IressRow
+  w as IressRow
 };

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

@@ -0,0 +1,52 @@
+import { a as t } from "../../cva-B2x59Dph.js";
+const n = t({
+  base: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    boxSizing: "border-box"
+  },
+  variants: {
+    horizontalAlign: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      },
+      around: {
+        justifyContent: "space-around"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      evenly: {
+        justifyContent: "space-evenly"
+      }
+    },
+    verticalAlign: {
+      top: {
+        alignItems: "flex-start"
+      },
+      middle: {
+        alignItems: "center"
+      },
+      bottom: {
+        alignItems: "flex-end"
+      },
+      stretch: {
+        alignItems: "stretch"
+      }
+    }
+  },
+  defaultVariants: {
+    horizontalAlign: "left",
+    verticalAlign: "top"
+  }
+});
+export {
+  n as row
+};

package/dist/components/Row/index.js

@@ -1,6 +1,6 @@
-import { RowCssClass as r } from "./Row.types.js";
-import { D as a } from "../../LoadingSuspense-D0TO0TDT.js";
+import { row as e } from "./Row.styles.js";
+import { IressRow as m } from "./Row.js";
 export {
-  a as IressRow,
-  r as RowCssClass
+  m as IressRow,
+  e as row
 };

package/dist/components/Select/Select.js

@@ -1,14 +1,96 @@
-import "react/jsx-runtime";
-import "react";
-import "../../index-2QXL0WYc.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../../enums.js";
-import "../../hooks/useControlledState.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../../SelectControl-CN6caR5z.js";
-import { E as x } from "../../LoadingSuspense-D0TO0TDT.js";
-import "../../helpers/form/getValueAsEvent.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
+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,
+  ...a
+}, E) => {
+  M({
+    component: "IressSelect",
+    defaultValue: f
+  });
+  const u = D(a), S = j(null), { value: c, setValue: n } = A({
+    component: "IressSelect",
+    defaultValue: f,
+    value: x
+  }), F = z.raw({ width: l }), [b, d] = L(a), v = V(
+    (t) => G(
+      t,
+      H(r)
+    ),
+    [r]
+  ), I = V((t) => {
+    S.current = t;
+  }, []);
+  return k(E, () => S.current), /* @__PURE__ */ p(
+    "div",
+    {
+      "data-testid": s,
+      className: K(
+        w,
+        J(B.raw({ readOnly: m }).wrapper, F.wrapper, b),
+        R.FormElement,
+        R.Select
+      ),
+      style: m ? void 0 : i,
+      children: m ? /* @__PURE__ */ p(
+        T,
+        {
+          ...d,
+          "data-testid": N(s, "select"),
+          id: u,
+          name: a.name,
+          ref: I,
+          style: i,
+          value: c,
+          width: l,
+          children: r
+        }
+      ) : /* @__PURE__ */ p(
+        q,
+        {
+          ...d,
+          "data-testid": N(s, "select"),
+          id: u,
+          onChange: (t) => {
+            const e = v(t.currentTarget.value);
+            n(e), o == null || o(t, e);
+          },
+          ref: (t) => {
+            if (I(t), !c && (t != null && t.value)) {
+              const e = v(t.value);
+              n(e), o == null || o(P(t.value), e);
+            }
+          },
+          value: c,
+          width: l,
+          children: r
+        }
+      )
+    }
+  );
+}, mt = y(O);
 export {
-  x as IressSelect
+  mt as IressSelect
 };

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

@@ -0,0 +1,123 @@
+import { s as e } from "../../sva-TRyehFkb.js";
+const t = ["wrapper", "control", "element"], c = e({
+  slots: t,
+  base: {
+    wrapper: {
+      display: "block",
+      position: "relative",
+      lineHeight: 1
+    },
+    control: {
+      position: "relative",
+      selectChevron: !0
+    },
+    element: {
+      textStyle: "typography.body.md",
+      display: "block",
+      width: "[100%]",
+      height: "[calc({sizes.input.height} - 2px)]",
+      paddingInline: "spacing.200",
+      appearance: "none",
+      border: "[0]",
+      background: "[transparent]",
+      _focus: {
+        outline: "[none]"
+      },
+      "& option, & optgroup": {
+        color: "colour.neutral.80"
+      }
+    }
+  },
+  variants: {
+    width: {
+      2: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      4: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      6: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      8: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      10: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      12: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
+        }
+      },
+      16: {
+        wrapper: {
+          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      "25perc": {
+        wrapper: {
+          width: "input.25perc"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      "50perc": {
+        wrapper: {
+          width: "input.50perc"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      "75perc": {
+        wrapper: {
+          width: "input.75perc"
+        },
+        element: {
+          width: "auto"
+        }
+      },
+      "100perc": {
+        wrapper: {
+          width: "input.100perc"
+        },
+        element: {
+          width: "auto"
+        }
+      }
+    }
+  }
+});
+export {
+  c as select
+};

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

@@ -1,9 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
-import { getFormControlValueAsString as e } from "../../../helpers/form/getFormControlValueAsString.js";
-const n = ({
+import { s as e } from "../../../factory-DHLOr79I.js";
+import { getFormControlValueAsString as s } from "../../../helpers/form/getFormControlValueAsString.js";
+const l = ({
   value: o,
   ...t
-}) => /* @__PURE__ */ r("option", { ...t, value: e(o) });
+}) => /* @__PURE__ */ r(e.option, { ...t, value: s(o) });
 export {
-  n as IressSelectOption
+  l as IressSelectOption
 };

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

@@ -1,9 +1,41 @@
-import "react/jsx-runtime";
-import "../../../index-2QXL0WYc.js";
-import { S as l } from "../../../SelectControl-CN6caR5z.js";
-import "react";
-import "../../../enums.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+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 l } from "../../../cx-DN21T1EH.js";
+import "../../Input/Input.js";
+import { input as v } from "../../Input/Input.styles.js";
+const w = ({
+  children: s,
+  className: a,
+  defaultValue: c,
+  placeholder: o,
+  value: i,
+  width: r,
+  ...f
+}, p) => {
+  const u = n({ width: r }), C = n.raw({ width: r });
+  return /* @__PURE__ */ e("div", { className: l(u.control, t.FormElementInner), children: /* @__PURE__ */ d(
+    "select",
+    {
+      ...f,
+      className: l(
+        x(C.element, v.raw().formControl),
+        a,
+        t.FormElementInner
+      ),
+      defaultValue: m(c),
+      ref: p,
+      value: m(i),
+      children: [
+        o && /* @__PURE__ */ e("option", { value: "", children: o }),
+        s
+      ]
+    }
+  ) });
+}, h = S(w);
 export {
-  l as SelectControl
+  h as SelectControl
 };

package/dist/components/Select/components/SelectReadonly.js

@@ -1,39 +1,42 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../helpers/utility/propagateTestid.js";
-import { ab as J } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import "../../../fuzzysort-eoXOpoo6.js";
-import "../../Badge/Badge.js";
-import "../../../index-2QXL0WYc.js";
-import "../../ButtonGroup/ButtonGroupProvider.js";
-import "../../Card/Card.js";
-import "../../CheckboxGroup/CheckboxGroup.js";
-import "../../Col/Col.js";
-import "../../Expander/Expander.js";
-import "../../Form/FormContext.js";
-import "../../Menu/Menu.js";
-import "../../Menu/MenuProvider.js";
-import "../../../PopoverProvider-Cw5-iAgZ.js";
-import "../../CheckboxMark/CheckboxMark.types.js";
-import "../../CheckboxMark/CheckboxMark.js";
-import "../../Modal/ModalProvider.js";
-import "../../Panel/Panel.js";
-import "../../Popover/Popover.js";
-import "../../Popover/InputPopover/InputPopover.js";
-import "../../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../../RadioGroup/RadioGroup.js";
-import "../../Text/Text.js";
-import "../../Skeleton/Skeleton.js";
-import "../../SkipLink/SkipLink.js";
-import "../../Stack/Stack.js";
-import "../../Table/TableContext.js";
-import "../../TabSet/Tab/Tab.js";
-import "../../TabSet/TabSet.js";
-import "../../Toggle/Toggle.js";
-import "../../Tooltip/Tooltip.js";
-import "../../ValidationMessage/ValidationMessage.js";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as u } from "react";
+import { propagateTestid as R } from "../../../helpers/utility/propagateTestid.js";
+import { mapNodesToSelectOptions as S } from "../helpers/nodesToSelectOptions.js";
+import { IressReadonly as b } from "../../Readonly/Readonly.js";
+import "../../Readonly/Readonly.styles.js";
+const g = ({
+  children: t,
+  className: r,
+  "data-testid": m,
+  name: p,
+  required: s,
+  width: i,
+  value: o,
+  ...n
+}, a) => {
+  const d = u(() => {
+    var e;
+    return String(
+      ((e = S(t).find(
+        (f) => f.value === o
+      )) == null ? void 0 : e.label) ?? ""
+    );
+  }, [t, o]);
+  return /* @__PURE__ */ l(
+    b,
+    {
+      ...n,
+      className: r,
+      "data-testid": R(m, "pseudo"),
+      name: p,
+      ref: a,
+      required: s,
+      width: i,
+      value: o,
+      children: d
+    }
+  );
+}, I = c(g);
 export {
-  J as SelectReadonly
+  I as SelectReadonly
 };