@cfx-dev/ui-components 0.0.20 → 0.0.22

package/dist/components/BackdropPortal/BackdropPortal.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
+export declare const BACKDROP_OUTLET_ID = "backdrop-outlet";
 export interface BackdropPortalProps {
     children?: React.ReactNode;
 }

package/dist/components/BackdropPortal/BackdropPortal.js

@@ -1,11 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useOutlet as p } from "../../utils/hooks.js";
-function u({
-  children: o
+import { jsx as r } from "react/jsx-runtime";
+import { useOutlet as c } from "../../utils/hooks.js";
+const e = "backdrop-outlet";
+function n({
+  children: t
 }) {
-  const r = p("backdrop");
-  return /* @__PURE__ */ t(r, { children: o });
+  const o = c(e);
+  return /* @__PURE__ */ r(o, { children: t });
 }
 export {
-  u as BackdropPortal
+  e as BACKDROP_OUTLET_ID,
+  n as BackdropPortal
 };

package/dist/components/Button/Button.d.ts

@@ -21,4 +21,6 @@ export interface ButtonProps {
     onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     decorator?: React.ReactNode;
 }
+export declare function ButtonContent(props: Partial<ButtonProps>): React.ReactNode;
+export declare function getButtonClassName(props: Partial<ButtonProps>): string;
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,59 +1,105 @@
-import { jsxs as w, jsx as i } from "react/jsx-runtime";
-import B from "react";
-import { clsx as M } from "../../utils/clsx.js";
-import { noop as n } from "../../utils/functional.js";
-import { s as o } from "../../Button.module-Z6njvP9Z.js";
-const I = B.forwardRef(function(c, u) {
+import { jsx as c, jsxs as j, Fragment as w } from "react/jsx-runtime";
+import b from "react";
+import { clsx as z } from "../../utils/clsx.js";
+import { noop as p } from "../../utils/functional.js";
+import { s as t } from "../../Button.module-Z6njvP9Z.js";
+function F(a) {
   const {
-    text: t = null,
-    icon: e = null,
-    title: d = "",
-    type: f = "button",
-    className: m = "",
-    theme: p = "default",
-    size: h = "normal",
-    disabled: l = !1,
-    straightCorners: b = !1,
-    onClick: x = n,
-    onMouseDown: C = n,
-    onMouseUp: N = n,
-    autofocus: a = !1,
-    fullWidth: k = !1,
-    tabIndex: s,
-    decorator: r = null,
-    ariaLabel: y = ""
-  } = c, g = M(o.root, o[p], o[h], m, {
-    [o.disabled]: l,
-    [o.icon]: !!e && (t === null || typeof t > "u"),
-    [o.text]: !!t,
-    [o.autofocus]: a || typeof s < "u",
-    [o["straight-borders"]]: b,
-    [o.fullWidth]: k
+    text: e = null,
+    icon: l = null,
+    decorator: o = null
+  } = a;
+  return /* @__PURE__ */ j(w, { children: [
+    !!l && /* @__PURE__ */ c("span", { className: t["icon-node"], children: l }),
+    e,
+    !!o && /* @__PURE__ */ c("div", { className: t.decorator, children: o })
+  ] });
+}
+function I(a) {
+  const {
+    text: e = null,
+    icon: l = null,
+    theme: o = "default",
+    size: s = "normal",
+    disabled: f = !1,
+    straightCorners: d = !1,
+    className: r = "",
+    autofocus: u = !1,
+    fullWidth: i = !1,
+    tabIndex: n
+  } = a;
+  return z(t.root, t[o], t[s], r, {
+    [t.disabled]: f,
+    [t.icon]: !!l && (e === null || typeof e > "u"),
+    [t.text]: !!e,
+    [t.autofocus]: u || typeof n < "u",
+    [t["straight-borders"]]: d,
+    [t.fullWidth]: i
   });
-  return /* @__PURE__ */ w(
+}
+const U = b.forwardRef(function(e, l) {
+  const {
+    text: o = null,
+    icon: s = null,
+    title: f = "",
+    type: d = "button",
+    className: r = "",
+    theme: u = "default",
+    size: i = "normal",
+    disabled: n = !1,
+    straightCorners: x = !1,
+    onClick: C = p,
+    onMouseDown: g = p,
+    onMouseUp: k = p,
+    autofocus: m = !1,
+    fullWidth: N = !1,
+    tabIndex: h,
+    ariaLabel: B = ""
+  } = e, y = b.useMemo(() => I({
+    text: o,
+    icon: s,
+    theme: u,
+    size: i,
+    disabled: n,
+    straightCorners: x,
+    className: r,
+    autofocus: m,
+    fullWidth: N,
+    tabIndex: h
+  }), [
+    m,
+    r,
+    n,
+    N,
+    s,
+    i,
+    x,
+    h,
+    o,
+    u
+  ]), M = b.useCallback((W) => {
+    n || C(W);
+  }, [n, C]);
+  return /* @__PURE__ */ c(
     "button",
     {
-      ref: u,
-      disabled: l,
-      className: g,
-      onClick: (j) => {
-        l || x(j);
-      },
-      onMouseDown: C,
-      onMouseUp: N,
-      autoFocus: a,
-      tabIndex: s,
-      title: d,
-      type: f,
-      "aria-label": y,
-      children: [
-        !!e && /* @__PURE__ */ i("span", { className: o["icon-node"], children: e }),
-        t,
-        !!r && /* @__PURE__ */ i("div", { className: o.decorator, children: r })
-      ]
+      ref: l,
+      disabled: n,
+      className: y,
+      onClick: M,
+      onMouseDown: g,
+      onMouseUp: k,
+      autoFocus: m,
+      tabIndex: h,
+      title: f,
+      type: d,
+      "aria-label": B,
+      children: /* @__PURE__ */ c(F, { ...e })
     }
   );
 });
 export {
-  I as Button
+  U as Button,
+  F as ButtonContent,
+  I as getButtonClassName
 };

package/dist/components/Button/LinkButton.d.ts

@@ -1,19 +1,11 @@
 import { default as React } from 'react';
-import { ButtonSize, ButtonTheme } from './Button';
+import { ButtonProps } from './Button';
 
-export interface LinkButtonProps {
+export interface LinkButtonProps extends Omit<ButtonProps, 'autofocus' | 'onCLick' | 'onMouseDown' | 'onMouseUp' | 'ariaLabel'> {
     to: string;
-    text?: React.ReactNode;
-    title?: string;
-    icon?: React.ReactNode;
-    theme?: ButtonTheme;
-    size?: ButtonSize;
-    disabled?: boolean;
+    isHrefProp?: boolean;
     onClick?(): void;
-    tabIndex?: number;
-    className?: string;
     target?: string;
     Component?: React.ElementType;
-    decorator?: React.ReactNode;
 }
 export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/Button/LinkButton.js

@@ -1,48 +1,33 @@
-import { jsxs as R, jsx as l } from "react/jsx-runtime";
-import a from "react";
-import { clsx as j } from "../../utils/clsx.js";
-import { noop as B } from "../../utils/functional.js";
-import { isExternalUrl as E } from "../../utils/links.js";
-import { s as o } from "../../Button.module-Z6njvP9Z.js";
-const P = a.forwardRef(function(i, c) {
+import { jsx as i } from "react/jsx-runtime";
+import n from "react";
+import { noop as k } from "../../utils/functional.js";
+import { isExternalUrl as d } from "../../utils/links.js";
+import { getButtonClassName as x, ButtonContent as B } from "./Button.js";
+const M = n.forwardRef(function(t, a) {
   const {
-    to: e,
-    text: t = null,
-    icon: n = null,
+    to: o,
     title: m = "",
-    className: d = "",
-    theme: f = "default",
-    size: p = "normal",
-    disabled: u = !1,
-    tabIndex: x,
-    target: k = "",
-    onClick: C = B,
-    decorator: s = null,
-    Component: h
-  } = i, N = j(o.root, o[f], o[p], d, {
-    [o.disabled]: u,
-    [o.icon]: !!n && !t,
-    [o.text]: !!t
-  }), r = E(e), b = r ? "a" : h || "a", L = a.useMemo(() => r ? { href: e } : { to: e }, [e, r]);
-  return /* @__PURE__ */ R(
-    b,
+    tabIndex: s,
+    target: f = "",
+    onClick: l = k,
+    isHrefProp: r = !1,
+    Component: c
+  } = t, u = n.useMemo(() => x(t), [t]), e = d(o), C = e ? "a" : c || "a", p = n.useMemo(() => e || r ? { href: o } : { to: o }, [o, e, r]);
+  return /* @__PURE__ */ i(
+    C,
     {
-      ref: c,
-      className: N,
-      tabIndex: x,
+      ref: a,
+      className: u,
+      tabIndex: s,
       title: m,
-      target: k,
+      target: f,
       rel: "noopener noreferrer",
-      onClickCapture: C,
-      ...L,
-      children: [
-        !!n && /* @__PURE__ */ l("span", { className: o["icon-node"], children: n }),
-        t,
-        !!s && /* @__PURE__ */ l("div", { className: o.decorator, children: s })
-      ]
+      onClickCapture: l,
+      ...p,
+      children: /* @__PURE__ */ i(B, { ...t })
     }
   );
 });
 export {
-  P as LinkButton
+  M as LinkButton
 };

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
+export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
 export interface FlyoutProps {
     disabled?: boolean;
     size?: 'normal' | 'small' | 'xsmall';

package/dist/components/Flyout/Flyout.js

@@ -1,59 +1,60 @@
 import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import d from "react";
+import _ from "react";
 import { F as p } from "../../Combination-Dp_plIQU.js";
 import { Button as h } from "../Button/Button.js";
 import { Interactive as f } from "../Interactive/Interactive.js";
 import { I as u } from "../../Icons-BlBKvJD8.js";
-import { clsx as c } from "../../utils/clsx.js";
+import { clsx as l } from "../../utils/clsx.js";
 import { noop as v } from "../../utils/functional.js";
 import { useOutlet as b, useKeyboardClose as z } from "../../utils/hooks.js";
-import '../../assets/Flyout.css';const N = "_root_11ks7_1", C = "_holder_11ks7_6", y = "_active_11ks7_15", x = "_backdrop_11ks7_15", F = "_mask_11ks7_28", I = "_content_11ks7_90", L = "_header_11ks7_95", g = "_title_11ks7_101", e = {
+import '../../assets/Flyout.css';const N = "_root_11ks7_1", C = "_holder_11ks7_6", y = "_active_11ks7_15", F = "_backdrop_11ks7_15", x = "_mask_11ks7_28", I = "_content_11ks7_90", L = "_header_11ks7_95", O = "_title_11ks7_101", e = {
   root: N,
   "size-normal": "_size-normal_11ks7_6",
   holder: C,
   "size-small": "_size-small_11ks7_9",
   "size-xsmall": "_size-xsmall_11ks7_12",
   active: y,
-  backdrop: x,
+  backdrop: F,
   "backdrop-appearance": "_backdrop-appearance_11ks7_1",
-  mask: F,
+  mask: x,
   "holder-appearance": "_holder-appearance_11ks7_1",
   content: I,
   header: L,
-  title: g
-};
-function j(n) {
+  title: O
+}, E = "flyout-outlet";
+function T(c) {
   const {
     disabled: o = !1,
     size: a = "normal",
     onClose: r = v,
-    children: l,
-    holderClassName: m
-  } = n, _ = b("flyout-outlet");
-  d.useEffect(() => {
+    children: n,
+    holderClassName: d
+  } = c, m = b(E);
+  _.useEffect(() => {
     if (o)
       return;
     const t = document.getElementById("cfxui-root");
     return t == null || t.classList.add("shrink"), () => t == null ? void 0 : t.classList.remove("shrink");
   }, [o]), z(r);
-  const k = c(e.root, e[`size-${a}`], {
+  const k = l(e.root, e[`size-${a}`], {
     [e.active]: !o
   });
-  return /* @__PURE__ */ s(_, { children: /* @__PURE__ */ i("div", { className: k, children: [
+  return /* @__PURE__ */ s(m, { children: /* @__PURE__ */ i("div", { className: k, children: [
     /* @__PURE__ */ s(f, { showPointer: !1, className: e.backdrop, onClick: r }),
-    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: c(e.holder, m), children: /* @__PURE__ */ s(p, { disabled: !!o, className: e.content, children: l }) }) })
+    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, d), children: /* @__PURE__ */ s(p, { disabled: !!o, className: e.content, children: n }) }) })
   ] }) });
 }
-j.Header = d.forwardRef(function(o, a) {
+T.Header = _.forwardRef(function(o, a) {
   const {
     onClose: r,
-    children: l
+    children: n
   } = o;
   return /* @__PURE__ */ i("div", { ref: a, className: e.header, children: [
-    /* @__PURE__ */ s("div", { className: e.title, children: l }),
+    /* @__PURE__ */ s("div", { className: e.title, children: n }),
     !!r && /* @__PURE__ */ s(h, { size: "large", icon: u.exit, onClick: r })
   ] });
 });
 export {
-  j as Flyout
+  E as FLYOUT_OUTLET_ID,
+  T as Flyout
 };

package/dist/components/Overlay/Overlay.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
+export declare const OVERLAY_OUTLET_ID = "overlay-outlet";
 export interface OverlayProps {
     children: React.ReactNode;
     className?: string;

package/dist/components/Overlay/Overlay.js

@@ -1,28 +1,29 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import a from "react";
 import { F as i } from "../../Combination-Dp_plIQU.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
 import { clsx as e } from "../../utils/clsx.js";
 import { useOutlet as u } from "../../utils/hooks.js";
-import '../../assets/Overlay.css';const f = "_root_15udb_1", _ = "_backdrop_15udb_9", p = "_content_15udb_27", n = {
-  root: f,
-  backdrop: _,
+import '../../assets/Overlay.css';const _ = "_root_15udb_1", f = "_backdrop_15udb_9", p = "_content_15udb_27", n = {
+  root: _,
+  backdrop: f,
   "backdrop-appearance": "_backdrop-appearance_15udb_1",
   content: p
-};
+}, b = "overlay-outlet";
 function l(c) {
   const {
     className: o,
-    children: r
-  } = c, d = e(n.root, o), s = u("overlay-outlet");
-  return /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t("div", { className: d, children: r }) });
+    children: t
+  } = c, s = e(n.root, o), d = u(b);
+  return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("div", { className: s, children: t }) });
 }
-l.Backdrop = a.forwardRef(function(o, r) {
-  return /* @__PURE__ */ t(m, { ref: r, onClick: o.onClick, className: e(n.backdrop, o.className), children: o.children });
+l.Backdrop = a.forwardRef(function(o, t) {
+  return /* @__PURE__ */ r(m, { ref: t, onClick: o.onClick, className: e(n.backdrop, o.className), children: o.children });
 });
-l.Content = a.forwardRef(function(o, r) {
-  return /* @__PURE__ */ t("div", { ref: r, className: e(n.content, o.className), children: /* @__PURE__ */ t(i, { children: o.children }) });
+l.Content = a.forwardRef(function(o, t) {
+  return /* @__PURE__ */ r("div", { ref: t, className: e(n.content, o.className), children: /* @__PURE__ */ r(i, { children: o.children }) });
 });
 export {
+  b as OVERLAY_OUTLET_ID,
   l as Overlay
 };

package/dist/components/Shroud/Shroud.js

@@ -1,17 +1,18 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import s from "react";
-import { ui as p } from "../ui.js";
-import { useOutletBefore as v, useWindowResize as x } from "../../utils/hooks.js";
-import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
-  root: _,
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import r from "react";
+import { TITLE_OUTLET_ID as p } from "../Title/Title.js";
+import { ui as _ } from "../ui.js";
+import { useOutlet as v, useWindowResize as x } from "../../utils/hooks.js";
+import '../../assets/Shroud.css';const b = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
+  root: b,
   tile: g
-}, S = s.forwardRef(function(c, n) {
+}, S = r.forwardRef(function(c, n) {
   const {
-    forRef: r
-  } = c, [u, d] = s.useState({}), f = v("title"), i = s.useCallback(() => {
-    if (!r.current)
+    forRef: s
+  } = c, [u, d] = r.useState({}), f = v(p, "before"), i = r.useCallback(() => {
+    if (!s.current)
       return;
-    const o = r.current.getBoundingClientRect(), h = {
+    const o = s.current.getBoundingClientRect(), m = {
       x: o.x,
       y: o.y,
       w: o.width,
@@ -21,14 +22,14 @@ import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", g = "_tile_7v6x1_6",
     };
     d(
       Object.fromEntries(
-        Object.entries(h).flatMap(([l, a]) => [
-          [`--${l}`, p.px(a)],
-          [`--${l}-raw`, a]
+        Object.entries(m).flatMap(([a, l]) => [
+          [`--${a}`, _.px(l)],
+          [`--${a}-raw`, l]
         ])
       )
     );
   }, []);
-  return s.useEffect(i, []), x(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: u, children: [
+  return r.useEffect(i, []), x(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

package/dist/components/Title/Title.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
+export declare const TITLE_OUTLET_ID = "title-outlet";
 type FixedOn = 'top' | 'top-left' | 'right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left';
 type TitleChildren = ((ref: React.RefObject<any>) => React.ReactNode) | React.ReactElement;
 export interface TitleProps {

package/dist/components/Title/Title.js

@@ -1,11 +1,11 @@
-import { jsxs as L, Fragment as k, jsx as p } from "react/jsx-runtime";
+import { jsxs as T, Fragment as w, jsx as p } from "react/jsx-runtime";
 import f from "react";
 import { clsx as O } from "../../utils/clsx.js";
-import { useOutlet as y } from "../../utils/hooks.js";
-import { mergeRefs as C } from "../../utils/mergeRefs.js";
-import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
-  wrapper: R,
-  appearance: T,
+import { useOutlet as k } from "../../utils/hooks.js";
+import { mergeRefs as y } from "../../utils/mergeRefs.js";
+import '../../assets/Title.css';const C = "_wrapper_1l1sn_1", R = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
+  wrapper: C,
+  appearance: R,
   animated: $,
   "fixed-on-top": "_fixed-on-top_1l1sn_29",
   "fixed-on-top-left": "_fixed-on-top-left_1l1sn_35",
@@ -16,9 +16,9 @@ import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1
   "fixed-on-right": "_fixed-on-right_1l1sn_65",
   root: M,
   shortcut: N
-}, i = 10;
-function S(a, l, [e, n]) {
-  const r = a ? n : n - 20, s = a ? e : e + 16;
+}, i = 10, S = "title-outlet";
+function F(l, a, [e, n]) {
+  const r = l ? n : n - 20, s = l ? e : e + 16;
   return {
     // Prefer top and left for element to snap to the pixel grid
     // as when using transform it will become blurry in most of the cases as top and left values are floats
@@ -26,18 +26,18 @@ function S(a, l, [e, n]) {
     left: `${s}px`,
     // transform: `translate(${left}px, ${top}px)`,
     maxWidth: `calc(100vw - ${s}px - 10px)`,
-    animationDelay: `${l}ms`
+    animationDelay: `${a}ms`
   };
 }
-function F(a, l) {
+function I(l, a) {
   const {
     x: e,
     y: n,
     width: r,
     height: s
-  } = a.getBoundingClientRect();
+  } = l.getBoundingClientRect();
   let t = 0, c = 0;
-  switch (l) {
+  switch (a) {
     case "top": {
       t = e + r / 2, c = n - i;
       break;
@@ -69,21 +69,21 @@ function F(a, l) {
   }
   return [t, c];
 }
-function D(a) {
+function B(l) {
   const {
-    title: l,
+    title: a,
     children: e,
     animated: n = !0,
     fixedOn: r = "bottom",
     delay: s = 0
-  } = a, t = f.useRef(r);
+  } = l, t = f.useRef(r);
   t.current = r;
-  const c = y("title"), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
+  const c = k(S), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
   f.useEffect(() => {
     if (!o.current)
       return;
     const d = (u) => {
-      t.current && o.current ? _(F(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
+      t.current && o.current ? _(I(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
     }, v = () => {
       x(!1);
     }, b = (u) => {
@@ -94,20 +94,21 @@ function D(a) {
     };
   }, []);
   let h = null;
-  if (g && l) {
+  if (g && a) {
     const d = O(m.wrapper, m[`fixed-on-${r}`], {
       [m.animated]: n
     });
-    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: S(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: l }) }) });
+    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: F(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: a }) }) });
   }
-  const w = typeof e == "function" ? e(o) : f.cloneElement(e, {
-    ref: C(o, e.props.ref)
+  const L = typeof e == "function" ? e(o) : f.cloneElement(e, {
+    ref: y(o, e.props.ref)
   });
-  return /* @__PURE__ */ L(k, { children: [
-    w,
+  return /* @__PURE__ */ T(w, { children: [
+    L,
     h
   ] });
 }
 export {
-  D as Title
+  S as TITLE_OUTLET_ID,
+  B as Title
 };

package/dist/main.d.ts

@@ -1,25 +1,26 @@
 export { mergeRefs } from './utils/mergeRefs';
 export { clsx } from './utils/clsx';
 export { getValue } from './utils/getValue';
-export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, useOutletAfter, useOutletBefore, } from './utils/hooks';
+export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, } from './utils/hooks';
 export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
 export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';
 export { clamp01, clamp, } from './utils/math';
 export { unicodeCharAt, splitByIndices, replaceRange, normalizeSlashes, isTrueString, isFalseString, } from './utils/string';
 export type { ValueOrGetter } from './utils/getValue';
 export type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
+export type { OutletPosition } from './utils/hooks';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';
 export { ButtonBar } from './components/Button/ButtonBar';
 export { Avatar } from './components/Avatar/Avatar';
-export { BackdropPortal } from './components/BackdropPortal/BackdropPortal';
+export { BackdropPortal, BACKDROP_OUTLET_ID } from './components/BackdropPortal/BackdropPortal';
 export { Badge } from './components/Badge/Badge';
 export { ControlBox } from './components/ControlBox/ControlBox';
 export { CountryFlag } from './components/CountryFlag/CountryFlag';
 export { Decorate } from './components/Decorate/Decorate';
 export { Dot } from './components/Dot/Dot';
-export { Flyout } from './components/Flyout/Flyout';
+export { Flyout, FLYOUT_OUTLET_ID } from './components/Flyout/Flyout';
 export { Icon } from './components/Icon/Icon';
 export { Indicator } from './components/Indicator/Indicator';
 export { InfoPanel } from './components/InfoPanel/InfoPanel';
@@ -38,7 +39,7 @@ export { VirtualScrollable } from './components/Layout/Scrollable/VirtualScrolla
 export { Loaf } from './components/Loaf/Loaf';
 export { Modal } from './components/Modal/Modal';
 export { NavList } from './components/NavList/NavList';
-export { Overlay } from './components/Overlay/Overlay';
+export { Overlay, OVERLAY_OUTLET_ID } from './components/Overlay/Overlay';
 export { Popover } from './components/Popover/Popover';
 export { PremiumBadge } from './components/PremiumBadge/PremiumBadge';
 export { Prose } from './components/Prose/Prose';
@@ -52,7 +53,7 @@ export { Switch } from './components/Switch/Switch';
 export { Tabular } from './components/Tabular/Tabular';
 export { Text, TextBlock } from './components/Text/Text';
 export { Textarea } from './components/Textarea/Textarea';
-export { Title } from './components/Title/Title';
+export { Title, TITLE_OUTLET_ID } from './components/Title/Title';
 export { InputDropzone } from './components/InputDropzone/InputDropzone';
 export type { InputDropzoneProps, FileWithPath } from './components/InputDropzone/InputDropzone';
 export { Icons, BrandIcon } from './style-guide/Icons/Icons';

package/dist/main.js

@@ -1,145 +1,147 @@
 import { mergeRefs as e } from "./utils/mergeRefs.js";
 import { clsx as p } from "./utils/clsx.js";
-import { getValue as f } from "./utils/getValue.js";
-import { useDynamicRef as a, useGlobalKeyboardEvent as l, useInstance as n, useKeyboardClose as i, useOutlet as s, useOutletAfter as u, useOutletBefore as c, useWindowResize as d } from "./utils/hooks.js";
-import { identity as y, invoke as B, noop as I, returnFalse as k, returnTrue as g } from "./utils/functional.js";
-import { Linkify as b, defaultLinkReplacer as h, defaultLinkReplacerx as L, isExternalUrl as v, linkify as C, linkifyx as P, matchLinkNodes as T, matchLinks as F } from "./utils/links.js";
-import { clamp as D, clamp01 as z } from "./utils/math.js";
-import { isFalseString as w, isTrueString as E, normalizeSlashes as K, replaceRange as N, splitByIndices as V, unicodeCharAt as G } from "./utils/string.js";
-import { Checkbox as U } from "./components/Checkbox/Checkbox.js";
-import { Button as j } from "./components/Button/Button.js";
-import { LinkButton as H } from "./components/Button/LinkButton.js";
-import { ButtonBar as Q } from "./components/Button/ButtonBar.js";
-import { Avatar as Y } from "./components/Avatar/Avatar.js";
-import { BackdropPortal as _ } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as rr } from "./components/Badge/Badge.js";
-import { ControlBox as er } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as pr } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as fr } from "./components/Decorate/Decorate.js";
-import { Dot as ar } from "./components/Dot/Dot.js";
-import { Flyout as nr } from "./components/Flyout/Flyout.js";
+import { getValue as m } from "./utils/getValue.js";
+import { useDynamicRef as a, useGlobalKeyboardEvent as n, useInstance as l, useKeyboardClose as i, useOutlet as s, useWindowResize as u } from "./utils/hooks.js";
+import { identity as d, invoke as I, noop as T, returnFalse as L, returnTrue as S } from "./utils/functional.js";
+import { Linkify as B, defaultLinkReplacer as k, defaultLinkReplacerx as R, isExternalUrl as O, linkify as g, linkifyx as D, matchLinkNodes as b, matchLinks as h } from "./utils/links.js";
+import { clamp as E, clamp01 as P } from "./utils/math.js";
+import { isFalseString as v, isTrueString as F, normalizeSlashes as U, replaceRange as A, splitByIndices as z, unicodeCharAt as K } from "./utils/string.js";
+import { Checkbox as w } from "./components/Checkbox/Checkbox.js";
+import { Button as Y } from "./components/Button/Button.js";
+import { LinkButton as M } from "./components/Button/LinkButton.js";
+import { ButtonBar as j } from "./components/Button/ButtonBar.js";
+import { Avatar as H } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Q, BackdropPortal as X } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as $ } from "./components/Badge/Badge.js";
+import { ControlBox as or } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as tr } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as xr } from "./components/Decorate/Decorate.js";
+import { Dot as fr } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as nr, Flyout as lr } from "./components/Flyout/Flyout.js";
 import { Icon as sr } from "./components/Icon/Icon.js";
 import { Indicator as cr } from "./components/Indicator/Indicator.js";
-import { InfoPanel as Sr } from "./components/InfoPanel/InfoPanel.js";
-import { Input as Br } from "./components/Input/Input.js";
-import { RichInput as kr } from "./components/Input/RichInput.js";
-import { Interactive as Rr } from "./components/Interactive/Interactive.js";
-import { Island as hr } from "./components/Island/Island.js";
-import { Box as vr } from "./components/Layout/Box/Box.js";
-import { Center as Pr } from "./components/Layout/Center/Center.js";
-import { Flex as Fr } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as Dr } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as Ar } from "./components/Layout/Pad/Pad.js";
-import { Page as Er } from "./components/Layout/Page/Page.js";
-import { Scrollable as Nr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as Gr } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as Ur } from "./components/Loaf/Loaf.js";
-import { Modal as jr } from "./components/Modal/Modal.js";
-import { NavList as Hr } from "./components/NavList/NavList.js";
-import { Overlay as Qr } from "./components/Overlay/Overlay.js";
-import { Popover as Yr } from "./components/Popover/Popover.js";
-import { PremiumBadge as _r } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as ro } from "./components/Prose/Prose.js";
-import { Radio as eo } from "./components/Radio/Radio.js";
-import { Select as po } from "./components/Select/Select.js";
+import { InfoPanel as Ir } from "./components/InfoPanel/InfoPanel.js";
+import { Input as Lr } from "./components/Input/Input.js";
+import { RichInput as yr } from "./components/Input/RichInput.js";
+import { Interactive as kr } from "./components/Interactive/Interactive.js";
+import { Island as Or } from "./components/Island/Island.js";
+import { Box as Dr } from "./components/Layout/Box/Box.js";
+import { Center as hr } from "./components/Layout/Center/Center.js";
+import { Flex as Er } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as _r } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Fr } from "./components/Layout/Pad/Pad.js";
+import { Page as Ar } from "./components/Layout/Page/Page.js";
+import { Scrollable as Kr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as wr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as Yr } from "./components/Loaf/Loaf.js";
+import { Modal as Mr } from "./components/Modal/Modal.js";
+import { NavList as jr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Hr, Overlay as Jr } from "./components/Overlay/Overlay.js";
+import { Popover as Xr } from "./components/Popover/Popover.js";
+import { PremiumBadge as $r } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as oo } from "./components/Prose/Prose.js";
+import { Radio as to } from "./components/Radio/Radio.js";
+import { Select as xo } from "./components/Select/Select.js";
 import { Separator as fo } from "./components/Separator/Separator.js";
-import { Shroud as ao } from "./components/Shroud/Shroud.js";
-import { Spacer as no } from "./components/Spacer/Spacer.js";
-import { Style as so, useContextualStyle as uo } from "./components/Style/Style.js";
-import { Switch as So } from "./components/Switch/Switch.js";
-import { Tabular as Bo } from "./components/Tabular/Tabular.js";
-import { Text as ko, TextBlock as go } from "./components/Text/Text.js";
-import { Textarea as bo } from "./components/Textarea/Textarea.js";
-import { Title as Lo } from "./components/Title/Title.js";
+import { Shroud as no } from "./components/Shroud/Shroud.js";
+import { Spacer as io } from "./components/Spacer/Spacer.js";
+import { Style as uo, useContextualStyle as co } from "./components/Style/Style.js";
+import { Switch as To } from "./components/Switch/Switch.js";
+import { Tabular as So } from "./components/Tabular/Tabular.js";
+import { Text as Bo, TextBlock as ko } from "./components/Text/Text.js";
+import { Textarea as Oo } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as Do, Title as bo } from "./components/Title/Title.js";
 import { InputDropzone as Co } from "./components/InputDropzone/InputDropzone.js";
-import { B as To, I as Fo } from "./Icons-BlBKvJD8.js";
-import { OnScreenSensor as Do } from "./components/OnScreenSensor.js";
+import { B as Po, I as _o } from "./Icons-BlBKvJD8.js";
+import { OnScreenSensor as Fo } from "./components/OnScreenSensor.js";
 import { ui as Ao } from "./components/ui.js";
-import { Symbols as Eo } from "./components/Symbols.js";
+import { Symbols as Ko } from "./components/Symbols.js";
 export {
-  Y as Avatar,
-  _ as BackdropPortal,
-  rr as Badge,
-  vr as Box,
-  To as BrandIcon,
-  j as Button,
-  Q as ButtonBar,
-  Pr as Center,
-  U as Checkbox,
-  er as ControlBox,
-  pr as CountryFlag,
-  fr as Decorate,
-  ar as Dot,
-  Fr as Flex,
-  Dr as FlexRestricter,
-  nr as Flyout,
+  H as Avatar,
+  Q as BACKDROP_OUTLET_ID,
+  X as BackdropPortal,
+  $ as Badge,
+  Dr as Box,
+  Po as BrandIcon,
+  Y as Button,
+  j as ButtonBar,
+  hr as Center,
+  w as Checkbox,
+  or as ControlBox,
+  tr as CountryFlag,
+  xr as Decorate,
+  fr as Dot,
+  nr as FLYOUT_OUTLET_ID,
+  Er as Flex,
+  _r as FlexRestricter,
+  lr as Flyout,
   sr as Icon,
-  Fo as Icons,
+  _o as Icons,
   cr as Indicator,
-  Sr as InfoPanel,
-  Br as Input,
+  Ir as InfoPanel,
+  Lr as Input,
   Co as InputDropzone,
-  Rr as Interactive,
-  hr as Island,
-  H as LinkButton,
-  b as Linkify,
-  Ur as Loaf,
-  jr as Modal,
-  Hr as NavList,
-  Do as OnScreenSensor,
-  Qr as Overlay,
-  Ar as Pad,
-  Er as Page,
-  Yr as Popover,
-  _r as PremiumBadge,
-  ro as Prose,
-  eo as Radio,
-  kr as RichInput,
-  Nr as Scrollable,
-  po as Select,
+  kr as Interactive,
+  Or as Island,
+  M as LinkButton,
+  B as Linkify,
+  Yr as Loaf,
+  Mr as Modal,
+  jr as NavList,
+  Hr as OVERLAY_OUTLET_ID,
+  Fo as OnScreenSensor,
+  Jr as Overlay,
+  Fr as Pad,
+  Ar as Page,
+  Xr as Popover,
+  $r as PremiumBadge,
+  oo as Prose,
+  to as Radio,
+  yr as RichInput,
+  Kr as Scrollable,
+  xo as Select,
   fo as Separator,
-  ao as Shroud,
-  no as Spacer,
-  so as Style,
-  So as Switch,
-  Eo as Symbols,
-  Bo as Tabular,
-  ko as Text,
-  go as TextBlock,
-  bo as Textarea,
-  Lo as Title,
-  Gr as VirtualScrollable,
-  D as clamp,
-  z as clamp01,
+  no as Shroud,
+  io as Spacer,
+  uo as Style,
+  To as Switch,
+  Ko as Symbols,
+  Do as TITLE_OUTLET_ID,
+  So as Tabular,
+  Bo as Text,
+  ko as TextBlock,
+  Oo as Textarea,
+  bo as Title,
+  wr as VirtualScrollable,
+  E as clamp,
+  P as clamp01,
   p as clsx,
-  h as defaultLinkReplacer,
-  L as defaultLinkReplacerx,
-  f as getValue,
-  y as identity,
-  B as invoke,
-  v as isExternalUrl,
-  w as isFalseString,
-  E as isTrueString,
-  C as linkify,
-  P as linkifyx,
-  T as matchLinkNodes,
-  F as matchLinks,
+  k as defaultLinkReplacer,
+  R as defaultLinkReplacerx,
+  m as getValue,
+  d as identity,
+  I as invoke,
+  O as isExternalUrl,
+  v as isFalseString,
+  F as isTrueString,
+  g as linkify,
+  D as linkifyx,
+  b as matchLinkNodes,
+  h as matchLinks,
   e as mergeRefs,
-  I as noop,
-  K as normalizeSlashes,
-  N as replaceRange,
-  k as returnFalse,
-  g as returnTrue,
-  V as splitByIndices,
+  T as noop,
+  U as normalizeSlashes,
+  A as replaceRange,
+  L as returnFalse,
+  S as returnTrue,
+  z as splitByIndices,
   Ao as ui,
-  G as unicodeCharAt,
-  uo as useContextualStyle,
+  K as unicodeCharAt,
+  co as useContextualStyle,
   a as useDynamicRef,
-  l as useGlobalKeyboardEvent,
-  n as useInstance,
+  n as useGlobalKeyboardEvent,
+  l as useInstance,
   i as useKeyboardClose,
   s as useOutlet,
-  u as useOutletAfter,
-  c as useOutletBefore,
-  d as useWindowResize
+  u as useWindowResize
 };

package/dist/utils/hooks.d.ts

@@ -11,6 +11,5 @@ export declare namespace useKeyboardClose {
     var isCloseEvent: (event: KeyboardEvent) => boolean;
 }
 export declare function useWindowResize<T extends () => void>(callback: T): void;
-export declare function useOutletAfter(id: string): React.FC<React.PropsWithChildren>;
-export declare function useOutletBefore(id: string): React.FC<React.PropsWithChildren>;
-export declare function useOutlet(id: string): React.FC<React.PropsWithChildren>;
+export type OutletPosition = 'original' | 'before' | 'after';
+export declare function useOutlet(id: string, position?: OutletPosition): React.FC<React.PropsWithChildren>;

package/dist/utils/hooks.js

@@ -1,24 +1,24 @@
-import { jsx as y } from "react/jsx-runtime";
-import u from "react";
-import { R as d } from "../index-2hJuj4UN.js";
-const f = Symbol("Uninitialized");
-function P(e, ...t) {
-  const n = u.useRef(f);
-  return n.current === f && (n.current = e(...t)), n.current;
+import { jsx as E } from "react/jsx-runtime";
+import o from "react";
+import { R as m } from "../index-2hJuj4UN.js";
+const a = Symbol("Uninitialized");
+function h(e, ...t) {
+  const r = o.useRef(a);
+  return r.current === a && (r.current = e(...t)), r.current;
 }
-function m(e) {
-  const t = u.useRef(e);
+function l(e) {
+  const t = o.useRef(e);
   return t.current = e, t;
 }
-function i(e, t = "keydown", n) {
-  u.useEffect(() => {
-    const o = (r) => {
-      i.shouldProcessEvent(r) && e.current(r);
+function i(e, t = "keydown", r) {
+  o.useEffect(() => {
+    const s = (n) => {
+      i.shouldProcessEvent(n) && e.current(n);
     };
-    return window.addEventListener(t, o, n), () => {
-      window.removeEventListener(t, o, n);
+    return window.addEventListener(t, s, r), () => {
+      window.removeEventListener(t, s, r);
     };
-  }, [t, n]);
+  }, [t, r]);
 }
 i.shouldProcessEvent = (e) => {
   if (e.target instanceof Element) {
@@ -35,68 +35,45 @@ i.shouldProcessEvent = (e) => {
   }
   return !0;
 };
-function E(e) {
-  const t = m((n) => {
-    E.isCloseEvent(n) && e();
+function d(e) {
+  const t = l((r) => {
+    d.isCloseEvent(r) && e();
   });
   i(t);
 }
-E.isCloseEvent = (e) => e.key === "Escape";
+d.isCloseEvent = (e) => e.key === "Escape";
 function v(e) {
-  const t = m(e);
-  u.useEffect(() => {
-    const n = () => t.current();
-    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  const t = l(e);
+  o.useEffect(() => {
+    const r = () => t.current();
+    return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
   }, []);
 }
-function a(e) {
+function b(e) {
   const {
     children: t
   } = e;
-  return /* @__PURE__ */ y("div", { style: { display: "none" }, children: t });
+  return /* @__PURE__ */ E("div", { style: { display: "none" }, children: t });
 }
-function h(e) {
-  const [t, n] = u.useState(() => a);
-  return u.useEffect(() => {
-    const o = `${e}_after`;
-    let r = document.getElementById(o), c = document.getElementById(e);
-    c || (c = document.createElement("div"), c.id = e, document.body.appendChild(c)), r || (r = document.createElement("div"), r.id = o, c.after(r));
-    const s = ({
-      children: l
-    }) => d.createPortal(l, r);
-    n(() => s);
-  }, [e]), t;
-}
-function R(e) {
-  const [t, n] = u.useState(() => a);
-  return u.useEffect(() => {
-    const o = `${e}_before`;
-    let r = document.getElementById(o), c = document.getElementById(e);
-    c || (c = document.createElement("div"), c.id = e, document.body.appendChild(c)), r || (r = document.createElement("div"), r.id = o, document.body.insertBefore(r, c));
-    const s = ({
-      children: l
-    }) => d.createPortal(l, r);
-    n(() => s);
-  }, [e]), t;
-}
-function B(e) {
-  const [t, n] = u.useState(() => a);
-  return u.useEffect(() => {
-    let o = document.getElementById(e);
-    o || (o = document.createElement("div"), o.id = e, document.body.appendChild(o));
-    const r = ({
+function g(e, t = "original") {
+  const [r, s] = o.useState(() => b);
+  return o.useEffect(() => {
+    let n = document.getElementById(e);
+    if (n || (n = document.createElement("div"), n.id = e, document.body.appendChild(n)), t !== "original") {
+      const c = n, u = `${e}_${t}`;
+      n = document.getElementById(u), n || (n = document.createElement("div"), n.id = u, t === "before" ? document.body.insertBefore(n, c) : c.after(n));
+    }
+    const f = ({
       children: c
-    }) => d.createPortal(c, o);
-    n(() => r);
-  }, [e]), t;
+    }) => m.createPortal(c, n);
+    s(() => f);
+  }, [e, t]), r;
 }
 export {
-  m as useDynamicRef,
+  l as useDynamicRef,
   i as useGlobalKeyboardEvent,
-  P as useInstance,
-  E as useKeyboardClose,
-  B as useOutlet,
-  h as useOutletAfter,
-  R as useOutletBefore,
+  h as useInstance,
+  d as useKeyboardClose,
+  g as useOutlet,
   v as useWindowResize
 };

package/package.json

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