@reapit/elements 5.0.0-beta.61 → 5.0.0-beta.62

package/dist/js/lab/select-custom.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),v=require("../label-text-CtdGurHG.cjs"),p=require("../index-Dmlb2--K.cjs");require("../button-base-tw0zLUCC.cjs");const u=require("react"),te=require("../button-Ccwmxlgv.cjs"),le=require("../icons/check.cjs"),oe=require("../badge-Zx--ZLW_.cjs"),L=require("../text-BONwaftt.cjs"),se=require("../icons/close.cjs"),ne=require("../icons/chevron-down.cjs"),T=require("../chip-group-CMOQNhYo.cjs"),_=require("../popover-CbOEj92d.cjs"),k=p.styled_default("div")({name:"ElExperimentalSelectCustomContainer",class:"el-experimental-select-custom-container",propsAsIs:!1}),re=()=>te.Button,G=p.styled_default(re())({name:"ElExperimentalSelectCustomInputField",class:"el-experimental-select-custom-input-field",propsAsIs:!0}),z=p.styled_default("div")({name:"ElExperimentalSelectCustomContent",class:"el-experimental-select-custom-content",propsAsIs:!1}),B=p.styled_default("div")({name:"ElExperimentalSelectCustomPlaceholder",class:"el-experimental-select-custom-placeholder",propsAsIs:!1}),D="el-experimental-select-custom-popover",R=p.styled_default("div")({name:"ElExperimentalSelectCustomOptionGroup",class:"el-experimental-select-custom-option-group",propsAsIs:!1}),ce="el-experimental-select-custom-group-title",V=p.styled_default("li")({name:"ElExperimentalSelectCustomOption",class:"el-experimental-select-custom-option",propsAsIs:!1}),W=p.styled_default("div")({name:"ElExperimentalSelectCustomLabelContainer",class:"el-experimental-select-custom-label-container",propsAsIs:!1}),F=p.styled_default("div")({name:"ElExperimentalSelectCustomLabelItem",class:"el-experimental-select-custom-label-item",propsAsIs:!1}),$=p.styled_default("div")({name:"ElExperimentalSelectCustomAdditionalInfo1",class:"el-experimental-select-custom-additional-info1",propsAsIs:!1}),K=p.styled_default("div")({name:"ElExperimentalSelectCustomAdditionalInfo2",class:"el-experimental-select-custom-additional-info2",propsAsIs:!1}),h=({label:n,children:c})=>l.jsxs(R,{role:"group",children:[n&&l.jsx(v.LabelText,{size:"xs",children:n}),c]}),N=u.createContext({selectedValues:[],onSelect:()=>{},isMultiple:!1});function ae(){return u.useContext(N)}const y=({value:n,label:c,badge:s,additionalInfo1:o,additionalInfo2:e})=>{const{selectedValues:r,onSelect:t}=ae(),i=r.some(E=>E.value===n),d=()=>t({value:n,label:c});return l.jsxs(V,{role:"option","aria-selected":i,tabIndex:-1,onClick:d,children:[l.jsxs(W,{children:[l.jsxs(F,{children:[l.jsx(v.LabelText,{size:"xs",children:c}),s&&l.jsx(oe.Badge,{colour:"neutral",children:s})]}),i&&l.jsx(le.CheckIcon,{size:"md",color:"secondary"})]}),o&&l.jsx($,{children:o}),e&&l.jsx(K,{children:e})]})},H=n=>{const c=u.useRef(null),[s,o]=u.useState(0);return u.useEffect(()=>{const e=c.current;if(!e)return;const r=t=>{const i=e.querySelectorAll('[role="option"]');i.length&&(t.key==="ArrowDown"?(t.preventDefault(),o(d=>(d+1)%i.length)):t.key==="ArrowUp"?(t.preventDefault(),o(d=>(d-1+i.length)%i.length)):t.key==="Enter"?(t.preventDefault(),i[s]?.click()):t.key==="Escape"&&(t.preventDefault(),document.getElementById(n)?.hidePopover?.()))};return e.addEventListener("keydown",r),()=>e.removeEventListener("keydown",r)},[s,n]),u.useEffect(()=>{const e=c.current;if(!e)return;const r=e.querySelectorAll('[role="option"]');r.forEach((t,i)=>{t.setAttribute("tabindex",i===s?"0":"-1")}),r[s]?.focus()},[s]),u.useEffect(()=>{const e=document.getElementById(n);if(!e)return;const r=new MutationObserver(()=>{if(e.matches(":popover-open")){const t=c.current?.querySelectorAll('[role="option"]');t&&t.length>0&&(o(0),t[0].focus())}});return r.observe(e,{attributes:!0,attributeFilter:["popover"]}),()=>r.disconnect()},[n]),c},ie=(n,c)=>{const s=[],o=e=>{if(e){if(Array.isArray(e))e.forEach(o);else if(typeof e=="object"&&"props"in e){const r=e.props;e.type===y&&r.selected&&s.push({value:r.value,label:r.label}),e.type===h&&o(r.children)}}};return o(n),!c&&s.length>1?[s[0]]:s},ue=n=>{let c=0;const s=o=>{if(o){if(Array.isArray(o))o.forEach(s);else if(typeof o=="object"&&"props"in o){const e=o.props;o.type===y&&(c+=1),o.type===h&&s(e.children)}}};return s(n),c};function I({id:n,size:c="medium",label:s,children:o,helperText:e,errorMessage:r,isMultiple:t=!1,isClearable:i=!1,isRequired:d=!1,isDisabled:E=!1,popoverMaxHeight:U,popoverPlacement:J}){const[x,j]=u.useState(()=>ie(o,t)),[Q,X]=u.useState(0),C=`select-popover-${n.replace(/\s+/g,"-").toLowerCase()}`,S=`select-input-${n.replace(/\s+/g,"-").toLowerCase()}`,Y=H(C),A=()=>{document.getElementById(C)?.hidePopover?.()},O=a=>{j(m=>t?m.find(f=>f.value===a.value)?m.filter(f=>f.value!==a.value):[...m,a]:[a]),t||A()},Z=()=>j([]),q=t?"":x[0]?.label||"",M=_.Popover.getTriggerProps({id:S,popoverTarget:C,popoverTargetAction:"toggle"}),P=`${n}-description`,b=r||e,w=!!r,ee=ue(o),g=t&&x.length>=ee;return u.useEffect(()=>{g&&A()},[g]),u.useEffect(()=>{const a=document.getElementById(S);if(!a)return;const m=()=>X(a.offsetWidth);m();const f=new ResizeObserver(m);return f.observe(a),()=>f.disconnect()},[S]),l.jsxs(k,{id:n,children:[s&&l.jsx(v.LabelText,{size:c==="large"?"sm":"xs",isRequired:d,children:s}),l.jsxs(G,{variant:"secondary",size:c,...M,type:"button",role:"combobox","aria-expanded":"false","aria-disabled":E||g,"aria-describedby":b?P:void 0,"aria-invalid":w||!1,children:[q?l.jsx(z,{children:l.jsx(L.Text,{as:"span",colour:"primary",font:"text-xs/regular",overflow:"truncate",children:q})}):l.jsx(B,{children:l.jsx(L.Text,{as:"span",colour:"placeholder",font:"text-xs/regular",overflow:"truncate",children:"Select an option"})}),i&&!t&&x.length>0?l.jsx(se.CloseIcon,{color:"primary",size:"sm",onClick:a=>{a.stopPropagation(),Z()}}):l.jsx(ne.ChevronDownIcon,{size:"sm",color:"primary"})]}),l.jsx(_.Popover,{id:C,anchorId:S,placement:J||"bottom-start",popover:"auto",className:D,maxHeight:U,style:{minWidth:Q},gap:"var(--spacing-1)",children:l.jsx(N.Provider,{value:{selectedValues:x,onSelect:O,isMultiple:t},children:l.jsx("ul",{role:"listbox",ref:Y,tabIndex:-1,children:o})})}),b&&l.jsx(v.LabelText,{id:P,size:"xs","data-error":!!w,children:b}),t&&x.length>0&&l.jsx(T.ChipGroup,{children:x.map((a,m)=>l.jsx(T.ChipGroup.Item,{variant:"filter",onClick:()=>O(a),"aria-disabled":E,children:a.label},`${a.value}-${m}`))})]})}I.Group=h;I.Option=y;exports.ElExperimentalSelectCustomAdditionalInfo1=$;exports.ElExperimentalSelectCustomAdditionalInfo2=K;exports.ElExperimentalSelectCustomContainer=k;exports.ElExperimentalSelectCustomContent=z;exports.ElExperimentalSelectCustomInputField=G;exports.ElExperimentalSelectCustomLabelContainer=W;exports.ElExperimentalSelectCustomLabelItem=F;exports.ElExperimentalSelectCustomOption=V;exports.ElExperimentalSelectCustomOptionGroup=R;exports.ElExperimentalSelectCustomPlaceholder=B;exports.ExperimentalSelectCustomOption=y;exports.ExperimentalSelectCustomOptionGroup=h;exports.SelectCustom=I;exports.elExperimentalSelectCustomGroupTitle=ce;exports.elExperimentalSelectCustomPopover=D;exports.useSelectKeyboardNavigation=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),v=require("../label-text-CtdGurHG.cjs"),p=require("../index-Dmlb2--K.cjs");require("../button-base-tw0zLUCC.cjs");const u=require("react"),te=require("../button-Ccwmxlgv.cjs"),le=require("../icons/check.cjs"),oe=require("../badge-DZ7zeLug.cjs"),L=require("../text-BONwaftt.cjs"),se=require("../icons/close.cjs"),ne=require("../icons/chevron-down.cjs"),T=require("../chip-group-66bqmP7S.cjs"),_=require("../popover-CUAeSUdU.cjs"),k=p.styled_default("div")({name:"ElExperimentalSelectCustomContainer",class:"el-experimental-select-custom-container",propsAsIs:!1}),re=()=>te.Button,G=p.styled_default(re())({name:"ElExperimentalSelectCustomInputField",class:"el-experimental-select-custom-input-field",propsAsIs:!0}),z=p.styled_default("div")({name:"ElExperimentalSelectCustomContent",class:"el-experimental-select-custom-content",propsAsIs:!1}),B=p.styled_default("div")({name:"ElExperimentalSelectCustomPlaceholder",class:"el-experimental-select-custom-placeholder",propsAsIs:!1}),D="el-experimental-select-custom-popover",R=p.styled_default("div")({name:"ElExperimentalSelectCustomOptionGroup",class:"el-experimental-select-custom-option-group",propsAsIs:!1}),ce="el-experimental-select-custom-group-title",V=p.styled_default("li")({name:"ElExperimentalSelectCustomOption",class:"el-experimental-select-custom-option",propsAsIs:!1}),W=p.styled_default("div")({name:"ElExperimentalSelectCustomLabelContainer",class:"el-experimental-select-custom-label-container",propsAsIs:!1}),F=p.styled_default("div")({name:"ElExperimentalSelectCustomLabelItem",class:"el-experimental-select-custom-label-item",propsAsIs:!1}),$=p.styled_default("div")({name:"ElExperimentalSelectCustomAdditionalInfo1",class:"el-experimental-select-custom-additional-info1",propsAsIs:!1}),K=p.styled_default("div")({name:"ElExperimentalSelectCustomAdditionalInfo2",class:"el-experimental-select-custom-additional-info2",propsAsIs:!1}),h=({label:n,children:c})=>l.jsxs(R,{role:"group",children:[n&&l.jsx(v.LabelText,{size:"xs",children:n}),c]}),N=u.createContext({selectedValues:[],onSelect:()=>{},isMultiple:!1});function ae(){return u.useContext(N)}const y=({value:n,label:c,badge:s,additionalInfo1:o,additionalInfo2:e})=>{const{selectedValues:r,onSelect:t}=ae(),i=r.some(E=>E.value===n),d=()=>t({value:n,label:c});return l.jsxs(V,{role:"option","aria-selected":i,tabIndex:-1,onClick:d,children:[l.jsxs(W,{children:[l.jsxs(F,{children:[l.jsx(v.LabelText,{size:"xs",children:c}),s&&l.jsx(oe.Badge,{colour:"neutral",children:s})]}),i&&l.jsx(le.CheckIcon,{size:"md",color:"secondary"})]}),o&&l.jsx($,{children:o}),e&&l.jsx(K,{children:e})]})},H=n=>{const c=u.useRef(null),[s,o]=u.useState(0);return u.useEffect(()=>{const e=c.current;if(!e)return;const r=t=>{const i=e.querySelectorAll('[role="option"]');i.length&&(t.key==="ArrowDown"?(t.preventDefault(),o(d=>(d+1)%i.length)):t.key==="ArrowUp"?(t.preventDefault(),o(d=>(d-1+i.length)%i.length)):t.key==="Enter"?(t.preventDefault(),i[s]?.click()):t.key==="Escape"&&(t.preventDefault(),document.getElementById(n)?.hidePopover?.()))};return e.addEventListener("keydown",r),()=>e.removeEventListener("keydown",r)},[s,n]),u.useEffect(()=>{const e=c.current;if(!e)return;const r=e.querySelectorAll('[role="option"]');r.forEach((t,i)=>{t.setAttribute("tabindex",i===s?"0":"-1")}),r[s]?.focus()},[s]),u.useEffect(()=>{const e=document.getElementById(n);if(!e)return;const r=new MutationObserver(()=>{if(e.matches(":popover-open")){const t=c.current?.querySelectorAll('[role="option"]');t&&t.length>0&&(o(0),t[0].focus())}});return r.observe(e,{attributes:!0,attributeFilter:["popover"]}),()=>r.disconnect()},[n]),c},ie=(n,c)=>{const s=[],o=e=>{if(e){if(Array.isArray(e))e.forEach(o);else if(typeof e=="object"&&"props"in e){const r=e.props;e.type===y&&r.selected&&s.push({value:r.value,label:r.label}),e.type===h&&o(r.children)}}};return o(n),!c&&s.length>1?[s[0]]:s},ue=n=>{let c=0;const s=o=>{if(o){if(Array.isArray(o))o.forEach(s);else if(typeof o=="object"&&"props"in o){const e=o.props;o.type===y&&(c+=1),o.type===h&&s(e.children)}}};return s(n),c};function I({id:n,size:c="medium",label:s,children:o,helperText:e,errorMessage:r,isMultiple:t=!1,isClearable:i=!1,isRequired:d=!1,isDisabled:E=!1,popoverMaxHeight:U,popoverPlacement:J}){const[x,j]=u.useState(()=>ie(o,t)),[Q,X]=u.useState(0),C=`select-popover-${n.replace(/\s+/g,"-").toLowerCase()}`,S=`select-input-${n.replace(/\s+/g,"-").toLowerCase()}`,Y=H(C),A=()=>{document.getElementById(C)?.hidePopover?.()},O=a=>{j(m=>t?m.find(f=>f.value===a.value)?m.filter(f=>f.value!==a.value):[...m,a]:[a]),t||A()},Z=()=>j([]),q=t?"":x[0]?.label||"",M=_.Popover.getTriggerProps({id:S,popoverTarget:C,popoverTargetAction:"toggle"}),P=`${n}-description`,b=r||e,w=!!r,ee=ue(o),g=t&&x.length>=ee;return u.useEffect(()=>{g&&A()},[g]),u.useEffect(()=>{const a=document.getElementById(S);if(!a)return;const m=()=>X(a.offsetWidth);m();const f=new ResizeObserver(m);return f.observe(a),()=>f.disconnect()},[S]),l.jsxs(k,{id:n,children:[s&&l.jsx(v.LabelText,{size:c==="large"?"sm":"xs",isRequired:d,children:s}),l.jsxs(G,{variant:"secondary",size:c,...M,type:"button",role:"combobox","aria-expanded":"false","aria-disabled":E||g,"aria-describedby":b?P:void 0,"aria-invalid":w||!1,children:[q?l.jsx(z,{children:l.jsx(L.Text,{as:"span",colour:"primary",font:"text-xs/regular",overflow:"truncate",children:q})}):l.jsx(B,{children:l.jsx(L.Text,{as:"span",colour:"placeholder",font:"text-xs/regular",overflow:"truncate",children:"Select an option"})}),i&&!t&&x.length>0?l.jsx(se.CloseIcon,{color:"primary",size:"sm",onClick:a=>{a.stopPropagation(),Z()}}):l.jsx(ne.ChevronDownIcon,{size:"sm",color:"primary"})]}),l.jsx(_.Popover,{id:C,anchorId:S,placement:J||"bottom-start",popover:"auto",className:D,maxHeight:U,style:{minWidth:Q},gap:"var(--spacing-1)",children:l.jsx(N.Provider,{value:{selectedValues:x,onSelect:O,isMultiple:t},children:l.jsx("ul",{role:"listbox",ref:Y,tabIndex:-1,children:o})})}),b&&l.jsx(v.LabelText,{id:P,size:"xs","data-error":!!w,children:b}),t&&x.length>0&&l.jsx(T.ChipGroup,{variant:"selection",children:x.map((a,m)=>l.jsx(T.ChipGroup.Item,{variant:"filter",onClick:()=>O(a),"aria-disabled":E,children:a.label},`${a.value}-${m}`))})]})}I.Group=h;I.Option=y;exports.ElExperimentalSelectCustomAdditionalInfo1=$;exports.ElExperimentalSelectCustomAdditionalInfo2=K;exports.ElExperimentalSelectCustomContainer=k;exports.ElExperimentalSelectCustomContent=z;exports.ElExperimentalSelectCustomInputField=G;exports.ElExperimentalSelectCustomLabelContainer=W;exports.ElExperimentalSelectCustomLabelItem=F;exports.ElExperimentalSelectCustomOption=V;exports.ElExperimentalSelectCustomOptionGroup=R;exports.ElExperimentalSelectCustomPlaceholder=B;exports.ExperimentalSelectCustomOption=y;exports.ExperimentalSelectCustomOptionGroup=h;exports.SelectCustom=I;exports.elExperimentalSelectCustomGroupTitle=ce;exports.elExperimentalSelectCustomPopover=D;exports.useSelectKeyboardNavigation=H;

