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

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

@@ -0,0 +1,169 @@
+import { s as t } from "../../sva-OmxClA9g.js";
+const i = t({
+  slots: ["root", "content", "footer", "closeButton"],
+  base: {
+    root: {
+      textStyle: "typography.body.md",
+      position: "fixed",
+      insetBlockStart: "spacing.000",
+      height: "[100%]",
+      maxWidth: "[100%]",
+      overflowY: "auto",
+      transition: "[all 0.3s ease-out]",
+      layerStyle: "elevation.floating",
+      backgroundColor: "colour.neutral.10",
+      zIndex: "300",
+      display: "flex",
+      flexDirection: "column",
+      _motionReduce: {
+        transition: "[none]"
+      },
+      smDown: {
+        width: "[100%]"
+      }
+    },
+    content: {
+      overflow: "auto",
+      flex: "[1 1 auto]"
+    },
+    footer: {
+      borderBlockStart: "divider"
+    },
+    closeButton: {
+      position: "absolute",
+      insetInlineEnd: "spacing.050",
+      insetBlockStart: "spacing.050"
+    }
+  },
+  variants: {
+    position: {
+      right: {
+        root: {
+          insetInlineEnd: "spacing.000",
+          borderStartStartRadius: "radius.050",
+          borderEndStartRadius: "radius.050",
+          borderStartEndRadius: "radius.000",
+          borderEndEndRadius: "radius.000",
+          _motionReduce: {
+            transition: "[none]"
+          }
+        }
+      },
+      left: {
+        root: {
+          insetInlineStart: "spacing.000",
+          borderStartStartRadius: "radius.000",
+          borderEndStartRadius: "radius.000",
+          borderStartEndRadius: "radius.050",
+          borderEndEndRadius: "radius.050",
+          _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.000"
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: "right",
+      size: "sm",
+      css: {
+        root: {
+          insetInlineEnd: "[calc({sizes.overlay.sm} * -1)]"
+        }
+      }
+    },
+    {
+      position: "right",
+      size: "md",
+      css: {
+        root: {
+          insetInlineEnd: "[calc({sizes.overlay.md} * -1)]"
+        }
+      }
+    },
+    {
+      position: "left",
+      size: "sm",
+      css: {
+        root: {
+          insetInlineStart: "[calc({sizes.overlay.sm} * -1)]"
+        }
+      }
+    },
+    {
+      position: "left",
+      size: "md",
+      css: {
+        root: {
+          insetInlineStart: "[calc({sizes.overlay.md} * -1)]"
+        }
+      }
+    },
+    {
+      status: "open",
+      position: "right",
+      css: {
+        root: {
+          insetInlineEnd: "spacing.000"
+        }
+      }
+    },
+    {
+      status: "open",
+      position: "left",
+      css: {
+        root: {
+          insetInlineStart: "spacing.000"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    position: "right",
+    size: "sm",
+    status: "initial",
+    mode: "overlay"
+  }
+});
+export {
+  i as slideout
+};

package/dist/components/Slideout/SlideoutProvider.js

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

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

@@ -1,8 +1,87 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import "../../../helpers/utility/propagateTestid.js";
-import { a8 as e } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../PopoverProvider-DZ92QV8I.js";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
+import "../../../Button-D6AL0bia.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 { IressText as _ } from "../../Text/Text.js";
+const F = ({
+  children: u,
+  closeText: x,
+  "data-testid": t,
+  floatingRef: y,
+  footer: e,
+  heading: P,
+  onOpenChange: b,
+  className: h,
+  ...C
+}) => {
+  const s = v(), [I, N] = B(C), {
+    p: r = "md",
+    pt: p,
+    pl: n,
+    pr: i,
+    pb: l,
+    px: m,
+    py: a,
+    ...S
+  } = I;
+  return /* @__PURE__ */ c(
+    f.div,
+    {
+      ref: y,
+      "data-testid": t,
+      className: h,
+      ...N,
+      ...S,
+      children: [
+        /* @__PURE__ */ d(
+          j,
+          {
+            onClick: () => b(!1),
+            screenreaderText: x,
+            className: s.closeButton,
+            "data-testid": o(t, "close-button__button")
+          }
+        ),
+        /* @__PURE__ */ c(
+          _,
+          {
+            className: s.content,
+            p: r,
+            px: m,
+            py: a,
+            pt: p,
+            pl: n,
+            pr: i,
+            pb: l,
+            "data-testid": o(t, "content"),
+            children: [
+              P,
+              u
+            ]
+          }
+        ),
+        e && /* @__PURE__ */ d(
+          f.div,
+          {
+            className: s.footer,
+            p: r,
+            px: m,
+            py: a,
+            pt: p,
+            pl: n,
+            pr: i,
+            pb: l,
+            "data-testid": o(t, "footer"),
+            children: e
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  e as SlideoutInner
+  F as SlideoutInner
 };

package/dist/components/Slideout/hooks/{useIDSProvidedSlideout.js → useProviderSlideout.js}

@@ -1,13 +1,13 @@
 import { useContext as n } from "react";
-import { I as r } from "../../../SlideoutProvider-CQh140HM.js";
-function u(o) {
+import { SlideoutContext as r } from "./useSlideout.js";
+function p(o) {
   const e = n(r);
   return {
-    container: e?.container,
     opened: o && e?.opened.includes(o),
+    container: e?.container,
     show: (t) => o && e?.showSlideout(o, t)
   };
 }
 export {
-  u as useIDSProvidedSlideout
+  p as useProviderSlideout
 };

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

@@ -0,0 +1,50 @@
+import { useRef as m, useEffect as y } from "react";
+import { GlobalCSSClass as e } from "../../../enums.js";
+import { t as p } from "../../../index-CvOVcYUc.js";
+import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
+function h({
+  element: r,
+  isActive: l,
+  position: n,
+  size: u,
+  status: o,
+  onOpen: f,
+  onClose: a
+}) {
+  const t = m(null), { breakpoint: d } = S();
+  y(() => {
+    if (!r) return;
+    if (!t.current) {
+      const s = n === "left" ? "marginInlineStart" : "marginInlineEnd";
+      t.current = {
+        classNames: [...r.classList],
+        style: {
+          [s]: r.style[s],
+          transition: r.style.transition
+        }
+      };
+    }
+    const i = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    return r.classList.add(e.SlideoutPushElement), r.style.transition = i ? "none" : "all 0.3s ease-out", () => {
+      if (r && t.current && (r.className = t.current.classNames.join(" "), t.current.style))
+        for (const s in t.current.style) {
+          const c = s;
+          r.style.setProperty(
+            s,
+            String(t.current.style[c] ?? "")
+          );
+        }
+    };
+  }, [r, n]), y(() => {
+    if (!r || !l) return;
+    const i = n === "left" ? "marginInlineStart" : "marginInlineEnd", s = u === "md" ? "sizes.overlay.md" : "sizes.overlay.sm", c = ["xl", "xxl"];
+    return o === "open" ? (f?.(), r.classList.add(e.SlideoutOpen), c.includes(d) ? r.style[i] = p.var(s).replace(")", `, ${p(s)})`) : r.style[i] = "initial") : o === "close" && (a?.(), r.classList.remove(e.SlideoutOpen), r.style[i] = "initial"), () => {
+      r && o === "unmounted" && a?.();
+    };
+  }, [r, l, n, u, o, f, a, d]);
+}
+export {
+  h as usePushElement
+};

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

@@ -1,20 +1,22 @@
-import { useContext as r, useMemo as s } from "react";
-import { I as i } from "../../../SlideoutProvider-CQh140HM.js";
-const n = () => {
-  const o = r(i);
-  return s(
+import { createContext as r, useContext as s, useMemo as u } from "react";
+const i = r(
+  void 0
+), n = () => {
+  const e = s(i);
+  if (!e)
+    throw new Error(
+      "IressSlideout: showSlideout must be used within a IressSlideoutProvider"
+    );
+  return u(
     () => ({
-      showSlideout: (e, t = !0) => {
-        if (o === void 0)
-          throw new Error(
-            "IressSlideout: showSlideout must be used within a IressSlideoutProvider"
-          );
-        o.showSlideout(e, t);
+      showSlideout: (t, o = !0) => {
+        e.showSlideout(t, o);
       }
     }),
-    [o]
+    [e]
   );
 };
 export {
+  i as SlideoutContext,
   n as useSlideout
 };

package/dist/components/Slideout/index.js

@@ -1,16 +1,11 @@
-import { SLIDEOUT_MODES as S, SLIDEOUT_POSITIONS as t, SLIDEOUT_SIZES as r, SlideoutMode as i, SlideoutPosition as s, SlideoutSize as I } from "./Slideout.types.js";
-import { F as u } from "../../LoadingSuspense-BtzikVZk.js";
-import { I as O, a as x } from "../../SlideoutProvider-CQh140HM.js";
-import { useSlideout as a } from "./hooks/useSlideout.js";
+import { IressSlideout as r } from "./Slideout.js";
+import { slideout as d } from "./Slideout.styles.js";
+import { IressSlideoutProvider as s } from "./SlideoutProvider.js";
+import { SlideoutContext as l, useSlideout as x } from "./hooks/useSlideout.js";
 export {
-  u as IressSlideout,
-  O as IressSlideoutContext,
-  x as IressSlideoutProvider,
-  S as SLIDEOUT_MODES,
-  t as SLIDEOUT_POSITIONS,
-  r as SLIDEOUT_SIZES,
-  i as SlideoutMode,
-  s as SlideoutPosition,
-  I as SlideoutSize,
-  a as useSlideout
+  r as IressSlideout,
+  s as IressSlideoutProvider,
+  l as SlideoutContext,
+  d as slideout,
+  x as useSlideout
 };

package/dist/components/Slider/Slider.js

@@ -1,12 +1,112 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "../../SliderTicks-jPoPzYf3.js";
-import "react";
-import "../../helpers/utility/propagateTestid.js";
-import "../../hooks/useControlledState.js";
-import "../../hooks/useIdIfNeeded.js";
-import { G as f } from "../../LoadingSuspense-BtzikVZk.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
+import { jsx as c, jsxs as x } from "react/jsx-runtime";
+import { c as F } from "../../cx-DN21T1EH.js";
+import { slider as R } from "./Slider.styles.js";
+import { forwardRef as T, useCallback as N } from "react";
+import { propagateTestid as f } from "../../helpers/utility/propagateTestid.js";
+import { SliderTicks as w } from "./components/SliderTicks.js";
+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 { GlobalCSSClass as z } from "../../enums.js";
+import { useNoDefaultValueInForms as B } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const E = (r = 0, i = 10, n = 1) => {
+  const o = [];
+  for (let l = r; l <= i; l += n) o.push(l);
+  return o;
+}, H = ({
+  "data-testid": r,
+  defaultValue: i,
+  className: n,
+  formatValue: o,
+  hiddenValueTooltip: l,
+  max: a = 10,
+  min: s = 0,
+  onChange: g,
+  readOnly: m,
+  step: b = 1,
+  style: y,
+  tickLabels: S,
+  value: h,
+  ...u
+}, C) => {
+  B({
+    component: "IressSelect",
+    defaultValue: i
+  });
+  const v = D({ id: u?.id }), d = (typeof S == "boolean" ? E(s, a, b) : S ?? []).map(
+    (e) => typeof e == "number" ? { value: e } : e
+  ), { value: t, setValue: I } = A({
+    component: "IressSlider",
+    defaultValue: h ? void 0 : i ?? s,
+    value: h
+  }), k = N(() => {
+    const e = d?.find((j) => j.value === t);
+    return o ? o(t ?? 0, e, m) : e?.label ?? t;
+  }, [d, o, t, m]), $ = N(() => {
+    const e = Math.min(
+      Number(((t ?? 0) - s) * 100 / (a - s)),
+      100
+    );
+    return `calc(${e}% + ((1.75rem / 2) - ${e * 0.285}px))`;
+  }, [a, s, t]);
+  if (m)
+    return /* @__PURE__ */ c(
+      G,
+      {
+        "data-testid": f(r, "slider"),
+        name: u?.name,
+        value: t,
+        children: k()
+      }
+    );
+  const p = R(), [L, M] = q(u), V = {
+    ...y,
+    "--iress-thumb-value-offset": $()
+  };
+  return /* @__PURE__ */ x(
+    W.div,
+    {
+      ...L,
+      className: F(n, p.root, z.Slider),
+      style: V,
+      "data-testid": r,
+      children: [
+        !l && /* @__PURE__ */ c("output", { className: p.thumbValue, children: k() }),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            className: p.control,
+            max: a,
+            min: s,
+            step: b,
+            ...M,
+            value: t,
+            type: "range",
+            onChange: (e) => {
+              g?.(e, Number(e.target.value)), I(Number(e.target.value));
+            },
+            ref: C,
+            list: `${v}--markers`,
+            "data-testid": f(r, "slider")
+          }
+        ),
+        /* @__PURE__ */ c(
+          w,
+          {
+            tickLabels: d,
+            id: `${v}--markers`,
+            max: a,
+            min: s,
+            "data-testid": f(r, "datalist")
+          }
+        )
+      ]
+    }
+  );
+}, le = T(H);
 export {
-  f as IressSlider
+  le as IressSlider
 };

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

@@ -0,0 +1,110 @@
+import { s as e } from "../../sva-OmxClA9g.js";
+const i = e({
+  slots: [
+    "root",
+    "thumbValue",
+    "control",
+    "tickMarkList",
+    "tickMark",
+    "tickMarkLabel"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    control: {
+      appearance: "none",
+      background: "transparent",
+      cursor: "pointer",
+      borderRadius: "radius.100",
+      height: "slider.thumb",
+      margin: "spacing.000",
+      width: "[100%]",
+      _focus: {
+        outline: "[none]"
+      },
+      _focusVisibleWebkitSliderThumb: {
+        layerStyle: "elevation.focus"
+      },
+      _focusVisibleMozRangeThumb: {
+        layerStyle: "elevation.focus"
+      },
+      _webkitSliderThumb: {
+        appearance: "none",
+        marginBlockStart: "[calc(({sizes.slider.track} / 2) - ({sizes.slider.thumb} / 2))]",
+        sliderThumb: !0
+      },
+      _mozRangeThumb: {
+        appearance: "none",
+        border: "[none]",
+        borderRadius: "radius.000",
+        sliderThumb: !0
+      },
+      _webkitSliderRunnableTrack: {
+        background: "colour.neutral.50",
+        height: "slider.track",
+        borderRadius: "[{sizes.slider.track}]"
+      },
+      _mozRangeTrack: {
+        background: "colour.neutral.50",
+        height: "slider.track",
+        borderRadius: "[{sizes.slider.track}]"
+      }
+    },
+    tickMarkList: {
+      display: "flex",
+      flexWrap: "nowrap",
+      paddingInline: "[calc({sizes.slider.thumb} / 2)]",
+      lineHeight: 1,
+      "& option": {
+        minHeight: "[0]",
+        padding: "spacing.000"
+      }
+    },
+    tickMark: {
+      textStyle: "typography.body.sm",
+      flex: "[0 0 0]",
+      marginInlineStart: "var(--iress-tick-label-width)",
+      width: "[0]",
+      padding: "spacing.000",
+      _selected: {
+        _before: {
+          backgroundColor: "colour.primary.fill"
+        }
+      }
+    },
+    tickMarkLabel: {
+      display: "inline-block",
+      position: "relative",
+      transform: "translate(-50%, 0)",
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      _before: {
+        height: "slider.tick",
+        width: "slider.tick",
+        backgroundColor: "colour.neutral.10",
+        borderRadius: "radius.075",
+        content: '""',
+        position: "absolute",
+        top: "[calc(-1 * (({sizes.slider.thumb} - {sizes.slider.track}) / 2) - {sizes.slider.tick} - {spacing.slider.tick})]",
+        left: "[50%]",
+        transform: "translate(-50%, 0)"
+      }
+    },
+    thumbValue: {
+      textStyle: "typography.body.sm",
+      display: "inline-block",
+      marginInlineStart: "var(--iress-thumb-value-offset, 0)",
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      minWidth: "slider.thumb",
+      transform: "translate(-50%, 0)"
+    }
+  },
+  variants: {},
+  defaultVariants: {}
+});
+export {
+  i as slider
+};