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

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

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

package/dist/components/Select/index.js

@@ -1,9 +1,8 @@
-import { E as o } from "../../LoadingSuspense-D0TO0TDT.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-2QXL0WYc.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-v5160", g = "ids-skeleton--rect-v5160", u = "ids-skeleton--circle-v5160", T = "ids-skeleton--text-v5160", c = {
-  skeleton: S,
-  "iress-skeleton-loading": "ids-skeleton--iress-skeleton-loading-v5160",
-  rect: g,
-  circle: u,
-  text: T
-}, a = ({
-  className: l,
-  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 == null ? void 0 : e.width,
-    height: !t && s ? i(s) : e == null ? void 0 : e.height
-  }, x = h(l, c.skeleton, c[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: " " })
     }
   );
 };
-a.Mode = v;
-a.TextVariant = p;
 export {
-  a as IressSkeleton
+  T as IressSkeleton
 };

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

@@ -0,0 +1,36 @@
+import { a as t } from "../../cva-B2x59Dph.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-2QXL0WYc.js";
-import { idsLogger as m } from "../../helpers/utility/idsLogger.js";
-const a = "ids-skip-link-v5160", 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-BXzmntRi.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 { a } from "../../cva-B2x59Dph.js";
+const s = a({
+  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,244 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import "./Slideout.types.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react";
-import "../../floating-ui.react-nmA48tb2.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-D0TO0TDT.js";
-import "../../PopoverProvider-Cw5-iAgZ.js";
-import "../../hooks/useIdIfNeeded.js";
-import "../Text/Text.js";
-import "./hooks/useIDSProvidedSlideout.js";
+import { jsx as q } from "react/jsx-runtime";
+import { c as ee } from "../../cx-DN21T1EH.js";
+import { useState as te, useRef as O, useEffect as w, useMemo as F, useCallback as ne, cloneElement as re } from "react";
+import { u as se, b as le, c as oe, d as ie, e as ue, g as fe } from "../../floating-ui.react-CPN4oQCc.js";
+import { idsLogger as ae } from "../../helpers/utility/idsLogger.js";
+import { propagateTestid as ce } from "../../helpers/utility/propagateTestid.js";
+import { SlideoutInner as de } from "./components/SlideoutInner.js";
+import { slideout as me } from "./Slideout.styles.js";
+import { useIdIfNeeded as he } from "../../hooks/useIdIfNeeded.js";
+import { IressText as pe } from "../Text/Text.js";
+import { usePushElement as ge } from "./hooks/usePushElement.js";
+import { s as ye } from "../../is-valid-prop-DFFvE05x.js";
+import { GlobalCSSClass as U } from "../../enums.js";
+import { timeStringToNumber as Se } from "../../helpers/transition/timeStringToNumber.js";
+import { useProviderSlideout as be } from "./hooks/useProviderSlideout.js";
+function Ne(r) {
+  function i() {
+    s && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(s));
+  }
+  var e = [], t, s, u, n = [0], o = 0, f, a = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, m = /^\s+$/, h = [
+    /\s+|\/\*|["'>~+[(]/g,
+    // general
+    /\s+|\/\*|["'[\]()]/g,
+    // [..] set
+    /\s+|\/\*|["'[\]()]/g,
+    // (..) set
+    null,
+    // string literal (placeholder)
+    /\*\//g
+    // comment
+  ];
+  for (r = r.trim(); ; )
+    if (s = "", u = h[n[n.length - 1]], u.lastIndex = o, t = u.exec(r), t)
+      if (f = o, o = u.lastIndex, f < o - t[0].length && (s = r.substring(
+        f,
+        o - t[0].length
+      )), n[n.length - 1] < 3) {
+        if (i(), t[0] === "[")
+          n.push(1);
+        else if (t[0] === "(")
+          n.push(2);
+        else if (/^["']$/.test(t[0]))
+          n.push(3), h[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 && !m.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]), m.test(t[0])))
+          continue;
+        e.push(t[0]);
+      } else
+        e[e.length - 1] += s, a.test(e[e.length - 1]) && (n[n.length - 1] === 4 && (e.length < 2 || m.test(e[e.length - 2]) ? e.pop() : e[e.length - 1] = " ", t[0] = ""), n.pop()), e[e.length - 1] += t[0];
+    else {
+      s = r.substr(o), i();
+      break;
+    }
+  return e.join("").trim();
+}
+function we(r, i = document, e = null) {
+  return Ie(r, !1, i, e);
+}
+function Ie(r, i, e, t = null) {
+  r = Ne(r);
+  let s = e.querySelector(r);
+  return document.head.createShadowRoot || document.head.attachShadow ? s || v(r, ",").reduce((n, o) => {
+    if (n)
+      return n;
+    const f = v(o.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => v(g, ">")), a = f.length - 1, m = f[a][f[a].length - 1], h = xe(m, e, t), S = _e(f, a, e);
+    return n = h.find(S), n || null;
+  }, null) : s;
+}
+function _e(r, i, e) {
+  return (t) => {
+    let s = i, u = t, n = !1;
+    for (; u && !Re(u); ) {
+      let o = !0;
+      if (r[s].length === 1)
+        o = u.matches(r[s]);
+      else {
+        const f = [].concat(r[s]).reverse();
+        let a = u;
+        for (const m of f) {
+          if (!a || !a.matches(m)) {
+            o = !1;
+            break;
+          }
+          a = Q(a, e);
+        }
+      }
+      if (o && s === 0) {
+        n = !0;
+        break;
+      }
+      o && s--, u = Q(u, e);
+    }
+    return n;
+  };
+}
+function v(r, i) {
+  return r.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 === i ? e.a.push("") : e.a[e.a.length - 1] += t, e), { a: [""] }).a;
+}
+function Re(r) {
+  return r.nodeType === Node.DOCUMENT_FRAGMENT_NODE || r.nodeType === Node.DOCUMENT_NODE;
+}
+function Q(r, i) {
+  const e = r.parentNode;
+  return e && e.host && e.nodeType === 11 ? e.host : e === i ? null : e;
+}
+function xe(r = null, i, e = null) {
+  let t = [];
+  if (e)
+    t = e;
+  else {
+    const s = function(u) {
+      for (let n = 0; n < u.length; n++) {
+        const o = u[n];
+        t.push(o), o.shadowRoot && s(o.shadowRoot.querySelectorAll("*"));
+      }
+    };
+    i.shadowRoot && s(i.shadowRoot.querySelectorAll("*")), s(i.querySelectorAll("*"));
+  }
+  return r ? t.filter((s) => s.matches(r)) : t;
+}
+const He = ({
+  children: r,
+  className: i,
+  closeText: e = "Close",
+  container: t,
+  "data-testid": s,
+  defaultShow: u = !1,
+  eleToPush: n,
+  footer: o,
+  heading: f,
+  mode: a = "overlay",
+  onEntered: m,
+  onExited: h,
+  onShowChange: S,
+  onStatus: g,
+  onTransitionEnd: I,
+  position: b = "right",
+  show: R,
+  size: x = "sm",
+  style: j,
+  ...M
+}) => {
+  const [G, H] = te(u), C = O(240), N = O(null), y = be(M.id), D = he({ id: M.id }), _ = `${D}--heading`, P = y.opened || R || G, $ = (l, c, A) => {
+    var E;
+    (E = y == null ? void 0 : y.show) == null || E.call(y, l), H(l), S == null || S(l, A);
+  }, { context: p } = se({
+    open: P,
+    onOpenChange: $
+  }), B = le(p, {
+    enabled: !0,
+    outsidePress: !1
+  }), L = oe(p), J = ie([B, L]), { isMounted: K, status: d } = ue(p, {
+    duration: C.current
+  }), W = me({
+    position: b,
+    size: x,
+    status: d,
+    mode: a
+  });
+  w(() => {
+    y.opened && R && ae(
+      "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."
+    );
+  }, [y.opened, R]), w(() => {
+    g == null || g(d);
+  }, [d, g]), w(() => {
+    const l = (c) => typeof c == "string" ? we(c) : c instanceof Element ? c : c == null ? void 0 : c.current;
+    return a === "overlay" ? N.current = null : N.current = l(n), () => {
+      N.current = null;
+    };
+  }, [n, a]), w(() => {
+    var l, c;
+    d === "initial" && ((l = p.refs.floating) != null && l.current) && (C.current = Se(
+      ((c = window.getComputedStyle(p.refs.floating.current, null)) == null ? void 0 : c.getPropertyValue("--iress-transition-duration")) || ".3s"
+    ) * 1.2);
+  }, [p.refs.floating, d]), w(() => {
+    var l, c;
+    d === "open" && ((c = (l = p.refs.floating) == null ? void 0 : l.current) == null || c.focus());
+  }, [p.refs.floating, d]);
+  const X = F(
+    () => ({
+      element: N.current ?? null,
+      isActive: a === "push",
+      position: b,
+      size: x,
+      status: d
+    }),
+    [N, a, b, x, d]
+  );
+  ge(X);
+  const Y = ne(
+    (l) => {
+      I == null || I(l);
+      const c = b === "right" ? "right" : "left";
+      !(l.propertyName === c || l.propertyName === "opacity" || !l.propertyName) || l.target !== l.currentTarget || (d === "open" ? m == null || m() : d === "close" && (h == null || h()));
+    },
+    [I, b, d, m, h]
+  ), k = F(() => typeof f == "string" ? /* @__PURE__ */ q(
+    pe,
+    {
+      id: _,
+      "data-testid": ce(s, "heading"),
+      element: "h2",
+      children: f
+    }
+  ) : f ? re(f, {
+    id: _
+  }) : null, [s, _, f]);
+  if (!K) return null;
+  const Z = ee(
+    W.root,
+    i,
+    U.Slideout,
+    d === "open" && U.SlideoutOpen
+  ), [z, T] = ye(M), V = {
+    "aria-labelledby": k ? _ : void 0,
+    children: r,
+    className: Z,
+    closeText: e,
+    "data-testid": s,
+    footer: o,
+    floatingRef: (l) => p.refs.setFloating(l),
+    heading: k,
+    id: D,
+    onOpenChange: $,
+    ...z,
+    ...J.getFloatingProps(T),
+    onTransitionEnd: Y
+  };
+  return /* @__PURE__ */ q(fe, { root: t, children: /* @__PURE__ */ q(
+    de,
+    {
+      ...V,
+      style: j,
+      "data-testid": s
+    }
+  ) });
+};
 export {
-  S as IressSlideout
+  He as IressSlideout
 };