@viasat/beam-react 2.8.0 → 2.9.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/{panel.module.RGiUyC84.js → panel.module.BVm3KvDs.js} +14 -4
- package/chunks/panel.module.BX1x4FlX.js +1 -0
- 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.Footer.Actions.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Footer.Actions.es.js +1 -1
- package/lib/wip/Panel/Panel.Footer.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Footer.d.ts +2 -2
- package/lib/wip/Panel/Panel.Footer.es.js +11 -11
- package/lib/wip/Panel/Panel.Header.ContentAfter.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.ContentAfter.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.ContentBefore.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.ContentBefore.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.Description.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.Description.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.Heading.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.Heading.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.Row.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.Row.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.Subheader.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.Subheader.es.js +1 -1
- package/lib/wip/Panel/Panel.Header.cjs.js +1 -1
- package/lib/wip/Panel/Panel.Header.d.ts +2 -2
- package/lib/wip/Panel/Panel.Header.es.js +19 -19
- package/lib/wip/Panel/Panel.cjs.js +1 -1
- package/lib/wip/Panel/Panel.context.d.ts +5 -0
- package/lib/wip/Panel/Panel.d.ts +3 -3
- package/lib/wip/Panel/Panel.es.js +112 -38
- package/lib/wip/Panel/Panel.helpers.cjs.js +1 -0
- package/lib/wip/Panel/Panel.helpers.d.ts +13 -0
- package/lib/wip/Panel/Panel.helpers.es.js +40 -0
- package/lib/wip/Panel/Panel.types.d.ts +16 -11
- package/package.json +6 -6
- package/chunks/panel.module.DbEoAg1J.js +0 -1
package/assets/panel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,:host,.bm-light,.bm-dark .bm-inverse,[data-bm-theme~=bm-light]{--bm-comp-panel-size-sm:20rem;--bm-comp-panel-size-md:27.5rem;--bm-comp-panel-size-lg:40rem;--bm-comp-panel-space-x-sm:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-x-md:var(--bm-sem-space-150,1.5rem);--bm-comp-panel-space-header-pad-top:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-header-pad-bottom:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-header-gap-y:var(--bm-sem-space-25,.25rem);--bm-comp-panel-space-header-gap-x:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-pad-top:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-footer-pad-bottom:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-footer-gap-actions:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-gap-actions-stack:var(--bm-sem-space-100,1rem);--bm-comp-panel-radius:var(--bm-sem-radius-lg,1rem);--bm-comp-panel-shadow:var(--bm-sem-shadow-overlay,0 .25rem .75rem .125rem #0000001f);--bm-comp-panel-typo-heading:var(--bm-sem-typo-heading-sm,700 1.125rem/1.5rem "Uni Neue");--bm-comp-panel-typo-description:var(--bm-sem-typo-body-sm,400 .875rem/1.25rem "Source Sans Pro");--bm-comp-panel-color-heading:var(--bm-sem-color-text-primary,#141d24);--bm-comp-panel-color-description:var(--bm-sem-color-text-secondary,#576775)}:host,.bm-dark,.bm-light .bm-inverse,[data-bm-theme~=bm-dark]{--bm-comp-panel-size-sm:20rem;--bm-comp-panel-size-md:27.5rem;--bm-comp-panel-size-lg:40rem;--bm-comp-panel-space-x-sm:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-x-md:var(--bm-sem-space-150,1.5rem);--bm-comp-panel-space-header-pad-top:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-header-pad-bottom:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-header-gap-y:var(--bm-sem-space-25,.25rem);--bm-comp-panel-space-header-gap-x:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-pad-top:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-footer-pad-bottom:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-footer-gap-actions:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-gap-actions-stack:var(--bm-sem-space-100,1rem);--bm-comp-panel-radius:var(--bm-sem-radius-lg,1rem);--bm-comp-panel-shadow:var(--bm-sem-shadow-overlay,0 .25rem .75rem .125rem #0000004d);--bm-comp-panel-typo-heading:var(--bm-sem-typo-heading-sm,700 1.125rem/1.5rem "Uni Neue");--bm-comp-panel-typo-description:var(--bm-sem-typo-body-sm,400 .875rem/1.25rem "Source Sans Pro");--bm-comp-panel-color-heading:var(--bm-sem-color-text-primary,#fff);--bm-comp-panel-color-description:var(--bm-sem-color-text-secondary,#c3cdd5)}.bm-panel{background-color:var(--bm-sem-color-surface-01);flex-direction:column;width:20rem;display:flex}.bm-panel--inline{height:100%;box-shadow:var(--bm-sem-shadow-none);position:relative}.bm-panel--overlay{box-shadow:var(--bm-comp-panel-shadow);position:fixed}.bm-panel--
|
|
1
|
+
:root,:host,.bm-light,.bm-dark .bm-inverse,[data-bm-theme~=bm-light]{--bm-comp-panel-size-sm:20rem;--bm-comp-panel-size-md:27.5rem;--bm-comp-panel-size-lg:40rem;--bm-comp-panel-space-x-sm:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-x-md:var(--bm-sem-space-150,1.5rem);--bm-comp-panel-space-header-pad-top:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-header-pad-bottom:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-header-gap-y:var(--bm-sem-space-25,.25rem);--bm-comp-panel-space-header-gap-x:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-pad-top:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-footer-pad-bottom:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-footer-gap-actions:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-gap-actions-stack:var(--bm-sem-space-100,1rem);--bm-comp-panel-radius:var(--bm-sem-radius-lg,1rem);--bm-comp-panel-shadow:var(--bm-sem-shadow-overlay,0 .25rem .75rem .125rem #0000001f);--bm-comp-panel-typo-heading:var(--bm-sem-typo-heading-sm,700 1.125rem/1.5rem "Uni Neue");--bm-comp-panel-typo-description:var(--bm-sem-typo-body-sm,400 .875rem/1.25rem "Source Sans Pro");--bm-comp-panel-color-heading:var(--bm-sem-color-text-primary,#141d24);--bm-comp-panel-color-description:var(--bm-sem-color-text-secondary,#576775)}:host,.bm-dark,.bm-light .bm-inverse,[data-bm-theme~=bm-dark]{--bm-comp-panel-size-sm:20rem;--bm-comp-panel-size-md:27.5rem;--bm-comp-panel-size-lg:40rem;--bm-comp-panel-space-x-sm:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-x-md:var(--bm-sem-space-150,1.5rem);--bm-comp-panel-space-header-pad-top:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-header-pad-bottom:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-header-gap-y:var(--bm-sem-space-25,.25rem);--bm-comp-panel-space-header-gap-x:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-pad-top:var(--bm-sem-space-100,1rem);--bm-comp-panel-space-footer-pad-bottom:var(--bm-sem-space-125,1.25rem);--bm-comp-panel-space-footer-gap-actions:var(--bm-sem-space-50,.5rem);--bm-comp-panel-space-footer-gap-actions-stack:var(--bm-sem-space-100,1rem);--bm-comp-panel-radius:var(--bm-sem-radius-lg,1rem);--bm-comp-panel-shadow:var(--bm-sem-shadow-overlay,0 .25rem .75rem .125rem #0000004d);--bm-comp-panel-typo-heading:var(--bm-sem-typo-heading-sm,700 1.125rem/1.5rem "Uni Neue");--bm-comp-panel-typo-description:var(--bm-sem-typo-body-sm,400 .875rem/1.25rem "Source Sans Pro");--bm-comp-panel-color-heading:var(--bm-sem-color-text-primary,#fff);--bm-comp-panel-color-description:var(--bm-sem-color-text-secondary,#c3cdd5)}.bm-panel{background-color:var(--bm-sem-color-surface-01);flex-direction:column;width:20rem;display:flex}.bm-panel--inline{height:100%;box-shadow:var(--bm-sem-shadow-none);position:relative}.bm-panel--overlay{box-shadow:var(--bm-comp-panel-shadow);position:fixed}.bm-panel--overlay.bm-panel--position-start{top:0;bottom:0;left:0}.bm-panel--overlay.bm-panel--position-end{top:0;bottom:0;right:0}.bm-panel--overlay.bm-panel--position-bottom{height:auto;bottom:0;left:0;right:0}.bm-panel--overlay.bm-panel--position-full{top:0;bottom:0;left:0;right:0}.bm-panel--size-full{width:100%}.bm-panel--padding-sm .bm-panel__header,.bm-panel--padding-sm .bm-panel__body,.bm-panel--padding-sm .bm-panel__footer{padding-left:var(--bm-comp-panel-space-x-sm);padding-right:var(--bm-comp-panel-space-x-sm)}.bm-panel--padding-md .bm-panel__header,.bm-panel--padding-md .bm-panel__body,.bm-panel--padding-md .bm-panel__footer{padding-left:var(--bm-comp-panel-space-x-md);padding-right:var(--bm-comp-panel-space-x-md)}.bm-panel__header{gap:var(--bm-comp-panel-space-header-gap-y);padding-top:var(--bm-comp-panel-space-header-pad-top);padding-bottom:var(--bm-comp-panel-space-header-pad-bottom);flex-direction:column;display:flex}.bm-panel__header__row{gap:var(--bm-comp-panel-space-header-gap-x);align-items:flex-start;display:flex}.bm-panel__header__content-before{gap:var(--bm-comp-panel-space-header-gap-x);flex-direction:row;display:flex}.bm-panel__header__content-after{gap:var(--bm-comp-panel-space-header-gap-x);align-items:flex-start;display:flex}.bm-panel__header__heading{font:var(--bm-comp-panel-typo-heading);color:var(--bm-comp-panel-color-heading);flex:1}.bm-panel__header__description{color:var(--bm-comp-panel-color-description)}.bm-panel__header__close-button{width:var(--bm-sem-size-icon-lg);height:var(--bm-sem-size-icon-lg);justify-content:center;align-items:center;display:flex}.bm-panel__body{font:var(--bm-comp-panel-typo-description);color:var(--bm-comp-panel-color-description);flex:1;overflow:auto}.bm-panel__footer{gap:var(--bm-comp-panel-space-footer-gap-actions);padding-top:var(--bm-comp-panel-space-footer-pad-top);padding-bottom:var(--bm-comp-panel-space-footer-pad-bottom);flex-direction:column;display:flex}.bm-panel__footer__actions{gap:var(--bm-comp-panel-space-footer-gap-actions);flex-wrap:wrap;flex-shrink:0;align-content:center;align-items:center;display:flex}.bm-panel__footer__actions--start{justify-content:flex-start}.bm-panel__footer__actions--end{justify-content:flex-end}.bm-panel__footer__actions--spaceBetween{justify-content:space-between}.bm-panel__footer__actions--stacked{justify-content:center;gap:var(--bm-comp-panel-space-footer-gap-actions-stack);flex-direction:column}.bm-panel__overlay-divider{position:absolute}.bm-panel__overlay-divider--start{top:0;bottom:0;right:0}.bm-panel__overlay-divider--end{top:0;bottom:0;left:0}.bm-panel__overlay-divider--bottom{top:0;left:0;right:0}.bm-panel--overlay[data-position=start]{transform:translate(-100%)}.bm-panel--overlay[data-position=start][data-status=open]{transition:transform .4s ease-out;transform:translate(0)}.bm-panel--overlay[data-position=start][data-status=close]{transition:transform .4s ease-in}.bm-panel--overlay[data-position=end]{transform:translate(100%)}.bm-panel--overlay[data-position=end][data-status=open]{transition:transform .4s ease-out;transform:translate(0)}.bm-panel--overlay[data-position=end][data-status=close]{transition:transform .4s ease-in}.bm-panel--overlay[data-position=bottom]{transform:translateY(100%)}.bm-panel--overlay[data-position=bottom][data-status=open]{transition:transform .4s ease-out;transform:translateY(0)}.bm-panel--overlay[data-position=bottom][data-status=close]{transition:transform .4s ease-in}.bm-panel--overlay[data-position=full]{opacity:0}.bm-panel--overlay[data-position=full][data-status=open]{opacity:1;transition:opacity .4s ease-out}.bm-panel--overlay[data-position=full][data-status=close]{transition:opacity .4s ease-in}.bm-panel__inline-wrapper{flex-shrink:0;overflow:hidden}.bm-panel__inline-wrapper[data-status]{width:0;transition:width .4s ease-in}.bm-panel__inline-wrapper[data-status=open]{width:20rem;transition:width .4s ease-out}.bm-panel__inline-wrapper[data-position=bottom][data-status]{width:100%}.bm-panel__inline-wrapper[data-position=bottom][data-status] .bm-panel__inline-wrapper-content{transition:transform .4s ease-in;transform:translateY(100%)}.bm-panel__inline-wrapper[data-position=bottom][data-status=open] .bm-panel__inline-wrapper-content{transition:transform .4s ease-out;transform:translateY(0)}.bm-panel__inline-wrapper--full[data-status=open]{width:100%}.bm-panel__inline-wrapper-content{height:100%}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import "../assets/panel.css";
|
|
2
|
-
const
|
|
2
|
+
const n = {
|
|
3
3
|
"bm-light": "bm-light",
|
|
4
4
|
"bm-dark": "bm-dark",
|
|
5
5
|
"bm-inverse": "bm-inverse",
|
|
6
6
|
"bm-panel": "bm-panel",
|
|
7
7
|
"bm-panel--inline": "bm-panel--inline",
|
|
8
8
|
"bm-panel--overlay": "bm-panel--overlay",
|
|
9
|
-
"bm-panel--
|
|
9
|
+
"bm-panel--position-start": "bm-panel--position-start",
|
|
10
|
+
"bm-panel--position-end": "bm-panel--position-end",
|
|
10
11
|
"bm-panel--position-bottom": "bm-panel--position-bottom",
|
|
12
|
+
"bm-panel--position-full": "bm-panel--position-full",
|
|
13
|
+
"bm-panel--size-full": "bm-panel--size-full",
|
|
11
14
|
"bm-panel--padding-sm": "bm-panel--padding-sm",
|
|
12
15
|
"bm-panel__header": "bm-panel__header",
|
|
13
16
|
"bm-panel__body": "bm-panel__body",
|
|
@@ -23,8 +26,15 @@ const _ = {
|
|
|
23
26
|
"bm-panel__footer__actions--start": "bm-panel__footer__actions--start",
|
|
24
27
|
"bm-panel__footer__actions--end": "bm-panel__footer__actions--end",
|
|
25
28
|
"bm-panel__footer__actions--spaceBetween": "bm-panel__footer__actions--spaceBetween",
|
|
26
|
-
"bm-panel__footer__actions--stacked": "bm-panel__footer__actions--stacked"
|
|
29
|
+
"bm-panel__footer__actions--stacked": "bm-panel__footer__actions--stacked",
|
|
30
|
+
"bm-panel__overlay-divider": "bm-panel__overlay-divider",
|
|
31
|
+
"bm-panel__overlay-divider--start": "bm-panel__overlay-divider--start",
|
|
32
|
+
"bm-panel__overlay-divider--end": "bm-panel__overlay-divider--end",
|
|
33
|
+
"bm-panel__overlay-divider--bottom": "bm-panel__overlay-divider--bottom",
|
|
34
|
+
"bm-panel__inline-wrapper": "bm-panel__inline-wrapper",
|
|
35
|
+
"bm-panel__inline-wrapper-content": "bm-panel__inline-wrapper-content",
|
|
36
|
+
"bm-panel__inline-wrapper--full": "bm-panel__inline-wrapper--full"
|
|
27
37
|
};
|
|
28
38
|
export {
|
|
29
|
-
|
|
39
|
+
n as s
|
|
30
40
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var n=require("../assets/panel.css");const e={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","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--position-full":"bm-panel--position-full","bm-panel--size-full":"bm-panel--size-full","bm-panel--padding-sm":"bm-panel--padding-sm","bm-panel__header":"bm-panel__header","bm-panel__body":"bm-panel__body","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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("clsx"),n=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("clsx"),n=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:i}=n.getBEMClassNames("panel"),u=`${i}body`,e=({children:s,className:t,...a})=>{const l=r(c.styles[u],t);return o.jsx("div",{className:l,...a,children:s})};e.displayName="Panel.Body";exports.Body=e;
|
|
@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import t from "clsx";
|
|
3
3
|
import { g as r } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as l } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as l } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: i } = r("panel"), n = `${i}body`, p = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"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.
|
|
1
|
+
"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.BX1x4FlX.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;
|
|
@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
2
2
|
import i from "clsx";
|
|
3
3
|
import { g as c } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as o } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as o } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: l } = c("panel"), p = ({
|
|
7
7
|
layout: t = "end",
|
|
8
8
|
children: a,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("clsx"),a=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../Divider/Divider.cjs.js"),u=require("./Panel.Footer.Actions.cjs.js"),m=require("../../../chunks/panel.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("clsx"),a=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../Divider/Divider.cjs.js"),u=require("./Panel.Footer.Actions.cjs.js"),m=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:d}=a.getBEMClassNames("panel"),_=`${d}footer`,s=({children:r,className:o,divider:t=!0,...i})=>{const n=l(m.styles[_],o);return e.jsxs(e.Fragment,{children:[t&&e.jsx(c.Divider,{borderColor:"01"}),e.jsx("footer",{className:n,...i,children:r})]})};s.displayName="Panel.Footer";s.Actions=u.Actions;exports.Footer=s;
|
|
@@ -5,13 +5,13 @@ export interface PanelFooterProps extends ComponentPropsWithoutRef<'footer'> {
|
|
|
5
5
|
*/
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
/**
|
|
8
|
-
* Whether to show a divider
|
|
8
|
+
* Whether to show a divider before the footer
|
|
9
9
|
* @default true
|
|
10
10
|
*/
|
|
11
11
|
divider?: boolean;
|
|
12
12
|
}
|
|
13
13
|
export declare const Footer: {
|
|
14
|
-
({ children,
|
|
14
|
+
({ children, className: _className, divider, ...props }: PanelFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
Actions: {
|
|
17
17
|
({ layout, children, className: _className, ...props }: import('./Panel.Footer.Actions').PanelFooterActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsxs as i, Fragment as l, jsx as
|
|
1
|
+
import { jsxs as i, Fragment as l, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import n from "clsx";
|
|
3
3
|
import { g as c } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
5
|
import { Divider as p } from "../../Divider/Divider.es.js";
|
|
6
6
|
import { Actions as f } from "./Panel.Footer.Actions.es.js";
|
|
7
|
-
import { s as x } from "../../../chunks/panel.module.
|
|
8
|
-
const { subElementClassPrefix:
|
|
7
|
+
import { s as x } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
8
|
+
const { subElementClassPrefix: d } = c("panel"), C = `${d}footer`, s = ({
|
|
9
9
|
children: r,
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
className: t,
|
|
11
|
+
divider: e = !0,
|
|
12
12
|
...m
|
|
13
13
|
}) => {
|
|
14
|
-
const a = n(x[
|
|
14
|
+
const a = n(x[C], t);
|
|
15
15
|
return /* @__PURE__ */ i(l, { children: [
|
|
16
|
-
|
|
17
|
-
/* @__PURE__ */
|
|
16
|
+
e && /* @__PURE__ */ o(p, { borderColor: "01" }),
|
|
17
|
+
/* @__PURE__ */ o("footer", { className: a, ...m, children: r })
|
|
18
18
|
] });
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
s.displayName = "Panel.Footer";
|
|
21
|
+
s.Actions = f;
|
|
22
22
|
export {
|
|
23
|
-
|
|
23
|
+
s as Footer
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"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.
|
|
1
|
+
"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.BX1x4FlX.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;
|
|
@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import o from "clsx";
|
|
3
3
|
import { g as m } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as n } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as n } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: l } = m("panel"), c = `${l}header`, f = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"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.
|
|
1
|
+
"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.BX1x4FlX.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;
|
|
@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import a from "clsx";
|
|
3
3
|
import { g as m } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as n } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as n } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: l } = m("panel"), c = `${l}header`, f = ({
|
|
7
7
|
children: e,
|
|
8
8
|
className: s,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"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.
|
|
1
|
+
"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.BX1x4FlX.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;
|
|
@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
|
|
|
2
2
|
import t from "clsx";
|
|
3
3
|
import { g as i } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as m } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as m } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: l } = i("panel"), n = `${l}header`, p = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("clsx"),i=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("clsx"),i=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:o}=i.getBEMClassNames("panel"),u=`${o}header`,e=({children:s,className:a,...n})=>{const r=l(c.styles[`${u}__heading`],a);return t.jsx("div",{className:r,...n,children:s})};e.displayName="Panel.Header.Heading";exports.Heading=e;
|
|
@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import o from "clsx";
|
|
3
3
|
import { g as t } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as i } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as i } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: l } = t("panel"), n = `${l}header`, p = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../CloseButton/CloseButton.cjs.js"),b=require("./Panel.context.cjs.js"),l=require("../../../chunks/panel.module.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../CloseButton/CloseButton.cjs.js"),b=require("./Panel.context.cjs.js"),l=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:x}=m.getBEMClassNames("panel"),t=`${x}header`,o=({children:a,className:n,...r})=>{const{dismissible:i,closeButtonAriaLabel:c,onOpenChange:e}=b.usePanelContext(),u=d(l.styles[`${t}__row`],n);return s.jsxs("div",{className:u,...r,children:[a,i&&s.jsx("div",{className:l.styles[`${t}__close-button`],children:s.jsx(_.CloseButton,{"aria-label":c,onClick:()=>e==null?void 0:e(!1),size:"lg"})})]})};o.displayName="Panel.Header.Row";exports.Row=o;
|
|
@@ -4,7 +4,7 @@ import { g as d } from "../../../chunks/classNames.DNsS4J__.js";
|
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
5
|
import { CloseButton as f } from "../../CloseButton/CloseButton.es.js";
|
|
6
6
|
import { usePanelContext as b } from "./Panel.context.es.js";
|
|
7
|
-
import { s as o } from "../../../chunks/panel.module.
|
|
7
|
+
import { s as o } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
8
8
|
const { subElementClassPrefix: u } = d("panel"), a = `${u}header`, x = ({
|
|
9
9
|
children: l,
|
|
10
10
|
className: t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"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.
|
|
1
|
+
"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.BX1x4FlX.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;
|
|
@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import o from "clsx";
|
|
3
3
|
import { g as t } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { s as l } from "../../../chunks/panel.module.
|
|
5
|
+
import { s as l } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
6
6
|
const { subElementClassPrefix: i } = t("panel"), n = `${i}header`, p = ({
|
|
7
7
|
children: s,
|
|
8
8
|
className: e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("clsx"),o=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../Divider/Divider.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("clsx"),o=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../Divider/Divider.cjs.js"),d=require("./Panel.Header.Row.cjs.js"),c=require("./Panel.Header.ContentBefore.cjs.js"),u=require("./Panel.Header.Heading.cjs.js"),b=require("./Panel.Header.ContentAfter.cjs.js"),P=require("./Panel.Header.Description.cjs.js"),p=require("./Panel.Header.Subheader.cjs.js"),q=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:H}=o.getBEMClassNames("panel"),m=`${H}header`,e=({children:n,className:a,divider:i=!0,...t})=>{const s=l(q.styles[m],a);return r.jsxs(r.Fragment,{children:[r.jsx("header",{className:s,...t,children:n}),i&&r.jsx(_.Divider,{borderColor:"01"})]})};e.displayName="Panel.Header";e.Row=d.Row;e.ContentBefore=c.ContentBefore;e.Heading=u.Heading;e.Description=P.Description;e.ContentAfter=b.ContentAfter;e.Subheader=p.Subheader;exports.Header=e;
|
|
@@ -5,13 +5,13 @@ export interface PanelHeaderProps extends ComponentPropsWithoutRef<'header'> {
|
|
|
5
5
|
*/
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
/**
|
|
8
|
-
* Whether to show a divider
|
|
8
|
+
* Whether to show a divider after the header
|
|
9
9
|
* @default true
|
|
10
10
|
*/
|
|
11
11
|
divider?: boolean;
|
|
12
12
|
}
|
|
13
13
|
export declare const Header: {
|
|
14
|
-
({ children,
|
|
14
|
+
({ children, className: _className, divider, ...props }: PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
Row: {
|
|
17
17
|
({ children, className: _className, ...props }: import('./Panel.Header.Row').PanelHeaderRowProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as i, Fragment as n, jsx as
|
|
1
|
+
import { jsxs as i, Fragment as n, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import p from "clsx";
|
|
3
3
|
import { g as f } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
@@ -6,29 +6,29 @@ import { Divider as l } from "../../Divider/Divider.es.js";
|
|
|
6
6
|
import { Row as d } from "./Panel.Header.Row.es.js";
|
|
7
7
|
import { ContentBefore as c } from "./Panel.Header.ContentBefore.es.js";
|
|
8
8
|
import { Heading as C } from "./Panel.Header.Heading.es.js";
|
|
9
|
-
import { ContentAfter as
|
|
10
|
-
import { Description as
|
|
11
|
-
import { Subheader as
|
|
12
|
-
import { s as
|
|
13
|
-
const { subElementClassPrefix:
|
|
9
|
+
import { ContentAfter as b } from "./Panel.Header.ContentAfter.es.js";
|
|
10
|
+
import { Description as g } from "./Panel.Header.Description.es.js";
|
|
11
|
+
import { Subheader as h } from "./Panel.Header.Subheader.es.js";
|
|
12
|
+
import { s as u } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
13
|
+
const { subElementClassPrefix: x } = f("panel"), H = `${x}header`, r = ({
|
|
14
14
|
children: o,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
className: t,
|
|
16
|
+
divider: m = !0,
|
|
17
17
|
...s
|
|
18
18
|
}) => {
|
|
19
|
-
const a = p(
|
|
19
|
+
const a = p(u[H], t);
|
|
20
20
|
return /* @__PURE__ */ i(n, { children: [
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
|
|
21
|
+
/* @__PURE__ */ e("header", { className: a, ...s, children: o }),
|
|
22
|
+
m && /* @__PURE__ */ e(l, { borderColor: "01" })
|
|
23
23
|
] });
|
|
24
24
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
r.displayName = "Panel.Header";
|
|
26
|
+
r.Row = d;
|
|
27
|
+
r.ContentBefore = c;
|
|
28
|
+
r.Heading = C;
|
|
29
|
+
r.Description = g;
|
|
30
|
+
r.ContentAfter = b;
|
|
31
|
+
r.Subheader = h;
|
|
32
32
|
export {
|
|
33
|
-
|
|
33
|
+
r as Header
|
|
34
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("clsx"),S=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const $=require("./Panel.context.cjs.js"),R=require("./Panel.Header.cjs.js"),U=require("./Panel.Body.cjs.js"),B=require("./Panel.Footer.cjs.js"),r=require("./Panel.helpers.cjs.js"),T=require("../../FloatingUI/FloatingUI.root.cjs.js"),A=require("../../FloatingUI/FloatingUI.content.cjs.js"),H=require("../../Divider/Divider.cjs.js"),s=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:t}=S.getBEMClassNames("panel"),a=({position:l,className:d})=>e.jsx(H.Divider,{borderColor:"01",orientation:l==="bottom"?"horizontal":"vertical",className:d}),n=({children:l,className:d,padding:q="md",onOpenChange:v,open:p,size:c,dismissible:g=!0,closeButtonAriaLabel:I="Close panel",kind:o="inline",position:P,divider:f=!0,isAnimated:y=!0,...x})=>{const i=r.getResolvedPanelPosition(P),m=u(s.styles[t],s.styles[`${t}--${o}`],c&&s.styles[`${t}--size-${c}`],s.styles[`${t}--padding-${q}`],s.styles[`${t}--position-${i}`],d),w=u(s.styles[`${t}__inline-wrapper`],c==="full"&&s.styles[`${t}__inline-wrapper--full`]),b={dismissible:g,closeButtonAriaLabel:I,onOpenChange:v,position:P},{inlineStatus:C,isInlineVisible:N}=r.useInlineTransition(o==="inline"?p:void 0,y),{showDivider:j,dividerBefore:D,dividerAfter:F}=r.getPanelDividerState(f,i),h=o==="overlay"?u(s.styles[`${t}__overlay-divider`],s.styles[`${t}__overlay-divider--${i}`]):void 0,_=j&&N;return o==="inline"?N?e.jsxs($.PanelContext.Provider,{value:b,children:[D&&_&&e.jsx(a,{position:i}),e.jsx("div",{className:w,"data-position":i,"data-status":C,children:e.jsxs("div",{className:s.styles[`${t}__inline-wrapper-content`],children:[i==="bottom"&&_&&e.jsx(a,{position:i}),e.jsx("aside",{className:m,...x,children:l})]})}),F&&_&&e.jsx(a,{position:i})]}):null:e.jsx($.PanelContext.Provider,{value:b,children:e.jsx(T.FloatingUIRoot,{open:p,onOpenChange:v,portalled:!0,transitionConfig:{duration:y?r.PANEL_TRANSITION_DURATION_MS:0},children:e.jsxs(A.Content,{className:m,skipFloatingStyles:!0,overlay:!0,...x,"data-position":i,children:[l,j&&e.jsx(a,{position:i,className:h})]})})})};n.displayName="Panel";n.Header=R.Header;n.Body=U.Body;n.Footer=B.Footer;exports.Panel=n;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PanelPosition } from './Panel.types';
|
|
1
2
|
export interface PanelContextValue {
|
|
2
3
|
/**
|
|
3
4
|
* Whether to show a dismissible button
|
|
@@ -11,6 +12,10 @@ export interface PanelContextValue {
|
|
|
11
12
|
* Callback when panel open state changes
|
|
12
13
|
*/
|
|
13
14
|
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Panel position (determines divider placement)
|
|
17
|
+
*/
|
|
18
|
+
position?: PanelPosition;
|
|
14
19
|
}
|
|
15
20
|
export declare const PanelContext: import('react').Context<PanelContextValue | undefined>;
|
|
16
21
|
export declare const usePanelContext: () => PanelContextValue;
|
package/lib/wip/Panel/Panel.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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, ...props }: PanelProps):
|
|
3
|
+
({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, isAnimated, ...props }: PanelProps): JSX.Element | null;
|
|
4
4
|
displayName: string;
|
|
5
5
|
Header: {
|
|
6
|
-
({ children,
|
|
6
|
+
({ children, className: _className, divider, ...props }: import('./Panel.Header').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
Row: {
|
|
9
9
|
({ children, className: _className, ...props }: import('./Panel.Header.Row').PanelHeaderRowProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -35,7 +35,7 @@ export declare const Panel: {
|
|
|
35
35
|
displayName: string;
|
|
36
36
|
};
|
|
37
37
|
Footer: {
|
|
38
|
-
({ children,
|
|
38
|
+
({ children, className: _className, divider, ...props }: import('./Panel.Footer').PanelFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
displayName: string;
|
|
40
40
|
Actions: {
|
|
41
41
|
({ layout, children, className: _className, ...props }: import('./Panel.Footer.Actions').PanelFooterActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,43 +1,117 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { g as
|
|
1
|
+
import { jsxs as p, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import v from "clsx";
|
|
3
|
+
import { g as F } from "../../../chunks/classNames.DNsS4J__.js";
|
|
4
4
|
import "../../../chunks/constants.BBi77pmH.js";
|
|
5
|
-
import { PanelContext as
|
|
6
|
-
import { Header as
|
|
7
|
-
import { Body as
|
|
8
|
-
import { Footer as
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
5
|
+
import { PanelContext as I } from "./Panel.context.es.js";
|
|
6
|
+
import { Header as T } from "./Panel.Header.es.js";
|
|
7
|
+
import { Body as A } from "./Panel.Body.es.js";
|
|
8
|
+
import { Footer as j } from "./Panel.Footer.es.js";
|
|
9
|
+
import { getResolvedPanelPosition as E, useInlineTransition as H, getPanelDividerState as M, PANEL_TRANSITION_DURATION_MS as U } from "./Panel.helpers.es.js";
|
|
10
|
+
import { FloatingUIRoot as V } from "../../FloatingUI/FloatingUI.root.es.js";
|
|
11
|
+
import { Content as L } from "../../FloatingUI/FloatingUI.content.es.js";
|
|
12
|
+
import { Divider as O } from "../../Divider/Divider.es.js";
|
|
13
|
+
import { s as i } from "../../../chunks/panel.module.BVm3KvDs.js";
|
|
14
|
+
const { baseClassNamePrefix: o } = F("panel"), l = ({
|
|
15
|
+
position: t,
|
|
16
|
+
className: a
|
|
17
|
+
}) => /* @__PURE__ */ r(
|
|
18
|
+
O,
|
|
19
|
+
{
|
|
20
|
+
borderColor: "01",
|
|
21
|
+
orientation: t === "bottom" ? "horizontal" : "vertical",
|
|
22
|
+
className: a
|
|
23
|
+
}
|
|
24
|
+
), s = ({
|
|
25
|
+
children: t,
|
|
26
|
+
className: a,
|
|
27
|
+
padding: g = "md",
|
|
28
|
+
onOpenChange: c,
|
|
29
|
+
open: f,
|
|
30
|
+
size: d,
|
|
31
|
+
dismissible: h = !0,
|
|
32
|
+
closeButtonAriaLabel: x = "Close panel",
|
|
33
|
+
kind: n = "inline",
|
|
34
|
+
position: u,
|
|
35
|
+
divider: D = !0,
|
|
36
|
+
isAnimated: N = !0,
|
|
37
|
+
...$
|
|
22
38
|
}) => {
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
),
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
39
|
+
const e = E(u), _ = v(
|
|
40
|
+
i[o],
|
|
41
|
+
i[`${o}--${n}`],
|
|
42
|
+
d && i[`${o}--size-${d}`],
|
|
43
|
+
i[`${o}--padding-${g}`],
|
|
44
|
+
i[`${o}--position-${e}`],
|
|
45
|
+
a
|
|
46
|
+
), b = v(
|
|
47
|
+
i[`${o}__inline-wrapper`],
|
|
48
|
+
d === "full" && i[`${o}__inline-wrapper--full`]
|
|
49
|
+
), P = {
|
|
50
|
+
dismissible: h,
|
|
51
|
+
closeButtonAriaLabel: x,
|
|
52
|
+
onOpenChange: c,
|
|
53
|
+
position: u
|
|
54
|
+
}, { inlineStatus: R, isInlineVisible: y } = H(
|
|
55
|
+
n === "inline" ? f : void 0,
|
|
56
|
+
N
|
|
57
|
+
), { showDivider: C, dividerBefore: S, dividerAfter: w } = M(
|
|
58
|
+
D,
|
|
59
|
+
e
|
|
60
|
+
), B = n === "overlay" ? v(
|
|
61
|
+
i[`${o}__overlay-divider`],
|
|
62
|
+
i[`${o}__overlay-divider--${e}`]
|
|
63
|
+
) : void 0, m = C && y;
|
|
64
|
+
return n === "inline" ? y ? /* @__PURE__ */ p(I.Provider, { value: P, children: [
|
|
65
|
+
S && m && /* @__PURE__ */ r(l, { position: e }),
|
|
66
|
+
/* @__PURE__ */ r(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
className: b,
|
|
70
|
+
"data-position": e,
|
|
71
|
+
"data-status": R,
|
|
72
|
+
children: /* @__PURE__ */ p("div", { className: i[`${o}__inline-wrapper-content`], children: [
|
|
73
|
+
e === "bottom" && m && /* @__PURE__ */ r(l, { position: e }),
|
|
74
|
+
/* @__PURE__ */ r("aside", { className: _, ...$, children: t })
|
|
75
|
+
] })
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
w && m && /* @__PURE__ */ r(l, { position: e })
|
|
79
|
+
] }) : null : /* @__PURE__ */ r(I.Provider, { value: P, children: /* @__PURE__ */ r(
|
|
80
|
+
V,
|
|
81
|
+
{
|
|
82
|
+
open: f,
|
|
83
|
+
onOpenChange: c,
|
|
84
|
+
portalled: !0,
|
|
85
|
+
transitionConfig: {
|
|
86
|
+
duration: N ? U : 0
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ p(
|
|
89
|
+
L,
|
|
90
|
+
{
|
|
91
|
+
className: _,
|
|
92
|
+
skipFloatingStyles: !0,
|
|
93
|
+
overlay: !0,
|
|
94
|
+
...$,
|
|
95
|
+
"data-position": e,
|
|
96
|
+
children: [
|
|
97
|
+
t,
|
|
98
|
+
C && /* @__PURE__ */ r(
|
|
99
|
+
l,
|
|
100
|
+
{
|
|
101
|
+
position: e,
|
|
102
|
+
className: B
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
) });
|
|
36
110
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
111
|
+
s.displayName = "Panel";
|
|
112
|
+
s.Header = T;
|
|
113
|
+
s.Body = A;
|
|
114
|
+
s.Footer = j;
|
|
41
115
|
export {
|
|
42
|
-
|
|
116
|
+
s as Panel
|
|
43
117
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),o=400,c=e=>e||"end",d=(e,t)=>{const n=e&&t!=="full";return{showDivider:n,dividerBefore:n&&t!=="start"&&t!=="bottom",dividerAfter:n&&t==="start"}},I=(e,t)=>{const[n,i]=a.useState(void 0),[l,s]=a.useState(e!==!1);return a.useEffect(()=>{if(!t){s(e!==!1),i(void 0);return}if(e!==void 0)if(e){s(!0),i("close");let r;const u=requestAnimationFrame(()=>{r=requestAnimationFrame(()=>i("open"))});return()=>{cancelAnimationFrame(u),cancelAnimationFrame(r)}}else{i("close");const r=setTimeout(()=>{s(!1),i(void 0)},o);return()=>clearTimeout(r)}},[t,e]),{inlineStatus:n,isInlineVisible:l}};exports.PANEL_TRANSITION_DURATION_MS=o;exports.getPanelDividerState=d;exports.getResolvedPanelPosition=c;exports.useInlineTransition=I;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { PanelPosition } from './Panel.types';
|
|
2
|
+
export declare const PANEL_TRANSITION_DURATION_MS = 400;
|
|
3
|
+
export type PanelInlineStatus = 'open' | 'close' | undefined;
|
|
4
|
+
export declare const getResolvedPanelPosition: (position?: PanelPosition) => PanelPosition;
|
|
5
|
+
export declare const getPanelDividerState: (divider: boolean, position?: PanelPosition) => {
|
|
6
|
+
showDivider: boolean;
|
|
7
|
+
dividerBefore: boolean;
|
|
8
|
+
dividerAfter: boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare const useInlineTransition: (open: boolean | undefined, isAnimated: boolean) => {
|
|
11
|
+
inlineStatus: PanelInlineStatus;
|
|
12
|
+
isInlineVisible: boolean;
|
|
13
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useState as o, useEffect as u } from "react";
|
|
2
|
+
const c = 400, m = (e) => e || "end", f = (e, t) => {
|
|
3
|
+
const n = e && t !== "full";
|
|
4
|
+
return {
|
|
5
|
+
showDivider: n,
|
|
6
|
+
dividerBefore: n && t !== "start" && t !== "bottom",
|
|
7
|
+
dividerAfter: n && t === "start"
|
|
8
|
+
};
|
|
9
|
+
}, I = (e, t) => {
|
|
10
|
+
const [n, i] = o(void 0), [a, s] = o(e !== !1);
|
|
11
|
+
return u(() => {
|
|
12
|
+
if (!t) {
|
|
13
|
+
s(e !== !1), i(void 0);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
if (e !== void 0)
|
|
17
|
+
if (e) {
|
|
18
|
+
s(!0), i("close");
|
|
19
|
+
let r;
|
|
20
|
+
const l = requestAnimationFrame(() => {
|
|
21
|
+
r = requestAnimationFrame(() => i("open"));
|
|
22
|
+
});
|
|
23
|
+
return () => {
|
|
24
|
+
cancelAnimationFrame(l), cancelAnimationFrame(r);
|
|
25
|
+
};
|
|
26
|
+
} else {
|
|
27
|
+
i("close");
|
|
28
|
+
const r = setTimeout(() => {
|
|
29
|
+
s(!1), i(void 0);
|
|
30
|
+
}, c);
|
|
31
|
+
return () => clearTimeout(r);
|
|
32
|
+
}
|
|
33
|
+
}, [t, e]), { inlineStatus: n, isInlineVisible: a };
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
c as PANEL_TRANSITION_DURATION_MS,
|
|
37
|
+
f as getPanelDividerState,
|
|
38
|
+
m as getResolvedPanelPosition,
|
|
39
|
+
I as useInlineTransition
|
|
40
|
+
};
|
|
@@ -38,29 +38,34 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
|
|
|
38
38
|
* @default 'Close panel'
|
|
39
39
|
*/
|
|
40
40
|
closeButtonAriaLabel?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Whether to animate the panel on open/close
|
|
43
|
+
* @default true
|
|
44
|
+
*/
|
|
45
|
+
isAnimated?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Whether to show an external divider between panel and page content
|
|
48
|
+
* @default true
|
|
49
|
+
*/
|
|
50
|
+
divider?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Specify the position of the Panel
|
|
53
|
+
* 'start' | 'end' | 'bottom' | 'full'
|
|
54
|
+
* @default 'end'
|
|
55
|
+
*/
|
|
56
|
+
position?: PanelPosition;
|
|
41
57
|
}
|
|
42
58
|
export interface InlinePanelProps extends BasePanelProps {
|
|
43
59
|
/**
|
|
44
60
|
* Specify the Panel as inline
|
|
45
61
|
*/
|
|
46
62
|
kind?: 'inline';
|
|
47
|
-
/**
|
|
48
|
-
* Specify the position of the Panel
|
|
49
|
-
* For inline: 'bottom'
|
|
50
|
-
*/
|
|
51
|
-
position?: 'bottom';
|
|
52
63
|
}
|
|
53
64
|
export interface OverlayPanelProps extends BasePanelProps {
|
|
54
65
|
/**
|
|
55
66
|
* Specify the Panel as overlay
|
|
56
67
|
*/
|
|
57
68
|
kind: 'overlay';
|
|
58
|
-
/**
|
|
59
|
-
* Specify the position of the Panel
|
|
60
|
-
* For overlay: 'start' | 'end' | 'bottom' | 'full'
|
|
61
|
-
* @default 'end'
|
|
62
|
-
*/
|
|
63
|
-
position?: PanelPosition;
|
|
64
69
|
/**
|
|
65
70
|
* Specify the modal type (overlay only)
|
|
66
71
|
* @default 'nonModal'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viasat/beam-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"description": "React component library for the Beam design system",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Viasat",
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@viasat/beam-fonts": "2.
|
|
63
|
-
"@viasat/beam-shared": "2.
|
|
64
|
-
"@viasat/beam-styles": "2.
|
|
65
|
-
"@viasat/beam-tokens": "2.
|
|
66
|
-
"@viasat/beam-icons": "2.
|
|
62
|
+
"@viasat/beam-fonts": "2.9.0",
|
|
63
|
+
"@viasat/beam-shared": "2.9.0",
|
|
64
|
+
"@viasat/beam-styles": "2.9.0",
|
|
65
|
+
"@viasat/beam-tokens": "2.9.0",
|
|
66
|
+
"@viasat/beam-icons": "2.9.0",
|
|
67
67
|
"clsx": "^1.2.1",
|
|
68
68
|
"@floating-ui/react": "^0.26.18",
|
|
69
69
|
"@stepperize/react": "^5.1.5",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var _=require("../assets/panel.css");const e={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-panel":"bm-panel","bm-panel--inline":"bm-panel--inline","bm-panel--overlay":"bm-panel--overlay","bm-panel--size-full":"bm-panel--size-full","bm-panel--position-bottom":"bm-panel--position-bottom","bm-panel--padding-sm":"bm-panel--padding-sm","bm-panel__header":"bm-panel__header","bm-panel__body":"bm-panel__body","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"};exports.styles=e;
|