@equisoft/design-elements-react 6.1.3-snapshot.20240402152600 → 6.1.3-snapshot.20240402190653

package/dist/bundle.js

@@ -1399,30 +1399,30 @@
     `}
 `,_=u.default.li`
     align-items: center;
-    color: ${({disabled:e,theme:t})=>e?t.component["listbox-item-disabled-text-color"]:t.component["listbox-item-text-color"]};
+    color: ${({$disabled:e,theme:t})=>e?t.component["listbox-item-disabled-text-color"]:t.component["listbox-item-text-color"]};
     display: flex;
-    font-size: ${({isMobile:e})=>e?"1rem":"0.875rem"};
-    font-weight: ${({selected:e})=>e?"var(--font-semi-bold)":"var(--font-normal)"};
+    font-size: ${({$isMobile:e})=>e?"1rem":"0.875rem"};
+    font-weight: ${({$selected:e})=>e?"var(--font-semi-bold)":"var(--font-normal)"};
     line-height: var(--size-1halfx);
     min-height: var(--size-1halfx);
     padding: var(--spacing-half) var(--spacing-2x);
 
-    ${({isMobile:e})=>!e&&u.css`
+    ${({$isMobile:e})=>!e&&u.css`
         padding-right: var(--spacing-1x);
     `}
 
     user-select: none;
 
     &:hover {
-        background-color: ${({theme:e,disabled:t})=>t?e.component["listbox-item-hover-disabled-background-color"]:e.component["listbox-item-hover-background-color"]};
+        background-color: ${({theme:e,$disabled:t})=>t?e.component["listbox-item-hover-disabled-background-color"]:e.component["listbox-item-hover-background-color"]};
     }
 
