@iress-oss/ids-components 5.17.0 → 6.0.0-alpha.0

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

@@ -0,0 +1,169 @@
+import { s as t } from "../../sva-TRyehFkb.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,39 @@
-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 { createContext as m, useState as p, useCallback as r, useMemo as x } from "react";
+const S = m(
+  void 0
+), P = ({
+  children: i,
+  container: u
+}) => {
+  const [t, c] = p([]), s = r((e) => {
+    c([e]);
+  }, []), n = r((e) => {
+    c(
+      (o) => o.includes(e) ? o.filter((a) => a !== e) : [...o]
+    );
+  }, []), l = r(
+    (e, o) => {
+      if (o !== void 0) {
+        if (o)
+          return s(e);
+        n(e);
+        return;
+      }
+      t.includes(e) ? n(e) : s(e);
+    },
+    [n, s, t]
+  ), d = x(
+    () => ({
+      container: u,
+      opened: t,
+      showSlideout: l
+    }),
+    [u, t, l]
+  );
+  return /* @__PURE__ */ f(S.Provider, { value: d, children: i });
+};
 export {
-  s as IressSlideoutContext,
-  m as IressSlideoutProvider
+  P as IressSlideoutProvider,
+  S as SlideoutContext
 };

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

@@ -1,8 +1,87 @@
-import "react/jsx-runtime";
-import "../../../index-2QXL0WYc.js";
-import "../../../helpers/utility/propagateTestid.js";
-import { a8 as e } from "../../../LoadingSuspense-BjzbePWa.js";
-import "../../../PopoverProvider-BqnPfQtY.js";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
+import "../../../Button-BXzmntRi.js";
+import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
+import { slideout as v } from "../Slideout.styles.js";
+import { s as f } from "../../../factory-DHLOr79I.js";
+import { s as B } from "../../../is-valid-prop-DFFvE05x.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/useProviderSlideout.js

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

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

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

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

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

package/dist/components/Slideout/index.js

@@ -1,16 +1,10 @@
-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-BjzbePWa.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 s } from "./Slideout.styles.js";
+import { IressSlideoutProvider as i } from "./SlideoutProvider.js";
+import { useSlideout as f } 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,
+  i as IressSlideoutProvider,
+  s as slideout,
+  f as useSlideout
 };

package/dist/components/Slider/Slider.js

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

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

@@ -0,0 +1,110 @@
+import { s as e } from "../../sva-TRyehFkb.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
+};