@viasat/beam-react 2.27.0 → 2.28.0

package/lib/wip/Panel/Panel.es.js

@@ -1,104 +1,116 @@
-import { jsx as _ } from "react/jsx-runtime";
-import w from "clsx";
-import { useMemo as y } from "react";
-import { g as H } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as E } from "react/jsx-runtime";
+import S from "clsx";
+import { useMemo as z } from "react";
+import { g as V } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { Header as T } from "./Panel.Header.es.js";
-import { Body as j } from "./Panel.Body.es.js";
-import { Footer as q } from "./Panel.Footer.es.js";
-import { resolveOffset as U, usePanelClose as W, getPanelDividerState as G, PANEL_TRANSITION_DURATION_MS as J, getResolvedPanelPosition as K } from "./Panel.helpers.es.js";
-import { InlinePanel as L } from "./Panel.Inline.es.js";
-import { OverlayPanel as Q } from "./Panel.Overlay.es.js";
-import { s as e } from "../../../chunks/panel.module.FuwYDPMC.js";
-const { baseClassNamePrefix: o } = H("panel"), l = ({
-  children: m,
-  className: D,
-  padding: E = "md",
-  onOpenChange: x,
-  open: f,
-  size: t,
-  dismissible: c = !0,
-  closeButtonAriaLabel: d = "Close panel",
-  kind: s = "inline",
-  position: a,
-  divider: I = !0,
-  dividerColor: p,
-  isAnimated: u = !0,
-  onBeforeClose: M,
-  modalType: n,
-  offset: v,
-  ...i
+import { Header as W } from "./Header/Panel.Header.es.js";
+import { Body as q } from "./Panel.Body.es.js";
+import { Footer as G } from "./Footer/Panel.Footer.es.js";
+import { resolveOffset as U, usePanelClose as J, getPanelDividerState as Q, PANEL_TRANSITION_DURATION_MS as X, getResolvedPanelPosition as Y } from "./Panel.helpers.es.js";
+import { InlinePanel as Z } from "./Panel.Inline.es.js";
+import { OverlayPanel as k } from "./Panel.Overlay.es.js";
+import { s as e } from "../../../chunks/panel.module.BblnuBjO.js";
+const ee = 165, oe = 100, se = (s, m) => {
+  if (!s || m === "full") return;
+  const p = m === "bottom", r = typeof s == "object" ? s : {}, c = r.minSize ?? (p ? oe : ee), n = r.maxSize ?? 1 / 0, f = r.storageKey ?? "";
+  return { minSize: c, maxSize: n, storageKey: f };
+}, { baseClassNamePrefix: o } = V("panel"), d = ({
+  children: s,
+  className: m,
+  padding: p = "md",
+  onOpenChange: r,
+  open: c,
+  size: n = "md",
+  dismissible: f = !0,
+  closeButtonAriaLabel: N = "Close panel",
+  kind: i = "inline",
+  position: g,
+  divider: M = !0,
+  dividerColor: v,
+  isAnimated: P = !0,
+  onBeforeClose: x,
+  modalType: a,
+  offset: O,
+  resizable: D,
+  id: _,
+  ...u
 }) => {
-  process.env.NODE_ENV !== "production" && n === "alert" && c && console.warn(
-    'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
-  ), process.env.NODE_ENV !== "production" && i.closeOnOutsidePress && n !== "nonModal" && n !== void 0 && console.warn(
-    'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
-  );
-  const N = n === "alert" ? !1 : c, r = K(a), b = t && (r !== "bottom" || t === "full"), O = s === "overlay" && v ? U(v) : void 0, P = !!O, g = w(
+  const t = Y(g), l = se(D, t), B = !!l;
+  if (process.env.NODE_ENV !== "production") {
+    l && !l.storageKey && console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."), a === "alert" && f && console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');
+    const { closeOnOutsidePress: L } = u;
+    L && a !== "nonModal" && a !== void 0 && console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');
+  }
+  const y = a === "alert" ? !1 : f, T = n && (t !== "bottom" || n === "full"), $ = i === "overlay" && O ? U(O) : void 0, C = !!$, I = S(
     e[o],
-    e[`${o}--${s}`],
-    b && e[`${o}--size-${t}`],
-    e[`${o}--padding-${E}`],
-    e[`${o}--position-${r}`],
-    P && e[`${o}--floating`],
-    D
-  ), B = w(
+    e[`${o}--${i}`],
+    T && e[`${o}--size-${n}`],
+    e[`${o}--padding-${p}`],
+    e[`${o}--position-${t}`],
+    C && e[`${o}--floating`],
+    B && e[`${o}--resizable`],
+    m
+  ), A = S(
     e[`${o}__inline-wrapper`],
-    t === "full" && e[`${o}__inline-wrapper--full`]
-  ), { requestClose: C, handleOverlayOpenChange: S } = W(
-    M,
-    x
-  ), $ = y(
+    e[`${o}__inline-wrapper--size-${n}`]
+  ), { requestClose: h, handleOverlayOpenChange: H } = J(
+    x,
+    r
+  ), b = z(
     () => ({
-      kind: s,
-      dismissible: N,
-      closeButtonAriaLabel: d,
-      position: a,
-      requestClose: C
+      kind: i,
+      dismissible: y,
+      closeButtonAriaLabel: N,
+      position: g,
+      requestClose: h
     }),
-    [s, N, d, a, C]
-  ), { showDivider: A, dividerBefore: F, dividerInner: R, dividerAfter: V } = G(I && !P, r), h = y(
-    () => ({ duration: u ? J : 0 }),
-    [u]
+    [i, y, N, g, h]
+  ), { showDivider: K, dividerBefore: R, dividerInner: F, dividerAfter: j } = Q(M && !C, t), w = z(
+    () => ({ duration: P ? X : 0 }),
+    [P]
   );
-  return s === "inline" ? /* @__PURE__ */ _(
-    L,
+  return i === "inline" ? /* @__PURE__ */ E(
+    Z,
     {
-      contextValue: $,
-      panelClassName: g,
-      inlineWrapperClassName: B,
-      resolvedPosition: r,
-      dividerBefore: F,
-      dividerInner: R,
-      dividerAfter: V,
-      dividerColor: p,
-      open: f,
-      transitionConfig: h,
-      ...i,
-      children: m
+      contextValue: b,
+      panelClassName: I,
+      inlineWrapperClassName: A,
+      resolvedPosition: t,
+      dividerBefore: R,
+      dividerInner: F,
+      dividerAfter: j,
+      dividerColor: v,
+      open: c,
+      transitionConfig: w,
+      resizeConfig: l,
+      id: _,
+      ...u,
+      children: s
     }
-  ) : /* @__PURE__ */ _(
-    Q,
+  ) : /* @__PURE__ */ E(
+    k,
     {
-      contextValue: $,
-      panelClassName: g,
-      resolvedPosition: r,
-      showDivider: A,
-      dividerColor: p,
-      modalType: n,
-      floatingOffset: O,
-      open: f,
-      onOpenChange: S,
-      transitionConfig: h,
-      ...i,
-      children: m
+      contextValue: b,
+      panelClassName: I,
+      resolvedPosition: t,
+      showDivider: K,
+      dividerColor: v,
+      modalType: a,
+      floatingOffset: $,
+      open: c,
+      onOpenChange: H,
+      transitionConfig: w,
+      resizeConfig: l,
+      id: _,
+      ...u,
+      children: s
     }
   );
 };
-l.displayName = "Panel";
-l.Header = T;
-l.Body = j;
-l.Footer = q;
+d.displayName = "Panel";
+d.Header = W;
+d.Body = q;
+d.Footer = G;
 export {
-  l as Panel
+  d as Panel
 };

package/lib/wip/Panel/Panel.helpers.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=400;function P(t){return t===!0?{x:"1rem",y:"1rem"}:typeof t=="string"?{x:t,y:t}:{x:t.x,y:t.y}}const f="01",a=t=>t||"end",v=(t,e)=>{const s=t&&e!=="full";return{showDivider:s,dividerBefore:s&&e!=="start"&&e!=="bottom",dividerInner:s&&e==="bottom",dividerAfter:s&&e==="start"}},D=(t,e)=>{if(t!=="isModal")return t==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!1,outsidePress:e??!1}},_=t=>t==="escape-key"?"escapeKey":t==="outside-press"?"outsidePress":"programmatic",y=(t,e)=>{const s=u.useCallback(i=>{if(!t){e==null||e(!1);return}const r=t(i);r instanceof Promise?r.then(l=>{l&&(e==null||e(!1))}).catch(()=>{}):r&&(e==null||e(!1))},[t,e]),c=u.useCallback((i,r,l)=>{i?e==null||e(!0):s(_(l))},[e,s]);return{requestClose:s,handleOverlayOpenChange:c}};exports.DEFAULT_PANEL_DIVIDER_COLOR=f;exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=D;exports.getPanelDividerState=v;exports.getResolvedPanelPosition=a;exports.resolveOffset=P;exports.usePanelClose=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=400;function P(e){return e===!0?{x:"1rem",y:"1rem"}:typeof e=="string"?{x:e,y:e}:{x:e.x,y:e.y}}const f="01",a=e=>e||"end",v=(e,t)=>{const r=e&&t!=="full";return{showDivider:r,dividerBefore:r&&t!=="start"&&t!=="bottom",dividerInner:r&&t==="bottom",dividerAfter:r&&t==="start"}},D=(e,t)=>{if(e!=="isModal")return e==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!0,outsidePress:t??!1}},_=e=>e==="escape-key"?"escapeKey":e==="outside-press"?"outsidePress":"programmatic",y=(e,t)=>{const r=u.useCallback(i=>{if(!e){t==null||t(!1);return}const s=e(i);s instanceof Promise?s.then(l=>{l&&(t==null||t(!1))}).catch(()=>{}):s&&(t==null||t(!1))},[e,t]),c=u.useCallback((i,s,l)=>{i?t==null||t(!0):r(_(l))},[t,r]);return{requestClose:r,handleOverlayOpenChange:c}};exports.DEFAULT_PANEL_DIVIDER_COLOR=f;exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=D;exports.getPanelDividerState=v;exports.getResolvedPanelPosition=a;exports.resolveOffset=P;exports.usePanelClose=y;

package/lib/wip/Panel/Panel.helpers.d.ts

@@ -14,7 +14,7 @@ export declare const getPanelDividerState: (divider: boolean, position?: PanelPo
  * Returns the floating-ui `dismiss` config for an overlay panel.
  *
  * - `isModal`           — `undefined` (floating-ui defaults: ESC + backdrop click both close)
- * - `nonModal` / omitted — ESC suppressed; outside-press controlled by `closeOnOutsidePress`
+ * - `nonModal` / omitted — ESC closes; outside-press controlled by `closeOnOutsidePress`
  * - `alert`             — ESC and outside-press both suppressed
  */
 export declare const getPanelDismissConfig: (modalType: PanelModalType | undefined, closeOnOutsidePress?: boolean) => {

package/lib/wip/Panel/Panel.helpers.es.js

@@ -15,8 +15,8 @@ const m = "01", y = (t) => t || "end", D = (t, r) => {
   };
 }, _ = (t, r) => {
   if (t !== "isModal")
-    return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !1, outsidePress: r ?? !1 };
-}, d = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", a = (t, r) => {
+    return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !0, outsidePress: r ?? !1 };
+}, d = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", A = (t, r) => {
   const s = l(
     (i) => {
       if (!t) {
@@ -45,5 +45,5 @@ export {
   D as getPanelDividerState,
   y as getResolvedPanelPosition,
   v as resolveOffset,
-  a as usePanelClose
+  A as usePanelClose
 };

package/lib/wip/Panel/Panel.types.d.ts

@@ -9,8 +9,20 @@ export type ResolvedPanelOffset = {
 };
 export type PanelPosition = 'start' | 'end' | 'bottom' | 'full';
 export type PanelModalType = 'nonModal' | 'isModal' | 'alert';
-export type PanelSize = 'sm' | 'md' | 'lg' | 'full' | 'custom';
+export type PanelSize = 'sm' | 'md' | 'lg' | 'full';
 export type PanelPadding = 'sm' | 'md';
+/**
+ * Configuration for resizable panels.
+ * Pass `true` to use defaults, or an object for custom constraints.
+ */
+export type PanelResizable = boolean | {
+    /** Minimum panel size in px. Default: 165 for start/end, 100 for bottom. */
+    minSize?: number;
+    /** Maximum panel size in px. Default: 50% viewport width for start/end, 90% viewport height for bottom. */
+    maxSize?: number;
+    /** localStorage key for persisting the panel's last-used size across sessions. */
+    storageKey?: string;
+};
 /**
  * The reason a Panel close was requested via user interaction.
  *
@@ -91,6 +103,14 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      * @default 'end'
      */
     position?: PanelPosition;
+    /**
+     * Enables user-resizing via a drag handle at the panel edge.
+     * Pass `true` to use default min/max constraints, or an object to set custom
+     * values in pixels. Has no effect when `position="full"`.
+     * Provide a `storageKey` in the config object to persist the panel's last-used size across sessions.
+     * @default false
+     */
+    resizable?: PanelResizable;
     /**
      * Called before the Panel closes due to a user interaction. Return `false` (or
      * `Promise<false>`) to cancel the close — for example, when the panel contains
@@ -135,8 +155,12 @@ export interface OverlayPanelProps extends BasePanelProps {
     kind: 'overlay';
     /**
      * Specify the modal type (overlay only).
-     * When set to `'alert'`, the close button is always hidden regardless of the
-     * `dismissible` prop, and ESC / backdrop clicks are suppressed.
+     *
+     * - `'nonModal'` (default) — page stays interactive; ESC closes the panel;
+     *   outside clicks only close when `closeOnOutsidePress` is set.
+     * - `'isModal'` — backdrop overlay, focus trapped; ESC and backdrop click close the panel.
+     * - `'alert'` — close button hidden, ESC and outside clicks are suppressed.
+     *
      * @default 'nonModal'
      */
     modalType?: PanelModalType;
@@ -164,4 +188,16 @@ export interface OverlayPanelProps extends BasePanelProps {
     };
 }
 export type PanelProps = InlinePanelProps | OverlayPanelProps;
-export type { PanelHeaderProps } from './Panel.Header';
+/**
+ * Resolved resize configuration passed to internal Panel components.
+ * Presence signals resizing is enabled; absence signals it is disabled.
+ */
+export type PanelResizeConfig = {
+    /** @default 165 for start/end, 100 for bottom */
+    minSize: number;
+    /** @default 50dvw for start/end, 90dvh for bottom */
+    maxSize: number;
+    /** localStorage key for size persistence */
+    storageKey: string;
+};
+export type { PanelHeaderProps } from './Header/Panel.Header';

package/lib/wip/Panel/Panel.useResize.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),k=require("../../../utils/hooks/useElementResize.cjs.js"),y=require("../../../utils/hooks/useLocalStorage.cjs.js"),R=({resizeConfig:u,position:l,floatingRef:c,requireMount:s=!1})=>{const n=!!u,{minSize:z=0,maxSize:b=0,storageKey:o=""}=u??{},i=t.useRef(null),[r,_]=t.useState(!1),m=t.useCallback(e=>{i.current=e,s&&_(!!e)},[s]),[S,d]=y.useLocalStorage(o||"__panel_no_key__","0",n&&!!o),a=n&&Number(S)>0?Number(S):0,f=t.useCallback(e=>{o&&d(e.toString())},[o,d]);return k.useElementResize(s?n&&r:n,c,i,z,b,a,l==="bottom"?"y":"x",l==="end",f),t.useEffect(()=>{if(!s||!r||!a||!c.current)return;const e=l==="bottom"?"blockSize":"inlineSize";c.current.style[e]=`${a}px`},[r]),{handleRef:m}};exports.usePanelResize=R;

package/lib/wip/Panel/Panel.useResize.d.ts

@@ -0,0 +1,17 @@
+import { PanelPosition, PanelResizeConfig } from './Panel.types';
+type UsePanelResizeOptions = {
+    resizeConfig?: PanelResizeConfig;
+    position: PanelPosition;
+    floatingRef: React.RefObject<HTMLElement | null>;
+    /**
+     * Overlay panels start closed: the floating element and resize handle don't mount until open.
+     * useElementResize's listener-attach effect would otherwise run with a null handle ref and never
+     * re-run (ref object identity is stable). When true, this hook tracks handle mount via callback
+     * ref and re-applies the stored size each time the panel opens.
+     */
+    requireMount?: boolean;
+};
+export declare const usePanelResize: ({ resizeConfig, position, floatingRef, requireMount, }: UsePanelResizeOptions) => {
+    handleRef: (el: HTMLDivElement | null) => void;
+};
+export {};

package/lib/wip/Panel/Panel.useResize.es.js

@@ -0,0 +1,43 @@
+import { useRef as _, useState as x, useCallback as u, useEffect as y } from "react";
+import { useElementResize as k } from "../../../utils/hooks/useElementResize.es.js";
+import { useLocalStorage as E } from "../../../utils/hooks/useLocalStorage.es.js";
+const N = ({
+  resizeConfig: l,
+  position: o,
+  floatingRef: r,
+  requireMount: t = !1
+}) => {
+  const n = !!l, { minSize: S = 0, maxSize: z = 0, storageKey: s = "" } = l ?? {}, m = _(null), [c, f] = x(!1), b = u(
+    (e) => {
+      m.current = e, t && f(!!e);
+    },
+    [t]
+  ), [i, d] = E(
+    s || "__panel_no_key__",
+    "0",
+    n && !!s
+  ), a = n && Number(i) > 0 ? Number(i) : 0, p = u(
+    (e) => {
+      s && d(e.toString());
+    },
+    [s, d]
+  );
+  return k(
+    t ? n && c : n,
+    r,
+    m,
+    S,
+    z,
+    a,
+    o === "bottom" ? "y" : "x",
+    o === "end",
+    p
+  ), y(() => {
+    if (!t || !c || !a || !r.current) return;
+    const e = o === "bottom" ? "blockSize" : "inlineSize";
+    r.current.style[e] = `${a}px`;
+  }, [c]), { handleRef: b };
+};
+export {
+  N as usePanelResize
+};

package/lib/wip/Panel/index.d.ts

@@ -1,12 +1,12 @@
 export { Panel } from './Panel';
 export type { PanelProps, InlinePanelProps, OverlayPanelProps, PanelKind, PanelPosition, PanelModalType, PanelSize, PanelPadding, PanelCloseReason, } from './Panel.types';
-export type { PanelHeaderProps } from './Panel.Header';
-export type { PanelHeaderRowProps } from './Panel.Header.Row';
-export type { PanelHeaderContentBeforeProps } from './Panel.Header.ContentBefore';
-export type { PanelHeaderHeadingProps } from './Panel.Header.Heading';
-export type { PanelHeaderDescriptionProps } from './Panel.Header.Description';
-export type { PanelHeaderContentAfterProps } from './Panel.Header.ContentAfter';
-export type { PanelHeaderSubheaderProps } from './Panel.Header.Subheader';
+export type { PanelHeaderProps } from './Header/Panel.Header';
+export type { PanelHeaderRowProps } from './Header/Panel.Header.Row';
+export type { PanelHeaderContentBeforeProps } from './Header/Panel.Header.ContentBefore';
+export type { PanelHeaderHeadingProps } from './Header/Panel.Header.Heading';
+export type { PanelHeaderDescriptionProps } from './Header/Panel.Header.Description';
+export type { PanelHeaderContentAfterProps } from './Header/Panel.Header.ContentAfter';
+export type { PanelHeaderSubheaderProps } from './Header/Panel.Header.Subheader';
 export type { PanelBodyProps } from './Panel.Body';
-export type { PanelFooterProps } from './Panel.Footer';
-export type { PanelFooterActionsProps } from './Panel.Footer.Actions';
+export type { PanelFooterProps } from './Footer/Panel.Footer';
+export type { PanelFooterActionsProps } from './Footer/Panel.Footer.Actions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -59,11 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.27.0",
-    "@viasat/beam-shared": "2.27.0",
-    "@viasat/beam-styles": "2.27.0",
-    "@viasat/beam-tokens": "2.27.0",
-    "@viasat/beam-icons": "2.27.0",
+    "@viasat/beam-fonts": "2.28.0",
+    "@viasat/beam-shared": "2.28.0",
+    "@viasat/beam-styles": "2.28.0",
+    "@viasat/beam-tokens": "2.28.0",
+    "@viasat/beam-icons": "2.28.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/utils/hooks/useElementResize.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),S=require("../../chunks/constants.hwjHOsvT.js"),X=require("../../chunks/helpers.COm6C5Gf.js"),q=(d,n,r,p=165,v=400,h=0)=>{const[C,y]=e.useState(h),i=e.useRef(0),a=e.useRef(!1),m=e.useCallback(t=>{if(!n.current)return;const L=t.clientX-i.current;i.current=t.clientX;const P=n.current.offsetWidth,c=a.current?P-L:P+L;c>=p&&c<=v&&(requestAnimationFrame(()=>{n.current&&(n.current.style.inlineSize=`${c}px`)}),y(c))},[n,p,v]),o=e.useMemo(()=>X.debounce(m,S.FPS_120),[m]),u=e.useCallback(t=>{r.current&&r.current.releasePointerCapture(t.pointerId),n.current&&(n.current.style.transition=""),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)},[o,n,r]),s=e.useCallback(t=>{t.preventDefault(),n.current&&(a.current=getComputedStyle(n.current).direction==="rtl",n.current.style.transition="none"),r.current&&r.current.setPointerCapture(t.pointerId),i.current=t.clientX,document.addEventListener("pointermove",o),document.addEventListener("pointerup",u)},[o,u,n,r]);return e.useEffect(()=>{if(!d||!r.current||!document)return;const t=r.current;return t&&t.addEventListener("pointerdown",s),()=>{t&&t.removeEventListener("pointerdown",s),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)}},[s,o,u,d,r]),C};exports.useElementResize=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),m=(g,n,o,P=165,k=400,i=0,e="x",W=!1,M)=>{const[$,Y]=r.useState(i),h=r.useRef(0),X=r.useRef(!1),L=r.useRef(i),s=r.useRef(null),p=r.useRef(null),w=r.useRef(M);w.current=M,r.useLayoutEffect(()=>{if(!i||!n.current||!g)return;const t=e==="y"?"blockSize":"inlineSize";n.current.style[t]=`${i}px`},[]);const C=r.useCallback(t=>{if(!n.current)return;const u=k===1/0?e==="y"?window.innerHeight*.9:window.innerWidth*.5:k;if(e==="y"){const c=t.clientY-h.current,f=n.current.offsetHeight-c;f>=P&&f<=u&&(h.current=t.clientY,L.current=f,Y(f),n.current.style.blockSize=`${f}px`)}else{const c=t.clientX-h.current,v=n.current.offsetWidth,y=X.current!==W?v-c:v+c;y>=P&&y<=u&&(h.current=t.clientX,L.current=y,Y(y),n.current.style.inlineSize=`${y}px`)}},[n,P,k,e,W]),d=r.useCallback(t=>{s.current=t,p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,s.current&&(C(s.current),s.current=null)}))},[C]),l=r.useCallback(t=>{var u,c;(u=o.current)==null||u.releasePointerCapture(t.pointerId),document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",l),p.current!==null&&(cancelAnimationFrame(p.current),p.current=null),s.current&&(C(s.current),s.current=null),n.current&&(n.current.style.transition=""),(c=w.current)==null||c.call(w,L.current)},[C,d,n,o]),I=r.useCallback(t=>{var u,c,v;t.preventDefault(),n.current&&(X.current=e==="x"?getComputedStyle(n.current).direction==="rtl":!1,n.current.style.transition="none"),(u=o.current)==null||u.setPointerCapture(t.pointerId),h.current=e==="y"?t.clientY:t.clientX,L.current=e==="y"?((c=n.current)==null?void 0:c.offsetHeight)??i:((v=n.current)==null?void 0:v.offsetWidth)??i,document.addEventListener("pointermove",d),document.addEventListener("pointerup",l)},[d,l,n,o,e,i]);return r.useEffect(()=>{if(!g||!o.current)return;const t=o.current;return t.addEventListener("pointerdown",I),()=>{t.removeEventListener("pointerdown",I),document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",l)}},[I,d,l,g,o]),$};exports.useElementResize=m;

package/utils/hooks/useElementResize.d.ts

@@ -1 +1 @@
-export declare const useElementResize: (resizeEnabled: boolean, resizableElementRef: React.RefObject<HTMLElement>, resizeHandlerRef: React.RefObject<HTMLElement>, minWidth?: number, maxWidth?: number, defaultWidth?: number) => number;
+export declare const useElementResize: (resizeEnabled: boolean, resizableElementRef: React.RefObject<HTMLElement>, resizeHandlerRef: React.RefObject<HTMLElement>, minSize?: number, maxSize?: number, defaultSize?: number, axis?: "x" | "y", invertX?: boolean, onDragEnd?: (size: number) => void) => number;

package/utils/hooks/useElementResize.es.js

@@ -1,46 +1,52 @@
-import { useState as y, useRef as C, useCallback as s, useMemo as S, useEffect as f } from "react";
-import { a as M } from "../../chunks/constants.CKKGf1-i.js";
-import { d as W } from "../../chunks/helpers.CPNYYxrE.js";
-const g = (p, n, r, d = 165, v = 400, X = 0) => {
-  const [a, w] = y(X), c = C(0), m = C(!1), L = s(
+import { useState as A, useRef as v, useLayoutEffect as F, useCallback as C, useEffect as q } from "react";
+const U = (I, n, o, P = 165, W = 400, e = 0, c = "x", k = !1, M) => {
+  const [m, X] = A(e), y = v(0), $ = v(!1), w = v(e), i = v(null), s = v(null), g = v(M);
+  g.current = M, F(() => {
+    if (!e || !n.current || !I) return;
+    const t = c === "y" ? "blockSize" : "inlineSize";
+    n.current.style[t] = `${e}px`;
+  }, []);
+  const l = C(
     (t) => {
       if (!n.current) return;
-      const P = t.clientX - c.current;
-      c.current = t.clientX;
-      const h = n.current.offsetWidth, u = m.current ? h - P : h + P;
-      u >= d && u <= v && (requestAnimationFrame(() => {
-        n.current && (n.current.style.inlineSize = `${u}px`);
-      }), w(u));
+      const u = W === 1 / 0 ? c === "y" ? window.innerHeight * 0.9 : window.innerWidth * 0.5 : W;
+      if (c === "y") {
+        const r = t.clientY - y.current, h = n.current.offsetHeight - r;
+        h >= P && h <= u && (y.current = t.clientY, w.current = h, X(h), n.current.style.blockSize = `${h}px`);
+      } else {
+        const r = t.clientX - y.current, d = n.current.offsetWidth, L = $.current !== k ? d - r : d + r;
+        L >= P && L <= u && (y.current = t.clientX, w.current = L, X(L), n.current.style.inlineSize = `${L}px`);
+      }
     },
-    [n, d, v]
-  ), o = S(
-    () => W(L, M),
-    [L]
-  ), e = s(
+    [n, P, W, c, k]
+  ), p = C(
     (t) => {
-      r.current && r.current.releasePointerCapture(t.pointerId), n.current && (n.current.style.transition = ""), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+      i.current = t, s.current === null && (s.current = requestAnimationFrame(() => {
+        s.current = null, i.current && (l(i.current), i.current = null);
+      }));
     },
-    [o, n, r]
-  ), i = s(
+    [l]
+  ), f = C(
     (t) => {
-      t.preventDefault(), n.current && (m.current = getComputedStyle(n.current).direction === "rtl", n.current.style.transition = "none"), r.current && r.current.setPointerCapture(t.pointerId), c.current = t.clientX, document.addEventListener("pointermove", o), document.addEventListener("pointerup", e);
+      var u, r;
+      (u = o.current) == null || u.releasePointerCapture(t.pointerId), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", f), s.current !== null && (cancelAnimationFrame(s.current), s.current = null), i.current && (l(i.current), i.current = null), n.current && (n.current.style.transition = ""), (r = g.current) == null || r.call(g, w.current);
     },
-    [o, e, n, r]
+    [l, p, n, o]
+  ), Y = C(
+    (t) => {
+      var u, r, d;
+      t.preventDefault(), n.current && ($.current = c === "x" ? getComputedStyle(n.current).direction === "rtl" : !1, n.current.style.transition = "none"), (u = o.current) == null || u.setPointerCapture(t.pointerId), y.current = c === "y" ? t.clientY : t.clientX, w.current = c === "y" ? ((r = n.current) == null ? void 0 : r.offsetHeight) ?? e : ((d = n.current) == null ? void 0 : d.offsetWidth) ?? e, document.addEventListener("pointermove", p), document.addEventListener("pointerup", f);
+    },
+    [p, f, n, o, c, e]
   );
-  return f(() => {
-    if (!p || !r.current || !document) return;
-    const t = r.current;
-    return t && t.addEventListener("pointerdown", i), () => {
-      t && t.removeEventListener("pointerdown", i), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+  return q(() => {
+    if (!I || !o.current) return;
+    const t = o.current;
+    return t.addEventListener("pointerdown", Y), () => {
+      t.removeEventListener("pointerdown", Y), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", f);
     };
-  }, [
-    i,
-    o,
-    e,
-    p,
-    r
-  ]), a;
+  }, [Y, p, f, I, o]), m;
 };
 export {
-  g as useElementResize
+  U as useElementResize
 };

package/chunks/panel.module.Cb7pqpht.js

@@ -1 +0,0 @@
-var n=require("../assets/panel.css");const e={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-enterprise":"bm-enterprise","bm-consumer":"bm-consumer","bm-panel":"bm-panel","bm-panel--inline":"bm-panel--inline","bm-panel--overlay":"bm-panel--overlay","bm-panel--position-start":"bm-panel--position-start","bm-panel--position-end":"bm-panel--position-end","bm-panel--position-bottom":"bm-panel--position-bottom","bm-panel--size-full":"bm-panel--size-full","bm-panel--position-full":"bm-panel--position-full","bm-panel--floating":"bm-panel--floating","bm-panel__body":"bm-panel__body","bm-panel--padding-sm":"bm-panel--padding-sm","bm-panel__header":"bm-panel__header","bm-panel__footer":"bm-panel__footer","bm-panel--padding-md":"bm-panel--padding-md","bm-panel__header__row":"bm-panel__header__row","bm-panel__header__content-before":"bm-panel__header__content-before","bm-panel__header__content-after":"bm-panel__header__content-after","bm-panel__header__heading":"bm-panel__header__heading","bm-panel__header__description":"bm-panel__header__description","bm-panel__header__close-button":"bm-panel__header__close-button","bm-panel__footer__actions":"bm-panel__footer__actions","bm-panel__footer__actions--start":"bm-panel__footer__actions--start","bm-panel__footer__actions--end":"bm-panel__footer__actions--end","bm-panel__footer__actions--spaceBetween":"bm-panel__footer__actions--spaceBetween","bm-panel__footer__actions--stacked":"bm-panel__footer__actions--stacked","bm-panel__overlay-divider":"bm-panel__overlay-divider","bm-panel__overlay-divider--start":"bm-panel__overlay-divider--start","bm-panel__overlay-divider--end":"bm-panel__overlay-divider--end","bm-panel__overlay-divider--bottom":"bm-panel__overlay-divider--bottom","bm-panel__inline-wrapper":"bm-panel__inline-wrapper","bm-panel__inline-wrapper-content":"bm-panel__inline-wrapper-content","bm-panel__inline-wrapper--full":"bm-panel__inline-wrapper--full"};exports.styles=e;

package/lib/wip/Panel/Panel.Footer.Actions.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("clsx"),u=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const e=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:m}=u.getBEMClassNames("panel"),t=({layout:n="end",children:o,className:a,...c})=>{const s=`${m}footer__actions`,r=i(e.styles[s],e.styles[`${s}--${n}`],a);return l.jsx("div",{className:r,...c,children:o})};t.displayName="Panel.Footer.Actions";exports.Actions=t;

package/lib/wip/Panel/Panel.Footer.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("clsx"),u=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../Divider/Divider.cjs.js"),m=require("../../Box/Box.cjs.js"),b=require("./Panel.helpers.cjs.js"),d=require("./Panel.Footer.Actions.cjs.js"),q=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:x}=u.getBEMClassNames("panel"),P=`${x}footer`,s=({children:r,className:o,divider:t=!0,dividerColor:i=b.DEFAULT_PANEL_DIVIDER_COLOR,backgroundColor:n,...l})=>{const a=c(q.styles[P],o);return e.jsxs(e.Fragment,{children:[t&&e.jsx(_.Divider,{borderColor:i}),e.jsx(m.Box,{as:"footer",className:a,backgroundColor:n,...l,children:r})]})};s.displayName="Panel.Footer";s.Actions=d.Actions;exports.Footer=s;

package/lib/wip/Panel/Panel.Header.ContentAfter.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("clsx"),o=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:i}=o.getBEMClassNames("panel"),u=`${i}header`,e=({children:s,className:t,...n})=>{const r=l(c.styles[`${u}__content-after`],t);return a.jsx("div",{className:r,...n,children:s})};e.displayName="Panel.Header.ContentAfter";exports.ContentAfter=e;

package/lib/wip/Panel/Panel.Header.ContentBefore.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),a=require("clsx"),l=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:i}=l.getBEMClassNames("panel"),u=`${i}header`,e=({children:s,className:t,...n})=>{const r=a(c.styles[`${u}__content-before`],t);return o.jsx("div",{className:r,...n,children:s})};e.displayName="Panel.Header.ContentBefore";exports.ContentBefore=e;

package/lib/wip/Panel/Panel.Header.Description.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("clsx"),c=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const l=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:o}=c.getBEMClassNames("panel"),u=`${o}header`,e=({children:s,className:r,...t})=>{const a=n(l.styles[`${u}__description`],r);return i.jsx("div",{className:a,...t,children:s})};e.displayName="Panel.Header.Description";exports.Description=e;

package/lib/wip/Panel/Panel.Header.Heading.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),o=require("react"),g=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const q=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),b=require("./Panel.context.cjs.js"),x=require("../../../utils/hooks/useId.cjs.js"),I=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:y}=m.getBEMClassNames("panel"),P=`${y}header`,a=({children:r,className:i,id:c,...l})=>{const u=x.useId(),e=c??u,d=g(I.styles[`${P}__heading`],i),t=o.useContext(b.PanelContext),n=o.useContext(q.BmFloatingUIContext),s=(t==null?void 0:t.kind)==="overlay"?n==null?void 0:n.setLabelId:void 0;return o.useLayoutEffect(()=>{if(!(!s||!e))return s(e),()=>s(void 0)},[e,s]),_.jsx("div",{id:e,className:d,...l,children:r})};a.displayName="Panel.Header.Heading";exports.Heading=a;

