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

package/dist/components/Select/components/SelectControl.js

@@ -1,9 +1,41 @@
-import "react/jsx-runtime";
-import "../../../index-cbHCAGLB.js";
-import { S as l } from "../../../SelectControl-B5BG5_Pl.js";
-import "react";
-import "../../../enums.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { GlobalCSSClass as t } from "../../../enums.js";
+import { getFormControlValueAsStringIfDefined as m } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { select as n } from "../Select.styles.js";
+import { c as x } from "../../../css-fGu_jDvv.js";
+import { c as l } from "../../../cx-DN21T1EH.js";
+import "../../Input/Input.js";
+import { input as v } from "../../Input/Input.styles.js";
+const w = ({
+  children: s,
+  className: a,
+  defaultValue: c,
+  placeholder: o,
+  value: i,
+  width: r,
+  ...f
+}, p) => {
+  const u = n({ width: r }), C = n.raw({ width: r });
+  return /* @__PURE__ */ e("div", { className: l(u.control, t.FormElementInner), children: /* @__PURE__ */ d(
+    "select",
+    {
+      ...f,
+      className: l(
+        x(C.element, v.raw().formControl),
+        a,
+        t.FormElementInner
+      ),
+      defaultValue: m(c),
+      ref: p,
+      value: m(i),
+      children: [
+        o && /* @__PURE__ */ e("option", { value: "", children: o }),
+        s
+      ]
+    }
+  ) });
+}, h = S(w);
 export {
-  l as SelectControl
+  h as SelectControl
 };

package/dist/components/Select/components/SelectReadonly.js

@@ -1,40 +1,39 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../helpers/utility/propagateTestid.js";
-import { ab as K } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-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 "../../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 f } from "react/jsx-runtime";
+import { forwardRef as l, useMemo as c } from "react";
+import { propagateTestid as u } from "../../../helpers/utility/propagateTestid.js";
+import { mapNodesToSelectOptions as R } from "../helpers/nodesToSelectOptions.js";
+import { IressReadonly as S } from "../../Readonly/Readonly.js";
+import "../../Readonly/Readonly.styles.js";
+const b = ({
+  children: t,
+  className: e,
+  "data-testid": r,
+  name: m,
+  required: p,
+  width: s,
+  value: o,
+  ...i
+}, n) => {
+  const a = c(() => String(
+    R(t).find(
+      (d) => d.value === o
+    )?.label ?? ""
+  ), [t, o]);
+  return /* @__PURE__ */ f(
+    S,
+    {
+      ...i,
+      className: e,
+      "data-testid": u(r, "pseudo"),
+      name: m,
+      ref: n,
+      required: p,
+      width: s,
+      value: o,
+      children: a
+    }
+  );
+}, C = l(b);
 export {
-  K as SelectReadonly
+  C as SelectReadonly
 };

package/dist/components/Select/helpers/nodesToSelectOptions.js

@@ -1,9 +1,41 @@
-import "../../../helpers/formatting/toArray.js";
-import "../../../helpers/form/getFormControlValueAsString.js";
-import { aa as e, a9 as m } from "../../../LoadingSuspense-BtzikVZk.js";
-import "../SelectOption/SelectOption.js";
-import "react/jsx-runtime";
+import { toArray as n } from "../../../helpers/formatting/toArray.js";
+import { getFormControlValueAsString as o } from "../../../helpers/form/getFormControlValueAsString.js";
+import { IressSelectOption as t } from "../SelectOption/SelectOption.js";
+const l = (i) => n(i).reduce(
+  (e, r = { type: t, props: { label: "" }, key: "" }) => {
+    if (r.type === "optgroup")
+      e = [
+        ...e,
+        {
+          label: r.props.label,
+          children: l(r.props.children)
+        }
+      ];
+    else if ([t, "option"].includes(r.type)) {
+      const p = { ...r.props };
+      delete p.children;
+      const s = String(r.props.children);
+      e = [
+        ...e,
+        {
+          ...p,
+          label: s
+        }
+      ];
+    } else (r.props?.children || Array.isArray(r)) && (e = [
+      ...e,
+      ...l(
+        r.props?.children ?? r
+      )
+    ]);
+    return e;
+  },
+  []
+), h = (i, e = []) => e.reduce(
+  (r, p) => r || (p.children ? h(i, p.children) : o(p.value) === i ? p.value : r),
+  void 0
+);
 export {
-  e as findValueFromStringInSelectOptions,
-  m as mapNodesToSelectOptions
+  h as findValueFromStringInSelectOptions,
+  l as mapNodesToSelectOptions
 };

