@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/components/Filter/Filter.js

@@ -1,45 +1,225 @@
-import "react/jsx-runtime";
-import "react";
-import "../../index-cbHCAGLB.js";
-import { g as R } from "../../LoadingSuspense-BtzikVZk.js";
-import "../../helpers/utility/propagateTestid.js";
-import "../Popover/Popover.js";
-import "../../PopoverProvider-DZ92QV8I.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 "../Popover/InputPopover/InputPopover.js";
-import "../RichSelect/hooks/useRichSelectState.js";
-import "../Autocomplete/hooks/useAutocompleteSearch.js";
-import "../Badge/Badge.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../ButtonGroup/ButtonGroupProvider.js";
-import "../Card/Card.js";
-import "../CheckboxGroup/CheckboxGroup.js";
-import "../Col/Col.js";
-import "../Divider/Divider.js";
-import "../Expander/Expander.js";
-import "../Form/FormContext.js";
+import "../Popover/hooks/usePopover.js";
+import { I as ne } from "../../Button-D6AL0bia.js";
+import "../Button/CloseButton/CloseButton.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/MenuProvider.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
-import "../Modal/ModalProvider.js";
-import "../Panel/Panel.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../RadioGroup/RadioGroup.js";
-import "../Skeleton/Skeleton.js";
-import "../SkipLink/SkipLink.js";
-import "../Stack/Stack.js";
-import "../Table/TableContext.js";
-import "../Table/TableProvider.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 "./hooks/useFilterFlags.js";
-import "../../AutocompleteNoResults-D_052VQ9.js";
-import "./components/FilterLabel.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 { IressIcon as w } from "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../RichSelect/SelectHeading/SelectHeading.js";
+import "../RichSelect/SelectLabel/SelectLabel.styles.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 "../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 {
-  R as IressFilter
+  dt as IressFilter
 };

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

@@ -0,0 +1,65 @@
+import { s as t } from "../../sva-OmxClA9g.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,39 +1,27 @@
-import "react/jsx-runtime";
-import { a2 as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../../index-cbHCAGLB.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-DZ92QV8I.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 "../../Table/TableProvider.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 { I as i } from "../../../Button-D6AL0bia.js";
+import "../../Button/CloseButton/CloseButton.js";
+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,
+      {
+        ...t,
+        ...r,
+        className: s.reset,
+        mode: "tertiary",
+        ref: (m) => {
+          e.current = m, r?.ref?.(e.current);
+        }
+      }
+    );
+  }
+);
+l.displayName = "FilterResetButton";
 export {
-  K as FilterResetButton
+  l as FilterResetButton
 };

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

@@ -0,0 +1,18 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+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,
+  ...n
+}) => {
+  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,39 +1,32 @@
-import "react/jsx-runtime";
-import { a1 as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../../fuzzysort-BNka47rs.js";
-import "../../Badge/Badge.js";
-import "../../../index-cbHCAGLB.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-DZ92QV8I.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 "../../Table/TableProvider.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 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 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,
+        autoCorrect: "off",
+        className: l(s.searchInput, r.className),
+        style: { width: "100%" },
+        ref: (m) => {
+          e.current = m, t?.ref?.(e.current?.input ?? null);
+        },
+        type: "search"
+      }
+    );
+  }
+);
+I.displayName = "FilterSearch";
 export {
-  K as FilterSearch
+  I as FilterSearch
 };

package/dist/components/Filter/index.js

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

package/dist/components/Hide/Hide.js

@@ -1,7 +1,23 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "./Hide.types.js";
-import { j as t } from "../../LoadingSuspense-BtzikVZk.js";
+import { jsx as t } from "react/jsx-runtime";
+import { normaliseHideValues as m } from "./helpers/normaliseHideValues.js";
+import { s as d } from "../../factory-oPXoMw9H.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-BtzikVZk.js";
+import { IressHide as o } from "./Hide.js";
 export {
-  r as HideCssClass,
-  o as HideTypes,
-  i as IressHide
+  o as IressHide
 };

package/dist/components/Icon/Icon.js

@@ -1,40 +1,42 @@
-import "react/jsx-runtime";
-import "react";
-import "../../index-cbHCAGLB.js";
-import "./Icon.types.js";
-import { k as M } from "../../LoadingSuspense-BtzikVZk.js";
-import "../../fuzzysort-BNka47rs.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-DZ92QV8I.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 "../Table/TableProvider.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 p } from "react/jsx-runtime";
+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";
+const g = ({
+  className: r,
+  fixedWidth: s,
+  flip: a,
+  name: i,
+  rotate: m,
+  screenreaderText: o,
+  set: f = "fal",
+  spin: t,
+  ...l
+}) => {
+  const c = x({
+    flip: a,
+    rotate: m,
+    spin: t
+  });
+  return /* @__PURE__ */ p(
+    n.span,
+    {
+      role: "img",
+      className: e(
+        c,
+        I.Icon,
+        f,
+        `fa-${i}`,
+        s && "fa-fw",
+        r
+      ),
+      "aria-hidden": !o && "true",
+      "aria-label": o,
+      ...l
+    }
+  );
+};
 export {
-  M as IressIcon
+  g as IressIcon
 };