package/lib/wip/Panel/Panel.Header.Row.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("clsx"),b=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const m=require("../../CloseButton/CloseButton.cjs.js"),_=require("../../Tooltip/Tooltip.cjs.js"),p=require("./Panel.context.cjs.js"),t=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:x}=b.getBEMClassNames("panel"),l=`${x}header`,o=({children:n,className:r,...a})=>{const{dismissible:i,closeButtonAriaLabel:s,requestClose:c}=p.usePanelContext(),u=d(t.styles[`${l}__row`],r);return e.jsxs("div",{className:u,...a,children:[n,i&&e.jsx("div",{className:t.styles[`${l}__close-button`],children:e.jsx(_.Tooltip,{text:s,placement:"bottom",portalled:!0,role:{enabled:!1},children:e.jsx(m.CloseButton,{"aria-label":s,onClick:()=>c("closeButton"),size:"lg"})})})]})};o.displayName="Panel.Header.Row";exports.Row=o;

package/lib/wip/Panel/Panel.Header.Subheader.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("clsx"),u=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:o}=u.getBEMClassNames("panel"),i=`${o}header`,e=({children:s,className:a,...r})=>{const t=n(c.styles[`${i}__subheader`],a);return l.jsx("div",{className:t,...r,children:s})};e.displayName="Panel.Header.Subheader";exports.Subheader=e;