package/dist/components/Select/index.js

@@ -1,9 +1,8 @@
-import { E as o } from "../../LoadingSuspense-BtzikVZk.js";
-import { IressSelectOption as p } from "./SelectOption/SelectOption.js";
-import { mapSelectOptions as O, renderOptionOrOptGroup as m } from "./helpers/mapSelectOptions.js";
+import { select as o } from "./Select.styles.js";
+import { IressSelect as s } from "./Select.js";
+import { IressSelectOption as c } from "./SelectOption/SelectOption.js";
 export {
-  o as IressSelect,
-  p as IressSelectOption,
-  O as mapSelectOptions,
-  m as renderOptionOrOptGroup
+  s as IressSelect,
+  c as IressSelectOption,
+  o as select
 };

package/dist/components/Skeleton/Skeleton.js

@@ -1,44 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as h } from "../../index-cbHCAGLB.js";
-import { TextVariant as p } from "../../enums.js";
-import { SkeletonMode as v } from "./Skeleton.types.js";
+import { jsx as s, Fragment as p } from "react/jsx-runtime";
 import { toCSSLengthValue as i } from "../../helpers/formatting/toCSSLengthValue.js";
-import { IressText as f } from "../Text/Text.js";
-const S = "ids-skeleton-v5202", g = "ids-skeleton--rect-v5202", u = "ids-skeleton--circle-v5202", T = "ids-skeleton--text-v5202", l = {
-  skeleton: S,
-  "iress-skeleton-loading": "ids-skeleton--iress-skeleton-loading-v5202",
-  rect: g,
-  circle: u,
-  text: T
-}, c = ({
-  className: a,
-  height: s,
-  width: o,
-  textVariant: d,
-  mode: n = "text",
-  style: e,
-  ...m
+import { IressText as x } from "../Text/Text.js";
+import { skeleton as S } from "./Skeleton.styles.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as h } from "../../enums.js";
+const T = ({
+  className: m,
+  height: t,
+  width: e,
+  mode: n,
+  style: a,
+  "data-testid": l,
+  ...d
 }) => {
-  const t = n === "text", k = {
-    ...e,
-    width: o ? i(o) : e?.width,
-    height: !t && s ? i(s) : e?.height
-  }, x = h(a, l.skeleton, l[n], {
-    "iress-u-text": t
-  });
-  return /* @__PURE__ */ r(
-    "div",
+  const o = n ?? "text", r = o === "text", c = {
+    ...a,
+    width: e && i(e),
+    height: r ? void 0 : t && i(t)
+  };
+  return /* @__PURE__ */ s(
+    x,
     {
-      ...m,
-      className: x,
-      style: k,
+      ...d,
+      className: f(m, S({ mode: o }), h.Skeleton),
+      style: c,
       "aria-hidden": "true",
-      children: t && /* @__PURE__ */ r(f, { variant: d, children: " " })
+      "data-testid": l,
+      children: r && /* @__PURE__ */ s(p, { children: " " })
     }
   );
 };
-c.Mode = v;
-c.TextVariant = p;
 export {
-  c as IressSkeleton
+  T as IressSkeleton
 };

package/dist/components/Skeleton/Skeleton.styles.js

@@ -0,0 +1,36 @@
+import { c as t } from "../../cva-JiDXAa83.js";
+const o = t({
+  base: {
+    backgroundColor: "colour.neutral.30",
+    borderRadius: "radius.025",
+    _motionReduce: {
+      animation: "none"
+    },
+    _moreContrast: {
+      outline: "[1px solid transparent]"
+    },
+    layerStyle: "skeleton",
+    animationStyle: "skeleton-loading"
+  },
+  variants: {
+    mode: {
+      rect: {
+        width: "[100%]",
+        height: "[100px]"
+      },
+      circle: {
+        borderRadius: "[50%]",
+        width: "[100px]",
+        height: "[100px]"
+      },
+      text: {
+        width: "[100%]",
+        height: "[spacing.600]"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  o as skeleton
+};

package/dist/components/Skeleton/index.js

@@ -1,7 +1,6 @@
-import { SKELETON_MODES as r, SkeletonMode as t } from "./Skeleton.types.js";
-import { IressSkeleton as E } from "./Skeleton.js";
+import { IressSkeleton as r } from "./Skeleton.js";
+import { skeleton as s } from "./Skeleton.styles.js";
 export {
-  E as IressSkeleton,
-  r as SKELETON_MODES,
-  t as SkeletonMode
+  r as IressSkeleton,
+  s as skeleton
 };

package/dist/components/SkipLink/SkipLink.js

@@ -1,30 +1,23 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { c as t } from "../../index-cbHCAGLB.js";
-import { idsLogger as m } from "../../helpers/utility/idsLogger.js";
-const a = "ids-skip-link-v5202", f = {
-  skipLink: a
-}, l = e(
-  ({
-    targetId: i,
-    href: s,
-    children: o = "Skip to content",
-    className: r,
-    ...p
-  }, k) => !i && !s ? (m(
-    "SkipLink: You must define other a targetId or href prop to display a skip link."
-  ), null) : /* @__PURE__ */ n(
-    "a",
-    {
-      ...p,
-      className: t(r, f.skipLink),
-      href: i ? `#${i}` : s,
-      ref: k,
-      children: o
-    }
-  )
-);
-l.displayName = "IressSkipLink";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { I as p } from "../../Button-D6AL0bia.js";
+import "../Button/CloseButton/CloseButton.js";
+import { c as k } from "../../cx-DN21T1EH.js";
+import { skipLink as n } from "./SkipLink.styles.js";
+import { GlobalCSSClass as a } from "../../enums.js";
+const f = n(), c = ({
+  children: o = "Skip to content",
+  className: i,
+  ...r
+}, s) => /* @__PURE__ */ t(
+  p,
+  {
+    ...r,
+    className: k(i, f, a.SkipLink),
+    ref: s,
+    children: o
+  }
+), b = m(c);
 export {
-  l as IressSkipLink
+  b as IressSkipLink
 };

package/dist/components/SkipLink/SkipLink.styles.js

@@ -0,0 +1,17 @@
+import { c as t } from "../../cva-JiDXAa83.js";
+const s = t({
+  base: {
+    position: "absolute",
+    top: "[0]",
+    left: "[50%]",
+    zIndex: "100",
+    transform: "[translateX(-50%) translateY(-125%)]",
+    marginTop: "spacing.200",
+    _focus: {
+      transform: "[translateX(-50%) translateY(0)]"
+    }
+  }
+});
+export {
+  s as skipLink
+};

package/dist/components/SkipLink/index.js

@@ -1,4 +1,6 @@
-import { IressSkipLink as i } from "./SkipLink.js";
+import { IressSkipLink as k } from "./SkipLink.js";
+import { skipLink as p } from "./SkipLink.styles.js";
 export {
-  i as IressSkipLink
+  k as IressSkipLink,
+  p as skipLink
 };

package/dist/components/Slideout/Slideout.js

@@ -1,18 +1,239 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "./Slideout.types.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react";
-import "../../floating-ui.react-DYBeYtOf.js";
-import "../../helpers/transition/timeStringToNumber.js";
-import "../../enums.js";
-import "../../helpers/utility/idsLogger.js";
-import "../../helpers/utility/propagateTestid.js";
-import { F as S } from "../../LoadingSuspense-BtzikVZk.js";
-import "../../PopoverProvider-DZ92QV8I.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../Text/Text.js";
-import "./hooks/useIDSProvidedSlideout.js";
+import { jsx as C } from "react/jsx-runtime";
+import { c as V } from "../../cx-DN21T1EH.js";
+import { useState as ee, useRef as A, useEffect as b, useMemo as O, 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-CmSaAiNF.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";
+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 me } from "./hooks/usePushElement.js";
+import { s as pe } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as P } from "../../enums.js";
+import { timeStringToNumber as ge } from "../../helpers/transition/timeStringToNumber.js";
+import { useProviderSlideout as ye } from "./hooks/useProviderSlideout.js";
+function Se(o) {
+  function l() {
+    r && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(r));
+  }
+  var e = [], t, r, i, n = [0], s = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, p = [
+    /\s+|\/\*|["'>~+[(]/g,
+    // general
+    /\s+|\/\*|["'[\]()]/g,
+    // [..] set
+    /\s+|\/\*|["'[\]()]/g,
+    // (..) set
+    null,
+    // string literal (placeholder)
+    /\*\//g
+    // comment
+  ];
+  for (o = o.trim(); ; )
+    if (r = "", i = p[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(
+        a,
+        s - t[0].length
+      )), n[n.length - 1] < 3) {
+        if (l(), t[0] === "[")
+          n.push(1);
+        else if (t[0] === "(")
+          n.push(2);
+        else if (/^["']$/.test(t[0]))
+          n.push(3), p[3] = new RegExp(t[0], "g");
+        else if (t[0] === "/*")
+          n.push(4);
+        else if (/^[\])]$/.test(t[0]) && n.length > 0)
+          n.pop();
+        else if (/^(?:\s+|[~+>])$/.test(t[0]) && (e.length > 0 && !d.test(e[e.length - 1]) && n[n.length - 1] === 0 && e.push(" "), n[n.length - 1] === 1 && e.length === 5 && e[2].charAt(e[2].length - 1) === "=" && (e[4] = " " + e[4]), d.test(t[0])))
+          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];
+    else {
+      r = o.substr(s), l();
+      break;
+    }
+  return e.join("").trim();
+}
+function be(o, l = document, e = null) {
+  return we(o, !1, l, e);
+}
+function we(o, l, e, t = null) {
+  o = Se(o);
+  let r = e.querySelector(o);
+  return document.head.createShadowRoot || document.head.attachShadow ? r || _(o, ",").reduce((n, s) => {
+    if (n)
+      return n;
+    const a = _(s.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => _(g, ">")), u = a.length - 1, d = a[u][a[u].length - 1], p = Ie(d, e, t), E = Ee(a, u, e);
+    return n = p.find(E), n || null;
+  }, null) : r;
+}
+function Ee(o, l, e) {
+  return (t) => {
+    let r = l, i = t, n = !1;
+    for (; i && !Ne(i); ) {
+      let s = !0;
+      if (o[r].length === 1)
+        s = i.matches(o[r]);
+      else {
+        const a = [].concat(o[r]).reverse();
+        let u = i;
+        for (const d of a) {
+          if (!u || !u.matches(d)) {
+            s = !1;
+            break;
+          }
+          u = T(u, e);
+        }
+      }
+      if (s && r === 0) {
+        n = !0;
+        break;
+      }
+      s && r--, i = T(i, e);
+    }
+    return n;
+  };
+}
+function _(o, l) {
+  return o.match(/\\?.|^$/g).reduce((e, t) => (t === '"' && !e.sQuote ? (e.quote ^= 1, e.a[e.a.length - 1] += t) : t === "'" && !e.quote ? (e.sQuote ^= 1, e.a[e.a.length - 1] += t) : !e.quote && !e.sQuote && t === l ? e.a.push("") : e.a[e.a.length - 1] += t, e), { a: [""] }).a;
+}
+function Ne(o) {
+  return o.nodeType === Node.DOCUMENT_FRAGMENT_NODE || o.nodeType === Node.DOCUMENT_NODE;
+}
+function T(o, l) {
+  const e = o.parentNode;
+  return e && e.host && e.nodeType === 11 ? e.host : e === l ? null : e;
+}
+function Ie(o = null, l, e = null) {
+  let t = [];
+  if (e)
+    t = e;
+  else {
+    const r = function(i) {
+      for (let n = 0; n < i.length; n++) {
+        const s = i[n];
+        t.push(s), s.shadowRoot && r(s.shadowRoot.querySelectorAll("*"));
+      }
+    };
+    l.shadowRoot && r(l.shadowRoot.querySelectorAll("*")), r(l.querySelectorAll("*"));
+  }
+  return o ? t.filter((r) => r.matches(o)) : t;
+}
+const Ue = ({
+  children: o,
+  className: l,
+  closeText: e = "Close",
+  container: t,
+  "data-testid": r,
+  defaultShow: i = !1,
+  eleToPush: n,
+  footer: s,
+  heading: a,
+  mode: u = "overlay",
+  onEntered: d,
+  onExited: p,
+  onShowChange: E,
+  onStatus: g,
+  onTransitionEnd: R,
+  position: y = "right",
+  show: N,
+  size: I = "sm",
+  style: F,
+  ...x
+}) => {
+  const [U, Q] = ee(i), M = A(240), S = A(null), w = ye(x.id), q = de({ id: x.id }), v = `${q}--heading`, j = w.opened || N || U, D = (f, m, k) => {
+    w?.show?.(f), Q(f), E?.(f, k);
+  }, { context: h } = ne({
+    open: j,
+    onOpenChange: D
+  }), G = oe(h, {
+    enabled: !0,
+    outsidePress: !1
+  }), H = re(h), B = se([G, H]), { isMounted: L, status: c } = le(h, {
+    duration: M.current
+  }), J = ce({
+    position: y,
+    size: I,
+    status: c,
+    mode: u
+  });
+  b(() => {
+    w.opened && N && ue(
+      "IressSlideout: Please use either IressSlideoutProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the slideout will become unpredictable. If you want to show a slideout by default in uncontrolled mode, use the defaultShow prop."
+    );
+  }, [w.opened, N]), b(() => {
+    g?.(c);
+  }, [c, g]), b(() => {
+    const f = (m) => typeof m == "string" ? be(m) : m instanceof Element ? m : m?.current;
+    return u === "overlay" ? S.current = null : S.current = f(n), () => {
+      S.current = null;
+    };
+  }, [n, u]), b(() => {
+    c === "initial" && h.refs.floating?.current && (M.current = ge(
+      window.getComputedStyle(h.refs.floating.current, null)?.getPropertyValue("--iress-transition-duration") || ".3s"
+    ) * 1.2);
+  }, [h.refs.floating, c]), b(() => {
+    c === "open" && h.refs.floating?.current?.focus();
+  }, [h.refs.floating, c]);
+  const K = O(
+    () => ({
+      element: S.current ?? null,
+      isActive: u === "push",
+      position: y,
+      size: I,
+      status: c
+    }),
+    [S, u, y, I, c]
+  );
+  me(K);
+  const W = te(
+    (f) => {
+      R?.(f);
+      const m = y === "right" ? "right" : "left";
+      !(f.propertyName === m || f.propertyName === "opacity" || !f.propertyName) || f.target !== f.currentTarget || (c === "open" ? d?.() : c === "close" && p?.());
+    },
+    [R, y, c, d, p]
+  ), $ = O(() => typeof a == "string" ? /* @__PURE__ */ C(
+    he,
+    {
+      id: v,
+      "data-testid": ae(r, "heading"),
+      element: "h2",
+      children: a
+    }
+  ) : a, [r, v, a]);
+  if (!L) return null;
+  const X = V(
+    J.root,
+    l,
+    P.Slideout,
+    c === "open" && P.SlideoutOpen
+  ), [Y, Z] = pe(x), z = {
+    "aria-labelledby": $ ? v : void 0,
+    children: o,
+    className: X,
+    closeText: e,
+    "data-testid": r,
+    footer: s,
+    floatingRef: (f) => h.refs.setFloating(f),
+    heading: $,
+    id: q,
+    onOpenChange: D,
+    ...Y,
+    ...B.getFloatingProps(Z),
+    onTransitionEnd: W
+  };
+  return /* @__PURE__ */ C(ie, { root: t, children: /* @__PURE__ */ C(
+    fe,
+    {
+      ...z,
+      style: F,
+      "data-testid": r
+    }
+  ) });
+};
 export {
-  S as IressSlideout
+  Ue as IressSlideout
 };