@cfx-dev/ui-components 4.5.17 → 4.5.18

package/dist/components/Flyout/Flyout.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
 
 export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
+export declare const FLYOUT_ROOT_ID = "cfxui-root";
+export declare const FLYOUT_ROOT_SHRINK_CLASSNAME = "shrink";
 export type FlyoutSize = 'normal' | 'small' | 'xsmall' | 'xxsmall';
-export type FlyoutTheme = 'default' | 'filter';
-export interface FlyoutProps {
+export type FlyoutTheme = 'default' | 'legacy';
+export interface FlyoutProps extends React.PropsWithChildren {
     disabled?: boolean;
     theme?: FlyoutTheme;
     size?: FlyoutSize;
     onClose?(): void;
-    children?: React.ReactNode;
     holderClassName?: string;
+    rootClassName?: string;
+    maskClassName?: string;
 }
 export declare function Flyout(props: FlyoutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Flyout {
@@ -19,4 +22,5 @@ export interface FlyoutHeaderProps {
     onClose?(): void;
     children: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
+    className?: string;
 }

package/dist/components/Flyout/Flyout.js

@@ -1,66 +1,79 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import f from "react";
-import { F as p } from "../../Combination-N-vN9BB-.js";
-import h from "../Button/Button.js";
-import { clsx as r } from "../../utils/clsx.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import y from "react";
+import { F as x } from "../../Combination-N-vN9BB-.js";
+import F from "../Button/Button.js";
+import { clsx as s } from "../../utils/clsx.js";
 import "../../utils/links.js";
-import { Interactive as x } from "../Interactive/Interactive.js";
-import { noop as y } from "../../utils/functional.js";
+import { Interactive as k } from "../Interactive/Interactive.js";
+import { noop as b } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
-import { useOutlet as k } from "../../utils/hooks/useOutlet.js";
-const b = "cfxui__Flyout__root__eba04", v = "cfxui__Flyout__backdrop__57f9e", z = "cfxui__Flyout__mask__72713", C = "cfxui__Flyout__holder__d80b5", N = "cfxui__Flyout__content__04e42", L = "cfxui__Flyout__active__14a29", O = "cfxui__Flyout__header__40009", E = "cfxui__Flyout__title__b235a", e = {
-  root: b,
-  backdrop: v,
-  mask: z,
-  holder: C,
-  content: N,
+import { useKeyboardClose as N } from "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as C } from "../../utils/hooks/useOutlet.js";
+const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O = "cfxui__Flyout__holder__d80b5", L = "cfxui__Flyout__content__04e42", T = "cfxui__Flyout__header__40009", I = "cfxui__Flyout__title__b235a", E = "cfxui__Flyout__active__14a29", U = "cfxui__Flyout__mask__72713", e = {
+  root: v,
+  backdrop: z,
+  holder: O,
+  content: L,
+  header: T,
+  title: I,
+  active: E,
+  "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
+  mask: U,
+  "holder-appearance-btu": "cfxui__Flyout__holder-appearance-btu__84100",
+  "holder-appearance-rtl": "cfxui__Flyout__holder-appearance-rtl__3ccf2",
+  "theme-legacy": "cfxui__Flyout__theme-legacy__a3452",
   "size-normal": "cfxui__Flyout__size-normal__e1165",
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
   "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712",
-  "theme-filter": "cfxui__Flyout__theme-filter__1fcce",
-  active: L,
-  "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
-  "holder-appearance": "cfxui__Flyout__holder-appearance__e818c",
-  header: O,
-  title: E
-}, I = "flyout-outlet";
-function T(c) {
+  "backdrop-appearance-rtl": "cfxui__Flyout__backdrop-appearance-rtl__9f651"
+}, g = "flyout-outlet", H = "cfxui-root", n = "shrink";
+function S(i) {
   const {
     disabled: t = !1,
-    size: l = "normal",
-    theme: a = "default",
-    onClose: s = y,
-    children: n,
-    holderClassName: m
-  } = c, u = k(I);
-  f.useEffect(() => {
+    size: a = "normal",
+    theme: c = "default",
+    onClose: l = b,
+    children: r,
+    holderClassName: u,
+    rootClassName: d,
+    maskClassName: f
+  } = i, p = C(g);
+  y.useEffect(() => {
     if (t)
       return;
-    const _ = document.getElementById("cfxui-root");
-    return _ == null || _.classList.add("shrink"), () => _ == null ? void 0 : _.classList.remove("shrink");
-  }, [t]), F(s);
-  const d = r(e.root, e[`size-${l}`], e[`theme-${a}`], {
-    [e.active]: !t
-  });
-  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ i("div", { className: d, children: [
-    /* @__PURE__ */ o(x, { showPointer: !1, className: e.backdrop, onClick: s }),
-    /* @__PURE__ */ o("div", { className: e.mask, children: /* @__PURE__ */ o("div", { className: r(e.holder, m), children: /* @__PURE__ */ o(p, { disabled: !!t, className: e.content, children: n }) }) })
+    const _ = document.getElementById(H);
+    return _ == null || _.classList.add(n), () => _ == null ? void 0 : _.classList.remove(n);
+  }, [t]), N(l);
+  const h = s(
+    e.root,
+    e[`size-${a}`],
+    e[`theme-${c}`],
+    {
+      [e.active]: !t
+    },
+    d
+  );
+  return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ m("div", { className: h, children: [
+    /* @__PURE__ */ o(k, { showPointer: !1, className: e.backdrop, onClick: l }),
+    /* @__PURE__ */ o("div", { className: s(e.mask, f), children: /* @__PURE__ */ o("div", { className: s(e.holder, u), children: /* @__PURE__ */ o(x, { disabled: t, className: e.content, children: r }) }) })
   ] }) });
 }
-T.Header = function(t) {
+S.Header = function(t) {
   const {
-    onClose: l,
-    children: a,
-    ref: s
+    onClose: a,
+    children: c,
+    ref: l,
+    className: r
   } = t;
-  return /* @__PURE__ */ i("div", { ref: s, className: e.header, children: [
-    /* @__PURE__ */ o("div", { className: e.title, children: a }),
-    !!l && /* @__PURE__ */ o(h, { icon: "Close", onClick: l })
+  return /* @__PURE__ */ m("div", { ref: l, className: s(e.header, r), children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: c }),
+    !!a && /* @__PURE__ */ o(F, { icon: "Close", onClick: a })
   ] });
 };
 export {
-  I as FLYOUT_OUTLET_ID,
-  T as Flyout
+  g as FLYOUT_OUTLET_ID,
+  H as FLYOUT_ROOT_ID,
+  n as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  S as Flyout
 };

package/dist/components/Flyout/FlyoutShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function FlyoutShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FlyoutShowcase>;
+export default _default;

package/dist/components/Flyout/FlyoutShowcase.js

@@ -0,0 +1,28 @@
+import { jsxs as o, Fragment as s, jsx as r } from "react/jsx-runtime";
+import n from "react";
+import { Flyout as l } from "./Flyout.js";
+function i() {
+  const [e, t] = n.useState(!0);
+  return /* @__PURE__ */ o(s, { children: [
+    /* @__PURE__ */ o("button", { type: "button", onClick: () => t(!e), children: [
+      e ? "Open" : "Close",
+      " ",
+      "Flyout"
+    ] }),
+    /* @__PURE__ */ o(
+      l,
+      {
+        disabled: e,
+        onClose: () => t(!0),
+        children: [
+          /* @__PURE__ */ r(l.Header, { onClose: () => t(!0), children: /* @__PURE__ */ r("h1", { children: "Header" }) }),
+          /* @__PURE__ */ r("p", { children: "This is a flyout" })
+        ]
+      }
+    )
+  ] });
+}
+const d = n.memo(i);
+export {
+  d as default
+};

package/dist/components/Flyout/index.d.ts

@@ -1,2 +1,2 @@
-export { FLYOUT_OUTLET_ID, Flyout } from './Flyout';
+export { Flyout, FLYOUT_OUTLET_ID, FLYOUT_ROOT_ID, FLYOUT_ROOT_SHRINK_CLASSNAME, } from './Flyout';
 export type { FlyoutProps, FlyoutSize, FlyoutTheme, } from './Flyout';

package/dist/components/Flyout/index.js

@@ -1,5 +1,7 @@
-import { FLYOUT_OUTLET_ID as r, Flyout as t } from "./Flyout.js";
+import { FLYOUT_OUTLET_ID as _, FLYOUT_ROOT_ID as L, FLYOUT_ROOT_SHRINK_CLASSNAME as F, Flyout as U } from "./Flyout.js";
 export {
-  r as FLYOUT_OUTLET_ID,
-  t as Flyout
+  _ as FLYOUT_OUTLET_ID,
+  L as FLYOUT_ROOT_ID,
+  F as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  U as Flyout
 };

package/dist/main.d.ts

@@ -47,7 +47,7 @@ export { Decorate } from './components/Decorate';
 export type { DecorateProps } from './components/Decorate';
 export { Dot } from './components/Dot';
 export type { DotProps, DotSize } from './components/Dot';
-export { Flyout, FLYOUT_OUTLET_ID } from './components/Flyout';
+export { Flyout, FLYOUT_OUTLET_ID, FLYOUT_ROOT_ID, FLYOUT_ROOT_SHRINK_CLASSNAME, } from './components/Flyout';
 export type { FlyoutSize, FlyoutProps } from './components/Flyout';
 export { Logos } from './components/Logos';
 export type { LogoNames } from './components/Logos';