npm - @vibe/core - Versions diffs - 3.60.0 → 3.61.0 - Mend

@vibe/core 3.60.0 → 3.61.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 (462) hide show

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

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_c68fd7a480",subTextContainer:"subTextContainer_8ec4114c30",buttonsContainer:"buttonsContainer_64ac758069",fullWidth:"fullWidth_e23f2ec89e",button:"button_b03eacc24e",activeButton:"activeButton_80fc829c33",disabled:"disabled_1c2b96c072",buttonDisabled:"buttonDisabled_46525538ab",startBorder:"startBorder_e2c66dc856",endBorder:"endBorder_f9ad750840",kindTertiary:"kindTertiary_609cd60c51",optionText:"optionText_56d9161ac4",selected:"selected_0884e33fc3",wrapper:"wrapper_997eb33177"};!function(n){const t="s_id-4b7ca9f3603b_3_59_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)}(".buttonGroup_c68fd7a480 {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_8ec4114c30 {\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\n.buttonsContainer_64ac758069 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_64ac758069.fullWidth_e23f2ec89e {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.buttonsContainer_64ac758069 .button_b03eacc24e {\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\n.buttonsContainer_64ac758069 .button_b03eacc24e.activeButton_80fc829c33 {\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\n.buttonsContainer_64ac758069 .button_b03eacc24e.activeButton_80fc829c33:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.buttonsContainer_64ac758069 .button_b03eacc24e.disabled_1c2b96c072, .buttonsContainer_64ac758069 .button_b03eacc24e.buttonDisabled_46525538ab {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonsContainer_64ac758069 .button_b03eacc24e.startBorder_e2c66dc856 {\n  border-inline-start-width: 1px;\n}\n\n.buttonsContainer_64ac758069 .button_b03eacc24e.endBorder_f9ad750840 {\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_64ac758069 .button_b03eacc24e.fullWidth_e23f2ec89e {\n  width: 100%;\n  display: flex;\n}\n\n.kindTertiary_609cd60c51 .buttonsContainer_64ac758069 .button_b03eacc24e {\n  border-color: transparent;\n}\n\n.kindTertiary_609cd60c51 .buttonsContainer_64ac758069 .button_b03eacc24e:first-child {\n  border-color: transparent;\n}\n\n.optionText_56d9161ac4:not(.disabled_1c2b96c072) {\n  color: var(--primary-text-color);\n}\n\n.optionText_56d9161ac4:not(.disabled_1c2b96c072).selected_0884e33fc3 {\n  color: var(--primary-text-color);\n}\n\n.wrapper_997eb33177.disabled_1c2b96c072 {\n  cursor: not-allowed;\n}\n\n.fullWidth_e23f2ec89e {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_00cb73bbe3",subTextContainer:"subTextContainer_27fc5cf144",buttonsContainer:"buttonsContainer_46647c9b4a",fullWidth:"fullWidth_bfe69829b7",button:"button_4e2fac370f",activeButton:"activeButton_938f2f2fe1",disabled:"disabled_79ee383eb2",buttonDisabled:"buttonDisabled_556eed33d7",startBorder:"startBorder_164f415b5c",endBorder:"endBorder_afafad1edd",kindTertiary:"kindTertiary_0642aea69d",optionText:"optionText_350c2295ce",selected:"selected_7ba1d5f753",wrapper:"wrapper_9dcadaf91e"};!function(n){const t="s_id-4b7ca9f3603b_3_60_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)}(".buttonGroup_00cb73bbe3 {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_27fc5cf144 {\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\n.buttonsContainer_46647c9b4a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_46647c9b4a.fullWidth_bfe69829b7 {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.buttonsContainer_46647c9b4a .button_4e2fac370f {\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\n.buttonsContainer_46647c9b4a .button_4e2fac370f.activeButton_938f2f2fe1 {\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\n.buttonsContainer_46647c9b4a .button_4e2fac370f.activeButton_938f2f2fe1:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.buttonsContainer_46647c9b4a .button_4e2fac370f.disabled_79ee383eb2, .buttonsContainer_46647c9b4a .button_4e2fac370f.buttonDisabled_556eed33d7 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonsContainer_46647c9b4a .button_4e2fac370f.startBorder_164f415b5c {\n  border-inline-start-width: 1px;\n}\n\n.buttonsContainer_46647c9b4a .button_4e2fac370f.endBorder_afafad1edd {\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_46647c9b4a .button_4e2fac370f.fullWidth_bfe69829b7 {\n  width: 100%;\n  display: flex;\n}\n\n.kindTertiary_0642aea69d .buttonsContainer_46647c9b4a .button_4e2fac370f {\n  border-color: transparent;\n}\n\n.kindTertiary_0642aea69d .buttonsContainer_46647c9b4a .button_4e2fac370f:first-child {\n  border-color: transparent;\n}\n\n.optionText_350c2295ce:not(.disabled_79ee383eb2) {\n  color: var(--primary-text-color);\n}\n\n.optionText_350c2295ce:not(.disabled_79ee383eb2).selected_7ba1d5f753 {\n  color: var(--primary-text-color);\n}\n\n.wrapper_9dcadaf91e.disabled_79ee383eb2 {\n  cursor: not-allowed;\n}\n\n.fullWidth_bfe69829b7 {\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 a,useRef as t,useCallback as o,useEffect as n,useMemo as i}from"react";import r from"classnames";import{isNil as l,noop as s}from"lodash-es";import c from"../Icon/Icon.js";import{useSupportFirefoxLabelClick as m}from"./hooks/useSupportFirefoxLabelClick.js";import d from"../../hooks/useMergeRef.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as C}from"../../tests/constants.js";import b from"../Text/Text.js";import f from"./Checkbox.module.scss.js";import E from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";var k=a((function(a,k){var v=a.className,x=a.checkboxClassName,B=a.labelClassName,N=a.ariaLabel,y=a.label,H=a.ariaLabelledBy,F=a.onChange,K=void 0===F?s:F,O=a.checked,X=a.autoFocus,g=a.indeterminate,j=void 0!==g&&g,L=a.disabled,w=void 0!==L&&L,I=a.defaultChecked,S=a.tabIndex,A=a.value,M=void 0===A?"":A,T=a.name,_=void 0===T?"":T,R=a.id,U=a.separateLabel,q=void 0!==U&&U,z=a["data-testid"],D=t(null),G=d(k,D),J=t(null),P=o((function(){var e=D.current;e&&window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){e.blur()}))}))}),[D]),Q=I;l(Q)&&l(O)&&(Q=!1),n((function(){D.current&&(D.current.indeterminate=j)}),[D,j]);var V=m({inputRef:D}).onClickCapture,W=i((function(){return N||("string"==typeof y?y:"")}),[N,y]);return q?e.createElement("div",{className:r(f.wrapper,v),"data-testid":z||u(p.CHECKBOX,R)},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("label",{htmlFor:R,className:r(f.checkbox,x),"data-testid":u(p.CHECKBOX_CHECKBOX,R),"data-vibe":C.CHECKBOX,onMouseUp:P,onClickCapture:V},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement("label",{htmlFor:R,className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R),onMouseUp:P,onClickCapture:V},e.createElement(b,{element:"span",type:"text2"},y))):e.createElement("label",{className:r(f.wrapper,v),onMouseUp:P,"data-testid":z||u(p.CHECKBOX,R),htmlFor:R,onClickCapture:V},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("div",{className:r(f.checkbox,x),ref:J,"data-testid":u(p.CHECKBOX_CHECKBOX,R),"data-vibe":C.CHECKBOX},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement(b,{element:"span",type:"text2",className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R)},y))}));export{k as default};
+import e,{forwardRef as a,useRef as t,useCallback as o,useEffect as n,useMemo as i}from"react";import r from"classnames";import{isNil as l,noop as s}from"lodash-es";import c from"../Icon/Icon.js";import{useSupportFirefoxLabelClick as m}from"./hooks/useSupportFirefoxLabelClick.js";import d from"../../hooks/useMergeRef.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as C}from"../../tests/constants.js";import b from"../Text/Text.js";import f from"./Checkbox.module.scss.js";import E from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";var k=a((function(a,k){var v=a.className,x=a.checkboxClassName,B=a.labelClassName,N=a.ariaLabel,y=a.label,H=a.ariaLabelledBy,F=a.onChange,K=void 0===F?s:F,O=a.checked,X=a.autoFocus,g=a.indeterminate,j=void 0!==g&&g,L=a.disabled,w=void 0!==L&&L,I=a.defaultChecked,S=a.tabIndex,A=a.value,M=void 0===A?"":A,T=a.name,_=void 0===T?"":T,R=a.id,U=a.separateLabel,q=void 0!==U&&U,z=a["data-testid"],D=t(null),G=d(k,D),J=t(null),P=o((function(){var e=D.current;e&&window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){e.blur()}))}))}),[D]),Q=I;l(Q)&&l(O)&&(Q=!1),n((function(){D.current&&(D.current.indeterminate=j)}),[D,j]);var V=m({inputRef:D}).onClickCapture,W=i((function(){return N||("string"==typeof y?y:"")}),[N,y]);return q?e.createElement("div",{className:r(f.wrapper,v),"data-testid":z||u(p.CHECKBOX,R),"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("label",{htmlFor:R,className:r(f.checkbox,x),"data-testid":u(p.CHECKBOX_CHECKBOX,R),onMouseUp:P,onClickCapture:V},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement("label",{htmlFor:R,className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R),onMouseUp:P,onClickCapture:V},e.createElement(b,{element:"span",type:"text2"},y))):e.createElement("label",{className:r(f.wrapper,v),onMouseUp:P,"data-testid":z||u(p.CHECKBOX,R),htmlFor:R,onClickCapture:V,"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("div",{className:r(f.checkbox,x),ref:J,"data-testid":u(p.CHECKBOX_CHECKBOX,R)},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement(b,{element:"span",type:"text2",className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R)},y))}));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 \"lodash-es\";\nimport Icon from \"../Icon/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 \"../Text/Text\";\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 ariaLabel?: 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 ariaLabelledBy?: 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 ariaLabel,\n label,\n 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 >\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 data-vibe={ComponentVibeId.CHECKBOX}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Icon\n className={styles.icon}\n iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"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 >\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 data-vibe={ComponentVibeId.CHECKBOX}\n >\n <Icon\n className={styles.icon}\n iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"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","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","createElement","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","ComponentVibeId","onMouseUp","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","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 \"lodash-es\";\nimport Icon from \"../Icon/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 \"../Text/Text\";\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 ariaLabel?: 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 ariaLabelledBy?: 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 ariaLabel,\n label,\n 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 iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"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 iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"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","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","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_858b6b04be",checkbox:"checkbox_ba218c0632",icon:"icon_f2994f0688",label:"label_37e1de8ca5",input:"input_ca1e32b8ab",checkboxGrowAnimation:"checkboxGrowAnimation_054d8ef163"};!function(n){const e="s_id-3c767214051a_3_59_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 selector-class-pattern */\n.wrapper_858b6b04be {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_ba218c0632 {\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_ba218c0632:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n.checkbox_ba218c0632:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_f2994f0688 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_37e1de8ca5 {\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(--spacing-small);\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_ca1e32b8ab {\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_ca1e32b8ab:focus + .checkbox_ba218c0632 {\n  border-color: var(--secondary-text-color);\n}\n.input_ca1e32b8ab:focus:checked + .checkbox_ba218c0632 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_ca1e32b8ab:focus-visible + .checkbox_ba218c0632 {\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_ca1e32b8ab:checked:focus + .checkbox_ba218c0632:after,\n.input_ca1e32b8ab:indeterminate:focus + .checkbox_ba218c0632:after {\n  background-color: var(--primary-hover-color);\n}\n.input_ca1e32b8ab:checked + .checkbox_ba218c0632,\n.input_ca1e32b8ab:indeterminate + .checkbox_ba218c0632 {\n  animation: checkboxGrowAnimation_054d8ef163 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_ca1e32b8ab:checked + .checkbox_ba218c0632:hover,\n.input_ca1e32b8ab:indeterminate + .checkbox_ba218c0632:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_ca1e32b8ab:checked + .checkbox_ba218c0632:hover:after,\n.input_ca1e32b8ab:indeterminate + .checkbox_ba218c0632:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_ca1e32b8ab:checked + .checkbox_ba218c0632:after,\n.input_ca1e32b8ab:indeterminate + .checkbox_ba218c0632: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  left: 0;\n}\n.input_ca1e32b8ab:checked + .checkbox_ba218c0632 > .icon_f2994f0688,\n.input_ca1e32b8ab:indeterminate + .checkbox_ba218c0632 > .icon_f2994f0688 {\n  visibility: visible;\n}\n.input_ca1e32b8ab:checked:disabled + .checkbox_ba218c0632:after,\n.input_ca1e32b8ab:indeterminate:disabled + .checkbox_ba218c0632:after {\n  background-color: var(--disabled-background-color);\n}\n.input_ca1e32b8ab:disabled + .checkbox_ba218c0632 .icon_f2994f0688,\n.input_ca1e32b8ab:disabled + .checkbox_ba218c0632:hover .icon_f2994f0688 {\n  color: var(--disabled-text-color);\n}\n.input_ca1e32b8ab:disabled + .checkbox_ba218c0632,\n.input_ca1e32b8ab:disabled + .checkbox_ba218c0632:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_ca1e32b8ab:disabled ~ .label_37e1de8ca5 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_054d8ef163 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var e={wrapper:"wrapper_1085bed5a8",checkbox:"checkbox_e4cb4557a3",icon:"icon_5e7328eed4",label:"label_e61bf5364e",input:"input_a4d3d1d869",checkboxGrowAnimation:"checkboxGrowAnimation_f5a18fd52b"};!function(e){const n="s_id-3c767214051a_3_60_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable selector-class-pattern */\n.wrapper_1085bed5a8 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_e4cb4557a3 {\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_e4cb4557a3:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n.checkbox_e4cb4557a3:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_5e7328eed4 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_e61bf5364e {\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(--spacing-small);\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_a4d3d1d869 {\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_a4d3d1d869:focus + .checkbox_e4cb4557a3 {\n  border-color: var(--secondary-text-color);\n}\n.input_a4d3d1d869:focus:checked + .checkbox_e4cb4557a3 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a4d3d1d869:focus-visible + .checkbox_e4cb4557a3 {\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_a4d3d1d869:checked:focus + .checkbox_e4cb4557a3:after,\n.input_a4d3d1d869:indeterminate:focus + .checkbox_e4cb4557a3:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a4d3d1d869:checked + .checkbox_e4cb4557a3,\n.input_a4d3d1d869:indeterminate + .checkbox_e4cb4557a3 {\n  animation: checkboxGrowAnimation_f5a18fd52b var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_a4d3d1d869:checked + .checkbox_e4cb4557a3:hover,\n.input_a4d3d1d869:indeterminate + .checkbox_e4cb4557a3:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a4d3d1d869:checked + .checkbox_e4cb4557a3:hover:after,\n.input_a4d3d1d869:indeterminate + .checkbox_e4cb4557a3:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a4d3d1d869:checked + .checkbox_e4cb4557a3:after,\n.input_a4d3d1d869:indeterminate + .checkbox_e4cb4557a3: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  left: 0;\n}\n.input_a4d3d1d869:checked + .checkbox_e4cb4557a3 > .icon_5e7328eed4,\n.input_a4d3d1d869:indeterminate + .checkbox_e4cb4557a3 > .icon_5e7328eed4 {\n  visibility: visible;\n}\n.input_a4d3d1d869:checked:disabled + .checkbox_e4cb4557a3:after,\n.input_a4d3d1d869:indeterminate:disabled + .checkbox_e4cb4557a3:after {\n  background-color: var(--disabled-background-color);\n}\n.input_a4d3d1d869:disabled + .checkbox_e4cb4557a3 .icon_5e7328eed4,\n.input_a4d3d1d869:disabled + .checkbox_e4cb4557a3:hover .icon_5e7328eed4 {\n  color: var(--disabled-text-color);\n}\n.input_a4d3d1d869:disabled + .checkbox_e4cb4557a3,\n.input_a4d3d1d869:disabled + .checkbox_e4cb4557a3:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_a4d3d1d869:disabled ~ .label_e61bf5364e {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_f5a18fd52b {\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/Chips/Chips.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../Icon/Icon.js";import m from"../../hooks/useMergeRef.js";import{getCSSVar as d}from"../../services/themes.js";import{ElementAllowedColor as u}from"../../utils/colors-vars-map.js";import{getElementColor as p}from"../../types/Colors.js";import v from"../Avatar/Avatar.js";import f from"../IconButton/IconButton.js";import b from"../Text/Text.js";import{getTestId as g,ComponentDefaultTestId as y}from"../../tests/testIds.js";import{AvatarType as j}from"../Avatar/AvatarConstants.js";import{withStaticProps as h}from"../../types/withStaticProps.js";import k from"../../hooks/useSetFocus/index.js";import C from"../../hooks/useClickableProps/useClickableProps.js";import x from"./Chips.module.scss.js";import N from"../../../icons/dist/react/CloseSmall.js";var S=h(r((function(r,u){var j=r.className,h=r.avatarClassName,S=r.iconClassName,A=r.id,E=r.label,T=void 0===E?"":E,M=r.leftIcon,w=void 0===M?null:M,B=r.rightIcon,I=void 0===B?null:B,P=r.leftAvatar,z=void 0===P?null:P,L=r.rightAvatar,O=void 0===L?null:L,R=r.disabled,D=void 0!==R&&R,F=r.readOnly,H=void 0!==F&&F,_=r.allowTextSelection,U=void 0!==_&&_,q=r.color,G=void 0===q?"primary":q,J=r.iconSize,K=void 0===J?18:J,Q=r.onDelete,V=void 0===Q?function(e,o){}:Q,W=r.onMouseDown,X=r.onClick,Y=r.noAnimation,Z=void 0===Y||Y,$=r.ariaLabel,ee=r.disableClickableBehavior,oe=void 0!==ee&&ee,te=r.leftAvatarType,re=void 0===te?"img":te,ae=r.rightAvatarType,ie=void 0===ae?"img":ae,se=r.showBorder,ne=void 0!==se&&se,le=r.leftRenderer,ce=r.rightRenderer,me=r.closeButtonAriaLabel,de=void 0===me?"Remove":me,ue=r.noMargin,pe=void 0!==ue&&ue,ve=r["data-testid"]||g(y.CHIP,A),fe=!(!X&&!W||oe),be=!H&&!D,ge=$||"string"==typeof T&&T||"",ye=a(null),je=a(null),he=i(!1),ke=e(he,2),Ce=ke[0],xe=ke[1],Ne=s((function(){return xe(!0)}),[]),Se=s((function(){return xe(!1)}),[]),Ae=k({ref:je}).isFocused,Ee=m(u,je),Te=l(x.chips,j,o(o(o(o(o({},x.disabled,D),x.noAnimation,Z),x.withUserSelect,U),x.border,ne),x.noMargin,pe)),Me=l(x.clickable,Te,o(o({},x.disabled,D),x.disableTextSelection,!U)),we=n((function(){return{backgroundColor:D?d("disabled-background-color"):fe&&(Ce||Ae)?p(G,!0,!0):p(G,!0)}}),[D,fe,Ce,Ae,G]),Be=s((function(e){e.stopPropagation(),V&&V(A,e)}),[A,V]),Ie=s((function(e){void 0!==X&&e.target!==ye.current&&(e.preventDefault(),X(e))}),[X]),Pe=C({onClick:Ie,onMouseDown:W,disabled:D,id:A,"data-testid":ve,ariaLabel:ge,ariaHidden:!1,ariaHasPopup:!1,ariaExpanded:!1},Ee),ze=fe?Object.assign(Object.assign({},Pe),{ref:Ee,className:Me,style:we,onMouseEnter:Ne,onMouseLeave:Se}):{className:Te,"aria-label":ge,style:we,ref:Ee,onClick:Ie,onMouseDown:W,id:A,"data-testid":ve,onMouseEnter:Ne,onMouseLeave:Se},Le="text"===re?{text:z}:{src:z},Oe="text"===re?{text:O}:{src:O};return t.createElement("div",Object.assign({},ze),z?t.createElement(v,Object.assign({withoutBorder:!0,className:l(x.avatar,x.left,h),customSize:18,type:re,key:A},Le)):null,w?t.createElement(c,{className:l(x.icon,x.left,S),iconType:"font",icon:w,iconSize:K,ignoreFocusStyle:!0}):null,le&&t.createElement("div",{className:l(x.customRenderer,x.left)},le),t.createElement(b,{type:"text2",className:x.label},T),I?t.createElement(c,{className:l(x.icon,x.right,S),iconType:"font",icon:I,iconSize:K,ignoreFocusStyle:!0}):null,O?t.createElement(v,Object.assign({withoutBorder:!0,className:l(x.avatar,x.right,h),customSize:18,type:ie,key:A},Oe)):null,ce&&t.createElement("div",{className:l(x.customRenderer,x.right)},ce),be&&t.createElement(f,{size:"xxs",color:"on-primary-color",className:l(x.icon,x.close),ariaLabel:de,hideTooltip:!0,icon:N,onClick:Be,"data-testid":"".concat(ve,"-close"),ref:ye}))})),{colors:u,avatarTypes:j});export{S as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../Icon/Icon.js";import m from"../../hooks/useMergeRef.js";import{getCSSVar as d}from"../../services/themes.js";import{ElementAllowedColor as u}from"../../utils/colors-vars-map.js";import{getElementColor as p}from"../../types/Colors.js";import v from"../Avatar/Avatar.js";import f from"../IconButton/IconButton.js";import b from"../Text/Text.js";import{getTestId as g,ComponentDefaultTestId as j}from"../../tests/testIds.js";import{AvatarType as y}from"../Avatar/AvatarConstants.js";import{withStaticProps as h}from"../../types/withStaticProps.js";import C from"../../hooks/useSetFocus/index.js";import k from"../../hooks/useClickableProps/useClickableProps.js";import x from"./Chips.module.scss.js";import{ComponentVibeId as S}from"../../tests/constants.js";import N from"../../../icons/dist/react/CloseSmall.js";var A=h(r((function(r,u){var y=r.className,h=r.avatarClassName,A=r.iconClassName,E=r.id,T=r.label,M=void 0===T?"":T,w=r.leftIcon,I=void 0===w?null:w,P=r.rightIcon,B=void 0===P?null:P,z=r.leftAvatar,L=void 0===z?null:z,O=r.rightAvatar,R=void 0===O?null:O,D=r.disabled,H=void 0!==D&&D,F=r.readOnly,_=void 0!==F&&F,U=r.allowTextSelection,q=void 0!==U&&U,G=r.color,J=void 0===G?"primary":G,K=r.iconSize,Q=void 0===K?18:K,V=r.onDelete,W=void 0===V?function(e,o){}:V,X=r.onMouseDown,Y=r.onClick,Z=r.noAnimation,$=void 0===Z||Z,ee=r.ariaLabel,oe=r.disableClickableBehavior,te=void 0!==oe&&oe,re=r.leftAvatarType,ae=void 0===re?"img":re,ie=r.rightAvatarType,se=void 0===ie?"img":ie,ne=r.showBorder,le=void 0!==ne&&ne,ce=r.leftRenderer,me=r.rightRenderer,de=r.closeButtonAriaLabel,ue=void 0===de?"Remove":de,pe=r.noMargin,ve=void 0!==pe&&pe,fe=r["data-testid"]||g(j.CHIP,E),be=!(!Y&&!X||te),ge=!_&&!H,je=ee||"string"==typeof M&&M||"",ye=a(null),he=a(null),Ce=i(!1),ke=e(Ce,2),xe=ke[0],Se=ke[1],Ne=s((function(){return Se(!0)}),[]),Ae=s((function(){return Se(!1)}),[]),Ee=C({ref:he}).isFocused,Te=m(u,he),Me=l(x.chips,y,o(o(o(o(o({},x.disabled,H),x.noAnimation,$),x.withUserSelect,q),x.border,le),x.noMargin,ve)),we=l(x.clickable,Me,o(o({},x.disabled,H),x.disableTextSelection,!q)),Ie=n((function(){return{backgroundColor:H?d("disabled-background-color"):be&&(xe||Ee)?p(J,!0,!0):p(J,!0)}}),[H,be,xe,Ee,J]),Pe=s((function(e){e.stopPropagation(),W&&W(E,e)}),[E,W]),Be=s((function(e){void 0!==Y&&e.target!==ye.current&&(e.preventDefault(),Y(e))}),[Y]),ze=k({onClick:Be,onMouseDown:X,disabled:H,id:E,"data-testid":fe,ariaLabel:je,ariaHidden:!1,ariaHasPopup:!1,ariaExpanded:!1},Te),Le=be?Object.assign(Object.assign({},ze),{ref:Te,className:we,style:Ie,onMouseEnter:Ne,onMouseLeave:Ae}):{className:Me,"aria-label":je,style:Ie,ref:Te,onClick:Be,onMouseDown:X,id:E,"data-testid":fe,onMouseEnter:Ne,onMouseLeave:Ae},Oe="text"===ae?{text:L}:{src:L},Re="text"===ae?{text:R}:{src:R};return t.createElement("div",Object.assign({},Le,{"data-vibe":S.CHIPS}),L?t.createElement(v,Object.assign({withoutBorder:!0,className:l(x.avatar,x.left,h),customSize:18,type:ae,key:E},Oe)):null,I?t.createElement(c,{className:l(x.icon,x.left,A),iconType:"font",icon:I,iconSize:Q,ignoreFocusStyle:!0}):null,ce&&t.createElement("div",{className:l(x.customRenderer,x.left)},ce),t.createElement(b,{type:"text2",className:x.label},M),B?t.createElement(c,{className:l(x.icon,x.right,A),iconType:"font",icon:B,iconSize:Q,ignoreFocusStyle:!0}):null,R?t.createElement(v,Object.assign({withoutBorder:!0,className:l(x.avatar,x.right,h),customSize:18,type:se,key:E},Re)):null,me&&t.createElement("div",{className:l(x.customRenderer,x.right)},me),ge&&t.createElement(f,{size:"xxs",color:"on-primary-color",className:l(x.icon,x.close),ariaLabel:ue,hideTooltip:!0,icon:N,onClick:Pe,"data-testid":"".concat(fe,"-close"),ref:ye}))})),{colors:u,avatarTypes:y});export{A as default};
 //# sourceMappingURL=Chips.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\n\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n /*\n The text or content displayed inside the chip.\n /\n label?: ElementContent;\n /\n If true, the chip is disabled.\n /\n disabled?: boolean;\n /\n If true, the chip is read-only and cannot be deleted.\n /\n readOnly?: boolean;\n /\n A React element displayed on the right side.\n /\n rightRenderer?: ElementContent;\n /\n A React element displayed on the left side.\n /\n leftRenderer?: ElementContent;\n /\n Icon displayed on the right side.\n /\n rightIcon?: SubIcon;\n /\n Icon displayed on the left side.\n /\n leftIcon?: SubIcon;\n /\n Image URL or text for an avatar displayed on the right.\n /\n rightAvatar?: string;\n /\n The type of avatar displayed on the right.\n /\n rightAvatarType?: AvatarType;\n /\n Image URL or text for an avatar displayed on the left.\n /\n leftAvatar?: string;\n /\n The type of avatar displayed on the left.\n /\n leftAvatarType?: AvatarType;\n /\n Class name applied to left or right icons.\n /\n iconClassName?: string;\n /\n Class name applied to left or right avatars.\n /\n avatarClassName?: string;\n /\n The background color of the chip.\n /\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /\n The size of the icons inside the chip.\n /\n iconSize?: number \| string;\n /\n Callback fired when the chip is deleted.\n /\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables the chip's entry animation.\n /\n noAnimation?: boolean;\n /\n If true, allows the user to select text inside the chip.\n /\n allowTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed on the chip.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback fired when the chip is clicked.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n The label of the chip for accessibility.\n /\n ariaLabel?: string;\n /\n If true, disables all click behaviors.\n /\n disableClickableBehavior?: boolean;\n /\n If true, displays a border around the chip.\n /\n showBorder?: boolean;\n /\n The label for the close button.\n /\n closeButtonAriaLabel?: string;\n /\n If true, removes the default margin from the chip.\n */\n noMargin?: boolean;\n}\n\nconst Chips = forwardRef(\n (\n {\n className,\n avatarClassName,\n iconClassName,\n id,\n label = \"\",\n leftIcon = null,\n rightIcon = null,\n leftAvatar = null,\n rightAvatar = null,\n disabled = false,\n readOnly = false,\n allowTextSelection = false,\n color = \"primary\",\n iconSize = 18,\n onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n onMouseDown,\n onClick,\n noAnimation = true,\n ariaLabel,\n \"data-testid\": dataTestId,\n disableClickableBehavior = false,\n leftAvatarType = \"img\",\n rightAvatarType = \"img\",\n showBorder = false,\n leftRenderer,\n rightRenderer,\n closeButtonAriaLabel = \"Remove\",\n noMargin = false\n }: ChipsProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const componentDataTestId = dataTestId \|\| getTestId(ComponentDefaultTestId.CHIP, id);\n const hasClickableWrapper = (!!onClick \|\| !!onMouseDown) && !disableClickableBehavior;\n const hasCloseButton = !readOnly && !disabled;\n const overrideAriaLabel = ariaLabel \|\| (typeof label === \"string\" && label) \|\| \"\";\n\n const iconButtonRef = useRef(null);\n const componentRef = useRef(null);\n\n const [isHovered, setIsHovered] = useState(false);\n const handleMouseEnter = useCallback(() => setIsHovered(true), []);\n const handleMouseLeave = useCallback(() => setIsHovered(false), []);\n const { isFocused } = useSetFocus({ ref: componentRef });\n\n const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef);\n\n const overrideClassName = cx(styles.chips, className, {\n [styles.disabled]: disabled,\n [styles.noAnimation]: noAnimation,\n [styles.withUserSelect]: allowTextSelection,\n [styles.border]: showBorder,\n [styles.noMargin]: noMargin\n });\n const clickableClassName = cx(styles.clickable, overrideClassName, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !allowTextSelection\n });\n\n const backgroundColorStyle = useMemo(() => {\n let cssVar;\n if (disabled) {\n cssVar = getCSSVar(\"disabled-background-color\");\n } else if (hasClickableWrapper && (isHovered \|\| isFocused)) {\n cssVar = getElementColor(color, true, true);\n } else {\n cssVar = getElementColor(color, true);\n }\n return { backgroundColor: cssVar };\n }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n const onDeleteCallback = useCallback(\n (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n e.stopPropagation();\n if (onDelete) {\n onDelete(id, e);\n }\n },\n [id, onDelete]\n );\n\n const onClickCallback = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n e.preventDefault();\n onClick(e);\n }\n },\n [onClick]\n );\n\n const clickableProps = useClickableProps(\n {\n onClick: onClickCallback,\n onMouseDown,\n disabled,\n id,\n \"data-testid\": componentDataTestId,\n ariaLabel: overrideAriaLabel,\n ariaHidden: false,\n ariaHasPopup: false,\n ariaExpanded: false\n },\n mergedRef\n );\n const wrapperProps = hasClickableWrapper\n ? {\n ...clickableProps,\n ref: mergedRef,\n className: clickableClassName,\n style: backgroundColorStyle,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave\n }\n : {\n className: overrideClassName,\n \"aria-label\": overrideAriaLabel,\n style: backgroundColorStyle,\n ref: mergedRef,\n onClick: onClickCallback,\n onMouseDown,\n id: id,\n \"data-testid\": componentDataTestId,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave\n };\n\n const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n return (\n <div {...wrapperProps}>\n {leftAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.left, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={leftAvatarType}\n key={id}\n {...leftAvatarProps}\n />\n ) : null}\n {leftIcon ? (\n <Icon\n className={cx(styles.icon, styles.left, iconClassName)}\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n <Text type=\"text2\" className={styles.label}>\n {label}\n </Text>\n {rightIcon ? (\n <Icon\n className={cx(styles.icon, styles.right, iconClassName)}\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {rightAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.right, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={rightAvatarType}\n key={id}\n {...rightAvatarProps}\n />\n ) : null}\n {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n {hasCloseButton && (\n <IconButton\n size=\"xxs\"\n color=\"on-primary-color\"\n className={cx(styles.icon, styles.close)}\n ariaLabel={closeButtonAriaLabel}\n hideTooltip\n icon={CloseSmall}\n onClick={onDeleteCallback}\n data-testid={`${componentDataTestId}-close`}\n ref={iconButtonRef}\n />\n )}\n </div>\n );\n }\n);\n\ninterface ChipsStaticProps {\n colors: typeof ElementAllowedColorEnum;\n avatarTypes: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {\n colors: ElementAllowedColorEnum,\n avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$noMargin","noMargin","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","handleMouseEnter","useCallback","handleMouseLeave","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","Object","assign","style","onMouseEnter","onMouseLeave","leftAvatarProps","text","src","rightAvatarProps","React","createElement","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}
1	+ {"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\n\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n /*\n The text or content displayed inside the chip.\n /\n label?: ElementContent;\n /\n If true, the chip is disabled.\n /\n disabled?: boolean;\n /\n If true, the chip is read-only and cannot be deleted.\n /\n readOnly?: boolean;\n /\n A React element displayed on the right side.\n /\n rightRenderer?: ElementContent;\n /\n A React element displayed on the left side.\n /\n leftRenderer?: ElementContent;\n /\n Icon displayed on the right side.\n /\n rightIcon?: SubIcon;\n /\n Icon displayed on the left side.\n /\n leftIcon?: SubIcon;\n /\n Image URL or text for an avatar displayed on the right.\n /\n rightAvatar?: string;\n /\n The type of avatar displayed on the right.\n /\n rightAvatarType?: AvatarType;\n /\n Image URL or text for an avatar displayed on the left.\n /\n leftAvatar?: string;\n /\n The type of avatar displayed on the left.\n /\n leftAvatarType?: AvatarType;\n /\n Class name applied to left or right icons.\n /\n iconClassName?: string;\n /\n Class name applied to left or right avatars.\n /\n avatarClassName?: string;\n /\n The background color of the chip.\n /\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /\n The size of the icons inside the chip.\n /\n iconSize?: number \| string;\n /\n Callback fired when the chip is deleted.\n /\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables the chip's entry animation.\n /\n noAnimation?: boolean;\n /\n If true, allows the user to select text inside the chip.\n /\n allowTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed on the chip.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback fired when the chip is clicked.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n The label of the chip for accessibility.\n /\n ariaLabel?: string;\n /\n If true, disables all click behaviors.\n /\n disableClickableBehavior?: boolean;\n /\n If true, displays a border around the chip.\n /\n showBorder?: boolean;\n /\n The label for the close button.\n /\n closeButtonAriaLabel?: string;\n /\n If true, removes the default margin from the chip.\n */\n noMargin?: boolean;\n}\n\nconst Chips = forwardRef(\n (\n {\n className,\n avatarClassName,\n iconClassName,\n id,\n label = \"\",\n leftIcon = null,\n rightIcon = null,\n leftAvatar = null,\n rightAvatar = null,\n disabled = false,\n readOnly = false,\n allowTextSelection = false,\n color = \"primary\",\n iconSize = 18,\n onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n onMouseDown,\n onClick,\n noAnimation = true,\n ariaLabel,\n \"data-testid\": dataTestId,\n disableClickableBehavior = false,\n leftAvatarType = \"img\",\n rightAvatarType = \"img\",\n showBorder = false,\n leftRenderer,\n rightRenderer,\n closeButtonAriaLabel = \"Remove\",\n noMargin = false\n }: ChipsProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const componentDataTestId = dataTestId \|\| getTestId(ComponentDefaultTestId.CHIP, id);\n const hasClickableWrapper = (!!onClick \|\| !!onMouseDown) && !disableClickableBehavior;\n const hasCloseButton = !readOnly && !disabled;\n const overrideAriaLabel = ariaLabel \|\| (typeof label === \"string\" && label) \|\| \"\";\n\n const iconButtonRef = useRef(null);\n const componentRef = useRef(null);\n\n const [isHovered, setIsHovered] = useState(false);\n const handleMouseEnter = useCallback(() => setIsHovered(true), []);\n const handleMouseLeave = useCallback(() => setIsHovered(false), []);\n const { isFocused } = useSetFocus({ ref: componentRef });\n\n const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef);\n\n const overrideClassName = cx(styles.chips, className, {\n [styles.disabled]: disabled,\n [styles.noAnimation]: noAnimation,\n [styles.withUserSelect]: allowTextSelection,\n [styles.border]: showBorder,\n [styles.noMargin]: noMargin\n });\n const clickableClassName = cx(styles.clickable, overrideClassName, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !allowTextSelection\n });\n\n const backgroundColorStyle = useMemo(() => {\n let cssVar;\n if (disabled) {\n cssVar = getCSSVar(\"disabled-background-color\");\n } else if (hasClickableWrapper && (isHovered \|\| isFocused)) {\n cssVar = getElementColor(color, true, true);\n } else {\n cssVar = getElementColor(color, true);\n }\n return { backgroundColor: cssVar };\n }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n const onDeleteCallback = useCallback(\n (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n e.stopPropagation();\n if (onDelete) {\n onDelete(id, e);\n }\n },\n [id, onDelete]\n );\n\n const onClickCallback = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n e.preventDefault();\n onClick(e);\n }\n },\n [onClick]\n );\n\n const clickableProps = useClickableProps(\n {\n onClick: onClickCallback,\n onMouseDown,\n disabled,\n id,\n \"data-testid\": componentDataTestId,\n ariaLabel: overrideAriaLabel,\n ariaHidden: false,\n ariaHasPopup: false,\n ariaExpanded: false\n },\n mergedRef\n );\n const wrapperProps = hasClickableWrapper\n ? {\n ...clickableProps,\n ref: mergedRef,\n className: clickableClassName,\n style: backgroundColorStyle,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave\n }\n : {\n className: overrideClassName,\n \"aria-label\": overrideAriaLabel,\n style: backgroundColorStyle,\n ref: mergedRef,\n onClick: onClickCallback,\n onMouseDown,\n id: id,\n \"data-testid\": componentDataTestId,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave\n };\n\n const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n return (\n <div {...wrapperProps} data-vibe={ComponentVibeId.CHIPS}>\n {leftAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.left, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={leftAvatarType}\n key={id}\n {...leftAvatarProps}\n />\n ) : null}\n {leftIcon ? (\n <Icon\n className={cx(styles.icon, styles.left, iconClassName)}\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n <Text type=\"text2\" className={styles.label}>\n {label}\n </Text>\n {rightIcon ? (\n <Icon\n className={cx(styles.icon, styles.right, iconClassName)}\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {rightAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.right, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={rightAvatarType}\n key={id}\n {...rightAvatarProps}\n />\n ) : null}\n {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n {hasCloseButton && (\n <IconButton\n size=\"xxs\"\n color=\"on-primary-color\"\n className={cx(styles.icon, styles.close)}\n ariaLabel={closeButtonAriaLabel}\n hideTooltip\n icon={CloseSmall}\n onClick={onDeleteCallback}\n data-testid={`${componentDataTestId}-close`}\n ref={iconButtonRef}\n />\n )}\n </div>\n );\n }\n);\n\ninterface ChipsStaticProps {\n colors: typeof ElementAllowedColorEnum;\n avatarTypes: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {\n colors: ElementAllowedColorEnum,\n avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$noMargin","noMargin","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","handleMouseEnter","useCallback","handleMouseLeave","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","Object","assign","style","onMouseEnter","onMouseLeave","leftAvatarProps","text","src","rightAvatarProps","React","createElement","ComponentVibeId","CHIPS","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_2c875c8345","focus-visible":"focus-visible_a0a0b58798",disabled:"disabled_743c2bd691",disableTextSelection:"disableTextSelection_5d597205fd",chips:"chips_a29f10a6cc","chips-pop-in-emphasized":"chips-pop-in-emphasized_c76f22038c",border:"border_2ae333df58",withUserSelect:"withUserSelect_d6358287ee",noMargin:"noMargin_71d6684dfc",label:"label_30e6ffc98b",noAnimation:"noAnimation_b623db95b8",icon:"icon_e8db9d934e",avatar:"avatar_981dab9d91",customRenderer:"customRenderer_5a526850b8",left:"left_c3bcc577bf",right:"right_f6a3cb873e",close:"close_296d6be458",defaultCursor:"defaultCursor_743c2bd691"};!function(e){const c="s_id-b08f85dbbdad_3_59_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+c))return;const a=document.createElement("style");a.id=c,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[c]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_2c875c8345 {\n  cursor: pointer;\n}\n.clickable_2c875c8345:focus-visible, .clickable_2c875c8345.focus-visible_a0a0b58798 {\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.clickable_2c875c8345:focus:not(.focus-visible_a0a0b58798) {\n  outline: none;\n}\n.clickable_2c875c8345.disabled_743c2bd691 {\n  cursor: default;\n}\n.disableTextSelection_5d597205fd {\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/* stylelint-disable selector-class-pattern */\n.chips_a29f10a6cc {\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(--spacing-xs));\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_c76f22038c var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_a29f10a6cc.border_2ae333df58 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_a29f10a6cc.withUserSelect_d6358287ee {\n  user-select: text;\n  cursor: text;\n}\n.chips_a29f10a6cc.noMargin_71d6684dfc {\n  margin: 0;\n}\n.chips_a29f10a6cc .label_30e6ffc98b {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_a29f10a6cc.noAnimation_b623db95b8 {\n  animation: none;\n}\n.chips_a29f10a6cc .icon_e8db9d934e,\n.chips_a29f10a6cc .avatar_981dab9d91,\n.chips_a29f10a6cc .customRenderer_5a526850b8 {\n  min-width: 18px;\n}\n.chips_a29f10a6cc .icon_e8db9d934e.left_c3bcc577bf,\n.chips_a29f10a6cc .avatar_981dab9d91.left_c3bcc577bf,\n.chips_a29f10a6cc .customRenderer_5a526850b8.left_c3bcc577bf {\n  margin-right: var(--spacing-xs);\n}\n.chips_a29f10a6cc .icon_e8db9d934e.right_f6a3cb873e,\n.chips_a29f10a6cc .avatar_981dab9d91.right_f6a3cb873e,\n.chips_a29f10a6cc .customRenderer_5a526850b8.right_f6a3cb873e {\n  margin-left: var(--spacing-xs);\n}\n.chips_a29f10a6cc .icon_e8db9d934e.close_296d6be458,\n.chips_a29f10a6cc .avatar_981dab9d91.close_296d6be458,\n.chips_a29f10a6cc .customRenderer_5a526850b8.close_296d6be458 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_a29f10a6cc.disabled_743c2bd691 .icon_e8db9d934e {\n  color: var(--disabled-text-color);\n}\n.chips_a29f10a6cc.disabled_743c2bd691 .label_30e6ffc98b {\n  color: var(--disabled-text-color);\n}\n.chips_a29f10a6cc.defaultCursor_743c2bd691 {\n  cursor: default;\n}\n.chips_a29f10a6cc.clickable_2c875c8345 {\n  cursor: pointer;\n}\n.chips_a29f10a6cc.clickable_2c875c8345:focus-visible, .chips_a29f10a6cc.clickable_2c875c8345.focus-visible_a0a0b58798 {\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_a29f10a6cc.clickable_2c875c8345:focus:not(.focus-visible_a0a0b58798) {\n  outline: none;\n}\n.chips_a29f10a6cc.clickable_2c875c8345.disabled_743c2bd691 {\n  cursor: default;\n}\n.chips_a29f10a6cc.clickable_2c875c8345.disableTextSelection_5d597205fd {\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_c76f22038c {\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={clickable:"clickable_268b7a2598","focus-visible":"focus-visible_b00c002bd4",disabled:"disabled_bfa0c0a36d",disableTextSelection:"disableTextSelection_720e0a0077",chips:"chips_c5a72be7fa","chips-pop-in-emphasized":"chips-pop-in-emphasized_f39016288f",border:"border_b3fead20a3",withUserSelect:"withUserSelect_128ea0494c",noMargin:"noMargin_eb065c6258",label:"label_2c26c09282",noAnimation:"noAnimation_75b5e8a5f7",icon:"icon_7ec8a6cab2",avatar:"avatar_219d6e8543",customRenderer:"customRenderer_74135ac3d3",left:"left_de11165572",right:"right_f302d63799",close:"close_d6c1de8ccd",defaultCursor:"defaultCursor_bfa0c0a36d"};!function(e){const a="s_id-b08f85dbbdad_3_60_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const c=document.createElement("style");c.id=a,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_268b7a2598 {\n  cursor: pointer;\n}\n.clickable_268b7a2598:focus-visible, .clickable_268b7a2598.focus-visible_b00c002bd4 {\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.clickable_268b7a2598:focus:not(.focus-visible_b00c002bd4) {\n  outline: none;\n}\n.clickable_268b7a2598.disabled_bfa0c0a36d {\n  cursor: default;\n}\n.disableTextSelection_720e0a0077 {\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/* stylelint-disable selector-class-pattern */\n.chips_c5a72be7fa {\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(--spacing-xs));\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_f39016288f var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_c5a72be7fa.border_b3fead20a3 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_c5a72be7fa.withUserSelect_128ea0494c {\n  user-select: text;\n  cursor: text;\n}\n.chips_c5a72be7fa.noMargin_eb065c6258 {\n  margin: 0;\n}\n.chips_c5a72be7fa .label_2c26c09282 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_c5a72be7fa.noAnimation_75b5e8a5f7 {\n  animation: none;\n}\n.chips_c5a72be7fa .icon_7ec8a6cab2,\n.chips_c5a72be7fa .avatar_219d6e8543,\n.chips_c5a72be7fa .customRenderer_74135ac3d3 {\n  min-width: 18px;\n}\n.chips_c5a72be7fa .icon_7ec8a6cab2.left_de11165572,\n.chips_c5a72be7fa .avatar_219d6e8543.left_de11165572,\n.chips_c5a72be7fa .customRenderer_74135ac3d3.left_de11165572 {\n  margin-right: var(--spacing-xs);\n}\n.chips_c5a72be7fa .icon_7ec8a6cab2.right_f302d63799,\n.chips_c5a72be7fa .avatar_219d6e8543.right_f302d63799,\n.chips_c5a72be7fa .customRenderer_74135ac3d3.right_f302d63799 {\n  margin-left: var(--spacing-xs);\n}\n.chips_c5a72be7fa .icon_7ec8a6cab2.close_d6c1de8ccd,\n.chips_c5a72be7fa .avatar_219d6e8543.close_d6c1de8ccd,\n.chips_c5a72be7fa .customRenderer_74135ac3d3.close_d6c1de8ccd {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_c5a72be7fa.disabled_bfa0c0a36d .icon_7ec8a6cab2 {\n  color: var(--disabled-text-color);\n}\n.chips_c5a72be7fa.disabled_bfa0c0a36d .label_2c26c09282 {\n  color: var(--disabled-text-color);\n}\n.chips_c5a72be7fa.defaultCursor_bfa0c0a36d {\n  cursor: default;\n}\n.chips_c5a72be7fa.clickable_268b7a2598 {\n  cursor: pointer;\n}\n.chips_c5a72be7fa.clickable_268b7a2598:focus-visible, .chips_c5a72be7fa.clickable_268b7a2598.focus-visible_b00c002bd4 {\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_c5a72be7fa.clickable_268b7a2598:focus:not(.focus-visible_b00c002bd4) {\n  outline: none;\n}\n.chips_c5a72be7fa.clickable_268b7a2598.disabled_bfa0c0a36d {\n  cursor: default;\n}\n.chips_c5a72be7fa.clickable_268b7a2598.disableTextSelection_720e0a0077 {\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_f39016288f {\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/Clickable/Clickable.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_2c875c8345","focus-visible":"focus-visible_a0a0b58798",disabled:"disabled_743c2bd691",disableTextSelection:"disableTextSelection_5d597205fd"};!function(e){const n="s_id-8d33a9ee9e1f_3_59_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_2c875c8345 {\n  cursor: pointer;\n}\n.clickable_2c875c8345:focus-visible, .clickable_2c875c8345.focus-visible_a0a0b58798 {\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.clickable_2c875c8345:focus:not(.focus-visible_a0a0b58798) {\n  outline: none;\n}\n.clickable_2c875c8345.disabled_743c2bd691 {\n  cursor: default;\n}\n.disableTextSelection_5d597205fd {\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}");export{e as default};
+var e={clickable:"clickable_268b7a2598","focus-visible":"focus-visible_b00c002bd4",disabled:"disabled_bfa0c0a36d",disableTextSelection:"disableTextSelection_720e0a0077"};!function(e){const n="s_id-8d33a9ee9e1f_3_60_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const l=document.createElement("style");l.id=n,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_268b7a2598 {\n  cursor: pointer;\n}\n.clickable_268b7a2598:focus-visible, .clickable_268b7a2598.focus-visible_b00c002bd4 {\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.clickable_268b7a2598:focus:not(.focus-visible_b00c002bd4) {\n  outline: none;\n}\n.clickable_268b7a2598.disabled_bfa0c0a36d {\n  cursor: default;\n}\n.disableTextSelection_720e0a0077 {\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}");export{e as default};
 //# sourceMappingURL=Clickable.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import o from"classnames";import r,{forwardRef as e,useRef as t,useCallback as i}from"react";import{BaseSizes as s}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import c from"../DialogContentContainer/DialogContentContainer.js";import{ColorStyle as n}from"../../utils/colors-vars-map.js";import a from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as C}from"./services/ColorPickerStyleService.js";import{withStaticProps as u}from"../../types/withStaticProps.js";import{NOOP as f}from"../../utils/function-utils.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import I from"./ColorPicker.module.scss.js";import{ComponentVibeId as S}from"../../tests/constants.js";import k from"../../../icons/dist/react/NoColor.js";var h=u(e((function(e,s){var n=e.className,m=e.onSave,u=void 0===m?f:m,h=e.value,j=void 0===h?"":h,P=e.noColorText,L=e.colorStyle,g=void 0===L?"regular":L,R=e.ColorIndicatorIcon,y=e.SelectedIndicatorIcon,O=e.shouldRenderIndicatorWithoutBackground,b=e.NoColorIcon,M=void 0===b?k:b,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,D=void 0===z?[]:z,B=e.isMultiselect,E=e.colorSize,T=void 0===E?"medium":E,x=e.numberOfColorsInLine,K=void 0===x?d:x,U=e.focusOnMount,W=e.colorShape,_=void 0===W?"square":W,q=e.forceUseRawColorList,V=e.showColorNameTooltip,A=e.id,F=e["data-testid"],G=t(null),H=l(s,G),J=i(u,[u]),Q=C(T,K);return r.createElement(c,{ref:H,className:o(I.colorPicker,I.colorPickerDialogContent,n),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q}},r.createElement(a,{onValueChange:J,value:j,noColorText:P,shouldRenderIndicatorWithoutBackground:R&&O,colorStyle:g,ColorIndicatorIcon:R,SelectedIndicatorIcon:y,NoColorIcon:M,colorsList:D,isBlackListMode:w,isMultiselect:B,colorSize:T,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||p(v.COLOR_PICKER,A),"data-vibe":S.COLOR_PICKER}))})),{sizes:s,colorStyles:n,colorSizes:s,colorShapes:m});export{h as default};
+import o from"classnames";import r,{forwardRef as e,useRef as t,useCallback as i}from"react";import{BaseSizes as s}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import c from"../DialogContentContainer/DialogContentContainer.js";import{ColorStyle as n}from"../../utils/colors-vars-map.js";import a from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as C}from"./services/ColorPickerStyleService.js";import{withStaticProps as u}from"../../types/withStaticProps.js";import{NOOP as f}from"../../utils/function-utils.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import I from"./ColorPicker.module.scss.js";import{ComponentVibeId as S}from"../../tests/constants.js";import k from"../../../icons/dist/react/NoColor.js";var h=u(e((function(e,s){var n=e.className,m=e.onSave,u=void 0===m?f:m,h=e.value,j=void 0===h?"":h,P=e.noColorText,L=e.colorStyle,g=void 0===L?"regular":L,R=e.ColorIndicatorIcon,y=e.SelectedIndicatorIcon,O=e.shouldRenderIndicatorWithoutBackground,b=e.NoColorIcon,M=void 0===b?k:b,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,D=void 0===z?[]:z,B=e.isMultiselect,E=e.colorSize,T=void 0===E?"medium":E,x=e.numberOfColorsInLine,K=void 0===x?d:x,U=e.focusOnMount,W=e.colorShape,_=void 0===W?"square":W,q=e.forceUseRawColorList,V=e.showColorNameTooltip,A=e.id,F=e["data-testid"],G=t(null),H=l(s,G),J=i(u,[u]),Q=C(T,K);return r.createElement(c,{ref:H,className:o(I.colorPicker,I.colorPickerDialogContent,n),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":S.COLOR_PICKER},r.createElement(a,{onValueChange:J,value:j,noColorText:P,shouldRenderIndicatorWithoutBackground:R&&O,colorStyle:g,ColorIndicatorIcon:R,SelectedIndicatorIcon:y,NoColorIcon:M,colorsList:D,isBlackListMode:w,isMultiselect:B,colorSize:T,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||p(v.COLOR_PICKER,A)}))})),{sizes:s,colorStyles:n,colorSizes:s,colorShapes:m});export{h as default};
 //# sourceMappingURL=ColorPicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, 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 { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps, type SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value?: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onSave?: (value: ColorPickerArrayValueOnly) => void;\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 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 list of colors available for selection.\n /\n colorsList?: ColorPickerArrayValueOnly;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\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 The shape of the color items.\n /\n colorShape?: ColorShapes;\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 /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n (\n {\n className,\n onSave = NOOP,\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 = \"medium\",\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const onChange = useCallback(onSave, [onSave]);\n\n const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <DialogContentContainer\n ref={mergedRef}\n className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n ariaLabelledby=\"Color Picker Dialog\"\n ariaDescribedby=\"Pick color\"\n style={{ width }}\n >\n <ColorPickerContent\n onValueChange={onChange}\n value={value}\n noColorText={noColorText}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n NoColorIcon={NoColorIcon}\n colorsList={colorsList}\n isBlackListMode={isBlackListMode}\n isMultiselect={isMultiselect}\n colorSize={colorSize}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n colorShape={colorShape}\n forceUseRawColorList={forceUseRawColorList}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n ~~data-vibe={ComponentVibeId.COLOR_PICKER}\n~~ />\n </DialogContentContainer>\n );\n }\n);\n\ninterface ColorPickerStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","~~ColorPickerContent~~","~~onValueChange~~","~~getTestId~~","~~ComponentDefaultTestId~~","~~COLOR_PICKER~~","~~ComponentVibeId~~","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BAiGA,IA2EeA,EAAAA,EA3EKC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,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,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,~~EAAAC~~,~~cAACC~~,~~EAAsB~~,~~CACrB3C~~,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,~~IAETE~~,~~EAACC~~,~~cAAAS~~,~~GACCC~~,~~cAAef~~,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,~~GAAcqB~~,EAAUC,~~EAAuBC~~,~~aAAcxB~~,~~GAC/D~~,~~YAAAyB,EAAgBD,eAInC,~~IAUoF,~~CACpFE~~,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, 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 { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps, type SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value?: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onSave?: (value: ColorPickerArrayValueOnly) => void;\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 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 list of colors available for selection.\n /\n colorsList?: ColorPickerArrayValueOnly;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\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 The shape of the color items.\n /\n colorShape?: ColorShapes;\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 /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n (\n {\n className,\n onSave = NOOP,\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 = \"medium\",\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const onChange = useCallback(onSave, [onSave]);\n\n const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <DialogContentContainer\n ref={mergedRef}\n className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n ariaLabelledby=\"Color Picker Dialog\"\n ariaDescribedby=\"Pick color\"\n style={{ width }}\n data-vibe={ComponentVibeId.COLOR_PICKER}\n >\n <ColorPickerContent\n onValueChange={onChange}\n value={value}\n noColorText={noColorText}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n NoColorIcon={NoColorIcon}\n colorsList={colorsList}\n isBlackListMode={isBlackListMode}\n isMultiselect={isMultiselect}\n colorSize={colorSize}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n colorShape={colorShape}\n forceUseRawColorList={forceUseRawColorList}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n />\n </DialogContentContainer>\n );\n }\n);\n\ninterface ColorPickerStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BAiGA,IA2EeA,EAAAA,EA3EKC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,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,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAACC,cAAAC,EACC,CAAA3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,GACE,YAAAY,EAAgBC,cAE3BX,EAAAC,cAACW,EACC,CAAAC,cAAejB,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcuB,EAAUC,EAAuBJ,aAAcrB,KAIlF,IAUoF,CACpF0B,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}

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

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_7e4390f0b0",colorPickerDialogContent:"colorPickerDialogContent_80b0dd13ce"};!function(e){const t="s_id-ffacbf9b6446_3_59_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_7e4390f0b0.colorPickerDialogContent_80b0dd13ce {\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_2cc1ee03c4",colorPickerDialogContent:"colorPickerDialogContent_a37fab848b"};!function(e){const t="s_id-ffacbf9b6446_3_60_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const c=document.createElement("style");c.id=t,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_2cc1ee03c4.colorPickerDialogContent_a37fab848b {\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_9335900c40",clearColorButton:"clearColorButton_18c3788f8c"};!function(e){const n="s_id-774e60a23ee3_3_59_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_9335900c40 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_18c3788f8c {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_f154bac2bd",clearColorButton:"clearColorButton_1dc95bf18a"};!function(e){const n="s_id-774e60a23ee3_3_60_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_f154bac2bd {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_1dc95bf18a {\n  margin-top: var(--spacing-small);\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_59a59b24a7"};!function(e){const n="s_id-0a5f0eb78ee4_3_59_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_59a59b24a7 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_27593765bd"};!function(e){const d="s_id-0a5f0eb78ee4_3_60_0";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_27593765bd {\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/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_e1058ab081",circle:"circle_ec19e8f77f",feedbackIndicator:"feedbackIndicator_1ff71dc128",active:"active_27f281b647",selectedColor:"selectedColor_f098753845",colorItem:"colorItem_2c7ca1b62d",colorIndicatorWrapper:"colorIndicatorWrapper_d1977ab385",colorItemSizeSmall:"colorItemSizeSmall_32f9ad7434",colorItemSizeMedium:"colorItemSizeMedium_f1136ed14d",colorItemSizeLarge:"colorItemSizeLarge_57688133b9",colorItemTextMode:"colorItemTextMode_f1b0a9c10d",colorIconWhite:"colorIconWhite_c0604ccf30"};!function(e){const r="s_id-4f41e3ef6859_3_59_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_e1058ab081.circle_ec19e8f77f {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_e1058ab081 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_e1058ab081 .feedbackIndicator_1ff71dc128 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_e1058ab081:focus,\n.itemWrapper_e1058ab081:focus-visible,\n.itemWrapper_e1058ab081.active_27f281b647 {\n  outline: none;\n}\n\n.itemWrapper_e1058ab081:focus .feedbackIndicator_1ff71dc128:before,\n.itemWrapper_e1058ab081:focus-visible .feedbackIndicator_1ff71dc128:before,\n.itemWrapper_e1058ab081.active_27f281b647 .feedbackIndicator_1ff71dc128: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_e1058ab081:focus .feedbackIndicator_1ff71dc128:after,\n.itemWrapper_e1058ab081:focus-visible .feedbackIndicator_1ff71dc128:after,\n.itemWrapper_e1058ab081.active_27f281b647 .feedbackIndicator_1ff71dc128: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_e1058ab081:hover:not(.active_27f281b647):not(.selectedColor_f098753845) .feedbackIndicator_1ff71dc128 {\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_e1058ab081 .colorItem_2c7ca1b62d {\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_e1058ab081 .colorItem_2c7ca1b62d .colorIndicatorWrapper_d1977ab385 {\n  display: flex;\n}\n\n.itemWrapper_e1058ab081 .colorItem_2c7ca1b62d.colorItemSizeSmall_32f9ad7434 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_e1058ab081 .colorItem_2c7ca1b62d.colorItemSizeMedium_f1136ed14d {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_e1058ab081 .colorItem_2c7ca1b62d.colorItemSizeLarge_57688133b9 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_e1058ab081.selectedColor_f098753845 {\n  position: relative;\n}\n\n.itemWrapper_e1058ab081.selectedColor_f098753845: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_e1058ab081.selectedColor_f098753845 .feedbackIndicator_1ff71dc128:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_e1058ab081 .colorItemTextMode_f1b0a9c10d:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_e1058ab081 .colorIconWhite_c0604ccf30 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_fcc321f076",circle:"circle_2674232ba2",feedbackIndicator:"feedbackIndicator_b70726d452",active:"active_a86fa372a5",selectedColor:"selectedColor_e1b0a21f0d",colorItem:"colorItem_6f4cd1cace",colorIndicatorWrapper:"colorIndicatorWrapper_e91cc7f974",colorItemSizeSmall:"colorItemSizeSmall_9d6c4ef900",colorItemSizeMedium:"colorItemSizeMedium_4a5e918582",colorItemSizeLarge:"colorItemSizeLarge_3b5ce6679b",colorItemTextMode:"colorItemTextMode_952f35c8ac",colorIconWhite:"colorIconWhite_678e736853"};!function(e){const r="s_id-4f41e3ef6859_3_60_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_fcc321f076.circle_2674232ba2 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_fcc321f076 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_fcc321f076 .feedbackIndicator_b70726d452 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_fcc321f076:focus,\n.itemWrapper_fcc321f076:focus-visible,\n.itemWrapper_fcc321f076.active_a86fa372a5 {\n  outline: none;\n}\n\n.itemWrapper_fcc321f076:focus .feedbackIndicator_b70726d452:before,\n.itemWrapper_fcc321f076:focus-visible .feedbackIndicator_b70726d452:before,\n.itemWrapper_fcc321f076.active_a86fa372a5 .feedbackIndicator_b70726d452: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_fcc321f076:focus .feedbackIndicator_b70726d452:after,\n.itemWrapper_fcc321f076:focus-visible .feedbackIndicator_b70726d452:after,\n.itemWrapper_fcc321f076.active_a86fa372a5 .feedbackIndicator_b70726d452: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_fcc321f076:hover:not(.active_a86fa372a5):not(.selectedColor_e1b0a21f0d) .feedbackIndicator_b70726d452 {\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_fcc321f076 .colorItem_6f4cd1cace {\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_fcc321f076 .colorItem_6f4cd1cace .colorIndicatorWrapper_e91cc7f974 {\n  display: flex;\n}\n\n.itemWrapper_fcc321f076 .colorItem_6f4cd1cace.colorItemSizeSmall_9d6c4ef900 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_fcc321f076 .colorItem_6f4cd1cace.colorItemSizeMedium_4a5e918582 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_fcc321f076 .colorItem_6f4cd1cace.colorItemSizeLarge_3b5ce6679b {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_fcc321f076.selectedColor_e1b0a21f0d {\n  position: relative;\n}\n\n.itemWrapper_fcc321f076.selectedColor_e1b0a21f0d: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_fcc321f076.selectedColor_e1b0a21f0d .feedbackIndicator_b70726d452:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_fcc321f076 .colorItemTextMode_952f35c8ac:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_fcc321f076 .colorIconWhite_678e736853 {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as t,noop as i,isFunction as s}from"lodash-es";import r from"classnames";import a,{forwardRef as n,useRef as l,useState as c,useCallback as d,useMemo as m}from"react";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as v}from"../../tests/testIds.js";import b from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import{BASE_SIZES as h}from"../../constants/sizes.js";import C from"../Button/Button.js";import g from"../Text/Text.js";import x from"./components/ComboboxOption/ComboboxOption.js";import{defaultFilter as y}from"./ComboboxService.js";import{ComboboxItems as I}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as O}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as N,useKeyboardNavigation as j}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as S}from"./helpers.js";import{withStaticProps as R}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{COMBOBOX_LISTBOX_ID as k}from"./components/ComboboxConstants.js";import F from"./Combobox.module.scss.js";var H=R(n((function(n,h){var x=n.className,R=void 0===x?"":x,H=n.optionClassName,E=void 0===H?"":H,A=n.searchWrapperClassName,L=n.stickyCategoryClassName,M=n.searchIcon,w=n.id,T=void 0===w?"":w,z=n.placeholder,B=void 0===z?"":z,V=n.size,W=void 0===V?"medium":V,P=n.defaultVisualFocusFirstIndex,D=n.optionLineHeight,_=void 0===D?32:D,X=n.optionsListHeight,q=n.autoFocus,G=void 0!==q&&q,J=n.disabled,K=void 0!==J&&J,Q=n.options,U=void 0===Q?[]:Q,Y=n.categories,Z=n.withCategoriesDivider,$=void 0!==Z&&Z,ee=n.noResultsMessage,oe=void 0===ee?"No results found":ee,te=n.onAddNew,ie=n.addNewLabel,se=void 0===ie?"Add new":ie,re=n.onClick,ae=void 0===re?function(e){}:re,ne=n.filter,le=void 0===ne?y:ne,ce=n.disableFilter,de=void 0!==ce&&ce,me=n.filterValue,pe=n.onFilterChanged,ue=n.loading,ve=void 0!==ue&&ue,be=n.onOptionHover,fe=void 0===be?i:be,he=n.onOptionLeave,Ce=void 0===he?i:he,ge=n.shouldScrollToSelectedItem,xe=void 0===ge||ge,ye=n.noResultsRenderer,Ie=n.stickyCategories,Oe=void 0!==Ie&&Ie,Ne=n.optionRenderer,je=void 0===Ne?null:Ne,Se=n.renderOnlyVisibleOptions,Re=void 0!==Se&&Se,ke=n.clearFilterOnSelection,Fe=void 0!==ke&&ke,He=n.maxOptionsWithoutScroll,Ee=n.defaultFilter,Ae=void 0===Ee?"":Ee,Le=n.searchInputAriaLabel,Me=void 0===Le?"Search for content":Le,we=n["data-testid"],Te=n.debounceRate,ze=n.searchInputRef,Be=n.renderAction,Ve=n.hideRenderActionOnInput,We=l(null),Pe=l(null),De=b(h,We),_e=b(Pe,ze),Xe=c(me||Ae),qe=e(Xe,2),Ge=qe[0],Je=qe[1];void 0!==me&&me!==Ge&&Je(me);var Ke=d((function(e){eo(-1),pe&&pe(e),Je(e)}),[Je,pe]),Qe=d((function(e,o,t){fe(e,o,t)}),[fe]),Ue=m((function(){return de?U:le(Ge,U)}),[U,Ge,le,de]),Ye=c(-1),Ze=e(Ye,2),$e=Ze[0],eo=Ze[1],oo=d((function(e){return void 0!==e&&Ue[e]&&!Ue[e].disabled}),[Ue]),to=d((function(){te&&te(Ge),Je("")}),[te,Ge,Je]),io=Ue.length>0,so=Ge.length>0;var ro=c(),ao=e(ro,2),no=ao[0],lo=ao[1],co=d((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==no?void 0:no.label)&&lo(null==e?void 0:e.category)}),[no]),mo=N({categories:Y,options:Ue,filterValue:Ge,withCategoriesDivider:$,optionLineHeight:_}),po=mo.items,uo=mo.itemsMap,vo=mo.selectableItems,bo=d((function(e,o){ae(vo[o]),oo(o)&&eo(o),Fe&&Ke("")}),[ae,vo,oo,Fe,Ke]),fo=j({getOptionId:S,defaultVisualFocusFirstIndex:P,onClick:bo,isChildSelectable:oo,options:vo,inputRef:_e}),ho=fo.visualFocusItemIndex,Co=fo.visualFocusItemId,go=fo.onOptionClick;return a.createElement(g,{type:"text2",ref:De,className:r(F.combobox,R,p(F,t("size-"+W)),o(o({},F.empty,!io),F.stickyCategory,Oe)),id:T,"data-testid":we||u(v.COMBOBOX,T),ellipsis:!1},a.createElement("div",{className:F.comboboxList,style:{maxHeight:X}},a.createElement(f,{ref:_e,value:Ge,className:r(F.comboboxSearchWrapper,A),inputAriaLabel:Me,currentAriaResultId:Co,id:"combobox-search",placeholder:B,size:W,disabled:K,onChange:Ke,autoFocus:G,loading:ve,searchIconName:M,ariaExpanded:so||io,ariaHasPopup:"listbox",searchResultsContainerId:T?"".concat(T,"-listbox"):k,debounceRate:Te,renderAction:Be,hideRenderActionOnInput:Ve}),Oe&&a.createElement(O,{label:null==no?void 0:no.label,color:null==no?void 0:no.color,className:L}),io&&a.createElement(I,{stickyCategories:Oe,categories:Y,options:po,itemsMap:uo,optionClassName:E,optionRenderer:je,activeItemIndex:$e,onActiveCategoryChanged:co,onOptionClick:go,onOptionEnter:Qe,onOptionLeave:Ce,optionLineHeight:_,shouldScrollToSelectedItem:xe,renderOnlyVisibleOptions:Re,maxOptionsWithoutScroll:He,visualFocusItemIndex:ho,id:T?"".concat(T,"-listbox"):k})),so&&!io&&!ve&&(ye?ye():a.createElement("div",{className:F.comboboxNoResults},a.createElement("div",{className:F.comboboxMessageWrapper},a.createElement("span",{className:F.comboboxMessage},oe)),te&&!K&&a.createElement(C,{className:F.addNewButton,size:W,kind:"tertiary",onClick:to},a.createElement("span",{className:F.buttonLabel},s(se)?se(Ge):se)))))})),{sizes:h,iconTypes:x.iconTypes});export{H as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as t,noop as i,isFunction as s}from"lodash-es";import r from"classnames";import a,{forwardRef as n,useRef as l,useState as c,useCallback as d,useMemo as m}from"react";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as v}from"../../tests/testIds.js";import b from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import{BASE_SIZES as h}from"../../constants/sizes.js";import C from"../Button/Button.js";import g from"../Text/Text.js";import x from"./components/ComboboxOption/ComboboxOption.js";import{defaultFilter as y}from"./ComboboxService.js";import{ComboboxItems as I}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as O}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as N,useKeyboardNavigation as j}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as S}from"./helpers.js";import{withStaticProps as R}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{COMBOBOX_LISTBOX_ID as k}from"./components/ComboboxConstants.js";import F from"./Combobox.module.scss.js";import{ComponentVibeId as H}from"../../tests/constants.js";var E=R(n((function(n,h){var x=n.className,R=void 0===x?"":x,E=n.optionClassName,A=void 0===E?"":E,L=n.searchWrapperClassName,M=n.stickyCategoryClassName,B=n.searchIcon,w=n.id,T=void 0===w?"":w,z=n.placeholder,V=void 0===z?"":z,W=n.size,P=void 0===W?"medium":W,D=n.defaultVisualFocusFirstIndex,X=n.optionLineHeight,_=void 0===X?32:X,q=n.optionsListHeight,G=n.autoFocus,J=void 0!==G&&G,K=n.disabled,Q=void 0!==K&&K,U=n.options,Y=void 0===U?[]:U,Z=n.categories,$=n.withCategoriesDivider,ee=void 0!==$&&$,oe=n.noResultsMessage,te=void 0===oe?"No results found":oe,ie=n.onAddNew,se=n.addNewLabel,re=void 0===se?"Add new":se,ae=n.onClick,ne=void 0===ae?function(e){}:ae,le=n.filter,ce=void 0===le?y:le,de=n.disableFilter,me=void 0!==de&&de,pe=n.filterValue,ue=n.onFilterChanged,ve=n.loading,be=void 0!==ve&&ve,fe=n.onOptionHover,he=void 0===fe?i:fe,Ce=n.onOptionLeave,ge=void 0===Ce?i:Ce,xe=n.shouldScrollToSelectedItem,ye=void 0===xe||xe,Ie=n.noResultsRenderer,Oe=n.stickyCategories,Ne=void 0!==Oe&&Oe,je=n.optionRenderer,Se=void 0===je?null:je,Re=n.renderOnlyVisibleOptions,ke=void 0!==Re&&Re,Fe=n.clearFilterOnSelection,He=void 0!==Fe&&Fe,Ee=n.maxOptionsWithoutScroll,Ae=n.defaultFilter,Le=void 0===Ae?"":Ae,Me=n.searchInputAriaLabel,Be=void 0===Me?"Search for content":Me,we=n["data-testid"],Te=n.debounceRate,ze=n.searchInputRef,Ve=n.renderAction,We=n.hideRenderActionOnInput,Pe=l(null),De=l(null),Xe=b(h,Pe),_e=b(De,ze),qe=c(pe||Le),Ge=e(qe,2),Je=Ge[0],Ke=Ge[1];void 0!==pe&&pe!==Je&&Ke(pe);var Qe=d((function(e){oo(-1),ue&&ue(e),Ke(e)}),[Ke,ue]),Ue=d((function(e,o,t){he(e,o,t)}),[he]),Ye=m((function(){return me?Y:ce(Je,Y)}),[Y,Je,ce,me]),Ze=c(-1),$e=e(Ze,2),eo=$e[0],oo=$e[1],to=d((function(e){return void 0!==e&&Ye[e]&&!Ye[e].disabled}),[Ye]),io=d((function(){ie&&ie(Je),Ke("")}),[ie,Je,Ke]),so=Ye.length>0,ro=Je.length>0;var ao=c(),no=e(ao,2),lo=no[0],co=no[1],mo=d((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==lo?void 0:lo.label)&&co(null==e?void 0:e.category)}),[lo]),po=N({categories:Z,options:Ye,filterValue:Je,withCategoriesDivider:ee,optionLineHeight:_}),uo=po.items,vo=po.itemsMap,bo=po.selectableItems,fo=d((function(e,o){ne(bo[o]),to(o)&&oo(o),He&&Qe("")}),[ne,bo,to,He,Qe]),ho=j({getOptionId:S,defaultVisualFocusFirstIndex:D,onClick:fo,isChildSelectable:to,options:bo,inputRef:_e}),Co=ho.visualFocusItemIndex,go=ho.visualFocusItemId,xo=ho.onOptionClick;return a.createElement(g,{type:"text2",ref:Xe,className:r(F.combobox,R,p(F,t("size-"+P)),o(o({},F.empty,!so),F.stickyCategory,Ne)),id:T,"data-testid":we||u(v.COMBOBOX,T),ellipsis:!1,"data-vibe":H.COMBOBOX},a.createElement("div",{className:F.comboboxList,style:{maxHeight:q}},a.createElement(f,{ref:_e,value:Je,className:r(F.comboboxSearchWrapper,L),inputAriaLabel:Be,currentAriaResultId:go,id:"combobox-search",placeholder:V,size:P,disabled:Q,onChange:Qe,autoFocus:J,loading:be,searchIconName:B,ariaExpanded:ro||so,ariaHasPopup:"listbox",searchResultsContainerId:T?"".concat(T,"-listbox"):k,debounceRate:Te,renderAction:Ve,hideRenderActionOnInput:We}),Ne&&a.createElement(O,{label:null==lo?void 0:lo.label,color:null==lo?void 0:lo.color,className:M}),so&&a.createElement(I,{stickyCategories:Ne,categories:Z,options:uo,itemsMap:vo,optionClassName:A,optionRenderer:Se,activeItemIndex:eo,onActiveCategoryChanged:mo,onOptionClick:xo,onOptionEnter:Ue,onOptionLeave:ge,optionLineHeight:_,shouldScrollToSelectedItem:ye,renderOnlyVisibleOptions:ke,maxOptionsWithoutScroll:Ee,visualFocusItemIndex:Co,id:T?"".concat(T,"-listbox"):k})),ro&&!so&&!be&&(Ie?Ie():a.createElement("div",{className:F.comboboxNoResults},a.createElement("div",{className:F.comboboxMessageWrapper},a.createElement("span",{className:F.comboboxMessage},te)),ie&&!Q&&a.createElement(C,{className:F.addNewButton,size:P,kind:"tertiary",onClick:io},a.createElement("span",{className:F.buttonLabel},s(re)?re(Je):re)))))})),{sizes:h,iconTypes:x.iconTypes});export{E as default};
 //# sourceMappingURL=Combobox.js.map