@cfx-dev/ui-components 4.2.11 → 4.2.13

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

@@ -1,26 +1,20 @@
-import { default as React, PropsWithChildren } from 'react';
+import { default as React } from 'react';
 import { IconName } from '../Icon';
 
 export interface AccordionContextProps {
-    openItems: Set<string>;
+    openItems: Record<string, boolean>;
     toggleItem: (id: string) => void;
 }
 export interface AccordionProps {
     className?: string;
 }
-export declare const Accordion: React.FC<PropsWithChildren<AccordionProps>>;
-export declare const AccordionItem: React.FC<React.PropsWithChildren<{
-    id: string;
-}>>;
+export declare const Accordion: React.FC<React.PropsWithChildren<AccordionProps>>;
+export declare const AccordionItem: React.FC<React.PropsWithChildren>;
 export declare const AccordionHeader: React.FC<React.PropsWithChildren>;
 interface AccordionTriggerProps {
-    id: string;
     text: string;
     iconLeft?: IconName;
 }
 export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
-interface AccordionContentProps {
-    id: string;
-}
-export declare const AccordionContent: React.FC<React.PropsWithChildren<AccordionContentProps>>;
+export declare const AccordionContent: React.FC<React.PropsWithChildren>;
 export {};

package/dist/components/Accordion/Accordion.js

