@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Slideout/Slideout.js

@@ -1,7 +1,7 @@
 import { jsx as _ } from "react/jsx-runtime";
 import { c as z } from "../../cx-DN21T1EH.js";
 import { useState as V, useRef as ee, useEffect as b, useMemo as A, useCallback as te } from "react";
-import { u as ne, b as oe, c as re, d as se, e as le, g as ie } from "../../floating-ui.react-BetVZ099.js";
+import { u as ne, b as oe, c as se, d as re, e as le, g as ie } from "../../floating-ui.react-B0nDXRN6.js";
 import { idsLogger as ue } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as ae } from "../../helpers/utility/propagateTestid.js";
 import { SlideoutInner as fe } from "./components/SlideoutInner.js";
@@ -9,15 +9,15 @@ import { slideout as ce } from "./Slideout.styles.js";
 import { useIdIfNeeded as de } from "../../hooks/useIdIfNeeded.js";
 import { IressText as he } from "../Text/Text.js";
 import { usePushElement as pe } from "./hooks/usePushElement.js";
-import { s as me } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as me } from "../../is-valid-prop-C5D641yn.js";
 import { GlobalCSSClass as O } from "../../enums.js";
 import { useProviderSlideout as ge } from "./hooks/useProviderSlideout.js";
 import { getTransitionDuration as ye } from "../../helpers/transition/getTransitionDuration.js";
 function Se(o) {
   function l() {
-    r && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(r));
+    s && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(s));
   }
