@cfx-dev/ui-components 4.2.15 → 4.2.16

package/dist/components/Accordion/Accordion.d.ts

@@ -4,6 +4,7 @@ import { IconName } from '../Icon';
 export interface AccordionContextProps {
     openItems: Record<string, boolean>;
     toggleItem: (id: string) => void;
+    rootWidth: null | number;
 }
 export interface AccordionProps {
     className?: string;

package/dist/components/Accordion/Accordion.js

@@ -1,86 +1,91 @@
 import { jsx as c, jsxs as v } from "react/jsx-runtime";
 import e from "react";
-import { Icon as C } from "../Icon/Icon.js";
-import { Text as A } from "../Text/Text.js";
+import { Icon as A } from "../Icon/Icon.js";
+import { Text as b } from "../Text/Text.js";
 import { ui as I } from "../ui.js";
-import { clsx as b } from "../../utils/clsx.js";
-import { debounce as y } from "../../utils/execution.js";
-import { minmax as T } from "../../utils/math.js";
-const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__iconFlip__367de", D = "cfxui__Accordion__iconUp__28d27", N = "cfxui__Accordion__iconDown__b9e95", E = "cfxui__Accordion__text__03dc4", U = "cfxui__Accordion__iconLeft__e348b", $ = "cfxui__Accordion__iconRight__bbf0c", F = "cfxui__Accordion__content__5ecaf", H = "cfxui__Accordion__open__ed604", L = "cfxui__Accordion__contentText__1384b", z = "cfxui__Accordion__closed__be897", o = {
-  triggerContainer: R,
+import { clsx as w } from "../../utils/clsx.js";
+import { debounce as R } from "../../utils/execution.js";
+import { minmax as y } from "../../utils/math.js";
+const T = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__iconFlip__367de", D = "cfxui__Accordion__iconUp__28d27", E = "cfxui__Accordion__iconDown__b9e95", N = "cfxui__Accordion__text__03dc4", U = "cfxui__Accordion__iconLeft__e348b", $ = "cfxui__Accordion__iconRight__bbf0c", F = "cfxui__Accordion__content__5ecaf", L = "cfxui__Accordion__open__ed604", S = "cfxui__Accordion__contentText__1384b", W = "cfxui__Accordion__closed__be897", o = {
+  triggerContainer: T,
   iconFlip: k,
   iconUp: D,
-  iconDown: N,
-  text: E,
+  iconDown: E,
+  text: N,
   iconLeft: U,
   iconRight: $,
   content: F,
-  open: H,
-  contentText: L,
-  closed: z,
+  open: L,
+  contentText: S,
+  closed: W,
   "content-text-closing": "cfxui__Accordion__content-text-closing__163e4"
-}, g = e.createContext(void 0), V = function(i) {
+}, g = e.createContext(void 0), q = function(i) {
   const {
     children: t,
     className: s
-  } = i, [n, r] = e.useState({}), l = e.useCallback((d) => {
-    r((u) => ({
-      ...u,
-      [d]: !u[d]
+  } = i, [n, r] = e.useState({}), [d, l] = e.useState(null), a = e.useRef(null), u = e.useCallback((p) => {
+    r((m) => ({
+      ...m,
+      [p]: !m[p]
     }));
-  }, []), a = e.useMemo(() => ({
+  }, []), _ = e.useMemo(() => ({
     openItems: n,
-    toggleItem: l
-  }), [n, l]);
-  return /* @__PURE__ */ c(g.Provider, { value: a, children: /* @__PURE__ */ c("div", { className: s, role: "presentation", children: t }) });
-}, h = e.createContext(""), G = function({
+    toggleItem: u,
+    rootWidth: d
+  }), [n, u, d]), f = e.useCallback(() => {
+    a.current && l(a.current.getBoundingClientRect().width);
+  }, []), x = e.useMemo(() => R(f, 250), [f]);
+  return e.useEffect(() => (window.addEventListener("resize", x), () => {
+    window.removeEventListener("resize", x);
+  }), [x]), /* @__PURE__ */ c(g.Provider, { value: _, children: /* @__PURE__ */ c("div", { ref: a, className: s, role: "presentation", children: t }) });
+}, C = e.createContext(""), V = function({
   children: i
 }) {
   const t = e.useId();
-  return /* @__PURE__ */ c(h.Provider, { value: t, children: /* @__PURE__ */ c("div", { className: o.item, id: t, role: "region", "aria-labelledby": `${t}-header`, children: i }) });
-}, J = function({
+  return /* @__PURE__ */ c(C.Provider, { value: t, children: /* @__PURE__ */ c("div", { className: o.item, id: t, role: "region", "aria-labelledby": `${t}-header`, children: i }) });
+}, G = function({
   children: i
 }) {
   return /* @__PURE__ */ c("div", { className: o.header, children: i });
-}, Q = function({
+}, J = function({
   text: i,
   iconLeft: t
 }) {
-  const s = e.useContext(g), n = e.useContext(h);
+  const s = e.useContext(g), n = e.useContext(C);
   if (!s)
     throw new Error("AccordionTrigger must be used within an Accordion");
   const {
     toggleItem: r,
-    openItems: l
-  } = s, a = l[n], [d, u] = e.useState(!1), [_, m] = e.useState(a ? "UpChevron" : "DownChevron"), p = e.useCallback(() => {
+    openItems: d
+  } = s, l = d[n], [a, u] = e.useState(!1), [_, f] = e.useState(l ? "UpChevron" : "DownChevron"), x = e.useCallback(() => {
     r(n);
-  }, [n, r]), w = e.useCallback((x) => {
-    (x.key === "Enter" || x.key === " ") && r(n);
+  }, [n, r]), p = e.useCallback((m) => {
+    (m.key === "Enter" || m.key === " ") && r(n);
   }, [n, r]);
   return e.useEffect(() => {
-    const x = setTimeout(() => {
-      m(a ? "UpChevron" : "DownChevron"), u(!1);
+    const m = setTimeout(() => {
+      f(l ? "UpChevron" : "DownChevron"), u(!1);
     }, 300);
-    return u(!0), () => clearTimeout(x);
-  }, [a]), /* @__PURE__ */ v(
+    return u(!0), () => clearTimeout(m);
+  }, [l]), /* @__PURE__ */ v(
     "div",
     {
       className: o.triggerContainer,
-      onClick: p,
-      onKeyDown: w,
+      onClick: x,
+      onKeyDown: p,
       role: "button",
       tabIndex: 0,
-      "aria-expanded": a,
+      "aria-expanded": l,
       "aria-controls": `${n}-content`,
       id: `${n}-header`,
       children: [
-        t && /* @__PURE__ */ c(C, { name: t, className: o.iconLeft }),
-        /* @__PURE__ */ c(A, { size: "normal", className: o.text, children: i }),
+        t && /* @__PURE__ */ c(A, { name: t, className: o.iconLeft }),
+        /* @__PURE__ */ c(b, { size: "normal", className: o.text, children: i }),
         /* @__PURE__ */ c(
-          C,
+          A,
           {
-            className: b(o.iconRight, {
-              [o.iconFlip]: d,
+            className: w(o.iconRight, {
+              [o.iconFlip]: a,
               [o.iconUp]: _ === "UpChevron",
               [o.iconDown]: _ === "DownChevron"
             }),
@@ -90,23 +95,22 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
       ]
     }
   );
-}, W = function({
+}, Q = function({
   children: i
 }) {
-  const t = e.useContext(g), s = e.useContext(h), [n, r] = e.useState(null), l = e.useRef(null);
+  const t = e.useContext(g), s = e.useContext(C), [n, r] = e.useState(null), d = e.useRef(null);
   if (!t)
     throw new Error("AccordionContent must be used within an Accordion");
   const {
-    openItems: a
-  } = t, d = a[s], u = e.useMemo(() => n === null ? 250 : T(n / 150 * 250, 250, 500), [n]), _ = e.useCallback(() => {
+    openItems: l,
+    rootWidth: a
+  } = t, u = l[s], _ = e.useMemo(() => n === null ? 250 : y(n / 150 * 250, 250, 500), [n]);
+  return e.useEffect(() => {
     r(null);
-  }, []), m = e.useMemo(() => y(_, 250), [_]);
-  return e.useEffect(() => (window.addEventListener("resize", m), () => {
-    window.removeEventListener("resize", m);
-  }), [m]), e.useEffect(() => {
-    if (n === null && l.current) {
-      const p = l.current.getBoundingClientRect().height;
-      r(p);
+  }, [a]), e.useEffect(() => {
+    if (n === null && d.current) {
+      const f = d.current.getBoundingClientRect().height;
+      r(f);
     }
   }, [n]), /* @__PURE__ */ c(
     "div",
@@ -114,23 +118,23 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
       id: `${s}-content`,
       role: "region",
       "aria-labelledby": `${s}-header`,
-      className: b(o.content, {
-        [o.open]: d,
-        [o.closed]: !d
+      className: w(o.content, {
+        [o.open]: u,
+        [o.closed]: !u
       }),
       style: {
         "--content-display": n === null ? "inline-block" : "none",
         "--content-height": n === null ? I.q(30) : `${n}px`,
-        "--content-animation-time": `${u}ms`
+        "--content-animation-time": `${_}ms`
       },
       children: /* @__PURE__ */ c(
-        A,
+        b,
         {
           color: "secondary",
           size: "normal",
           typographic: !0,
           className: o.contentText,
-          ref: l,
+          ref: d,
           children: i
         }
       )
@@ -138,9 +142,9 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
   );
 };
 export {
-  V as Accordion,
-  W as AccordionContent,
-  J as AccordionHeader,
-  G as AccordionItem,
-  Q as AccordionTrigger
+  q as Accordion,
+  Q as AccordionContent,
+  G as AccordionHeader,
+  V as AccordionItem,
+  J as AccordionTrigger
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.2.15",
+  "version": "4.2.16",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",