npm - @vibe/core - Versions diffs - 4.0.0-alpha.1 → 4.0.0-beta.0 - Mend

@vibe/core 4.0.0-alpha.1 → 4.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1411) hide show

package/dist/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={breadcrumbContent:"breadcrumbContent_9de4e216f6",withoutText:"withoutText_dc3228d4ad",breadcrumbText:"breadcrumbText_6c3884a1ab",breadcrumbIcon:"breadcrumbIcon_00ab52dde7",clickable:"clickable_2a83eac715",current:"current_9655c81316",disabled:"disabled_8388b135d1",notClickable:"notClickable_ec7a3e751a"};!function(e){const n="s_id-6512392a70ad_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.breadcrumbContent_9de4e216f6 {\n  font: var(--font-text2-normal);\n  color: var(--secondary-text-color);\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 2px;\n  overflow: hidden;\n  text-decoration: none;\n}\n.breadcrumbContent_9de4e216f6.withoutText_dc3228d4ad {\n  padding: 4px;\n}\na.breadcrumbContent_9de4e216f6:hover {\n  color: var(--secondary-text-color);\n  text-decoration: none;\n}\n.breadcrumbContent_9de4e216f6 .breadcrumbText_6c3884a1ab {\n  color: inherit;\n  margin: 0 4px;\n  line-height: 22px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.breadcrumbContent_9de4e216f6 .breadcrumbIcon_00ab52dde7 {\n  height: 14px;\n  width: 14px;\n  flex-shrink: 0;\n}\n.breadcrumbContent_9de4e216f6:focus {\n  outline: none;\n}\n.breadcrumbContent_9de4e216f6.clickable_2a83eac715 {\n  cursor: pointer;\n}\n.breadcrumbContent_9de4e216f6.clickable_2a83eac715:hover,\n.breadcrumbContent_9de4e216f6:focus-within {\n  background-color: var(--primary-background-hover-color);\n  border-radius: 4px;\n}\n.breadcrumbContent_9de4e216f6.current_9655c81316 {\n  color: var(--primary-text-color);\n  font-weight: 500;\n}\n.breadcrumbContent_9de4e216f6.disabled_8388b135d1 {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.breadcrumbContent_9de4e216f6.disabled_8388b135d1:hover {\n  background-color: transparent;\n}\n.breadcrumbContent_9de4e216f6.notClickable_ec7a3e751a {\n  pointer-events: none;\n}");export{e as default};
+var e={breadcrumbContent:"breadcrumbContent_44cf74ac72",withoutText:"withoutText_ec9476b776",breadcrumbText:"breadcrumbText_0a2a979530",breadcrumbIcon:"breadcrumbIcon_a467ab09eb",clickable:"clickable_54f8ee848a",current:"current_b9b7110b74",disabled:"disabled_f423411e28",notClickable:"notClickable_41df689823"};!function(e){const n="s_id-6512392a70ad_4_0_0-alpha_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.breadcrumbContent_44cf74ac72 {\n  font: var(--font-text2-normal);\n  color: var(--secondary-text-color);\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 2px;\n  overflow: hidden;\n  text-decoration: none;\n}\n.breadcrumbContent_44cf74ac72.withoutText_ec9476b776 {\n  padding: 4px;\n}\na.breadcrumbContent_44cf74ac72:hover {\n  color: var(--secondary-text-color);\n  text-decoration: none;\n}\n.breadcrumbContent_44cf74ac72 .breadcrumbText_0a2a979530 {\n  color: inherit;\n  margin: 0 4px;\n  line-height: 22px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.breadcrumbContent_44cf74ac72 .breadcrumbIcon_a467ab09eb {\n  height: 14px;\n  width: 14px;\n  flex-shrink: 0;\n}\n.breadcrumbContent_44cf74ac72:focus {\n  outline: none;\n}\n.breadcrumbContent_44cf74ac72.clickable_54f8ee848a {\n  cursor: pointer;\n}\n.breadcrumbContent_44cf74ac72.clickable_54f8ee848a:hover,\n.breadcrumbContent_44cf74ac72:focus-within {\n  background-color: var(--primary-background-hover-color);\n  border-radius: 4px;\n}\n.breadcrumbContent_44cf74ac72.current_b9b7110b74 {\n  color: var(--primary-text-color);\n  font-weight: 500;\n}\n.breadcrumbContent_44cf74ac72.disabled_f423411e28 {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.breadcrumbContent_44cf74ac72.disabled_f423411e28:hover {\n  background-color: transparent;\n}\n.breadcrumbContent_44cf74ac72.notClickable_41df689823 {\n  pointer-events: none;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbContent.module.scss.js.map

package/dist/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={breadcrumbItemWrapper:"breadcrumbItemWrapper_39d9f6d8c4",disabled:"disabled_7488c3d043"};!function(e){const d="s_id-03f482333e23_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".breadcrumbItemWrapper_39d9f6d8c4 {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n\n.breadcrumbItemWrapper_39d9f6d8c4.disabled_7488c3d043 {\n  cursor: not-allowed;\n}");export{e as default};
+var e={breadcrumbItemWrapper:"breadcrumbItemWrapper_5cc552760a",disabled:"disabled_20b89b6b4f"};!function(e){const t="s_id-03f482333e23_4_0_0-alpha_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".breadcrumbItemWrapper_5cc552760a {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n\n.breadcrumbItemWrapper_5cc552760a.disabled_20b89b6b4f {\n  cursor: not-allowed;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbItem.module.scss.js.map

package/dist/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbsMenu.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={breadcrumbMenuWrapper:"breadcrumbMenuWrapper_39d9f6d8c4"};!function(e){const n="s_id-fc5ae89c4b65_4_0_0-alpha_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,d.firstChild?d.insertBefore(t,d.firstChild):d.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".breadcrumbMenuWrapper_39d9f6d8c4 {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}");export{e as default};
+var e={breadcrumbMenuWrapper:"breadcrumbMenuWrapper_5cc552760a"};!function(e){const n="s_id-fc5ae89c4b65_4_0_0-alpha_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".breadcrumbMenuWrapper_5cc552760a {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbsMenu.module.scss.js.map

package/dist/src/components/BreadcrumbsBar/BreadcrumbsBar.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={breadcrumbsBar:"breadcrumbsBar_80e786a95a",separatorIcon:"separatorIcon_94940f5cd0"};!function(e){const a="s_id-24567fd55d40_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".breadcrumbsBar_80e786a95a ol {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.breadcrumbsBar_80e786a95a ol .separatorIcon_94940f5cd0 {\n  color: var(--secondary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
+var e={breadcrumbsBar:"breadcrumbsBar_5e61c8c498",separatorIcon:"separatorIcon_df9892cbea"};!function(e){const n="s_id-24567fd55d40_4_0_0-alpha_2";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".breadcrumbsBar_5e61c8c498 ol {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.breadcrumbsBar_5e61c8c498 ol .separatorIcon_df9892cbea {\n  color: var(--secondary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbsBar.module.scss.js.map

package/dist/src/components/ButtonGroup/ButtonGroup.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_3369cdcca4",subTextContainer:"subTextContainer_aca3a3f18e",buttonsContainer:"buttonsContainer_d6eb10d565",fullWidth:"fullWidth_b5ed067821",button:"button_7d3bbbb063",activeButton:"activeButton_7e7b47157d",disabled:"disabled_7488c3d043",buttonDisabled:"buttonDisabled_fb573e026b",startBorder:"startBorder_a9cd31888a",endBorder:"endBorder_7972ad0bb2",kindTertiary:"kindTertiary_c06c2f38d8",optionText:"optionText_8e6247b8ba",selected:"selected_e4054eda05",wrapper:"wrapper_42babe6677"};!function(n){const t="s_id-4b7ca9f3603b_4_0_0-alpha_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_3369cdcca4 {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_aca3a3f18e {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.buttonsContainer_d6eb10d565 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_d6eb10d565.fullWidth_b5ed067821 {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063 {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.activeButton_7e7b47157d {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.activeButton_7e7b47157d:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.disabled_7488c3d043, .buttonsContainer_d6eb10d565 .button_7d3bbbb063.buttonDisabled_fb573e026b {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.startBorder_a9cd31888a {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.endBorder_7972ad0bb2 {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_d6eb10d565 .button_7d3bbbb063.fullWidth_b5ed067821 {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_c06c2f38d8 .buttonsContainer_d6eb10d565 .button_7d3bbbb063 {\n  border-color: transparent;\n}\n.kindTertiary_c06c2f38d8 .buttonsContainer_d6eb10d565 .button_7d3bbbb063:first-child {\n  border-color: transparent;\n}\n.optionText_8e6247b8ba:not(.disabled_7488c3d043) {\n  color: var(--primary-text-color);\n}\n.optionText_8e6247b8ba:not(.disabled_7488c3d043).selected_e4054eda05 {\n  color: var(--primary-text-color);\n}\n.wrapper_42babe6677.disabled_7488c3d043 {\n  cursor: not-allowed;\n}\n.fullWidth_b5ed067821 {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_21dafb0115",subTextContainer:"subTextContainer_6def2bd3e4",buttonsContainer:"buttonsContainer_e21d92b7f0",fullWidth:"fullWidth_8319584ea7",button:"button_cab0b3665c",activeButton:"activeButton_9cfb8017f6",disabled:"disabled_20b89b6b4f",buttonDisabled:"buttonDisabled_bb244dfedd",startBorder:"startBorder_427eacbc10",endBorder:"endBorder_58d98774e4",kindTertiary:"kindTertiary_fe53fa1414",optionText:"optionText_bdca8d157c",selected:"selected_0c1c4e60d0",wrapper:"wrapper_cf080696be"};!function(n){const t="s_id-4b7ca9f3603b_4_0_0-alpha_2";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_21dafb0115 {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_6def2bd3e4 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.buttonsContainer_e21d92b7f0 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_e21d92b7f0.fullWidth_8319584ea7 {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.activeButton_9cfb8017f6 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.activeButton_9cfb8017f6:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.disabled_20b89b6b4f, .buttonsContainer_e21d92b7f0 .button_cab0b3665c.buttonDisabled_bb244dfedd {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.startBorder_427eacbc10 {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.endBorder_58d98774e4 {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_e21d92b7f0 .button_cab0b3665c.fullWidth_8319584ea7 {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_fe53fa1414 .buttonsContainer_e21d92b7f0 .button_cab0b3665c {\n  border-color: transparent;\n}\n.kindTertiary_fe53fa1414 .buttonsContainer_e21d92b7f0 .button_cab0b3665c:first-child {\n  border-color: transparent;\n}\n.optionText_bdca8d157c:not(.disabled_20b89b6b4f) {\n  color: var(--primary-text-color);\n}\n.optionText_bdca8d157c:not(.disabled_20b89b6b4f).selected_0c1c4e60d0 {\n  color: var(--primary-text-color);\n}\n.wrapper_cf080696be.disabled_20b89b6b4f {\n  cursor: not-allowed;\n}\n.fullWidth_8319584ea7 {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

package/dist/src/components/Checkbox/Checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useRef as a,useCallback as o,useEffect as n,useMemo as s}from"react";import r from"classnames";import{isNil as i,noop as l}from"es-toolkit";import{useSupportFirefoxLabelClick as c}from"./hooks/useSupportFirefoxLabelClick.js";import m from"../../hooks/useMergeRef.js";import{getTestId as d}from"../../tests/testIds.js";import{ComponentDefaultTestId as u,ComponentVibeId as p}from"../../tests/constants.js";import C from"./Checkbox.module.scss.js";import b from"../../../components/icon/dist/Icon/Icon.js";import f from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";import E from"../../../components/typography/dist/Text/Text.js";var k=t((function(t,k){var v=t.className,x=t.checkboxClassName,y=t.labelClassName,N=t["aria-label"],B=t.label,F=t["aria-labelledby"],g=t.onChange,H=void 0===g?l:g,K=t.checked,O=t.autoFocus,X=t.indeterminate,j=void 0!==X&&X,w=t.disabled,I=void 0!==w&&w,L=t.defaultChecked,A=t.tabIndex,M=t.value,_=void 0===M?"":M,R=t.name,S=void 0===R?"":R,U=t.id,q=t.separateLabel,z=void 0!==q&&q,T=t["data-testid"],D=a(null),G=m(k,D),J=a(null),P=o((function(){var e=D.current;e&&window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){e.blur()}))}))}),[D]),Q=L;i(Q)&&i(K)&&(Q=!1),n((function(){D.current&&(D.current.indeterminate=j)}),[D,j]);var V=c({inputRef:D}).onClickCapture,W=s((function(){return N||("string"==typeof B?B:"")}),[N,B]);return z?e.createElement("div",{className:r(C.wrapper,v),"data-testid":T||d(u.CHECKBOX,U),"data-vibe":p.CHECKBOX},e.createElement("input",{ref:G,id:U,className:C.input,value:_,name:S,type:"checkbox",autoFocus:O,onChange:H,defaultChecked:Q,disabled:I,"aria-label":W,"aria-labelledby":F,checked:K,tabIndex:A}),e.createElement("label",{htmlFor:U,className:r(C.checkbox,x),"data-testid":d(u.CHECKBOX_CHECKBOX,U),onMouseUp:P,onClickCapture:V},e.createElement(b,{className:C.icon,type:"svg",icon:j?f:h,ignoreFocusStyle:!0,"aria-hidden":!0,size:"16"})),!1===B?null:e.createElement("label",{htmlFor:U,className:r(C.label,y),"data-testid":d(u.CHECKBOX_LABEL,U),onMouseUp:P,onClickCapture:V},e.createElement(E,{element:"span",type:"text2"},B))):e.createElement("label",{className:r(C.wrapper,v),onMouseUp:P,"data-testid":T||d(u.CHECKBOX,U),htmlFor:U,onClickCapture:V,"data-vibe":p.CHECKBOX},e.createElement("input",{ref:G,id:U,className:C.input,value:_,name:S,type:"checkbox",autoFocus:O,onChange:H,defaultChecked:Q,disabled:I,"aria-label":W,"aria-labelledby":F,checked:K,tabIndex:A}),e.createElement("div",{className:r(C.checkbox,x),ref:J,"data-testid":d(u.CHECKBOX_CHECKBOX,U)},e.createElement(b,{className:C.icon,type:"svg",icon:j?f:h,ignoreFocusStyle:!0,"aria-hidden":!0,size:"16"})),!1===B?null:e.createElement(E,{element:"span",type:"text2",className:r(C.label,y),"data-testid":d(u.CHECKBOX_LABEL,U)},B))}));export{k as default};
+import e,{forwardRef as t,useRef as a,useCallback as o,useEffect as n,useMemo as r}from"react";import i from"classnames";import{isNil as l,noop as s}from"es-toolkit";import{useSupportFirefoxLabelClick as c}from"./hooks/useSupportFirefoxLabelClick.js";import d from"../../hooks/useMergeRef.js";import{getTestId as m}from"../../tests/testIds.js";import{ComponentDefaultTestId as u,ComponentVibeId as p}from"../../tests/constants.js";import C from"./Checkbox.module.scss.js";import b from"../../../components/icon/dist/Icon/Icon.js";import f from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";import v from"../../../components/typography/dist/Text/Text.js";var k=t((function(t,k){var E=t.className,x=t.checkboxClassName,y=t.labelClassName,N=t["aria-label"],B=t.label,K=t["aria-labelledby"],g=t.onChange,F=void 0===g?s:g,H=t.checked,O=t.autoFocus,X=t.indeterminate,j=void 0!==X&&X,w=t.disabled,I=void 0!==w&&w,L=t.defaultChecked,A=t.tabIndex,M=t.value,_=void 0===M?"":M,D=t.name,R=void 0===D?"":D,S=t.id,T=t.separateLabel,U=void 0!==T&&T,q=t["data-testid"],z=a(null),G=d(k,z),J=o((function(e){var t=e.currentTarget;window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){t.blur()}))}))}),[]),P=L;l(P)&&l(H)&&(P=!1),n((function(){z.current&&(z.current.indeterminate=j)}),[z,j]);var Q=c({inputRef:z}).onClickCapture,V=r((function(){return N||("string"==typeof B?B:"")}),[N,B]),W=o((function(e){var t;" "===e.key&&(e.preventDefault(),null===(t=z.current)||void 0===t||t.click())}),[z]),Y=I?void 0:null!=A?A:0;return U?e.createElement("div",{className:i(C.wrapper,E),"data-testid":q||m(u.CHECKBOX,S),"data-vibe":p.CHECKBOX},e.createElement("input",{ref:G,id:S,className:C.input,value:_,name:R,type:"checkbox",autoFocus:O,onChange:F,defaultChecked:P,disabled:I,"aria-label":V,"aria-labelledby":K,checked:H,tabIndex:-1}),e.createElement("label",{htmlFor:S,className:i(C.checkbox,x),"data-testid":m(u.CHECKBOX_CHECKBOX,S),tabIndex:Y,onMouseUp:J,onKeyDown:W,onClickCapture:Q},e.createElement(b,{className:C.icon,type:"svg",icon:j?f:h,ignoreFocusStyle:!0,"aria-hidden":!0,size:"16"})),!1===B?null:e.createElement("label",{htmlFor:S,className:i(C.label,y),"data-testid":m(u.CHECKBOX_LABEL,S),onMouseUp:J,onClickCapture:Q},e.createElement(v,{element:"span",type:"text2"},B))):e.createElement("label",{className:i(C.wrapper,E),tabIndex:Y,onMouseUp:J,onKeyDown:W,"data-testid":q||m(u.CHECKBOX,S),htmlFor:S,onClickCapture:Q,"data-vibe":p.CHECKBOX},e.createElement("input",{ref:G,id:S,className:C.input,value:_,name:R,type:"checkbox",autoFocus:O,onChange:F,defaultChecked:P,disabled:I,"aria-label":V,"aria-labelledby":K,checked:H,tabIndex:-1}),e.createElement("div",{className:i(C.checkbox,x),"data-testid":m(u.CHECKBOX_CHECKBOX,S)},e.createElement(b,{className:C.icon,type:"svg",icon:j?f:h,ignoreFocusStyle:!0,"aria-hidden":!0,size:"16"})),!1===B?null:e.createElement(v,{element:"span",type:"text2",className:i(C.label,y),"data-testid":m(u.CHECKBOX_LABEL,S)},B))}));export{k as default};
 //# sourceMappingURL=Checkbox.js.map

package/dist/src/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n /*\n Class name applied to the checkbox element.\n /\n checkboxClassName?: string;\n /\n Class name applied to the label element.\n /\n labelClassName?: string;\n /\n The label of the checkbox for accessibility.\n /\n \"aria-label\"?: string;\n /\n The content displayed next to the checkbox.\n /\n label?: React.ReactNode \| Array<React.ReactNode>;\n /\n The ID of an element describing the checkbox.\n /\n \"aria-labelledby\"?: string;\n /\n Callback fired when the checkbox value changes.\n /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /\n If true, controls the checked state of the checkbox.\n /\n checked?: boolean;\n /\n If true, displays an indeterminate state.\n /\n indeterminate?: boolean;\n /\n If true, the checkbox automatically receives focus.\n /\n autoFocus?: boolean;\n /\n If true, the checkbox is disabled.\n /\n disabled?: boolean;\n /\n The initial checked state of the checkbox.\n /\n defaultChecked?: boolean;\n /\n The value submitted with the form when checked.\n /\n value?: string;\n /\n The name of the checkbox, used for form submission.\n /\n name?: string;\n /\n The tab order of the checkbox.\n /\n tabIndex?: number;\n /\n If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n * If using this the id prop is required for it to function correctly.\n /\n separateLabel?: boolean;\n}\n\nconst Checkbox = forwardRef(\n (\n {\n className,\n checkboxClassName,\n labelClassName,\n \"aria-label\": ariaLabel,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n onChange = NOOP,\n checked,\n autoFocus,\n indeterminate = false,\n disabled = false,\n defaultChecked,\n tabIndex,\n value = \"\",\n name = \"\",\n id,\n separateLabel = false,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedInputRef = useMergeRef(ref, inputRef);\n const iconContainerRef = useRef<HTMLDivElement>(null);\n\n const onMouseUpCallback = useCallback(() => {\n const input = inputRef.current;\n if (!input) return;\n\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n input.blur();\n });\n });\n }, [inputRef]);\n let overrideDefaultChecked = defaultChecked;\n\n // If component did not receive default checked and checked props, choose default checked as\n // default behavior (handle isChecked logic inside input) and set default value\n if (isNil(overrideDefaultChecked) && isNil(checked)) {\n overrideDefaultChecked = false;\n }\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n }, [inputRef, indeterminate]);\n\n const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n const finalAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof label === \"string\") return label;\n return \"\";\n }, [ariaLabel, label]);\n\n if (separateLabel) {\n return (\n <div\n className={cx(styles.wrapper, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={tabIndex}\n />\n {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <label\n htmlFor={id}\n className={cx(styles.checkbox, checkboxClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Icon\n className={styles.icon}\n type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n aria-hidden={true}\n size=\"16\"\n />\n </label>\n {label === false ? null : (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n htmlFor={id}\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Text element=\"span\" type=\"text2\">\n {label}\n </Text>\n </label>\n )}\n </div>\n );\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n className={cx(styles.wrapper, className)}\n onMouseUp={onMouseUpCallback}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n htmlFor={id}\n onClickCapture={onClickCaptureLabel}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={tabIndex}\n />\n <div\n className={cx(styles.checkbox, checkboxClassName)}\n ref={iconContainerRef}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n >\n <Icon\n className={styles.icon}\n type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n aria-hidden={true}\n size=\"16\"\n />\n </div>\n {label === false ? null : (\n <Text\n element=\"span\"\n type=\"text2\"\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n >\n {label}\n </Text>\n )}\n </label>\n );\n }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","_ref$separateLabel","separateLabel","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","iconContainerRef","onMouseUpCallback","useCallback","input","current","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","React","createElement","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","Icon","icon","Remove","Check","ignoreFocusStyle","size","CHECKBOX_LABEL","Text","element"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n /*\n Class name applied to the checkbox element.\n /\n checkboxClassName?: string;\n /\n Class name applied to the label element.\n /\n labelClassName?: string;\n /\n The label of the checkbox for accessibility.\n /\n \"aria-label\"?: string;\n /\n The content displayed next to the checkbox.\n /\n label?: React.ReactNode \| Array<React.ReactNode>;\n /\n The ID of an element describing the checkbox.\n /\n \"aria-labelledby\"?: string;\n /\n Callback fired when the checkbox value changes.\n /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /\n If true, controls the checked state of the checkbox.\n /\n checked?: boolean;\n /\n If true, displays an indeterminate state.\n /\n indeterminate?: boolean;\n /\n If true, the checkbox automatically receives focus.\n /\n autoFocus?: boolean;\n /\n If true, the checkbox is disabled.\n /\n disabled?: boolean;\n /\n The initial checked state of the checkbox.\n /\n defaultChecked?: boolean;\n /\n The value submitted with the form when checked.\n /\n value?: string;\n /\n The name of the checkbox, used for form submission.\n /\n name?: string;\n /\n The tab order of the checkbox.\n /\n tabIndex?: number;\n /\n If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n * If using this the id prop is required for it to function correctly.\n /\n separateLabel?: boolean;\n}\n\nconst Checkbox = forwardRef(\n (\n {\n className,\n checkboxClassName,\n labelClassName,\n \"aria-label\": ariaLabel,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n onChange = NOOP,\n checked,\n autoFocus,\n indeterminate = false,\n disabled = false,\n defaultChecked,\n tabIndex,\n value = \"\",\n name = \"\",\n id,\n separateLabel = false,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedInputRef = useMergeRef(ref, inputRef);\n\n const onMouseUpCallback = useCallback((e: React.MouseEvent<HTMLElement>) => {\n const target = e.currentTarget;\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n target.blur();\n });\n });\n }, []);\n\n let overrideDefaultChecked = defaultChecked;\n\n // If component did not receive default checked and checked props, choose default checked as\n // default behavior (handle isChecked logic inside input) and set default value\n if (isNil(overrideDefaultChecked) && isNil(checked)) {\n overrideDefaultChecked = false;\n }\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n }, [inputRef, indeterminate]);\n\n const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n const finalAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof label === \"string\") return label;\n return \"\";\n }, [ariaLabel, label]);\n\n const onKeyDownCallback = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === \" \") {\n e.preventDefault();\n inputRef.current?.click();\n }\n },\n [inputRef]\n );\n\n const wrapperTabIndex = disabled ? undefined : tabIndex ?? 0;\n\n if (separateLabel) {\n return (\n <div\n className={cx(styles.wrapper, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={-1}\n />\n {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <label\n htmlFor={id}\n className={cx(styles.checkbox, checkboxClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n tabIndex={wrapperTabIndex}\n onMouseUp={onMouseUpCallback}\n onKeyDown={onKeyDownCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Icon\n className={styles.icon}\n type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n aria-hidden={true}\n size=\"16\"\n />\n </label>\n {label === false ? null : (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n htmlFor={id}\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Text element=\"span\" type=\"text2\">\n {label}\n </Text>\n </label>\n )}\n </div>\n );\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n className={cx(styles.wrapper, className)}\n tabIndex={wrapperTabIndex}\n onMouseUp={onMouseUpCallback}\n onKeyDown={onKeyDownCallback}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n htmlFor={id}\n onClickCapture={onClickCaptureLabel}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={-1}\n />\n <div\n className={cx(styles.checkbox, checkboxClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n >\n <Icon\n className={styles.icon}\n type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n aria-hidden={true}\n size=\"16\"\n />\n </div>\n {label === false ? null : (\n <Text\n element=\"span\"\n type=\"text2\"\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n >\n {label}\n </Text>\n )}\n </label>\n );\n }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","_ref$separateLabel","separateLabel","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","onMouseUpCallback","useCallback","e","target","currentTarget","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","current","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","onKeyDownCallback","key","preventDefault","_a","click","wrapperTabIndex","undefined","React","createElement","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","input","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","onKeyDown","Icon","icon","Remove","Check","ignoreFocusStyle","size","CHECKBOX_LABEL","Text","element"],"mappings":"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"}

package/dist/src/components/Checkbox/Checkbox.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper_ea618ffc91",checkbox:"checkbox_9060d265b6",icon:"icon_e015cb53d1",label:"label_209b8c08c4",input:"input_1a55c6c7ba",checkboxGrowAnimation:"checkboxGrowAnimation_c890c3717f"};!function(n){const e="s_id-35b4a9ebcadb_4_0_0-alpha_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_ea618ffc91 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_9060d265b6 {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n.checkbox_9060d265b6:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n.checkbox_9060d265b6:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_e015cb53d1 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_209b8c08c4 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--space-8);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_1a55c6c7ba {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_1a55c6c7ba:focus + .checkbox_9060d265b6 {\n  border-color: var(--secondary-text-color);\n}\n.input_1a55c6c7ba:focus:checked + .checkbox_9060d265b6 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_1a55c6c7ba:focus-visible + .checkbox_9060d265b6 {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n.input_1a55c6c7ba:checked:focus + .checkbox_9060d265b6:after,\n.input_1a55c6c7ba:indeterminate:focus + .checkbox_9060d265b6:after {\n  background-color: var(--primary-hover-color);\n}\n.input_1a55c6c7ba:checked + .checkbox_9060d265b6,\n.input_1a55c6c7ba:indeterminate + .checkbox_9060d265b6 {\n  animation: checkboxGrowAnimation_c890c3717f var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_1a55c6c7ba:checked + .checkbox_9060d265b6:hover,\n.input_1a55c6c7ba:indeterminate + .checkbox_9060d265b6:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_1a55c6c7ba:checked + .checkbox_9060d265b6:hover:after,\n.input_1a55c6c7ba:indeterminate + .checkbox_9060d265b6:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_1a55c6c7ba:checked + .checkbox_9060d265b6:after,\n.input_1a55c6c7ba:indeterminate + .checkbox_9060d265b6:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  inset-inline-start: 0;\n}\n.input_1a55c6c7ba:checked + .checkbox_9060d265b6 > .icon_e015cb53d1,\n.input_1a55c6c7ba:indeterminate + .checkbox_9060d265b6 > .icon_e015cb53d1 {\n  visibility: visible;\n}\n.input_1a55c6c7ba:checked:disabled + .checkbox_9060d265b6:after,\n.input_1a55c6c7ba:indeterminate:disabled + .checkbox_9060d265b6:after {\n  background-color: var(--disabled-background-color);\n}\n.input_1a55c6c7ba:disabled + .checkbox_9060d265b6 .icon_e015cb53d1,\n.input_1a55c6c7ba:disabled + .checkbox_9060d265b6:hover .icon_e015cb53d1 {\n  color: var(--disabled-text-color);\n}\n.input_1a55c6c7ba:disabled + .checkbox_9060d265b6,\n.input_1a55c6c7ba:disabled + .checkbox_9060d265b6:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_1a55c6c7ba:disabled ~ .label_209b8c08c4 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_c890c3717f {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var e={wrapper:"wrapper_77206619fd",checkbox:"checkbox_c98c7bc362",icon:"icon_e4ffd868ac",label:"label_720915d6a1",input:"input_21e8567fa5",checkboxGrowAnimation:"checkboxGrowAnimation_f78c17d32c"};!function(e){const n="s_id-61898ce5ef6e_4_0_0-alpha_2";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,c.firstChild?c.insertBefore(o,c.firstChild):c.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('@charset "UTF-8";\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_77206619fd {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n  outline: none; /* focus ring is rendered on .checkbox child, not the wrapper */\n}\n.checkbox_c98c7bc362 {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n.checkbox_c98c7bc362:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n.checkbox_c98c7bc362:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_e4ffd868ac {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_720915d6a1 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--space-8);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_21e8567fa5 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_21e8567fa5:focus + .checkbox_c98c7bc362 {\n  border-color: var(--secondary-text-color);\n}\n.input_21e8567fa5:focus:checked + .checkbox_c98c7bc362 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_21e8567fa5:focus-visible + .checkbox_c98c7bc362 {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.input_21e8567fa5:checked:focus + .checkbox_c98c7bc362:after,\n.input_21e8567fa5:indeterminate:focus + .checkbox_c98c7bc362:after {\n  background-color: var(--primary-hover-color);\n}\n/* Tab navigation — non-separate mode: the wrapper <label> is the Tab target */\n.wrapper_77206619fd:focus-visible > .checkbox_c98c7bc362 {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_77206619fd:focus-visible > .input_21e8567fa5:checked ~ .checkbox_c98c7bc362,\n.wrapper_77206619fd:focus-visible > .input_21e8567fa5:indeterminate ~ .checkbox_c98c7bc362 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n/* Tab navigation — separate mode: the .checkbox <label> is the Tab target */\n.checkbox_c98c7bc362:focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362:focus-visible,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362:focus-visible {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362 {\n  animation: checkboxGrowAnimation_f78c17d32c var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362:hover,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362:hover:after,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362:after,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  inset-inline-start: 0;\n}\n.input_21e8567fa5:checked + .checkbox_c98c7bc362 > .icon_e4ffd868ac,\n.input_21e8567fa5:indeterminate + .checkbox_c98c7bc362 > .icon_e4ffd868ac {\n  visibility: visible;\n}\n.input_21e8567fa5:checked:disabled + .checkbox_c98c7bc362:after,\n.input_21e8567fa5:indeterminate:disabled + .checkbox_c98c7bc362:after {\n  background-color: var(--disabled-background-color);\n}\n.input_21e8567fa5:disabled + .checkbox_c98c7bc362 .icon_e4ffd868ac,\n.input_21e8567fa5:disabled + .checkbox_c98c7bc362:hover .icon_e4ffd868ac {\n  color: var(--disabled-text-color);\n}\n.input_21e8567fa5:disabled + .checkbox_c98c7bc362,\n.input_21e8567fa5:disabled + .checkbox_c98c7bc362:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_21e8567fa5:disabled ~ .label_720915d6a1 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_f78c17d32c {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{e as default};
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSupportFirefoxLabelClick.js","sources":["../../../../../src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { isFirefox } from \"../../../utils/user-agent-utils\";\n\nexport function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {\n // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event\n // that we actually created in this hook.\n // We handle the custom event create state as ref because this variable should not be depend on the component renders\n // and it should be unique per checkbox.\n const customEventCreated = useRef(false);\n\n // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed\n const onClickCapture = useCallback(\n (e: React.MouseEvent) => {\n // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -\n // firefox browsers when the shift key is pressed.\n // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent\n // an infinite loop in recursion here.\n if (!customEventCreated.current && e.shiftKey && isFirefox() && inputRef?.current?.dispatchEvent) {\n e.preventDefault();\n const manualClickEvent = new MouseEvent(\"click\", {\n shiftKey: true,\n // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n bubbles: true,\n cancelable: true\n });\n\n customEventCreated.current = true;\n inputRef.current.dispatchEvent(manualClickEvent);\n } else if (customEventCreated.current) {\n customEventCreated.current = false;\n }\n },\n [customEventCreated, inputRef]\n );\n\n return { onClickCapture };\n}\n"],"names":["useSupportFirefoxLabelClick","_ref","inputRef","customEventCreated","useRef","onClickCapture","useCallback","e","current","shiftKey","isFirefox","_a","dispatchEvent","preventDefault","manualClickEvent","MouseEvent","bubbles","cancelable"],"mappings":"+GAIgB,SAAAA,EAA2BC,GAA8D,IAA3DC,EAAQD,EAARC,SAKtCC,EAAqBC,GAAO,GA2BlC,MAAO,CAAEC,eAxBcC,GACrB,SAACC,SAKC,IAAKJ,EAAmBK,SAAWD,EAAEE,UAAYC,~~MAAgC~~,~~QAAjBC~~,~~EAAAT~~,~~aAAA~~,~~EAAAA,~~EAAUM,~~eAAO~~,IAAAG,OAAA,EAAAA,~~EAAEC~~,eAAe,CAChGL,EAAEM,iBACF,IAAMC,EAAmB,IAAIC,WAAW,QAAS,CAC/CN,UAAU,EAEVO,SAAS,EACTC,YAAY,IAGdd,EAAmBK,SAAU,EAC7BN,EAASM,QAAQI,cAAcE,~~EAChC~~,~~MAAUX~~,EAAmBK,UAC5BL,EAAmBK,SAAU,EAEjC,GACA,CAACL,EAAoBD,IAIzB"}
1	+ {"version":3,"file":"useSupportFirefoxLabelClick.js","sources":["../../../../../src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { isFirefox } from \"../../../utils/user-agent-utils\";\n\nexport function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {\n // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event\n // that we actually created in this hook.\n // We handle the custom event create state as ref because this variable should not be depend on the component renders\n // and it should be unique per checkbox.\n const customEventCreated = useRef(false);\n\n // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed\n const onClickCapture = useCallback(\n (e: React.MouseEvent) => {\n // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -\n // firefox browsers when the shift key is pressed.\n // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent\n // an infinite loop in recursion here.\n if (!customEventCreated.current && e.shiftKey && isFirefox() && inputRef?.current?.dispatchEvent) {\n e.preventDefault();\n const manualClickEvent = new MouseEvent(\"click\", {\n shiftKey: true,\n // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n bubbles: true,\n cancelable: true\n });\n\n customEventCreated.current = true;\n inputRef.current.dispatchEvent(manualClickEvent);\n } else if (customEventCreated.current) {\n customEventCreated.current = false;\n }\n },\n [customEventCreated, inputRef]\n );\n\n return { onClickCapture };\n}\n"],"names":["useSupportFirefoxLabelClick","_ref","inputRef","customEventCreated","useRef","onClickCapture","useCallback","e","current","shiftKey","isFirefox","_a","dispatchEvent","preventDefault","manualClickEvent","MouseEvent","bubbles","cancelable"],"mappings":"+GAIgB,SAAAA,EAA2BC,GAA8D,IAA3DC,EAAQD,EAARC,SAKtCC,EAAqBC,GAAO,GA2BlC,MAAO,CAAEC,eAxBcC,GACrB,SAACC,SAKC,IAAKJ,EAAmBK,SAAWD,EAAEE,UAAYC,MAAkC,UAAnBR,aAAQ,EAARA,EAAUM,eAAS,IAAAG,OAAA,EAAAA,EAAAC,eAAe,CAChGL,EAAEM,iBACF,IAAMC,EAAmB,IAAIC,WAAW,QAAS,CAC/CN,UAAU,EAEVO,SAAS,EACTC,YAAY,IAGdd,EAAmBK,SAAU,EAC7BN,EAASM,QAAQI,cAAcE,EACjC,MAAWX,EAAmBK,UAC5BL,EAAmBK,SAAU,EAEjC,GACA,CAACL,EAAoBD,IAIzB"}

package/dist/src/components/Chips/Chips.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={chips:"chips_ce67af7b1d","chips-pop-in-emphasized":"chips-pop-in-emphasized_57811d069c",border:"border_aa07d0e5ce",withUserSelect:"withUserSelect_91163e557b",noMargin:"noMargin_0889a9b5ca",label:"label_20f55caf2a",noAnimation:"noAnimation_0ff0a56d8d",icon:"icon_f5fefd55af",avatar:"avatar_8654860869",customRenderer:"customRenderer_f57eb65eda",left:"left_a6555f3915",right:"right_80643ae14d",close:"close_eac544bae9",disabled:"disabled_aa71d3f373",defaultCursor:"defaultCursor_aa71d3f373",clickable:"clickable_2a83eac715","focus-visible":"focus-visible_b9390e7de1",disableTextSelection:"disableTextSelection_9ff72b45c6"};!function(e){const a="s_id-11bfedb29341_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const i=document.createElement("style");i.id=a,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_ce67af7b1d {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--space-4));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_57811d069c var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_ce67af7b1d.border_aa07d0e5ce {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_ce67af7b1d.withUserSelect_91163e557b {\n  user-select: text;\n  cursor: text;\n}\n.chips_ce67af7b1d.noMargin_0889a9b5ca {\n  margin: 0;\n}\n.chips_ce67af7b1d .label_20f55caf2a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_ce67af7b1d.noAnimation_0ff0a56d8d {\n  animation: none;\n}\n.chips_ce67af7b1d .icon_f5fefd55af,\n.chips_ce67af7b1d .avatar_8654860869,\n.chips_ce67af7b1d .customRenderer_f57eb65eda {\n  min-width: 18px;\n}\n.chips_ce67af7b1d .icon_f5fefd55af.left_a6555f3915,\n.chips_ce67af7b1d .avatar_8654860869.left_a6555f3915,\n.chips_ce67af7b1d .customRenderer_f57eb65eda.left_a6555f3915 {\n  margin-inline-end: var(--space-4);\n}\n.chips_ce67af7b1d .icon_f5fefd55af.right_80643ae14d,\n.chips_ce67af7b1d .avatar_8654860869.right_80643ae14d,\n.chips_ce67af7b1d .customRenderer_f57eb65eda.right_80643ae14d {\n  margin-inline-start: var(--space-4);\n}\n.chips_ce67af7b1d .icon_f5fefd55af.close_eac544bae9,\n.chips_ce67af7b1d .avatar_8654860869.close_eac544bae9,\n.chips_ce67af7b1d .customRenderer_f57eb65eda.close_eac544bae9 {\n  margin-inline-start: var(--space-4);\n  color: var(--primary-text-color);\n}\n.chips_ce67af7b1d.disabled_aa71d3f373 .icon_f5fefd55af {\n  color: var(--disabled-text-color);\n}\n.chips_ce67af7b1d.disabled_aa71d3f373 .label_20f55caf2a {\n  color: var(--disabled-text-color);\n}\n.chips_ce67af7b1d.defaultCursor_aa71d3f373 {\n  cursor: default;\n}\n.chips_ce67af7b1d.clickable_2a83eac715 {\n  cursor: pointer;\n}\n.chips_ce67af7b1d.clickable_2a83eac715:focus-visible, .chips_ce67af7b1d.clickable_2a83eac715.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_ce67af7b1d.clickable_2a83eac715:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.chips_ce67af7b1d.clickable_2a83eac715.disabled_aa71d3f373 {\n  cursor: default;\n}\n.chips_ce67af7b1d.clickable_2a83eac715.disableTextSelection_9ff72b45c6 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_57811d069c {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
+var e={chips:"chips_2337001e42","chips-pop-in-emphasized":"chips-pop-in-emphasized_270775e49f",border:"border_fbbfb48e77",withUserSelect:"withUserSelect_a4a8c40080",noMargin:"noMargin_9e0fd01e84",label:"label_f5edf95508",noAnimation:"noAnimation_f531551de1",icon:"icon_c150814f9b",avatar:"avatar_f0466a5a53",customRenderer:"customRenderer_12a46e0ff5",left:"left_bc4732e5f4",right:"right_2ab864157e",close:"close_80cfbc9618",disabled:"disabled_169cf3aa72",defaultCursor:"defaultCursor_169cf3aa72",clickable:"clickable_54f8ee848a","focus-visible":"focus-visible_1fc42a4a92",disableTextSelection:"disableTextSelection_04b079cdb7"};!function(e){const n="s_id-11bfedb29341_4_0_0-alpha_2";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_2337001e42 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--space-4));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_270775e49f var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_2337001e42.border_fbbfb48e77 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_2337001e42.withUserSelect_a4a8c40080 {\n  user-select: text;\n  cursor: text;\n}\n.chips_2337001e42.noMargin_9e0fd01e84 {\n  margin: 0;\n}\n.chips_2337001e42 .label_f5edf95508 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_2337001e42.noAnimation_f531551de1 {\n  animation: none;\n}\n.chips_2337001e42 .icon_c150814f9b,\n.chips_2337001e42 .avatar_f0466a5a53,\n.chips_2337001e42 .customRenderer_12a46e0ff5 {\n  min-width: 18px;\n}\n.chips_2337001e42 .icon_c150814f9b.left_bc4732e5f4,\n.chips_2337001e42 .avatar_f0466a5a53.left_bc4732e5f4,\n.chips_2337001e42 .customRenderer_12a46e0ff5.left_bc4732e5f4 {\n  margin-inline-end: var(--space-4);\n}\n.chips_2337001e42 .icon_c150814f9b.right_2ab864157e,\n.chips_2337001e42 .avatar_f0466a5a53.right_2ab864157e,\n.chips_2337001e42 .customRenderer_12a46e0ff5.right_2ab864157e {\n  margin-inline-start: var(--space-4);\n}\n.chips_2337001e42 .icon_c150814f9b.close_80cfbc9618,\n.chips_2337001e42 .avatar_f0466a5a53.close_80cfbc9618,\n.chips_2337001e42 .customRenderer_12a46e0ff5.close_80cfbc9618 {\n  margin-inline-start: var(--space-4);\n  color: var(--primary-text-color);\n}\n.chips_2337001e42.disabled_169cf3aa72 .icon_c150814f9b {\n  color: var(--disabled-text-color);\n}\n.chips_2337001e42.disabled_169cf3aa72 .label_f5edf95508 {\n  color: var(--disabled-text-color);\n}\n.chips_2337001e42.defaultCursor_169cf3aa72 {\n  cursor: default;\n}\n.chips_2337001e42.clickable_54f8ee848a {\n  cursor: pointer;\n}\n.chips_2337001e42.clickable_54f8ee848a:focus-visible, .chips_2337001e42.clickable_54f8ee848a.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_2337001e42.clickable_54f8ee848a:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.chips_2337001e42.clickable_54f8ee848a.disabled_169cf3aa72 {\n  cursor: default;\n}\n.chips_2337001e42.clickable_54f8ee848a.disableTextSelection_04b079cdb7 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_270775e49f {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
 //# sourceMappingURL=Chips.module.scss.js.map

package/dist/src/components/ColorPicker/ColorPicker.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_d5e61b1307",colorPickerDialogContent:"colorPickerDialogContent_a87db3c743"};!function(e){const t="s_id-ffacbf9b6446_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_d5e61b1307.colorPickerDialogContent_a87db3c743 {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
+var e={colorPicker:"colorPicker_3a3059b0f0",colorPickerDialogContent:"colorPickerDialogContent_80566eb3d4"};!function(e){const t="s_id-ffacbf9b6446_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_3a3059b0f0.colorPickerDialogContent_80566eb3d4 {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=ColorPicker.module.scss.js.map

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_4006417eb3",clearColorButton:"clearColorButton_341d811d63"};!function(e){const n="s_id-745441469971_4_0_0-alpha_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_4006417eb3 {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton_341d811d63 {\n  margin-top: var(--space-8);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_bb563918b5",clearColorButton:"clearColorButton_00e4f1575c"};!function(e){const n="s_id-745441469971_4_0_0-alpha_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_bb563918b5 {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton_00e4f1575c {\n  margin-top: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=ColorPickerClearButton.module.scss.js.map

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid_487a11b5a8"};!function(e){const n="s_id-0a5f0eb78ee4_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid_487a11b5a8 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_a2d73eb25f"};!function(e){const d="s_id-0a5f0eb78ee4_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+d))return;const t=document.createElement("style");t.id=d,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".colorsGrid_a2d73eb25f {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
 //# sourceMappingURL=ColorPickerColorsGrid.module.scss.js.map

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\n value,\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList,\n isMultiselect,\n colorSize = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\nexport default ColorPickerContent;\n"],"names":["ColorPickerContent","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text"],"mappings":"u2BAqGMA,IAAAA,EAAqBC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,~~EAElC~~,~~MACCH~~,EAAOM,KAAKP,GAEd7C,EAAc8C,~~EAVb~~,~~MAFC9C~~,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG"}
1	+ {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\n value,\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList,\n isMultiselect,\n colorSize = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\nexport default ColorPickerContent;\n"],"names":["ColorPickerContent","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text"],"mappings":"u2BAqGMA,IAAAA,EAAqBC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAEnC,MACEH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVd,MAFE9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG"}

package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_114930b9cd",circle:"circle_f28d972e47",feedbackIndicator:"feedbackIndicator_3747f32995",active:"active_f78d80be16",selectedColor:"selectedColor_2c3b11837a",colorItem:"colorItem_baed10be6d",colorIndicatorWrapper:"colorIndicatorWrapper_bf1b42cbe2",colorItemSizeSmall:"colorItemSizeSmall_1403c4073d",colorItemSizeMedium:"colorItemSizeMedium_13e260238e",colorItemSizeLarge:"colorItemSizeLarge_29e287c488",colorItemTextMode:"colorItemTextMode_0710a17031",colorIconWhite:"colorIconWhite_1b420dbfed"};!function(e){const r="s_id-4f41e3ef6859_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const o=document.createElement("style");o.id=r,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_114930b9cd.circle_f28d972e47 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_114930b9cd {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_114930b9cd .feedbackIndicator_3747f32995 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd:focus,\n.itemWrapper_114930b9cd:focus-visible,\n.itemWrapper_114930b9cd.active_f78d80be16 {\n  outline: none;\n}\n\n.itemWrapper_114930b9cd:focus .feedbackIndicator_3747f32995:before,\n.itemWrapper_114930b9cd:focus-visible .feedbackIndicator_3747f32995:before,\n.itemWrapper_114930b9cd.active_f78d80be16 .feedbackIndicator_3747f32995:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd:focus .feedbackIndicator_3747f32995:after,\n.itemWrapper_114930b9cd:focus-visible .feedbackIndicator_3747f32995:after,\n.itemWrapper_114930b9cd.active_f78d80be16 .feedbackIndicator_3747f32995:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper_114930b9cd:hover:not(.active_f78d80be16):not(.selectedColor_2c3b11837a) .feedbackIndicator_3747f32995 {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d .colorIndicatorWrapper_bf1b42cbe2 {\n  display: flex;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeSmall_1403c4073d {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeMedium_13e260238e {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeLarge_29e287c488 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a {\n  position: relative;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a .feedbackIndicator_3747f32995:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_114930b9cd .colorItemTextMode_0710a17031:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_114930b9cd .colorIconWhite_1b420dbfed {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_262d3afb37",circle:"circle_28a5b634c3",feedbackIndicator:"feedbackIndicator_b13ab35a3c",active:"active_ac451420c1",selectedColor:"selectedColor_7da14a4280",colorItem:"colorItem_e56b05b8af",colorIndicatorWrapper:"colorIndicatorWrapper_d93e458317",colorItemSizeSmall:"colorItemSizeSmall_23061f9aa0",colorItemSizeMedium:"colorItemSizeMedium_02f0dedceb",colorItemSizeLarge:"colorItemSizeLarge_49cb0dcaa7",colorItemTextMode:"colorItemTextMode_b998bcda58",colorIconWhite:"colorIconWhite_adc7429fa8"};!function(e){const r="s_id-4f41e3ef6859_4_0_0-alpha_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_262d3afb37.circle_28a5b634c3 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_262d3afb37 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_262d3afb37 .feedbackIndicator_b13ab35a3c {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_262d3afb37:focus,\n.itemWrapper_262d3afb37:focus-visible,\n.itemWrapper_262d3afb37.active_ac451420c1 {\n  outline: none;\n}\n\n.itemWrapper_262d3afb37:focus .feedbackIndicator_b13ab35a3c:before,\n.itemWrapper_262d3afb37:focus-visible .feedbackIndicator_b13ab35a3c:before,\n.itemWrapper_262d3afb37.active_ac451420c1 .feedbackIndicator_b13ab35a3c:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper_262d3afb37:focus .feedbackIndicator_b13ab35a3c:after,\n.itemWrapper_262d3afb37:focus-visible .feedbackIndicator_b13ab35a3c:after,\n.itemWrapper_262d3afb37.active_ac451420c1 .feedbackIndicator_b13ab35a3c:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper_262d3afb37:hover:not(.active_ac451420c1):not(.selectedColor_7da14a4280) .feedbackIndicator_b13ab35a3c {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper_262d3afb37 .colorItem_e56b05b8af {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper_262d3afb37 .colorItem_e56b05b8af .colorIndicatorWrapper_d93e458317 {\n  display: flex;\n}\n\n.itemWrapper_262d3afb37 .colorItem_e56b05b8af.colorItemSizeSmall_23061f9aa0 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_262d3afb37 .colorItem_e56b05b8af.colorItemSizeMedium_02f0dedceb {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_262d3afb37 .colorItem_e56b05b8af.colorItemSizeLarge_49cb0dcaa7 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_262d3afb37.selectedColor_7da14a4280 {\n  position: relative;\n}\n\n.itemWrapper_262d3afb37.selectedColor_7da14a4280:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper_262d3afb37.selectedColor_7da14a4280 .feedbackIndicator_b13ab35a3c:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_262d3afb37 .colorItemTextMode_b998bcda58:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_262d3afb37 .colorIconWhite_adc7429fa8 {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

package/dist/src/components/Combobox/Combobox.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var o={combobox:"combobox_a0ea19b94d",stickyCategory:"stickyCategory_be310aaaba",comboboxCategory:"comboboxCategory_6d06909cb1",sizeSmall:"sizeSmall_7551ba4be6",sizeMedium:"sizeMedium_cf2e5780f1",sizeLarge:"sizeLarge_7551ba4be6",empty:"empty_7d7a846f47",comboboxSearchWrapper:"comboboxSearchWrapper_9f5475e60e",comboboxNoResults:"comboboxNoResults_24ff70ca6f",comboboxMessageWrapper:"comboboxMessageWrapper_2a57e5535d",comboboxMessage:"comboboxMessage_20f55caf2a",addNewButton:"addNewButton_1404184849",buttonLabel:"buttonLabel_20f55caf2a",comboboxList:"comboboxList_f6b8e86e41"};!function(o){const e="s_id-5bf292a5a8b0_4_0_0-alpha_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_a0ea19b94d {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--space-8);\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba .comboboxCategory_6d06909cb1 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeSmall_7551ba4be6 .comboboxCategory_6d06909cb1 {\n  top: 32px;\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeMedium_cf2e5780f1 .comboboxCategory_6d06909cb1 {\n  top: 40px;\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeLarge_7551ba4be6 .comboboxCategory_6d06909cb1 {\n  top: 48px;\n}\n.combobox_a0ea19b94d.empty_7d7a846f47 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_9f5475e60e {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_24ff70ca6f {\n  margin-top: var(--space-8);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n.comboboxNoResults_24ff70ca6f .comboboxMessageWrapper_2a57e5535d {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_24ff70ca6f .comboboxMessageWrapper_2a57e5535d .comboboxMessage_20f55caf2a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_24ff70ca6f .addNewButton_1404184849 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_24ff70ca6f .addNewButton_1404184849 .buttonLabel_20f55caf2a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_f6b8e86e41 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
+var o={combobox:"combobox_515b2f2b0b",stickyCategory:"stickyCategory_e08e34bf7f",comboboxCategory:"comboboxCategory_4b640d2b91",sizeSmall:"sizeSmall_9f1650376a",sizeMedium:"sizeMedium_c4b9c6d1c7",sizeLarge:"sizeLarge_9f1650376a",empty:"empty_ed1430b28b",comboboxSearchWrapper:"comboboxSearchWrapper_e857189432",comboboxNoResults:"comboboxNoResults_4c809690c2",comboboxMessageWrapper:"comboboxMessageWrapper_cde6e88615",comboboxMessage:"comboboxMessage_f5edf95508",addNewButton:"addNewButton_d68955bff6",buttonLabel:"buttonLabel_f5edf95508",comboboxList:"comboboxList_5082bcb253"};!function(o){const e="s_id-5bf292a5a8b0_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const b=document.createElement("style");b.id=e,n.firstChild?n.insertBefore(b,n.firstChild):n.appendChild(b),b.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_515b2f2b0b {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--space-8);\n}\n.combobox_515b2f2b0b.stickyCategory_e08e34bf7f .comboboxCategory_4b640d2b91 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_515b2f2b0b.stickyCategory_e08e34bf7f.sizeSmall_9f1650376a .comboboxCategory_4b640d2b91 {\n  top: 32px;\n}\n.combobox_515b2f2b0b.stickyCategory_e08e34bf7f.sizeMedium_c4b9c6d1c7 .comboboxCategory_4b640d2b91 {\n  top: 40px;\n}\n.combobox_515b2f2b0b.stickyCategory_e08e34bf7f.sizeLarge_9f1650376a .comboboxCategory_4b640d2b91 {\n  top: 48px;\n}\n.combobox_515b2f2b0b.empty_ed1430b28b {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_e857189432 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_4c809690c2 {\n  margin-top: var(--space-8);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n.comboboxNoResults_4c809690c2 .comboboxMessageWrapper_cde6e88615 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_4c809690c2 .comboboxMessageWrapper_cde6e88615 .comboboxMessage_f5edf95508 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_4c809690c2 .addNewButton_d68955bff6 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_4c809690c2 .addNewButton_d68955bff6 .buttonLabel_f5edf95508 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_5082bcb253 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
 //# sourceMappingURL=Combobox.module.scss.js.map

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxHelpers.js","sources":["../../../../../src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx"],"sourcesContent":["import React, { type CSSProperties, type MutableRefObject, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ComboboxOption from \"../components/ComboboxOption/ComboboxOption\";\nimport ComboboxCategory from \"../components/ComboboxCategory/ComboboxCategory\";\nimport Divider from \"../../Divider/Divider\";\nimport {\n COMBOBOX_DIVIDER_ITEM,\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategory,\n type IComboboxOption,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IOptionItemRendererArgs,\n type IComboboxOptionEvents\n} from \"../components/ComboboxConstants\";\nimport useActiveDescendantListFocus from \"../../../hooks/useActiveDescendantListFocus\";\nimport { getOptionsByCategories } from \"../ComboboxService\";\nimport comboboxItemsStyles from \"../components/ComboboxItems/ComboboxItems.module.scss\";\nimport styles from \"./ComboboxHelpers.module.scss\";\n\nconst DIVIDER_HEIGHT = 17;\nconst CATEGORY_HEIGHT = 32;\n\nexport function useItemsData({\n categories,\n options,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n}: {\n categories: IComboboxCategoryMap;\n options: IComboboxOption[];\n filterValue: string;\n withCategoriesDivider: boolean;\n optionLineHeight: number;\n}) {\n return useMemo(() => {\n let items: IComboboxItem[] = [];\n let selectableItems: IComboboxOption[] = [];\n const itemsMap = new Map();\n\n if (categories) {\n const optionsByCategories = getOptionsByCategories(options, categories, filterValue);\n let optionIndex = 0;\n Object.keys(optionsByCategories).forEach((categoryId, categoryIndex) => {\n const withDivider = withCategoriesDivider && categoryIndex !== 0;\n if (withDivider) {\n items.push(createDividerItemObject({ categoryId }));\n }\n\n const isCategoryWithOptions = optionsByCategories[categoryId].length > 0;\n const isFirstCategory = categoryIndex === 0;\n\n const categoryObject = createCategoryItemObject({\n categoryId,\n categoryData: categories[categoryId],\n withDivider,\n className: cx({\n [comboboxItemsStyles.categoryWithOptions]: isCategoryWithOptions,\n [comboboxItemsStyles.categoryWithoutOptions]: !isCategoryWithOptions,\n [comboboxItemsStyles.firstCategory]: isFirstCategory\n })\n });\n\n // save category object in both items array and categories map\n items.push(categoryObject);\n itemsMap.set(categoryId, categoryObject);\n\n optionsByCategories[categoryId].forEach((option: IComboboxOption) => {\n const itemObject = createOptionItemObject({\n height: optionLineHeight,\n option,\n index: optionIndex,\n categoryId: categoryObject.id\n });\n\n itemsMap.set(itemObject.id, itemObject);\n items.push(itemObject);\n selectableItems.push(option);\n optionIndex++;\n });\n });\n } else {\n selectableItems = options;\n items = options.map((option, index) => {\n return createOptionItemObject({\n height: optionLineHeight,\n option,\n index\n });\n });\n }\n return { items, itemsMap, selectableItems };\n }, [categories, options, filterValue, withCategoriesDivider, optionLineHeight]);\n}\n\nexport function useKeyboardNavigation({\n defaultVisualFocusFirstIndex,\n inputRef,\n onClick,\n isChildSelectable,\n options,\n getOptionId\n}: {\n defaultVisualFocusFirstIndex?: boolean;\n inputRef: MutableRefObject<HTMLElement>;\n onClick: (event: React.KeyboardEvent \| React.MouseEvent, index: number) => void;\n isChildSelectable: (index: number) => boolean;\n options: IComboboxOption[];\n getOptionId: (optionId: string, index: number) => string;\n}) {\n const filteredOptionsIds = useMemo(\n () => options.map((option: IComboboxOption, index: number) => getOptionId(option?.id, index)),\n [getOptionId, options]\n );\n\n const { visualFocusItemIndex, visualFocusItemId } = useActiveDescendantListFocus({\n defaultVisualFocusFirstIndex,\n focusedElementRef: inputRef,\n focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n itemsIds: filteredOptionsIds,\n onItemClick: onClick,\n isItemSelectable: isChildSelectable,\n isIgnoreSpaceAsItemSelection: true\n });\n\n return { visualFocusItemIndex, visualFocusItemId, onOptionClick: onClick };\n}\nexport function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {\n return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };\n}\n\nexport function createCategoryItemObject({\n withDivider,\n categoryId,\n categoryData,\n className\n}: {\n withDivider: boolean;\n categoryId: string;\n categoryData: IComboboxCategory;\n className: string;\n}): IComboboxItem {\n return {\n height: CATEGORY_HEIGHT,\n type: COMBOBOX_CATEGORY_ITEM,\n category: categoryData,\n id: categoryId,\n withDivider,\n className\n };\n}\n\nexport function createOptionItemObject({\n option,\n height,\n index,\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n}: {\n option?: IComboboxOption;\n height?: number;\n index?: number;\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n isActive?: boolean;\n optionLineHeight?: number;\n shouldScrollToSelectedItem?: boolean;\n categoryId?: string;\n}): IComboboxItem {\n return {\n type: COMBOBOX_OPTION_ITEM,\n height,\n belongToCategory: true,\n index,\n option,\n id: option.id \|\| index.toString(),\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n };\n}\n\nexport function comboboxItemRenderer({\n item,\n style,\n optionEvents,\n optionRenderData,\n isVirtualized,\n stickyCategories\n}: {\n item: IComboboxItem;\n style: CSSProperties;\n optionEvents: IComboboxOptionEvents;\n optionRenderData: any;\n isVirtualized: boolean;\n stickyCategories?: boolean;\n}) {\n const { type, ...otherArgs } = item;\n let customClassNames;\n let innerElement;\n switch (type) {\n case COMBOBOX_DIVIDER_ITEM: {\n innerElement = dividerItemRenderer({ id: otherArgs.id, height: otherArgs.height });\n break;\n }\n case COMBOBOX_CATEGORY_ITEM: {\n innerElement = categoryItemRenderer({\n id: otherArgs.id,\n category: otherArgs.category,\n className: otherArgs.className\n });\n if (stickyCategories && !isVirtualized) {\n customClassNames = styles.sticky;\n }\n break;\n }\n case COMBOBOX_OPTION_ITEM: {\n innerElement = optionItemRenderer({\n ...otherArgs,\n ...optionEvents,\n ...optionRenderData\n });\n break;\n }\n }\n\n return (\n <div key={otherArgs.id} className={cx(styles.comboboxItemContainer, customClassNames)} style={style}>\n {innerElement}\n </div>\n );\n}\n\nexport function dividerItemRenderer({ id, height }: { id: string; height: number }) {\n return (\n <div className={styles.dividerContainer} style={{ height: height }}>\n <Divider className={styles.divider} key={id} />\n </div>\n );\n}\n\nexport function categoryItemRenderer({\n id,\n category,\n className\n}: {\n id: string;\n category: IComboboxCategory;\n className: string;\n}) {\n return <ComboboxCategory key={id} category={category} className={className} />;\n}\n\nexport function optionItemRenderer({\n id,\n index,\n option,\n className,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n optionRenderer,\n scrollRef,\n shouldScrollToSelectedItem,\n activeItemIndex,\n visualFocusItemIndex\n}: IOptionItemRendererArgs) {\n return (\n <ComboboxOption\n className={className}\n index={index}\n key={id}\n option={option}\n optionRenderer={optionRenderer}\n scrollRef={scrollRef}\n isActive={activeItemIndex === index}\n visualFocus={index === visualFocusItemIndex}\n onOptionClick={onOptionClick}\n onOptionHover={onOptionEnter}\n onOptionLeave={onOptionLeave}\n onOptionEnter={onOptionEnter}\n optionLineHeight={optionLineHeight}\n shouldScrollWhenActive={shouldScrollToSelectedItem}\n />\n );\n}\n"],"names":["DIVIDER_HEIGHT","CATEGORY_HEIGHT","useItemsData","_ref","categories","options","filterValue","withCategoriesDivider","optionLineHeight","useMemo","items","selectableItems","itemsMap","Map","optionsByCategories","getOptionsByCategories","optionIndex","Object","keys","forEach","categoryId","categoryIndex","withDivider","push","createDividerItemObject","isCategoryWithOptions","length","isFirstCategory","categoryObject","createCategoryItemObject","categoryData","className","cx","_defineProperty","comboboxItemsStyles","categoryWithOptions","categoryWithoutOptions","firstCategory","set","option","itemObject","createOptionItemObject","height","index","id","map","useKeyboardNavigation","_ref2","defaultVisualFocusFirstIndex","inputRef","onClick","isChildSelectable","getOptionId","filteredOptionsIds","_useActiveDescendantL","useActiveDescendantListFocus","focusedElementRef","focusedElementRole","roles","COMBOBOX","itemsIds","onItemClick","isItemSelectable","isIgnoreSpaceAsItemSelection","visualFocusItemIndex","visualFocusItemId","onOptionClick","_ref3","type","COMBOBOX_DIVIDER_ITEM","concat","_ref4","COMBOBOX_CATEGORY_ITEM","category","_ref5","COMBOBOX_OPTION_ITEM","belongToCategory","optionRenderer","isActive","shouldScrollToSelectedItem","comboboxItemRenderer","_ref6","customClassNames","innerElement","item","style","optionEvents","optionRenderData","isVirtualized","stickyCategories","otherArgs","__rest","dividerItemRenderer","categoryItemRenderer","styles","sticky","optionItemRenderer","assign","React","createElement","key","comboboxItemContainer","_ref7","dividerContainer","Divider","divider","_ref8","ComboboxCategory","_ref9","onOptionEnter","ComboboxOption","scrollRef","activeItemIndex","visualFocus","onOptionHover","onOptionLeave","shouldScrollWhenActive"],"mappings":"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"}
1	+ {"version":3,"file":"ComboboxHelpers.js","sources":["../../../../../src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx"],"sourcesContent":["import React, { type CSSProperties, type MutableRefObject, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ComboboxOption from \"../components/ComboboxOption/ComboboxOption\";\nimport ComboboxCategory from \"../components/ComboboxCategory/ComboboxCategory\";\nimport Divider from \"../../Divider/Divider\";\nimport {\n COMBOBOX_DIVIDER_ITEM,\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategory,\n type IComboboxOption,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IOptionItemRendererArgs,\n type IComboboxOptionEvents\n} from \"../components/ComboboxConstants\";\nimport useActiveDescendantListFocus from \"../../../hooks/useActiveDescendantListFocus\";\nimport { getOptionsByCategories } from \"../ComboboxService\";\nimport comboboxItemsStyles from \"../components/ComboboxItems/ComboboxItems.module.scss\";\nimport styles from \"./ComboboxHelpers.module.scss\";\n\nconst DIVIDER_HEIGHT = 17;\nconst CATEGORY_HEIGHT = 32;\n\nexport function useItemsData({\n categories,\n options,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n}: {\n categories: IComboboxCategoryMap;\n options: IComboboxOption[];\n filterValue: string;\n withCategoriesDivider: boolean;\n optionLineHeight: number;\n}) {\n return useMemo(() => {\n let items: IComboboxItem[] = [];\n let selectableItems: IComboboxOption[] = [];\n const itemsMap = new Map();\n\n if (categories) {\n const optionsByCategories = getOptionsByCategories(options, categories, filterValue);\n let optionIndex = 0;\n Object.keys(optionsByCategories).forEach((categoryId, categoryIndex) => {\n const withDivider = withCategoriesDivider && categoryIndex !== 0;\n if (withDivider) {\n items.push(createDividerItemObject({ categoryId }));\n }\n\n const isCategoryWithOptions = optionsByCategories[categoryId].length > 0;\n const isFirstCategory = categoryIndex === 0;\n\n const categoryObject = createCategoryItemObject({\n categoryId,\n categoryData: categories[categoryId],\n withDivider,\n className: cx({\n [comboboxItemsStyles.categoryWithOptions]: isCategoryWithOptions,\n [comboboxItemsStyles.categoryWithoutOptions]: !isCategoryWithOptions,\n [comboboxItemsStyles.firstCategory]: isFirstCategory\n })\n });\n\n // save category object in both items array and categories map\n items.push(categoryObject);\n itemsMap.set(categoryId, categoryObject);\n\n optionsByCategories[categoryId].forEach((option: IComboboxOption) => {\n const itemObject = createOptionItemObject({\n height: optionLineHeight,\n option,\n index: optionIndex,\n categoryId: categoryObject.id\n });\n\n itemsMap.set(itemObject.id, itemObject);\n items.push(itemObject);\n selectableItems.push(option);\n optionIndex++;\n });\n });\n } else {\n selectableItems = options;\n items = options.map((option, index) => {\n return createOptionItemObject({\n height: optionLineHeight,\n option,\n index\n });\n });\n }\n return { items, itemsMap, selectableItems };\n }, [categories, options, filterValue, withCategoriesDivider, optionLineHeight]);\n}\n\nexport function useKeyboardNavigation({\n defaultVisualFocusFirstIndex,\n inputRef,\n onClick,\n isChildSelectable,\n options,\n getOptionId\n}: {\n defaultVisualFocusFirstIndex?: boolean;\n inputRef: MutableRefObject<HTMLElement>;\n onClick: (event: React.KeyboardEvent \| React.MouseEvent, index: number) => void;\n isChildSelectable: (index: number) => boolean;\n options: IComboboxOption[];\n getOptionId: (optionId: string, index: number) => string;\n}) {\n const filteredOptionsIds = useMemo(\n () => options.map((option: IComboboxOption, index: number) => getOptionId(option?.id, index)),\n [getOptionId, options]\n );\n\n const { visualFocusItemIndex, visualFocusItemId } = useActiveDescendantListFocus({\n defaultVisualFocusFirstIndex,\n focusedElementRef: inputRef,\n focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n itemsIds: filteredOptionsIds,\n onItemClick: onClick,\n isItemSelectable: isChildSelectable,\n isIgnoreSpaceAsItemSelection: true\n });\n\n return { visualFocusItemIndex, visualFocusItemId, onOptionClick: onClick };\n}\nexport function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {\n return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };\n}\n\nexport function createCategoryItemObject({\n withDivider,\n categoryId,\n categoryData,\n className\n}: {\n withDivider: boolean;\n categoryId: string;\n categoryData: IComboboxCategory;\n className: string;\n}): IComboboxItem {\n return {\n height: CATEGORY_HEIGHT,\n type: COMBOBOX_CATEGORY_ITEM,\n category: categoryData,\n id: categoryId,\n withDivider,\n className\n };\n}\n\nexport function createOptionItemObject({\n option,\n height,\n index,\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n}: {\n option?: IComboboxOption;\n height?: number;\n index?: number;\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n isActive?: boolean;\n optionLineHeight?: number;\n shouldScrollToSelectedItem?: boolean;\n categoryId?: string;\n}): IComboboxItem {\n return {\n type: COMBOBOX_OPTION_ITEM,\n height,\n belongToCategory: true,\n index,\n option,\n id: option.id \|\| index.toString(),\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n };\n}\n\nexport function comboboxItemRenderer({\n item,\n style,\n optionEvents,\n optionRenderData,\n isVirtualized,\n stickyCategories\n}: {\n item: IComboboxItem;\n style: CSSProperties;\n optionEvents: IComboboxOptionEvents;\n optionRenderData: any;\n isVirtualized: boolean;\n stickyCategories?: boolean;\n}) {\n const { type, ...otherArgs } = item;\n let customClassNames;\n let innerElement;\n switch (type) {\n case COMBOBOX_DIVIDER_ITEM: {\n innerElement = dividerItemRenderer({ id: otherArgs.id, height: otherArgs.height });\n break;\n }\n case COMBOBOX_CATEGORY_ITEM: {\n innerElement = categoryItemRenderer({\n id: otherArgs.id,\n category: otherArgs.category,\n className: otherArgs.className\n });\n if (stickyCategories && !isVirtualized) {\n customClassNames = styles.sticky;\n }\n break;\n }\n case COMBOBOX_OPTION_ITEM: {\n innerElement = optionItemRenderer({\n ...otherArgs,\n ...optionEvents,\n ...optionRenderData\n });\n break;\n }\n }\n\n return (\n <div key={otherArgs.id} className={cx(styles.comboboxItemContainer, customClassNames)} style={style}>\n {innerElement}\n </div>\n );\n}\n\nexport function dividerItemRenderer({ id, height }: { id: string; height: number }) {\n return (\n <div className={styles.dividerContainer} style={{ height: height }}>\n <Divider className={styles.divider} key={id} />\n </div>\n );\n}\n\nexport function categoryItemRenderer({\n id,\n category,\n className\n}: {\n id: string;\n category: IComboboxCategory;\n className: string;\n}) {\n return <ComboboxCategory key={id} category={category} className={className} />;\n}\n\nexport function optionItemRenderer({\n id,\n index,\n option,\n className,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n optionRenderer,\n scrollRef,\n shouldScrollToSelectedItem,\n activeItemIndex,\n visualFocusItemIndex\n}: IOptionItemRendererArgs) {\n return (\n <ComboboxOption\n className={className}\n index={index}\n key={id}\n option={option}\n optionRenderer={optionRenderer}\n scrollRef={scrollRef}\n isActive={activeItemIndex === index}\n visualFocus={index === visualFocusItemIndex}\n onOptionClick={onOptionClick}\n onOptionHover={onOptionEnter}\n onOptionLeave={onOptionLeave}\n onOptionEnter={onOptionEnter}\n optionLineHeight={optionLineHeight}\n shouldScrollWhenActive={shouldScrollToSelectedItem}\n />\n );\n}\n"],"names":["DIVIDER_HEIGHT","CATEGORY_HEIGHT","useItemsData","_ref","categories","options","filterValue","withCategoriesDivider","optionLineHeight","useMemo","items","selectableItems","itemsMap","Map","optionsByCategories","getOptionsByCategories","optionIndex","Object","keys","forEach","categoryId","categoryIndex","withDivider","push","createDividerItemObject","isCategoryWithOptions","length","isFirstCategory","categoryObject","createCategoryItemObject","categoryData","className","cx","_defineProperty","comboboxItemsStyles","categoryWithOptions","categoryWithoutOptions","firstCategory","set","option","itemObject","createOptionItemObject","height","index","id","map","useKeyboardNavigation","_ref2","defaultVisualFocusFirstIndex","inputRef","onClick","isChildSelectable","getOptionId","filteredOptionsIds","_useActiveDescendantL","useActiveDescendantListFocus","focusedElementRef","focusedElementRole","roles","COMBOBOX","itemsIds","onItemClick","isItemSelectable","isIgnoreSpaceAsItemSelection","visualFocusItemIndex","visualFocusItemId","onOptionClick","_ref3","type","COMBOBOX_DIVIDER_ITEM","concat","_ref4","COMBOBOX_CATEGORY_ITEM","category","_ref5","COMBOBOX_OPTION_ITEM","belongToCategory","optionRenderer","isActive","shouldScrollToSelectedItem","comboboxItemRenderer","_ref6","customClassNames","innerElement","item","style","optionEvents","optionRenderData","isVirtualized","stickyCategories","otherArgs","__rest","dividerItemRenderer","categoryItemRenderer","styles","sticky","optionItemRenderer","assign","React","createElement","key","comboboxItemContainer","_ref7","dividerContainer","Divider","divider","_ref8","ComboboxCategory","_ref9","onOptionEnter","ComboboxOption","scrollRef","activeItemIndex","visualFocus","onOptionHover","onOptionLeave","shouldScrollWhenActive"],"mappings":"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"}

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxItemContainer:"comboboxItemContainer_5aa0051bbd",dividerContainer:"dividerContainer_58c5666ecb",divider:"divider_f174fd80b9",sticky:"sticky_91338255ca"};!function(e){const n="s_id-cfec7f62c06c_4_0_0-alpha_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_5aa0051bbd {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_58c5666ecb {\n  position: relative;\n  width: 95%;\n}\n\n.divider_f174fd80b9 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-inline-start: -12px;\n}\n\n.sticky_91338255ca {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer_dd12752af0",dividerContainer:"dividerContainer_3da18f9eb4",divider:"divider_7edd40232d",sticky:"sticky_c68882d446"};!function(e){const n="s_id-cfec7f62c06c_4_0_0-alpha_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,d.firstChild?d.insertBefore(i,d.firstChild):d.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_dd12752af0 {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_3da18f9eb4 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_7edd40232d {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-inline-start: -12px;\n}\n\n.sticky_c68882d446 {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
 //# sourceMappingURL=ComboboxHelpers.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxCategory:"comboboxCategory_720c794516"};!function(e){const t="s_id-ddc89c066e12_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxCategory_720c794516 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--space-8);\n}");export{e as default};
+var e={comboboxCategory:"comboboxCategory_6529c84716"};!function(e){const t="s_id-ddc89c066e12_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxCategory_6529c84716 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=ComboboxCategory.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxItems/ComboboxItems.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxItems.js","sources":["../../../../../../src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, type RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { comboboxItemRenderer } from \"../../ComboboxHelpers/ComboboxHelpers\";\nimport VirtualizedList from \"../../../../components/VirtualizedList/VirtualizedList\";\nimport {\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IComboboxOption,\n type IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport styles from \"./ComboboxItems.module.scss\";\n\nexport interface ComboboxItemsProps extends IComboboxOptionEvents {\n /*\n Class name applied to the options container.\n /\n className?: string;\n /\n Class name applied to individual options.\n /\n optionClassName?: string;\n /\n The categories available in the combobox.\n /\n categories?: IComboboxCategoryMap;\n /\n The list of options displayed in the combobox.\n /\n options?: IComboboxItem[];\n /\n Custom renderer for an option.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n The index of the currently active item.\n /\n activeItemIndex?: number;\n /\n The index of the item with visual focus.\n /\n visualFocusItemIndex?: number;\n /\n The height of each option item.\n /\n optionLineHeight?: number;\n /\n If true, the list scrolls to the selected item when opened.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n If true, only renders visible options (optimization for large lists).\n /\n renderOnlyVisibleOptions?: boolean;\n /\n Callback fired when the active category changes.\n /\n onActiveCategoryChanged?: (category: IComboboxItem) => void;\n /\n The maximum number of options displayed without scrolling.\n /\n maxOptionsWithoutScroll?: number;\n /\n A map of item IDs to item data.\n /\n itemsMap?: Map<string, IComboboxItem>;\n /\n If true, categories remain visible when scrolling.\n /\n stickyCategories?: boolean;\n /\n The ID of the options container.\n /\n id?: string;\n}\n\nexport const ComboboxItems: React.FC<ComboboxItemsProps> = forwardRef(\n (\n {\n className,\n optionClassName,\n categories,\n options,\n optionRenderer,\n activeItemIndex,\n visualFocusItemIndex,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n shouldScrollToSelectedItem,\n renderOnlyVisibleOptions,\n onActiveCategoryChanged,\n maxOptionsWithoutScroll,\n itemsMap,\n stickyCategories,\n id\n },\n ref: RefObject<HTMLDivElement>\n ) => {\n const activeCategoryId = useRef<string>();\n const style = useMemo(() => {\n if (maxOptionsWithoutScroll) {\n // Adding 0.5 to show next option to indicate scroll is available\n const maxCount = Math.min(options.length + Object.keys(categories ?? {}).length, maxOptionsWithoutScroll + 0.5);\n return { height: optionLineHeight maxCount };\n }\n return undefined;\n }, [maxOptionsWithoutScroll, optionLineHeight, options, categories]);\n\n const createItemElementRenderer = useCallback(\n (item: IComboboxItem, index: number, style: CSSProperties) =>\n comboboxItemRenderer({\n stickyCategories,\n item,\n style,\n optionEvents: {\n onOptionClick,\n onOptionEnter,\n onOptionLeave\n },\n optionRenderData: {\n className: optionClassName,\n optionLineHeight,\n optionRenderer,\n visualFocusItemIndex,\n scrollRef: renderOnlyVisibleOptions ? null : ref,\n activeItemIndex,\n shouldScrollToSelectedItem\n },\n isVirtualized: renderOnlyVisibleOptions\n }),\n [\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionClassName,\n optionLineHeight,\n optionRenderer,\n visualFocusItemIndex,\n renderOnlyVisibleOptions,\n ref,\n activeItemIndex,\n shouldScrollToSelectedItem\n ]\n );\n\n const onItemsRender = useCallback(\n ({ firstItemId }: { firstItemId?: string }) => {\n window.requestAnimationFrame(() => {\n const itemData = itemsMap.get(firstItemId);\n if (itemData && (itemData.type === COMBOBOX_CATEGORY_ITEM \|\| itemData.type === COMBOBOX_OPTION_ITEM)) {\n const newActiveCategoryId =\n itemData.type === COMBOBOX_OPTION_ITEM && itemData.categoryId ? itemData.categoryId : itemData.id;\n\n if (newActiveCategoryId !== activeCategoryId.current) {\n activeCategoryId.current = newActiveCategoryId;\n const categoryObject = itemsMap.get(activeCategoryId.current);\n onActiveCategoryChanged(categoryObject);\n }\n }\n });\n },\n [itemsMap, onActiveCategoryChanged]\n );\n\n let itemsElements;\n\n // If we request to render only the items which visible in a given moment (optimization for very large lists)\n if (renderOnlyVisibleOptions) {\n itemsElements = (\n <VirtualizedList\n ref={ref}\n className={cx(styles.optionsContainer, className)}\n items={options}\n itemRenderer={createItemElementRenderer}\n role=\"listbox\"\n scrollableClassName={styles.scrollableContainer}\n onItemsRendered={onItemsRender}\n style={style}\n id={id}\n />\n );\n } else {\n itemsElements = (\n <div\n className={cx(styles.scrollableContainer, styles.optionsContainer, className)}\n role=\"listbox\"\n id={id}\n style={style}\n ref={ref}\n >\n {options.map((itemData, index) => createItemElementRenderer(itemData, index, undefined))}\n </div>\n );\n }\n\n return itemsElements;\n }\n);\n"],"names":["ComboboxItems","forwardRef","_ref","ref","className","optionClassName","categories","options","optionRenderer","activeItemIndex","visualFocusItemIndex","onOptionClick","onOptionEnter","onOptionLeave","optionLineHeight","shouldScrollToSelectedItem","renderOnlyVisibleOptions","onActiveCategoryChanged","maxOptionsWithoutScroll","itemsMap","stickyCategories","id","activeCategoryId","useRef","style","useMemo","height","Math","min","length","Object","keys","createItemElementRenderer","useCallback","item","index","comboboxItemRenderer","optionEvents","optionRenderData","scrollRef","isVirtualized","onItemsRender","_ref2","firstItemId","window","requestAnimationFrame","itemData","get","type","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","newActiveCategoryId","categoryId","current","categoryObject","React","createElement","VirtualizedList","cx","styles","optionsContainer","items","itemRenderer","role","scrollableClassName","scrollableContainer","onItemsRendered","map","undefined"],"mappings":"8XA6EO,IAAMA,EAA8CC,GACzD,SAAAC,EAqBEC,GACE,IApBAC,EAASF,EAATE,UACAC,EAAeH,EAAfG,gBACAC,EAAUJ,EAAVI,WACAC,EAAOL,EAAPK,QACAC,EAAcN,EAAdM,eACAC,EAAeP,EAAfO,gBACAC,EAAoBR,EAApBQ,qBACAC,EAAaT,EAAbS,cACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAgBZ,EAAhBY,iBACAC,EAA0Bb,EAA1Ba,2BACAC,EAAwBd,EAAxBc,yBACAC,EAAuBf,EAAvBe,wBACAC,EAAuBhB,EAAvBgB,wBACAC,EAAQjB,EAARiB,SACAC,EAAgBlB,EAAhBkB,iBACAC,EAAEnB,EAAFmB,GAIIC,EAAmBC,IACnBC,EAAQC,GAAQ,WACpB,GAAIP,EAGF,MAAO,CAAEQ,OAAQZ,EADAa,KAAKC,IAAIrB,EAAQsB,OAASC,OAAOC,KAAKzB,QAAAA,EAAc,CAAA,GAAIuB,OAAQX,EAA0B,IAI9G,GAAE,CAACA,EAAyBJ,EAAkBP,EAASD,IAElD0B,EAA4BC,GAChC,SAACC,EAAqBC,EAAeX,GAAoB,OACvDY,EAAqB,CACnBhB,iBAAAA,EACAc,KAAAA,EACAV,MAAAA,EACAa,aAAc,CACZ1B,cAAAA,EACAC,cAAAA,EACAC,cAAAA,GAEFyB,iBAAkB,CAChBlC,UAAWC,EACXS,iBAAAA,EACAN,eAAAA,EACAE,qBAAAA,EACA6B,UAAWvB,EAA2B,KAAOb,EAC7CM,gBAAAA,EACAM,2BAAAA,GAEFyB,cAAexB,GAEnB,GAAA,CACEL,EACAC,EACAC,EACAR,EACAS,EACAN,EACAE,EACAM,EACAb,EACAM,EACAM,IAIE0B,EAAgBR,GACpB,SAAAS,GAA8C,IAA3CC,EAAWD,EAAXC,YACDC,OAAOC,uBAAsB,WAC3B,IAAMC,EAAW3B,EAAS4B,IAAIJ,GAC9B,GAAIG,IAAaA,EAASE,OAASC,GAA0BH,EAASE,OAASE,GAAuB,CACpG,IAAMC,EACJL,EAASE,OAASE,GAAwBJ,EAASM,WAAaN,EAASM,WAAaN,EAASzB,GAEjG,GAAI8B,IAAwB7B,EAAiB+B,QAAS,CACpD/B,EAAiB+B,QAAUF,EAC3B,IAAMG,EAAiBnC,EAAS4B,IAAIzB,EAAiB+B,SACrDpC,EAAwBqC,~~EACzB~~,CACF,~~CACH~~,GACF,GACA,CAACnC,EAAUF,IAkCb,OA5BID,EAEAuC,EAACC,cAAAC,GACCtD,IAAKA,EACLC,UAAWsD,EAAGC,EAAOC,iBAAkBxD,GACvCyD,MAAOtD,EACPuD,aAAc9B,EACd+B,KAAK,UACLC,oBAAqBL,EAAOM,oBAC5BC,gBAAiBzB,EACjBjB,MAAOA,EACPH,GAAIA,IAKNkC,EAAAC,cAAA,MAAA,CACEpD,UAAWsD,EAAGC,EAAOM,oBAAqBN,EAAOC,iBAAkBxD,GACnE2D,KAAK,UACL1C,GAAIA,EACJG,MAAOA,EACPrB,IAAKA,GAEJI,EAAQ4D,KAAI,SAACrB,EAAUX,GAAK,OAAKH,EAA0Bc,EAAUX,OAAOiC,EAAU,IAM/F"}
1	+ {"version":3,"file":"ComboboxItems.js","sources":["../../../../../../src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, type RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { comboboxItemRenderer } from \"../../ComboboxHelpers/ComboboxHelpers\";\nimport VirtualizedList from \"../../../../components/VirtualizedList/VirtualizedList\";\nimport {\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IComboboxOption,\n type IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport styles from \"./ComboboxItems.module.scss\";\n\nexport interface ComboboxItemsProps extends IComboboxOptionEvents {\n /*\n Class name applied to the options container.\n /\n className?: string;\n /\n Class name applied to individual options.\n /\n optionClassName?: string;\n /\n The categories available in the combobox.\n /\n categories?: IComboboxCategoryMap;\n /\n The list of options displayed in the combobox.\n /\n options?: IComboboxItem[];\n /\n Custom renderer for an option.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n The index of the currently active item.\n /\n activeItemIndex?: number;\n /\n The index of the item with visual focus.\n /\n visualFocusItemIndex?: number;\n /\n The height of each option item.\n /\n optionLineHeight?: number;\n /\n If true, the list scrolls to the selected item when opened.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n If true, only renders visible options (optimization for large lists).\n /\n renderOnlyVisibleOptions?: boolean;\n /\n Callback fired when the active category changes.\n /\n onActiveCategoryChanged?: (category: IComboboxItem) => void;\n /\n The maximum number of options displayed without scrolling.\n /\n maxOptionsWithoutScroll?: number;\n /\n A map of item IDs to item data.\n /\n itemsMap?: Map<string, IComboboxItem>;\n /\n If true, categories remain visible when scrolling.\n /\n stickyCategories?: boolean;\n /\n The ID of the options container.\n /\n id?: string;\n}\n\nexport const ComboboxItems: React.FC<ComboboxItemsProps> = forwardRef(\n (\n {\n className,\n optionClassName,\n categories,\n options,\n optionRenderer,\n activeItemIndex,\n visualFocusItemIndex,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n shouldScrollToSelectedItem,\n renderOnlyVisibleOptions,\n onActiveCategoryChanged,\n maxOptionsWithoutScroll,\n itemsMap,\n stickyCategories,\n id\n },\n ref: RefObject<HTMLDivElement>\n ) => {\n const activeCategoryId = useRef<string>();\n const style = useMemo(() => {\n if (maxOptionsWithoutScroll) {\n // Adding 0.5 to show next option to indicate scroll is available\n const maxCount = Math.min(options.length + Object.keys(categories ?? {}).length, maxOptionsWithoutScroll + 0.5);\n return { height: optionLineHeight maxCount };\n }\n return undefined;\n }, [maxOptionsWithoutScroll, optionLineHeight, options, categories]);\n\n const createItemElementRenderer = useCallback(\n (item: IComboboxItem, index: number, style: CSSProperties) =>\n comboboxItemRenderer({\n stickyCategories,\n item,\n style,\n optionEvents: {\n onOptionClick,\n onOptionEnter,\n onOptionLeave\n },\n optionRenderData: {\n className: optionClassName,\n optionLineHeight,\n optionRenderer,\n visualFocusItemIndex,\n scrollRef: renderOnlyVisibleOptions ? null : ref,\n activeItemIndex,\n shouldScrollToSelectedItem\n },\n isVirtualized: renderOnlyVisibleOptions\n }),\n [\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionClassName,\n optionLineHeight,\n optionRenderer,\n visualFocusItemIndex,\n renderOnlyVisibleOptions,\n ref,\n activeItemIndex,\n shouldScrollToSelectedItem\n ]\n );\n\n const onItemsRender = useCallback(\n ({ firstItemId }: { firstItemId?: string }) => {\n window.requestAnimationFrame(() => {\n const itemData = itemsMap.get(firstItemId);\n if (itemData && (itemData.type === COMBOBOX_CATEGORY_ITEM \|\| itemData.type === COMBOBOX_OPTION_ITEM)) {\n const newActiveCategoryId =\n itemData.type === COMBOBOX_OPTION_ITEM && itemData.categoryId ? itemData.categoryId : itemData.id;\n\n if (newActiveCategoryId !== activeCategoryId.current) {\n activeCategoryId.current = newActiveCategoryId;\n const categoryObject = itemsMap.get(activeCategoryId.current);\n onActiveCategoryChanged(categoryObject);\n }\n }\n });\n },\n [itemsMap, onActiveCategoryChanged]\n );\n\n let itemsElements;\n\n // If we request to render only the items which visible in a given moment (optimization for very large lists)\n if (renderOnlyVisibleOptions) {\n itemsElements = (\n <VirtualizedList\n ref={ref}\n className={cx(styles.optionsContainer, className)}\n items={options}\n itemRenderer={createItemElementRenderer}\n role=\"listbox\"\n scrollableClassName={styles.scrollableContainer}\n onItemsRendered={onItemsRender}\n style={style}\n id={id}\n />\n );\n } else {\n itemsElements = (\n <div\n className={cx(styles.scrollableContainer, styles.optionsContainer, className)}\n role=\"listbox\"\n id={id}\n style={style}\n ref={ref}\n >\n {options.map((itemData, index) => createItemElementRenderer(itemData, index, undefined))}\n </div>\n );\n }\n\n return itemsElements;\n }\n);\n"],"names":["ComboboxItems","forwardRef","_ref","ref","className","optionClassName","categories","options","optionRenderer","activeItemIndex","visualFocusItemIndex","onOptionClick","onOptionEnter","onOptionLeave","optionLineHeight","shouldScrollToSelectedItem","renderOnlyVisibleOptions","onActiveCategoryChanged","maxOptionsWithoutScroll","itemsMap","stickyCategories","id","activeCategoryId","useRef","style","useMemo","height","Math","min","length","Object","keys","createItemElementRenderer","useCallback","item","index","comboboxItemRenderer","optionEvents","optionRenderData","scrollRef","isVirtualized","onItemsRender","_ref2","firstItemId","window","requestAnimationFrame","itemData","get","type","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","newActiveCategoryId","categoryId","current","categoryObject","React","createElement","VirtualizedList","cx","styles","optionsContainer","items","itemRenderer","role","scrollableClassName","scrollableContainer","onItemsRendered","map","undefined"],"mappings":"8XA6EO,IAAMA,EAA8CC,GACzD,SAAAC,EAqBEC,GACE,IApBAC,EAASF,EAATE,UACAC,EAAeH,EAAfG,gBACAC,EAAUJ,EAAVI,WACAC,EAAOL,EAAPK,QACAC,EAAcN,EAAdM,eACAC,EAAeP,EAAfO,gBACAC,EAAoBR,EAApBQ,qBACAC,EAAaT,EAAbS,cACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAgBZ,EAAhBY,iBACAC,EAA0Bb,EAA1Ba,2BACAC,EAAwBd,EAAxBc,yBACAC,EAAuBf,EAAvBe,wBACAC,EAAuBhB,EAAvBgB,wBACAC,EAAQjB,EAARiB,SACAC,EAAgBlB,EAAhBkB,iBACAC,EAAEnB,EAAFmB,GAIIC,EAAmBC,IACnBC,EAAQC,GAAQ,WACpB,GAAIP,EAGF,MAAO,CAAEQ,OAAQZ,EADAa,KAAKC,IAAIrB,EAAQsB,OAASC,OAAOC,KAAKzB,QAAAA,EAAc,CAAA,GAAIuB,OAAQX,EAA0B,IAI9G,GAAE,CAACA,EAAyBJ,EAAkBP,EAASD,IAElD0B,EAA4BC,GAChC,SAACC,EAAqBC,EAAeX,GAAoB,OACvDY,EAAqB,CACnBhB,iBAAAA,EACAc,KAAAA,EACAV,MAAAA,EACAa,aAAc,CACZ1B,cAAAA,EACAC,cAAAA,EACAC,cAAAA,GAEFyB,iBAAkB,CAChBlC,UAAWC,EACXS,iBAAAA,EACAN,eAAAA,EACAE,qBAAAA,EACA6B,UAAWvB,EAA2B,KAAOb,EAC7CM,gBAAAA,EACAM,2BAAAA,GAEFyB,cAAexB,GAEnB,GAAA,CACEL,EACAC,EACAC,EACAR,EACAS,EACAN,EACAE,EACAM,EACAb,EACAM,EACAM,IAIE0B,EAAgBR,GACpB,SAAAS,GAA8C,IAA3CC,EAAWD,EAAXC,YACDC,OAAOC,uBAAsB,WAC3B,IAAMC,EAAW3B,EAAS4B,IAAIJ,GAC9B,GAAIG,IAAaA,EAASE,OAASC,GAA0BH,EAASE,OAASE,GAAuB,CACpG,IAAMC,EACJL,EAASE,OAASE,GAAwBJ,EAASM,WAAaN,EAASM,WAAaN,EAASzB,GAEjG,GAAI8B,IAAwB7B,EAAiB+B,QAAS,CACpD/B,EAAiB+B,QAAUF,EAC3B,IAAMG,EAAiBnC,EAAS4B,IAAIzB,EAAiB+B,SACrDpC,EAAwBqC,EAC1B,CACF,CACF,GACF,GACA,CAACnC,EAAUF,IAkCb,OA5BID,EAEAuC,EAACC,cAAAC,GACCtD,IAAKA,EACLC,UAAWsD,EAAGC,EAAOC,iBAAkBxD,GACvCyD,MAAOtD,EACPuD,aAAc9B,EACd+B,KAAK,UACLC,oBAAqBL,EAAOM,oBAC5BC,gBAAiBzB,EACjBjB,MAAOA,EACPH,GAAIA,IAKNkC,EAAAC,cAAA,MAAA,CACEpD,UAAWsD,EAAGC,EAAOM,oBAAqBN,EAAOC,iBAAkBxD,GACnE2D,KAAK,UACL1C,GAAIA,EACJG,MAAOA,EACPrB,IAAKA,GAEJI,EAAQ4D,KAAI,SAACrB,EAAUX,GAAK,OAAKH,EAA0Bc,EAAUX,OAAOiC,EAAU,IAM/F"}

package/dist/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var t={scrollableContainer:"scrollableContainer_41c5d9090c",optionsContainer:"optionsContainer_eb780a569f",categoryWithOptions:"categoryWithOptions_32953c07a6",firstCategory:"firstCategory_4ee35ba4fb",categoryWithoutOptions:"categoryWithoutOptions_1f0c1b3a41"};!function(t){const e="s_id-9dc0ac18aa3d_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_41c5d9090c::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_41c5d9090c::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_eb780a569f {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.categoryWithOptions_32953c07a6.firstCategory_4ee35ba4fb,\n.categoryWithoutOptions_1f0c1b3a41.firstCategory_4ee35ba4fb {\n  padding-top: 0;\n}\n.categoryWithOptions_32953c07a6 {\n  margin-bottom: var(--space-4);\n}\n.categoryWithoutOptions_1f0c1b3a41 {\n  margin-bottom: 0;\n}");export{t as default};
+var t={scrollableContainer:"scrollableContainer_43e00b498a",optionsContainer:"optionsContainer_c956320c4d",categoryWithOptions:"categoryWithOptions_1fcd7d0be9",firstCategory:"firstCategory_043f74508a",categoryWithoutOptions:"categoryWithoutOptions_0191e206b6"};!function(t){const e="s_id-9dc0ac18aa3d_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_43e00b498a::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_43e00b498a::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_c956320c4d {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.categoryWithOptions_1fcd7d0be9.firstCategory_043f74508a,\n.categoryWithoutOptions_0191e206b6.firstCategory_043f74508a {\n  padding-top: 0;\n}\n.categoryWithOptions_1fcd7d0be9 {\n  margin-bottom: var(--space-4);\n}\n.categoryWithoutOptions_0191e206b6 {\n  margin-bottom: 0;\n}");export{t as default};
 //# sourceMappingURL=ComboboxItems.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var o={comboboxOption:"comboboxOption_95ae09d0d0",disabled:"disabled_134641a031",selected:"selected_00235f47af",active:"active_78a9acb5ee",activeOutline:"activeOutline_4a1f87a4ac",optionLabel:"optionLabel_706103897e",optionIcon:"optionIcon_6641c28372",left:"left_5ce961c52d"};!function(o){const e="s_id-3db504899945_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxOption_95ae09d0d0 {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n.comboboxOption_95ae09d0d0.disabled_134641a031 {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.comboboxOption_95ae09d0d0.disabled_134641a031:hover {\n  background-color: transparent;\n}\n.comboboxOption_95ae09d0d0.selected_00235f47af {\n  background-color: var(--primary-selected-color);\n}\n.comboboxOption_95ae09d0d0:hover:not(.disabled_134641a031):not(.selected_00235f47af),\n.comboboxOption_95ae09d0d0.active_78a9acb5ee {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n.comboboxOption_95ae09d0d0.activeOutline_4a1f87a4ac {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n.comboboxOption_95ae09d0d0 .optionLabel_706103897e {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxOption_95ae09d0d0 .optionIcon_6641c28372 {\n  flex: 0 0 auto;\n}\n.comboboxOption_95ae09d0d0 .optionIcon_6641c28372.left_5ce961c52d {\n  margin-inline-end: 4px;\n}");export{o as default};
+var e={comboboxOption:"comboboxOption_5e47287e74",disabled:"disabled_8d24e12e7a",selected:"selected_f8eae401ce",active:"active_8a5c36fd8f",activeOutline:"activeOutline_7edcb28935",optionLabel:"optionLabel_ab09bf66ce",optionIcon:"optionIcon_971a81121f",left:"left_afe0a59fd5"};!function(e){const o="s_id-3db504899945_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const t=document.createElement("style");t.id=o,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxOption_5e47287e74 {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n.comboboxOption_5e47287e74.disabled_8d24e12e7a {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.comboboxOption_5e47287e74.disabled_8d24e12e7a:hover {\n  background-color: transparent;\n}\n.comboboxOption_5e47287e74.selected_f8eae401ce {\n  background-color: var(--primary-selected-color);\n}\n.comboboxOption_5e47287e74:hover:not(.disabled_8d24e12e7a):not(.selected_f8eae401ce),\n.comboboxOption_5e47287e74.active_8a5c36fd8f {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n.comboboxOption_5e47287e74.activeOutline_7edcb28935 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n.comboboxOption_5e47287e74 .optionLabel_ab09bf66ce {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxOption_5e47287e74 .optionIcon_971a81121f {\n  flex: 0 0 auto;\n}\n.comboboxOption_5e47287e74 .optionIcon_971a81121f.left_afe0a59fd5 {\n  margin-inline-end: 4px;\n}");export{e as default};
 //# sourceMappingURL=ComboboxOption.module.scss.js.map

package/dist/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={stickyCategoryHeader:"stickyCategoryHeader_1f5705958f"};!function(e){const t="s_id-c981e92fbca0_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_1f5705958f {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--space-4);\n  display: flex;\n  align-items: center;\n}");export{e as default};
+var e={stickyCategoryHeader:"stickyCategoryHeader_e3d25709a3"};!function(e){const t="s_id-c981e92fbca0_4_0_0-alpha_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_e3d25709a3 {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--space-4);\n  display: flex;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=StickyCategoryHeader.module.scss.js.map