-  var e = [], t, r, i, n = [0], s = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, m = [
+  var e = [], t, s, i, n = [0], r = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, m = [
     /\s+|\/\*|["'>~+[(]/g,
     // general
     /\s+|\/\*|["'[\]()]/g,
@@ -30,10 +30,10 @@ function Se(o) {
     // comment
   ];
   for (o = o.trim(); ; )
-    if (r = "", i = m[n[n.length - 1]], i.lastIndex = s, t = i.exec(o), t)
-      if (a = s, s = i.lastIndex, a < s - t[0].length && (r = o.substring(
+    if (s = "", i = m[n[n.length - 1]], i.lastIndex = r, t = i.exec(o), t)
+      if (a = r, r = i.lastIndex, a < r - t[0].length && (s = o.substring(
         a,
-        s - t[0].length
+        r - t[0].length
       )), n[n.length - 1] < 3) {
         if (l(), t[0] === "[")
           n.push(1);
@@ -49,9 +49,9 @@ function Se(o) {
           continue;
         e.push(t[0]);
       } else
-        e[e.length - 1] += r, u.test(e[e.length - 1]) && (n[n.length - 1] === 4 && (e.length < 2 || d.test(e[e.length - 2]) ? e.pop() : e[e.length - 1] = " ", t[0] = ""), n.pop()), e[e.length - 1] += t[0];
+        e[e.length - 1] += s, u.test(e[e.length - 1]) && (n[n.length - 1] === 4 && (e.length < 2 || d.test(e[e.length - 2]) ? e.pop() : e[e.length - 1] = " ", t[0] = ""), n.pop()), e[e.length - 1] += t[0];
     else {
-      r = o.substr(s), l();
+      s = o.substr(r), l();
       break;
     }
   return e.join("").trim();
@@ -61,37 +61,37 @@ function Ee(o, l = document, e = null) {
 }
 function be(o, l, e, t = null) {
   o = Se(o);
-  let r = e.querySelector(o);
-  return document.head.createShadowRoot || document.head.attachShadow ? r || C(o, ",").reduce((n, s) => {
+  let s = e.querySelector(o);
+  return document.head.createShadowRoot || document.head.attachShadow ? s || C(o, ",").reduce((n, r) => {
     if (n)
       return n;
-    const a = C(s.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => C(g, ">")), u = a.length - 1, d = a[u][a[u].length - 1], m = Ne(d, e, t), w = we(a, u, e);
+    const a = C(r.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => C(g, ">")), u = a.length - 1, d = a[u][a[u].length - 1], m = Ne(d, e, t), w = we(a, u, e);
     return n = m.find(w), n || null;
-  }, null) : r;
+  }, null) : s;
 }
 function we(o, l, e) {
   return (t) => {
-    let r = l, i = t, n = !1;
+    let s = l, i = t, n = !1;
     for (; i && !Ie(i); ) {
-      let s = !0;
-      if (o[r].length === 1)
-        s = i.matches(o[r]);
+      let r = !0;
+      if (o[s].length === 1)
+        r = i.matches(o[s]);
       else {
-        const a = [].concat(o[r]).reverse();
+        const a = [].concat(o[s]).reverse();
         let u = i;
         for (const d of a) {
           if (!u || !u.matches(d)) {
-            s = !1;
+            r = !1;
             break;
           }
           u = T(u, e);
         }
       }
-      if (s && r === 0) {
+      if (r && s === 0) {
         n = !0;
         break;
       }
-      s && r--, i = T(i, e);
+      r && s--, i = T(i, e);
     }
     return n;
   };
@@ -111,25 +111,25 @@ function Ne(o = null, l, e = null) {
   if (e)
     t = e;
   else {
-    const r = function(i) {
+    const s = function(i) {
       for (let n = 0; n < i.length; n++) {
-        const s = i[n];
-        t.push(s), s.shadowRoot && r(s.shadowRoot.querySelectorAll("*"));
+        const r = i[n];
+        t.push(r), r.shadowRoot && s(r.shadowRoot.querySelectorAll("*"));
       }
     };
-    l.shadowRoot && r(l.shadowRoot.querySelectorAll("*")), r(l.querySelectorAll("*"));
+    l.shadowRoot && s(l.shadowRoot.querySelectorAll("*")), s(l.querySelectorAll("*"));
   }
-  return o ? t.filter((r) => r.matches(o)) : t;
+  return o ? t.filter((s) => s.matches(o)) : t;
 }
-const Ue = ({
+const xe = ({
   children: o,
   className: l,
   closeText: e = "Close",
   container: t,
-  "data-testid": r,
+  "data-testid": s,
   defaultShow: i = !1,
   eleToPush: n,
-  footer: s,
+  footer: r,
   heading: a,
   mode: u = "overlay",
   onEntered: d,
@@ -153,7 +153,7 @@ const Ue = ({
   }), j = oe(h, {
     enabled: !0,
     outsidePress: !1
-  }), G = re(h), H = se([j, G]);
+  }), G = se(h), H = re([j, G]);
   h.refs.floating.current && (M = ye(
     h.refs.floating.current,
     1.2,
@@ -204,11 +204,11 @@ const Ue = ({
     he,
     {
       id: v,
-      "data-testid": ae(r, "heading"),
+      "data-testid": ae(s, "heading"),
       element: "h2",
       children: a
     }
-  ) : a, [r, v, a]);
+  ) : a, [s, v, a]);
   if (!B) return null;
   const W = z(
     L.root,
@@ -220,8 +220,8 @@ const Ue = ({
     children: o,
     className: W,
     closeText: e,
-    "data-testid": r,
-    footer: s,
+    "data-testid": s,
+    footer: r,
     floatingRef: (f) => h.refs.setFloating(f),
     heading: $,
     id: R,
@@ -230,15 +230,16 @@ const Ue = ({
     ...H.getFloatingProps(Y),
     onTransitionEnd: K
   };
-  return /* @__PURE__ */ _(ie, { root: t, children: /* @__PURE__ */ _(
+  return /* @__PURE__ */ _(ie, { root: t ?? E?.container, children: /* @__PURE__ */ _(
     fe,
     {
       ...Z,
       style: P,
-      "data-testid": r
+      "data-testid": s
     }
   ) });
 };
+xe.displayName = "IressSlideout";
 export {
-  Ue as IressSlideout
+  xe as IressSlideout
 };

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

@@ -0,0 +1,64 @@
+export declare const slideout: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "content" | "root" | "closeButton", {
+    position: {
+        right: {
+            root: {
+                insetInlineEnd: "spacing.0";
+                borderRadius: "radius.system.layout";
+                borderStartEndRadius: "radius.0";
+                borderEndEndRadius: "radius.0";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+        left: {
+            root: {
+                insetInlineStart: "spacing.0";
+                borderRadius: "radius.system.layout";
+                borderStartStartRadius: "radius.0";
+                borderEndStartRadius: "radius.0";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                width: "overlay.sm";
+            };
+        };
+        md: {
+            root: {
+                width: "overlay.md";
+            };
+        };
+    };
+    status: {
+        initial: {
+            root: {};
+        };
+        open: {
+            root: {};
+        };
+        close: {
+            root: {};
+        };
+        unmounted: {
+            root: {
+                display: "none";
+            };
+        };
+    };
+    mode: {
+        overlay: {};
+        push: {
+            root: {
+                xl: {
+                    borderRadius: "radius.0";
+                };
+            };
+        };
+    };
+}>;

package/dist/components/Slideout/Slideout.styles.js

@@ -1,8 +1,10 @@
-import { s as t } from "../../sva-OmxClA9g.js";
-const i = t({
+import { s as o } from "../../sva-CsHRIRDW.js";
+const s = o({
   slots: ["root", "content", "footer", "closeButton"],
   base: {
     root: {
+      // Performance: CSS containment (no paint due to fixed positioning)
+      contain: "style",
       textStyle: "typography.body.md",
       position: "fixed",
       insetBlockStart: "spacing.0",
@@ -10,7 +12,7 @@ const i = t({
       maxWidth: "[100%]",
       overflowY: "auto",
       transition: "[all 0.3s ease-out]",
-      layerStyle: "elevation.floating",
+      layerStyle: "floating",
       backgroundColor: "colour.neutral.10",
       zIndex: "300",
       display: "flex",
@@ -24,7 +26,8 @@ const i = t({
     },
     content: {
       overflow: "auto",
-      flex: "[1 1 auto]"
+      flex: "[1 1 auto]",
+      scrollable: "y"
     },
     footer: {
       borderBlockStart: "divider"
@@ -40,10 +43,9 @@ const i = t({
       right: {
         root: {
           insetInlineEnd: "spacing.0",
-          borderStartStartRadius: "radius.050",
-          borderEndStartRadius: "radius.050",
-          borderStartEndRadius: "radius.000",
-          borderEndEndRadius: "radius.000",
+          borderRadius: "radius.system.layout",
+          borderStartEndRadius: "radius.0",
+          borderEndEndRadius: "radius.0",
           _motionReduce: {
             transition: "[none]"
           }
@@ -52,10 +54,9 @@ const i = t({
       left: {
         root: {
           insetInlineStart: "spacing.0",
-          borderStartStartRadius: "radius.000",
-          borderEndStartRadius: "radius.000",
-          borderStartEndRadius: "radius.050",
-          borderEndEndRadius: "radius.050",
+          borderRadius: "radius.system.layout",
+          borderStartStartRadius: "radius.0",
+          borderEndStartRadius: "radius.0",
           _motionReduce: {
             transition: "[none]"
           }
@@ -95,7 +96,7 @@ const i = t({
       push: {
         root: {
           xl: {
-            borderRadius: "radius.000"
+            borderRadius: "radius.0"
           }
         }
       }
@@ -165,5 +166,5 @@ const i = t({
   }
 });
 export {
-  i as slideout
+  s as slideout
 };

package/dist/components/Slideout/SlideoutProvider.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressSlideoutProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export declare const IressSlideoutProvider: {
+    ({ children, container, }: IressSlideoutProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Slideout/SlideoutProvider.js

@@ -1,17 +1,17 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as p, useCallback as u, useMemo as a } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { useState as a, useCallback as u, useMemo as f } from "react";
 import { SlideoutContext as S } from "./hooks/useSlideout.js";
-const P = ({
-  children: i,
-  container: n
+const v = ({
+  children: d,
+  container: l
 }) => {
-  const [t, l] = p([]), s = u((e) => {
-    l([e]);
+  const [t, n] = a([]), s = u((e) => {
+    n([e]);
   }, []), r = u((e) => {
-    l(
+    n(
       (o) => o.includes(e) ? o.filter((m) => m !== e) : [...o]
     );
-  }, []), c = u(
+  }, []), i = u(
     (e, o) => {
       if (o !== void 0) {
         if (o)
@@ -22,16 +22,17 @@ const P = ({
       t.includes(e) ? r(e) : s(e);
     },
     [r, s, t]
-  ), d = a(
+  ), c = f(
     () => ({
-      container: n,
+      container: l,
       opened: t,
-      showSlideout: c
+      showSlideout: i
     }),
-    [n, t, c]
+    [l, t, i]
   );
-  return /* @__PURE__ */ f(S.Provider, { value: d, children: i });
+  return /* @__PURE__ */ p(S.Provider, { value: c, children: d });
 };
+v.displayName = "IressSlideoutProvider";
 export {
-  P as IressSlideoutProvider
+  v as IressSlideoutProvider
 };

package/dist/components/Slideout/components/SlideoutInner.d.ts

@@ -0,0 +1,13 @@
+import { IressStyledProps } from '../../../types';
+import { ReactNode } from 'react';
+export interface SlideoutInnerProps extends IressStyledProps {
+    closeText?: string;
+    floatingRef?: (node: HTMLElement | null) => void;
+    footer?: ReactNode;
+    heading?: ReactNode;
+    onOpenChange: (show: boolean) => void;
+}
+export declare const SlideoutInner: {
+    ({ children, closeText, "data-testid": dataTestid, floatingRef, footer, heading, onOpenChange, className, ...restProps }: SlideoutInnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Slideout/components/SlideoutInner.js

@@ -1,45 +1,45 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-mmhMLwp9.js";
+import "../../../Button-C0p8bEXn.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
-import { s as f } from "../../../factory-oPXoMw9H.js";
-import { s as B } from "../../../is-valid-prop-Ce0wiweq.js";
+import { s as f } from "../../../factory-CcYfm2kB.js";
+import { s as B } from "../../../is-valid-prop-C5D641yn.js";
 import { IressText as _ } from "../../Text/Text.js";
-const F = ({
+const g = ({
   children: u,
   closeText: x,
   "data-testid": t,
   floatingRef: y,
   footer: e,
-  heading: P,
-  onOpenChange: b,
-  className: h,
-  ...C
+  heading: I,
+  onOpenChange: N,
+  className: P,
+  ...S
 }) => {
-  const s = v(), [I, N] = B(C), {
+  const s = v(), [b, h] = B(S), {
     p: r = "md",
-    pt: p,
-    pl: n,
+    pt: n,
+    pl: p,
     pr: i,
     pb: l,
     px: m,
     py: a,
-    ...S
-  } = I;
+    ...C
+  } = b;
   return /* @__PURE__ */ c(
     f.div,
     {
       ref: y,
       "data-testid": t,
-      className: h,
-      ...N,
-      ...S,
+      className: P,
+      ...h,
+      ...C,
       children: [
         /* @__PURE__ */ d(
           j,
           {
-            onClick: () => b(!1),
+            onClick: () => N(!1),
             screenreaderText: x,
             className: s.closeButton,
             "data-testid": o(t, "close-button__button")
@@ -52,13 +52,13 @@ const F = ({
             p: r,
             px: m,
             py: a,
-            pt: p,
-            pl: n,
+            pt: n,
+            pl: p,
             pr: i,
             pb: l,
             "data-testid": o(t, "content"),
             children: [
-              P,
+              I,
               u
             ]
           }
@@ -70,8 +70,8 @@ const F = ({
             p: r,
             px: m,
             py: a,
-            pt: p,
-            pl: n,
+            pt: n,
+            pl: p,
             pr: i,
             pb: l,
             "data-testid": o(t, "footer"),
@@ -82,6 +82,7 @@ const F = ({
     }
   );
 };
+g.displayName = "SlideoutInner";
 export {
-  F as SlideoutInner
+  g as SlideoutInner
 };

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-CZ9ot38T.js";
+import { t as p } from "../../../index-BPhnth66.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/Slider/Slider.js

@@ -8,8 +8,8 @@ import { useControlledState as A } from "../../hooks/useControlledState.js";
 import { useIdIfNeeded as D } from "../../hooks/useIdIfNeeded.js";
 import { IressReadonly as G } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { s as W } from "../../factory-oPXoMw9H.js";
-import { s as q } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as W } from "../../factory-CcYfm2kB.js";
+import { s as q } from "../../is-valid-prop-C5D641yn.js";
 import { GlobalCSSClass as z } from "../../enums.js";
 import { useNoDefaultValueInForms as B } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
 const E = (r = 0, i = 10, n = 1) => {
@@ -24,10 +24,10 @@ const E = (r = 0, i = 10, n = 1) => {
   hiddenValueTooltip: l,
   max: a = 10,
   min: s = 0,
-  onChange: g,
+  onChange: y,
   readOnly: m,
   step: b = 1,
-  style: y,
+  style: g,
   tickLabels: S,
   value: h,
   ...u
@@ -63,7 +63,7 @@ const E = (r = 0, i = 10, n = 1) => {
       }
     );
   const p = R(), [L, M] = q(u), V = {
-    ...y,
+    ...g,
     "--iress-thumb-value-offset": $()
   };
   return /* @__PURE__ */ x(
@@ -86,7 +86,7 @@ const E = (r = 0, i = 10, n = 1) => {
             value: t,
             type: "range",
             onChange: (e) => {
-              g?.(e, Number(e.target.value)), I(Number(e.target.value));
+              y?.(e, Number(e.target.value)), I(Number(e.target.value));
             },
             ref: C,
             list: `${v}--markers`,
@@ -106,7 +106,8 @@ const E = (r = 0, i = 10, n = 1) => {
       ]
     }
   );
-}, le = T(H);
+}, J = T(H);
+J.displayName = "IressSlider";
 export {
-  le as IressSlider
+  J as IressSlider
 };

package/dist/components/Slider/Slider.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-OmxClA9g.js";
+import { s as e } from "../../sva-CsHRIRDW.js";
 const i = e({
   slots: [
     "root",
@@ -10,6 +10,8 @@ const i = e({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       display: "flex",
       flexDirection: "column"
     },
@@ -17,19 +19,11 @@ const i = e({
       appearance: "none",
       background: "transparent",
       cursor: "pointer",
-      borderRadius: "radius.100",
+      borderRadius: "radius.4",
       height: "slider.thumb",
       margin: "spacing.0",
       width: "[100%]",
-      _focus: {
-        outline: "[none]"
-      },
-      _focusVisibleWebkitSliderThumb: {
-        layerStyle: "elevation.focus"
-      },
-      _focusVisibleMozRangeThumb: {
-        layerStyle: "elevation.focus"
-      },
+      focusable: "slider",
       _webkitSliderThumb: {
         appearance: "none",
         marginBlockStart: "[calc(({sizes.slider.track} / 2) - ({sizes.slider.thumb} / 2))]",
@@ -38,7 +32,7 @@ const i = e({
       _mozRangeThumb: {
         appearance: "none",
         border: "[none]",
-        borderRadius: "radius.000",
+        borderRadius: "radius.0",
         sliderThumb: !0
       },
       _webkitSliderRunnableTrack: {
@@ -84,7 +78,7 @@ const i = e({
         height: "slider.tick",
         width: "slider.tick",
         backgroundColor: "colour.neutral.10",
-        borderRadius: "radius.075",
+        borderRadius: "radius.3",
         content: '""',
         position: "absolute",
         top: "[calc(-1 * (({sizes.slider.thumb} - {sizes.slider.track}) / 2) - {sizes.slider.tick} - {spacing.slider.tick})]",