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

package/dist/components/Field/FieldGroup/FieldGroup.styles.js

@@ -0,0 +1,123 @@
+import { s as e } from "../../../sva-TRyehFkb.js";
+const o = e({
+  slots: ["root", "hint", "legend", "fields"],
+  base: {
+    root: {
+      display: "block",
+      maxWidth: "[100%]",
+      mb: "field.footer",
+      position: "relative",
+      border: "[none]",
+      margin: "spacing.000",
+      padding: "spacing.000"
+    },
+    hint: {
+      color: "colour.neutral.70",
+      textStyle: "typography.body.sm"
+    },
+    legend: {
+      mb: "spacing.100",
+      px: "spacing.000",
+      float: "start",
+      "& + *": {
+        clear: "left"
+      }
+    },
+    fields: {
+      display: "flex",
+      flexDirection: "column",
+      _nestedFormLabels: {
+        color: "colour.neutral.70",
+        mb: "spacing.050"
+      }
+    }
+  },
+  variants: {
+    hasError: {
+      true: {
+        root: {
+          _nestedFormElements: {
+            borderColor: "colour.system.danger.fill"
+          }
+        }
+      }
+    },
+    hiddenLabel: {
+      true: {
+        legend: {
+          mb: "none"
+        }
+      }
+    },
+    inline: {
+      true: {
+        fields: {
+          alignItems: "flex-end",
+          flexDirection: "row",
+          columnGap: "sm",
+          "& > *": {
+            flexGrow: "1"
+          },
+          _directNestedFormElements: {
+            mb: "field.footer"
+          },
+          _directNestedSizedElements: {
+            flexGrow: "0",
+            alignSelf: "flex-end"
+          }
+        }
+      }
+    },
+    join: {
+      true: {
+        fields: {
+          alignItems: "flex-end",
+          flexDirection: "row",
+          columnGap: "none",
+          "& > *": {
+            flexGrow: "1"
+          },
+          _directNestedFormElements: {
+            mb: "field.footer"
+          },
+          _directNestedSizedElements: {
+            flexGrow: "0",
+            alignSelf: "flex-end"
+          },
+          _nestedFieldsExceptFirst: {
+            borderTopLeftRadius: "radius.000",
+            borderBottomLeftRadius: "radius.000",
+            _before: {
+              borderTopLeftRadius: "radius.000",
+              borderBottomLeftRadius: "radius.000"
+            },
+            _after: {
+              borderTopLeftRadius: "radius.000",
+              borderBottomLeftRadius: "radius.000"
+            }
+          },
+          _nestedFieldsExceptLast: {
+            borderTopRightRadius: "radius.000",
+            borderBottomRightRadius: "radius.000",
+            borderRightWidth: "[0px]",
+            _before: {
+              borderTopRightRadius: "radius.000",
+              borderBottomRightRadius: "radius.000"
+            },
+            _after: {
+              borderTopRightRadius: "radius.000",
+              borderBottomRightRadius: "radius.000"
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    inline: !1,
+    join: !1
+  }
+});
+export {
+  o as fieldGroup
+};

package/dist/components/Field/components/FieldFooter.js

@@ -0,0 +1,54 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { getUniqueItemsByKey as u } from "../helpers/getUniqueItemsByKey.js";
+import { useRef as p, useMemo as y, useEffect as x } from "react";
+import { s as h } from "../../../factory-DHLOr79I.js";
+import { c as n } from "../../../cva-B2x59Dph.js";
+import { c as g } from "../../../cx-DN21T1EH.js";
+import { IressText as I } from "../../Text/Text.js";
+import { IressValidationSummary as S } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
+import { IressIcon as E } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import { field as b } from "../Field.styles.js";
+const v = (o) => /* @__PURE__ */ r(E, { name: "exclamation-triangle", ...o }), U = ({
+  className: o,
+  "data-testid": l,
+  error: s,
+  errorMessages: i = [],
+  multipleFields: f,
+  supplementary: m,
+  ...c
+}) => {
+  const a = b({ multipleFields: f }), t = p(null), e = y(
+    () => !!s || i.length > 0,
+    [s, i.length]
+  );
+  return x(() => {
+    t.current && (t.current.classList.remove(
+      n({ animationStyle: "field-footer" })
+    ), t.current.offsetHeight, t.current.classList.add(n({ animationStyle: "field-footer" })));
+  }, [m, e]), !m && !e ? null : /* @__PURE__ */ d(
+    h.div,
+    {
+      ...c,
+      className: g(o, a.footer),
+      ref: t,
+      children: [
+        e && /* @__PURE__ */ r(
+          S,
+          {
+            itemStyle: { textStyle: "typography.body.sm" },
+            messages: u(i, "message"),
+            "data-testid": l,
+            prefix: /* @__PURE__ */ r(v, { "aria-label": "Error: " }),
+            visiblePrefix: !0,
+            children: s
+          }
+        ),
+        !e && /* @__PURE__ */ r(I, { className: a.supplementary, children: m })
+      ]
+    }
+  );
+};
+export {
+  U as FieldFooter
+};

package/dist/components/Field/components/FieldHint.js

@@ -0,0 +1,53 @@
+import { jsx as t, Fragment as e, jsxs as a } from "react/jsx-runtime";
+import { IressIcon as l } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import { IressTooltip as p } from "../../Tooltip/Tooltip.js";
+import "../../Tooltip/Tooltip.styles.js";
+import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
+import { c } from "../../../cva-B2x59Dph.js";
+import { s as d } from "../../../factory-DHLOr79I.js";
+import { field as g } from "../Field.styles.js";
+const v = ({
+  hint: r,
+  horizontal: o,
+  hiddenLabel: i,
+  dataTestId: m,
+  children: s
+}) => {
+  const n = g.raw({
+    hasError: !1,
+    hiddenLabel: i,
+    horizontal: o,
+    multipleFields: !1
+  });
+  return o ? /* @__PURE__ */ t(e, { children: s }) : /* @__PURE__ */ a(e, { children: [
+    s,
+    /* @__PURE__ */ t(
+      d.div,
+      {
+        className: c(n.hint),
+        "data-testid": f(m, "hint"),
+        srOnly: i,
+        children: r
+      }
+    )
+  ] });
+}, w = ({ hint: r }) => /* @__PURE__ */ t(
+  p,
+  {
+    tooltipText: typeof r == "string" ? r : "Additional information",
+    align: "top",
+    children: /* @__PURE__ */ t(
+      l,
+      {
+        name: "info-circle",
+        screenreaderText: "More information",
+        ml: "spacing.100"
+      }
+    )
+  }
+);
+export {
+  v as FieldHint,
+  w as FieldHintIcon
+};

package/dist/components/Field/index.js

@@ -1,6 +1,10 @@
 import { IressField as o } from "./Field.js";
-import { IressFieldGroup as p } from "./FieldGroup/FieldGroup.js";
+import { field as p } from "./Field.styles.js";
+import { IressFieldGroup as i } from "./FieldGroup/FieldGroup.js";
+import { fieldGroup as m } from "./FieldGroup/FieldGroup.styles.js";
 export {
   o as IressField,
-  p as IressFieldGroup
+  i as IressFieldGroup,
+  p as field,
+  m as fieldGroup
 };

package/dist/components/Filter/Filter.js

@@ -1,44 +1,112 @@
 import "react/jsx-runtime";
 import "react";
-import "../../index-2QXL0WYc.js";
-import { g as Q } from "../../LoadingSuspense-D0TO0TDT.js";
+import "../../cx-DN21T1EH.js";
+import "./Filter.styles.js";
 import "../../helpers/utility/propagateTestid.js";
 import "../Popover/Popover.js";
-import "../../PopoverProvider-Cw5-iAgZ.js";
-import "../Popover/InputPopover/InputPopover.js";
+import "../Popover/Popover.styles.js";
+import "../../InputPopover-BWWuoQZ2.js";
+import "../Popover/hooks/usePopover.js";
+import "../../Button-BXzmntRi.js";
+import "../Button/CloseButton/CloseButton.js";
 import "../RichSelect/hooks/useRichSelectState.js";
-import "../Autocomplete/hooks/useAutocompleteSearch.js";
-import "../Badge/Badge.js";
+import { a as to } from "../../Filter-Bwk7SIlJ.js";
+import "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../../enums.js";
+import "../Alert/Alert.styles.js";
+import "../Inline/Inline.styles.js";
+import "../Inline/Inline.js";
 import "../../hooks/useIdIfNeeded.js";
+import "../Autocomplete/hooks/useAutocompleteSearch.js";
+import "../Badge/Badge.styles.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 "../Container/Container.styles.js";
+import "../Container/Container.js";
 import "../Divider/Divider.js";
-import "../Expander/Expander.js";
-import "../Form/FormContext.js";
+import "../Divider/Divider.styles.js";
+import "../Expander/Expander.styles.js";
+import "../Label/Label.styles.js";
+import "../Field/Field.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 "../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 "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
+import "../Menu/Menu.styles.js";
+import "../Menu/MenuItem/MenuItem.js";
+import "../Modal/Modal.styles.js";
 import "../Modal/ModalProvider.js";
 import "../Panel/Panel.js";
-import "../../SlideoutProvider-CQh140HM.js";
+import "../Panel/Panel.styles.js";
+import "../Placeholder/Placeholder.styles.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 "../Skeleton/Skeleton.js";
+import "../RadioGroup/RadioGroup.styles.js";
+import "../Readonly/Readonly.js";
+import "../Readonly/Readonly.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 "../Text/Text.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";
+import "../RichSelect/SelectBody/SelectBody.styles.js";
+import "../RichSelect/SelectLabel/SelectLabel.styles.js";
+import "../RichSelect/SelectMenu/SelectMenu.js";
+import "../RichSelect/SelectSearch/SelectSearch.styles.js";
+import "../RichSelect/SelectSearchInput/SelectSearchInput.js";
+import "../RichSelect/SelectTags/SelectTags.styles.js";
 import "./hooks/useFilterFlags.js";
-import "../../AutocompleteNoResults-D7YVtBHi.js";
+import "./components/FilterSearch.js";
+import "./components/FilterResetButton.js";
 import "./components/FilterLabel.js";
+import "./components/FilterResultsDescriptor.js";
 export {
-  Q as IressFilter
+  to as IressFilter
 };

package/dist/components/Filter/Filter.styles.js

@@ -0,0 +1,65 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const e = t({
+  slots: [
+    "root",
+    "chevron",
+    "searchInput",
+    "optionList",
+    "optionContent",
+    "optionMeta",
+    "optionMetaText",
+    "reset",
+    "noResults",
+    "popoverContent"
+  ],
+  base: {
+    root: {},
+    chevron: {
+      selectChevron: !0,
+      marginInlineStart: "spacing.200",
+      _rtl: {
+        selectChevronRtl: !0
+      }
+    },
+    searchInput: {
+      minWidth: "[270px]",
+      position: "relative",
+      "&:not(:last-child)": {
+        marginBottom: "spacing.400"
+      },
+      "& .ids-spinner": {
+        position: "absolute",
+        right: "spacing.500"
+      }
+    },
+    optionList: {
+      _empty: {
+        display: "none"
+      }
+    },
+    optionContent: {
+      flex: "[1 1 auto]",
+      flexDirection: "column"
+    },
+    optionMeta: {
+      display: "block"
+    },
+    optionMetaText: {
+      fontWeight: "normal",
+      color: "colour.neutral.60"
+    },
+    reset: {
+      minHeight: "auto"
+    },
+    noResults: {},
+    popoverContent: {
+      maxHeight: "overlay.sm",
+      overflowY: "auto"
+    }
+  },
+  variants: {},
+  compoundVariants: []
+});
+export {
+  e as filter
+};

package/dist/components/Filter/components/FilterResetButton.js

@@ -1,38 +1,28 @@
-import "react/jsx-runtime";
-import { a2 as J } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-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 "../../Popover/hooks/usePopoverItem.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 m } from "react/jsx-runtime";
+import { I as f } from "../../../Button-BXzmntRi.js";
+import "../../Button/CloseButton/CloseButton.js";
+import { filter as u } from "../Filter.styles.js";
+import { usePopoverItem as a } from "../../Popover/hooks/usePopoverItem.js";
+import { forwardRef as c, useRef as l, useImperativeHandle as R } from "react";
+const d = c(
+  (s, o) => {
+    const t = l(null), { isActiveInPopover: B, ...e } = a(), n = u();
+    return R(o, () => t.current), /* @__PURE__ */ m(
+      f,
+      {
+        ...s,
+        ...e,
+        className: n.reset,
+        mode: "tertiary",
+        ref: (i) => {
+          var r;
+          t.current = i, (r = e == null ? void 0 : e.ref) == null || r.call(e, t.current);
+        }
+      }
+    );
+  }
+);
+d.displayName = "FilterResetButton";
 export {
-  J as FilterResetButton
+  d as FilterResetButton
 };

package/dist/components/Filter/components/FilterResultsDescriptor.js

@@ -0,0 +1,18 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import { GlobalCSSClass as c } from "../../../enums.js";
+import { composeLabelValueDescriptor as n } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+const D = ({
+  loading: t,
+  noResultsText: o = "No results",
+  results: r = [],
+  show: e,
+  value: i,
+  ...m
+}) => {
+  const s = p(() => t ? "loading" : e && !r.length ? o : e && r.length ? n(r, "{{numOptions}} results") : n(i) || "None selected", [t, o, r, e, i]);
+  return /* @__PURE__ */ l("div", { ...m, className: c.SROnly, children: s });
+};
+export {
+  D as FilterResultsDescriptor
+};

package/dist/components/Filter/components/FilterSearch.js

@@ -1,38 +1,33 @@
-import "react/jsx-runtime";
-import { a1 as J } from "../../../LoadingSuspense-D0TO0TDT.js";
-import "react";
-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 "../../Popover/hooks/usePopoverItem.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 n } from "react/jsx-runtime";
+import { filter as o } from "../Filter.styles.js";
+import { usePopoverItem as f } from "../../Popover/hooks/usePopoverItem.js";
+import { forwardRef as l, useRef as u, useImperativeHandle as h } from "react";
+import { c as p } from "../../../cx-DN21T1EH.js";
+import { IressInput as d } from "../../Input/Input.js";
+import "../../Input/Input.styles.js";
+const x = l(
+  (t, a) => {
+    const r = u(null), { isActiveInPopover: y, ...e } = f();
+    h(a, () => r.current);
+    const i = o();
+    return /* @__PURE__ */ n(
+      d,
+      {
+        ...t,
+        ...e,
+        autoCorrect: "off",
+        className: p(i.searchInput, t.className),
+        style: { width: "100%" },
+        ref: (m) => {
+          var s, c;
+          r.current = m, (c = e == null ? void 0 : e.ref) == null || c.call(e, ((s = r.current) == null ? void 0 : s.input) ?? null);
+        },
+        type: "search"
+      }
+    );
+  }
+);
+x.displayName = "FilterSearch";
 export {
-  J as FilterSearch
+  x as FilterSearch
 };

package/dist/components/Filter/index.js

@@ -1,4 +1,4 @@
-import { g as s } from "../../LoadingSuspense-D0TO0TDT.js";
+import { a as s } from "../../Filter-Bwk7SIlJ.js";
 export {
   s as IressFilter
 };

package/dist/components/Hide/Hide.js

@@ -1,7 +1,23 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import "./Hide.types.js";
-import { j as t } from "../../LoadingSuspense-D0TO0TDT.js";
+import { jsx as t } from "react/jsx-runtime";
+import { normaliseHideValues as m } from "./helpers/normaliseHideValues.js";
+import { s as d } from "../../factory-DHLOr79I.js";
+const n = d("div"), f = ({
+  children: s,
+  hiddenOn: e,
+  visuallyHidden: o,
+  ...i
+}) => {
+  const r = m(e);
+  return /* @__PURE__ */ t(
+    n,
+    {
+      ...i,
+      srOnly: o ? r : void 0,
+      hide: o ? void 0 : r,
+      children: s
+    }
+  );
+};
 export {
-  t as IressHide
+  f as IressHide
 };

package/dist/components/Hide/helpers/normaliseHideValues.js

@@ -0,0 +1,8 @@
+import { BREAKPOINTS as o } from "../../../constants.js";
+const c = (t = {}) => o.reduce(
+  (r, e, m) => (r[e] = t[e] ?? r[o[m - 1]] ?? !1, r),
+  {}
+);
+export {
+  c as normaliseHideValues
+};

package/dist/components/Hide/index.js

@@ -1,7 +1,4 @@
-import { HideCssClass as r, HideTypes as o } from "./Hide.types.js";
-import { j as i } from "../../LoadingSuspense-D0TO0TDT.js";
+import { IressHide as o } from "./Hide.js";
 export {
-  r as HideCssClass,
-  o as HideTypes,
-  i as IressHide
+  o as IressHide
 };