@viasat/beam-react 2.26.1 → 2.28.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.D3kSM-y1.js → FloatingUI.context.Dl4Y1y1z.js} +2 -2
- package/chunks/{panel.module.DJLJpnm_.js → panel.module.BblnuBjO.js} +11 -2
- package/chunks/panel.module.CVyUzyCZ.js +1 -0
- package/lib/Autocomplete/Autocomplete.figma.d.ts +1 -0
- package/lib/Avatar/Avatar.figma.d.ts +1 -0
- package/lib/Avatar/AvatarGroup.figma.d.ts +1 -0
- package/lib/BadgeDot/BadgeDot.figma.d.ts +1 -0
- package/lib/Chips/Chips.figma.d.ts +1 -0
- package/lib/Dialog/Dialog.Header.es.js +1 -1
- package/lib/Dialog/Dialog.Trigger.es.js +1 -1
- package/lib/Divider/Divider.figma.d.ts +1 -0
- package/lib/FloatingUI/FloatingUI.content.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.context.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.root.es.js +1 -1
- package/lib/FloatingUI/FloatingUI.trigger.close.es.js +7 -7
- package/lib/FloatingUI/FloatingUI.trigger.es.js +4 -4
- package/lib/InputChoiceGroup/RadioButtonGroup/RadioButtonGroup.figma.d.ts +1 -0
- package/lib/InputChoiceGroup/SwitchGroup/SwitchGroup.figma.d.ts +1 -0
- package/lib/Link/Link.figma.d.ts +1 -0
- package/lib/Menu/ActionListContextWrapper.es.js +1 -1
- package/lib/NativeSelect/NativeSelect.figma.d.ts +1 -0
- package/lib/Popover/Popover.content.es.js +1 -1
- package/lib/Popover/Popover.trigger.es.js +1 -1
- package/lib/RadioButton/RadioButton.figma.d.ts +1 -0
- package/lib/Select/Select.figma.d.ts +1 -0
- package/lib/Slider/Slider.figma.d.ts +1 -0
- package/lib/TextArea/TextArea.figma.d.ts +1 -0
- package/lib/Tooltip/Tooltip.es.js +1 -1
- package/lib/wip/Panel/Footer/Panel.Footer.Actions.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Footer.Actions.es.js → Footer/Panel.Footer.Actions.es.js} +3 -3
- package/lib/wip/Panel/Footer/Panel.Footer.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Footer.d.ts → Footer/Panel.Footer.d.ts} +1 -1
- package/lib/wip/Panel/{Panel.Footer.es.js → Footer/Panel.Footer.es.js} +6 -6
- package/lib/wip/Panel/Header/Panel.Header.ContentAfter.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.ContentAfter.es.js → Header/Panel.Header.ContentAfter.es.js} +3 -3
- package/lib/wip/Panel/Header/Panel.Header.ContentBefore.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.ContentBefore.es.js → Header/Panel.Header.ContentBefore.es.js} +3 -3
- package/lib/wip/Panel/Header/Panel.Header.Description.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.Description.es.js → Header/Panel.Header.Description.es.js} +3 -3
- package/lib/wip/Panel/Header/Panel.Header.Heading.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.Heading.es.js → Header/Panel.Header.Heading.es.js} +6 -6
- package/lib/wip/Panel/Header/Panel.Header.Row.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.Row.es.js → Header/Panel.Header.Row.es.js} +6 -6
- package/lib/wip/Panel/Header/Panel.Header.Subheader.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.Subheader.es.js → Header/Panel.Header.Subheader.es.js} +3 -3
- package/lib/wip/Panel/Header/Panel.Header.cjs.js +1 -0
- package/lib/wip/Panel/{Panel.Header.d.ts → Header/Panel.Header.d.ts} +1 -1
- package/lib/wip/Panel/{Panel.Header.es.js → Header/Panel.Header.es.js} +6 -6
- package/lib/wip/Panel/Panel.Body.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Body.es.js +1 -1
- package/lib/wip/Panel/Panel.Inline.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Inline.d.ts +3 -2
- package/lib/wip/Panel/Panel.Inline.es.js +67 -55
- package/lib/wip/Panel/Panel.Overlay.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Overlay.d.ts +4 -2
- package/lib/wip/Panel/Panel.Overlay.es.js +90 -45
- package/lib/wip/Panel/Panel.ResizeHandle.cjs.js +1 -0
- package/lib/wip/Panel/Panel.ResizeHandle.d.ts +1 -0
- package/lib/wip/Panel/Panel.ResizeHandle.es.js +18 -0
- package/lib/wip/Panel/Panel.cjs.js +1 -1
- package/lib/wip/Panel/Panel.d.ts +10 -10
- package/lib/wip/Panel/Panel.es.js +101 -86
- package/lib/wip/Panel/Panel.helpers.cjs.js +1 -1
- package/lib/wip/Panel/Panel.helpers.d.ts +3 -2
- package/lib/wip/Panel/Panel.helpers.es.js +29 -24
- package/lib/wip/Panel/Panel.types.d.ts +61 -4
- package/lib/wip/Panel/Panel.useResize.cjs.js +1 -0
- package/lib/wip/Panel/Panel.useResize.d.ts +17 -0
- package/lib/wip/Panel/Panel.useResize.es.js +43 -0
- package/lib/wip/Panel/index.d.ts +9 -9
- package/package.json +6 -6
- package/utils/hooks/useElementResize.cjs.js +1 -1
- package/utils/hooks/useElementResize.d.ts +1 -1
- package/utils/hooks/useElementResize.es.js +40 -34
- package/chunks/panel.module.DCpj0tSX.js +0 -1
- package/lib/wip/Panel/Panel.Footer.Actions.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Footer.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.ContentAfter.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.ContentBefore.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.Description.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.Heading.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.Row.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.Subheader.cjs.js +0 -1
- package/lib/wip/Panel/Panel.Header.cjs.js +0 -1
- /package/lib/wip/Panel/{Panel.Footer.Actions.d.ts → Footer/Panel.Footer.Actions.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.ContentAfter.d.ts → Header/Panel.Header.ContentAfter.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.ContentBefore.d.ts → Header/Panel.Header.ContentBefore.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.Description.d.ts → Header/Panel.Header.Description.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.Heading.d.ts → Header/Panel.Header.Heading.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.Row.d.ts → Header/Panel.Header.Row.d.ts} +0 -0
- /package/lib/wip/Panel/{Panel.Header.Subheader.d.ts → Header/Panel.Header.Subheader.d.ts} +0 -0
|
@@ -1,85 +1,97 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useTransitionStatus as
|
|
3
|
-
import { g as
|
|
1
|
+
import { jsx as t, jsxs as d, Fragment as C } from "react/jsx-runtime";
|
|
2
|
+
import { useTransitionStatus as F } from "@floating-ui/react";
|
|
3
|
+
import { g as w } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
4
|
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
-
import { PanelContext as
|
|
5
|
+
import { PanelContext as P } from "./Panel.context.es.js";
|
|
6
6
|
import { FloatingUIRoot as U } from "../../FloatingUI/FloatingUI.root.es.js";
|
|
7
|
-
import {
|
|
8
|
-
import { InlineDivider as
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
import { a as b } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
8
|
+
import { InlineDivider as g } from "./Panel.Divider.es.js";
|
|
9
|
+
import { PanelResizeHandle as j } from "./Panel.ResizeHandle.es.js";
|
|
10
|
+
import { usePanelResize as y } from "./Panel.useResize.es.js";
|
|
11
|
+
import { s as B } from "../../../chunks/panel.module.BblnuBjO.js";
|
|
12
|
+
const { baseClassNamePrefix: M } = w("panel"), S = ({
|
|
13
|
+
children: s,
|
|
14
|
+
panelClassName: o,
|
|
15
|
+
inlineWrapperClassName: r,
|
|
14
16
|
resolvedPosition: n,
|
|
15
|
-
dividerBefore:
|
|
16
|
-
dividerInner:
|
|
17
|
-
dividerAfter:
|
|
18
|
-
alwaysVisible:
|
|
19
|
-
dividerColor:
|
|
20
|
-
|
|
17
|
+
dividerBefore: l,
|
|
18
|
+
dividerInner: m,
|
|
19
|
+
dividerAfter: p,
|
|
20
|
+
alwaysVisible: e,
|
|
21
|
+
dividerColor: a,
|
|
22
|
+
resizeConfig: i,
|
|
23
|
+
...f
|
|
21
24
|
}) => {
|
|
22
25
|
const {
|
|
23
26
|
context: c,
|
|
24
|
-
transitionConfig:
|
|
27
|
+
transitionConfig: u,
|
|
25
28
|
refs: x
|
|
26
|
-
} = b(), { isMounted: I, status:
|
|
29
|
+
} = b(), { isMounted: I, status: h } = F(
|
|
27
30
|
c,
|
|
28
|
-
|
|
29
|
-
),
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
u
|
|
32
|
+
), N = e && h === "initial" ? "open" : h, { handleRef: R } = y({
|
|
33
|
+
resizeConfig: i,
|
|
34
|
+
position: n,
|
|
35
|
+
floatingRef: x.floating
|
|
36
|
+
});
|
|
37
|
+
return I ? /* @__PURE__ */ d(C, { children: [
|
|
38
|
+
l && /* @__PURE__ */ t(g, { position: n, dividerColor: a }),
|
|
32
39
|
/* @__PURE__ */ t(
|
|
33
40
|
"div",
|
|
34
41
|
{
|
|
35
42
|
ref: x.setFloating,
|
|
36
|
-
className:
|
|
43
|
+
className: r,
|
|
37
44
|
"data-position": n,
|
|
38
|
-
"data-status":
|
|
39
|
-
children: /* @__PURE__ */
|
|
40
|
-
|
|
41
|
-
/* @__PURE__ */
|
|
45
|
+
"data-status": N,
|
|
46
|
+
children: /* @__PURE__ */ d("div", { className: B[`${M}__inline-wrapper-content`], children: [
|
|
47
|
+
m && /* @__PURE__ */ t(g, { position: n, dividerColor: a }),
|
|
48
|
+
/* @__PURE__ */ d("aside", { ...f, className: o, children: [
|
|
49
|
+
s,
|
|
50
|
+
i && /* @__PURE__ */ t(j, { ref: R })
|
|
51
|
+
] })
|
|
42
52
|
] })
|
|
43
53
|
}
|
|
44
54
|
),
|
|
45
|
-
|
|
55
|
+
p && /* @__PURE__ */ t(g, { position: n, dividerColor: a })
|
|
46
56
|
] }) : null;
|
|
47
|
-
},
|
|
48
|
-
contextValue:
|
|
49
|
-
panelClassName:
|
|
50
|
-
inlineWrapperClassName:
|
|
57
|
+
}, A = ({
|
|
58
|
+
contextValue: s,
|
|
59
|
+
panelClassName: o,
|
|
60
|
+
inlineWrapperClassName: r,
|
|
51
61
|
resolvedPosition: n,
|
|
52
|
-
dividerBefore:
|
|
53
|
-
dividerInner:
|
|
54
|
-
dividerAfter:
|
|
55
|
-
open:
|
|
56
|
-
transitionConfig:
|
|
57
|
-
dividerColor:
|
|
58
|
-
children:
|
|
59
|
-
|
|
60
|
-
|
|
62
|
+
dividerBefore: l,
|
|
63
|
+
dividerInner: m,
|
|
64
|
+
dividerAfter: p,
|
|
65
|
+
open: e,
|
|
66
|
+
transitionConfig: a,
|
|
67
|
+
dividerColor: i,
|
|
68
|
+
children: f,
|
|
69
|
+
resizeConfig: c,
|
|
70
|
+
...u
|
|
71
|
+
}) => /* @__PURE__ */ t(P.Provider, { value: s, children: /* @__PURE__ */ t(
|
|
61
72
|
U,
|
|
62
73
|
{
|
|
63
|
-
open:
|
|
74
|
+
open: e ?? !0,
|
|
64
75
|
portalled: !1,
|
|
65
|
-
transitionConfig:
|
|
76
|
+
transitionConfig: a,
|
|
66
77
|
children: /* @__PURE__ */ t(
|
|
67
|
-
|
|
78
|
+
S,
|
|
68
79
|
{
|
|
69
|
-
panelClassName:
|
|
70
|
-
inlineWrapperClassName:
|
|
80
|
+
panelClassName: o,
|
|
81
|
+
inlineWrapperClassName: r,
|
|
71
82
|
resolvedPosition: n,
|
|
72
|
-
dividerBefore:
|
|
73
|
-
dividerInner:
|
|
74
|
-
dividerAfter:
|
|
75
|
-
dividerColor:
|
|
76
|
-
alwaysVisible:
|
|
77
|
-
|
|
78
|
-
|
|
83
|
+
dividerBefore: l,
|
|
84
|
+
dividerInner: m,
|
|
85
|
+
dividerAfter: p,
|
|
86
|
+
dividerColor: i,
|
|
87
|
+
alwaysVisible: e === void 0,
|
|
88
|
+
resizeConfig: c,
|
|
89
|
+
...u,
|
|
90
|
+
children: f
|
|
79
91
|
}
|
|
80
92
|
)
|
|
81
93
|
}
|
|
82
94
|
) });
|
|
83
95
|
export {
|
|
84
|
-
|
|
96
|
+
A as InlinePanel
|
|
85
97
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("clsx"),p=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const F=require("./Panel.context.cjs.js"),I=require("./Panel.helpers.cjs.js"),j=require("../../FloatingUI/FloatingUI.root.cjs.js"),C=require("../../FloatingUI/FloatingUI.content.cjs.js"),R=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),U=require("./Panel.Divider.cjs.js"),N=require("./Panel.ResizeHandle.cjs.js"),h=require("./Panel.useResize.cjs.js"),q=require("../../../chunks/panel.module.CVyUzyCZ.js"),{baseClassNamePrefix:v,variable:y}=p.getBEMClassNames("panel"),w=({children:a,panelClassName:r,resolvedPosition:e,showDivider:o,dividerColor:l,resizeConfig:s,floatingOffset:i,overlayDividerClassName:c,isBlocking:u,style:t,..._})=>{const{refs:d}=R.useBmFloatingUIContext(),{handleRef:g}=h.usePanelResize({resizeConfig:s,position:e,floatingRef:d.floating,requireMount:!0}),P=i?{...t,[y("offset-x")]:i.x,[y("offset-y")]:i.y}:t;return n.jsxs(C.Content,{className:r,skipFloatingStyles:!0,overlay:u,..._,style:P,"data-position":e,children:[a,o&&n.jsx(U.InlineDivider,{position:e,className:c,dividerColor:l}),s&&n.jsx(N.PanelResizeHandle,{ref:g})]})},D=({contextValue:a,panelClassName:r,resolvedPosition:e,showDivider:o,modalType:l,closeOnOutsidePress:s,floatingOffset:i,open:c,onOpenChange:u,transitionConfig:t,dividerColor:_,children:d,resizeConfig:g,...P})=>{const x=l==="isModal"||l==="alert",b=I.getPanelDismissConfig(l,s),f=m(q.styles[`${v}__overlay-divider`],q.styles[`${v}__overlay-divider--${e}`]);return n.jsx(F.PanelContext.Provider,{value:a,children:n.jsx(j.FloatingUIRoot,{open:c,onOpenChange:u,portalled:!0,transitionConfig:t,dismiss:b,focusConfiguration:x?!0:{modal:!1,closeOnFocusOut:!1},children:n.jsx(w,{panelClassName:r,resolvedPosition:e,showDivider:o,dividerColor:_,floatingOffset:i,overlayDividerClassName:f,isBlocking:x,resizeConfig:g,...P,role:l==="alert"?"alertdialog":"dialog","aria-modal":x||void 0,children:d})})})};exports.OverlayPanel=D;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { UseTransitionStylesProps } from '@floating-ui/react';
|
|
2
|
-
import { PanelDividerColor, PanelModalType, PanelPosition } from './Panel.types';
|
|
2
|
+
import { PanelDividerColor, PanelModalType, PanelPosition, PanelResizeConfig, ResolvedPanelOffset } from './Panel.types';
|
|
3
3
|
import { PanelContextValue } from './Panel.context';
|
|
4
4
|
import { FloatingUIProps } from '../../FloatingUI/FloatingUI.context';
|
|
5
5
|
type OverlayPanelProps = {
|
|
@@ -9,11 +9,13 @@ type OverlayPanelProps = {
|
|
|
9
9
|
showDivider: boolean;
|
|
10
10
|
modalType?: PanelModalType;
|
|
11
11
|
closeOnOutsidePress?: boolean;
|
|
12
|
+
floatingOffset?: ResolvedPanelOffset;
|
|
12
13
|
open?: boolean;
|
|
13
14
|
onOpenChange?: FloatingUIProps['onOpenChange'];
|
|
14
15
|
transitionConfig: UseTransitionStylesProps;
|
|
15
16
|
children: React.ReactNode;
|
|
16
17
|
dividerColor?: PanelDividerColor;
|
|
18
|
+
resizeConfig?: PanelResizeConfig;
|
|
17
19
|
} & React.ComponentPropsWithoutRef<'aside'>;
|
|
18
|
-
export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, open, onOpenChange, transitionConfig, dividerColor, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, floatingOffset, open, onOpenChange, transitionConfig, dividerColor, children, resizeConfig, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
21
|
export {};
|
|
@@ -1,59 +1,104 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { g as
|
|
1
|
+
import { jsx as t, jsxs as P } from "react/jsx-runtime";
|
|
2
|
+
import R from "clsx";
|
|
3
|
+
import { g as h } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
4
|
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
-
import { PanelContext as
|
|
6
|
-
import { getPanelDismissConfig as
|
|
7
|
-
import { FloatingUIRoot as
|
|
8
|
-
import { Content as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
import { PanelContext as F } from "./Panel.context.es.js";
|
|
6
|
+
import { getPanelDismissConfig as I } from "./Panel.helpers.es.js";
|
|
7
|
+
import { FloatingUIRoot as B } from "../../FloatingUI/FloatingUI.root.es.js";
|
|
8
|
+
import { Content as D } from "../../FloatingUI/FloatingUI.content.es.js";
|
|
9
|
+
import { a as M } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
|
|
10
|
+
import { InlineDivider as _ } from "./Panel.Divider.es.js";
|
|
11
|
+
import { PanelResizeHandle as $ } from "./Panel.ResizeHandle.es.js";
|
|
12
|
+
import { usePanelResize as b } from "./Panel.useResize.es.js";
|
|
13
|
+
import { s as v } from "../../../chunks/panel.module.BblnuBjO.js";
|
|
14
|
+
const { baseClassNamePrefix: x, variable: y } = h("panel"), j = ({
|
|
15
|
+
children: a,
|
|
13
16
|
panelClassName: l,
|
|
14
|
-
resolvedPosition:
|
|
15
|
-
showDivider:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
...v
|
|
17
|
+
resolvedPosition: o,
|
|
18
|
+
showDivider: n,
|
|
19
|
+
dividerColor: e,
|
|
20
|
+
resizeConfig: i,
|
|
21
|
+
floatingOffset: r,
|
|
22
|
+
overlayDividerClassName: m,
|
|
23
|
+
isBlocking: f,
|
|
24
|
+
style: s,
|
|
25
|
+
...c
|
|
24
26
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
const { refs: p } = M(), { handleRef: d } = b({
|
|
28
|
+
resizeConfig: i,
|
|
29
|
+
position: o,
|
|
30
|
+
floatingRef: p.floating,
|
|
31
|
+
requireMount: !0
|
|
32
|
+
}), u = r ? {
|
|
33
|
+
...s,
|
|
34
|
+
[y("offset-x")]: r.x,
|
|
35
|
+
[y("offset-y")]: r.y
|
|
36
|
+
} : s;
|
|
37
|
+
return /* @__PURE__ */ P(
|
|
30
38
|
D,
|
|
31
39
|
{
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
className: l,
|
|
41
|
+
skipFloatingStyles: !0,
|
|
42
|
+
overlay: f,
|
|
43
|
+
...c,
|
|
44
|
+
style: u,
|
|
45
|
+
"data-position": o,
|
|
46
|
+
children: [
|
|
47
|
+
a,
|
|
48
|
+
n && /* @__PURE__ */ t(_, { position: o, className: m, dividerColor: e }),
|
|
49
|
+
i && /* @__PURE__ */ t($, { ref: d })
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}, L = ({
|
|
54
|
+
contextValue: a,
|
|
55
|
+
panelClassName: l,
|
|
56
|
+
resolvedPosition: o,
|
|
57
|
+
showDivider: n,
|
|
58
|
+
modalType: e,
|
|
59
|
+
closeOnOutsidePress: i,
|
|
60
|
+
floatingOffset: r,
|
|
61
|
+
open: m,
|
|
62
|
+
onOpenChange: f,
|
|
63
|
+
transitionConfig: s,
|
|
64
|
+
dividerColor: c,
|
|
65
|
+
children: p,
|
|
66
|
+
resizeConfig: d,
|
|
67
|
+
...u
|
|
68
|
+
}) => {
|
|
69
|
+
const g = e === "isModal" || e === "alert", C = I(e, i), N = R(
|
|
70
|
+
v[`${x}__overlay-divider`],
|
|
71
|
+
v[`${x}__overlay-divider--${o}`]
|
|
72
|
+
);
|
|
73
|
+
return /* @__PURE__ */ t(F.Provider, { value: a, children: /* @__PURE__ */ t(
|
|
74
|
+
B,
|
|
75
|
+
{
|
|
76
|
+
open: m,
|
|
77
|
+
onOpenChange: f,
|
|
34
78
|
portalled: !0,
|
|
35
|
-
transitionConfig:
|
|
36
|
-
dismiss:
|
|
37
|
-
focusConfiguration:
|
|
38
|
-
children: /* @__PURE__ */
|
|
39
|
-
|
|
79
|
+
transitionConfig: s,
|
|
80
|
+
dismiss: C,
|
|
81
|
+
focusConfiguration: g ? !0 : { modal: !1, closeOnFocusOut: !1 },
|
|
82
|
+
children: /* @__PURE__ */ t(
|
|
83
|
+
j,
|
|
40
84
|
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
85
|
+
panelClassName: l,
|
|
86
|
+
resolvedPosition: o,
|
|
87
|
+
showDivider: n,
|
|
88
|
+
dividerColor: c,
|
|
89
|
+
floatingOffset: r,
|
|
90
|
+
overlayDividerClassName: N,
|
|
91
|
+
isBlocking: g,
|
|
92
|
+
resizeConfig: d,
|
|
93
|
+
...u,
|
|
94
|
+
role: e === "alert" ? "alertdialog" : "dialog",
|
|
95
|
+
"aria-modal": g || void 0,
|
|
96
|
+
children: p
|
|
52
97
|
}
|
|
53
98
|
)
|
|
54
99
|
}
|
|
55
100
|
) });
|
|
56
101
|
};
|
|
57
102
|
export {
|
|
58
|
-
|
|
103
|
+
L as OverlayPanel
|
|
59
104
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),n=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const l=require("../../../chunks/panel.module.CVyUzyCZ.js"),{baseClassNamePrefix:i}=n.getBEMClassNames("panel"),e=r.forwardRef((t,s)=>a.jsx("div",{ref:s,className:l.styles[`${i}__resize-handle`],"aria-hidden":!0,tabIndex:-1}));e.displayName="PanelResizeHandle";exports.PanelResizeHandle=e;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PanelResizeHandle: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as s } from "react";
|
|
3
|
+
import { g as r } from "../../../chunks/classNames.BTJmrO_L.js";
|
|
4
|
+
import "../../../chunks/constants.CKKGf1-i.js";
|
|
5
|
+
import { s as o } from "../../../chunks/panel.module.BblnuBjO.js";
|
|
6
|
+
const { baseClassNamePrefix: i } = r("panel"), m = s((t, e) => /* @__PURE__ */ a(
|
|
7
|
+
"div",
|
|
8
|
+
{
|
|
9
|
+
ref: e,
|
|
10
|
+
className: o[`${i}__resize-handle`],
|
|
11
|
+
"aria-hidden": !0,
|
|
12
|
+
tabIndex: -1
|
|
13
|
+
}
|
|
14
|
+
));
|
|
15
|
+
m.displayName = "PanelResizeHandle";
|
|
16
|
+
export {
|
|
17
|
+
m as PanelResizeHandle
|
|
18
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),M=require("clsx"),E=require("react"),V=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const W=require("./Header/Panel.Header.cjs.js"),G=require("./Panel.Body.cjs.js"),U=require("./Footer/Panel.Footer.cjs.js"),c=require("./Panel.helpers.cjs.js"),J=require("./Panel.Inline.cjs.js"),Q=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.CVyUzyCZ.js"),X=165,Y=100,Z=(n,u)=>{if(!n||u==="full")return;const f=u==="bottom",l=typeof n=="object"?n:{},d=l.minSize??(f?Y:X),o=l.maxSize??1/0,P=l.storageKey??"";return{minSize:d,maxSize:o,storageKey:P}},{baseClassNamePrefix:s}=V.getBEMClassNames("panel"),_=({children:n,className:u,padding:f="md",onOpenChange:l,open:d,size:o="md",dismissible:P=!0,closeButtonAriaLabel:m="Close panel",kind:a="inline",position:y,divider:x=!0,dividerColor:g,isAnimated:v=!0,onBeforeClose:z,modalType:i,offset:N,resizable:B,id:O,...p})=>{const t=c.getResolvedPanelPosition(y),r=Z(B,t),D=!!r;if(process.env.NODE_ENV!=="production"){r&&!r.storageKey&&console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."),i==="alert"&&P&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const{closeOnOutsidePress:L}=p;L&&i!=="nonModal"&&i!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.')}const b=i==="alert"?!1:P,H=o&&(t!=="bottom"||o==="full"),w=a==="overlay"&&N?c.resolveOffset(N):void 0,q=!!w,$=M(e.styles[s],e.styles[`${s}--${a}`],H&&e.styles[`${s}--size-${o}`],e.styles[`${s}--padding-${f}`],e.styles[`${s}--position-${t}`],q&&e.styles[`${s}--floating`],D&&e.styles[`${s}--resizable`],u),T=M(e.styles[`${s}__inline-wrapper`],e.styles[`${s}__inline-wrapper--size-${o}`]),{requestClose:C,handleOverlayOpenChange:R}=c.usePanelClose(z,l),I=E.useMemo(()=>({kind:a,dismissible:b,closeButtonAriaLabel:m,position:y,requestClose:C}),[a,b,m,y,C]),{showDivider:j,dividerBefore:A,dividerInner:F,dividerAfter:K}=c.getPanelDividerState(x&&!q,t),h=E.useMemo(()=>({duration:v?c.PANEL_TRANSITION_DURATION_MS:0}),[v]);return a==="inline"?S.jsx(J.InlinePanel,{contextValue:I,panelClassName:$,inlineWrapperClassName:T,resolvedPosition:t,dividerBefore:A,dividerInner:F,dividerAfter:K,dividerColor:g,open:d,transitionConfig:h,resizeConfig:r,id:O,...p,children:n}):S.jsx(Q.OverlayPanel,{contextValue:I,panelClassName:$,resolvedPosition:t,showDivider:j,dividerColor:g,modalType:i,floatingOffset:w,open:d,onOpenChange:R,transitionConfig:h,resizeConfig:r,id:O,...p,children:n})};_.displayName="Panel";_.Header=W.Header;_.Body=G.Body;_.Footer=U.Footer;exports.Panel=_;
|
package/lib/wip/Panel/Panel.d.ts
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
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, dividerColor, isAnimated, onBeforeClose, modalType, ...panelProps }: PanelProps): JSX.Element;
|
|
3
|
+
({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, isAnimated, onBeforeClose, modalType, offset, resizable, id, ...panelProps }: PanelProps): JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
Header: {
|
|
6
|
-
({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.
|
|
6
|
+
({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.types').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
Row: {
|
|
9
|
-
({ children, className: _className, ...props }: import('
|
|
9
|
+
({ children, className: _className, ...props }: import('.').PanelHeaderRowProps): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
displayName: string;
|
|
11
11
|
};
|
|
12
12
|
ContentBefore: {
|
|
13
|
-
({ children, className: _className, ...props }: import('
|
|
13
|
+
({ children, className: _className, ...props }: import('.').PanelHeaderContentBeforeProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
displayName: string;
|
|
15
15
|
};
|
|
16
16
|
Heading: {
|
|
17
|
-
({ children, className: _className, id: _id, ...props }: import('
|
|
17
|
+
({ children, className: _className, id: _id, ...props }: import('.').PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
displayName: string;
|
|
19
19
|
};
|
|
20
20
|
Description: {
|
|
21
|
-
({ children, className: _className, ...props }: import('
|
|
21
|
+
({ children, className: _className, ...props }: import('.').PanelHeaderDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
displayName: string;
|
|
23
23
|
};
|
|
24
24
|
ContentAfter: {
|
|
25
|
-
({ children, className: _className, ...props }: import('
|
|
25
|
+
({ children, className: _className, ...props }: import('.').PanelHeaderContentAfterProps): import("react/jsx-runtime").JSX.Element;
|
|
26
26
|
displayName: string;
|
|
27
27
|
};
|
|
28
28
|
Subheader: {
|
|
29
|
-
({ children, className: _className, ...props }: import('
|
|
29
|
+
({ children, className: _className, ...props }: import('.').PanelHeaderSubheaderProps): import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
displayName: string;
|
|
31
31
|
};
|
|
32
32
|
};
|
|
@@ -35,10 +35,10 @@ export declare const Panel: {
|
|
|
35
35
|
displayName: string;
|
|
36
36
|
};
|
|
37
37
|
Footer: {
|
|
38
|
-
({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.Footer').PanelFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Footer/Panel.Footer').PanelFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
displayName: string;
|
|
40
40
|
Actions: {
|
|
41
|
-
({ layout, children, className: _className, ...props }: import('
|
|
41
|
+
({ layout, children, className: _className, ...props }: import('.').PanelFooterActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
42
42
|
displayName: string;
|
|
43
43
|
};
|
|
44
44
|
};
|