@solibo/solibo-ui 2.0.1 → 2.0.3
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/index13.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index21.css +1 -1
- package/dist/assets/index48.css +1 -1
- package/dist/components/controls/index.cjs +2 -1
- package/dist/components/controls/index.cjs.map +1 -1
- package/dist/components/controls/index.js +57 -54
- package/dist/components/controls/index.js.map +1 -1
- package/dist/components/dropdown/index.cjs +1 -1
- package/dist/components/dropdown/index.js +1 -1
- package/dist/components/editor/index.cjs +1 -1
- package/dist/components/editor/index.js +1 -1
- package/dist/components/graph/index.cjs +1 -1
- package/dist/components/graph/index.js +26 -26
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +1 -1
- package/dist/components/message/index.cjs +1 -1
- package/dist/components/message/index.cjs.map +1 -1
- package/dist/components/message/index.js +34 -28
- package/dist/components/message/index.js.map +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +32 -32
- package/dist/components/search/index.cjs +1 -1
- package/dist/components/search/index.js +1 -1
- package/dist/index-DWDp66fp.cjs +2 -0
- package/dist/{index-CQlMdqOp.cjs.map → index-DWDp66fp.cjs.map} +1 -1
- package/dist/index-Ds-Ocs4L.js +83 -0
- package/dist/{index-CbJ2-IPc.js.map → index-Ds-Ocs4L.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
- package/dist/index-CQlMdqOp.cjs +0 -2
- package/dist/index-CbJ2-IPc.js +0 -83
package/dist/assets/index13.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._nav_1cda7_3 a{display:block}._label_1cda7_9{flex:1 1 auto;min-width:0;overflow:clip visible;text-overflow:ellipsis;white-space:nowrap}._item_1cda7_17{align-items:center;border-radius:var(--shape-border-radius-radius-md);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto}._item_1cda7_17>a{display:grid;grid-column:1 / -1;grid-row:1;grid-template-columns:subgrid;margin-bottom:0}._item_1cda7_17>a>[data-component=badge]{grid-column:3}._actions_1cda7_36{grid-column:4;grid-row:1;justify-self:end;margin-right:var(--shape-spacing-2xs);margin-top:var(--shape-spacing-2xs);width:-moz-max-content;width:max-content;z-index:1}._actions_1cda7_36:has([data-component=popover]){display:none}._item_1cda7_17:hover ._actions_1cda7_36,._item_1cda7_17:focus-within ._actions_1cda7_36{display:block}._item_1cda7_17:hover ._actions_1cda7_36 [data-component=popover],._item_1cda7_17:focus-within ._actions_1cda7_36 [data-component=popover]{visibility:visible}._highlighted_1cda7_60>a{background:var(--colors-semantic-primary-primary-subtle);border-color:var(--colors-semantic-primary-primary-subtle-border);color:var(--colors-semantic-content-primary);font-weight:var(--font-font-weight-semibold)}._horizontal_1cda7_64 a,._horizontal_1cda7_64 li{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._sidebar_1cda7_74 a{align-items:center;border:var(--scale-1) solid transparent;border-radius:var(--shape-border-radius-radius-md);color:var(--colors-semantic-content-secondary);display:flex;line-height:var(--utils-tokens-unit);overflow:hidden;padding:var(--shape-spacing-md) var(--shape-spacing-sm);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}._sidebar_1cda7_74 a [data-component=badge]{margin-left:auto}._sidebar_1cda7_74 a[aria-current=page]{background:var(--colors-semantic-primary-primary-subtle);border-color:var(--colors-semantic-primary-primary-subtle-border);color:var(--colors-semantic-content-primary);font-weight:var(--font-font-weight-semibold)}._sidebar_1cda7_74 a:has(~a){margin-bottom:var(--shape-spacing-2xs)}._sidebar_1cda7_74 ._item_1cda7_17>a{display:grid}._sidebar_1cda7_74>:is(ol,ul){margin-block:var(--shape-spacing-2xs) 0!important}._sidebar_1cda7_74>:is(ol,ul)>li{margin-bottom:0;padding-block:0}._sidebar_1cda7_74>:is(ol,ul)>li:has(+li){margin-bottom:var(--shape-spacing-2xs)}._sidebar_1cda7_74 input{margin:3px 0!important}._sidebar_1cda7_74~._sidebar_1cda7_74{border-top:solid 1px var(--colors-semantic-border-default);margin-top:var(--shape-spacing-lg);padding-top:var(--shape-spacing-2xs)}._nav_1cda7_3._tabs_1cda7_131._tabs_1cda7_131{display:flex;gap:var(--utils-tokens-unit)}._nav_1cda7_3._tabs_1cda7_131._tabs_1cda7_131 a,._nav_1cda7_3._tabs_1cda7_131._tabs_1cda7_131 li{color:var(--colors-semantic-content-tertiary);display:inline-block;font-weight:var(--font-font-weight-semibold);padding:var(--scale-4) var(--scale-2) var(--scale-8) var(--scale-2);text-align:center;text-decoration:none}._nav_1cda7_3._tabs_1cda7_131._tabs_1cda7_131 a[aria-current=page],._nav_1cda7_3._tabs_1cda7_131._tabs_1cda7_131 li[aria-current=page]{border-bottom:var(--shape-border-width-default) solid var(--colors-semantic-content-primary);color:var(--colors-semantic-content-primary)}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151{-webkit-backdrop-filter:blur(var(--scale-8));backdrop-filter:blur(var(--scale-8));background-color:var(--colors-translucent);border:var(--scale-2) solid var(--colors-semantic-bg-surface);border-radius:var(--shape-border-radius-radius-2xl);box-shadow:var(--shape-box-shadow-sm-position-x) var(--shape-box-shadow-sm-position-y) var(--shape-box-shadow-sm-blur) var(--shape-box-shadow-sm-spread) var(--shape-box-shadow-sm-color);display:flex;left:50%;margin:0 auto;position:sticky;top:var(--utils-tokens-unit);transform:translate(-50%);width:-moz-fit-content;width:fit-content;z-index:2}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151:has(>:only-child){display:none}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151:before{background:var(--colors-semantic-primary-primary-active);border-radius:var(--shape-border-radius-radius-2xl);content:"";inset-block:0;left:anchor(left);position:absolute;position-anchor:--current;transition:left var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function),top var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function),width var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:anchor-size(width);z-index:0}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a{border-radius:var(--scale-32);color:var(--colors-semantic-primary-primary);display:inline-block;font-weight:var(--font-font-weight-bold);padding:var(--utils-tokens-unit);position:relative;text-decoration:none;text-overflow:ellipsis;transition:color var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function),padding var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);white-space:nowrap;z-index:2}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a[aria-current=page]{anchor-name:--current;color:var(--colors-semantic-bg-surface)}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a[aria-current=page]:hover{color:var(--colors-semantic-bg-surface)}@media (width <= 1024px){._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151{flex-direction:column}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a[aria-current=page]{background-color:var(--colors-semantic-primary-primary-active)}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a[aria-current=page]:after{background-color:var(--colors-semantic-bg-surface);content:"";display:inline-block;height:var(--utils-tokens-unit);margin-left:var(--scale-8);-webkit-mask-image:var(--icon-svg);mask-image:var(--icon-svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:transform var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);vertical-align:middle;width:var(--utils-tokens-unit)}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151 a:not([aria-current=page]){display:none}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151:before{display:none}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151[data-open=true] a{display:block}._nav_1cda7_3._pills_1cda7_151._pills_1cda7_151[data-open=true] a[aria-current=page]:after{transform:rotateX(180deg)}}@supports not (position-anchor: --x){._pills_1cda7_151:before{display:none}._pills_1cda7_151 a[aria-current=page]{background:var(--colors-semantic-primary-primary-active);color:var(--colors-semantic-bg-surface)}}._sidebar_1cda7_74 a:hover:not([aria-current=page]),._sidebar_1cda7_74 ._item_1cda7_17:hover>a:not([aria-current=page]){background:var(--colors-semantic-interactive-hover-subtle);border-color:var(--colors-semantic-interactive-hover-subtle);color:var(--colors-semantic-content-primary)}
|
package/dist/assets/index16.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._attachments_77ukg_1{align-items:flex-start;display:flex;flex-direction:column;gap:var(--scale-8);margin-bottom:var(--scale-4);margin-top:var(--scale-4);max-width:min(90%,var(--shape-width-max-lg))}._message-group_77ukg_11{align-items:flex-start;display:flex;flex-direction:column}._message-group_77ukg_11[data-message-type=default]>._attachments_77ukg_1{margin-left:var(--scale-16)}._message-group_77ukg_11>:first-child{margin-left:var(--scale-16)}._message-group_77ukg_11>time,._message-group_77ukg_11>._footer_77ukg_27{color:var(--colors-semantic-content-tertiary);margin-left:var(--scale-20);margin-right:var(--scale-16)}._message-group_77ukg_11>._footer_77ukg_27{align-items:center;display:flex;flex-wrap:wrap;gap:var(--scale-4) var(--scale-8)}._message-group_77ukg_11[data-message-type=system],._message-group_77ukg_11:has([data-component=collapsible]){padding:0 var(--shape-spacing-md);margin-left:20%;margin-right:5%}._message-group_77ukg_11[data-message-type=system]>div:first-child,._message-group_77ukg_11:has([data-component=collapsible])>div:first-child{margin-left:0}._message-group_77ukg_11:has([data-component=collapsible]) [data-message-type=system]{margin-left:0;max-width:100%;padding-inline:0}._message-group_77ukg_11[data-message-type=user]{align-items:flex-end}._message-group_77ukg_11[data-message-type=user]>._attachments_77ukg_1{align-items:flex-end;margin-right:var(--scale-16)}._message_77ukg_11{border:solid var(--shape-border-width-default) var(--colors-semantic-border-default);margin:var(--scale-4) 0;padding:var(--utils-tokens-unit);white-space:pre-wrap;word-break:break-word}._message_77ukg_11:is([data-type=default],[data-type=user],[data-appearance=file]){max-width:min(90%,var(--shape-width-max-lg));width:-moz-fit-content;width:fit-content}._message_77ukg_11[data-type=default]{background-color:var(--colors-semantic-bg-page);border-left:none;border-radius:0 var(--utils-tokens-unit) var(--utils-tokens-unit) 0;margin-inline:var(--message-edge-gap, 0) auto}._message_77ukg_11:is([data-type=minimal],[data-type=system]){border:none}._message_77ukg_11[data-type=minimal]{margin:var(--scale-8) 0 0 0;padding:0}._message_77ukg_11[data-appearance=file] ul{margin:0}._message_77ukg_11[data-type=user]{background-color:var(--colors-semantic-primary-primary-subtle);border-radius:var(--utils-tokens-unit) 0 0 var(--utils-tokens-unit);border-right:none;margin-inline:auto var(--message-edge-gap, 0)}._message_77ukg_11[data-type=user][data-appearance=file] ul{text-align:right}._message_77ukg_11[data-type=system]{border-bottom:solid var(--shape-border-width-default) var(--colors-semantic-border-strong);color:var(--colors-semantic-content-secondary);font-size:var(--typography-font-sizes-label-sm);padding:0;padding-bottom:var(--shape-spacing-xs);text-align:left}._message_77ukg_11[data-type=system] [data-component=icon]:first-of-type{height:var(--utils-tokens-icon-tiny);width:var(--utils-tokens-icon-tiny)}._message_77ukg_11[data-appearance=file]{--message-edge-gap: var(--scale-16);background-color:transparent;border:0;padding:0}._message_77ukg_11[data-appearance=document]{max-width:min(90%,var(--shape-width-max-lg));overflow:hidden;padding:0;width:100%}._message_77ukg_11 p:first-child{margin-top:0}._message_77ukg_11 p:last-child{margin-bottom:0}._message_77ukg_11 [data-component=collapsible] p{font-size:var(--typography-font-sizes-label-sm)}._timestamp_77ukg_152{color:var(--colors-semantic-content-secondary);font-size:var(--typography-font-sizes-caption)}._actions_77ukg_157{align-items:center;display:flex;gap:var(--scale-4)}._actions_77ukg_157 [data-component=button]{font-size:var(--typography-font-sizes-caption);min-height:0;padding-block:0}._preview_77ukg_169{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;text-overflow:ellipsis}@media (width < 1024px){._message-group_77ukg_11[data-message-type=system],._message-group_77ukg_11:has([data-component=collapsible]){margin-left:10%;margin-right:5%}}@media (width < 480px){._message-group_77ukg_11[data-message-type=system],._message-group_77ukg_11:has([data-component=collapsible]){margin-inline:0}}
|
package/dist/assets/index21.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes _bar-
|
|
1
|
+
@keyframes _bar-grow_plhqd_1{0%{transform:scaleY(0)}to{transform:scaleY(1)}}._graph_plhqd_11{--graph-columns: 1;--graph-height: calc(var(--utils-tokens-unit) * 16);display:grid;gap:var(--scale-8);overflow-x:auto}._plot_plhqd_20{align-items:end;display:grid;gap:var(--scale-8);grid-template-columns:repeat(var(--graph-columns),minmax(var(--scale-32),1fr));list-style:none;min-height:calc(var(--graph-height) + var(--scale-32));width:max(100%,calc(var(--graph-columns) * var(--scale-32)))}._plot_plhqd_20 li{margin-bottom:0}._item_plhqd_34{display:grid;gap:var(--scale-4);min-width:0}._column_plhqd_40{align-items:end;display:grid;gap:var(--scale-4);grid-template-rows:auto var(--graph-height);min-height:0}._value_plhqd_48{color:var(--colors-semantic-content-secondary);font-size:var(--typography-font-sizes-caption);margin-bottom:var(--utils-tokens-unit);overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}._track_plhqd_58{border-radius:var(--shape-border-radius-radius-md);height:100%;overflow:hidden;position:relative}._bar_plhqd_65{--bar-color: var(--colors-semantic-primary-primary-active);--bar-delay: 0ms;--bar-height: 0%;animation:_bar-grow_plhqd_1 calc(var(--utils-tokens-transition-duration) * 2) var(--utils-tokens-transition-timing-function) var(--bar-delay) forwards;background:linear-gradient(180deg,transparent,rgb(255 255 255 / 15%)),var(--bar-color);border-radius:inherit;bottom:0;display:block;height:var(--bar-height);left:0;max-height:100%;position:absolute;transform:scaleY(0);transform-origin:bottom center;transition:height var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%}._label_plhqd_87{color:var(--colors-semantic-content-secondary);font-size:var(--typography-font-sizes-caption);overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}._is-loading_plhqd_96{display:grid;min-height:var(--graph-height);place-items:center}
|
package/dist/assets/index48.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._field_w1cmd_3{min-width:0;width:100%}._input_w1cmd_8{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);color:var(--colors-semantic-content-primary);font-size:var(--typography-font-sizes-body-md);padding:var(--utils-tokens-unit);transition:border var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);padding-top:calc(var(--utils-tokens-unit) - var(--scale-1));width:100%}._input_w1cmd_8::-moz-placeholder{color:var(--colors-semantic-content-tertiary)}._input_w1cmd_8::placeholder{color:var(--colors-semantic-content-tertiary)}._input_w1cmd_8:disabled{background-color:var(--colors-semantic-interactive-disabled);color:var(--colors-semantic-content-primary);pointer-events:none}._input_w1cmd_8[data-icon=true]{background-image:var(--icon-svg);background-position:var(--scale-8) center;background-repeat:no-repeat;background-size:var(--utils-tokens-unit);padding-left:var(--scale-32)}._input_w1cmd_8[type=date],._input_w1cmd_8[type=datetime-local]{max-width:-moz-max-content;max-width:max-content}._input_w1cmd_8[type=datetime-local]{border:var(--scale-1) solid var(--colors-semantic-border-default);border-radius:var(--shape-border-radius-radius-md);padding:var(--utils-tokens-unit)}._input_w1cmd_8[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--colors-semantic-bg-surface);border:var(--scale-1) solid var(--colors-semantic-border-default);box-shadow:none;height:calc(var(--utils-tokens-unit) * 1.25);padding:0;width:calc(var(--utils-tokens-unit) * 1.25)}._input_w1cmd_8[type=radio]:checked{border-color:var(--colors-semantic-primary-primary-active);border-width:var(--scale-4)}._input_w1cmd_8._touched_w1cmd_48:invalid{border-color:var(--colors-semantic-status-error-border)}._input_w1cmd_8[aria-invalid=true]{border-color:var(--colors-semantic-status-error-border)}._label_w1cmd_57{position:relative}._label_w1cmd_57 span{display:block;margin-bottom:var(--shape-spacing-2xs)}._label_w1cmd_57:has(input[type=radio]){align-items:center;display:flex;flex-direction:row-reverse;gap:var(--utils-tokens-unit);justify-content:start}._label_w1cmd_57:has(input[type=radio]) span{margin-bottom:0}._inline_w1cmd_78{align-items:center;border-bottom:var(--scale-1) solid var(--colors-semantic-border-default);display:flex;gap:var(--shape-spacing-sm);min-height:calc(var(--scale-32) + var(--scale-8));transition:border-color var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100%}._inline_w1cmd_78:focus-within{border-bottom-color:var(--colors-semantic-primary-primary)}._inline_w1cmd_78>span{color:var(--colors-semantic-content-tertiary);flex:none;margin-bottom:0!important}._inline_w1cmd_78 ._input_w1cmd_8{border:0;border-radius:0;box-shadow:none;outline:0;flex:1 1 auto;min-width:0;padding:var(--shape-spacing-xs) 0}._inline_w1cmd_78 ._input_w1cmd_8:disabled{background-color:transparent;color:var(--colors-semantic-content-tertiary)}._inline_w1cmd_78:has(._input_w1cmd_8[aria-invalid=true]){border-bottom-color:var(--colors-semantic-status-error-border)}._error_w1cmd_99{color:var(--colors-semantic-status-error-content);display:block;font-size:var(--typography-font-sizes-body-sm);padding:var(--shape-spacing-2xs) 0}._code_w1cmd_106{margin-right:var(--scale-8)!important;width:calc(5 * var(--utils-tokens-unit))!important}._code_w1cmd_106+input[type=tel]{width:calc(100% - (5 * var(--utils-tokens-unit) + var(--scale-8)))}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const b=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const b=require("react/jsx-runtime"),Z=require("../../classix-5H4IWnMA.cjs"),l=require("react"),ee=require("../button/index.cjs"),A=require("../../menu-popover-CM3v5s-5.cjs"),te="_controls_t1re6_13",ne="_inline_t1re6_43",ie="_embedded_t1re6_48",re="_fixed_t1re6_49",oe="_adaptive_t1re6_60",se="_measurement_t1re6_65",h={controls:te,default:"_default_t1re6_28",inline:ne,embedded:ie,fixed:re,adaptive:oe,measurement:se,"non-button-content":"_non-button-content_t1re6_99","overflow-trigger":"_overflow-trigger_t1re6_128"},de={primary:2,secondary:1,tertiary:0,simple:0},ce={default:h.default,embedded:h.embedded,fixed:h.fixed,inline:h.inline},ae=s=>de[s.props.variant??"secondary"];function le({buttons:s,menuAccessibleLabel:i,triggerAccessibleLabel:n}){const x=s.map(o=>({button:o,isDanger:o.props.intent==="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 p=(s,i)=>{const n=Number.parseFloat(String(s[i]));return Number.isFinite(n)?n:0},ue=s=>{if(!s.trim().endsWith("px"))return;const i=Number.parseFloat(s);return Number.isFinite(i)?i:void 0},me=(s,i)=>{const n=s.parentElement;if(!n)return;const x=n.getBoundingClientRect(),o=getComputedStyle(n),r=x.width||n.clientWidth,S=x.left+p(o,"borderLeftWidth")+p(o,"paddingLeft"),M=x.left+r-p(o,"borderRightWidth")-p(o,"paddingRight"),_=Array.from(n.children).slice(0,Array.from(n.children).indexOf(s)),y=_.reduce((f,u)=>Math.max(f,u.getBoundingClientRect().right),S),c=_.length>0?p(o,"columnGap"):0,a=Math.max(0,M-y-c),R=(i==null?void 0:i.parent)===n?Math.max(0,r-i.parentWidth):0;return{availableWidth:R>0?Math.max(a,((i==null?void 0:i.availableWidth)??0)+R):a,parent:n,parentWidth:r}},fe=({children:s,className:i,maxVisibleButtons:n,overflow:x,overflowAccessibleLabel:o="More actions",variant:r="default",...S})=>{const M=l.Children.toArray(s),_=[],y=[];M.forEach(e=>{l.isValidElement(e)&&e.type===ee.Button?_.push(e):y.push(e)});const c=_.map((e,d)=>({button:e,index:d,rank:ae(e)})).sort((e,d)=>e.rank-d.rank||e.index-d.index).map(({button:e,index:d})=>l.cloneElement(e,{key:e.key??d})),a=r==="embedded"||r==="fixed"&&x==="menu",R=typeof n=="number"&&Number.isFinite(n)?Math.floor(n):0,f=r==="embedded"&&R>0?Math.min(c.length,R):c.length,u=l.useRef(null),N=l.useRef(void 0),z=l.useRef(null),E=l.useRef(null),[F,C]=l.useState(f),k=c.map(e=>String(e.key)).join(`
|
|
2
|
+
`),[D,G]=l.useState(k);D!==k&&(G(k),C(f));const g=l.useCallback(()=>{var L,I,T;if(!a){C(f);return}const e=u.current,d=z.current;if(!e||!d)return;const W=Array.from(d.querySelectorAll('[data-component="button"]')),w=W.at(-1);if(!w)return;const v=W.slice(0,c.length).map(t=>t.getBoundingClientRect().width);if(v.length!==c.length)return;const m=getComputedStyle(e),H=p(m,"paddingLeft")+p(m,"paddingRight")+p(m,"borderLeftWidth")+p(m,"borderRightWidth"),J=ue(m.maxWidth),B=r==="embedded"?me(e,N.current):void 0;B&&(N.current=B);const Q=(B==null?void 0:B.availableWidth)??((L=e.parentElement)==null?void 0:L.clientWidth)??0,U=((I=window.visualViewport)==null?void 0:I.width)??document.documentElement.clientWidth,V=Math.min(...[J,Q,U].filter(t=>typeof t=="number"&&Number.isFinite(t)&&t>0));if(!Number.isFinite(V))return;const q=Math.max(0,V-H),P=((T=E.current)==null?void 0:T.getBoundingClientRect().width)??0,X=v.reduce((t,Y)=>t+Y,0);if(f===c.length&&P+X<=q){C(t=>t===f?t:f);return}let K=P+w.getBoundingClientRect().width,j=0;for(let t=0;t<f&&!(K+v[t]>q);t+=1)K+=v[t],j=t+1;C(t=>t===j?t:j)},[a,c.length,r,f]);if(l.useLayoutEffect(()=>{var d,W,w,v;if(g(),!a)return;const e=typeof ResizeObserver>"u"?void 0:new ResizeObserver(g);return u.current&&(e==null||e.observe(u.current)),(d=u.current)!=null&&d.parentElement&&(e==null||e.observe(u.current.parentElement)),r==="embedded"&&((W=u.current)!=null&&W.parentElement)&&Array.from(u.current.parentElement.children).forEach(m=>{m!==u.current&&(e==null||e.observe(m))}),E.current&&(e==null||e.observe(E.current)),window.addEventListener("resize",g),(w=window.visualViewport)==null||w.addEventListener("resize",g),(v=document.fonts)==null||v.ready.then(g),()=>{var m;e==null||e.disconnect(),window.removeEventListener("resize",g),(m=window.visualViewport)==null||m.removeEventListener("resize",g)}},[a,s,g,r]),M.length===0)return null;const $=a?c.slice(0,F):c,O=a?c.slice(F):[];return b.jsxs("div",{"data-component":"controls","data-dynamic-position":r==="fixed"?!0:void 0,"data-adaptive":a?!0:void 0,className:Z.t(h.controls,ce[r],a&&h.adaptive,i),ref:u,...S,children:[a&&b.jsxs("div",{"aria-hidden":"true",className:h.measurement,ref:z,children:[c.map((e,d)=>l.cloneElement(e,{"aria-hidden":!0,id:void 0,key:`measure-${String(e.key??d)}`,onClick:void 0,ref:void 0,tabIndex:-1})),b.jsx(A.MenuPopover,{triggerAccessibleLabel:o,children:null})]}),r!=="embedded"&&y.length>0&&b.jsx("span",{className:h["non-button-content"],ref:E,children:y}),$,O.length>0&&b.jsx("span",{className:h["overflow-trigger"],children:b.jsx(le,{buttons:O,menuAccessibleLabel:o,triggerAccessibleLabel:o})})]})};exports.Controls=fe;
|
|
2
3
|
//# 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: 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.intent === '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","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","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,UAAW,EACXC,SAAU,EACVC,OAAQ,CACV,EAEMC,GAAW,CACfC,QAASC,EAAOD,QAChBE,SAAUD,EAAOC,SACjBC,MAAOF,EAAOE,MACdC,OAAQH,EAAOG,MACjB,EAUMC,GAAiBC,GACrBZ,GAAmBY,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,MAAMS,SAAW,SAClCC,MAAOX,CAAAA,EACP,EAEF,OACEY,EAAAA,IAACC,EAAAA,YAAA,CAAY,uBAAAP,EAA+C,iBAAA,eACzD,SAAA,CAAC,CAAEQ,MAAAA,EAAOC,aAAAA,CAAAA,IACTH,EAAAA,IAACI,EAAAA,eAAA,CACC,QAAAT,EACA,aAAAQ,EACA,oBAAAV,EACA,SAAU,IAAMS,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,eAC1B/D,QAAAA,EAAU,UACV,GAAGD,CACU,IAAM,CACnB,MAAMiE,EAAaC,EAAAA,SAASC,QAAQrB,CAAQ,EACtC3C,EAA6C,CAAA,EAC7CiE,EAAgC,CAAA,EAEtCH,EAAWI,QAASC,GAAU,CACxBC,EAAAA,eAA4BD,CAAK,GAAKA,EAAME,OAASC,EAAAA,OACvDtE,EAAQuE,KAAKJ,CAAK,EAElBF,EAAWM,KAAKJ,CAAK,CAEzB,CAAC,EAED,MAAMK,EAAgBxE,EACnBI,IAAI,CAACR,EAAQ6E,KAAW,CAAE7E,OAAAA,EAAQ6E,MAAAA,EAAOC,KAAM/E,GAAcC,CAAM,CAAA,EAAI,EACvE+E,KAAK,CAACC,EAAGC,IAAMD,EAAEF,KAAOG,EAAEH,MAAQE,EAAEH,MAAQI,EAAEJ,KAAK,EACnDrE,IAAI,CAAC,CAAER,OAAAA,EAAQ6E,MAAAA,CAAAA,IACdK,EAAAA,aAAalF,EAAQ,CACnBmF,IAAKnF,EAAOmF,KAAON,CAAAA,CACpB,CACH,EAEIO,EAAWlF,IAAY,YAAeA,IAAY,SAAW8D,IAAa,OAC1EqB,EACJ,OAAOtB,GAAsB,UAAY3C,OAAOG,SAASwC,CAAiB,EACtET,KAAKgC,MAAMvB,CAAiB,EAC5B,EACAwB,EACJrF,IAAY,YAAcmF,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,EAC7BjD,IAAKR,GAAWA,EAAOmC,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,EACJ3G,IAAY,WACR2B,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,OAAQvD,EAASqF,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,gBAC1E/B,IAAY,cAAcuF,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,EAAgB/F,CAAO,CAAC,EAE5CgE,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,wBAAuBrI,IAAY,QAAU,GAAO0B,OACpD,gBAAewD,EAAW,GAAOxD,OACjC,UAAW4G,EAAAA,EAAG7I,EAAOmC,SAAUrC,GAASS,CAAO,EAAGkF,GAAYzF,EAAOyF,SAAUtB,CAAS,EACxF,IAAK2B,EACL,GAAIxF,EAEHmF,SAAAA,CAAAA,GACCmD,EAAAA,KAAC,OACC,cAAY,OACZ,UAAW5I,EAAOyG,YAClB,IAAKR,EAEJhB,SAAAA,CAAAA,EAAcpE,IAAI,CAACR,EAAQ6E,IAC1BK,EAAAA,aAAalF,EAAQ,CACnB,cAAe,GACfyI,GAAI7G,OACJuD,IAAK,WAAW7D,OAAOtB,EAAOmF,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,EAED/D,IAAY,YAAcmE,EAAWZ,OAAS,GAC7C7C,EAAAA,IAAC,OAAA,CACC,UAAWjB,EAAO,oBAAoB,EACtC,IAAKkG,EAEJxB,SAAAA,EACH,EAEDgE,EACAC,EAAkB7E,OAAS,GAC1B7C,EAAAA,IAAC,OAAA,CAAK,UAAWjB,EAAO,kBAAkB,EACxC,SAAAiB,EAAAA,IAACT,IACC,QAASmI,EACT,oBAAqBrE,EACrB,uBAAwBA,EAAwB,CAAA,CAEpD,CAAA,EAEJ,CAEJ"}
|
|
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: 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.intent === '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 const buttonKeys = sortedButtons.map((button) => String(button.key)).join('\\n');\n const [measuredButtonKeys, setMeasuredButtonKeys] = useState(buttonKeys);\n\n if (measuredButtonKeys !== buttonKeys) {\n setMeasuredButtonKeys(buttonKeys);\n setVisibleButtonCount(visibleButtonLimit);\n }\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","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","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","buttonKeys","join","measuredButtonKeys","setMeasuredButtonKeys","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":"wlBAgBMA,GAAqB,CACzBC,QAAS,EACTC,UAAW,EACXC,SAAU,EACVC,OAAQ,CACV,EAEMC,GAAW,CACfC,QAASC,EAAOD,QAChBE,SAAUD,EAAOC,SACjBC,MAAOF,EAAOE,MACdC,OAAQH,EAAOG,MACjB,EAUMC,GAAiBC,GACrBZ,GAAmBY,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,MAAMS,SAAW,SAClCC,MAAOX,CAAAA,EACP,EAEF,OACEY,EAAAA,IAACC,EAAAA,YAAA,CAAY,uBAAAP,EAA+C,iBAAA,eACzD,SAAA,CAAC,CAAEQ,MAAAA,EAAOC,aAAAA,CAAAA,IACTH,EAAAA,IAACI,EAAAA,eAAA,CACC,QAAAT,EACA,aAAAQ,EACA,oBAAAV,EACA,SAAU,IAAMS,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,eAC1B/D,QAAAA,EAAU,UACV,GAAGD,CACU,IAAM,CACnB,MAAMiE,EAAaC,EAAAA,SAASC,QAAQrB,CAAQ,EACtC3C,EAA6C,CAAA,EAC7CiE,EAAgC,CAAA,EAEtCH,EAAWI,QAASC,GAAU,CACxBC,EAAAA,eAA4BD,CAAK,GAAKA,EAAME,OAASC,GAAAA,OACvDtE,EAAQuE,KAAKJ,CAAK,EAElBF,EAAWM,KAAKJ,CAAK,CAEzB,CAAC,EAED,MAAMK,EAAgBxE,EACnBI,IAAI,CAACR,EAAQ6E,KAAW,CAAE7E,OAAAA,EAAQ6E,MAAAA,EAAOC,KAAM/E,GAAcC,CAAM,CAAA,EAAI,EACvE+E,KAAK,CAACC,EAAGC,IAAMD,EAAEF,KAAOG,EAAEH,MAAQE,EAAEH,MAAQI,EAAEJ,KAAK,EACnDrE,IAAI,CAAC,CAAER,OAAAA,EAAQ6E,MAAAA,CAAAA,IACdK,EAAAA,aAAalF,EAAQ,CACnBmF,IAAKnF,EAAOmF,KAAON,CAAAA,CACpB,CACH,EAEIO,EAAWlF,IAAY,YAAeA,IAAY,SAAW8D,IAAa,OAC1EqB,EACJ,OAAOtB,GAAsB,UAAY3C,OAAOG,SAASwC,CAAiB,EACtET,KAAKgC,MAAMvB,CAAiB,EAC5B,EACAwB,EACJrF,IAAY,YAAcmF,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,EACzEU,EAAarB,EAAcpE,IAAKR,GAAWsB,OAAOtB,EAAOmF,GAAG,CAAC,EAAEe,KAAK;AAAA,CAAI,EACxE,CAACC,EAAoBC,CAAqB,EAAIJ,EAAAA,SAASC,CAAU,EAEnEE,IAAuBF,IACzBG,EAAsBH,CAAU,EAChCF,EAAsBR,CAAkB,GAG1C,MAAMc,EAAiBC,EAAAA,YAAY,IAAM,WACvC,GAAI,CAAClB,EAAU,CACbW,EAAsBR,CAAkB,EACxC,MACF,CAEA,MAAMzD,EAAW2D,EAAYc,QACvBC,EAAcZ,EAAeW,QACnC,GAAI,CAACzE,GAAY,CAAC0E,EAAa,OAE/B,MAAMC,EAAqB5D,MAAMC,KAC/B0D,EAAYE,iBAA8B,2BAA2B,CACvE,EACMC,EAAUF,EAAmBG,GAAG,EAAE,EACxC,GAAI,CAACD,EAAS,OAEd,MAAME,EAAeJ,EAClBzD,MAAM,EAAG4B,EAAcnB,MAAM,EAC7BjD,IAAKR,GAAWA,EAAOmC,sBAAAA,EAAwBI,KAAK,EACvD,GAAIsE,EAAapD,SAAWmB,EAAcnB,OAAQ,OAElD,MAAMvC,EAAQmB,iBAAiBP,CAAQ,EACjCgF,EACJ7F,EAAaC,EAAO,aAAa,EACjCD,EAAaC,EAAO,cAAc,EAClCD,EAAaC,EAAO,iBAAiB,EACrCD,EAAaC,EAAO,kBAAkB,EAClC6F,EAAqBvF,GAAWN,EAAM8F,QAAQ,EAC9CC,EACJ/G,IAAY,WACR2B,GAAsBC,EAAU6D,EAAkBY,OAAO,EACzD3E,OACFqF,MAAkCV,QAAUU,GAChD,MAAMC,GAAcD,GAAAA,YAAAA,EAAgBrD,mBAAkB9B,EAAAA,EAASG,gBAATH,YAAAA,EAAwBU,cAAe,EACvF2E,IAAgBC,EAAAA,OAAOC,iBAAPD,YAAAA,EAAuB7E,QAAS+E,SAASC,gBAAgB/E,YACzEgF,EAAsBlE,KAAKkC,IAC/B,GAAG,CAACuB,EAAoBG,EAAaC,CAAa,EAAEM,OACjDlF,GAA2B,OAAOA,GAAU,UAAYnB,OAAOG,SAASgB,CAAK,GAAKA,EAAQ,CAC7F,CACF,EACA,GAAI,CAACnB,OAAOG,SAASiG,CAAmB,EAAG,OAE3C,MAAM5D,EAAiBN,KAAKC,IAAI,EAAGiE,EAAsBV,CAAgB,EACnEY,IAAc7B,EAAAA,EAAcU,UAAdV,YAAAA,EAAuB1D,wBAAwBI,QAAS,EACtEoF,EAAcd,EAAa1D,OAAO,CAACyE,EAAOrF,IAAUqF,EAAQrF,EAAO,CAAC,EAE1E,GACEgD,IAAuBX,EAAcnB,QACrCiE,EAAcC,GAAe/D,EAC7B,CACAmC,EAAuBQ,GACrBA,IAAYhB,EAAqBgB,EAAUhB,CAC7C,EACA,MACF,CAEA,IAAIsC,EAAYH,EAAcf,EAAQxE,sBAAAA,EAAwBI,MAC1DuF,EAAyB,EAC7B,QAASjD,EAAQ,EAAGA,EAAQU,GACtBsC,EAAAA,EAAYhB,EAAahC,CAAK,EAAIjB,GADQiB,GAAS,EAEvDgD,GAAahB,EAAahC,CAAK,EAC/BiD,EAAyBjD,EAAQ,EAGnCkB,EAAuBQ,GACrBA,IAAYuB,EAAyBvB,EAAUuB,CACjD,CACF,EAAG,CAAC1C,EAAUR,EAAcnB,OAAQvD,EAASqF,CAAkB,CAAC,EA6BhE,GA3BAwC,EAAAA,gBAAgB,IAAM,aAGpB,GAFA1B,EAAAA,EAEI,CAACjB,EAAU,OAEf,MAAM4C,EACJ,OAAOC,eAAmB,IAAcrG,OAAY,IAAIqG,eAAe5B,CAAc,EACvF,OAAIZ,EAAYc,UAASyB,GAAAA,MAAAA,EAAUE,QAAQzC,EAAYc,WACnDd,EAAAA,EAAYc,UAAZd,MAAAA,EAAqBxD,2BAAyBiG,QAAQzC,EAAYc,QAAQtE,gBAC1E/B,IAAY,cAAcuF,EAAAA,EAAYc,UAAZd,MAAAA,EAAqBxD,gBACjDY,MAAMC,KAAK2C,EAAYc,QAAQtE,cAAcc,QAAQ,EAAEuB,QAASjB,GAAY,CACtEA,IAAYoC,EAAYc,UAASyB,GAAAA,MAAAA,EAAUE,QAAQ7E,GACzD,CAAC,EAECwC,EAAcU,UAASyB,GAAAA,MAAAA,EAAUE,QAAQrC,EAAcU,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,CAACjB,EAAUrC,EAAUsD,EAAgBnG,CAAO,CAAC,EAE5CgE,EAAWT,SAAW,EACxB,OAAO,KAGT,MAAMgF,EAAiBrD,EAAWR,EAAc5B,MAAM,EAAG8C,CAAkB,EAAIlB,EACzE8D,EAAoBtD,EAAWR,EAAc5B,MAAM8C,CAAkB,EAAI,CAAA,EAE/E,OACE6C,EAAAA,KAAC,MAAA,CACC,iBAAe,WACf,wBAAuBzI,IAAY,QAAU,GAAO0B,OACpD,gBAAewD,EAAW,GAAOxD,OACjC,UAAWgH,EAAAA,EAAGjJ,EAAOmC,SAAUrC,GAASS,CAAO,EAAGkF,GAAYzF,EAAOyF,SAAUtB,CAAS,EACxF,IAAK2B,EACL,GAAIxF,EAEHmF,SAAAA,CAAAA,GACCuD,EAAAA,KAAC,OACC,cAAY,OACZ,UAAWhJ,EAAO6G,YAClB,IAAKZ,EAEJhB,SAAAA,CAAAA,EAAcpE,IAAI,CAACR,EAAQ6E,IAC1BK,EAAAA,aAAalF,EAAQ,CACnB,cAAe,GACf6I,GAAIjH,OACJuD,IAAK,WAAW7D,OAAOtB,EAAOmF,KAAON,CAAK,CAAC,GAC3CiE,QAASlH,OACTmH,IAAKnH,OACLoH,SAAU,EAAA,CACX,CACH,EACApI,EAAAA,IAACC,EAAAA,YAAA,CAAY,uBAAwBoD,EAA0B,SAAA,IAAA,CAAK,CAAA,EACtE,EAED/D,IAAY,YAAcmE,EAAWZ,OAAS,GAC7C7C,EAAAA,IAAC,OAAA,CACC,UAAWjB,EAAO,oBAAoB,EACtC,IAAKkG,EAEJxB,SAAAA,EACH,EAEDoE,EACAC,EAAkBjF,OAAS,GAC1B7C,EAAAA,IAAC,OAAA,CAAK,UAAWjB,EAAO,kBAAkB,EACxC,SAAAiB,EAAAA,IAACT,IACC,QAASuI,EACT,oBAAqBzE,EACrB,uBAAwBA,EAAwB,CAAA,CAEpD,CAAA,EAEJ,CAEJ"}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import { jsxs as G, jsx as v } from "react/jsx-runtime";
|
|
2
|
-
import { t as
|
|
3
|
-
import { Children as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { a as
|
|
6
|
-
import '../../assets/index36.css';const
|
|
7
|
-
controls:
|
|
2
|
+
import { t as ne } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { Children as ie, isValidElement as re, cloneElement as P, useRef as C, useState as T, useCallback as oe, useLayoutEffect as de } from "react";
|
|
4
|
+
import { Button as se } from "../button/index.js";
|
|
5
|
+
import { a as $, M as ce } from "../../menu-popover-DOkciab5.js";
|
|
6
|
+
import '../../assets/index36.css';const ae = "_controls_t1re6_13", le = "_inline_t1re6_43", ue = "_embedded_t1re6_48", me = "_fixed_t1re6_49", fe = "_adaptive_t1re6_60", he = "_measurement_t1re6_65", f = {
|
|
7
|
+
controls: ae,
|
|
8
8
|
default: "_default_t1re6_28",
|
|
9
|
-
inline:
|
|
10
|
-
embedded:
|
|
11
|
-
fixed:
|
|
12
|
-
adaptive:
|
|
13
|
-
measurement:
|
|
9
|
+
inline: le,
|
|
10
|
+
embedded: ue,
|
|
11
|
+
fixed: me,
|
|
12
|
+
adaptive: fe,
|
|
13
|
+
measurement: he,
|
|
14
14
|
"non-button-content": "_non-button-content_t1re6_99",
|
|
15
15
|
"overflow-trigger": "_overflow-trigger_t1re6_128"
|
|
16
|
-
},
|
|
16
|
+
}, pe = {
|
|
17
17
|
primary: 2,
|
|
18
18
|
secondary: 1,
|
|
19
19
|
tertiary: 0,
|
|
20
20
|
simple: 0
|
|
21
|
-
},
|
|
21
|
+
}, ge = {
|
|
22
22
|
default: f.default,
|
|
23
23
|
embedded: f.embedded,
|
|
24
24
|
fixed: f.fixed,
|
|
25
25
|
inline: f.inline
|
|
26
|
-
},
|
|
27
|
-
function
|
|
26
|
+
}, be = (d) => pe[d.props.variant ?? "secondary"];
|
|
27
|
+
function ve({
|
|
28
28
|
buttons: d,
|
|
29
29
|
menuAccessibleLabel: i,
|
|
30
30
|
triggerAccessibleLabel: n
|
|
@@ -34,90 +34,93 @@ function pe({
|
|
|
34
34
|
isDanger: o.props.intent === "danger",
|
|
35
35
|
value: o
|
|
36
36
|
}));
|
|
37
|
-
return /* @__PURE__ */ v(
|
|
37
|
+
return /* @__PURE__ */ v($, { triggerAccessibleLabel: n, "data-component": "overflowmenu", children: ({
|
|
38
38
|
close: o,
|
|
39
39
|
initialFocus: r
|
|
40
|
-
}) => /* @__PURE__ */ v(
|
|
40
|
+
}) => /* @__PURE__ */ v(ce, { actions: g, initialFocus: r, menuAccessibleLabel: i, onSelect: () => o(), usesMenuSemantics: !0 }) });
|
|
41
41
|
}
|
|
42
42
|
const h = (d, i) => {
|
|
43
43
|
const n = Number.parseFloat(String(d[i]));
|
|
44
44
|
return Number.isFinite(n) ? n : 0;
|
|
45
|
-
},
|
|
45
|
+
}, _e = (d) => {
|
|
46
46
|
if (!d.trim().endsWith("px")) return;
|
|
47
47
|
const i = Number.parseFloat(d);
|
|
48
48
|
return Number.isFinite(i) ? i : void 0;
|
|
49
|
-
},
|
|
49
|
+
}, We = (d, i) => {
|
|
50
50
|
const n = d.parentElement;
|
|
51
51
|
if (!n) return;
|
|
52
|
-
const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth,
|
|
52
|
+
const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth, S = 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), S), 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;
|
|
53
53
|
return {
|
|
54
54
|
availableWidth: x > 0 ? Math.max(a, ((i == null ? void 0 : i.availableWidth) ?? 0) + x) : a,
|
|
55
55
|
parent: n,
|
|
56
56
|
parentWidth: r
|
|
57
57
|
};
|
|
58
|
-
},
|
|
58
|
+
}, Me = ({
|
|
59
59
|
children: d,
|
|
60
60
|
className: i,
|
|
61
61
|
maxVisibleButtons: n,
|
|
62
62
|
overflow: g,
|
|
63
63
|
overflowAccessibleLabel: o = "More actions",
|
|
64
64
|
variant: r = "default",
|
|
65
|
-
...
|
|
65
|
+
...S
|
|
66
66
|
}) => {
|
|
67
|
-
const B =
|
|
67
|
+
const B = ie.toArray(d), _ = [], W = [];
|
|
68
68
|
B.forEach((e) => {
|
|
69
|
-
|
|
69
|
+
re(e) && e.type === se ? _.push(e) : W.push(e);
|
|
70
70
|
});
|
|
71
71
|
const c = _.map((e, s) => ({
|
|
72
72
|
button: e,
|
|
73
73
|
index: s,
|
|
74
|
-
rank:
|
|
74
|
+
rank: be(e)
|
|
75
75
|
})).sort((e, s) => e.rank - s.rank || e.index - s.index).map(({
|
|
76
76
|
button: e,
|
|
77
77
|
index: s
|
|
78
78
|
}) => P(e, {
|
|
79
79
|
key: e.key ?? s
|
|
80
|
-
})), 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 =
|
|
80
|
+
})), 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 = C(null), N = C(void 0), z = C(null), M = C(null), [F, E] = T(m), k = c.map((e) => String(e.key)).join(`
|
|
81
|
+
`), [H, J] = T(k);
|
|
82
|
+
H !== k && (J(k), E(m));
|
|
83
|
+
const p = oe(() => {
|
|
81
84
|
var I, q, D;
|
|
82
85
|
if (!a) {
|
|
83
|
-
|
|
86
|
+
E(m);
|
|
84
87
|
return;
|
|
85
88
|
}
|
|
86
|
-
const e = l.current, s =
|
|
89
|
+
const e = l.current, s = z.current;
|
|
87
90
|
if (!e || !s) return;
|
|
88
|
-
const
|
|
89
|
-
if (!
|
|
90
|
-
const b =
|
|
91
|
+
const y = Array.from(s.querySelectorAll('[data-component="button"]')), w = y.at(-1);
|
|
92
|
+
if (!w) return;
|
|
93
|
+
const b = y.slice(0, c.length).map((t) => t.getBoundingClientRect().width);
|
|
91
94
|
if (b.length !== c.length) return;
|
|
92
|
-
const u = getComputedStyle(e),
|
|
93
|
-
|
|
94
|
-
const
|
|
95
|
-
if (!Number.isFinite(
|
|
96
|
-
const
|
|
97
|
-
if (m === c.length &&
|
|
98
|
-
|
|
95
|
+
const u = getComputedStyle(e), U = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), X = _e(u.maxWidth), R = r === "embedded" ? We(e, N.current) : void 0;
|
|
96
|
+
R && (N.current = R);
|
|
97
|
+
const Y = (R == null ? void 0 : R.availableWidth) ?? ((I = e.parentElement) == null ? void 0 : I.clientWidth) ?? 0, Z = ((q = window.visualViewport) == null ? void 0 : q.width) ?? document.documentElement.clientWidth, O = Math.min(...[X, Y, Z].filter((t) => typeof t == "number" && Number.isFinite(t) && t > 0));
|
|
98
|
+
if (!Number.isFinite(O)) return;
|
|
99
|
+
const j = Math.max(0, O - U), K = ((D = M.current) == null ? void 0 : D.getBoundingClientRect().width) ?? 0, ee = b.reduce((t, te) => t + te, 0);
|
|
100
|
+
if (m === c.length && K + ee <= j) {
|
|
101
|
+
E((t) => t === m ? t : m);
|
|
99
102
|
return;
|
|
100
103
|
}
|
|
101
|
-
let
|
|
102
|
-
for (let t = 0; t < m && !(
|
|
103
|
-
|
|
104
|
-
|
|
104
|
+
let L = K + w.getBoundingClientRect().width, A = 0;
|
|
105
|
+
for (let t = 0; t < m && !(L + b[t] > j); t += 1)
|
|
106
|
+
L += b[t], A = t + 1;
|
|
107
|
+
E((t) => t === A ? t : A);
|
|
105
108
|
}, [a, c.length, r, m]);
|
|
106
|
-
if (
|
|
107
|
-
var s,
|
|
109
|
+
if (de(() => {
|
|
110
|
+
var s, y, w, b;
|
|
108
111
|
if (p(), !a) return;
|
|
109
112
|
const e = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
|
|
110
|
-
return l.current && (e == null || e.observe(l.current)), (s = l.current) != null && s.parentElement && (e == null || e.observe(l.current.parentElement)), r === "embedded" && ((
|
|
113
|
+
return l.current && (e == null || e.observe(l.current)), (s = l.current) != null && s.parentElement && (e == null || e.observe(l.current.parentElement)), r === "embedded" && ((y = l.current) != null && y.parentElement) && Array.from(l.current.parentElement.children).forEach((u) => {
|
|
111
114
|
u !== l.current && (e == null || e.observe(u));
|
|
112
|
-
}),
|
|
115
|
+
}), M.current && (e == null || e.observe(M.current)), window.addEventListener("resize", p), (w = window.visualViewport) == null || w.addEventListener("resize", p), (b = document.fonts) == null || b.ready.then(p), () => {
|
|
113
116
|
var u;
|
|
114
117
|
e == null || e.disconnect(), window.removeEventListener("resize", p), (u = window.visualViewport) == null || u.removeEventListener("resize", p);
|
|
115
118
|
};
|
|
116
119
|
}, [a, d, p, r]), B.length === 0)
|
|
117
120
|
return null;
|
|
118
|
-
const
|
|
119
|
-
return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, "data-adaptive": a ? !0 : void 0, className:
|
|
120
|
-
a && /* @__PURE__ */ G("div", { "aria-hidden": "true", className: f.measurement, ref:
|
|
121
|
+
const Q = a ? c.slice(0, F) : c, V = a ? c.slice(F) : [];
|
|
122
|
+
return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, "data-adaptive": a ? !0 : void 0, className: ne(f.controls, ge[r], a && f.adaptive, i), ref: l, ...S, children: [
|
|
123
|
+
a && /* @__PURE__ */ G("div", { "aria-hidden": "true", className: f.measurement, ref: z, children: [
|
|
121
124
|
c.map((e, s) => P(e, {
|
|
122
125
|
"aria-hidden": !0,
|
|
123
126
|
id: void 0,
|
|
@@ -126,14 +129,14 @@ const h = (d, i) => {
|
|
|
126
129
|
ref: void 0,
|
|
127
130
|
tabIndex: -1
|
|
128
131
|
})),
|
|
129
|
-
/* @__PURE__ */ v(
|
|
132
|
+
/* @__PURE__ */ v($, { triggerAccessibleLabel: o, children: null })
|
|
130
133
|
] }),
|
|
131
|
-
r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref:
|
|
132
|
-
|
|
133
|
-
|
|
134
|
+
r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref: M, children: W }),
|
|
135
|
+
Q,
|
|
136
|
+
V.length > 0 && /* @__PURE__ */ v("span", { className: f["overflow-trigger"], children: /* @__PURE__ */ v(ve, { buttons: V, menuAccessibleLabel: o, triggerAccessibleLabel: o }) })
|
|
134
137
|
] });
|
|
135
138
|
};
|
|
136
139
|
export {
|
|
137
|
-
|
|
140
|
+
Me as Controls
|
|
138
141
|
};
|
|
139
142
|
//# sourceMappingURL=index.js.map
|
|
@@ -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: 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.intent === '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","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","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: 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.intent === '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 const buttonKeys = sortedButtons.map((button) => String(button.key)).join('\\n');\n const [measuredButtonKeys, setMeasuredButtonKeys] = useState(buttonKeys);\n\n if (measuredButtonKeys !== buttonKeys) {\n setMeasuredButtonKeys(buttonKeys);\n setVisibleButtonCount(visibleButtonLimit);\n }\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","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","intent","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","buttonKeys","join","measuredButtonKeys","setMeasuredButtonKeys","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,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index40.css');const l=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),a=require("react"),F=require("../button/index.cjs"),de=require("../../icons-Dv_p0bUF.cjs"),X=require("../../index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index40.css');const l=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),a=require("react"),F=require("../button/index.cjs"),de=require("../../icons-Dv_p0bUF.cjs"),X=require("../../index-DWDp66fp.cjs"),pe=require("../list/index.cjs"),V=require("../../index-Bt7vnwji.cjs");function L(t){return typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(L).join(" "):a.isValidElement(t)?L(t.props.children):""}function fe(t){return a.isValidElement(t)&&t.type==="option"}function me(t){return a.isValidElement(t)&&t.type==="optgroup"}function he(t){return a.isValidElement(t)&&t.type===a.Fragment}function _e(t){return a.isValidElement(t)&&t.type===V.Select}function M(t,i,s=!1){const r=[];return a.Children.forEach(t,n=>{if(he(n))r.push(...M(n.props.children,i,s));else if(fe(n)){const c=L(n.props.children).trim(),f=n.props.value!=null?String(n.props.value):c;r.push({disabled:s||!!n.props.disabled,groupLabel:i,hidden:!!n.props.hidden,isPlaceholder:!!(n.props.hidden&&f===""),label:n.props.children,selected:!!n.props.selected,text:c,value:f})}else me(n)&&r.push(...M(n.props.children,n.props.label,s||!!n.props.disabled))}),r}function ge(t){const i=t.trim();if(!i)return null;const r=[.../[*?]/.test(i)?i:`*${i}*`].map(n=>n==="*"?".*":n==="?"?".":n.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${r}$`,"i")}function xe(t,i){const s=ge(i),r=t.filter(n=>!n.hidden&&!n.isPlaceholder);return s?r.filter(n=>s.test([n.groupLabel,n.text,n.value].filter(Boolean).join(" "))):r}function be(t,i){return t.find(s=>s.value===i)??t.find(s=>s.isPlaceholder)??t[0]}function je(t,i,s){var r,n;return i!=null?String(i):s!=null?String(s):((r=t.find(c=>c.selected))==null?void 0:r.value)??((n=t[0])==null?void 0:n.value)??""}function ve(t){if(_e(t)){const{children:i,placeholder:s,...r}=t.props;return{children:l.jsxs(l.Fragment,{children:[s&&l.jsx("option",{hidden:!0,value:"",children:s}),i]}),props:r}}return{children:t.props.children,props:t.props}}const ye="_combobox_ej99h_3",we="_dropdown_ej99h_27",Se="_empty_ej99h_32",Ne="_group_ej99h_33",Ce="_placeholder_ej99h_34",Ee="_filter_ej99h_42",Ve="_native_ej99h_52",Le="_option_ej99h_62",Re="_options_ej99h_83",$e="_panel_ej99h_107",Be="_selected_ej99h_132",Ie="_text_ej99h_136",qe="_trigger_ej99h_144",De="_minimal_ej99h_181",Pe="_inline_ej99h_240",ke="_label_ej99h_272",o={combobox:ye,"combobox-input":"_combobox-input_ej99h_12",dropdown:we,empty:Se,group:Ne,placeholder:Ce,filter:Ee,native:Ve,option:Le,options:Re,panel:$e,selected:Be,text:Ie,trigger:qe,minimal:De,inline:Pe,label:ke,"inline-field":"_inline-field_ej99h_278"};function Y(t,i){return{"--icon-svg":de.iconSVG(t,i)}}const Fe=({children:t,className:i,combobox:s=!1,createOption:r,emptyLabel:n="No matches found",label:c,renderOption:f,searchPlaceholder:R="Filter",selectedItems:Z,variant:g="default",...ee})=>{const $=ve(t),{defaultValue:te,onChange:B,value:I,...ne}=$.props,v=V.sanitizeSelectProps(ne),{className:se,...re}=v,W=a.useRef(null),G=a.useRef(null),y=a.useId(),Q=a.useRef(null),m=a.useRef(null),x=M($.children),b=I!=null,q=je(x,I,te),[D,P]=a.useState(()=>q),[u,p]=a.useState(!1),[w,S]=a.useState(""),N=b?String(I):D,z={default:V.resolveColor("--colors-semantic-content-secondary"),white:V.resolveColor("--color-white","white")},O=g==="minimal"?z.white:z.default,C=be(x,N),le=Y("CaretDown",O),oe=Y("MagnifyingGlass",O),T=xe(x,w),h=w.trim(),E=!!(s&&r&&h&&r.isValid(h)),ie=c&&g==="inline"?X.formatInlineLabel(c):c,A=e=>e?(f==null?void 0:f({groupLabel:e.groupLabel,isSelected:e.value===N,label:e.label,text:e.text,value:e.value}))??e.label:"Select an option";a.useEffect(()=>{!b&&!x.some(e=>e.value===D)&&P(q)},[q,D,b,x]),a.useEffect(()=>{var e;if(!u){S("");return}(e=m.current)==null||e.focus()},[u]),a.useEffect(()=>{if(!u)return;const e=d=>{var _;(_=G.current)!=null&&_.contains(d.target)||p(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[u]);const ae=e=>{b||P(e.target.value),B==null||B(e)},k=()=>{var e;p(!1),s||(e=W.current)==null||e.focus()},K=()=>{var e;S(""),p(!0),(e=m.current)==null||e.focus()},H=()=>{!r||!E||(r.onCreate(h),K())},ce=e=>{var U;b||P(e);const d=Q.current;if(!d){k();return}const _=(U=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:U.set;_==null||_.call(d,e),d.dispatchEvent(new Event("change",{bubbles:!0})),s?K():k()},ue=e=>{e.key==="Escape"&&k(),e.key==="Enter"&&e.target===m.current&&E&&(e.preventDefault(),H())},J=l.jsxs("div",{className:j.t(o.dropdown,g==="inline"&&o.inline,g==="minimal"&&o.minimal,i),onKeyDown:ue,ref:G,...ee,children:[l.jsx("select",{...re,"aria-hidden":"true",className:j.t(o.native,se),onChange:ae,ref:Q,tabIndex:-1,value:N,children:$.children}),s?l.jsxs("div",{className:o.combobox,onClick:()=>{var e;return(e=m.current)==null?void 0:e.focus()},children:[Z,l.jsx("input",{"aria-autocomplete":"list","aria-expanded":u,"aria-label":v["aria-label"]??c??R,className:o["combobox-input"],disabled:v.disabled,onChange:e=>{S(e.target.value),p(!0)},onClick:()=>p(!0),onFocus:()=>p(!0),placeholder:R||void 0,ref:m,role:"combobox",type:"text",value:w})]}):l.jsx(F.Button,{"aria-expanded":u,"aria-haspopup":"dialog","aria-labelledby":c?`${y} ${y}-value`:void 0,className:j.t(o.trigger,(C==null?void 0:C.isPlaceholder)&&o.placeholder),"data-open":u?"true":void 0,disabled:v.disabled,onClick:()=>p(e=>!e),ref:W,style:le,variant:"simple",children:l.jsx("span",{className:o.text,id:`${y}-value`,children:A(C)})}),u&&l.jsxs("div",{className:o.panel,children:[!s&&l.jsx(X.Input,{"aria-label":"Filter",className:o.filter,icon:"MagnifyingGlass",onChange:e=>S(e.target.value),placeholder:R,ref:m,style:oe,type:"search",value:w}),l.jsxs(pe.List,{"aria-label":"Dropdown",className:o.options,children:[T.map(e=>{const d=e.value===N;return l.jsx("li",{"data-component":"dropdown",children:l.jsxs(F.Button,{"aria-label":d?`${e.text}, selected`:e.text,className:j.t(o.option,d&&o.selected),disabled:e.disabled,onClick:()=>ce(e.value),variant:"tertiary",children:[l.jsx("span",{className:o.text,children:A(e)}),e.groupLabel&&l.jsx("small",{className:o.group,children:e.groupLabel})]})},`${e.groupLabel??"root"}-${e.value}`)}),E&&r&&l.jsx("li",{children:l.jsx(F.Button,{"aria-label":L(r.render(h))||h,className:o.option,onClick:H,variant:"tertiary",children:l.jsx("span",{className:o.text,children:r.render(h)})})}),T.length===0&&!E&&l.jsx("li",{className:o.empty,children:n})]})]})]});return c?l.jsxs("div",{className:j.t(o.label,g==="inline"&&o["inline-field"]),"data-component":"dropdown",children:[l.jsx("span",{id:y,children:ie}),J]}):J};exports.Dropdown=Fe;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -3,7 +3,7 @@ import { t as y } from "../../classix-DG18itHa.js";
|
|
|
3
3
|
import he, { Children as _e, isValidElement as x, useRef as I, useId as ge, useState as W, useEffect as G } from "react";
|
|
4
4
|
import { Button as Q } from "../button/index.js";
|
|
5
5
|
import { i as be } from "../../icons-dUP7sKyt.js";
|
|
6
|
-
import { f as ve, I as ye } from "../../index-
|
|
6
|
+
import { f as ve, I as ye } from "../../index-Ds-Ocs4L.js";
|
|
7
7
|
import { List as xe } from "../list/index.js";
|
|
8
8
|
import { S as we, s as je, r as ee } from "../../index-BLb3JiCr.js";
|
|
9
9
|
import '../../assets/index40.css';function L(t) {
|