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

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

@@ -1,20 +1,20 @@
-import { jsxs as G, jsx as i } from "react/jsx-runtime";
-import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
-import { s as N } from "../../../factory-DHLOr79I.js";
-import { s as C } from "../../../is-valid-prop-DFFvE05x.js";
-import { FieldFooter as P } from "../components/FieldFooter.js";
-import { fieldGroup as S } from "./FieldGroup.styles.js";
-import { c as l } from "../../../cva-B2x59Dph.js";
-import { c as j } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as v } from "../../../enums.js";
-import { LabelBase as w } from "../../Label/LabelBase/LabelBase.js";
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { propagateTestid as i } from "../../../helpers/utility/propagateTestid.js";
+import { s as G } from "../../../factory-oPXoMw9H.js";
+import { s as N } from "../../../is-valid-prop-Ce0wiweq.js";
+import { FieldFooter as C } from "../components/FieldFooter.js";
+import { fieldGroup as P } from "./FieldGroup.styles.js";
+import { c as o } from "../../../css-fGu_jDvv.js";
+import { c as S } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as j } from "../../../enums.js";
+import { LabelBase as v } from "../../Label/LabelBase/LabelBase.js";
 const H = ({
   children: a,
   className: d,
-  "data-testid": t,
-  error: e,
-  errorMessages: o,
-  hiddenLabel: r,
+  "data-testid": s,
+  error: l,
+  errorMessages: m,
+  hiddenLabel: e,
   hint: p,
   inline: n,
   join: c,
@@ -23,50 +23,50 @@ const H = ({
   supplementary: y,
   ...F
 }) => {
-  const s = S.raw({
-    hasError: !!e || !!(o != null && o.length),
-    hiddenLabel: r,
+  const r = P.raw({
+    hasError: !!l || !!m?.length,
+    hiddenLabel: e,
     inline: n,
     join: c
-  }), [h, x] = C(F);
-  return /* @__PURE__ */ G(
+  }), [g, h] = N(F);
+  return /* @__PURE__ */ x(
     "fieldset",
     {
-      className: j(
+      className: S(
         d,
-        l(s.root, h),
-        v.FieldGroup
+        o(r.root, g),
+        j.FieldGroup
       ),
-      "data-testid": t,
-      ...x,
+      "data-testid": s,
+      ...h,
       children: [
-        /* @__PURE__ */ i(
-          w,
+        /* @__PURE__ */ t(
+          v,
           {
-            append: p && /* @__PURE__ */ i(
-              N.div,
+            append: p && /* @__PURE__ */ t(
+              G.div,
               {
-                className: l(s.hint),
-                "data-testid": m(t, "hint"),
-                srOnly: r,
+                className: o(r.hint),
+                "data-testid": i(s, "hint"),
+                srOnly: e,
                 children: p
               }
             ),
-            className: l(s.legend),
+            className: o(r.legend),
             element: "legend",
-            "data-testid": m(t, "legend"),
-            hiddenLabel: r,
+            "data-testid": i(s, "legend"),
+            hiddenLabel: e,
             required: u,
             children: f
           }
         ),
-        /* @__PURE__ */ i("div", { className: l(s.fields), children: a }),
-        /* @__PURE__ */ i(
-          P,
+        /* @__PURE__ */ t("div", { className: o(r.fields), children: a }),
+        /* @__PURE__ */ t(
+          C,
           {
-            "data-testid": m(t, "error"),
-            error: e,
-            errorMessages: o,
+            "data-testid": i(s, "error"),
+            error: l,
+            errorMessages: m,
             multipleFields: !0,
             supplementary: y
           }

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../../sva-TRyehFkb.js";
+import { s as e } from "../../../sva-OmxClA9g.js";
 const o = e({
   slots: ["root", "hint", "legend", "fields"],
   base: {
@@ -8,16 +8,16 @@ const o = e({
       mb: "field.footer",
       position: "relative",
       border: "[none]",
-      margin: "spacing.000",
-      padding: "spacing.000"
+      margin: "spacing.0",
+      padding: "spacing.0"
     },
     hint: {
       color: "colour.neutral.70",
       textStyle: "typography.body.sm"
     },
     legend: {
-      mb: "spacing.100",
-      px: "spacing.000",
+      mb: "spacing.1",
+      px: "spacing.0",
       float: "start",
       "& + *": {
         clear: "left"
@@ -28,7 +28,7 @@ const o = e({
       flexDirection: "column",
       _nestedFormLabels: {
         color: "colour.neutral.70",
-        mb: "spacing.050"
+        mb: "spacing.1"
       }
     }
   },

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

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

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

@@ -4,8 +4,8 @@ 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 { c } from "../../../css-fGu_jDvv.js";
+import { s as d } from "../../../factory-oPXoMw9H.js";
 import { field as g } from "../Field.styles.js";
 const v = ({
   hint: r,
@@ -42,7 +42,7 @@ const v = ({
       {
         name: "info-circle",
         screenreaderText: "More information",
-        ml: "spacing.100"
+        ml: "spacing.1"
       }
     )
   }

package/dist/components/Filter/Filter.js

@@ -1,112 +1,225 @@
-import "react/jsx-runtime";
-import "react";
-import "../../cx-DN21T1EH.js";
-import "./Filter.styles.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../Popover/Popover.js";
+import { jsx as e, jsxs as n, Fragment as T } from "react/jsx-runtime";
+import { forwardRef as ee, useRef as te, useMemo as re, useState as C, useImperativeHandle as oe } from "react";
+import { c as se } from "../../cx-DN21T1EH.js";
+import { filter as ie } from "./Filter.styles.js";
+import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
+import { IressPopover as ae } from "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
-import "../../InputPopover-BWWuoQZ2.js";
+import "../Popover/InputPopover/InputPopover.js";
 import "../Popover/hooks/usePopover.js";
-import "../../Button-BXzmntRi.js";
+import { I as ne } from "../../Button-mmhMLwp9.js";
 import "../Button/CloseButton/CloseButton.js";
-import "../RichSelect/hooks/useRichSelectState.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.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 "../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 { useRichSelectState as me } from "../RichSelect/hooks/useRichSelectState.js";
+import "../../Autocomplete-C5ubHBTi.js";
+import "../RichSelect/SelectBody/SelectBody.styles.js";
+import { GlobalCSSClass as pe } from "../../enums.js";
+import { useIdIfNeeded as le } from "../../hooks/useIdIfNeeded.js";
 import "../Menu/Menu.js";
 import "../Menu/Menu.styles.js";
+import { IressDivider as ce } from "../Divider/Divider.js";
+import "../Divider/Divider.styles.js";
 import "../Menu/MenuItem/MenuItem.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 "../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 "../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";
-import "../RichSelect/SelectBody/SelectBody.styles.js";
+import { IressIcon as w } from "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../RichSelect/SelectHeading/SelectHeading.js";
 import "../RichSelect/SelectLabel/SelectLabel.styles.js";
-import "../RichSelect/SelectMenu/SelectMenu.js";
+import { IressSelectMenu as de } from "../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 "./components/FilterSearch.js";
-import "./components/FilterResetButton.js";
-import "./components/FilterLabel.js";
-import "./components/FilterResultsDescriptor.js";
+import "../Tag/Tag.styles.js";
+import "../Tag/TagInput/TagInput.js";
+import "../Inline/Inline.styles.js";
+import "../Inline/Inline.js";
+import "../Autocomplete/Autocomplete.styles.js";
+import { useAutocompleteSearch as ue } from "../Autocomplete/hooks/useAutocompleteSearch.js";
+import { IressPanel as fe } from "../Panel/Panel.js";
+import "../Panel/Panel.styles.js";
+import { useFilterFlags as he } from "./hooks/useFilterFlags.js";
+import { FilterSearch as ve } from "./components/FilterSearch.js";
+import { FilterResetButton as ge } from "./components/FilterResetButton.js";
+import { FilterLabel as be } from "./components/FilterLabel.js";
+import { FilterResultsDescriptor as Fe } from "./components/FilterResultsDescriptor.js";
+const I = {
+  align: "bottom-start"
+}, Re = ({
+  children: P,
+  className: N,
+  "data-testid": t,
+  debounceThreshold: x,
+  defaultValue: h,
+  id: D,
+  initialOptions: A,
+  inputProps: O = {
+    clearable: !0,
+    prepend: /* @__PURE__ */ e(w, { name: "search" })
+  },
+  limitDesktop: Q = 12,
+  limitMobile: _ = 6,
+  label: L,
+  multiSelect: s,
+  onChange: M,
+  onReset: j,
+  options: i,
+  popoverProps: {
+    footer: k,
+    header: E,
+    ...H
+  } = I,
+  searchable: v,
+  searchNoResultsText: g,
+  selectedOptionsText: W,
+  value: q,
+  visibleResetButton: m,
+  ...G
+}, U) => {
+  const b = le({ id: D }), F = `${b}-sr-text`, R = te(null), S = re(
+    () => v ?? typeof i == "function",
+    [i, v]
+  ), V = {
+    clearable: !0,
+    prepend: /* @__PURE__ */ e(w, { name: "search" }),
+    ...O
+  }, $ = { ...I, ...H }, { value: y, setValue: c } = me({
+    component: "IressFilter",
+    defaultValue: h,
+    multiple: s,
+    value: q
+  }), [z, d] = C(""), [J, a] = C(!1), K = (l) => {
+    d(l.target.value);
+  }, X = () => {
+    d("");
+  }, Y = (l) => {
+    M?.(l), c(l), s || a(!1);
+  }, Z = () => {
+    c(void 0), j?.(), s || a(!1);
+  };
+  oe(U, () => ({
+    element: R.current ?? void 0,
+    clearSearch: () => d(""),
+    reset: () => c(h)
+  }));
+  const {
+    debouncedQuery: B,
+    loading: u,
+    results: f,
+    shouldShowInstructions: Se,
+    shouldShowDebounceWaiting: ye,
+    shouldShowNoResults: Ce
+  } = ue({
+    debounceThreshold: x,
+    initialOptions: A ?? (typeof i == "function" ? void 0 : i),
+    options: i,
+    query: z
+  }), p = he({
+    debouncedQuery: B,
+    loading: u,
+    results: f,
+    searchable: S,
+    visibleResetButton: m
+  }), r = ie();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ...G,
+      className: se(N, r.root, pe.Filter),
+      "data-testid": t,
+      id: b,
+      ref: R,
+      children: [
+        /* @__PURE__ */ n(
+          ae,
+          {
+            ...$,
+            activator: /* @__PURE__ */ n(
+              ne,
+              {
+                "aria-describedby": F,
+                "data-testid": o(
+                  t,
+                  "activator-button__button"
+                ),
+                onClick: () => a(!0),
+                children: [
+                  /* @__PURE__ */ e(
+                    be,
+                    {
+                      label: L,
+                      selectedOptionsText: W,
+                      value: y
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: r.chevron })
+                ]
+              }
+            ),
+            contentStyle: { className: r.popoverContent },
+            "data-testid": o(t, "popover"),
+            show: J,
+            matchActivatorWidth: !0,
+            onActivated: () => a(!0),
+            onDeactivated: () => a(!1),
+            type: "listbox",
+            children: [
+              E,
+              p.showHeader && /* @__PURE__ */ n(T, { children: [
+                /* @__PURE__ */ n(fe, { bg: "transparent", p: "spacing.2", children: [
+                  S && /* @__PURE__ */ e(
+                    ve,
+                    {
+                      ...V,
+                      className: r.searchInput,
+                      "data-testid": o(t, "input"),
+                      loading: u,
+                      onChange: K,
+                      onClear: X
+                    }
+                  ),
+                  m && /* @__PURE__ */ e(
+                    ge,
+                    {
+                      "data-testid": o(t, "reset-button"),
+                      onClick: Z,
+                      children: typeof m == "string" ? m : "Reset filter"
+                    }
+                  )
+                ] }),
+                p.showResults && /* @__PURE__ */ e(ce, {})
+              ] }),
+              p.showResults && /* @__PURE__ */ e(
+                de,
+                {
+                  className: r.optionList,
+                  "data-testid": o(t, "menu"),
+                  items: f,
+                  limitDesktop: Q,
+                  limitMobile: _,
+                  multiSelect: s,
+                  onChange: Y,
+                  selected: y,
+                  selectedFirst: s
+                }
+              ),
+              p.showNoResults && /* @__PURE__ */ e("div", { className: r.noResults, children: g }),
+              k
+            ]
+          }
+        ),
+        P,
+        /* @__PURE__ */ e(
+          Fe,
+          {
+            "data-testid": o(t, "results-sr-text"),
+            id: F,
+            loading: u,
+            noResultsText: g,
+            results: f
+          }
+        )
+      ]
+    }
+  );
+}, dt = ee(Re);
 export {
-  to as IressFilter
+  dt as IressFilter
 };

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

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const e = t({
   slots: [
     "root",
@@ -16,7 +16,7 @@ const e = t({
     root: {},
     chevron: {
       selectChevron: !0,
-      marginInlineStart: "spacing.200",
+      marginInlineStart: "spacing.2",
       _rtl: {
         selectChevronRtl: !0
       }
@@ -25,11 +25,11 @@ const e = t({
       minWidth: "[270px]",
       position: "relative",
       "&:not(:last-child)": {
-        marginBottom: "spacing.400"
+        marginBottom: "spacing.4"
       },
       "& .ids-spinner": {
         position: "absolute",
-        right: "spacing.500"
+        right: "spacing.5"
       }
     },
     optionList: {

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

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