@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.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-D6AL0bia.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-CLvWVHp6.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.200", 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",

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-D6AL0bia.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
 };

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

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

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

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

package/dist/components/Filter/index.js

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

package/dist/components/Hide/Hide.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { normaliseHideValues as m } from "./helpers/normaliseHideValues.js";
-import { s as d } from "../../factory-DHLOr79I.js";
+import { s as d } from "../../factory-oPXoMw9H.js";
 const n = d("div"), f = ({
   children: s,
   hiddenOn: e,

package/dist/components/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as p } from "react/jsx-runtime";
-import { s as n } from "../../factory-DHLOr79I.js";
+import { s as n } from "../../factory-oPXoMw9H.js";
 import { c as e } from "../../cx-DN21T1EH.js";
 import { icon as x } from "./Icon.styles.js";
 import { GlobalCSSClass as I } from "../../enums.js";

package/dist/components/Icon/Icon.styles.js

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

package/dist/components/Image/Image.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { GlobalCSSClass as a } from "../../enums.js";
 import { image as i } from "./Image.styles.js";
 import { c as l } from "../../cx-DN21T1EH.js";
-import { s as c } from "../../factory-DHLOr79I.js";
+import { s as c } from "../../factory-oPXoMw9H.js";
 const n = c("img", i), y = ({
   className: m,
   maxWidth: s = "100%",

package/dist/components/Image/Image.styles.js

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

package/dist/components/Inline/Inline.js

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

package/dist/components/Inline/Inline.styles.js

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