npm - @vibe/core - Versions diffs - 3.85.0 → 3.86.0 - Mend

@vibe/core 3.85.0 → 3.86.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 (1657) hide show

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

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_f6a06e0e07",subTextContainer:"subTextContainer_f06cdfd809",buttonsContainer:"buttonsContainer_f9aad6c47d",fullWidth:"fullWidth_e09624d8b6",button:"button_ccff5e5b85",activeButton:"activeButton_75bcd4b97c",disabled:"disabled_4271bd2be9",buttonDisabled:"buttonDisabled_6916e52f2c",startBorder:"startBorder_ab650528f8",endBorder:"endBorder_8583bd29ec",kindTertiary:"kindTertiary_827c8c030e",optionText:"optionText_3a58430d5d",selected:"selected_7cc0b7e900",wrapper:"wrapper_f4ec6dcf5e"};!function(n){const t="s_id-4b7ca9f3603b_3_84_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_f6a06e0e07 {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_f06cdfd809 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.buttonsContainer_f9aad6c47d {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_f9aad6c47d.fullWidth_e09624d8b6 {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85 {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.activeButton_75bcd4b97c {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.activeButton_75bcd4b97c:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.disabled_4271bd2be9, .buttonsContainer_f9aad6c47d .button_ccff5e5b85.buttonDisabled_6916e52f2c {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.startBorder_ab650528f8 {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.endBorder_8583bd29ec {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_f9aad6c47d .button_ccff5e5b85.fullWidth_e09624d8b6 {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_827c8c030e .buttonsContainer_f9aad6c47d .button_ccff5e5b85 {\n  border-color: transparent;\n}\n.kindTertiary_827c8c030e .buttonsContainer_f9aad6c47d .button_ccff5e5b85:first-child {\n  border-color: transparent;\n}\n.optionText_3a58430d5d:not(.disabled_4271bd2be9) {\n  color: var(--primary-text-color);\n}\n.optionText_3a58430d5d:not(.disabled_4271bd2be9).selected_7cc0b7e900 {\n  color: var(--primary-text-color);\n}\n.wrapper_f4ec6dcf5e.disabled_4271bd2be9 {\n  cursor: not-allowed;\n}\n.fullWidth_e09624d8b6 {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_9cd20b0a5a",subTextContainer:"subTextContainer_414902685d",buttonsContainer:"buttonsContainer_61544be304",fullWidth:"fullWidth_312efa6a05",button:"button_4d0be8cf5f",activeButton:"activeButton_354e522c35",disabled:"disabled_bb6d015f4f",buttonDisabled:"buttonDisabled_803e604939",startBorder:"startBorder_6c7ad364e1",endBorder:"endBorder_75c28d92d3",kindTertiary:"kindTertiary_406f3267d0",optionText:"optionText_539c54ee58",selected:"selected_886538370c",wrapper:"wrapper_811d6fc45f"};!function(n){const t="s_id-4b7ca9f3603b_3_85_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_9cd20b0a5a {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_414902685d {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.buttonsContainer_61544be304 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_61544be304.fullWidth_312efa6a05 {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.activeButton_354e522c35 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.activeButton_354e522c35:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.disabled_bb6d015f4f, .buttonsContainer_61544be304 .button_4d0be8cf5f.buttonDisabled_803e604939 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.startBorder_6c7ad364e1 {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.endBorder_75c28d92d3 {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.fullWidth_312efa6a05 {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_406f3267d0 .buttonsContainer_61544be304 .button_4d0be8cf5f {\n  border-color: transparent;\n}\n.kindTertiary_406f3267d0 .buttonsContainer_61544be304 .button_4d0be8cf5f:first-child {\n  border-color: transparent;\n}\n.optionText_539c54ee58:not(.disabled_bb6d015f4f) {\n  color: var(--primary-text-color);\n}\n.optionText_539c54ee58:not(.disabled_bb6d015f4f).selected_886538370c {\n  color: var(--primary-text-color);\n}\n.wrapper_811d6fc45f.disabled_bb6d015f4f {\n  cursor: not-allowed;\n}\n.fullWidth_312efa6a05 {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n /*\n Class name applied to the checkbox element.\n /\n checkboxClassName?: string;\n /\n Class name applied to the label element.\n /\n labelClassName?: string;\n /\n The label of the checkbox for accessibility.\n /\n 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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"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n /*\n Class name applied to the checkbox element.\n /\n checkboxClassName?: string;\n /\n Class name applied to the label element.\n /\n labelClassName?: string;\n /\n The label of the checkbox for accessibility.\n /\n 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 type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n size=\"16\"\n />\n </label>\n {label === false ? null : (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n htmlFor={id}\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Text element=\"span\" type=\"text2\">\n {label}\n </Text>\n </label>\n )}\n </div>\n );\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n className={cx(styles.wrapper, className)}\n onMouseUp={onMouseUpCallback}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n htmlFor={id}\n onClickCapture={onClickCaptureLabel}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={tabIndex}\n />\n <div\n className={cx(styles.checkbox, checkboxClassName)}\n ref={iconContainerRef}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n >\n <Icon\n className={styles.icon}\n type=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n size=\"16\"\n />\n </div>\n {label === false ? null : (\n <Text\n element=\"span\"\n type=\"text2\"\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n >\n {label}\n </Text>\n )}\n </label>\n );\n }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","_ref$separateLabel","separateLabel","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","iconContainerRef","onMouseUpCallback","useCallback","input","current","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","React","createElement","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","Icon","icon","Remove","Check","ignoreFocusStyle","ariaHidden","size","CHECKBOX_LABEL","Text","element"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper_f548089974",checkbox:"checkbox_d92a408c64",icon:"icon_a0cf8d1f3c",label:"label_8d1cc03064",input:"input_3389407de4",checkboxGrowAnimation:"checkboxGrowAnimation_877bf3fdf8"};!function(n){const e="s_id-3c767214051a_3_84_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_f548089974 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_d92a408c64 {\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_d92a408c64: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_d92a408c64:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_a0cf8d1f3c {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_8d1cc03064 {\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_3389407de4 {\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_3389407de4:focus + .checkbox_d92a408c64 {\n  border-color: var(--secondary-text-color);\n}\n.input_3389407de4:focus:checked + .checkbox_d92a408c64 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_3389407de4:focus-visible + .checkbox_d92a408c64 {\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_3389407de4:checked:focus + .checkbox_d92a408c64:after,\n.input_3389407de4:indeterminate:focus + .checkbox_d92a408c64:after {\n  background-color: var(--primary-hover-color);\n}\n.input_3389407de4:checked + .checkbox_d92a408c64,\n.input_3389407de4:indeterminate + .checkbox_d92a408c64 {\n  animation: checkboxGrowAnimation_877bf3fdf8 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_3389407de4:checked + .checkbox_d92a408c64:hover,\n.input_3389407de4:indeterminate + .checkbox_d92a408c64:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_3389407de4:checked + .checkbox_d92a408c64:hover:after,\n.input_3389407de4:indeterminate + .checkbox_d92a408c64:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_3389407de4:checked + .checkbox_d92a408c64:after,\n.input_3389407de4:indeterminate + .checkbox_d92a408c64: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_3389407de4:checked + .checkbox_d92a408c64 > .icon_a0cf8d1f3c,\n.input_3389407de4:indeterminate + .checkbox_d92a408c64 > .icon_a0cf8d1f3c {\n  visibility: visible;\n}\n.input_3389407de4:checked:disabled + .checkbox_d92a408c64:after,\n.input_3389407de4:indeterminate:disabled + .checkbox_d92a408c64:after {\n  background-color: var(--disabled-background-color);\n}\n.input_3389407de4:disabled + .checkbox_d92a408c64 .icon_a0cf8d1f3c,\n.input_3389407de4:disabled + .checkbox_d92a408c64:hover .icon_a0cf8d1f3c {\n  color: var(--disabled-text-color);\n}\n.input_3389407de4:disabled + .checkbox_d92a408c64,\n.input_3389407de4:disabled + .checkbox_d92a408c64:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_3389407de4:disabled ~ .label_8d1cc03064 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_877bf3fdf8 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var e={wrapper:"wrapper_6f253b7f27",checkbox:"checkbox_e4b711b6e8",icon:"icon_fd1a82acd0",label:"label_d498d1de30",input:"input_a3b6882900",checkboxGrowAnimation:"checkboxGrowAnimation_dee51398da"};!function(e){const n="s_id-3c767214051a_3_85_1";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 */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_6f253b7f27 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_e4b711b6e8 {\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_e4b711b6e8: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_e4b711b6e8:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_fd1a82acd0 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_d498d1de30 {\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_a3b6882900 {\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_a3b6882900:focus + .checkbox_e4b711b6e8 {\n  border-color: var(--secondary-text-color);\n}\n.input_a3b6882900:focus:checked + .checkbox_e4b711b6e8 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a3b6882900:focus-visible + .checkbox_e4b711b6e8 {\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_a3b6882900:checked:focus + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate:focus + .checkbox_e4b711b6e8:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8 {\n  animation: checkboxGrowAnimation_dee51398da var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:hover,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:hover:after,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8: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_a3b6882900:checked + .checkbox_e4b711b6e8 > .icon_fd1a82acd0,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8 > .icon_fd1a82acd0 {\n  visibility: visible;\n}\n.input_a3b6882900:checked:disabled + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate:disabled + .checkbox_e4b711b6e8:after {\n  background-color: var(--disabled-background-color);\n}\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8 .icon_fd1a82acd0,\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8:hover .icon_fd1a82acd0 {\n  color: var(--disabled-text-color);\n}\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8,\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_a3b6882900:disabled ~ .label_d498d1de30 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_dee51398da {\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 a,useRef as i,useState as r,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../../hooks/useMergeRef.js";import{getCSSVar as m}from"../../services/themes.js";import{ElementAllowedColor as d}from"../../utils/colors-vars-map.js";import{getElementColor as u}from"../../types/Colors.js";import p from"../Avatar/Avatar.js";import{getTestId as v,ComponentDefaultTestId as f}from"../../tests/testIds.js";import{AvatarType as b}from"../Avatar/AvatarConstants.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import y from"../../hooks/useSetFocus/index.js";import j from"./Chips.module.scss.js";import{ComponentVibeId as h}from"../../tests/constants.js";import C from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import k from"../../../components/icon/dist/Icon/Icon.js";import x from"../../../components/typography/dist/Text/Text.js";import S from"../../../components/icon-button/dist/IconButton/IconButton.js";import N from"../../../icons/dist/react/CloseSmall.js";var A=g(a((function(a,d){var b=a.className,g=a.avatarClassName,A=a.iconClassName,E=a.id,T=a.label,M=void 0===T?"":T,P=a.leftIcon,w=void 0===P?null:P,I=a.rightIcon,B=void 0===I?null:I,z=a.leftAvatar,H=void 0===z?null:z,L=a.rightAvatar,O=void 0===L?null:L,R=a.disabled,D=void 0!==R&&R,F=a.readOnly,_=void 0!==F&&F,U=a.allowTextSelection,q=void 0!==U&&U,G=a.color,J=void 0===G?"primary":G,K=a.iconSize,Q=void 0===K?18:K,V=a.onDelete,W=void 0===V?function(e,o){}:V,X=a.onMouseDown,Y=a.onClick,Z=a.noAnimation,$=void 0===Z||Z,ee=a.ariaLabel,oe=a.ariaHasPopup,te=void 0!==oe&&oe,ae=a.disableClickableBehavior,ie=void 0!==ae&&ae,re=a.leftAvatarType,se=void 0===re?"img":re,ne=a.rightAvatarType,le=void 0===ne?"img":ne,ce=a.showBorder,me=void 0!==ce&&ce,de=a.leftRenderer,ue=a.rightRenderer,pe=a.closeButtonAriaLabel,ve=void 0===pe?"Remove":pe,fe=a.noMargin,be=void 0!==fe&&fe,ge=a["data-testid"]||v(f.CHIP,E),ye=!(!Y&&!X||ie),je=!_&&!D,he=ee||"string"==typeof M&&M||"",Ce=i(null),ke=i(null),xe=r(!1),Se=e(xe,2),Ne=Se[0],Ae=Se[1],Ee=s((function(){return Ae(!0)}),[]),Te=s((function(){return Ae(!1)}),[]),Me=y({ref:ke}).isFocused,Pe=c(d,ke),we=l(j.chips,b,o(o(o(o(o({},j.disabled,D),j.noAnimation,$),j.withUserSelect,q),j.border,me),j.noMargin,be)),Ie=l(j.clickable,we,o(o({},j.disabled,D),j.disableTextSelection,!q)),Be=n((function(){return{backgroundColor:D?m("disabled-background-color"):ye&&(Ne||Me)?u(J,!0,!0):u(J,!0)}}),[D,ye,Ne,Me,J]),ze=s((function(e){e.stopPropagation(),W&&W(E,e)}),[E,W]),He=s((function(e){void 0!==Y&&e.target!==Ce.current&&(e.preventDefault(),Y(e))}),[Y]),Le=C({onClick:He,onMouseDown:X,disabled:D,id:E,"data-testid":ge,ariaLabel:he,ariaHidden:!1,ariaHasPopup:te,ariaExpanded:!1},Pe),Oe=ye?Object.assign(Object.assign({},Le),{ref:Pe,className:Ie,style:Be,onMouseEnter:Ee,onMouseLeave:Te}):{className:we,"aria-label":he,style:Be,ref:Pe,onClick:He,onMouseDown:X,id:E,"data-testid":ge,onMouseEnter:Ee,onMouseLeave:Te},Re="text"===se?{text:H}:{src:H},De="text"===se?{text:O}:{src:O};return t.createElement("div",Object.assign({},Oe,{"data-vibe":h.CHIPS}),H?t.createElement(p,Object.assign({withoutBorder:!0,className:l(j.avatar,j.left,g),customSize:18,type:se,key:E},Re)):null,w?t.createElement(k,{className:l(j.icon,j.left,A),iconType:"font",icon:w,iconSize:Q,ignoreFocusStyle:!0}):null,de&&t.createElement("div",{className:l(j.customRenderer,j.left)},de),t.createElement(x,{type:"text2",className:j.label},M),B?t.createElement(k,{className:l(j.icon,j.right,A),iconType:"font",icon:B,iconSize:Q,ignoreFocusStyle:!0}):null,O?t.createElement(p,Object.assign({withoutBorder:!0,className:l(j.avatar,j.right,g),customSize:18,type:le,key:E},De)):null,ue&&t.createElement("div",{className:l(j.customRenderer,j.right)},ue),je&&t.createElement(S,{size:"xxs",color:"on-primary-color",className:l(j.icon,j.close),ariaLabel:ve,hideTooltip:!0,icon:N,onClick:ze,"data-testid":"".concat(ge,"-close"),ref:Ce}))})),{colors:d,avatarTypes:b});export{A as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i,useRef as a,useState as r,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../../hooks/useMergeRef.js";import{getCSSVar as d}from"../../services/themes.js";import{getElementColor as m}from"../../types/Colors.js";import u from"../Avatar/Avatar.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import f from"../../hooks/useSetFocus/index.js";import b from"./Chips.module.scss.js";import{ComponentVibeId as g}from"../../tests/constants.js";import y from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import h from"../../../components/icon/dist/Icon/Icon.js";import j from"../../../components/typography/dist/Text/Text.js";import k from"../../../components/icon-button/dist/IconButton/IconButton.js";import C from"../../../icons/dist/react/CloseSmall.js";var x=i((function(i,x){var N=i.className,E=i.avatarClassName,S=i.iconClassName,A=i.id,M=i.label,I=void 0===M?"":M,P=i.leftIcon,w=void 0===P?null:P,B=i.rightIcon,T=void 0===B?null:B,z=i.leftAvatar,H=void 0===z?null:z,L=i.rightAvatar,O=void 0===L?null:L,R=i.disabled,D=void 0!==R&&R,F=i.readOnly,_=void 0!==F&&F,U=i.allowTextSelection,q=void 0!==U&&U,G=i.color,J=void 0===G?"primary":G,K=i.iconSize,Q=void 0===K?18:K,V=i.onDelete,W=void 0===V?function(e,o){}:V,X=i.onMouseDown,Y=i.onClick,Z=i.noAnimation,$=void 0===Z||Z,ee=i.ariaLabel,oe=i.ariaHasPopup,te=void 0!==oe&&oe,ie=i.disableClickableBehavior,ae=void 0!==ie&&ie,re=i.leftAvatarType,se=void 0===re?"img":re,ne=i.rightAvatarType,le=void 0===ne?"img":ne,ce=i.showBorder,de=void 0!==ce&&ce,me=i.leftRenderer,ue=i.rightRenderer,pe=i.closeButtonAriaLabel,ve=void 0===pe?"Remove":pe,fe=i.noMargin,be=void 0!==fe&&fe,ge=i["data-testid"]||p(v.CHIP,A),ye=!(!Y&&!X||ae),he=!_&&!D,je=ee||"string"==typeof I&&I||"",ke=a(null),Ce=a(null),xe=r(!1),Ne=e(xe,2),Ee=Ne[0],Se=Ne[1],Ae=s((function(){return Se(!0)}),[]),Me=s((function(){return Se(!1)}),[]),Ie=f({ref:Ce}).isFocused,Pe=c(x,Ce),we=l(b.chips,N,o(o(o(o(o({},b.disabled,D),b.noAnimation,$),b.withUserSelect,q),b.border,de),b.noMargin,be)),Be=l(b.clickable,we,o(o({},b.disabled,D),b.disableTextSelection,!q)),Te=n((function(){return{backgroundColor:D?d("disabled-background-color"):ye&&(Ee||Ie)?m(J,!0,!0):m(J,!0)}}),[D,ye,Ee,Ie,J]),ze=s((function(e){e.stopPropagation(),W&&W(A,e)}),[A,W]),He=s((function(e){void 0!==Y&&e.target!==ke.current&&(e.preventDefault(),Y(e))}),[Y]),Le=y({onClick:He,onMouseDown:X,disabled:D,id:A,"data-testid":ge,ariaLabel:je,ariaHidden:!1,ariaHasPopup:te,ariaExpanded:!1},Pe),Oe=ye?Object.assign(Object.assign({},Le),{ref:Pe,className:Be,style:Te,onMouseEnter:Ae,onMouseLeave:Me}):{className:we,"aria-label":je,style:Te,ref:Pe,onClick:He,onMouseDown:X,id:A,"data-testid":ge,onMouseEnter:Ae,onMouseLeave:Me},Re="text"===se?{text:H}:{src:H},De="text"===se?{text:O}:{src:O};return t.createElement("div",Object.assign({},Oe,{"data-vibe":g.CHIPS}),H?t.createElement(u,Object.assign({withoutBorder:!0,className:l(b.avatar,b.left,E),customSize:18,type:se,key:A},Re)):null,w?t.createElement(h,{className:l(b.icon,b.left,S),type:"font",icon:w,size:Q,ignoreFocusStyle:!0}):null,me&&t.createElement("div",{className:l(b.customRenderer,b.left)},me),t.createElement(j,{type:"text2",className:b.label},I),T?t.createElement(h,{className:l(b.icon,b.right,S),type:"font",icon:T,size:Q,ignoreFocusStyle:!0}):null,O?t.createElement(u,Object.assign({withoutBorder:!0,className:l(b.avatar,b.right,E),customSize:18,type:le,key:A},De)):null,ue&&t.createElement("div",{className:l(b.customRenderer,b.right)},ue),he&&t.createElement(k,{size:"xxs",color:"on-primary-color",className:l(b.icon,b.close),ariaLabel:ve,hideTooltip:!0,icon:C,onClick:ze,"data-testid":"".concat(ge,"-close"),ref:ke}))}));export{x 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 \"@vibe/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 \"@vibe/icon-button\";\nimport { Text } from \"@vibe/typography\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport { useClickableProps } from \"@vibe/clickable\";\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, indicates that the chip has a popup.\n /\n ariaHasPopup?: boolean;\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 ariaHasPopup = false,\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,\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$ariaHasPopup","ariaHasPopup","_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","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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"}
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 \"@vibe/icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Text } from \"@vibe/typography\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport { useClickableProps } from \"@vibe/clickable\";\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, indicates that the chip has a popup.\n /\n ariaHasPopup?: boolean;\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 ariaHasPopup = false,\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,\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 type=\"font\"\n icon={leftIcon}\n size={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 type=\"font\"\n icon={rightIcon}\n size={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\nexport default Chips;\n"],"names":["Chips","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$ariaHasPopup","ariaHasPopup","_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","ariaExpanded","wrapperProps","Object","assign","style","onMouseEnter","onMouseLeave","leftAvatarProps","text","src","rightAvatarProps","React","createElement","ComponentVibeId","CHIPS","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","size","ignoreFocusStyle","customRenderer","Text","right","IconButton","close","hideTooltip","CloseSmall"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={chips:"chips_b76d379490","chips-pop-in-emphasized":"chips-pop-in-emphasized_7d28224d69",border:"border_43811c2422",withUserSelect:"withUserSelect_db0349fe79",noMargin:"noMargin_158a25bb1a",label:"label_38c2426610",noAnimation:"noAnimation_69f62e0359",icon:"icon_3182b72ea5",avatar:"avatar_a149ce70f5",customRenderer:"customRenderer_30ecc9b857",left:"left_a23e353d5b",right:"right_15cd607837",close:"close_a226b94402",disabled:"disabled_875b7cc1cd",defaultCursor:"defaultCursor_875b7cc1cd",clickable:"clickable_034b833778","focus-visible":"focus-visible_1bf62dd104",disableTextSelection:"disableTextSelection_fa5ca68e37"};!function(e){const n="s_id-f5374e1ade65_3_84_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 */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_b76d379490 {\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_7d28224d69 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_b76d379490.border_43811c2422 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_b76d379490.withUserSelect_db0349fe79 {\n  user-select: text;\n  cursor: text;\n}\n.chips_b76d379490.noMargin_158a25bb1a {\n  margin: 0;\n}\n.chips_b76d379490 .label_38c2426610 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_b76d379490.noAnimation_69f62e0359 {\n  animation: none;\n}\n.chips_b76d379490 .icon_3182b72ea5,\n.chips_b76d379490 .avatar_a149ce70f5,\n.chips_b76d379490 .customRenderer_30ecc9b857 {\n  min-width: 18px;\n}\n.chips_b76d379490 .icon_3182b72ea5.left_a23e353d5b,\n.chips_b76d379490 .avatar_a149ce70f5.left_a23e353d5b,\n.chips_b76d379490 .customRenderer_30ecc9b857.left_a23e353d5b {\n  margin-right: var(--spacing-xs);\n}\n.chips_b76d379490 .icon_3182b72ea5.right_15cd607837,\n.chips_b76d379490 .avatar_a149ce70f5.right_15cd607837,\n.chips_b76d379490 .customRenderer_30ecc9b857.right_15cd607837 {\n  margin-left: var(--spacing-xs);\n}\n.chips_b76d379490 .icon_3182b72ea5.close_a226b94402,\n.chips_b76d379490 .avatar_a149ce70f5.close_a226b94402,\n.chips_b76d379490 .customRenderer_30ecc9b857.close_a226b94402 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_b76d379490.disabled_875b7cc1cd .icon_3182b72ea5 {\n  color: var(--disabled-text-color);\n}\n.chips_b76d379490.disabled_875b7cc1cd .label_38c2426610 {\n  color: var(--disabled-text-color);\n}\n.chips_b76d379490.defaultCursor_875b7cc1cd {\n  cursor: default;\n}\n.chips_b76d379490.clickable_034b833778 {\n  cursor: pointer;\n}\n.chips_b76d379490.clickable_034b833778:focus-visible, .chips_b76d379490.clickable_034b833778.focus-visible_1bf62dd104 {\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_b76d379490.clickable_034b833778:focus:not(.focus-visible_1bf62dd104) {\n  outline: none;\n}\n.chips_b76d379490.clickable_034b833778.disabled_875b7cc1cd {\n  cursor: default;\n}\n.chips_b76d379490.clickable_034b833778.disableTextSelection_fa5ca68e37 {\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_7d28224d69 {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
+var e={chips:"chips_49012b52b9","chips-pop-in-emphasized":"chips-pop-in-emphasized_8eaec033bb",border:"border_156ed92484",withUserSelect:"withUserSelect_37f07678a7",noMargin:"noMargin_89b03d6bf4",label:"label_efa4fc98ff",noAnimation:"noAnimation_f07b2e88cb",icon:"icon_5e10ab53ec",avatar:"avatar_b082316705",customRenderer:"customRenderer_deb16a7367",left:"left_6616c5c628",right:"right_6dc2ab8567",close:"close_9871361bd5",disabled:"disabled_c723c6992b",defaultCursor:"defaultCursor_c723c6992b",clickable:"clickable_4fafe720c9","focus-visible":"focus-visible_17d22ae837",disableTextSelection:"disableTextSelection_c481f6542f"};!function(e){const n="s_id-f5374e1ade65_3_85_1";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 */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_49012b52b9 {\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_8eaec033bb var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_49012b52b9.border_156ed92484 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_49012b52b9.withUserSelect_37f07678a7 {\n  user-select: text;\n  cursor: text;\n}\n.chips_49012b52b9.noMargin_89b03d6bf4 {\n  margin: 0;\n}\n.chips_49012b52b9 .label_efa4fc98ff {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_49012b52b9.noAnimation_f07b2e88cb {\n  animation: none;\n}\n.chips_49012b52b9 .icon_5e10ab53ec,\n.chips_49012b52b9 .avatar_b082316705,\n.chips_49012b52b9 .customRenderer_deb16a7367 {\n  min-width: 18px;\n}\n.chips_49012b52b9 .icon_5e10ab53ec.left_6616c5c628,\n.chips_49012b52b9 .avatar_b082316705.left_6616c5c628,\n.chips_49012b52b9 .customRenderer_deb16a7367.left_6616c5c628 {\n  margin-right: var(--spacing-xs);\n}\n.chips_49012b52b9 .icon_5e10ab53ec.right_6dc2ab8567,\n.chips_49012b52b9 .avatar_b082316705.right_6dc2ab8567,\n.chips_49012b52b9 .customRenderer_deb16a7367.right_6dc2ab8567 {\n  margin-left: var(--spacing-xs);\n}\n.chips_49012b52b9 .icon_5e10ab53ec.close_9871361bd5,\n.chips_49012b52b9 .avatar_b082316705.close_9871361bd5,\n.chips_49012b52b9 .customRenderer_deb16a7367.close_9871361bd5 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_49012b52b9.disabled_c723c6992b .icon_5e10ab53ec {\n  color: var(--disabled-text-color);\n}\n.chips_49012b52b9.disabled_c723c6992b .label_efa4fc98ff {\n  color: var(--disabled-text-color);\n}\n.chips_49012b52b9.defaultCursor_c723c6992b {\n  cursor: default;\n}\n.chips_49012b52b9.clickable_4fafe720c9 {\n  cursor: pointer;\n}\n.chips_49012b52b9.clickable_4fafe720c9:focus-visible, .chips_49012b52b9.clickable_4fafe720c9.focus-visible_17d22ae837 {\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_49012b52b9.clickable_4fafe720c9:focus:not(.focus-visible_17d22ae837) {\n  outline: none;\n}\n.chips_49012b52b9.clickable_4fafe720c9.disabled_c723c6992b {\n  cursor: default;\n}\n.chips_49012b52b9.clickable_4fafe720c9.disableTextSelection_c481f6542f {\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_8eaec033bb {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
 //# sourceMappingURL=Chips.module.scss.js.map

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

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

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_3169e6a77c",colorPickerDialogContent:"colorPickerDialogContent_21c40624e0"};!function(e){const t="s_id-ffacbf9b6446_3_84_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_3169e6a77c.colorPickerDialogContent_21c40624e0 {\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_7671593207",colorPickerDialogContent:"colorPickerDialogContent_cab004426a"};!function(e){const t="s_id-ffacbf9b6446_3_85_1";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_7671593207.colorPickerDialogContent_cab004426a {\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/ColorPickerConstants.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as e}from"../../constants/sizes.js";var o,s=5,i=r(r(r({},e.SMALL,24),e.MEDIUM,32),e.LARGE,40),t=8,l=24;!function(r){r.SQUARE="square",r.CIRCLE="circle"}(o||(o={}));export{t as COLOR_PADDING,i as COLOR_SIZES,o as ColorShapes,s as DEFAULT_NUMBER_OF_COLORS_IN_LINE,l as DIALOG_WIDTH_PADDING};
+import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as e}from"../../constants/sizes.js";var o=5,s=r(r(r({},e.SMALL,24),e.MEDIUM,32),e.LARGE,40),t=8,i=24;export{t as COLOR_PADDING,s as COLOR_SIZES,o as DEFAULT_NUMBER_OF_COLORS_IN_LINE,i as DIALOG_WIDTH_PADDING};
 //# sourceMappingURL=ColorPickerConstants.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerConstants.js","sources":["../../../../src/components/ColorPicker/ColorPickerConstants.ts"],"sourcesContent":["import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n [SIZES.SMALL]: 24,\n [SIZES.MEDIUM]: 32,\n [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n~~\n/*\n @deprecated\n */\nexport enum ColorShapes {\n SQUARE = \~~"~~square\",\n CIRCLE = \"circle\"\n}\n"~~],"names":["~~ColorShapes","~~DEFAULT_NUMBER_OF_COLORS_IN_LINE","COLOR_SIZES","_defineProperty","SIZES","SMALL","MEDIUM","LARGE","COLOR_PADDING","DIALOG_WIDTH_PADDING"],"mappings":"iIAEO,~~IAcKA~~,~~EAdCC,~~EAAmC,EAEnCC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAMC,MAAQ,IACdD,EAAME,OAAS,IACfF,EAAMG,MAAQ,IAGJC,EAAgB,EAChBC,EAAuB~~,IAKpC,SAAYT,GACVA,EAAA,OAAA,SACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA~~"}
1	+ {"version":3,"file":"ColorPickerConstants.js","sources":["../../../../src/components/ColorPicker/ColorPickerConstants.ts"],"sourcesContent":["import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n [SIZES.SMALL]: 24,\n [SIZES.MEDIUM]: 32,\n [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n"],"names":["DEFAULT_NUMBER_OF_COLORS_IN_LINE","COLOR_SIZES","_defineProperty","SIZES","SMALL","MEDIUM","LARGE","COLOR_PADDING","DIALOG_WIDTH_PADDING"],"mappings":"iIAEO,IAAMA,EAAmC,EAEnCC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAMC,MAAQ,IACdD,EAAME,OAAS,IACfF,EAAMG,MAAQ,IAGJC,EAAgB,EAChBC,EAAuB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n /*\n Callback fired when the clear button is clicked.\n /\n onClick: () => void;\n /\n The text displayed inside the button.\n /\n text?: string;\n /\n The icon displayed inside the button.\n */\n Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<~~HTMLElement~~>) => {\n const { onSelectionAction } = useGridKeyboardNavigation({\n ref: ref as React.MutableRefObject<HTMLElement>,\n itemsCount: 1,\n numberOfItemsInLine: 1,\n onItemClicked: onClick,\n getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n });\n\n return (\n <Button\n ref={ref}\n size=\"small\"\n kind=\"tertiary\"\n onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n blurOnMouseUp={false}\n className={styles.clearColorButton}\n >\n <Icon size=\"16\" className={styles.clearColorIcon} />\n {text \|\| \"Clear\"}\n </Button>\n );\n }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"sTAuBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,~~GAAwC~~,~~IAAnFC~~,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}
1	+ {"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n /*\n Callback fired when the clear button is clicked.\n /\n onClick: () => void;\n /\n The text displayed inside the button.\n /\n text?: string;\n /\n The icon displayed inside the button.\n */\n Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n const { onSelectionAction } = useGridKeyboardNavigation({\n ref: ref as React.MutableRefObject<HTMLElement>,\n itemsCount: 1,\n numberOfItemsInLine: 1,\n onItemClicked: onClick,\n getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n });\n\n return (\n <Button\n ref={ref}\n size=\"small\"\n kind=\"tertiary\"\n onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n blurOnMouseUp={false}\n className={styles.clearColorButton}\n >\n <Icon size=\"16\" className={styles.clearColorIcon} />\n {text \|\| \"Clear\"}\n </Button>\n );\n }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"sTAuBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,GAA8C,IAAzFC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}

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

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_e1b236faf5",clearColorButton:"clearColorButton_9719cfdbf7"};!function(e){const n="s_id-774e60a23ee3_3_84_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_e1b236faf5 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_9719cfdbf7 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_90a51f6389",clearColorButton:"clearColorButton_6c94471209"};!function(e){const n="s_id-774e60a23ee3_3_85_1";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_90a51f6389 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_6c94471209 {\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_0a9b1db73b"};!function(e){const d="s_id-0a5f0eb78ee4_3_84_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_0a9b1db73b {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_70c76eeeba"};!function(e){const n="s_id-0a5f0eb78ee4_3_85_1";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_70c76eeeba {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
 //# sourceMappingURL=ColorPickerColorsGrid.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as r,intersection as e}from"es-toolkit";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{ColorStyle as c,contentColors as d}from"../../../../utils/colors-vars-map.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as f}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as p,GridKeyboardNavigationContext as C}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import v from"./ColorPickerClearButton.js";import I from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var k=h(i((function(i,c){var m=i.className,h=i.onValueChange,k=i.value,y=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?j:E,P=i.isBlackListMode,w=void 0===P||P,z=i.colorsList,L=i.isMultiselect,O=i.colorSize,R=void 0===O?a.MEDIUM:O,T=i.numberOfColorsInLine,G=void 0===T?u:T,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=S(c,F),Q=l(null),X=l(null),Y=n((function(){h(null)}),[h]),Z=s((function(){return A?z:w?r(d,z):e(d,z)}),[A,w,z]),$=n((function(r){if(L){var e=o(k);if(e.includes(r)){var t=e.indexOf(r);t>-1&&e.splice(t,1)}else e.push(r);h(e)}else h([r])}),[L,h,k]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),ro=p(oo,F),eo=f(R,G);return t.createElement("div",{className:m,style:{width:eo},ref:J,tabIndex:-1},t.createElement(C.Provider,{value:ro},t.createElement(I,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:k,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:R,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),y&&t.createElement(v,{Icon:M,onClick:Y,text:y,ref:X})))})),{sizes:a,colorStyles:c,colorSizes:a,colorShapes:m});export{k as default};
+import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as e,intersection as r}from"es-toolkit";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{contentColors as c}from"../../../../utils/colors-vars-map.js";import{DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as u}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as m,GridKeyboardNavigationContext as f}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import C from"./ColorPickerClearButton.js";import p from"./ColorPickerColorsGrid.js";import v from"../../../../hooks/useMergeRef.js";import I from"../../../../../icons/dist/react/NoColor.js";var h=i((function(i,h){var k=i.className,j=i.onValueChange,S=i.value,y=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?I:E,P=i.isBlackListMode,L=void 0===P||P,O=i.colorsList,R=i.isMultiselect,w=i.colorSize,T=void 0===w?a.MEDIUM:w,z=i.numberOfColorsInLine,G=void 0===z?d:z,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=v(h,F),Q=l(null),X=l(null),Y=n((function(){j(null)}),[j]),Z=s((function(){return A?O:L?e(c,O):r(c,O)}),[A,L,O]),$=n((function(e){if(R){var r=o(S);if(r.includes(e)){var t=r.indexOf(e);t>-1&&r.splice(t,1)}else r.push(e);j(r)}else j([e])}),[R,j,S]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),eo=m(oo,F),ro=u(T,G);return t.createElement("div",{className:k,style:{width:ro},ref:J,tabIndex:-1},t.createElement(f.Provider,{value:eo},t.createElement(p,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:S,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:T,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),y&&t.createElement(C,{Icon:M,onClick:Y,text:y,ref:X})))}));export{h as default};
 //# sourceMappingURL=ColorPickerContent.js.map

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

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

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

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_1f6fae7859",circle:"circle_ce409433da",feedbackIndicator:"feedbackIndicator_e7c0f03ce8",active:"active_231ae242cb",selectedColor:"selectedColor_0326a28c59",colorItem:"colorItem_939dda28c7",colorIndicatorWrapper:"colorIndicatorWrapper_9b38a3c694",colorItemSizeSmall:"colorItemSizeSmall_803f1552fd",colorItemSizeMedium:"colorItemSizeMedium_933b528b26",colorItemSizeLarge:"colorItemSizeLarge_444b46d983",colorItemTextMode:"colorItemTextMode_f1a3f79af5",colorIconWhite:"colorIconWhite_e8edf69fae"};!function(e){const r="s_id-4f41e3ef6859_3_84_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_1f6fae7859.circle_ce409433da {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_1f6fae7859 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_1f6fae7859 .feedbackIndicator_e7c0f03ce8 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_1f6fae7859:focus,\n.itemWrapper_1f6fae7859:focus-visible,\n.itemWrapper_1f6fae7859.active_231ae242cb {\n  outline: none;\n}\n\n.itemWrapper_1f6fae7859:focus .feedbackIndicator_e7c0f03ce8:before,\n.itemWrapper_1f6fae7859:focus-visible .feedbackIndicator_e7c0f03ce8:before,\n.itemWrapper_1f6fae7859.active_231ae242cb .feedbackIndicator_e7c0f03ce8: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_1f6fae7859:focus .feedbackIndicator_e7c0f03ce8:after,\n.itemWrapper_1f6fae7859:focus-visible .feedbackIndicator_e7c0f03ce8:after,\n.itemWrapper_1f6fae7859.active_231ae242cb .feedbackIndicator_e7c0f03ce8: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_1f6fae7859:hover:not(.active_231ae242cb):not(.selectedColor_0326a28c59) .feedbackIndicator_e7c0f03ce8 {\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_1f6fae7859 .colorItem_939dda28c7 {\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_1f6fae7859 .colorItem_939dda28c7 .colorIndicatorWrapper_9b38a3c694 {\n  display: flex;\n}\n\n.itemWrapper_1f6fae7859 .colorItem_939dda28c7.colorItemSizeSmall_803f1552fd {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_1f6fae7859 .colorItem_939dda28c7.colorItemSizeMedium_933b528b26 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_1f6fae7859 .colorItem_939dda28c7.colorItemSizeLarge_444b46d983 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_1f6fae7859.selectedColor_0326a28c59 {\n  position: relative;\n}\n\n.itemWrapper_1f6fae7859.selectedColor_0326a28c59: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_1f6fae7859.selectedColor_0326a28c59 .feedbackIndicator_e7c0f03ce8:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_1f6fae7859 .colorItemTextMode_f1a3f79af5:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_1f6fae7859 .colorIconWhite_e8edf69fae {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_32763fcd94",circle:"circle_0f76691f64",feedbackIndicator:"feedbackIndicator_033db6732e",active:"active_e24a8a46c2",selectedColor:"selectedColor_c2482225f1",colorItem:"colorItem_9c4280f51e",colorIndicatorWrapper:"colorIndicatorWrapper_12475324f9",colorItemSizeSmall:"colorItemSizeSmall_d4f65d669d",colorItemSizeMedium:"colorItemSizeMedium_69cb303684",colorItemSizeLarge:"colorItemSizeLarge_7963605e2d",colorItemTextMode:"colorItemTextMode_9b68094d9f",colorIconWhite:"colorIconWhite_d095f0da52"};!function(e){const r="s_id-4f41e3ef6859_3_85_1";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_32763fcd94.circle_0f76691f64 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_32763fcd94 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_32763fcd94 .feedbackIndicator_033db6732e {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_32763fcd94:focus,\n.itemWrapper_32763fcd94:focus-visible,\n.itemWrapper_32763fcd94.active_e24a8a46c2 {\n  outline: none;\n}\n\n.itemWrapper_32763fcd94:focus .feedbackIndicator_033db6732e:before,\n.itemWrapper_32763fcd94:focus-visible .feedbackIndicator_033db6732e:before,\n.itemWrapper_32763fcd94.active_e24a8a46c2 .feedbackIndicator_033db6732e: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_32763fcd94:focus .feedbackIndicator_033db6732e:after,\n.itemWrapper_32763fcd94:focus-visible .feedbackIndicator_033db6732e:after,\n.itemWrapper_32763fcd94.active_e24a8a46c2 .feedbackIndicator_033db6732e: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_32763fcd94:hover:not(.active_e24a8a46c2):not(.selectedColor_c2482225f1) .feedbackIndicator_033db6732e {\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_32763fcd94 .colorItem_9c4280f51e {\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_32763fcd94 .colorItem_9c4280f51e .colorIndicatorWrapper_12475324f9 {\n  display: flex;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeSmall_d4f65d669d {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeMedium_69cb303684 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeLarge_7963605e2d {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_32763fcd94.selectedColor_c2482225f1 {\n  position: relative;\n}\n\n.itemWrapper_32763fcd94.selectedColor_c2482225f1: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_32763fcd94.selectedColor_c2482225f1 .feedbackIndicator_033db6732e:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_32763fcd94 .colorItemTextMode_9b68094d9f:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_32763fcd94 .colorIconWhite_d095f0da52 {\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 t from"classnames";import i,{forwardRef as s,useRef as r,useState as n,useCallback as a,useMemo as l}from"react";import{camelCase as c,noop as d,isFunction as m}from"es-toolkit";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as b}from"../../tests/testIds.js";import v from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import{BASE_SIZES as h}from"../../constants/sizes.js";import{useWarnDeprecated as C}from"../../utils/warn-deprecated.js";import x from"./components/ComboboxOption/ComboboxOption.js";import{defaultFilter as g}from"./ComboboxService.js";import{ComboboxItems as y}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as I}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as O,useKeyboardNavigation as j}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as N}from"./helpers.js";import{withStaticProps as S}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{COMBOBOX_LISTBOX_ID as R}from"./components/ComboboxConstants.js";import k from"./Combobox.module.scss.js";import{ComponentVibeId as F}from"../../tests/constants.js";import H from"../../../components/typography/dist/Text/Text.js";import E from"../../../components/button/dist/Button/Button.js";var A=S(s((function(s,h){var x=s.className,S=void 0===x?"":x,A=s.optionClassName,L=void 0===A?"":A,w=s.searchWrapperClassName,M=s.stickyCategoryClassName,B=s.searchIcon,T=s.id,z=void 0===T?"":T,V=s.placeholder,P=void 0===V?"":V,W=s.size,D=void 0===W?"medium":W,X=s.defaultVisualFocusFirstIndex,_=s.optionLineHeight,q=void 0===_?32:_,G=s.optionsListHeight,J=s.autoFocus,K=void 0!==J&&J,Q=s.disabled,U=void 0!==Q&&Q,Y=s.options,Z=void 0===Y?[]:Y,$=s.categories,ee=s.withCategoriesDivider,oe=void 0!==ee&&ee,te=s.noResultsMessage,ie=void 0===te?"No results found":te,se=s.onAddNew,re=s.addNewLabel,ne=void 0===re?"Add new":re,ae=s.onClick,le=void 0===ae?function(e){}:ae,ce=s.filter,de=void 0===ce?g:ce,me=s.disableFilter,pe=void 0!==me&&me,ue=s.filterValue,be=s.onFilterChanged,ve=s.loading,fe=void 0!==ve&&ve,he=s.onOptionHover,Ce=void 0===he?d:he,xe=s.onOptionLeave,ge=void 0===xe?d:xe,ye=s.shouldScrollToSelectedItem,Ie=void 0===ye||ye,Oe=s.noResultsRenderer,je=s.stickyCategories,Ne=void 0!==je&&je,Se=s.optionRenderer,Re=void 0===Se?null:Se,ke=s.renderOnlyVisibleOptions,Fe=void 0!==ke&&ke,He=s.clearFilterOnSelection,Ee=void 0!==He&&He,Ae=s.maxOptionsWithoutScroll,Le=s.defaultFilter,we=void 0===Le?"":Le,Me=s.searchInputAriaLabel,Be=void 0===Me?"Search for content":Me,Te=s["data-testid"],ze=s.debounceRate,Ve=s.searchInputRef,Pe=s.renderAction,We=s.hideRenderActionOnInput;C({component:"Combobox",message:"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core/next instead."});var De=r(null),Xe=r(null),_e=v(h,De),qe=v(Xe,Ve),Ge=n(ue||we),Je=e(Ge,2),Ke=Je[0],Qe=Je[1];void 0!==ue&&ue!==Ke&&Qe(ue);var Ue=a((function(e){to(-1),be&&be(e),Qe(e)}),[Qe,be]),Ye=a((function(e,o,t){Ce(e,o,t)}),[Ce]),Ze=l((function(){return pe?Z:de(Ke,Z)}),[Z,Ke,de,pe]),$e=n(-1),eo=e($e,2),oo=eo[0],to=eo[1],io=a((function(e){return void 0!==e&&Ze[e]&&!Ze[e].disabled}),[Ze]),so=a((function(){se&&se(Ke),Qe("")}),[se,Ke,Qe]),ro=Ze.length>0,no=Ke.length>0;var ao=n(),lo=e(ao,2),co=lo[0],mo=lo[1],po=a((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==co?void 0:co.label)&&mo(null==e?void 0:e.category)}),[co]),uo=O({categories:$,options:Ze,filterValue:Ke,withCategoriesDivider:oe,optionLineHeight:q}),bo=uo.items,vo=uo.itemsMap,fo=uo.selectableItems,ho=a((function(e,o){le(fo[o]),io(o)&&to(o),Ee&&Ue("")}),[le,fo,io,Ee,Ue]),Co=j({getOptionId:N,defaultVisualFocusFirstIndex:X,onClick:ho,isChildSelectable:io,options:fo,inputRef:qe}),xo=Co.visualFocusItemIndex,go=Co.visualFocusItemId,yo=Co.onOptionClick;return i.createElement(H,{type:"text2",ref:_e,className:t(k.combobox,S,p(k,c("size-"+D)),o(o({},k.empty,!ro),k.stickyCategory,Ne)),id:z,"data-testid":Te||u(b.COMBOBOX,z),ellipsis:!1,"data-vibe":F.COMBOBOX},i.createElement("div",{className:k.comboboxList,style:{maxHeight:G}},i.createElement(f,{ref:qe,value:Ke,className:t(k.comboboxSearchWrapper,w),inputAriaLabel:Be,currentAriaResultId:go,id:"combobox-search",placeholder:P,size:D,disabled:U,onChange:Ue,autoFocus:K,loading:fe,searchIconName:B,ariaExpanded:no||ro,ariaHasPopup:"listbox",searchResultsContainerId:z?"".concat(z,"-listbox"):R,debounceRate:ze,renderAction:Pe,hideRenderActionOnInput:We}),Ne&&i.createElement(I,{label:null==co?void 0:co.label,color:null==co?void 0:co.color,className:M}),ro&&i.createElement(y,{stickyCategories:Ne,categories:$,options:bo,itemsMap:vo,optionClassName:L,optionRenderer:Re,activeItemIndex:oo,onActiveCategoryChanged:po,onOptionClick:yo,onOptionEnter:Ye,onOptionLeave:ge,optionLineHeight:q,shouldScrollToSelectedItem:Ie,renderOnlyVisibleOptions:Fe,maxOptionsWithoutScroll:Ae,visualFocusItemIndex:xo,id:z?"".concat(z,"-listbox"):R})),no&&!ro&&!fe&&(Oe?Oe():i.createElement("div",{className:k.comboboxNoResults},i.createElement("div",{className:k.comboboxMessageWrapper},i.createElement("span",{className:k.comboboxMessage},ie)),se&&!U&&i.createElement(E,{className:k.addNewButton,size:D,kind:"tertiary",onClick:so},i.createElement("span",{className:k.buttonLabel},m(ne)?ne(Ke):ne)))))})),{sizes:h,iconTypes:x.iconTypes});export{A as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as s,useRef as r,useState as n,useCallback as a,useMemo as l}from"react";import{camelCase as d,noop as c,isFunction as m}from"es-toolkit";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{useWarnDeprecated as h}from"../../utils/warn-deprecated.js";import{defaultFilter as C}from"./ComboboxService.js";import{ComboboxItems as g}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as x}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as I,useKeyboardNavigation as y}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as O}from"./helpers.js";import{COMBOBOX_LISTBOX_ID as N}from"./components/ComboboxConstants.js";import j from"./Combobox.module.scss.js";import{ComponentVibeId as R}from"../../tests/constants.js";import S from"../../../components/typography/dist/Text/Text.js";import k from"../../../components/button/dist/Button/Button.js";var F=s((function(s,F){var H=s.className,E=void 0===H?"":H,A=s.optionClassName,L=void 0===A?"":A,w=s.searchWrapperClassName,M=s.stickyCategoryClassName,B=s.searchIcon,T=s.id,V=void 0===T?"":T,W=s.placeholder,z=void 0===W?"":W,P=s.size,D=void 0===P?"medium":P,X=s.defaultVisualFocusFirstIndex,_=s.optionLineHeight,q=void 0===_?32:_,G=s.optionsListHeight,J=s.autoFocus,K=void 0!==J&&J,Q=s.disabled,U=void 0!==Q&&Q,Y=s.options,Z=void 0===Y?[]:Y,$=s.categories,ee=s.withCategoriesDivider,oe=void 0!==ee&&ee,te=s.noResultsMessage,ie=void 0===te?"No results found":te,se=s.onAddNew,re=s.addNewLabel,ne=void 0===re?"Add new":re,ae=s.onClick,le=void 0===ae?function(e){}:ae,de=s.filter,ce=void 0===de?C:de,me=s.disableFilter,pe=void 0!==me&&me,ue=s.filterValue,ve=s.onFilterChanged,be=s.loading,fe=void 0!==be&&be,he=s.onOptionHover,Ce=void 0===he?c:he,ge=s.onOptionLeave,xe=void 0===ge?c:ge,Ie=s.shouldScrollToSelectedItem,ye=void 0===Ie||Ie,Oe=s.noResultsRenderer,Ne=s.stickyCategories,je=void 0!==Ne&&Ne,Re=s.optionRenderer,Se=void 0===Re?null:Re,ke=s.renderOnlyVisibleOptions,Fe=void 0!==ke&&ke,He=s.clearFilterOnSelection,Ee=void 0!==He&&He,Ae=s.maxOptionsWithoutScroll,Le=s.defaultFilter,we=void 0===Le?"":Le,Me=s.searchInputAriaLabel,Be=void 0===Me?"Search for content":Me,Te=s["data-testid"],Ve=s.debounceRate,We=s.searchInputRef,ze=s.renderAction,Pe=s.hideRenderActionOnInput;h({component:"Combobox",message:"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core instead."});var De=r(null),Xe=r(null),_e=b(F,De),qe=b(Xe,We),Ge=n(ue||we),Je=e(Ge,2),Ke=Je[0],Qe=Je[1];void 0!==ue&&ue!==Ke&&Qe(ue);var Ue=a((function(e){to(-1),ve&&ve(e),Qe(e)}),[Qe,ve]),Ye=a((function(e,o,t){Ce(e,o,t)}),[Ce]),Ze=l((function(){return pe?Z:ce(Ke,Z)}),[Z,Ke,ce,pe]),$e=n(-1),eo=e($e,2),oo=eo[0],to=eo[1],io=a((function(e){return void 0!==e&&Ze[e]&&!Ze[e].disabled}),[Ze]),so=a((function(){se&&se(Ke),Qe("")}),[se,Ke,Qe]),ro=Ze.length>0,no=Ke.length>0;var ao=n(),lo=e(ao,2),co=lo[0],mo=lo[1],po=a((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==co?void 0:co.label)&&mo(null==e?void 0:e.category)}),[co]),uo=I({categories:$,options:Ze,filterValue:Ke,withCategoriesDivider:oe,optionLineHeight:q}),vo=uo.items,bo=uo.itemsMap,fo=uo.selectableItems,ho=a((function(e,o){le(fo[o]),io(o)&&to(o),Ee&&Ue("")}),[le,fo,io,Ee,Ue]),Co=y({getOptionId:O,defaultVisualFocusFirstIndex:X,onClick:ho,isChildSelectable:io,options:fo,inputRef:qe}),go=Co.visualFocusItemIndex,xo=Co.visualFocusItemId,Io=Co.onOptionClick;return i.createElement(S,{type:"text2",ref:_e,className:t(j.combobox,E,p(j,d("size-"+D)),o(o({},j.empty,!ro),j.stickyCategory,je)),id:V,"data-testid":Te||u(v.COMBOBOX,V),ellipsis:!1,"data-vibe":R.COMBOBOX},i.createElement("div",{className:j.comboboxList,style:{maxHeight:G}},i.createElement(f,{ref:qe,value:Ke,className:t(j.comboboxSearchWrapper,w),inputAriaLabel:Be,currentAriaResultId:xo,id:"combobox-search",placeholder:z,size:D,disabled:U,onChange:Ue,autoFocus:K,loading:fe,searchIconName:B,ariaExpanded:no||ro,ariaHasPopup:"listbox",searchResultsContainerId:V?"".concat(V,"-listbox"):N,debounceRate:Ve,renderAction:ze,hideRenderActionOnInput:Pe}),je&&i.createElement(x,{label:null==co?void 0:co.label,color:null==co?void 0:co.color,className:M}),ro&&i.createElement(g,{stickyCategories:je,categories:$,options:vo,itemsMap:bo,optionClassName:L,optionRenderer:Se,activeItemIndex:oo,onActiveCategoryChanged:po,onOptionClick:Io,onOptionEnter:Ye,onOptionLeave:xe,optionLineHeight:q,shouldScrollToSelectedItem:ye,renderOnlyVisibleOptions:Fe,maxOptionsWithoutScroll:Ae,visualFocusItemIndex:go,id:V?"".concat(V,"-listbox"):N})),no&&!ro&&!fe&&(Oe?Oe():i.createElement("div",{className:j.comboboxNoResults},i.createElement("div",{className:j.comboboxMessageWrapper},i.createElement("span",{className:j.comboboxMessage},ie)),se&&!U&&i.createElement(k,{className:j.addNewButton,size:D,kind:"tertiary",onClick:so},i.createElement("span",{className:j.buttonLabel},m(ne)?ne(Ke):ne)))))}));export{F as default};
 //# sourceMappingURL=Combobox.js.map