@@ -1,119 +1,146 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import A, { createContext as v, useState as p, useContext as w, useEffect as D } from "react";
-import { Icon as x } from "../Icon/Icon.js";
-import { Flex as C } from "../Layout/Flex/Flex.js";
-import { Text as b } from "../Text/Text.js";
-import "../ui.js";
-import { clsx as f } from "../../utils/clsx.js";
-const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c", N = "cfxui__Accordion__header__cbd69", U = "cfxui__Accordion__triggerContainer__b92c1", T = "cfxui__Accordion__iconFlip__367de", R = "cfxui__Accordion__iconUp__28d27", $ = "cfxui__Accordion__iconDown__b9e95", k = "cfxui__Accordion__iconLeft__e348b", E = "cfxui__Accordion__iconRight__bbf0c", L = "cfxui__Accordion__content__5ecaf", O = "cfxui__Accordion__open__ed604", n = {
-  root: y,
-  item: F,
-  header: N,
-  triggerContainer: U,
-  iconFlip: T,
-  iconUp: R,
-  iconDown: $,
-  iconLeft: k,
-  iconRight: E,
-  content: L,
-  open: O
-}, h = v(void 0), V = function({
-  children: c,
-  className: o
-}) {
-  const [t, s] = p(/* @__PURE__ */ new Set()), _ = A.useCallback((r) => {
-    s((u) => {
-      const i = new Set(u);
-      return i.has(r) ? i.delete(r) : i.add(r), i;
-    });
-  }, []), l = A.useMemo(() => ({
-    openItems: t,
-    toggleItem: _
-  }), [t, _]);
-  return /* @__PURE__ */ e(h.Provider, { value: l, children: /* @__PURE__ */ e("div", { className: f(n.root, o), role: "presentation", children: c }) });
-}, q = function({
-  children: c,
-  id: o
+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 { 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,
+  iconFlip: k,
+  iconUp: D,
+  iconDown: N,
+  text: E,
+  iconLeft: U,
+  iconRight: $,
+  content: F,
+  open: H,
+  contentText: L,
+  closed: z,
+  "content-text-closing": "cfxui__Accordion__content-text-closing__163e4"
+}, g = e.createContext(void 0), V = function(i) {
+  const {
+    children: t,
+    className: s
+  } = i, [n, r] = e.useState({}), l = e.useCallback((d) => {
+    r((u) => ({
+      ...u,
+      [d]: !u[d]
+    }));
+  }, []), a = 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({
+  children: i
 }) {
-  return /* @__PURE__ */ e("div", { className: n.item, id: o, role: "region", "aria-labelledby": `${o}-header`, children: c });
-}, B = function({
-  children: c
+  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({
+  children: i
 }) {
-  return /* @__PURE__ */ e("div", { className: n.header, children: c });
-}, G = function({
-  text: c,
-  id: o,
+  return /* @__PURE__ */ c("div", { className: o.header, children: i });
+}, Q = function({
+  text: i,
   iconLeft: t
 }) {
-  const s = w(h);
+  const s = e.useContext(g), n = e.useContext(h);
   if (!s)
     throw new Error("AccordionTrigger must be used within an Accordion");
   const {
-    toggleItem: _,
+    toggleItem: r,
     openItems: l
-  } = s, r = l.has(o), [u, i] = p(!1), [m, I] = p(r ? "UpChevron" : "DownChevron");
-  return D(() => {
-    const d = setTimeout(() => {
-      I(r ? "UpChevron" : "DownChevron"), i(!1);
+  } = s, a = l[n], [d, u] = e.useState(!1), [_, m] = e.useState(a ? "UpChevron" : "DownChevron"), p = e.useCallback(() => {
+    r(n);
+  }, [n, r]), w = e.useCallback((x) => {
+    (x.key === "Enter" || x.key === " ") && r(n);
+  }, [n, r]);
+  return e.useEffect(() => {
+    const x = setTimeout(() => {
+      m(a ? "UpChevron" : "DownChevron"), u(!1);
     }, 300);
-    return i(!0), () => clearTimeout(d);
-  }, [r]), /* @__PURE__ */ g(
+    return u(!0), () => clearTimeout(x);
+  }, [a]), /* @__PURE__ */ v(
     "div",
     {
-      className: n.triggerContainer,
-      onClick: () => _(o),
-      onKeyDown: (d) => {
-        (d.key === "Enter" || d.key === " ") && _(o);
-      },
+      className: o.triggerContainer,
+      onClick: p,
+      onKeyDown: w,
       role: "button",
       tabIndex: 0,
-      "aria-expanded": r,
-      "aria-controls": `${o}-content`,
-      id: `${o}-header`,
+      "aria-expanded": a,
+      "aria-controls": `${n}-content`,
+      id: `${n}-header`,
       children: [
-        /* @__PURE__ */ g(C, { centered: !0, children: [
-          t && /* @__PURE__ */ e(x, { name: t, className: n.iconLeft }),
-          /* @__PURE__ */ e(b, { size: "normal", children: c })
-        ] }),
-        /* @__PURE__ */ e(C, { centered: !0, children: /* @__PURE__ */ e(
-          x,
+        t && /* @__PURE__ */ c(C, { name: t, className: o.iconLeft }),
+        /* @__PURE__ */ c(A, { size: "normal", className: o.text, children: i }),
+        /* @__PURE__ */ c(
+          C,
           {
-            className: f(n.iconRight, {
-              [n.iconFlip]: u,
-              [n.iconUp]: m === "UpChevron",
-              [n.iconDown]: m === "DownChevron"
+            className: b(o.iconRight, {
+              [o.iconFlip]: d,
+              [o.iconUp]: _ === "UpChevron",
+              [o.iconDown]: _ === "DownChevron"
             }),
-            name: m
+            name: _
           }
-        ) })
+        )
       ]
     }
   );
-}, J = function({
-  children: c,
-  id: o
+}, W = function({
+  children: i
 }) {
-  const t = w(h);
+  const t = e.useContext(g), s = e.useContext(h), [n, r] = e.useState(null), l = e.useRef(null);
   if (!t)
     throw new Error("AccordionContent must be used within an Accordion");
   const {
-    openItems: s
-  } = t;
-  return /* @__PURE__ */ e(
+    openItems: a
+  } = t, d = a[s], u = e.useMemo(() => n === null ? 250 : T(n / 150 * 250, 250, 500), [n]), _ = e.useCallback(() => {
+    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);
+    }
+  }, [n]), /* @__PURE__ */ c(
     "div",
     {
-      className: f(n.content, { [n.open]: s.has(o) }),
-      id: `${o}-content`,
+      id: `${s}-content`,
       role: "region",
-      "aria-labelledby": `${o}-header`,
-      children: /* @__PURE__ */ e(b, { color: "secondary", size: "normal", typographic: !0, children: c })
+      "aria-labelledby": `${s}-header`,
+      className: b(o.content, {
+        [o.open]: d,
+        [o.closed]: !d
+      }),
+      style: {
+        "--content-display": n === null ? "inline-block" : "none",
+        "--content-height": n === null ? I.q(30) : `${n}px`,
+        "--content-animation-time": `${u}ms`
+      },
+      children: /* @__PURE__ */ c(
+        A,
+        {
+          color: "secondary",
+          size: "normal",
+          typographic: !0,
+          className: o.contentText,
+          ref: l,
+          children: i
+        }
+      )
     }
   );
 };
 export {
   V as Accordion,
-  J as AccordionContent,
-  B as AccordionHeader,
-  q as AccordionItem,
-  G as AccordionTrigger
+  W as AccordionContent,
+  J as AccordionHeader,
+  G as AccordionItem,
+  Q as AccordionTrigger
 };

package/dist/components/Accordion/AccordionShowcase.js

@@ -1,65 +1,95 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import a from "react";
-import { Flex as c } from "../Layout/Flex/Flex.js";
-import { Text as d } from "../Text/Text.js";
+import h from "react";
+import { Flex as a } from "../Layout/Flex/Flex.js";
+import { Text as c } from "../Text/Text.js";
 import "../ui.js";
-import { Accordion as h, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
-function l() {
-  return /* @__PURE__ */ e(c, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(c, { fullWidth: !0, vertical: !0, children: [
-    /* @__PURE__ */ e(d, { size: "large", children: "Accordion" }),
-    /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ t(i, { id: "item1", children: [
-        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+import { Accordion as l, AccordionItem as o, AccordionHeader as i, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
+function s() {
+  return /* @__PURE__ */ e(a, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
+    /* @__PURE__ */ e(c, { size: "large", children: "Accordion" }),
+    /* @__PURE__ */ t(l, { children: [
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
           n,
           {
-            id: "item1",
             text: "Will I get banned from GTA:O?",
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ t(r, { id: "item1", children: [
+        /* @__PURE__ */ t(r, { children: [
           "Nope! ",
           /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
           " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it."
         ] })
       ] }),
-      /* @__PURE__ */ t(i, { id: "item2", children: [
-        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
           n,
           {
-            id: "item2",
             text: "Can I cheat on FiveM?",
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ e(r, { id: "item2", children: "Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned!" })
+        /* @__PURE__ */ e(r, { children: "Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned!" })
       ] }),
-      /* @__PURE__ */ t(i, { id: "item3", children: [
-        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
           n,
           {
-            id: "item3",
             text: "Is this accordion any good?",
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ e(r, { id: "item3", children: "Obviously!" })
+        /* @__PURE__ */ e(r, { children: "Obviously!" })
       ] }),
-      /* @__PURE__ */ t(i, { id: "item4", children: [
-        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
           n,
           {
-            id: "item4",
             text: "Who said?",
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ e(r, { id: "item4", children: "Me!" })
+        /* @__PURE__ */ e(r, { children: "Me!" })
+      ] }),
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
+          n,
+          {
+            text: "Long long text, Long long text, Long long text, Long long text, Long long text, Long long text to test the overflow, will it work? Let's see!",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ t(r, { children: [
+          "Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it."
+        ] })
+      ] }),
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
+          n,
+          {
+            text: "Long long text, Long long text, Long long text, Long long text, Long long text, Long long text to test the overflow, will it work? Let's see!",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ t(r, { children: [
+          "Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it."
+        ] })
       ] })
     ] })
   ] }) });
 }
-const g = a.memo(l);
+const p = h.memo(s);
 export {
-  g as default
+  p as default
 };