package/dist/js/lab/select-custom.js

@@ -5,12 +5,12 @@ import "../button-base-BcnVjgNa.js";
 import { createContext as _, useContext as H, useRef as U, useState as b, useEffect as E } from "react";
 import { B as J } from "../button-DB4XETG9.js";
 import { CheckIcon as Q } from "../icons/check.js";
-import { B as X } from "../badge-BpKFyHEh.js";
+import { B as X } from "../badge-ntRw2gnO.js";
 import { T as z } from "../text-BblKKGdo.js";
 import { CloseIcon as Y } from "../icons/close.js";
 import { ChevronDownIcon as Z } from "../icons/chevron-down.js";
-import { C as T } from "../chip-group-_1Ujkr17.js";
-import { P as D } from "../popover-CBn3dqXl.js";
+import { C as T } from "../chip-group-Bbc7ODc9.js";
+import { P as D } from "../popover-CH-6Mc2I.js";
 const M = /* @__PURE__ */ p("div")({
   name: "ElExperimentalSelectCustomContainer",
   class: "el-experimental-select-custom-container",
@@ -212,7 +212,7 @@ function V({
       }
     ),
     g && /* @__PURE__ */ n(S, { id: L, size: "xs", "data-error": !!B, children: g }),
-    t && d.length > 0 && /* @__PURE__ */ n(T, { children: d.map((a, m) => /* @__PURE__ */ n(
+    t && d.length > 0 && /* @__PURE__ */ n(T, { variant: "selection", children: d.map((a, m) => /* @__PURE__ */ n(
       T.Item,
       {
         variant: "filter",

package/dist/js/listbox-WqmeAQ3c.cjs

@@ -0,0 +1 @@
+"use strict";const u=require("react/jsx-runtime"),Z=require("./divider-CGhRVA_A.cjs"),d=require("react"),ee=require("./index-Dmlb2--K.cjs"),te=require("./handle-arrow-navigation-CKkGc2A5.cjs"),M=require("./use-mutation-observer-BBugqUeF.cjs"),E=d.createContext(null);function C(){const e=d.useContext(E);if(!e)throw new Error("useListboxContext must be used within a Listbox");return e}class f extends Error{constructor(t){super(t),this.name="ListboxError",Error.captureStackTrace&&Error.captureStackTrace(this,f)}}function w(e){const t=document.getElementById(e);if(!t)throw new f(`Listbox with id "${e}" does not exist in the document`);const n=t.firstElementChild;if(!(n instanceof HTMLSelectElement))throw new f(`Listbox "${e}" does not contain a select element as its first child. Found: ${n?.constructor.name??"null"}`);return n}function ne(e,t){const n=Array.from(e.options).find(o=>o.value===t);if(!(n instanceof HTMLOptionElement)){const o=Array.from(e.options).map(s=>s.value).join(", ");throw new f(`Option with value "${t}" does not exist in select element. Available values: [${o}]`)}return n}function k(e){const t=new Event("input",{bubbles:!0,cancelable:!0});e.dispatchEvent(t)}function B(e){const t=w(e),n=t.selectedOptions.length>0;for(const o of Array.from(t.selectedOptions))o.selected=!1;n&&k(t)}function S(e){const t=e instanceof HTMLSelectElement?e:w(e);return Array.from(t.selectedOptions).map(n=>n.value).filter(n=>n!=="")}const h='button[role="option"]',T=`${h}:is([aria-checked="true"], [aria-selected="true"])`;function y(e){return Array.from(e.querySelectorAll(T)).filter(t=>t instanceof HTMLButtonElement&&t.value!=="")}function F(e,t,n){const o=w(e),s=ne(o,t),r=s.selected;s.selected=n(s.selected,o),r!==s.selected&&k(o)}function R(e){return`${e}-select`}const b=d.createContext(null);function m(){const e=d.useContext(b);if(!e)throw new Error("useListboxRenderContext must be used within a Listbox");return e}const oe={auto:(e,t)=>t.multiple?!e:!0,toggle:e=>!e,select:()=>!0};function se(e){return e==="auto"||e==="toggle"||e==="select"}function ie(e){const{listboxId:t,selectAction:n}=e.currentTarget.dataset,o=e.currentTarget.value;!t||typeof o!="string"||se(n)&&F(t,o,oe[n])}function j({as:e,children:t,disabled:n,onClick:o,value:s,...r}){const i=e||"button",l=C(),x=m(),a=l.selectValue.includes(s)||s===""&&l.selectValue.length===0;if(x==="native")return a?null:u.jsx("option",{value:s,children:t});const v=p=>{o?.(p),ie(p)};return u.jsx(i,{...r,"aria-checked":l.multiple?a:void 0,"aria-selected":l.multiple?void 0:a,"data-listbox-id":l.listboxId,"data-select-action":l.selectAction,disabled:l.disabled||n,onClick:v,role:"option",tabIndex:-1,type:"button",value:s,children:t})}j.displayName="Listbox.Option";function I({as:e,children:t,label:n,...o}){return m()==="native"?u.jsx("optgroup",{label:n,children:t}):u.jsx(e,{...o,label:n,role:"group",children:t})}I.displayName="Listbox.Optgroup";const re=ee.styled_default("select")({name:"ElListboxSelect",class:"el-listbox-select",propsAsIs:!1}),V=d.forwardRef(function({children:t,onChange:n,placeholder:o="Select an option",multiple:s,value:r,...i},l){return u.jsxs(re,{...i,hidden:!0,multiple:s,onChange:n,onInput:n,ref:l,value:s?r:r[0]??"",children:[!s&&u.jsx("option",{value:"",children:o}),r.map(x=>u.jsx("option",{value:x,children:x},x)),u.jsx(b.Provider,{value:"native",children:t})]})});function ce(e){const t=e.currentTarget;t.contains(e.relatedTarget)||(t.tabIndex=0)}function O(e){return e instanceof HTMLButtonElement}function le(e){return e instanceof HTMLElement&&e.matches(":focus-visible")}function ae(e){const t=e.currentTarget,n=t.dataset.selectionFollowsFocus==="true",{relatedTarget:o,target:s}=e;if(!le(s))return;const i=!t.contains(o);if(t.contains(o)&&O(s)&&O(o)&&n){s.click();return}if(i){t.tabIndex=-1;const x=t.querySelector(T);if(O(x)){x.focus();return}const a=t.querySelector(h);O(a)&&(a.focus(),n&&a.click())}}function q({onBlur:e,onFocus:t,onKeyDown:n}){return{onBlur:i=>{e?.(i),ce(i)},onFocus:i=>{t?.(i),ae(i)},onKeyDown:i=>{n?.(i),te.handleArrowNavigation(i,{selectors:h})}}}function N(e,t){const n=d.useRef(t);d.useEffect(function(){n.current=t},[t]);const o=d.useCallback(()=>{const s=document.getElementById(e);if(s){const r=S(e),i=y(s);n.current(i,r)}},[e]);d.useEffect(function(){o()},[]),M.useMutationObserver(e,o,ue),M.useMutationObserver(R(e),o,de)}const ue={attributeFilter:["aria-checked","aria-selected"],subtree:!0},de={childList:!0};function D({defaultValue:e,multiple:t,onChange:n,value:o}){const[s,r]=d.useState(o??e??[]),i=o??s;return[t?i:i.slice(0,1),a=>{n?.(a),r(S(a.currentTarget))}]}function c({"aria-disabled":e=!1,"aria-multiselectable":t=!1,"aria-orientation":n="vertical","aria-required":o=!1,as:s,children:r,className:i,defaultValue:l,id:x,name:a,onBlur:v,onChange:p,onFocus:H,onKeyDown:P,placeholder:$,selectAction:A="auto",selectRef:K,selectionFollowsFocus:_=!t,style:z,value:G,...J}){const Q=s??"div",U=d.useId(),L=x??U,[g,W]=D({defaultValue:l,multiple:t,onChange:p,value:G}),X=q({onBlur:v,onFocus:H,onKeyDown:P}),Y=d.useMemo(()=>({disabled:e,listboxId:L,multiple:t,selectAction:A,selectValue:g}),[e,L,t,A,g]);return u.jsx(Q,{...J,...X,"aria-disabled":e,"aria-multiselectable":t,"aria-orientation":n,"aria-required":o,"data-selection-follows-focus":_,className:i,id:L,role:"listbox",style:z,tabIndex:0,children:u.jsxs(E.Provider,{value:Y,children:[u.jsx(V,{disabled:e,id:R(L),multiple:t,name:a,onChange:W,placeholder:$,ref:K,required:o,value:g,children:r}),u.jsx(b.Provider,{value:"custom",children:r})]})})}c.Divider=Z.Divider;c.Option=j;c.Optgroup=I;c.Select=V;c.useSelectionObserver=N;c.Context=E;c.RenderContext=b;c.useContext=C;c.useRenderContext=m;c.clearValue=B;c.getSelectedOptions=y;c.getValue=S;c.setOptionSelectedState=F;exports.Listbox=c;exports.ListboxContext=E;exports.ListboxOptgroup=I;exports.ListboxOption=j;exports.ListboxRenderContext=b;exports.OPTION_SELECTOR=h;exports.SELECTED_OPTION_SELECTOR=T;exports.clearListboxValue=B;exports.getListboxSelectId=R;exports.getListboxSelectedOptions=y;exports.getListboxValue=S;exports.setListboxOptionSelectedState=F;exports.useFocusManagement=q;exports.useListboxContext=C;exports.useListboxRenderContext=m;exports.useListboxSelectionObserver=N;exports.useListboxState=D;

package/dist/js/listbox-z26X2kKG.js

@@ -0,0 +1,335 @@
+import { jsx as d, jsxs as T } from "react/jsx-runtime";
+import { D as Y } from "./divider-BoruTiNP.js";
+import { createContext as F, useContext as k, forwardRef as Z, useRef as ee, useEffect as w, useCallback as te, useState as ne, useId as oe, useMemo as se } from "react";
+import { s as re } from "./index-YtxCR-9e.js";
+import { h as ie } from "./handle-arrow-navigation-r7GKm-no.js";
+import { u as y } from "./use-mutation-observer-hOVGFYZQ.js";
+const L = F(null);
+function A() {
+  const e = k(L);
+  if (!e)
+    throw new Error("useListboxContext must be used within a Listbox");
+  return e;
+}
+class f extends Error {
+  constructor(t) {
+    super(t), this.name = "ListboxError", Error.captureStackTrace && Error.captureStackTrace(this, f);
+  }
+}
+function S(e) {
+  const t = document.getElementById(e);
+  if (!t)
+    throw new f(`Listbox with id "${e}" does not exist in the document`);
+  const n = t.firstElementChild;
+  if (!(n instanceof HTMLSelectElement))
+    throw new f(
+      `Listbox "${e}" does not contain a select element as its first child. Found: ${n?.constructor.name ?? "null"}`
+    );
+  return n;
+}
+function ce(e, t) {
+  const n = Array.from(e.options).find((o) => o.value === t);
+  if (!(n instanceof HTMLOptionElement)) {
+    const o = Array.from(e.options).map((s) => s.value).join(", ");
+    throw new f(
+      `Option with value "${t}" does not exist in select element. Available values: [${o}]`
+    );
+  }
+  return n;
+}
+function B(e) {
+  const t = new Event("input", { bubbles: !0, cancelable: !0 });
+  e.dispatchEvent(t);
+}
+function ae(e) {
+  const t = S(e), n = t.selectedOptions.length > 0;
+  for (const o of Array.from(t.selectedOptions))
+    o.selected = !1;
+  n && B(t);
+}
+function v(e) {
+  const t = e instanceof HTMLSelectElement ? e : S(e);
+  return Array.from(t.selectedOptions).map((n) => n.value).filter((n) => n !== "");
+}
+const O = 'button[role="option"]', I = `${O}:is([aria-checked="true"], [aria-selected="true"])`;
+function R(e) {
+  return Array.from(e.querySelectorAll(I)).filter(
+    // Need to exclude options with an empty value.
+    (t) => t instanceof HTMLButtonElement && t.value !== ""
+  );
+}
+function M(e, t, n) {
+  const o = S(e), s = ce(o, t), i = s.selected;
+  s.selected = n(s.selected, o), i !== s.selected && B(o);
+}
+function V(e) {
+  return `${e}-select`;
+}
+const m = F(null);
+function g() {
+  const e = k(m);
+  if (!e)
+    throw new Error("useListboxRenderContext must be used within a Listbox");
+  return e;
+}
+const le = {
+  auto: (e, t) => t.multiple ? !e : !0,
+  toggle: (e) => !e,
+  select: () => !0
+};
+function ue(e) {
+  return e === "auto" || e === "toggle" || e === "select";
+}
+function de(e) {
+  const { listboxId: t, selectAction: n } = e.currentTarget.dataset, o = e.currentTarget.value;
+  !t || typeof o != "string" || ue(n) && M(t, o, le[n]);
+}
+function D({
+  as: e,
+  children: t,
+  disabled: n,
+  onClick: o,
+  value: s,
+  ...i
+}) {
+  const r = e || "button", c = A(), u = g(), l = c.selectValue.includes(s) || s === "" && c.selectValue.length === 0;
+  if (u === "native")
+    return l ? null : /* @__PURE__ */ d("option", { value: s, children: t });
+  const h = (b) => {
+    o?.(b), de(b);
+  };
+  return /* @__PURE__ */ d(
+    r,
+    {
+      ...i,
+      "aria-checked": c.multiple ? l : void 0,
+      "aria-selected": c.multiple ? void 0 : l,
+      "data-listbox-id": c.listboxId,
+      "data-select-action": c.selectAction,
+      disabled: c.disabled || n,
+      onClick: h,
+      role: "option",
+      tabIndex: -1,
+      type: "button",
+      value: s,
+      children: t
+    }
+  );
+}
+D.displayName = "Listbox.Option";
+function H({ as: e, children: t, label: n, ...o }) {
+  return g() === "native" ? /* @__PURE__ */ d("optgroup", { label: n, children: t }) : /* @__PURE__ */ d(e, { ...o, label: n, role: "group", children: t });
+}
+H.displayName = "Listbox.Optgroup";
+const fe = /* @__PURE__ */ re("select")({
+  name: "ElListboxSelect",
+  class: "el-listbox-select",
+  propsAsIs: !1
+}), $ = Z(function({ children: t, onChange: n, placeholder: o = "Select an option", multiple: s, value: i, ...r }, c) {
+  return /* @__PURE__ */ T(
+    fe,
+    {
+      ...r,
+      hidden: !0,
+      multiple: s,
+      onChange: n,
+      onInput: n,
+      ref: c,
+      value: s ? i : i[0] ?? "",
+      children: [
+        !s && // In single-select mode, renders a placeholder option as the first option.
+        // This mimics native select behavior: automatically selecting the first option
+        // when no explicit value is specified.
+        /* @__PURE__ */ d("option", { value: "", children: o }),
+        i.map((u) => (
+          // Renders options for selected values automatically. Consumers may filter the options
+          // in `children` based on user input. Without this, the native select would lose
+          // <option> elements representing selected options, causing selection state loss.
+          /* @__PURE__ */ d("option", { value: u, children: u }, u)
+        )),
+        /* @__PURE__ */ d(m.Provider, { value: "native", children: t })
+      ]
+    }
+  );
+});
+function be(e) {
+  const t = e.currentTarget;
+  t.contains(e.relatedTarget) || (t.tabIndex = 0);
+}
+function p(e) {
+  return e instanceof HTMLButtonElement;
+}
+function xe(e) {
+  return e instanceof HTMLElement && e.matches(":focus-visible");
+}
+function pe(e) {
+  const t = e.currentTarget, n = t.dataset.selectionFollowsFocus === "true", { relatedTarget: o, target: s } = e;
+  if (!xe(s))
+    return;
+  const r = !t.contains(o);
+  if (t.contains(o) && p(s) && p(o) && n) {
+    s.click();
+    return;
+  }
+  if (r) {
+    t.tabIndex = -1;
+    const u = t.querySelector(I);
+    if (p(u)) {
+      u.focus();
+      return;
+    }
+    const l = t.querySelector(O);
+    p(l) && (l.focus(), n && l.click());
+  }
+}
+function me({
+  onBlur: e,
+  onFocus: t,
+  onKeyDown: n
+}) {
+  return {
+    onBlur: (r) => {
+      e?.(r), be(r);
+    },
+    onFocus: (r) => {
+      t?.(r), pe(r);
+    },
+    onKeyDown: (r) => {
+      n?.(r), ie(r, { selectors: O });
+    }
+  };
+}
+function he(e, t) {
+  const n = ee(t);
+  w(
+    function() {
+      n.current = t;
+    },
+    [t]
+  );
+  const o = te(() => {
+    const s = document.getElementById(e);
+    if (s) {
+      const i = v(e), r = R(s);
+      n.current(r, i);
+    }
+  }, [e]);
+  w(function() {
+    o();
+  }, []), y(e, o, Ee), y(V(e), o, Le);
+}
+const Ee = {
+  // Observe attribute changes
+  attributeFilter: ["aria-checked", "aria-selected"],
+  // Observe full subtree
+  subtree: !0
+}, Le = {
+  // Observe addition/removal of child elements (the native <option> elements)
+  childList: !0
+};
+function Se({
+  defaultValue: e,
+  multiple: t,
+  onChange: n,
+  value: o
+}) {
+  const [s, i] = ne(o ?? e ?? []), r = o ?? s;
+  return [t ? r : r.slice(0, 1), (l) => {
+    n?.(l), i(v(l.currentTarget));
+  }];
+}
+function a({
+  "aria-disabled": e = !1,
+  "aria-multiselectable": t = !1,
+  "aria-orientation": n = "vertical",
+  "aria-required": o = !1,
+  as: s,
+  children: i,
+  className: r,
+  defaultValue: c,
+  id: u,
+  name: l,
+  onBlur: h,
+  onChange: b,
+  onFocus: K,
+  onKeyDown: N,
+  placeholder: P,
+  selectAction: C = "auto",
+  selectRef: j,
+  selectionFollowsFocus: q = !t,
+  style: _,
+  value: z,
+  ...G
+}) {
+  const J = s ?? "div", Q = oe(), x = u ?? Q, [E, U] = Se({ defaultValue: c, multiple: t, onChange: b, value: z }), W = me({ onBlur: h, onFocus: K, onKeyDown: N }), X = se(
+    () => ({ disabled: e, listboxId: x, multiple: t, selectAction: C, selectValue: E }),
+    [e, x, t, C, E]
+  );
+  return /* @__PURE__ */ d(
+    J,
+    {
+      ...G,
+      ...W,
+      "aria-disabled": e,
+      "aria-multiselectable": t,
+      "aria-orientation": n,
+      "aria-required": o,
+      "data-selection-follows-focus": q,
+      className: r,
+      id: x,
+      role: "listbox",
+      style: _,
+      tabIndex: 0,
+      children: /* @__PURE__ */ T(L.Provider, { value: X, children: [
+        /* @__PURE__ */ d(
+          $,
+          {
+            disabled: e,
+            id: V(x),
+            multiple: t,
+            name: l,
+            onChange: U,
+            placeholder: P,
+            ref: j,
+            required: o,
+            value: E,
+            children: i
+          }
+        ),
+        /* @__PURE__ */ d(m.Provider, { value: "custom", children: i })
+      ] })
+    }
+  );
+}
+a.Divider = Y;
+a.Option = D;
+a.Optgroup = H;
+a.Select = $;
+a.useSelectionObserver = he;
+a.Context = L;
+a.RenderContext = m;
+a.useContext = A;
+a.useRenderContext = g;
+a.clearValue = ae;
+a.getSelectedOptions = R;
+a.getValue = v;
+a.setOptionSelectedState = M;
+export {
+  L,
+  O,
+  I as S,
+  R as a,
+  V as b,
+  ae as c,
+  a as d,
+  H as e,
+  D as f,
+  v as g,
+  m as h,
+  g as i,
+  me as j,
+  he as k,
+  Se as l,
+  M as s,
+  A as u
+};

package/dist/js/{menu-D9gFfy6f.js → menu-C1vGEA92.js}

@@ -2,8 +2,8 @@ import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import { c as y } from "./index-BsMVp4qF.js";
 import { s as t } from "./index-YtxCR-9e.js";
 import { useId as b, useCallback as g } from "react";
-import { P as h } from "./popover-CBn3dqXl.js";
-import { D as T } from "./divider-BoruTiNP.js";
+import { P as h } from "./popover-CH-6Mc2I.js";
+import { D as N } from "./divider-BoruTiNP.js";
 import { h as G } from "./handle-arrow-navigation-r7GKm-no.js";
 import { handleLinkActivation as L } from "./utils/keyboard-navigation.js";
 const $ = /* @__PURE__ */ t("div")({
@@ -15,12 +15,16 @@ const $ = /* @__PURE__ */ t("div")({
   class: "el-menu-group-label-container",
   propsAsIs: !1
 });
-function x({ "aria-label": e, children: n, label: s, role: i = "group", ...r }) {
+function x({ "aria-label": n, children: e, label: s, role: i = "group", ...r }) {
   const l = b();
-  return /* @__PURE__ */ f($, { ...r, "aria-label": e, "aria-labelledby": e ? void 0 : l, role: i, children: [
-    s && /* @__PURE__ */ a(D, { id: l, children: s }),
-    n
-  ] });
+  return (
+    // NOTE: we do not wire-up aria-labelledby when aria-label is provided. By default, aria-labelledby takes
+    // precedence. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label#:~:text=aria%2Dlabelledby%20will%20take%20precedence%20over%20aria%2Dlabel%20if%20both%20are%20applied
+    /* @__PURE__ */ f($, { ...r, "aria-label": n, "aria-labelledby": n ? void 0 : l, role: i, children: [
+      s && /* @__PURE__ */ a(D, { id: l, children: s }),
+      e
+    ] })
+  );
 }
 x.displayName = "Menu.Group";
 const j = "el-menu-item", A = /* @__PURE__ */ t("span")({
@@ -48,9 +52,9 @@ const j = "el-menu-item", A = /* @__PURE__ */ t("span")({
   class: "el-menu-item-supplementary-info",
   propsAsIs: !1
 });
-function v({
-  "aria-disabled": e,
-  as: n,
+function P({
+  "aria-disabled": n,
+  as: e,
   badge: s,
   className: i,
   children: r,
@@ -61,7 +65,7 @@ function v({
   supplementaryInfo: c,
   ...p
 }) {
-  const d = b(), E = b(), C = b(), N = g(
+  const d = b(), E = b(), C = b(), v = g(
     (I) => {
       if (I.currentTarget.getAttribute("aria-disabled") === "true") {
         I.preventDefault(), I.stopPropagation();
@@ -72,14 +76,14 @@ function v({
     [m]
   );
   return /* @__PURE__ */ f(
-    n,
+    e,
     {
       ...p,
       "aria-details": `${E} ${C}`,
-      "aria-disabled": !!p.disabled || !!e,
+      "aria-disabled": !!p.disabled || !!n,
       "aria-labelledby": d,
       className: y(j, i),
-      onClick: N,
+      onClick: v,
       role: M,
       children: [
         l && /* @__PURE__ */ a(A, { "aria-hidden": !0, children: l }),
@@ -95,35 +99,37 @@ function v({
     }
   );
 }
-function P(e) {
-  return /* @__PURE__ */ a(v, { as: "a", ...e });
+function T(n) {
+  return /* @__PURE__ */ a(P, { as: "a", ...n });
 }
-P.displayName = "Menu.AnchorItem";
-function k(e) {
-  return /* @__PURE__ */ a(v, { as: "button", ...e });
+T.displayName = "Menu.AnchorItem";
+function k(n) {
+  return /* @__PURE__ */ a(P, { as: "button", ...n });
 }
 k.displayName = "Menu.Item";
 const w = "el-menu";
-function F(e) {
+function F(n) {
   return g(
-    (n) => {
-      e?.(n), !n.defaultPrevented && n.target instanceof HTMLElement && // The event target may not be a child of the element with the `menuitem` role
-      (n.target.role === "menuitem" || n.target.closest('[role="menuitem"]') !== null) && n.currentTarget.hidePopover();
+    (e) => {
+      n?.(e), !e.defaultPrevented && // We only close if the click was initiated by the user; this helps us avoid closing the menu
+      // when the click was triggered by a programmatic action, such as element.click().
+      e.isTrusted && e.target instanceof HTMLElement && // Any target that is a menuitem, or a child of a menuitem, should close the menu
+      (e.target.role === "menuitem" || e.target.closest('[role="menuitem"]') !== null) && e.currentTarget.hidePopover();
     },
-    [e]
+    [n]
   );
 }
-function O(e) {
+function O(n) {
   return g(
-    (n) => {
-      e?.(n), !n.defaultPrevented && (L(n), G(n));
+    (e) => {
+      n?.(e), !e.defaultPrevented && (L(e), G(e));
     },
-    [e]
+    [n]
   );
 }
 function o({
-  "aria-labelledby": e,
-  children: n,
+  "aria-labelledby": n,
+  children: e,
   className: s,
   gap: i = "--spacing-1",
   maxHeight: r,
@@ -138,8 +144,8 @@ function o({
     h,
     {
       ...c,
-      "aria-labelledby": e,
-      anchorId: e,
+      "aria-labelledby": n,
+      anchorId: n,
       className: y(w, s),
       elevation: "xl",
       gap: `var(${i})`,
@@ -151,23 +157,23 @@ function o({
       positionTryFallbacks: "flip-block, flip-inline",
       popover: "auto",
       role: "menu",
-      children: n
+      children: e
     }
   );
 }
-o.AnchorItem = P;
-o.Divider = T;
+o.AnchorItem = T;
+o.Divider = N;
 o.Group = x;
 o.Item = k;
 o.getClosestMenuElement = h.getClosestPopoverElement;
 o.getTriggerProps = h.getTriggerProps;
 export {
-  P as A,
+  T as A,
   $ as E,
   x as M,
   D as a,
   k as b,
-  v as c,
+  P as c,
   A as d,
   j as e,
   B as f,

package/dist/js/menu-GxHkUuv-.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),j=require("./index-8ctufnBx.cjs"),a=require("./index-Dmlb2--K.cjs"),r=require("react"),g=require("./popover-CUAeSUdU.cjs"),B=require("./divider-CGhRVA_A.cjs"),D=require("./handle-arrow-navigation-CKkGc2A5.cjs"),S=require("./utils/keyboard-navigation.cjs"),v=a.styled_default("div")({name:"ElMenuGroup",class:"el-menu-group",propsAsIs:!1}),_=a.styled_default("div")({name:"ElMenuGroupLabelContainer",class:"el-menu-group-label-container",propsAsIs:!1});function E({"aria-label":n,children:e,label:l,role:i="group",...o}){const s=r.useId();return t.jsxs(v,{...o,"aria-label":n,"aria-labelledby":n?void 0:s,role:i,children:[l&&t.jsx(_,{id:s,children:l}),e]})}E.displayName="Menu.Group";const k="el-menu-item",b=a.styled_default("span")({name:"ElMenuItemIconContainer",class:"el-menu-item-icon-container",propsAsIs:!1}),G=a.styled_default("span")({name:"ElMenuItemContentContainer",class:"el-menu-item-content-container",propsAsIs:!1}),N=a.styled_default("span")({name:"ElMenuItemLabel",class:"el-menu-item-label",propsAsIs:!1}),P=a.styled_default("span")({name:"ElMenuItemLabelText",class:"el-menu-item-label-text",propsAsIs:!1}),T=a.styled_default("span")({name:"ElMenuItemBadgeContainer",class:"el-menu-item-badge-container",propsAsIs:!1}),q=a.styled_default("span")({name:"ElMenuItemSupplementaryInfo",class:"el-menu-item-supplementary-info",propsAsIs:!1});function x({"aria-disabled":n,as:e,badge:l,className:i,children:o,iconLeft:s,iconRight:d,onClick:c,role:f="menuitem",supplementaryInfo:m,...p}){const I=r.useId(),y=r.useId(),A=r.useId(),$=r.useCallback(M=>{if(M.currentTarget.getAttribute("aria-disabled")==="true"){M.preventDefault(),M.stopPropagation();return}c?.(M)},[c]);return t.jsxs(e,{...p,"aria-details":`${y} ${A}`,"aria-disabled":!!p.disabled||!!n,"aria-labelledby":I,className:j.cx_default(k,i),onClick:$,role:f,children:[s&&t.jsx(b,{"aria-hidden":!0,children:s}),t.jsxs(G,{children:[t.jsxs(N,{children:[o&&t.jsx(P,{id:I,children:o}),l&&t.jsx(T,{id:y,children:l})]}),m&&t.jsx(q,{id:A,children:m})]}),d&&t.jsx(b,{"aria-hidden":!0,children:d})]})}function C(n){return t.jsx(x,{as:"a",...n})}C.displayName="Menu.AnchorItem";function h(n){return t.jsx(x,{as:"button",...n})}h.displayName="Menu.Item";const L="el-menu";function w(n){return r.useCallback(e=>{n?.(e),!e.defaultPrevented&&e.isTrusted&&e.target instanceof HTMLElement&&(e.target.role==="menuitem"||e.target.closest('[role="menuitem"]')!==null)&&e.currentTarget.hidePopover()},[n])}function H(n){return r.useCallback(e=>{n?.(e),!e.defaultPrevented&&(S.handleLinkActivation(e),D.handleArrowNavigation(e))},[n])}function u({"aria-labelledby":n,children:e,className:l,gap:i="--spacing-1",maxHeight:o,maxWidth:s,onClick:d,onKeyDown:c,placement:f="top-start",...m}){const p=w(d),I=H(c);return t.jsx(g.Popover,{...m,"aria-labelledby":n,anchorId:n,className:j.cx_default(L,l),elevation:"xl",gap:`var(${i})`,maxHeight:`var(${o})`,maxWidth:`var(${s})`,onClick:p,onKeyDown:I,placement:f,positionTryFallbacks:"flip-block, flip-inline",popover:"auto",role:"menu",children:e})}u.AnchorItem=C;u.Divider=B.Divider;u.Group=E;u.Item=h;u.getClosestMenuElement=g.Popover.getClosestPopoverElement;u.getTriggerProps=g.Popover.getTriggerProps;exports.AnchorMenuItem=C;exports.ElMenuGroup=v;exports.ElMenuGroupLabelContainer=_;exports.ElMenuItemBadgeContainer=T;exports.ElMenuItemContentContainer=G;exports.ElMenuItemIconContainer=b;exports.ElMenuItemLabel=N;exports.ElMenuItemLabelText=P;exports.ElMenuItemSupplementaryInfo=q;exports.Menu=u;exports.MenuGroup=E;exports.MenuItem=h;exports.MenuItemBase=x;exports.elMenu=L;exports.elMenuItem=k;