-    ${({focused:e,disabled:t,theme:n})=>e&&u.css`
+    ${({$focused:e,$disabled:t,theme:n})=>e&&u.css`
         outline: 2px solid ${t?n.component["listbox-item-disabled-focus-outline-color"]:n.component["listbox-item-focus-outline-color"]};
         outline-offset: -2px;
     `}
 
-    ${({selected:e})=>e&&u.css`
+    ${({$selected:e})=>e&&u.css`
         & ${M} {
             background-color: ${({theme:e})=>e.component["listbox-item-selected-background-color"]};
             border: 1px solid ${({theme:e})=>e.component["listbox-item-selected-border-color"]};
@@ -1432,10 +1432,10 @@
     display: flex;
     flex-direction: column;
 `,E=u.default.span`
-    color: ${({disabled:e,theme:t})=>e?t.component["listbox-item-caption-disabled-text-color"]:t.component["listbox-item-caption-text-color"]};
+    color: ${({$disabled:e,theme:t})=>e?t.component["listbox-item-caption-disabled-text-color"]:t.component["listbox-item-caption-text-color"]};
     display: block;
-    font-size: ${({isMobile:e})=>e?"0.875rem":"0.75rem"};
-`,x=e=>!e.disabled;t.Listbox=(0,l.forwardRef)((({ariaLabelledBy:e,id:t,className:n,defaultValue:a,focusable:r=!0,focusedValue:i,multiselect:u=!1,options:s,onChange:c,onFocusChange:C,onKeyDown:S,onOptionClick:P,value:O},L)=>{const T=(0,m.useId)(t),{isMobile:H}=(0,d.useDeviceContext)(),V=(0,l.useRef)(null),q=(0,l.useRef)(new Map),D=(0,l.useCallback)((e=>s.filter((t=>Array.isArray(e)?e.includes(t.value):t.value===e))),[s]),{selectedElement:j,setSelectedElement:A,selectPrevious:F,selectNext:R,selectFirst:I,selectLast:z}=(0,p.useListCursor)({elements:s,initialElement:D(i)[0],predicate:x}),[W,N]=(0,l.useState)((()=>D(null!=O?O:a)));function B(e){return u?W.includes(e):W[0]===e}function $(e){return e===j}function Y(e){W.includes(e)||(N([e]),null==c||c(e))}function U(e){const t=(0,g.unique)([...W,...e.filter(x)]);N(t),null==c||c(t)}function K(e,t){const n=!W.includes(e)||t?(0,g.unique)([...W,e]):W.filter((t=>t!==e));N(n),null==c||c(n)}const{scrollIntoView:X}=(0,f.useScrollIntoView)({container:V}),G=(0,l.useCallback)(((e,t=!1)=>{if(e){const n=q.current.get(e.value);n&&X(n,t)}}),[X]);(0,l.useLayoutEffect)((()=>{j&&G(j)}),[j,s,G]),(0,l.useLayoutEffect)((()=>{const e=D(null!=i?i:a);e.length>0&&G(e[0],!0)}),[a,i,D,G]);const[Q,J]=(0,l.useState)(i);if(i!==Q){const e=D(i)[0];A(e),J(i)}const[Z,ee]=(0,l.useState)(O);O!==Z&&(N(D(O)),ee(O));let te=!1;function ne(){te=!0,document.addEventListener("mouseup",(()=>{te=!1}),{once:!0})}function ae(e){return()=>{null==P||P(e),x(e)&&(e!==j&&(A(e),null==C||C(e)),u?K(e):Y(e))}}return(0,o.jsx)(b,{"aria-activedescendant":j?(0,v.sanitizeId)(`${T}_${j.value}`):void 0,"aria-labelledby":e,"aria-multiselectable":u?"true":void 0,className:n,"data-testid":"listbox-container",$focusable:r,id:T,onBlur:r?function(){A(void 0)}:void 0,onFocus:r?function(){!j&&W.length>0&&!te&&A(W[0])}:void 0,onKeyDown:r?function(e){let t;switch(e.key){case" ":e.preventDefault(),u&&j&&K(j);break;case"ArrowUp":e.preventDefault(),t=F(),t&&(null==C||C(t),u&&e.shiftKey&&j?K(t,!0):u||Y(t));break;case"ArrowDown":e.preventDefault(),t=R(),t&&(null==C||C(t),u&&e.shiftKey&&j?K(t,!0):u||Y(t));break;case"Home":e.preventDefault(),t=I(),t&&(null==C||C(t),u&&e.shiftKey&&(e.ctrlKey||e.metaKey)&&j?U(s.slice(s.indexOf(t),s.indexOf(j)+1)):u||Y(t));break;case"End":e.preventDefault(),t=z(),t&&(null==C||C(t),u&&e.shiftKey&&(e.ctrlKey||e.metaKey)&&j?U(s.slice(s.indexOf(j),s.indexOf(t)+1)):u||Y(t));break;case"a":u&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),function(){const e=s.filter(x),t=W.length===e.length?[]:e;N(t),null==c||c(t)}())}null==S||S(e)}:void 0,onMouseDown:r?void 0:e=>e.preventDefault(),ref:(0,h.mergeRefs)(L,V),role:"listbox",tabIndex:r?0:-1,children:(0,o.jsx)(y,{"data-testid":"listbox-list",role:"presentation",children:s.map((e=>(0,o.jsxs)(_,{"aria-disabled":e.disabled,"aria-selected":u&&B(e)?"true":void 0,"data-testid":(0,v.sanitizeId)(`listitem-${e.value}`),disabled:e.disabled,focused:$(e),id:(0,v.sanitizeId)(`${T}_${e.value}`),isMobile:H,onClick:ae(e),onMouseDown:ne,ref:t=>{const n=q.current;t?n.set(e.value,t):n.delete(e.value)},role:"option",selected:B(e),children:[u?(0,o.jsx)(M,{"aria-hidden":"true",disabled:e.disabled,checked:B(e),children:(0,o.jsx)(w,{})}):null,(0,o.jsxs)(k,{children:[e.label||e.value,e.caption&&(0,o.jsx)(E,{disabled:e.disabled,isMobile:H,children:e.caption})]})]},e.value)))})})})),t.Listbox.displayName="Listbox";try{Listbox.displayName="Listbox",Listbox.__docgenInfo={description:"",displayName:"Listbox",props:{ariaLabelledBy:{defaultValue:null,description:"",name:"ariaLabelledBy",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"ListboxOption[]"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},defaultValue:{defaultValue:null,description:"The default selected option. You may specify an array of strings when using multiselect feature.",name:"defaultValue",required:!1,type:{name:"Value"}},focusable:{defaultValue:{value:!0},description:"Set to false to prevent the listbox from receiving focus",name:"focusable",required:!1,type:{name:"boolean"}},multiselect:{defaultValue:{value:!1},description:"Activates multiple selection feature",name:"multiselect",required:!1,type:{name:"boolean"}},focusedValue:{defaultValue:null,description:"Sets the current focused element in the listbox",name:"focusedValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"Sets the selected value (controlled input)",name:"value",required:!1,type:{name:"Value"}},onChange:{defaultValue:null,description:"Callback function, invoked when an option is selected",name:"onChange",required:!1,type:{name:"((options: ListboxOption | ListboxOption[]) => void)"}},onKeyDown:{defaultValue:null,description:"Callback function, invoked when a key is pressed",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocusChange:{defaultValue:null,description:"Callback function, invoked when focused value changes",name:"onFocusChange",required:!1,type:{name:"((option?: ListboxOption) => void)"}},onOptionClick:{defaultValue:null,description:"Callback function, invoked when an option is clicked",name:"onOptionClick",required:!1,type:{name:"((option?: ListboxOption) => void)"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"Key | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/listbox/listbox.tsx#Listbox"]={docgenInfo:Listbox.__docgenInfo,name:"Listbox",path:"src/components/listbox/listbox.tsx#Listbox"})}catch(e){}},32909:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.Lozenge=void 0;const r=n(97905),i=a(n(88694)),o=n(89129),l=n(77465);function u({$variant:e,$isSubtle:t,theme:n},a){const r=t?"-subtle":"";return n.component[`lozenge-${e}${r}-${a}-color`]}const s=i.default.div`
+    font-size: ${({$isMobile:e})=>e?"0.875rem":"0.75rem"};
+`,x=e=>!e.disabled;t.Listbox=(0,l.forwardRef)((({ariaLabelledBy:e,id:t,className:n,defaultValue:a,focusable:r=!0,focusedValue:i,multiselect:u=!1,options:s,onChange:c,onFocusChange:C,onKeyDown:S,onOptionClick:P,value:O},L)=>{const T=(0,m.useId)(t),{isMobile:H}=(0,d.useDeviceContext)(),V=(0,l.useRef)(null),q=(0,l.useRef)(new Map),D=(0,l.useCallback)((e=>s.filter((t=>Array.isArray(e)?e.includes(t.value):t.value===e))),[s]),{selectedElement:j,setSelectedElement:A,selectPrevious:F,selectNext:R,selectFirst:I,selectLast:z}=(0,p.useListCursor)({elements:s,initialElement:D(i)[0],predicate:x}),[W,N]=(0,l.useState)((()=>D(null!=O?O:a)));function B(e){return u?W.includes(e):W[0]===e}function $(e){return e===j}function Y(e){W.includes(e)||(N([e]),null==c||c(e))}function U(e){const t=(0,g.unique)([...W,...e.filter(x)]);N(t),null==c||c(t)}function K(e,t){const n=!W.includes(e)||t?(0,g.unique)([...W,e]):W.filter((t=>t!==e));N(n),null==c||c(n)}const{scrollIntoView:X}=(0,f.useScrollIntoView)({container:V}),G=(0,l.useCallback)(((e,t=!1)=>{if(e){const n=q.current.get(e.value);n&&X(n,t)}}),[X]);(0,l.useLayoutEffect)((()=>{j&&G(j)}),[j,s,G]),(0,l.useLayoutEffect)((()=>{const e=D(null!=i?i:a);e.length>0&&G(e[0],!0)}),[a,i,D,G]);const[Q,J]=(0,l.useState)(i);if(i!==Q){const e=D(i)[0];A(e),J(i)}const[Z,ee]=(0,l.useState)(O);O!==Z&&(N(D(O)),ee(O));let te=!1;function ne(){te=!0,document.addEventListener("mouseup",(()=>{te=!1}),{once:!0})}function ae(e){return()=>{null==P||P(e),x(e)&&(e!==j&&(A(e),null==C||C(e)),u?K(e):Y(e))}}return(0,o.jsx)(b,{"aria-activedescendant":j?(0,v.sanitizeId)(`${T}_${j.value}`):void 0,"aria-labelledby":e,"aria-multiselectable":u?"true":void 0,className:n,"data-testid":"listbox-container",$focusable:r,id:T,onBlur:r?function(){A(void 0)}:void 0,onFocus:r?function(){!j&&W.length>0&&!te&&A(W[0])}:void 0,onKeyDown:r?function(e){let t;switch(e.key){case" ":e.preventDefault(),u&&j&&K(j);break;case"ArrowUp":e.preventDefault(),t=F(),t&&(null==C||C(t),u&&e.shiftKey&&j?K(t,!0):u||Y(t));break;case"ArrowDown":e.preventDefault(),t=R(),t&&(null==C||C(t),u&&e.shiftKey&&j?K(t,!0):u||Y(t));break;case"Home":e.preventDefault(),t=I(),t&&(null==C||C(t),u&&e.shiftKey&&(e.ctrlKey||e.metaKey)&&j?U(s.slice(s.indexOf(t),s.indexOf(j)+1)):u||Y(t));break;case"End":e.preventDefault(),t=z(),t&&(null==C||C(t),u&&e.shiftKey&&(e.ctrlKey||e.metaKey)&&j?U(s.slice(s.indexOf(j),s.indexOf(t)+1)):u||Y(t));break;case"a":u&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),function(){const e=s.filter(x),t=W.length===e.length?[]:e;N(t),null==c||c(t)}())}null==S||S(e)}:void 0,onMouseDown:r?void 0:e=>e.preventDefault(),ref:(0,h.mergeRefs)(L,V),role:"listbox",tabIndex:r?0:-1,children:(0,o.jsx)(y,{"data-testid":"listbox-list",role:"presentation",children:s.map((e=>(0,o.jsxs)(_,{"aria-disabled":e.disabled,"aria-selected":u&&B(e)?"true":void 0,"data-testid":(0,v.sanitizeId)(`listitem-${e.value}`),$disabled:e.disabled,$focused:$(e),id:(0,v.sanitizeId)(`${T}_${e.value}`),$isMobile:H,onClick:ae(e),onMouseDown:ne,ref:t=>{const n=q.current;t?n.set(e.value,t):n.delete(e.value)},role:"option",$selected:B(e),children:[u?(0,o.jsx)(M,{"aria-hidden":"true",disabled:e.disabled,checked:B(e),children:(0,o.jsx)(w,{})}):null,(0,o.jsxs)(k,{children:[e.label||e.value,e.caption&&(0,o.jsx)(E,{$disabled:e.disabled,$isMobile:H,children:e.caption})]})]},e.value)))})})})),t.Listbox.displayName="Listbox";try{Listbox.displayName="Listbox",Listbox.__docgenInfo={description:"",displayName:"Listbox",props:{ariaLabelledBy:{defaultValue:null,description:"",name:"ariaLabelledBy",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"ListboxOption[]"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},defaultValue:{defaultValue:null,description:"The default selected option. You may specify an array of strings when using multiselect feature.",name:"defaultValue",required:!1,type:{name:"Value"}},focusable:{defaultValue:{value:!0},description:"Set to false to prevent the listbox from receiving focus",name:"focusable",required:!1,type:{name:"boolean"}},multiselect:{defaultValue:{value:!1},description:"Activates multiple selection feature",name:"multiselect",required:!1,type:{name:"boolean"}},focusedValue:{defaultValue:null,description:"Sets the current focused element in the listbox",name:"focusedValue",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"Sets the selected value (controlled input)",name:"value",required:!1,type:{name:"Value"}},onChange:{defaultValue:null,description:"Callback function, invoked when an option is selected",name:"onChange",required:!1,type:{name:"((options: ListboxOption | ListboxOption[]) => void)"}},onKeyDown:{defaultValue:null,description:"Callback function, invoked when a key is pressed",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onFocusChange:{defaultValue:null,description:"Callback function, invoked when focused value changes",name:"onFocusChange",required:!1,type:{name:"((option?: ListboxOption) => void)"}},onOptionClick:{defaultValue:null,description:"Callback function, invoked when an option is clicked",name:"onOptionClick",required:!1,type:{name:"((option?: ListboxOption) => void)"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"Key | null"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/listbox/listbox.tsx#Listbox"]={docgenInfo:Listbox.__docgenInfo,name:"Listbox",path:"src/components/listbox/listbox.tsx#Listbox"})}catch(e){}},32909:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.Lozenge=void 0;const r=n(97905),i=a(n(88694)),o=n(89129),l=n(77465);function u({$variant:e,$isSubtle:t,theme:n},a){const r=t?"-subtle":"";return n.component[`lozenge-${e}${r}-${a}-color`]}const s=i.default.div`
     align-items: center;
     background-color: ${e=>u(e,"background")};
     border: 2px solid ${e=>u(e,"border")};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equisoft/design-elements-react",
-  "version": "6.1.3-snapshot.20240402152600",
+  "version": "6.1.3-snapshot.20240402190653",
   "description": "React implementation of the Equisoft design system.",
   "license": "UNLICENSED",
   "main": "dist/bundle.js",