@solibo/solibo-ui 1.0.22 → 1.0.24
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/dist/assets/index.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index34.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/components/aside/index.cjs +1 -1
- package/dist/components/aside/index.js +12 -12
- package/dist/components/controls/index.cjs +1 -1
- package/dist/components/controls/index.cjs.map +1 -1
- package/dist/components/controls/index.js +29 -29
- package/dist/components/controls/index.js.map +1 -1
- package/dist/components/editor/index.cjs +24 -24
- package/dist/components/editor/index.cjs.map +1 -1
- package/dist/components/editor/index.js +2245 -2239
- package/dist/components/editor/index.js.map +1 -1
- package/dist/components/header/index.cjs +1 -1
- package/dist/components/header/index.cjs.map +1 -1
- package/dist/components/header/index.js +36 -12
- package/dist/components/header/index.js.map +1 -1
- package/dist/index.d.ts +7 -2
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
package/dist/assets/index18.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._header_ct7nd_1{color:var(--colors-semantic-content-secondary);display:grid;font-weight:var(--font-font-weight-bold);gap:var(--shape-spacing-3xs) var(--shape-spacing-xs);grid-template-columns:1fr;margin:var(--shape-spacing-md) 0;position:relative}._header_ct7nd_1>*{grid-column:1;min-width:0}._header_ct7nd_1 :is(h1,h2,h3,h4,h5,h6){color:var(--colors-semantic-content-primary);margin:0;overflow-wrap:break-word}._header_ct7nd_1 h1{font-size:var(--typography-font-sizes-h1);letter-spacing:-1.2px}._header_ct7nd_1 h2,._header_ct7nd_1 sup{font-size:var(--typography-font-sizes-h2)}._header_ct7nd_1 h3{font-size:var(--typography-font-sizes-h3)}._header_ct7nd_1 p{font-size:var(--typography-font-sizes-body-lg);font-weight:var(--font-font-weight-regular);margin:var(--shape-spacing-xs) 0 0!important}._header_ct7nd_1 sub{font-weight:var(--font-font-weight-regular)}._header_ct7nd_1 sub[data-clipboard]{align-items:center;cursor:copy;display:flex;gap:var(--scale-8);padding:var(--scale-8) 0}._header_ct7nd_1 sub,._header_ct7nd_1 sup{font-size:var(--typography-font-sizes-body-sm)}._header_ct7nd_1:has([data-component=badge]) h1,._header_ct7nd_1:has([data-component=badge]) h2,._header_ct7nd_1:has([data-component=badge]) h3,._header_ct7nd_1:has([data-component=badge]) h4{display:inline-block}._header_ct7nd_1 ._controls_ct7nd_67{display:grid;grid-template-columns:minmax(25ch,1fr) minmax(0,-webkit-max-content);grid-template-columns:minmax(25ch,1fr) minmax(0,max-content);flex:1 0 auto;gap:var(--shape-spacing-xs);justify-content:space-between;max-width:100%}._header_ct7nd_1 ._controls_ct7nd_67 h1,._header_ct7nd_1 ._controls_ct7nd_67 h2,._header_ct7nd_1 ._controls_ct7nd_67 h3,._header_ct7nd_1 ._controls_ct7nd_67 h4,._header_ct7nd_1 ._controls_ct7nd_67 h5,._header_ct7nd_1 ._controls_ct7nd_67 h6,._header_ct7nd_1 ._controls_ct7nd_67 sub,._header_ct7nd_1 ._controls_ct7nd_67 sup{grid-column:1}._header_ct7nd_1 ._controls_ct7nd_67 [data-component=controls]{align-self:center;grid-column:2;height:-webkit-max-content;height:-moz-max-content;height:max-content;margin-top:0}._header_ct7nd_1 ._cta_ct7nd_94{display:flex;flex-wrap:wrap;gap:var(--shape-spacing-xs);justify-content:space-between}._header_ct7nd_1 ._cta_ct7nd_94 [data-component=button]{height:-webkit-max-content;height:-moz-max-content;height:max-content;align-self:center}._header_ct7nd_1 ._header-content_ct7nd_106{display:flex;flex-direction:column;gap:var(--shape-spacing-3xs)}._header_ct7nd_1 ._header-content_ct7nd_106>a{color:inherit;font-size:var(--typography-font-sizes-label-lg);text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (width < 480px){._header_ct7nd_1 ._cta_ct7nd_94{flex-direction:column}._header_ct7nd_1 ._cta_ct7nd_94 [data-component=button]{width:100%}._header_ct7nd_1 ._controls_ct7nd_67:not(:has([data-adaptive=true])){grid-template-columns:1fr;gap:var(--shape-spacing-3xs)}._header_ct7nd_1 ._controls_ct7nd_67:not(:has([data-adaptive=true])) [data-component=controls]{grid-column:1;margin-top:var(--shape-spacing-md)}}@media (width >= 960px){._jumbo_ct7nd_143{margin:calc(var(--utils-tokens-unit) * 3) 0}._jumbo_ct7nd_143 h1{font-size:var(--typography-font-sizes-display-sm)}}
|
package/dist/assets/index24.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._aside_1u3pz_3 section{padding:var(--utils-tokens-unit) 0}._sidebar_1u3pz_9{border-right:var(--scale-1) solid var(--colors-semantic-border-default);height:100vh;overflow:hidden auto;padding:var(--shape-spacing-xl) var(--shape-spacing-md) var(--shape-spacing-xl) var(--shape-spacing-sm)}._sidebar_1u3pz_9 header{margin-bottom:var(--shape-spacing-lg);margin-top:0}._sidebar_1u3pz_9 [data-sidebar-toggle]{display:none}@supports (-moz-appearance: none){._sidebar_1u3pz_9{scrollbar-color:var(--colors-semantic-border-default) transparent;scrollbar-width:thin}}@supports selector(::-webkit-scrollbar){._sidebar_1u3pz_9::-webkit-scrollbar{height:var(--scale-2);width:var(--scale-2)}._sidebar_1u3pz_9::-webkit-scrollbar-track{background-color:transparent}._sidebar_1u3pz_9::-webkit-scrollbar-thumb{background-color:var(--colors-semantic-border-default);border-radius:var(--scale-4)}}@media (width <= 1024px){._sidebar_1u3pz_9{height:calc(100vh - var(--utils-tokens-unit) * 4)}}@media (width <= 768px){._sidebar_1u3pz_9{background-color:var(--colors-semantic-primary-primary-subtle);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overscroll-behavior-y:auto;padding:var(--shape-spacing-md);position:relative;top:0;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100vw;z-index:2}._sidebar_1u3pz_9>nav{display:none}._sidebar_1u3pz_9>header{margin-bottom:0}._sidebar_1u3pz_9 [data-sidebar-toggle]{position:relative;display:block;float:right;margin-top:var(--shape-spacing-2xs);padding:0}._sidebar_1u3pz_9 [data-sidebar-toggle]:after{content:"";inset:var(--utils-tokens-negative-unit);position:absolute}._sidebar_1u3pz_9._open_1u3pz_62{background-color:var(--colors-semantic-bg-page);display:block;height:calc(100vh - var(--shape-spacing-3xl))}._sidebar_1u3pz_9._open_1u3pz_62>header{margin-bottom:var(--shape-spacing-md)}._sidebar_1u3pz_9._open_1u3pz_62>nav{display:block}}._sticky_1u3pz_78{position:-webkit-sticky;position:sticky;top:0}
|
package/dist/assets/index34.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _reveal_t1re6_1{0%{opacity:0;transform:translateY(100%) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}._controls_t1re6_13{align-items:center;display:flex;flex-wrap:wrap;gap:var(--shape-spacing-md)}._controls_t1re6_13>*{flex-shrink:0}._controls_t1re6_13>[data-component=button]{white-space:nowrap}._default_t1re6_28{justify-content:flex-end;margin-top:var(--shape-spacing-md);width:100%}@media (width <= 480px){._default_t1re6_28{flex-direction:column}._default_t1re6_28 [data-component=button]{width:100%}}._inline_t1re6_43{justify-content:flex-end;margin-left:auto}._embedded_t1re6_48,._fixed_t1re6_49{background-color:var(--colors-semantic-bg-surface);border-radius:var(--shape-border-radius-radius-lg);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);gap:var(--shape-spacing-2xs);justify-content:center;padding:var(--shape-spacing-2xs);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._embedded_t1re6_48._adaptive_t1re6_60,._fixed_t1re6_49._adaptive_t1re6_60{flex-wrap:nowrap}._embedded_t1re6_48>[data-component=button],._embedded_t1re6_48 ._measurement_t1re6_65>[data-component=button],._fixed_t1re6_49>[data-component=button],._fixed_t1re6_49 ._measurement_t1re6_65>[data-component=button]{background-color:transparent;border:none;box-shadow:none;color:var(--colors-semantic-content-secondary)}._embedded_t1re6_48>[data-component=button]:hover,._embedded_t1re6_48 ._measurement_t1re6_65>[data-component=button]:hover,._fixed_t1re6_49>[data-component=button]:hover,._fixed_t1re6_49 ._measurement_t1re6_65>[data-component=button]:hover{background-color:var(--colors-semantic-interactive-hover-subtle)}._embedded_t1re6_48._adaptive_t1re6_60{max-width:100%}._fixed_t1re6_49{animation:_reveal_t1re6_1 var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function) var(--utils-tokens-transition-delay) both;border-left:var(--scale-4) solid var(--colors-semantic-border-focus);bottom:var(--shape-spacing-2xl);box-shadow:var(--shape-box-shadow-md-position-x) var(--shape-box-shadow-md-position-y) var(--shape-box-shadow-md-blur) var(--shape-box-shadow-md-spread) var(--colors-box-shadow-heavy);left:50%;position:fixed;will-change:opacity,transform;z-index:4}._fixed_t1re6_49._adaptive_t1re6_60{max-width:calc(100dvw - var(--shape-spacing-2xl))}._fixed_t1re6_49>._non-button-content_t1re6_99{align-items:center;border-right:1px solid var(--colors-semantic-border-default);display:inline-flex;padding:var(--shape-spacing-2xs) var(--shape-spacing-md);white-space:nowrap}._fixed_t1re6_49>._non-button-content_t1re6_99 [data-component=link]{margin-right:var(--shape-spacing-xs)}._measurement_t1re6_65{align-items:center;display:flex;left:0;pointer-events:none;position:fixed;top:0;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}._measurement_t1re6_65>*{flex-shrink:0;white-space:nowrap}._overflow-trigger_t1re6_128{display:inline-flex;flex:none}
|
package/dist/assets/index39.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._field_x33uk_3{min-width:0;width:100%}._editor_x33uk_8{background-color:var(--colors-semantic-bg-surface);border:var(--scale-1) solid var(--colors-semantic-border-default);border-radius:var(--shape-border-radius-radius-md);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color)}._editor_x33uk_8 [role=textbox]{border-radius:0 0 var(--shape-border-radius-radius-md) var(--shape-border-radius-radius-md);box-sizing:border-box;line-height:1.25;max-height:var(--editor-max-height);min-height:var(--editor-min-height);overflow-y:auto;padding:var(--scale-8) var(--utils-tokens-unit)}._editor_x33uk_8 img{max-width:100%}@media (width <= 370px){._editor_x33uk_8 button{padding-inline:var(--scale-12)}}._has-files_x33uk_38 [role=textbox]{border-radius:0}._invalid_x33uk_42{border-color:var(--colors-semantic-status-error-border)}._error_x33uk_46{color:var(--colors-semantic-status-error-content);font-size:var(--typography-font-sizes-body-sm);margin-top:var(--scale-4)}._content_x33uk_52{position:relative}._files_x33uk_56{border-top:var(--scale-1) solid var(--colors-semantic-border-default);display:flex;flex-wrap:wrap;gap:var(--scale-8);padding:var(--scale-8) var(--utils-tokens-unit)}._placeholder_x33uk_64{color:var(--colors-semantic-content-secondary);left:var(--utils-tokens-unit);pointer-events:none;position:absolute;top:var(--scale-8)}._fill_x33uk_72{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0}._fill-editor_x33uk_79{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}._fill-editor_x33uk_79 ._content_x33uk_52{min-height:0}._fill-editor_x33uk_79 [role=textbox]{height:100%;max-height:none}._meta_x33uk_95{align-items:center;display:grid;flex-basis:100%;grid-template-columns:1fr auto auto;opacity:0;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function)}._meta_x33uk_95._active_x33uk_104{border-top:var(--scale-1) solid var(--colors-semantic-border-default);height:auto;opacity:1}._meta_x33uk_95 input{border-radius:0;width:100%}._submit_x33uk_116{margin-left:auto}._bold_x33uk_120{font-weight:700}._italic_x33uk_124{font-style:italic}._link_x33uk_128{color:var(--colors-semantic-primary-primary);cursor:pointer;text-decoration:underline}._list_x33uk_134,._paragraph_x33uk_135{margin:var(--scale-8) 0}._paragraph_x33uk_135:first-child{margin-top:0}._list_x33uk_134{list-style-type:disc!important}._list_x33uk_134 li{list-style:inherit;margin-bottom:var(--scale-8);margin-left:var(--scale-16)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const s=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),_=require("react"),p=require("../button/index.cjs"),b=require("../icon/index.cjs"),f="_aside_1u3pz_3",x="_sidebar_1u3pz_9",y="_open_1u3pz_62",k="_sticky_1u3pz_78",e={aside:f,sidebar:x,open:y,sticky:k},m={default:e.default,sidebar:e.sidebar},g=({children:c,className:n,sticky:d=!1,variant:i="default"})=>{const[t,o]=_.useState(!1);return s.jsxs("aside",{className:l.t(n&&n,t&&e.open,e.aside,d&&e.sticky,m[i]),onClick:u=>{var r;const a=u.target.closest("a[href]");a&&!((r=a.getAttribute("href"))!=null&&r.startsWith("#"))&&o(!1)},"data-component":"aside",children:[i==="sidebar"&&s.jsx(p.Button,{"data-sidebar-toggle":"true",onClick:()=>o(!t),variant:"tertiary",children:s.jsx(b.Icon,{name:t?"x":"menu"})}),c]})};exports.Aside=g;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { t as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import '../../assets/index24.css';const b = "
|
|
1
|
+
import { jsxs as f, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { t as l } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { useState as m } from "react";
|
|
4
|
+
import { Button as u } from "../button/index.js";
|
|
5
|
+
import { Icon as _ } from "../icon/index.js";
|
|
6
|
+
import '../../assets/index24.css';const b = "_aside_1u3pz_3", k = "_sidebar_1u3pz_9", y = "_open_1u3pz_62", h = "_sticky_1u3pz_78", t = {
|
|
7
7
|
aside: b,
|
|
8
8
|
sidebar: k,
|
|
9
9
|
open: y,
|
|
@@ -11,23 +11,23 @@ import '../../assets/index24.css';const b = "_aside_1162s_3", k = "_sidebar_1162
|
|
|
11
11
|
}, g = {
|
|
12
12
|
default: t.default,
|
|
13
13
|
sidebar: t.sidebar
|
|
14
|
-
},
|
|
14
|
+
}, v = ({
|
|
15
15
|
children: d,
|
|
16
16
|
className: s,
|
|
17
17
|
sticky: c = !1,
|
|
18
18
|
variant: i = "default"
|
|
19
19
|
}) => {
|
|
20
|
-
const [e, o] =
|
|
21
|
-
return /* @__PURE__ */
|
|
20
|
+
const [e, o] = m(!1);
|
|
21
|
+
return /* @__PURE__ */ f("aside", { className: l(s && s, e && t.open, t.aside, c && t.sticky, g[i]), onClick: (p) => {
|
|
22
22
|
var r;
|
|
23
|
-
const a =
|
|
23
|
+
const a = p.target.closest("a[href]");
|
|
24
24
|
a && !((r = a.getAttribute("href")) != null && r.startsWith("#")) && o(!1);
|
|
25
25
|
}, "data-component": "aside", children: [
|
|
26
|
-
i === "sidebar" && /* @__PURE__ */ n(
|
|
26
|
+
i === "sidebar" && /* @__PURE__ */ n(u, { "data-sidebar-toggle": "true", onClick: () => o(!e), variant: "tertiary", children: /* @__PURE__ */ n(_, { name: e ? "x" : "menu" }) }),
|
|
27
27
|
d
|
|
28
28
|
] });
|
|
29
29
|
};
|
|
30
30
|
export {
|
|
31
|
-
|
|
31
|
+
v as Aside
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const b=require("react/jsx-runtime"),U=require("../../classix-5H4IWnMA.cjs"),m=require("react"),X=require("../button/index.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const b=require("react/jsx-runtime"),U=require("../../classix-5H4IWnMA.cjs"),m=require("react"),X=require("../button/index.cjs"),A=require("../../menu-popover-D1ALaiV5.cjs"),Y="_controls_t1re6_13",Z="_inline_t1re6_43",ee="_embedded_t1re6_48",te="_fixed_t1re6_49",ne="_adaptive_t1re6_60",ie="_measurement_t1re6_65",h={controls:Y,default:"_default_t1re6_28",inline:Z,embedded:ee,fixed:te,adaptive:ne,measurement:ie,"non-button-content":"_non-button-content_t1re6_99","overflow-trigger":"_overflow-trigger_t1re6_128"},re={primary:3,danger:2,secondary:1,tertiary:0,simple:0},oe={default:h.default,embedded:h.embedded,fixed:h.fixed,inline:h.inline},de=d=>re[d.props.variant??"secondary"];function se({buttons:d,menuAccessibleLabel:i,triggerAccessibleLabel:n}){const x=d.map(o=>({button:o,isDanger:o.props.variant==="danger",value:o}));return b.jsx(A.MenuPopover,{triggerAccessibleLabel:n,"data-component":"overflowmenu",children:({close:o,initialFocus:r})=>b.jsx(A.MenuActionList,{actions:x,initialFocus:r,menuAccessibleLabel:i,onSelect:()=>o(),usesMenuSemantics:!0})})}const g=(d,i)=>{const n=Number.parseFloat(String(d[i]));return Number.isFinite(n)?n:0},ce=d=>{if(!d.trim().endsWith("px"))return;const i=Number.parseFloat(d);return Number.isFinite(i)?i:void 0},ae=(d,i)=>{const n=d.parentElement;if(!n)return;const x=n.getBoundingClientRect(),o=getComputedStyle(n),r=x.width||n.clientWidth,C=x.left+g(o,"borderLeftWidth")+g(o,"paddingLeft"),M=x.left+r-g(o,"borderRightWidth")-g(o,"paddingRight"),_=Array.from(n.children).slice(0,Array.from(n.children).indexOf(d)),R=_.reduce((f,l)=>Math.max(f,l.getBoundingClientRect().right),C),c=_.length>0?g(o,"columnGap"):0,a=Math.max(0,M-R-c),W=(i==null?void 0:i.parent)===n?Math.max(0,r-i.parentWidth):0;return{availableWidth:W>0?Math.max(a,((i==null?void 0:i.availableWidth)??0)+W):a,parent:n,parentWidth:r}},le=({children:d,className:i,maxVisibleButtons:n,overflow:x,overflowAccessibleLabel:o="More actions",variant:r="default",...C})=>{const M=m.Children.toArray(d),_=[],R=[];M.forEach(e=>{m.isValidElement(e)&&e.type===X.Button?_.push(e):R.push(e)});const c=_.map((e,s)=>({button:e,index:s,rank:de(e)})).sort((e,s)=>e.rank-s.rank||e.index-s.index).map(({button:e,index:s})=>m.cloneElement(e,{key:e.key??s})),a=r==="embedded"||r==="fixed"&&x==="menu",W=typeof n=="number"&&Number.isFinite(n)?Math.floor(n):0,f=r==="embedded"&&W>0?Math.min(c.length,W):c.length,l=m.useRef(null),N=m.useRef(void 0),j=m.useRef(null),B=m.useRef(null),[z,S]=m.useState(f),p=m.useCallback(()=>{var L,I,T;if(!a){S(f);return}const e=l.current,s=j.current;if(!e||!s)return;const w=Array.from(s.querySelectorAll('[data-component="button"]')),y=w.at(-1);if(!y)return;const v=w.slice(0,c.length).map(t=>t.getBoundingClientRect().width);if(v.length!==c.length)return;const u=getComputedStyle(e),G=g(u,"paddingLeft")+g(u,"paddingRight")+g(u,"borderLeftWidth")+g(u,"borderRightWidth"),$=ce(u.maxWidth),E=r==="embedded"?ae(e,N.current):void 0;E&&(N.current=E);const H=(E==null?void 0:E.availableWidth)??((L=e.parentElement)==null?void 0:L.clientWidth)??0,J=((I=window.visualViewport)==null?void 0:I.width)??document.documentElement.clientWidth,O=Math.min(...[$,H,J].filter(t=>typeof t=="number"&&Number.isFinite(t)&&t>0));if(!Number.isFinite(O))return;const V=Math.max(0,O-G),q=((T=B.current)==null?void 0:T.getBoundingClientRect().width)??0,K=v.reduce((t,Q)=>t+Q,0);if(f===c.length&&q+K<=V){S(t=>t===f?t:f);return}let P=q+y.getBoundingClientRect().width,k=0;for(let t=0;t<f&&!(P+v[t]>V);t+=1)P+=v[t],k=t+1;S(t=>t===k?t:k)},[a,c.length,r,f]);if(m.useLayoutEffect(()=>{var s,w,y,v;if(p(),!a)return;const e=typeof ResizeObserver>"u"?void 0:new ResizeObserver(p);return l.current&&(e==null||e.observe(l.current)),(s=l.current)!=null&&s.parentElement&&(e==null||e.observe(l.current.parentElement)),r==="embedded"&&((w=l.current)!=null&&w.parentElement)&&Array.from(l.current.parentElement.children).forEach(u=>{u!==l.current&&(e==null||e.observe(u))}),B.current&&(e==null||e.observe(B.current)),window.addEventListener("resize",p),(y=window.visualViewport)==null||y.addEventListener("resize",p),(v=document.fonts)==null||v.ready.then(p),()=>{var u;e==null||e.disconnect(),window.removeEventListener("resize",p),(u=window.visualViewport)==null||u.removeEventListener("resize",p)}},[a,d,p,r]),M.length===0)return null;const D=a?c.slice(0,z):c,F=a?c.slice(z):[];return b.jsxs("div",{"data-component":"controls","data-dynamic-position":r==="fixed"?!0:void 0,"data-adaptive":a?!0:void 0,className:U.t(h.controls,oe[r],a&&h.adaptive,i),ref:l,...C,children:[a&&b.jsxs("div",{"aria-hidden":"true",className:h.measurement,ref:j,children:[c.map((e,s)=>m.cloneElement(e,{"aria-hidden":!0,id:void 0,key:`measure-${String(e.key??s)}`,onClick:void 0,ref:void 0,tabIndex:-1})),b.jsx(A.MenuPopover,{triggerAccessibleLabel:o,children:null})]}),r!=="embedded"&&R.length>0&&b.jsx("span",{className:h["non-button-content"],ref:B,children:R}),D,F.length>0&&b.jsx("span",{className:h["overflow-trigger"],children:b.jsx(se,{buttons:F,menuAccessibleLabel:o,triggerAccessibleLabel:o})})]})};exports.Controls=le;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n secondary: 1,\n tertiary: 0,\n simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n embedded: styles.embedded,\n fixed: styles.fixed,\n inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n maxVisibleButtons?: number;\n overflow?: 'menu';\n overflowAccessibleLabel?: string;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n buttons,\n menuAccessibleLabel,\n triggerAccessibleLabel,\n}: {\n buttons: React.ReactElement<ButtonProps>[];\n menuAccessibleLabel: string;\n triggerAccessibleLabel: string;\n}) {\n const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n button,\n isDanger: button.props.variant === 'danger',\n value: button,\n }));\n\n return (\n <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n {({ close, initialFocus }) => (\n <MenuActionList\n actions={actions}\n initialFocus={initialFocus}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={() => close()}\n usesMenuSemantics\n />\n )}\n </MenuPopover>\n );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n const value = Number.parseFloat(String(style[property]));\n return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n if (!value.trim().endsWith('px')) return undefined;\n const parsedValue = Number.parseFloat(value);\n return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n availableWidth: number;\n parent: HTMLElement;\n parentWidth: number;\n};\n\nconst availableWidthToRight = (\n controls: HTMLDivElement,\n previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n const parent = controls.parentElement;\n if (!parent) return undefined;\n\n const parentRect = parent.getBoundingClientRect();\n const parentStyle = getComputedStyle(parent);\n const parentWidth = parentRect.width || parent.clientWidth;\n const contentLeft =\n parentRect.left +\n numericStyle(parentStyle, 'borderLeftWidth') +\n numericStyle(parentStyle, 'paddingLeft');\n const contentRight =\n parentRect.left +\n parentWidth -\n numericStyle(parentStyle, 'borderRightWidth') -\n numericStyle(parentStyle, 'paddingRight');\n const precedingSiblings = Array.from(parent.children).slice(\n 0,\n Array.from(parent.children).indexOf(controls)\n );\n const occupiedRight = precedingSiblings.reduce(\n (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n contentLeft\n );\n const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n const parentWidthIncrease =\n previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n return {\n availableWidth:\n parentWidthIncrease > 0\n ? Math.max(\n measuredAvailableWidth,\n (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n )\n : measuredAvailableWidth,\n parent,\n parentWidth,\n };\n};\n\nexport const Controls = ({\n children,\n className,\n maxVisibleButtons,\n overflow,\n overflowAccessibleLabel = 'More actions',\n variant = 'default',\n ...props\n}: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n const normalizedMaxVisibleButtons =\n typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n ? Math.floor(maxVisibleButtons)\n : 0;\n const visibleButtonLimit =\n variant === 'embedded' && normalizedMaxVisibleButtons > 0\n ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n : sortedButtons.length;\n const controlsRef = useRef<HTMLDivElement>(null);\n const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n const measurementRef = useRef<HTMLDivElement>(null);\n const nonButtonsRef = useRef<HTMLSpanElement>(null);\n const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n const updateOverflow = useCallback(() => {\n if (!adaptive) {\n setVisibleButtonCount(visibleButtonLimit);\n return;\n }\n\n const controls = controlsRef.current;\n const measurement = measurementRef.current;\n if (!controls || !measurement) return;\n\n const measurementButtons = Array.from(\n measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n );\n const trigger = measurementButtons.at(-1);\n if (!trigger) return;\n\n const buttonWidths = measurementButtons\n .slice(0, sortedButtons.length)\n .map((button) => button.getBoundingClientRect().width);\n if (buttonWidths.length !== sortedButtons.length) return;\n\n const style = getComputedStyle(controls);\n const horizontalChrome =\n numericStyle(style, 'paddingLeft') +\n numericStyle(style, 'paddingRight') +\n numericStyle(style, 'borderLeftWidth') +\n numericStyle(style, 'borderRightWidth');\n const configuredMaxWidth = pixelStyle(style.maxWidth);\n const embeddedLayout =\n variant === 'embedded'\n ? availableWidthToRight(controls, embeddedLayoutRef.current)\n : undefined;\n if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n const outerAvailableWidth = Math.min(\n ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n )\n );\n if (!Number.isFinite(outerAvailableWidth)) return;\n\n const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n if (\n visibleButtonLimit === sortedButtons.length &&\n prefixWidth + actionWidth <= availableWidth\n ) {\n setVisibleButtonCount((current) =>\n current === visibleButtonLimit ? current : visibleButtonLimit\n );\n return;\n }\n\n let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n let nextVisibleButtonCount = 0;\n for (let index = 0; index < visibleButtonLimit; index += 1) {\n if (usedWidth + buttonWidths[index] > availableWidth) break;\n usedWidth += buttonWidths[index];\n nextVisibleButtonCount = index + 1;\n }\n\n setVisibleButtonCount((current) =>\n current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n );\n }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n useLayoutEffect(() => {\n updateOverflow();\n\n if (!adaptive) return undefined;\n\n const observer =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n if (controlsRef.current) observer?.observe(controlsRef.current);\n if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n if (variant === 'embedded' && controlsRef.current?.parentElement) {\n Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n if (sibling !== controlsRef.current) observer?.observe(sibling);\n });\n }\n if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n window.addEventListener('resize', updateOverflow);\n window.visualViewport?.addEventListener('resize', updateOverflow);\n void document.fonts?.ready.then(updateOverflow);\n\n return () => {\n observer?.disconnect();\n window.removeEventListener('resize', updateOverflow);\n window.visualViewport?.removeEventListener('resize', updateOverflow);\n };\n }, [adaptive, children, updateOverflow, variant]);\n\n if (childArray.length === 0) {\n return null;\n }\n\n const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n return (\n <div\n data-component='controls'\n data-dynamic-position={variant === 'fixed' ? true : undefined}\n className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n ref={controlsRef}\n {...props}\n >\n {adaptive && (\n <div\n aria-hidden='true'\n className={styles.measurement}\n ref={measurementRef}\n >\n {sortedButtons.map((button, index) =>\n cloneElement(button, {\n 'aria-hidden': true,\n id: undefined,\n key: `measure-${String(button.key ?? index)}`,\n onClick: undefined,\n ref: undefined,\n tabIndex: -1,\n })\n )}\n <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n </div>\n )}\n {variant !== 'embedded' && nonButtons.length > 0 && (\n <span\n className={styles['non-button-content']}\n ref={nonButtonsRef}\n >\n {nonButtons}\n </span>\n )}\n {visibleButtons}\n {overflowedButtons.length > 0 && (\n <span className={styles['overflow-trigger']}>\n <OverflowMenu\n buttons={overflowedButtons}\n menuAccessibleLabel={overflowAccessibleLabel}\n triggerAccessibleLabel={overflowAccessibleLabel}\n />\n </span>\n )}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n secondary: 1,\n tertiary: 0,\n simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n embedded: styles.embedded,\n fixed: styles.fixed,\n inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n maxVisibleButtons?: number;\n overflow?: 'menu';\n overflowAccessibleLabel?: string;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n buttons,\n menuAccessibleLabel,\n triggerAccessibleLabel,\n}: {\n buttons: React.ReactElement<ButtonProps>[];\n menuAccessibleLabel: string;\n triggerAccessibleLabel: string;\n}) {\n const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n button,\n isDanger: button.props.variant === 'danger',\n value: button,\n }));\n\n return (\n <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n {({ close, initialFocus }) => (\n <MenuActionList\n actions={actions}\n initialFocus={initialFocus}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={() => close()}\n usesMenuSemantics\n />\n )}\n </MenuPopover>\n );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n const value = Number.parseFloat(String(style[property]));\n return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n if (!value.trim().endsWith('px')) return undefined;\n const parsedValue = Number.parseFloat(value);\n return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n availableWidth: number;\n parent: HTMLElement;\n parentWidth: number;\n};\n\nconst availableWidthToRight = (\n controls: HTMLDivElement,\n previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n const parent = controls.parentElement;\n if (!parent) return undefined;\n\n const parentRect = parent.getBoundingClientRect();\n const parentStyle = getComputedStyle(parent);\n const parentWidth = parentRect.width || parent.clientWidth;\n const contentLeft =\n parentRect.left +\n numericStyle(parentStyle, 'borderLeftWidth') +\n numericStyle(parentStyle, 'paddingLeft');\n const contentRight =\n parentRect.left +\n parentWidth -\n numericStyle(parentStyle, 'borderRightWidth') -\n numericStyle(parentStyle, 'paddingRight');\n const precedingSiblings = Array.from(parent.children).slice(\n 0,\n Array.from(parent.children).indexOf(controls)\n );\n const occupiedRight = precedingSiblings.reduce(\n (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n contentLeft\n );\n const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n const parentWidthIncrease =\n previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n return {\n availableWidth:\n parentWidthIncrease > 0\n ? Math.max(\n measuredAvailableWidth,\n (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n )\n : measuredAvailableWidth,\n parent,\n parentWidth,\n };\n};\n\nexport const Controls = ({\n children,\n className,\n maxVisibleButtons,\n overflow,\n overflowAccessibleLabel = 'More actions',\n variant = 'default',\n ...props\n}: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n const normalizedMaxVisibleButtons =\n typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n ? Math.floor(maxVisibleButtons)\n : 0;\n const visibleButtonLimit =\n variant === 'embedded' && normalizedMaxVisibleButtons > 0\n ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n : sortedButtons.length;\n const controlsRef = useRef<HTMLDivElement>(null);\n const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n const measurementRef = useRef<HTMLDivElement>(null);\n const nonButtonsRef = useRef<HTMLSpanElement>(null);\n const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n const updateOverflow = useCallback(() => {\n if (!adaptive) {\n setVisibleButtonCount(visibleButtonLimit);\n return;\n }\n\n const controls = controlsRef.current;\n const measurement = measurementRef.current;\n if (!controls || !measurement) return;\n\n const measurementButtons = Array.from(\n measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n );\n const trigger = measurementButtons.at(-1);\n if (!trigger) return;\n\n const buttonWidths = measurementButtons\n .slice(0, sortedButtons.length)\n .map((button) => button.getBoundingClientRect().width);\n if (buttonWidths.length !== sortedButtons.length) return;\n\n const style = getComputedStyle(controls);\n const horizontalChrome =\n numericStyle(style, 'paddingLeft') +\n numericStyle(style, 'paddingRight') +\n numericStyle(style, 'borderLeftWidth') +\n numericStyle(style, 'borderRightWidth');\n const configuredMaxWidth = pixelStyle(style.maxWidth);\n const embeddedLayout =\n variant === 'embedded'\n ? availableWidthToRight(controls, embeddedLayoutRef.current)\n : undefined;\n if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n const outerAvailableWidth = Math.min(\n ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n )\n );\n if (!Number.isFinite(outerAvailableWidth)) return;\n\n const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n if (\n visibleButtonLimit === sortedButtons.length &&\n prefixWidth + actionWidth <= availableWidth\n ) {\n setVisibleButtonCount((current) =>\n current === visibleButtonLimit ? current : visibleButtonLimit\n );\n return;\n }\n\n let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n let nextVisibleButtonCount = 0;\n for (let index = 0; index < visibleButtonLimit; index += 1) {\n if (usedWidth + buttonWidths[index] > availableWidth) break;\n usedWidth += buttonWidths[index];\n nextVisibleButtonCount = index + 1;\n }\n\n setVisibleButtonCount((current) =>\n current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n );\n }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n useLayoutEffect(() => {\n updateOverflow();\n\n if (!adaptive) return undefined;\n\n const observer =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n if (controlsRef.current) observer?.observe(controlsRef.current);\n if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n if (variant === 'embedded' && controlsRef.current?.parentElement) {\n Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n if (sibling !== controlsRef.current) observer?.observe(sibling);\n });\n }\n if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n window.addEventListener('resize', updateOverflow);\n window.visualViewport?.addEventListener('resize', updateOverflow);\n void document.fonts?.ready.then(updateOverflow);\n\n return () => {\n observer?.disconnect();\n window.removeEventListener('resize', updateOverflow);\n window.visualViewport?.removeEventListener('resize', updateOverflow);\n };\n }, [adaptive, children, updateOverflow, variant]);\n\n if (childArray.length === 0) {\n return null;\n }\n\n const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n return (\n <div\n data-component='controls'\n data-dynamic-position={variant === 'fixed' ? true : undefined}\n data-adaptive={adaptive ? true : undefined}\n className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n ref={controlsRef}\n {...props}\n >\n {adaptive && (\n <div\n aria-hidden='true'\n className={styles.measurement}\n ref={measurementRef}\n >\n {sortedButtons.map((button, index) =>\n cloneElement(button, {\n 'aria-hidden': true,\n id: undefined,\n key: `measure-${String(button.key ?? index)}`,\n onClick: undefined,\n ref: undefined,\n tabIndex: -1,\n })\n )}\n <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n </div>\n )}\n {variant !== 'embedded' && nonButtons.length > 0 && (\n <span\n className={styles['non-button-content']}\n ref={nonButtonsRef}\n >\n {nonButtons}\n </span>\n )}\n {visibleButtons}\n {overflowedButtons.length > 0 && (\n <span className={styles['overflow-trigger']}>\n <OverflowMenu\n buttons={overflowedButtons}\n menuAccessibleLabel={overflowAccessibleLabel}\n triggerAccessibleLabel={overflowAccessibleLabel}\n />\n </span>\n )}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"mlBAgBMA,GAAqB,CACzBC,QAAS,EACTC,OAAQ,EACRC,UAAW,EACXC,SAAU,EACVC,OAAQ,CACV,EAEMC,GAAW,CACfC,QAASC,EAAOD,QAChBE,SAAUD,EAAOC,SACjBC,MAAOF,EAAOE,MACdC,OAAQH,EAAOG,MACjB,EAUMC,GAAiBC,GACrBb,GAAmBa,EAAOC,MAAMC,SAAW,WAAW,EAExD,SAASC,GAAa,CACpBC,QAAAA,EACAC,oBAAAA,EACAC,uBAAAA,CAKF,EAAG,CACD,MAAMC,EAAyDH,EAAQI,IAAKR,IAAY,CACtFA,OAAAA,EACAS,SAAUT,EAAOC,MAAMC,UAAY,SACnCQ,MAAOV,CAAAA,EACP,EAEF,OACEW,EAAAA,IAACC,EAAAA,YAAA,CAAY,uBAAAN,EAA+C,iBAAA,eACzD,SAAA,CAAC,CAAEO,MAAAA,EAAOC,aAAAA,CAAAA,IACTH,EAAAA,IAACI,EAAAA,eAAA,CACC,QAAAR,EACA,aAAAO,EACA,oBAAAT,EACA,SAAU,IAAMQ,EAAAA,EAChB,kBAAiB,EAAA,CAAA,CAAA,CAGvB,CAEJ,CAEA,MAAMG,EAAeA,CAACC,EAA4BC,IAAwC,CACxF,MAAMR,EAAQS,OAAOC,WAAWC,OAAOJ,EAAMC,CAAQ,CAAC,CAAC,EACvD,OAAOC,OAAOG,SAASZ,CAAK,EAAIA,EAAQ,CAC1C,EAEMa,GAAcb,GAAkB,CACpC,GAAI,CAACA,EAAMc,KAAAA,EAAOC,SAAS,IAAI,EAAG,OAClC,MAAMC,EAAcP,OAAOC,WAAWV,CAAK,EAC3C,OAAOS,OAAOG,SAASI,CAAW,EAAIA,EAAcC,MACtD,EAQMC,GAAwBA,CAC5BC,EACAC,IAC+B,CAC/B,MAAMC,EAASF,EAASG,cACxB,GAAI,CAACD,EAAQ,OAEb,MAAME,EAAaF,EAAOG,sBAAAA,EACpBC,EAAcC,iBAAiBL,CAAM,EACrCM,EAAcJ,EAAWK,OAASP,EAAOQ,YACzCC,EACJP,EAAWQ,KACXzB,EAAamB,EAAa,iBAAiB,EAC3CnB,EAAamB,EAAa,aAAa,EACnCO,EACJT,EAAWQ,KACXJ,EACArB,EAAamB,EAAa,kBAAkB,EAC5CnB,EAAamB,EAAa,cAAc,EACpCQ,EAAoBC,MAAMC,KAAKd,EAAOe,QAAQ,EAAEC,MACpD,EACAH,MAAMC,KAAKd,EAAOe,QAAQ,EAAEE,QAAQnB,CAAQ,CAC9C,EACMoB,EAAgBN,EAAkBO,OACtC,CAACC,EAAOC,IAAYC,KAAKC,IAAIH,EAAOC,EAAQlB,sBAAAA,EAAwBiB,KAAK,EACzEX,CACF,EACMe,EAAMZ,EAAkBa,OAAS,EAAIxC,EAAamB,EAAa,WAAW,EAAI,EAE9EsB,EAAyBJ,KAAKC,IAAI,EAAGZ,EAAeO,EAAgBM,CAAG,EACvEG,GACJ5B,GAAAA,YAAAA,EAAgBC,UAAWA,EAASsB,KAAKC,IAAI,EAAGjB,EAAcP,EAAeO,WAAW,EAAI,EAE9F,MAAO,CACLsB,eACED,EAAsB,EAClBL,KAAKC,IACHG,IACC3B,GAAAA,YAAAA,EAAgB6B,iBAAkB,GAAKD,CAC1C,EACAD,EACN1B,OAAAA,EACAM,YAAAA,CAAAA,CAEJ,EAEauB,GAAWA,CAAC,CACvBd,SAAAA,EACAe,UAAAA,EACAC,kBAAAA,EACAC,SAAAA,EACAC,wBAAAA,EAA0B,eAC1B9D,QAAAA,EAAU,UACV,GAAGD,CACU,IAAM,CACnB,MAAMgE,EAAaC,EAAAA,SAASC,QAAQrB,CAAQ,EACtC1C,EAA6C,CAAA,EAC7CgE,EAAgC,CAAA,EAEtCH,EAAWI,QAASC,GAAU,CACxBC,EAAAA,eAA4BD,CAAK,GAAKA,EAAME,OAASC,EAAAA,OACvDrE,EAAQsE,KAAKJ,CAAK,EAElBF,EAAWM,KAAKJ,CAAK,CAEzB,CAAC,EAED,MAAMK,EAAgBvE,EACnBI,IAAI,CAACR,EAAQ4E,KAAW,CAAE5E,OAAAA,EAAQ4E,MAAAA,EAAOC,KAAM9E,GAAcC,CAAM,CAAA,EAAI,EACvE8E,KAAK,CAACC,EAAGC,IAAMD,EAAEF,KAAOG,EAAEH,MAAQE,EAAEH,MAAQI,EAAEJ,KAAK,EACnDpE,IAAI,CAAC,CAAER,OAAAA,EAAQ4E,MAAAA,CAAAA,IACdK,EAAAA,aAAajF,EAAQ,CACnBkF,IAAKlF,EAAOkF,KAAON,CAAAA,CACpB,CACH,EAEIO,EAAWjF,IAAY,YAAeA,IAAY,SAAW6D,IAAa,OAC1EqB,EACJ,OAAOtB,GAAsB,UAAY3C,OAAOG,SAASwC,CAAiB,EACtET,KAAKgC,MAAMvB,CAAiB,EAC5B,EACAwB,EACJpF,IAAY,YAAckF,EAA8B,EACpD/B,KAAKkC,IAAIZ,EAAcnB,OAAQ4B,CAA2B,EAC1DT,EAAcnB,OACdgC,EAAcC,EAAAA,OAAuB,IAAI,EACzCC,EAAoBD,EAAAA,OAAuB9D,MAAS,EACpDgE,EAAiBF,EAAAA,OAAuB,IAAI,EAC5CG,EAAgBH,EAAAA,OAAwB,IAAI,EAC5C,CAACI,EAAoBC,CAAqB,EAAIC,EAAAA,SAAST,CAAkB,EAEzEU,EAAiBC,EAAAA,YAAY,IAAM,WACvC,GAAI,CAACd,EAAU,CACbW,EAAsBR,CAAkB,EACxC,MACF,CAEA,MAAMzD,EAAW2D,EAAYU,QACvBC,EAAcR,EAAeO,QACnC,GAAI,CAACrE,GAAY,CAACsE,EAAa,OAE/B,MAAMC,EAAqBxD,MAAMC,KAC/BsD,EAAYE,iBAA8B,2BAA2B,CACvE,EACMC,EAAUF,EAAmBG,GAAG,EAAE,EACxC,GAAI,CAACD,EAAS,OAEd,MAAME,EAAeJ,EAClBrD,MAAM,EAAG4B,EAAcnB,MAAM,EAC7BhD,IAAKR,GAAWA,EAAOkC,sBAAAA,EAAwBI,KAAK,EACvD,GAAIkE,EAAahD,SAAWmB,EAAcnB,OAAQ,OAElD,MAAMvC,EAAQmB,iBAAiBP,CAAQ,EACjC4E,EACJzF,EAAaC,EAAO,aAAa,EACjCD,EAAaC,EAAO,cAAc,EAClCD,EAAaC,EAAO,iBAAiB,EACrCD,EAAaC,EAAO,kBAAkB,EAClCyF,EAAqBnF,GAAWN,EAAM0F,QAAQ,EAC9CC,EACJ1G,IAAY,WACR0B,GAAsBC,EAAU6D,EAAkBQ,OAAO,EACzDvE,OACFiF,MAAkCV,QAAUU,GAChD,MAAMC,GAAcD,GAAAA,YAAAA,EAAgBjD,mBAAkB9B,EAAAA,EAASG,gBAATH,YAAAA,EAAwBU,cAAe,EACvFuE,IAAgBC,EAAAA,OAAOC,iBAAPD,YAAAA,EAAuBzE,QAAS2E,SAASC,gBAAgB3E,YACzE4E,EAAsB9D,KAAKkC,IAC/B,GAAG,CAACmB,EAAoBG,EAAaC,CAAa,EAAEM,OACjD9E,GAA2B,OAAOA,GAAU,UAAYnB,OAAOG,SAASgB,CAAK,GAAKA,EAAQ,CAC7F,CACF,EACA,GAAI,CAACnB,OAAOG,SAAS6F,CAAmB,EAAG,OAE3C,MAAMxD,EAAiBN,KAAKC,IAAI,EAAG6D,EAAsBV,CAAgB,EACnEY,IAAczB,EAAAA,EAAcM,UAAdN,YAAAA,EAAuB1D,wBAAwBI,QAAS,EACtEgF,EAAcd,EAAatD,OAAO,CAACqE,EAAOjF,IAAUiF,EAAQjF,EAAO,CAAC,EAE1E,GACEgD,IAAuBX,EAAcnB,QACrC6D,EAAcC,GAAe3D,EAC7B,CACAmC,EAAuBI,GACrBA,IAAYZ,EAAqBY,EAAUZ,CAC7C,EACA,MACF,CAEA,IAAIkC,EAAYH,EAAcf,EAAQpE,sBAAAA,EAAwBI,MAC1DmF,EAAyB,EAC7B,QAAS7C,EAAQ,EAAGA,EAAQU,GACtBkC,EAAAA,EAAYhB,EAAa5B,CAAK,EAAIjB,GADQiB,GAAS,EAEvD4C,GAAahB,EAAa5B,CAAK,EAC/B6C,EAAyB7C,EAAQ,EAGnCkB,EAAuBI,GACrBA,IAAYuB,EAAyBvB,EAAUuB,CACjD,CACF,EAAG,CAACtC,EAAUR,EAAcnB,OAAQtD,EAASoF,CAAkB,CAAC,EA6BhE,GA3BAoC,EAAAA,gBAAgB,IAAM,aAGpB,GAFA1B,EAAAA,EAEI,CAACb,EAAU,OAEf,MAAMwC,EACJ,OAAOC,eAAmB,IAAcjG,OAAY,IAAIiG,eAAe5B,CAAc,EACvF,OAAIR,EAAYU,UAASyB,GAAAA,MAAAA,EAAUE,QAAQrC,EAAYU,WACnDV,EAAAA,EAAYU,UAAZV,MAAAA,EAAqBxD,2BAAyB6F,QAAQrC,EAAYU,QAAQlE,gBAC1E9B,IAAY,cAAcsF,EAAAA,EAAYU,UAAZV,MAAAA,EAAqBxD,gBACjDY,MAAMC,KAAK2C,EAAYU,QAAQlE,cAAcc,QAAQ,EAAEuB,QAASjB,GAAY,CACtEA,IAAYoC,EAAYU,UAASyB,GAAAA,MAAAA,EAAUE,QAAQzE,GACzD,CAAC,EAECwC,EAAcM,UAASyB,GAAAA,MAAAA,EAAUE,QAAQjC,EAAcM,UAE3Da,OAAOe,iBAAiB,SAAU9B,CAAc,GAChDe,EAAAA,OAAOC,iBAAPD,MAAAA,EAAuBe,iBAAiB,SAAU9B,IAC7CiB,EAAAA,SAASc,QAATd,MAAAA,EAAgBe,MAAMC,KAAKjC,GAEzB,IAAM,OACX2B,GAAAA,MAAAA,EAAUO,aACVnB,OAAOoB,oBAAoB,SAAUnC,CAAc,GACnDe,EAAAA,OAAOC,iBAAPD,MAAAA,EAAuBoB,oBAAoB,SAAUnC,EACvD,CACF,EAAG,CAACb,EAAUrC,EAAUkD,EAAgB9F,CAAO,CAAC,EAE5C+D,EAAWT,SAAW,EACxB,OAAO,KAGT,MAAM4E,EAAiBjD,EAAWR,EAAc5B,MAAM,EAAG8C,CAAkB,EAAIlB,EACzE0D,EAAoBlD,EAAWR,EAAc5B,MAAM8C,CAAkB,EAAI,CAAA,EAE/E,OACEyC,EAAAA,KAAC,MAAA,CACC,iBAAe,WACf,wBAAuBpI,IAAY,QAAU,GAAOyB,OACpD,gBAAewD,EAAW,GAAOxD,OACjC,UAAW4G,EAAAA,EAAG5I,EAAOkC,SAAUpC,GAASS,CAAO,EAAGiF,GAAYxF,EAAOwF,SAAUtB,CAAS,EACxF,IAAK2B,EACL,GAAIvF,EAEHkF,SAAAA,CAAAA,GACCmD,EAAAA,KAAC,OACC,cAAY,OACZ,UAAW3I,EAAOwG,YAClB,IAAKR,EAEJhB,SAAAA,CAAAA,EAAcnE,IAAI,CAACR,EAAQ4E,IAC1BK,EAAAA,aAAajF,EAAQ,CACnB,cAAe,GACfwI,GAAI7G,OACJuD,IAAK,WAAW7D,OAAOrB,EAAOkF,KAAON,CAAK,CAAC,GAC3C6D,QAAS9G,OACT+G,IAAK/G,OACLgH,SAAU,EAAA,CACX,CACH,EACAhI,EAAAA,IAACC,EAAAA,YAAA,CAAY,uBAAwBoD,EAA0B,SAAA,IAAA,CAAK,CAAA,EACtE,EAED9D,IAAY,YAAckE,EAAWZ,OAAS,GAC7C7C,EAAAA,IAAC,OAAA,CACC,UAAWhB,EAAO,oBAAoB,EACtC,IAAKiG,EAEJxB,SAAAA,EACH,EAEDgE,EACAC,EAAkB7E,OAAS,GAC1B7C,EAAAA,IAAC,OAAA,CAAK,UAAWhB,EAAO,kBAAkB,EACxC,SAAAgB,EAAAA,IAACR,IACC,QAASkI,EACT,oBAAqBrE,EACrB,uBAAwBA,EAAwB,CAAA,CAEpD,CAAA,EAEJ,CAEJ"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsxs as G, jsx as v } from "react/jsx-runtime";
|
|
2
2
|
import { t as Y } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { Children as Z, isValidElement as ee, cloneElement as P, useRef as
|
|
3
|
+
import { Children as Z, isValidElement as ee, cloneElement as P, useRef as M, useState as te, useCallback as ne, useLayoutEffect as ie } from "react";
|
|
4
4
|
import { Button as re } from "../button/index.js";
|
|
5
5
|
import { a as T, M as oe } from "../../menu-popover-DQHDIw-8.js";
|
|
6
|
-
import '../../assets/index34.css';const de = "
|
|
6
|
+
import '../../assets/index34.css';const de = "_controls_t1re6_13", se = "_inline_t1re6_43", ce = "_embedded_t1re6_48", ae = "_fixed_t1re6_49", le = "_adaptive_t1re6_60", ue = "_measurement_t1re6_65", f = {
|
|
7
7
|
controls: de,
|
|
8
|
-
default: "
|
|
8
|
+
default: "_default_t1re6_28",
|
|
9
9
|
inline: se,
|
|
10
10
|
embedded: ce,
|
|
11
11
|
fixed: ae,
|
|
12
12
|
adaptive: le,
|
|
13
13
|
measurement: ue,
|
|
14
|
-
"non-button-content": "_non-button-
|
|
15
|
-
"overflow-trigger": "_overflow-
|
|
14
|
+
"non-button-content": "_non-button-content_t1re6_99",
|
|
15
|
+
"overflow-trigger": "_overflow-trigger_t1re6_128"
|
|
16
16
|
}, me = {
|
|
17
17
|
primary: 3,
|
|
18
18
|
danger: 2,
|
|
@@ -50,7 +50,7 @@ const h = (d, i) => {
|
|
|
50
50
|
}, be = (d, i) => {
|
|
51
51
|
const n = d.parentElement;
|
|
52
52
|
if (!n) return;
|
|
53
|
-
const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth,
|
|
53
|
+
const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth, C = g.left + h(o, "borderLeftWidth") + h(o, "paddingLeft"), B = g.left + r - h(o, "borderRightWidth") - h(o, "paddingRight"), _ = Array.from(n.children).slice(0, Array.from(n.children).indexOf(d)), W = _.reduce((m, l) => Math.max(m, l.getBoundingClientRect().right), C), c = _.length > 0 ? h(o, "columnGap") : 0, a = Math.max(0, B - W - c), x = (i == null ? void 0 : i.parent) === n ? Math.max(0, r - i.parentWidth) : 0;
|
|
54
54
|
return {
|
|
55
55
|
availableWidth: x > 0 ? Math.max(a, ((i == null ? void 0 : i.availableWidth) ?? 0) + x) : a,
|
|
56
56
|
parent: n,
|
|
@@ -63,10 +63,10 @@ const h = (d, i) => {
|
|
|
63
63
|
overflow: g,
|
|
64
64
|
overflowAccessibleLabel: o = "More actions",
|
|
65
65
|
variant: r = "default",
|
|
66
|
-
...
|
|
66
|
+
...C
|
|
67
67
|
}) => {
|
|
68
|
-
const
|
|
69
|
-
|
|
68
|
+
const B = Z.toArray(d), _ = [], W = [];
|
|
69
|
+
B.forEach((e) => {
|
|
70
70
|
ee(e) && e.type === re ? _.push(e) : W.push(e);
|
|
71
71
|
});
|
|
72
72
|
const c = _.map((e, s) => ({
|
|
@@ -78,10 +78,10 @@ const h = (d, i) => {
|
|
|
78
78
|
index: s
|
|
79
79
|
}) => P(e, {
|
|
80
80
|
key: e.key ?? s
|
|
81
|
-
})), a = r === "embedded" || r === "fixed" && g === "menu", x = typeof n == "number" && Number.isFinite(n) ? Math.floor(n) : 0, m = r === "embedded" && x > 0 ? Math.min(c.length, x) : c.length, l =
|
|
82
|
-
var
|
|
81
|
+
})), a = r === "embedded" || r === "fixed" && g === "menu", x = typeof n == "number" && Number.isFinite(n) ? Math.floor(n) : 0, m = r === "embedded" && x > 0 ? Math.min(c.length, x) : c.length, l = M(null), A = M(void 0), N = M(null), E = M(null), [z, S] = te(m), p = ne(() => {
|
|
82
|
+
var I, q, D;
|
|
83
83
|
if (!a) {
|
|
84
|
-
|
|
84
|
+
S(m);
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
const e = l.current, s = N.current;
|
|
@@ -90,19 +90,19 @@ const h = (d, i) => {
|
|
|
90
90
|
if (!R) return;
|
|
91
91
|
const b = w.slice(0, c.length).map((t) => t.getBoundingClientRect().width);
|
|
92
92
|
if (b.length !== c.length) return;
|
|
93
|
-
const u = getComputedStyle(e), H = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), J = ge(u.maxWidth),
|
|
94
|
-
|
|
95
|
-
const K = (
|
|
96
|
-
if (!Number.isFinite(
|
|
97
|
-
const
|
|
98
|
-
if (m === c.length &&
|
|
99
|
-
|
|
93
|
+
const u = getComputedStyle(e), H = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), J = ge(u.maxWidth), y = r === "embedded" ? be(e, A.current) : void 0;
|
|
94
|
+
y && (A.current = y);
|
|
95
|
+
const K = (y == null ? void 0 : y.availableWidth) ?? ((I = e.parentElement) == null ? void 0 : I.clientWidth) ?? 0, Q = ((q = window.visualViewport) == null ? void 0 : q.width) ?? document.documentElement.clientWidth, V = Math.min(...[J, K, Q].filter((t) => typeof t == "number" && Number.isFinite(t) && t > 0));
|
|
96
|
+
if (!Number.isFinite(V)) return;
|
|
97
|
+
const O = Math.max(0, V - H), L = ((D = E.current) == null ? void 0 : D.getBoundingClientRect().width) ?? 0, U = b.reduce((t, X) => t + X, 0);
|
|
98
|
+
if (m === c.length && L + U <= O) {
|
|
99
|
+
S((t) => t === m ? t : m);
|
|
100
100
|
return;
|
|
101
101
|
}
|
|
102
|
-
let
|
|
103
|
-
for (let t = 0; t < m && !(
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
let j = L + R.getBoundingClientRect().width, k = 0;
|
|
103
|
+
for (let t = 0; t < m && !(j + b[t] > O); t += 1)
|
|
104
|
+
j += b[t], k = t + 1;
|
|
105
|
+
S((t) => t === k ? t : k);
|
|
106
106
|
}, [a, c.length, r, m]);
|
|
107
107
|
if (ie(() => {
|
|
108
108
|
var s, w, R, b;
|
|
@@ -110,14 +110,14 @@ const h = (d, i) => {
|
|
|
110
110
|
const e = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
|
|
111
111
|
return l.current && (e == null || e.observe(l.current)), (s = l.current) != null && s.parentElement && (e == null || e.observe(l.current.parentElement)), r === "embedded" && ((w = l.current) != null && w.parentElement) && Array.from(l.current.parentElement.children).forEach((u) => {
|
|
112
112
|
u !== l.current && (e == null || e.observe(u));
|
|
113
|
-
}),
|
|
113
|
+
}), E.current && (e == null || e.observe(E.current)), window.addEventListener("resize", p), (R = window.visualViewport) == null || R.addEventListener("resize", p), (b = document.fonts) == null || b.ready.then(p), () => {
|
|
114
114
|
var u;
|
|
115
115
|
e == null || e.disconnect(), window.removeEventListener("resize", p), (u = window.visualViewport) == null || u.removeEventListener("resize", p);
|
|
116
116
|
};
|
|
117
|
-
}, [a, d, p, r]),
|
|
117
|
+
}, [a, d, p, r]), B.length === 0)
|
|
118
118
|
return null;
|
|
119
|
-
const $ = a ? c.slice(0,
|
|
120
|
-
return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, className: Y(f.controls, fe[r], a && f.adaptive, i), ref: l, ...
|
|
119
|
+
const $ = a ? c.slice(0, z) : c, F = a ? c.slice(z) : [];
|
|
120
|
+
return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, "data-adaptive": a ? !0 : void 0, className: Y(f.controls, fe[r], a && f.adaptive, i), ref: l, ...C, children: [
|
|
121
121
|
a && /* @__PURE__ */ G("div", { "aria-hidden": "true", className: f.measurement, ref: N, children: [
|
|
122
122
|
c.map((e, s) => P(e, {
|
|
123
123
|
"aria-hidden": !0,
|
|
@@ -129,9 +129,9 @@ const h = (d, i) => {
|
|
|
129
129
|
})),
|
|
130
130
|
/* @__PURE__ */ v(T, { triggerAccessibleLabel: o, children: null })
|
|
131
131
|
] }),
|
|
132
|
-
r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref:
|
|
132
|
+
r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref: E, children: W }),
|
|
133
133
|
$,
|
|
134
|
-
|
|
134
|
+
F.length > 0 && /* @__PURE__ */ v("span", { className: f["overflow-trigger"], children: /* @__PURE__ */ v(pe, { buttons: F, menuAccessibleLabel: o, triggerAccessibleLabel: o }) })
|
|
135
135
|
] });
|
|
136
136
|
};
|
|
137
137
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n secondary: 1,\n tertiary: 0,\n simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n embedded: styles.embedded,\n fixed: styles.fixed,\n inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n maxVisibleButtons?: number;\n overflow?: 'menu';\n overflowAccessibleLabel?: string;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n buttons,\n menuAccessibleLabel,\n triggerAccessibleLabel,\n}: {\n buttons: React.ReactElement<ButtonProps>[];\n menuAccessibleLabel: string;\n triggerAccessibleLabel: string;\n}) {\n const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n button,\n isDanger: button.props.variant === 'danger',\n value: button,\n }));\n\n return (\n <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n {({ close, initialFocus }) => (\n <MenuActionList\n actions={actions}\n initialFocus={initialFocus}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={() => close()}\n usesMenuSemantics\n />\n )}\n </MenuPopover>\n );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n const value = Number.parseFloat(String(style[property]));\n return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n if (!value.trim().endsWith('px')) return undefined;\n const parsedValue = Number.parseFloat(value);\n return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n availableWidth: number;\n parent: HTMLElement;\n parentWidth: number;\n};\n\nconst availableWidthToRight = (\n controls: HTMLDivElement,\n previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n const parent = controls.parentElement;\n if (!parent) return undefined;\n\n const parentRect = parent.getBoundingClientRect();\n const parentStyle = getComputedStyle(parent);\n const parentWidth = parentRect.width || parent.clientWidth;\n const contentLeft =\n parentRect.left +\n numericStyle(parentStyle, 'borderLeftWidth') +\n numericStyle(parentStyle, 'paddingLeft');\n const contentRight =\n parentRect.left +\n parentWidth -\n numericStyle(parentStyle, 'borderRightWidth') -\n numericStyle(parentStyle, 'paddingRight');\n const precedingSiblings = Array.from(parent.children).slice(\n 0,\n Array.from(parent.children).indexOf(controls)\n );\n const occupiedRight = precedingSiblings.reduce(\n (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n contentLeft\n );\n const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n const parentWidthIncrease =\n previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n return {\n availableWidth:\n parentWidthIncrease > 0\n ? Math.max(\n measuredAvailableWidth,\n (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n )\n : measuredAvailableWidth,\n parent,\n parentWidth,\n };\n};\n\nexport const Controls = ({\n children,\n className,\n maxVisibleButtons,\n overflow,\n overflowAccessibleLabel = 'More actions',\n variant = 'default',\n ...props\n}: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n const normalizedMaxVisibleButtons =\n typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n ? Math.floor(maxVisibleButtons)\n : 0;\n const visibleButtonLimit =\n variant === 'embedded' && normalizedMaxVisibleButtons > 0\n ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n : sortedButtons.length;\n const controlsRef = useRef<HTMLDivElement>(null);\n const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n const measurementRef = useRef<HTMLDivElement>(null);\n const nonButtonsRef = useRef<HTMLSpanElement>(null);\n const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n const updateOverflow = useCallback(() => {\n if (!adaptive) {\n setVisibleButtonCount(visibleButtonLimit);\n return;\n }\n\n const controls = controlsRef.current;\n const measurement = measurementRef.current;\n if (!controls || !measurement) return;\n\n const measurementButtons = Array.from(\n measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n );\n const trigger = measurementButtons.at(-1);\n if (!trigger) return;\n\n const buttonWidths = measurementButtons\n .slice(0, sortedButtons.length)\n .map((button) => button.getBoundingClientRect().width);\n if (buttonWidths.length !== sortedButtons.length) return;\n\n const style = getComputedStyle(controls);\n const horizontalChrome =\n numericStyle(style, 'paddingLeft') +\n numericStyle(style, 'paddingRight') +\n numericStyle(style, 'borderLeftWidth') +\n numericStyle(style, 'borderRightWidth');\n const configuredMaxWidth = pixelStyle(style.maxWidth);\n const embeddedLayout =\n variant === 'embedded'\n ? availableWidthToRight(controls, embeddedLayoutRef.current)\n : undefined;\n if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n const outerAvailableWidth = Math.min(\n ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n )\n );\n if (!Number.isFinite(outerAvailableWidth)) return;\n\n const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n if (\n visibleButtonLimit === sortedButtons.length &&\n prefixWidth + actionWidth <= availableWidth\n ) {\n setVisibleButtonCount((current) =>\n current === visibleButtonLimit ? current : visibleButtonLimit\n );\n return;\n }\n\n let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n let nextVisibleButtonCount = 0;\n for (let index = 0; index < visibleButtonLimit; index += 1) {\n if (usedWidth + buttonWidths[index] > availableWidth) break;\n usedWidth += buttonWidths[index];\n nextVisibleButtonCount = index + 1;\n }\n\n setVisibleButtonCount((current) =>\n current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n );\n }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n useLayoutEffect(() => {\n updateOverflow();\n\n if (!adaptive) return undefined;\n\n const observer =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n if (controlsRef.current) observer?.observe(controlsRef.current);\n if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n if (variant === 'embedded' && controlsRef.current?.parentElement) {\n Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n if (sibling !== controlsRef.current) observer?.observe(sibling);\n });\n }\n if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n window.addEventListener('resize', updateOverflow);\n window.visualViewport?.addEventListener('resize', updateOverflow);\n void document.fonts?.ready.then(updateOverflow);\n\n return () => {\n observer?.disconnect();\n window.removeEventListener('resize', updateOverflow);\n window.visualViewport?.removeEventListener('resize', updateOverflow);\n };\n }, [adaptive, children, updateOverflow, variant]);\n\n if (childArray.length === 0) {\n return null;\n }\n\n const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n return (\n <div\n data-component='controls'\n data-dynamic-position={variant === 'fixed' ? true : undefined}\n className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n ref={controlsRef}\n {...props}\n >\n {adaptive && (\n <div\n aria-hidden='true'\n className={styles.measurement}\n ref={measurementRef}\n >\n {sortedButtons.map((button, index) =>\n cloneElement(button, {\n 'aria-hidden': true,\n id: undefined,\n key: `measure-${String(button.key ?? index)}`,\n onClick: undefined,\n ref: undefined,\n tabIndex: -1,\n })\n )}\n <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n </div>\n )}\n {variant !== 'embedded' && nonButtons.length > 0 && (\n <span\n className={styles['non-button-content']}\n ref={nonButtonsRef}\n >\n {nonButtons}\n </span>\n )}\n {visibleButtons}\n {overflowedButtons.length > 0 && (\n <span className={styles['overflow-trigger']}>\n <OverflowMenu\n buttons={overflowedButtons}\n menuAccessibleLabel={overflowAccessibleLabel}\n triggerAccessibleLabel={overflowAccessibleLabel}\n />\n </span>\n )}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n primary: 3,\n danger: 2,\n secondary: 1,\n tertiary: 0,\n simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n default: styles.default,\n embedded: styles.embedded,\n fixed: styles.fixed,\n inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n maxVisibleButtons?: number;\n overflow?: 'menu';\n overflowAccessibleLabel?: string;\n variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n buttons,\n menuAccessibleLabel,\n triggerAccessibleLabel,\n}: {\n buttons: React.ReactElement<ButtonProps>[];\n menuAccessibleLabel: string;\n triggerAccessibleLabel: string;\n}) {\n const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n button,\n isDanger: button.props.variant === 'danger',\n value: button,\n }));\n\n return (\n <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n {({ close, initialFocus }) => (\n <MenuActionList\n actions={actions}\n initialFocus={initialFocus}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={() => close()}\n usesMenuSemantics\n />\n )}\n </MenuPopover>\n );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n const value = Number.parseFloat(String(style[property]));\n return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n if (!value.trim().endsWith('px')) return undefined;\n const parsedValue = Number.parseFloat(value);\n return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n availableWidth: number;\n parent: HTMLElement;\n parentWidth: number;\n};\n\nconst availableWidthToRight = (\n controls: HTMLDivElement,\n previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n const parent = controls.parentElement;\n if (!parent) return undefined;\n\n const parentRect = parent.getBoundingClientRect();\n const parentStyle = getComputedStyle(parent);\n const parentWidth = parentRect.width || parent.clientWidth;\n const contentLeft =\n parentRect.left +\n numericStyle(parentStyle, 'borderLeftWidth') +\n numericStyle(parentStyle, 'paddingLeft');\n const contentRight =\n parentRect.left +\n parentWidth -\n numericStyle(parentStyle, 'borderRightWidth') -\n numericStyle(parentStyle, 'paddingRight');\n const precedingSiblings = Array.from(parent.children).slice(\n 0,\n Array.from(parent.children).indexOf(controls)\n );\n const occupiedRight = precedingSiblings.reduce(\n (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n contentLeft\n );\n const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n const parentWidthIncrease =\n previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n return {\n availableWidth:\n parentWidthIncrease > 0\n ? Math.max(\n measuredAvailableWidth,\n (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n )\n : measuredAvailableWidth,\n parent,\n parentWidth,\n };\n};\n\nexport const Controls = ({\n children,\n className,\n maxVisibleButtons,\n overflow,\n overflowAccessibleLabel = 'More actions',\n variant = 'default',\n ...props\n}: ControlsProps) => {\n const childArray = Children.toArray(children);\n const buttons: React.ReactElement<ButtonProps>[] = [];\n const nonButtons: React.ReactNode[] = [];\n\n childArray.forEach((child) => {\n if (isValidElement<ButtonProps>(child) && child.type === Button) {\n buttons.push(child);\n } else {\n nonButtons.push(child);\n }\n });\n\n const sortedButtons = buttons\n .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n .sort((a, b) => a.rank - b.rank || a.index - b.index)\n .map(({ button, index }) =>\n cloneElement(button, {\n key: button.key ?? index,\n })\n );\n\n const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n const normalizedMaxVisibleButtons =\n typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n ? Math.floor(maxVisibleButtons)\n : 0;\n const visibleButtonLimit =\n variant === 'embedded' && normalizedMaxVisibleButtons > 0\n ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n : sortedButtons.length;\n const controlsRef = useRef<HTMLDivElement>(null);\n const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n const measurementRef = useRef<HTMLDivElement>(null);\n const nonButtonsRef = useRef<HTMLSpanElement>(null);\n const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n const updateOverflow = useCallback(() => {\n if (!adaptive) {\n setVisibleButtonCount(visibleButtonLimit);\n return;\n }\n\n const controls = controlsRef.current;\n const measurement = measurementRef.current;\n if (!controls || !measurement) return;\n\n const measurementButtons = Array.from(\n measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n );\n const trigger = measurementButtons.at(-1);\n if (!trigger) return;\n\n const buttonWidths = measurementButtons\n .slice(0, sortedButtons.length)\n .map((button) => button.getBoundingClientRect().width);\n if (buttonWidths.length !== sortedButtons.length) return;\n\n const style = getComputedStyle(controls);\n const horizontalChrome =\n numericStyle(style, 'paddingLeft') +\n numericStyle(style, 'paddingRight') +\n numericStyle(style, 'borderLeftWidth') +\n numericStyle(style, 'borderRightWidth');\n const configuredMaxWidth = pixelStyle(style.maxWidth);\n const embeddedLayout =\n variant === 'embedded'\n ? availableWidthToRight(controls, embeddedLayoutRef.current)\n : undefined;\n if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n const outerAvailableWidth = Math.min(\n ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n )\n );\n if (!Number.isFinite(outerAvailableWidth)) return;\n\n const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n if (\n visibleButtonLimit === sortedButtons.length &&\n prefixWidth + actionWidth <= availableWidth\n ) {\n setVisibleButtonCount((current) =>\n current === visibleButtonLimit ? current : visibleButtonLimit\n );\n return;\n }\n\n let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n let nextVisibleButtonCount = 0;\n for (let index = 0; index < visibleButtonLimit; index += 1) {\n if (usedWidth + buttonWidths[index] > availableWidth) break;\n usedWidth += buttonWidths[index];\n nextVisibleButtonCount = index + 1;\n }\n\n setVisibleButtonCount((current) =>\n current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n );\n }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n useLayoutEffect(() => {\n updateOverflow();\n\n if (!adaptive) return undefined;\n\n const observer =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n if (controlsRef.current) observer?.observe(controlsRef.current);\n if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n if (variant === 'embedded' && controlsRef.current?.parentElement) {\n Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n if (sibling !== controlsRef.current) observer?.observe(sibling);\n });\n }\n if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n window.addEventListener('resize', updateOverflow);\n window.visualViewport?.addEventListener('resize', updateOverflow);\n void document.fonts?.ready.then(updateOverflow);\n\n return () => {\n observer?.disconnect();\n window.removeEventListener('resize', updateOverflow);\n window.visualViewport?.removeEventListener('resize', updateOverflow);\n };\n }, [adaptive, children, updateOverflow, variant]);\n\n if (childArray.length === 0) {\n return null;\n }\n\n const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n return (\n <div\n data-component='controls'\n data-dynamic-position={variant === 'fixed' ? true : undefined}\n data-adaptive={adaptive ? true : undefined}\n className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n ref={controlsRef}\n {...props}\n >\n {adaptive && (\n <div\n aria-hidden='true'\n className={styles.measurement}\n ref={measurementRef}\n >\n {sortedButtons.map((button, index) =>\n cloneElement(button, {\n 'aria-hidden': true,\n id: undefined,\n key: `measure-${String(button.key ?? index)}`,\n onClick: undefined,\n ref: undefined,\n tabIndex: -1,\n })\n )}\n <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n </div>\n )}\n {variant !== 'embedded' && nonButtons.length > 0 && (\n <span\n className={styles['non-button-content']}\n ref={nonButtonsRef}\n >\n {nonButtons}\n </span>\n )}\n {visibleButtons}\n {overflowedButtons.length > 0 && (\n <span className={styles['overflow-trigger']}>\n <OverflowMenu\n buttons={overflowedButtons}\n menuAccessibleLabel={overflowAccessibleLabel}\n triggerAccessibleLabel={overflowAccessibleLabel}\n />\n </span>\n )}\n </div>\n );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
|