package/lib/wip/Panel/Panel.Header.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),_=require("clsx"),c=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const d=require("../../Divider/Divider.cjs.js"),u=require("../../Box/Box.cjs.js"),P=require("./Panel.helpers.cjs.js"),b=require("./Panel.Header.Row.cjs.js"),p=require("./Panel.Header.ContentBefore.cjs.js"),q=require("./Panel.Header.Heading.cjs.js"),H=require("./Panel.Header.ContentAfter.cjs.js"),C=require("./Panel.Header.Description.cjs.js"),m=require("./Panel.Header.Subheader.cjs.js"),w=require("../../../chunks/panel.module.Cb7pqpht.js"),{subElementClassPrefix:x}=c.getBEMClassNames("panel"),D=`${x}header`,e=({children:n,className:i,divider:a=!0,dividerColor:s=P.DEFAULT_PANEL_DIVIDER_COLOR,backgroundColor:t,...l})=>{const o=_(w.styles[D],i);return r.jsxs(r.Fragment,{children:[r.jsx(u.Box,{as:"header",className:o,backgroundColor:t,...l,children:n}),a&&r.jsx(d.Divider,{borderColor:s})]})};e.displayName="Panel.Header";e.Row=b.Row;e.ContentBefore=p.ContentBefore;e.Heading=q.Heading;e.Description=C.Description;e.ContentAfter=H.ContentAfter;e.Subheader=m.Subheader;exports.Header=e;