@iress-oss/ids-components 6.0.0-alpha.12 → 6.0.0-alpha.14

package/dist/components/Expander/Expander.styles.js

@@ -1,9 +1,19 @@
 import { s as e } from "../../sva-B7kca5XO.js";
-const o = e({
-  slots: ["root", "activator", "content", "container", "containerInner"],
+const r = e({
+  slots: [
+    "root",
+    "activator",
+    "chevron",
+    "content",
+    "container",
+    "containerInner"
+  ],
   base: {
     root: {
-      display: "block"
+      display: "block",
+      "&:has([aria-controls]:focus-visible)": {
+        layerStyle: "elevation.focusNoBorder"
+      }
     },
     activator: {
       display: "inline-block",
@@ -12,26 +22,17 @@ const o = e({
       width: "auto",
       bg: "transparent",
       cursor: "pointer",
-      tableChevron: !0,
       position: "relative",
-      _before: {
-        content: '""',
-        position: "absolute",
-        top: "[-1.5px]",
-        left: "[-1.5px]",
-        right: "[-1.5px]",
-        bottom: "[-1.5px]",
-        pointerEvents: "none",
-        zIndex: "[-1]",
-        borderRadius: "radius.system.badge"
-      },
       _focusVisible: {
-        outline: "[none]",
-        _before: {
-          layerStyle: "elevation.focus"
-        }
+        outline: "[none]"
       }
     },
+    chevron: {
+      width: "[1.5em]",
+      height: "[1.5em]",
+      color: "colour.neutral.90",
+      transition: "[all 0.3s ease-in-out]"
+    },
     container: {
       display: "grid",
       gridTemplateRows: "0fr",
@@ -47,21 +48,30 @@ const o = e({
   variants: {
     mode: {
       section: {
+        root: {
+          border: "table",
+          borderRadius: "radius.system.layout",
+          p: "spacing.4",
+          transition: "colors",
+          "&:has([aria-controls]:hover)": {
+            borderColor: "colour.primary.fill"
+          }
+        },
         activator: {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "flex-end",
           width: "[100%]",
-          textStyle: "typography.heading.4",
-          py: "spacing.3",
-          borderBottom: "divider",
-          transition: "[all 0.2s ease-in-out]",
-          _after: {
-            mr: "spacing.2"
-          },
+          textStyle: "typography.heading.3",
           _hover: {
-            color: "colour.primary.text",
-            borderBottom: "hover"
+            color: "colour.primary.text"
+          }
+        },
+        chevron: {
+          bg: "colour.neutral.30",
+          borderRadius: "50%",
+          _groupHover: {
+            bg: "colour.primary.surfaceHover"
           }
         }
       },
@@ -75,13 +85,16 @@ const o = e({
           _hover: {
             textDecoration: "none"
           }
+        },
+        chevron: {
+          display: "inline"
         }
       }
     },
     open: {
       true: {
-        activator: {
-          tableChevron: !1
+        chevron: {
+          transform: "rotate(180deg)"
         },
         container: {
           gridTemplateRows: "1fr"
@@ -95,5 +108,5 @@ const o = e({
   }
 });
 export {
-  o as expander
+  r as expander
 };

package/dist/components/Filter/Filter.js

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

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

@@ -1,5 +1,5 @@
 import { s as t } from "../../sva-B7kca5XO.js";
-const e = t({
+const n = t({
   slots: [
     "root",
     "chevron",
@@ -15,8 +15,10 @@ const e = t({
   base: {
     root: {},
     chevron: {
+      position: "relative",
       selectChevron: !0,
-      marginInlineStart: "spacing.2",
+      marginInlineStart: "spacing.4",
+      marginInlineEnd: "-spacing.2",
       _rtl: {
         selectChevronRtl: !0
       }
@@ -61,5 +63,5 @@ const e = t({
   compoundVariants: []
 });
 export {
-  e as filter
+  n as filter
 };

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

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { I as i } from "../../../Button-ZGbOkyOo.js";
+import { I as i } from "../../../Button-BTkololu.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { filter as p } from "../Filter.styles.js";
 import { usePopoverItem as f } from "../../Popover/hooks/usePopoverItem.js";

package/dist/components/Input/Input.js

@@ -13,7 +13,7 @@ import { input as Q } from "./Input.styles.js";
 import { s as W } from "../../factory-CsinCTPr.js";
 import { s as X } from "../../is-valid-prop-DweT-eOL.js";
 import { useNoDefaultValueInForms as Y } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import "../../Button-ZGbOkyOo.js";
+import "../../Button-BTkololu.js";
 import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
 const _ = ({ rows: a, ...f }, S) => {
   const {

package/dist/components/Link/Link.styles.js

@@ -14,7 +14,6 @@ const e = ["root", "content", "prepend", "append", "spinner"], n = o({
     },
     root: {
       alignItems: "baseline",
-      alignSelf: "flex-start",
       cursor: "pointer",
       display: "inline-flex",
       fontKerning: "none",

package/dist/components/Menu/MenuText/MenuText.js

@@ -66,7 +66,7 @@ l.displayName = "IressMenuText";
 const w = ({
   className: s,
   element: e = "h2",
-  textStyle: o = "typography.heading.4",
+  textStyle: o = "typography.heading.3",
   ...t
 }) => /* @__PURE__ */ r(
   l,

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { useState as Z, useEffect as w, useMemo as oo } from "react";
-import "../../Button-ZGbOkyOo.js";
+import "../../Button-BTkololu.js";
 import { IressCloseButton as eo } from "../Button/CloseButton/CloseButton.js";
 import { u as to, b as so, c as ro, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BlU6Nz_4.js";
 import { idsLogger as mo } from "../../helpers/utility/idsLogger.js";

package/dist/components/Modal/Modal.styles.d.ts

@@ -21,7 +21,7 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
             content: {
                 flex: "[1]";
                 overflowX: "hidden";
-                overflowY: "auto";
+                scrollable: "y";
                 maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
                 '@media (min-height: 600px)': {
                     maxHeight: "[calc(100vh - (100px * 2))]";

package/dist/components/Modal/Modal.styles.js

@@ -62,7 +62,7 @@ const o = [
         content: {
           flex: "[1]",
           overflowX: "hidden",
-          overflowY: "auto",
+          scrollable: "y",
           maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]",
           "@media (min-height: 600px)": {
             maxHeight: "[calc(100vh - (100px * 2))]"

package/dist/components/Progress/Progress.js

@@ -6,7 +6,7 @@ import { progress as S } from "./Progress.styles.js";
 import { s as n } from "../../factory-CsinCTPr.js";
 import { s as b } from "../../is-valid-prop-DweT-eOL.js";
 import { GlobalCSSClass as x } from "../../enums.js";
-import { t as C } from "../../index-gmMGso0u.js";
+import { t as C } from "../../index-Bm5rQqn5.js";
 const N = ({
   borderRadius: e,
   className: p,

package/dist/components/Provider/Provider.js

@@ -12,7 +12,7 @@ import "../Slideout/Slideout.styles.js";
 import "../Slideout/SlideoutProvider.js";
 import "../Slideout/hooks/useSlideout.js";
 import "react-dom";
-import { I as c } from "../../Provider-BPoPUE-B.js";
+import { I as c } from "../../Provider-B87u_maF.js";
 export {
   c as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-BPoPUE-B.js";
+import { I as o } from "../../Provider-B87u_maF.js";
 export {
   o as IressProvider
 };