@viasat/beam-react 2.11.0 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/panel.css +1 -1
- package/chunks/FloatingUI.context.B15Tz_4h.js +1 -0
- package/chunks/{FloatingUI.context.DtJA57si.js → FloatingUI.context.Dl4Y1y1z.js} +105 -103
- package/lib/Dialog/Dialog.Header.cjs.js +1 -1
- package/lib/Dialog/Dialog.Header.es.js +1 -1
- package/lib/Dialog/Dialog.Trigger.cjs.js +1 -1
- package/lib/Dialog/Dialog.Trigger.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.content.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.content.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.context.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.context.d.ts +6 -2
- package/lib/FloatingUI/FloatingUI.context.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.interactions.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.interactions.d.ts +3 -2
- package/lib/FloatingUI/FloatingUI.interactions.es.js +16 -15
- package/lib/FloatingUI/FloatingUI.root.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.root.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.trigger.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.trigger.close.cjs.js +1 -1
- package/lib/FloatingUI/FloatingUI.trigger.close.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.trigger.es.js +1 -1
- package/lib/Menu/ActionListContextWrapper.cjs.js +1 -1
- package/lib/Menu/ActionListContextWrapper.es.js +1 -1
- package/lib/Popover/Popover.content.cjs.js +1 -1
- package/lib/Popover/Popover.content.es.js +1 -1
- package/lib/Popover/Popover.trigger.cjs.js +1 -1
- package/lib/Popover/Popover.trigger.es.js +1 -1
- package/lib/Tooltip/Tooltip.cjs.js +1 -1
- package/lib/Tooltip/Tooltip.es.js +1 -1
- package/lib/wip/Panel/Panel.Inline.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Inline.d.ts +21 -0
- package/lib/wip/Panel/Panel.Inline.es.js +93 -0
- package/lib/wip/Panel/Panel.Overlay.cjs.js +1 -0
- package/lib/wip/Panel/Panel.Overlay.d.ts +17 -0
- package/lib/wip/Panel/Panel.Overlay.es.js +54 -0
- package/lib/wip/Panel/Panel.cjs.js +1 -1
- package/lib/wip/Panel/Panel.d.ts +1 -1
- package/lib/wip/Panel/Panel.es.js +81 -109
- package/lib/wip/Panel/Panel.helpers.cjs.js +1 -1
- package/lib/wip/Panel/Panel.helpers.d.ts +1 -5
- package/lib/wip/Panel/Panel.helpers.es.js +27 -50
- package/lib/wip/Panel/Panel.types.d.ts +9 -2
- package/package.json +6 -6
- package/chunks/FloatingUI.context.Du9g2lSg.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { ActionListContextProvider as i } from "../ActionList/ActionList.context.es.js";
|
|
3
|
-
import { a as n } from "../../chunks/FloatingUI.context.
|
|
3
|
+
import { a as n } from "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
4
4
|
const x = ({
|
|
5
5
|
children: t,
|
|
6
6
|
...o
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("clsx"),l=require("../../chunks/popover.module.Dum8SaSU.js"),p=require("../../chunks/classNames.DAeKwerT.js"),t=require("../../chunks/constants.hwjHOsvT.js");require("../../chunks/FloatingUI.context.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("clsx"),l=require("../../chunks/popover.module.Dum8SaSU.js"),p=require("../../chunks/classNames.DAeKwerT.js"),t=require("../../chunks/constants.hwjHOsvT.js");require("../../chunks/FloatingUI.context.B15Tz_4h.js");require("react");require("@floating-ui/react");const m=require("../FloatingUI/FloatingUI.content.cjs.js"),q=require("./Popover.context.cjs.js");function o({children:r,className:n,...s}){const{theme:e,appearance:i}=q.usePopoverContext(),{baseClassNamePrefix:a}=p.getBEMClassNames("popover");return c.jsx(m.Content,{className:u(e&&t.themeClassName(e),l.popoverStyles[a],i==="inverse"&&t.BEAM_INVERSE,n),...s,children:r})}o.displayName="Popover.Content";exports.Content=o;
|
|
@@ -3,7 +3,7 @@ import a from "clsx";
|
|
|
3
3
|
import { p as n } from "../../chunks/popover.module.C6KFea25.js";
|
|
4
4
|
import { g as i } from "../../chunks/classNames.BTJmrO_L.js";
|
|
5
5
|
import { t as f, c as C } from "../../chunks/constants.CKKGf1-i.js";
|
|
6
|
-
import "../../chunks/FloatingUI.context.
|
|
6
|
+
import "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
7
7
|
import "react";
|
|
8
8
|
import "@floating-ui/react";
|
|
9
9
|
import { Content as c } from "../FloatingUI/FloatingUI.content.es.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("../../chunks/FloatingUI.context.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("../../chunks/FloatingUI.context.B15Tz_4h.js");const t=require("../FloatingUI/FloatingUI.trigger.cjs.js"),s=require("../FloatingUI/FloatingUI.trigger.close.cjs.js");require("../FloatingUI/FloatingUI.content.cjs.js");require("react");const g=({children:e,...r})=>i.jsx(t.Trigger,{...r,children:e});g.displayName="Popover.Trigger";const o=({children:e,...r})=>i.jsx(s.CloseTrigger,{...r,children:e});o.displayName="Popover.CloseTrigger";exports.CloseTrigger=o;exports.Trigger=g;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import "../../chunks/FloatingUI.context.
|
|
2
|
+
import "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
3
3
|
import { Trigger as g } from "../FloatingUI/FloatingUI.trigger.es.js";
|
|
4
4
|
import { CloseTrigger as i } from "../FloatingUI/FloatingUI.trigger.close.es.js";
|
|
5
5
|
import "../FloatingUI/FloatingUI.content.es.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var N=require("../../assets/Tooltip.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("react"),h=require("../FloatingUI/FloatingUI.root.cjs.js"),d=require("../FloatingUI/FloatingUI.trigger.cjs.js");require("../../chunks/FloatingUI.context.
|
|
1
|
+
var N=require("../../assets/Tooltip.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("react"),h=require("../FloatingUI/FloatingUI.root.cjs.js"),d=require("../FloatingUI/FloatingUI.trigger.cjs.js");require("../../chunks/FloatingUI.context.B15Tz_4h.js");const w=require("../FloatingUI/FloatingUI.content.cjs.js"),p=require("../../chunks/tokens.Bc11gmpN.js"),j=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const u=require("../../utils/hooks/index.cjs.js"),x=require("clsx"),b=require("../../chunks/CSSLookup.DESAWWRT.js"),l={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-tooltip__icon-trigger":"bm-tooltip__icon-trigger","bm-tooltip":"bm-tooltip","bm-tooltip__arrow":"bm-tooltip__arrow","bm-tooltip__icon-trigger--disabled":"bm-tooltip__icon-trigger--disabled","bm-tooltip__icon-trigger--xs":"bm-tooltip__icon-trigger--xs","bm-tooltip__icon-trigger--sm":"bm-tooltip__icon-trigger--sm","bm-tooltip__icon-trigger--md":"bm-tooltip__icon-trigger--md","bm-tooltip__icon-trigger--lg":"bm-tooltip__icon-trigger--lg","bm-tooltip__icon-trigger--xl":"bm-tooltip__icon-trigger--xl"},{baseClassNamePrefix:I,subElementClassPrefix:_}=j.getBEMClassNames("tooltip");function f({children:e,portalled:r=!1,text:i,disabled:t,showDelay:a,role:c,...n}){const s=u.useCSSLookup(p.bmCompTooltipSpaceArrow),m=u.useCSSLookup(p.bmCompTooltipSpaceOffset),C=g.useMemo(()=>({edgePadding:b.parseSizeString(s),className:l[`${_}arrow`],hide:!1}),[s]),T=t?{}:{openOnHover:{restMs:a},openOnFocus:!0,openOnSelected:!0},q=c||{enabled:!0,role:"tooltip"};return o.jsxs(h.FloatingUIRoot,{...T,arrow:C,offset:b.parseSizeString(m),portalled:r,transitionConfig:{duration:{open:0,close:200}},role:q,...n,children:[o.jsx(S.Provider,{value:{disabled:t},children:o.jsx(d.Trigger,{children:e})}),o.jsx(F,{theme:n.theme,children:i})]})}const S=g.createContext({disabled:!1}),k=g.forwardRef(({children:e,size:r="md",type:i="button",className:t,...a},c)=>{const{disabled:n}=g.useContext(S),s=`${_}icon-trigger`,m=x(l[`${s}--${r}`],l[s],n&&l[`${_}icon-trigger--disabled`],t);return o.jsx(d.Trigger,{children:o.jsx("button",{ref:c,type:i,disabled:n,className:m,...a,"aria-label":"tooltip trigger",children:e})})});function F({children:e,theme:r,className:i,...t}){return o.jsx(w.Content,{className:x(r,l[I],i),...t,children:e})}exports.Tooltip=f;exports.TooltipIconTrigger=k;exports.default=f;
|
|
@@ -3,7 +3,7 @@ import { jsx as t, jsxs as w } from "react/jsx-runtime";
|
|
|
3
3
|
import { createContext as h, forwardRef as T, useContext as S, useMemo as N } from "react";
|
|
4
4
|
import { FloatingUIRoot as P } from "../FloatingUI/FloatingUI.root.es.js";
|
|
5
5
|
import { Trigger as _ } from "../FloatingUI/FloatingUI.trigger.es.js";
|
|
6
|
-
import "../../chunks/FloatingUI.context.
|
|
6
|
+
import "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
7
7
|
import { Content as k } from "../FloatingUI/FloatingUI.content.es.js";
|
|
8
8
|
import { j as v, k as O } from "../../chunks/tokens.BD_71qmL.js";
|
|
9
9
|
import { g as $ } from "../../chunks/classNames.BTJmrO_L.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("@floating-ui/react"),I=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),q=require("../../FloatingUI/FloatingUI.root.cjs.js"),v=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),f=require("../../Divider/Divider.cjs.js"),C=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:F}=I.getBEMClassNames("panel"),a=({position:n,className:i})=>e.jsx(f.Divider,{borderColor:"01",orientation:n==="bottom"?"horizontal":"vertical",className:i}),U=({children:n,panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,alwaysVisible:s,...u})=>{const{context:d,transitionConfig:x,refs:g}=v.useBmFloatingUIContext(),{isMounted:j,status:_}=p.useTransitionStatus(d,x),m=s&&_==="initial"?"open":_;return j?e.jsxs(e.Fragment,{children:[r&&e.jsx(a,{position:t}),e.jsx("div",{ref:g.setFloating,className:o,"data-position":t,"data-status":m,children:e.jsxs("div",{className:C.styles[`${F}__inline-wrapper-content`],children:[l&&e.jsx(a,{position:t}),e.jsx("aside",{...u,className:i,children:n})]})}),c&&e.jsx(a,{position:t})]}):null},h=({contextValue:n,panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,open:s,transitionConfig:u,children:d,...x})=>e.jsx(b.PanelContext.Provider,{value:n,children:e.jsx(q.FloatingUIRoot,{open:s??!0,portalled:!1,transitionConfig:u,children:e.jsx(U,{panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,alwaysVisible:s===void 0,...x,children:d})})});exports.InlineDivider=a;exports.InlinePanel=h;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { UseTransitionStylesProps } from '@floating-ui/react';
|
|
2
|
+
import { PanelPosition } from './Panel.types';
|
|
3
|
+
import { PanelContextValue } from './Panel.context';
|
|
4
|
+
export declare const InlineDivider: ({ position, className, }: {
|
|
5
|
+
position?: PanelPosition;
|
|
6
|
+
className?: string;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
type InlinePanelProps = {
|
|
9
|
+
contextValue: PanelContextValue;
|
|
10
|
+
panelClassName: string;
|
|
11
|
+
inlineWrapperClassName: string;
|
|
12
|
+
resolvedPosition: PanelPosition;
|
|
13
|
+
dividerBefore: boolean;
|
|
14
|
+
dividerInner: boolean;
|
|
15
|
+
dividerAfter: boolean;
|
|
16
|
+
open?: boolean;
|
|
17
|
+
transitionConfig: UseTransitionStylesProps;
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
} & React.ComponentPropsWithoutRef<'aside'>;
|
|
20
|
+
export declare const InlinePanel: ({ contextValue, panelClassName, inlineWrapperClassName, resolvedPosition, dividerBefore, dividerInner, dividerAfter, open, transitionConfig, children, ...props }: InlinePanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx as t, jsxs as u, Fragment as h } from "react/jsx-runtime";
|
|
2
|
+
import { useTransitionStatus as I } from "@floating-ui/react";
|
|
3
|
+
import { g as v } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
|
+
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
+
import { PanelContext as N } from "./Panel.context.es.js";
|
|
6
|
+
import { FloatingUIRoot as b } from "../../FloatingUI/FloatingUI.root.es.js";
|
|
7
|
+
import { a as F } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
8
|
+
import { Divider as w } from "../../Divider/Divider.es.js";
|
|
9
|
+
import { s as U } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
10
|
+
const { baseClassNamePrefix: j } = v("panel"), f = ({
|
|
11
|
+
position: n,
|
|
12
|
+
className: i
|
|
13
|
+
}) => /* @__PURE__ */ t(
|
|
14
|
+
w,
|
|
15
|
+
{
|
|
16
|
+
borderColor: "01",
|
|
17
|
+
orientation: n === "bottom" ? "horizontal" : "vertical",
|
|
18
|
+
className: i
|
|
19
|
+
}
|
|
20
|
+
), y = ({
|
|
21
|
+
children: n,
|
|
22
|
+
panelClassName: i,
|
|
23
|
+
inlineWrapperClassName: e,
|
|
24
|
+
resolvedPosition: o,
|
|
25
|
+
dividerBefore: r,
|
|
26
|
+
dividerInner: s,
|
|
27
|
+
dividerAfter: l,
|
|
28
|
+
alwaysVisible: a,
|
|
29
|
+
...m
|
|
30
|
+
}) => {
|
|
31
|
+
const {
|
|
32
|
+
context: p,
|
|
33
|
+
transitionConfig: c,
|
|
34
|
+
refs: g
|
|
35
|
+
} = F(), { isMounted: x, status: d } = I(
|
|
36
|
+
p,
|
|
37
|
+
c
|
|
38
|
+
), C = a && d === "initial" ? "open" : d;
|
|
39
|
+
return x ? /* @__PURE__ */ u(h, { children: [
|
|
40
|
+
r && /* @__PURE__ */ t(f, { position: o }),
|
|
41
|
+
/* @__PURE__ */ t(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
ref: g.setFloating,
|
|
45
|
+
className: e,
|
|
46
|
+
"data-position": o,
|
|
47
|
+
"data-status": C,
|
|
48
|
+
children: /* @__PURE__ */ u("div", { className: U[`${j}__inline-wrapper-content`], children: [
|
|
49
|
+
s && /* @__PURE__ */ t(f, { position: o }),
|
|
50
|
+
/* @__PURE__ */ t("aside", { ...m, className: i, children: n })
|
|
51
|
+
] })
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
l && /* @__PURE__ */ t(f, { position: o })
|
|
55
|
+
] }) : null;
|
|
56
|
+
}, T = ({
|
|
57
|
+
contextValue: n,
|
|
58
|
+
panelClassName: i,
|
|
59
|
+
inlineWrapperClassName: e,
|
|
60
|
+
resolvedPosition: o,
|
|
61
|
+
dividerBefore: r,
|
|
62
|
+
dividerInner: s,
|
|
63
|
+
dividerAfter: l,
|
|
64
|
+
open: a,
|
|
65
|
+
transitionConfig: m,
|
|
66
|
+
children: p,
|
|
67
|
+
...c
|
|
68
|
+
}) => /* @__PURE__ */ t(N.Provider, { value: n, children: /* @__PURE__ */ t(
|
|
69
|
+
b,
|
|
70
|
+
{
|
|
71
|
+
open: a ?? !0,
|
|
72
|
+
portalled: !1,
|
|
73
|
+
transitionConfig: m,
|
|
74
|
+
children: /* @__PURE__ */ t(
|
|
75
|
+
y,
|
|
76
|
+
{
|
|
77
|
+
panelClassName: i,
|
|
78
|
+
inlineWrapperClassName: e,
|
|
79
|
+
resolvedPosition: o,
|
|
80
|
+
dividerBefore: r,
|
|
81
|
+
dividerInner: s,
|
|
82
|
+
dividerAfter: l,
|
|
83
|
+
alwaysVisible: a === void 0,
|
|
84
|
+
...c,
|
|
85
|
+
children: p
|
|
86
|
+
}
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
) });
|
|
90
|
+
export {
|
|
91
|
+
f as InlineDivider,
|
|
92
|
+
T as InlinePanel
|
|
93
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const p=require("./Panel.context.cjs.js"),q=require("../../FloatingUI/FloatingUI.root.cjs.js"),x=require("../../FloatingUI/FloatingUI.content.cjs.js"),P=require("./Panel.Inline.cjs.js"),i=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:t}=m.getBEMClassNames("panel"),b=({contextValue:r,panelClassName:a,resolvedPosition:l,showDivider:n,modalType:s,open:o,onOpenChange:c,transitionConfig:u,children:_,...d})=>{const g=s==="alert"?{escapeKey:!1,outsidePress:!1}:void 0,v=y(i.styles[`${t}__overlay-divider`],i.styles[`${t}__overlay-divider--${l}`]);return e.jsx(p.PanelContext.Provider,{value:r,children:e.jsx(q.FloatingUIRoot,{open:o,onOpenChange:c,portalled:!0,transitionConfig:u,dismiss:g,children:e.jsxs(x.Content,{className:a,skipFloatingStyles:!0,overlay:!0,...d,role:s==="alert"?"alertdialog":"dialog","data-position":l,children:[_,n&&e.jsx(P.InlineDivider,{position:l,className:v})]})})})};exports.OverlayPanel=b;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { UseTransitionStylesProps } from '@floating-ui/react';
|
|
2
|
+
import { PanelModalType, PanelPosition } from './Panel.types';
|
|
3
|
+
import { PanelContextValue } from './Panel.context';
|
|
4
|
+
import { FloatingUIProps } from '../../FloatingUI/FloatingUI.context';
|
|
5
|
+
type OverlayPanelProps = {
|
|
6
|
+
contextValue: PanelContextValue;
|
|
7
|
+
panelClassName: string;
|
|
8
|
+
resolvedPosition: PanelPosition;
|
|
9
|
+
showDivider: boolean;
|
|
10
|
+
modalType?: PanelModalType;
|
|
11
|
+
open?: boolean;
|
|
12
|
+
onOpenChange?: FloatingUIProps['onOpenChange'];
|
|
13
|
+
transitionConfig: UseTransitionStylesProps;
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
} & React.ComponentPropsWithoutRef<'aside'>;
|
|
16
|
+
export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, open, onOpenChange, transitionConfig, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as r, jsxs as g } from "react/jsx-runtime";
|
|
2
|
+
import y from "clsx";
|
|
3
|
+
import { g as u } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
|
+
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
+
import { PanelContext as x } from "./Panel.context.es.js";
|
|
6
|
+
import { FloatingUIRoot as C } from "../../FloatingUI/FloatingUI.root.es.js";
|
|
7
|
+
import { Content as N } from "../../FloatingUI/FloatingUI.content.es.js";
|
|
8
|
+
import { InlineDivider as _ } from "./Panel.Inline.es.js";
|
|
9
|
+
import { s } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
10
|
+
const { baseClassNamePrefix: i } = u("panel"), B = ({
|
|
11
|
+
contextValue: a,
|
|
12
|
+
panelClassName: t,
|
|
13
|
+
resolvedPosition: e,
|
|
14
|
+
showDivider: l,
|
|
15
|
+
modalType: o,
|
|
16
|
+
open: m,
|
|
17
|
+
onOpenChange: n,
|
|
18
|
+
transitionConfig: d,
|
|
19
|
+
children: p,
|
|
20
|
+
...f
|
|
21
|
+
}) => {
|
|
22
|
+
const c = o === "alert" ? { escapeKey: !1, outsidePress: !1 } : void 0, v = y(
|
|
23
|
+
s[`${i}__overlay-divider`],
|
|
24
|
+
s[`${i}__overlay-divider--${e}`]
|
|
25
|
+
);
|
|
26
|
+
return /* @__PURE__ */ r(x.Provider, { value: a, children: /* @__PURE__ */ r(
|
|
27
|
+
C,
|
|
28
|
+
{
|
|
29
|
+
open: m,
|
|
30
|
+
onOpenChange: n,
|
|
31
|
+
portalled: !0,
|
|
32
|
+
transitionConfig: d,
|
|
33
|
+
dismiss: c,
|
|
34
|
+
children: /* @__PURE__ */ g(
|
|
35
|
+
N,
|
|
36
|
+
{
|
|
37
|
+
className: t,
|
|
38
|
+
skipFloatingStyles: !0,
|
|
39
|
+
overlay: !0,
|
|
40
|
+
...f,
|
|
41
|
+
role: o === "alert" ? "alertdialog" : "dialog",
|
|
42
|
+
"data-position": e,
|
|
43
|
+
children: [
|
|
44
|
+
p,
|
|
45
|
+
l && /* @__PURE__ */ r(_, { position: e, className: v })
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
) });
|
|
51
|
+
};
|
|
52
|
+
export {
|
|
53
|
+
B as OverlayPanel
|
|
54
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),b=require("clsx"),C=require("react"),j=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const B=require("./Panel.Header.cjs.js"),E=require("./Panel.Body.cjs.js"),T=require("./Panel.Footer.cjs.js"),r=require("./Panel.helpers.cjs.js"),F=require("./Panel.Inline.cjs.js"),H=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:s}=j.getBEMClassNames("panel"),n=({children:o,className:f,padding:g="md",onOpenChange:$,open:_,size:a,dismissible:c=!0,closeButtonAriaLabel:u="Close panel",kind:d="inline",position:i,divider:O=!0,isAnimated:P=!0,onBeforeClose:h,modalType:t,...p})=>{process.env.NODE_ENV!=="production"&&t==="alert"&&c&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const y=t==="alert"?!1:c,l=r.getResolvedPanelPosition(i),m=b(e.styles[s],e.styles[`${s}--${d}`],a&&e.styles[`${s}--size-${a}`],e.styles[`${s}--padding-${g}`],e.styles[`${s}--position-${l}`],f),x=b(e.styles[`${s}__inline-wrapper`],a==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:N,handleOverlayOpenChange:I}=r.usePanelClose(h,$),q=C.useMemo(()=>({dismissible:y,closeButtonAriaLabel:u,position:i,requestClose:N}),[y,u,i,N]),{showDivider:D,dividerBefore:M,dividerInner:R,dividerAfter:S}=r.getPanelDividerState(O,l),v=C.useMemo(()=>({duration:P?r.PANEL_TRANSITION_DURATION_MS:0}),[P]);return d==="inline"?w.jsx(F.InlinePanel,{contextValue:q,panelClassName:m,inlineWrapperClassName:x,resolvedPosition:l,dividerBefore:M,dividerInner:R,dividerAfter:S,open:_,transitionConfig:v,...p,children:o}):w.jsx(H.OverlayPanel,{contextValue:q,panelClassName:m,resolvedPosition:l,showDivider:D,modalType:t,open:_,onOpenChange:I,transitionConfig:v,...p,children:o})};n.displayName="Panel";n.Header=B.Header;n.Body=E.Body;n.Footer=T.Footer;exports.Panel=n;
|
package/lib/wip/Panel/Panel.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PanelProps } from './Panel.types';
|
|
2
2
|
export declare const Panel: {
|
|
3
|
-
({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, isAnimated, onBeforeClose, ...
|
|
3
|
+
({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, isAnimated, onBeforeClose, modalType, ...panelProps }: PanelProps): JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
Header: {
|
|
6
6
|
({ children, className: _className, divider, ...props }: import('./Panel.Header').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,118 +1,90 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as $ } from "react/jsx-runtime";
|
|
2
|
+
import g from "clsx";
|
|
3
|
+
import { useMemo as _ } from "react";
|
|
4
|
+
import { g as R } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
5
|
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
import { s as o } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
14
|
-
const { baseClassNamePrefix: i } = A("panel"), a = ({
|
|
15
|
-
position: t,
|
|
16
|
-
className: s
|
|
17
|
-
}) => /* @__PURE__ */ r(
|
|
18
|
-
G,
|
|
19
|
-
{
|
|
20
|
-
borderColor: "01",
|
|
21
|
-
orientation: t === "bottom" ? "horizontal" : "vertical",
|
|
22
|
-
className: s
|
|
23
|
-
}
|
|
24
|
-
), l = ({
|
|
6
|
+
import { Header as S } from "./Panel.Header.es.js";
|
|
7
|
+
import { Body as T } from "./Panel.Body.es.js";
|
|
8
|
+
import { Footer as A } from "./Panel.Footer.es.js";
|
|
9
|
+
import { usePanelClose as F, getPanelDividerState as H, PANEL_TRANSITION_DURATION_MS as V, getResolvedPanelPosition as j } from "./Panel.helpers.es.js";
|
|
10
|
+
import { InlinePanel as q } from "./Panel.Inline.es.js";
|
|
11
|
+
import { OverlayPanel as U } from "./Panel.Overlay.es.js";
|
|
12
|
+
import { s as e } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
13
|
+
const { baseClassNamePrefix: r } = R("panel"), s = ({
|
|
25
14
|
children: t,
|
|
26
|
-
className:
|
|
27
|
-
padding:
|
|
28
|
-
onOpenChange:
|
|
29
|
-
open:
|
|
30
|
-
size:
|
|
31
|
-
dismissible:
|
|
32
|
-
closeButtonAriaLabel:
|
|
33
|
-
kind:
|
|
34
|
-
position:
|
|
35
|
-
divider:
|
|
15
|
+
className: O,
|
|
16
|
+
padding: h = "md",
|
|
17
|
+
onOpenChange: w,
|
|
18
|
+
open: l,
|
|
19
|
+
size: n,
|
|
20
|
+
dismissible: m = !0,
|
|
21
|
+
closeButtonAriaLabel: p = "Close panel",
|
|
22
|
+
kind: d = "inline",
|
|
23
|
+
position: i,
|
|
24
|
+
divider: y = !0,
|
|
36
25
|
isAnimated: f = !0,
|
|
37
|
-
onBeforeClose:
|
|
38
|
-
|
|
26
|
+
onBeforeClose: x,
|
|
27
|
+
modalType: a,
|
|
28
|
+
...c
|
|
39
29
|
}) => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
return n === "inline" ? _ ? /* @__PURE__ */ p(h.Provider, { value: C, children: [
|
|
66
|
-
B && m && /* @__PURE__ */ r(a, { position: e }),
|
|
67
|
-
/* @__PURE__ */ r(
|
|
68
|
-
"div",
|
|
69
|
-
{
|
|
70
|
-
className: O,
|
|
71
|
-
"data-position": e,
|
|
72
|
-
"data-status": w,
|
|
73
|
-
children: /* @__PURE__ */ p("div", { className: o[`${i}__inline-wrapper-content`], children: [
|
|
74
|
-
e === "bottom" && m && /* @__PURE__ */ r(a, { position: e }),
|
|
75
|
-
/* @__PURE__ */ r("aside", { className: $, ...N, children: t })
|
|
76
|
-
] })
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
F && m && /* @__PURE__ */ r(a, { position: e })
|
|
80
|
-
] }) : null : /* @__PURE__ */ r(h.Provider, { value: C, children: /* @__PURE__ */ r(
|
|
81
|
-
W,
|
|
30
|
+
process.env.NODE_ENV !== "production" && a === "alert" && m && console.warn(
|
|
31
|
+
'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
|
|
32
|
+
);
|
|
33
|
+
const N = a === "alert" ? !1 : m, o = j(i), u = g(
|
|
34
|
+
e[r],
|
|
35
|
+
e[`${r}--${d}`],
|
|
36
|
+
n && e[`${r}--size-${n}`],
|
|
37
|
+
e[`${r}--padding-${h}`],
|
|
38
|
+
e[`${r}--position-${o}`],
|
|
39
|
+
O
|
|
40
|
+
), D = g(
|
|
41
|
+
e[`${r}__inline-wrapper`],
|
|
42
|
+
n === "full" && e[`${r}__inline-wrapper--full`]
|
|
43
|
+
), { requestClose: v, handleOverlayOpenChange: I } = F(
|
|
44
|
+
x,
|
|
45
|
+
w
|
|
46
|
+
), C = _(
|
|
47
|
+
() => ({ dismissible: N, closeButtonAriaLabel: p, position: i, requestClose: v }),
|
|
48
|
+
[N, p, i, v]
|
|
49
|
+
), { showDivider: E, dividerBefore: b, dividerInner: B, dividerAfter: M } = H(y, o), P = _(
|
|
50
|
+
() => ({ duration: f ? V : 0 }),
|
|
51
|
+
[f]
|
|
52
|
+
);
|
|
53
|
+
return d === "inline" ? /* @__PURE__ */ $(
|
|
54
|
+
q,
|
|
82
55
|
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
overlay: !0,
|
|
95
|
-
...N,
|
|
96
|
-
"data-position": e,
|
|
97
|
-
children: [
|
|
98
|
-
t,
|
|
99
|
-
P && /* @__PURE__ */ r(
|
|
100
|
-
a,
|
|
101
|
-
{
|
|
102
|
-
position: e,
|
|
103
|
-
className: T
|
|
104
|
-
}
|
|
105
|
-
)
|
|
106
|
-
]
|
|
107
|
-
}
|
|
108
|
-
)
|
|
56
|
+
contextValue: C,
|
|
57
|
+
panelClassName: u,
|
|
58
|
+
inlineWrapperClassName: D,
|
|
59
|
+
resolvedPosition: o,
|
|
60
|
+
dividerBefore: b,
|
|
61
|
+
dividerInner: B,
|
|
62
|
+
dividerAfter: M,
|
|
63
|
+
open: l,
|
|
64
|
+
transitionConfig: P,
|
|
65
|
+
...c,
|
|
66
|
+
children: t
|
|
109
67
|
}
|
|
110
|
-
)
|
|
68
|
+
) : /* @__PURE__ */ $(
|
|
69
|
+
U,
|
|
70
|
+
{
|
|
71
|
+
contextValue: C,
|
|
72
|
+
panelClassName: u,
|
|
73
|
+
resolvedPosition: o,
|
|
74
|
+
showDivider: E,
|
|
75
|
+
modalType: a,
|
|
76
|
+
open: l,
|
|
77
|
+
onOpenChange: I,
|
|
78
|
+
transitionConfig: P,
|
|
79
|
+
...c,
|
|
80
|
+
children: t
|
|
81
|
+
}
|
|
82
|
+
);
|
|
111
83
|
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
84
|
+
s.displayName = "Panel";
|
|
85
|
+
s.Header = S;
|
|
86
|
+
s.Body = T;
|
|
87
|
+
s.Footer = A;
|
|
116
88
|
export {
|
|
117
|
-
|
|
89
|
+
s as Panel
|
|
118
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=400,P=s=>s||"end",f=(s,t)=>{const r=s&&t!=="full";return{showDivider:r,dividerBefore:r&&t!=="start"&&t!=="bottom",dividerInner:r&&t==="bottom",dividerAfter:r&&t==="start"}},v=s=>s==="escape-key"?"escapeKey":s==="outside-press"?"outsidePress":"programmatic",N=(s,t)=>{const r=c.useCallback(l=>{if(!s){t==null||t(!1);return}const e=s(l);e instanceof Promise?e.then(i=>{i&&(t==null||t(!1))}).catch(()=>{}):e&&(t==null||t(!1))},[s,t]),u=c.useCallback((l,e,i)=>{l?t==null||t(!0):r(v(i))},[t,r]);return{requestClose:r,handleOverlayOpenChange:u}};exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDividerState=f;exports.getResolvedPanelPosition=P;exports.usePanelClose=N;
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import { OpenChangeReason } from '@floating-ui/react';
|
|
2
2
|
import { PanelCloseReason, PanelPosition, PanelProps } from './Panel.types';
|
|
3
3
|
export declare const PANEL_TRANSITION_DURATION_MS = 400;
|
|
4
|
-
export type PanelInlineStatus = 'open' | 'close' | undefined;
|
|
5
4
|
export declare const getResolvedPanelPosition: (position?: PanelPosition) => PanelPosition;
|
|
6
5
|
export declare const getPanelDividerState: (divider: boolean, position?: PanelPosition) => {
|
|
7
6
|
showDivider: boolean;
|
|
8
7
|
dividerBefore: boolean;
|
|
8
|
+
dividerInner: boolean;
|
|
9
9
|
dividerAfter: boolean;
|
|
10
10
|
};
|
|
11
11
|
export declare const usePanelClose: (onBeforeClose: PanelProps["onBeforeClose"], onOpenChange: PanelProps["onOpenChange"]) => {
|
|
12
12
|
requestClose: (reason: PanelCloseReason) => void;
|
|
13
13
|
handleOverlayOpenChange: (nextOpen: boolean, _event?: Event, floatingReason?: OpenChangeReason) => void;
|
|
14
14
|
};
|
|
15
|
-
export declare const useInlineTransition: (open: boolean | undefined, isAnimated: boolean) => {
|
|
16
|
-
inlineStatus: PanelInlineStatus;
|
|
17
|
-
isInlineVisible: boolean;
|
|
18
|
-
};
|
|
@@ -1,62 +1,39 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
const
|
|
1
|
+
import { useCallback as u } from "react";
|
|
2
|
+
const v = 400, m = (r) => r || "end", P = (r, t) => {
|
|
3
|
+
const s = r && t !== "full";
|
|
4
4
|
return {
|
|
5
|
-
showDivider:
|
|
6
|
-
dividerBefore:
|
|
7
|
-
|
|
5
|
+
showDivider: s,
|
|
6
|
+
dividerBefore: s && t !== "start" && t !== "bottom",
|
|
7
|
+
// For 'bottom' panels the divider must sit inside the scrollable wrapper (above the content),
|
|
8
|
+
// not outside it — so it is rendered via dividerInner rather than dividerBefore.
|
|
9
|
+
dividerInner: s && t === "bottom",
|
|
10
|
+
dividerAfter: s && t === "start"
|
|
8
11
|
};
|
|
9
|
-
},
|
|
10
|
-
const
|
|
11
|
-
(
|
|
12
|
-
if (!
|
|
12
|
+
}, e = (r) => r === "escape-key" ? "escapeKey" : r === "outside-press" ? "outsidePress" : "programmatic", A = (r, t) => {
|
|
13
|
+
const s = u(
|
|
14
|
+
(i) => {
|
|
15
|
+
if (!r) {
|
|
13
16
|
t == null || t(!1);
|
|
14
17
|
return;
|
|
15
18
|
}
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
const c = r(i);
|
|
20
|
+
c instanceof Promise ? c.then((l) => {
|
|
21
|
+
l && (t == null || t(!1));
|
|
19
22
|
}).catch(() => {
|
|
20
|
-
}) :
|
|
23
|
+
}) : c && (t == null || t(!1));
|
|
21
24
|
},
|
|
22
|
-
[
|
|
23
|
-
),
|
|
24
|
-
(
|
|
25
|
-
|
|
25
|
+
[r, t]
|
|
26
|
+
), d = u(
|
|
27
|
+
(i, c, l) => {
|
|
28
|
+
i ? t == null || t(!0) : s(e(l));
|
|
26
29
|
},
|
|
27
|
-
[t,
|
|
30
|
+
[t, s]
|
|
28
31
|
);
|
|
29
|
-
return { requestClose:
|
|
30
|
-
}, S = (s, t) => {
|
|
31
|
-
const [r, l] = c(void 0), [u, e] = c(s !== !1);
|
|
32
|
-
return m(() => {
|
|
33
|
-
if (!t) {
|
|
34
|
-
e(s !== !1), l(void 0);
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
if (s !== void 0)
|
|
38
|
-
if (s) {
|
|
39
|
-
e(!0), l("close");
|
|
40
|
-
let i;
|
|
41
|
-
const d = requestAnimationFrame(() => {
|
|
42
|
-
i = requestAnimationFrame(() => l("open"));
|
|
43
|
-
});
|
|
44
|
-
return () => {
|
|
45
|
-
cancelAnimationFrame(d), cancelAnimationFrame(i);
|
|
46
|
-
};
|
|
47
|
-
} else {
|
|
48
|
-
l("close");
|
|
49
|
-
const i = setTimeout(() => {
|
|
50
|
-
e(!1), l(void 0);
|
|
51
|
-
}, a);
|
|
52
|
-
return () => clearTimeout(i);
|
|
53
|
-
}
|
|
54
|
-
}, [t, s]), { inlineStatus: r, isInlineVisible: u };
|
|
32
|
+
return { requestClose: s, handleOverlayOpenChange: d };
|
|
55
33
|
};
|
|
56
34
|
export {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
P as usePanelClose
|
|
35
|
+
v as PANEL_TRANSITION_DURATION_MS,
|
|
36
|
+
P as getPanelDividerState,
|
|
37
|
+
m as getResolvedPanelPosition,
|
|
38
|
+
A as usePanelClose
|
|
62
39
|
};
|