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

@vibe/core 3.87.0 → 4.0.0-alpha.1

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 (2022) hide show

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

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper",checkbox:"checkbox",icon:"icon",label:"label",input:"input",checkboxGrowAnimation:"checkboxGrowAnimation"};!function(n){const e="s_id-3c767214051a_3_86_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.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 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox {\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: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:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label {\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 {\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:focus + .checkbox {\n  border-color: var(--secondary-text-color);\n}\n.input:focus:checked + .checkbox {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:focus-visible + .checkbox {\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:checked:focus + .checkbox:after,\n.input:indeterminate:focus + .checkbox:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox,\n.input:indeterminate + .checkbox {\n  animation: checkboxGrowAnimation var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover,\n.input:indeterminate + .checkbox:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover:after,\n.input:indeterminate + .checkbox:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox:after,\n.input:indeterminate + .checkbox: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:checked + .checkbox > .icon,\n.input:indeterminate + .checkbox > .icon {\n  visibility: visible;\n}\n.input:checked:disabled + .checkbox:after,\n.input:indeterminate:disabled + .checkbox:after {\n  background-color: var(--disabled-background-color);\n}\n.input:disabled + .checkbox .icon,\n.input:disabled + .checkbox:hover .icon {\n  color: var(--disabled-text-color);\n}\n.input:disabled + .checkbox,\n.input:disabled + .checkbox:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input:disabled ~ .label {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var n={wrapper:"wrapper",checkbox:"checkbox",icon:"icon",label:"label",input:"input",checkboxGrowAnimation:"checkboxGrowAnimation"};!function(n){const e="s_id-35b4a9ebcadb_4_0_0-alpha_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.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 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox {\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:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n.checkbox:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--space-8);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input {\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:focus + .checkbox {\n  border-color: var(--secondary-text-color);\n}\n.input:focus:checked + .checkbox {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:focus-visible + .checkbox {\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:checked:focus + .checkbox:after,\n.input:indeterminate:focus + .checkbox:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox,\n.input:indeterminate + .checkbox {\n  animation: checkboxGrowAnimation var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover,\n.input:indeterminate + .checkbox:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover:after,\n.input:indeterminate + .checkbox:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox:after,\n.input:indeterminate + .checkbox:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  inset-inline-start: 0;\n}\n.input:checked + .checkbox > .icon,\n.input:indeterminate + .checkbox > .icon {\n  visibility: visible;\n}\n.input:checked:disabled + .checkbox:after,\n.input:indeterminate:disabled + .checkbox:after {\n  background-color: var(--disabled-background-color);\n}\n.input:disabled + .checkbox .icon,\n.input:disabled + .checkbox:hover .icon {\n  color: var(--disabled-text-color);\n}\n.input:disabled + .checkbox,\n.input:disabled + .checkbox:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input:disabled ~ .label {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
 //# sourceMappingURL=Checkbox.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t}from"react";import{isFirefox as r}from"../../../utils/user-agent-utils.js";function n(n){var u=n.inputRef,c=e(!1);return{onClickCapture:t((function(e){var t;if(!c.current&&e.shiftKey&&r()&&null!=u&&null!==(t=u.current)&&void 0!==t&&t.dispatchEvent){e.preventDefault();var n=new MouseEvent("click",{shiftKey:!0,bubbles:!0,cancelable:!0});c.current=!0,u.current.dispatchEvent(n)}else c.current&&(c.current=!1)}),[c,u])}}export{n as useSupportFirefoxLabelClick};
+import{useRef as e,useCallback as t}from"react";import{isFirefox as r}from"../../../utils/user-agent-utils.js";function n(n){var u=n.inputRef,i=e(!1);return{onClickCapture:t((function(e){var t;if(!i.current&&e.shiftKey&&r()&&(null===(t=null==u?void 0:u.current)||void 0===t?void 0:t.dispatchEvent)){e.preventDefault();var n=new MouseEvent("click",{shiftKey:!0,bubbles:!0,cancelable:!0});i.current=!0,u.current.dispatchEvent(n)}else i.current&&(i.current=!1)}),[i,u])}}export{n as useSupportFirefoxLabelClick};
 //# sourceMappingURL=useSupportFirefoxLabelClick.js.map

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

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

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

package/dist/mocked_classnames/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 \"aria-label\"?: string;\n /\n If true, indicates that the chip has a popup.\n /\n \"aria-haspopup\"?: 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 \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup = false,\n \"data-testid\": dataTestId,\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;\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 \"aria-label\": overrideAriaLabel,\n \"aria-hidden\": false,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": 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 aria-label={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$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","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/mocked_classnames/src/components/Chips/Chips.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={chips:"chips","chips-pop-in-emphasized":"chips-pop-in-emphasized",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",label:"label",noAnimation:"noAnimation",icon:"icon",avatar:"avatar",customRenderer:"customRenderer",left:"left",right:"right",close:"close",disabled:"disabled",defaultCursor:"defaultCursor",clickable:"clickable","focus-visible":"focus-visible",disableTextSelection:"disableTextSelection"};!function(n){const e="s_id-f5374e1ade65_3_86_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips {\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 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips.border {\n  border: 1px solid var(--primary-background-color);\n}\n.chips.withUserSelect {\n  user-select: text;\n  cursor: text;\n}\n.chips.noMargin {\n  margin: 0;\n}\n.chips .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips.noAnimation {\n  animation: none;\n}\n.chips .icon,\n.chips .avatar,\n.chips .customRenderer {\n  min-width: 18px;\n}\n.chips .icon.left,\n.chips .avatar.left,\n.chips .customRenderer.left {\n  margin-right: var(--spacing-xs);\n}\n.chips .icon.right,\n.chips .avatar.right,\n.chips .customRenderer.right {\n  margin-left: var(--spacing-xs);\n}\n.chips .icon.close,\n.chips .avatar.close,\n.chips .customRenderer.close {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips.disabled .icon {\n  color: var(--disabled-text-color);\n}\n.chips.disabled .label {\n  color: var(--disabled-text-color);\n}\n.chips.defaultCursor {\n  cursor: default;\n}\n.chips.clickable {\n  cursor: pointer;\n}\n.chips.clickable:focus-visible, .chips.clickable.focus-visible {\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.clickable:focus:not(.focus-visible) {\n  outline: none;\n}\n.chips.clickable.disabled {\n  cursor: default;\n}\n.chips.clickable.disableTextSelection {\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 {\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{n as default};
+var e={chips:"chips","chips-pop-in-emphasized":"chips-pop-in-emphasized",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",label:"label",noAnimation:"noAnimation",icon:"icon",avatar:"avatar",customRenderer:"customRenderer",left:"left",right:"right",close:"close",disabled:"disabled",defaultCursor:"defaultCursor",clickable:"clickable","focus-visible":"focus-visible",disableTextSelection:"disableTextSelection"};!function(e){const n="s_id-11bfedb29341_4_0_0-alpha_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.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 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--space-4));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips.border {\n  border: 1px solid var(--primary-background-color);\n}\n.chips.withUserSelect {\n  user-select: text;\n  cursor: text;\n}\n.chips.noMargin {\n  margin: 0;\n}\n.chips .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips.noAnimation {\n  animation: none;\n}\n.chips .icon,\n.chips .avatar,\n.chips .customRenderer {\n  min-width: 18px;\n}\n.chips .icon.left,\n.chips .avatar.left,\n.chips .customRenderer.left {\n  margin-inline-end: var(--space-4);\n}\n.chips .icon.right,\n.chips .avatar.right,\n.chips .customRenderer.right {\n  margin-inline-start: var(--space-4);\n}\n.chips .icon.close,\n.chips .avatar.close,\n.chips .customRenderer.close {\n  margin-inline-start: var(--space-4);\n  color: var(--primary-text-color);\n}\n.chips.disabled .icon {\n  color: var(--disabled-text-color);\n}\n.chips.disabled .label {\n  color: var(--disabled-text-color);\n}\n.chips.defaultCursor {\n  cursor: default;\n}\n.chips.clickable {\n  cursor: pointer;\n}\n.chips.clickable:focus-visible, .chips.clickable.focus-visible {\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.clickable:focus:not(.focus-visible) {\n  outline: none;\n}\n.chips.clickable.disabled {\n  cursor: default;\n}\n.chips.clickable.disableTextSelection {\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 {\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/mocked_classnames/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{DialogContentContainer as c}from"@vibe/dialog/mockedClassNames";import{ColorStyle as a}from"../../utils/colors-vars-map.js";import{NoColor as n}from"@vibe/icons";import m from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as d,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as C}from"./services/ColorPickerStyleService.js";import{withStaticProps as f}from"../../types/withStaticProps.js";import{NOOP as p}from"../../utils/function-utils.js";import{getTestId as v,ComponentDefaultTestId as I}from"../../tests/testIds.js";import k from"./ColorPicker.module.scss.js";import{ComponentVibeId as S}from"../../tests/constants.js";var h=f(e((function(e,s){var a=e.className,d=e.onSave,f=void 0===d?p:d,h=e.value,P=void 0===h?"":h,j=e.noColorText,L=e.colorStyle,b=void 0===L?"regular":L,R=e.ColorIndicatorIcon,g=e.SelectedIndicatorIcon,y=e.shouldRenderIndicatorWithoutBackground,O=e.NoColorIcon,M=void 0===O?n:O,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,B=void 0===z?[]:z,E=e.isMultiselect,T=e.colorSize,x=void 0===T?"medium":T,D=e.numberOfColorsInLine,K=void 0===D?u:D,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(f,[f]),Q=C(x,K);return r.createElement(c,{ref:H,className:o(k.colorPicker,k.colorPickerDialogContent,a),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":S.COLOR_PICKER},r.createElement(m,{onValueChange:J,value:P,noColorText:j,shouldRenderIndicatorWithoutBackground:R&&y,colorStyle:b,ColorIndicatorIcon:R,SelectedIndicatorIcon:g,NoColorIcon:M,colorsList:B,isBlackListMode:w,isMultiselect:E,colorSize:x,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||v(I.COLOR_PICKER,A)}))})),{sizes:s,colorStyles:a,colorSizes:s,colorShapes:d});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{DialogContentContainer as l}from"@vibe/dialog/mockedClassNames";import{NoColor as c}from"@vibe/icons";import a from"./components/ColorPickerContent/ColorPickerContent.js";import{DEFAULT_NUMBER_OF_COLORS_IN_LINE as n}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as d}from"./services/ColorPickerStyleService.js";import{NOOP as m}from"../../utils/function-utils.js";import{getTestId as u,ComponentDefaultTestId as C}from"../../tests/testIds.js";import f from"./ColorPicker.module.scss.js";import{ComponentVibeId as v}from"../../tests/constants.js";var p=r((function(r,p){var I=r.className,k=r.onSave,h=void 0===k?m:k,P=r.value,S=void 0===P?"":P,L=r.noColorText,b=r.colorStyle,R=void 0===b?"regular":b,g=r.ColorIndicatorIcon,j=r.SelectedIndicatorIcon,O=r.shouldRenderIndicatorWithoutBackground,M=r.NoColorIcon,N=void 0===M?c:M,y=r.isBlackListMode,w=void 0===y||y,B=r.colorsList,E=void 0===B?[]:B,T=r.isMultiselect,x=r.colorSize,z=void 0===x?"medium":x,D=r.numberOfColorsInLine,K=void 0===D?n:D,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(p,G),J=i(h,[h]),Q=d(z,K);return e.createElement(l,{ref:H,className:o(f.colorPicker,f.colorPickerDialogContent,I),"aria-labelledby":"Color Picker Dialog","aria-describedby":"Pick color",style:{width:Q},"data-vibe":v.COLOR_PICKER},e.createElement(a,{onValueChange:J,value:S,noColorText:L,shouldRenderIndicatorWithoutBackground:g&&O,colorStyle:R,ColorIndicatorIcon:g,SelectedIndicatorIcon:j,NoColorIcon:N,colorsList:E,isBlackListMode:w,isMultiselect:T,colorSize:z,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||u(C.COLOR_PICKER,A)}))}));export{p as default};
 //# sourceMappingURL=ColorPicker.js.map

package/dist/mocked_classnames/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":"~~44BAkGA~~,~~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 aria-labelledby=\"Color Picker Dialog\"\n aria-describedby=\"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","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId"],"mappings":"ysBAiGMA,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,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnD,kBAAA,yCACC,aACjB+C,MAAO,CAAET,MAAAA,GACE,YAAAU,EAAgBC,cAE3BT,EAAAC,cAACS,EACC,CAAAC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBJ,aAAcnB,KAIlF"}

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

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker",colorPickerDialogContent:"colorPickerDialogContent"};!function(e){const t="s_id-ffacbf9b6446_3_86_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.colorPickerDialogContent {\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",colorPickerDialogContent:"colorPickerDialogContent"};!function(e){const t="s_id-ffacbf9b6446_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker.colorPickerDialogContent {\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/mocked_classnames/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/mocked_classnames/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/mocked_classnames/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":"uSAuBMA,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":"uSAuBMA,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/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss.js CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid"};!function(e){const n="s_id-0a5f0eb78ee4_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid"};!function(e){const n="s_id-0a5f0eb78ee4_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid {\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/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js CHANGED Viewed

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

package/dist/mocked_classnames/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":"27BAyGA,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":"m1BAqGMA,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/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"classnames";import l,{forwardRef as s,useMemo as n,useRef as c,useCallback as a,useEffect as i}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import{Tooltip as p}from"@vibe/tooltip/mockedClassNames";import{Clickable as f}from"@vibe/clickable/mockedClassNames";import{getTestId as v}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as C}from"../../../../tests/constants.js";import I from"./ColorPickerItemComponent.module.scss.js";var k=s((function(s,k){var g=s.color,y=s.onColorClicked,E=s.colorStyle,b=void 0===E?"regular":E,N=s.shouldRenderIndicatorWithoutBackground,S=s.ColorIndicatorIcon,j=s.SelectedIndicatorIcon,h=void 0===j?S:j,L=s.isSelected,M=s.colorSize,P=s.tooltipContent,W=s.isActive,_=s.colorShape,x=s["data-testid"],A=n((function(){return m.includes(g)}),[g]),R=A?d.getMondayColorAsStyle(g,b):g,z=c(null),B=a((function(){return y(g)}),[y,g]);i((function(){if((null==z?void 0:z.current)&&!N&&A){var e=z.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(g,"selected"===b?"regular":"hover")},t=function(e){e.target.style.background=R};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[g,R,b,A,z,N]);var D=L||S,H=N?{color:R}:{};return l.createElement(p,{content:P},l.createElement("li",{className:r(I.itemWrapper,e(e(e({},I.selectedColor,L),I.active,W),I.circle,"circle"===_)),"data-testid":x||v(C.COLOR_PICKER_ITEM,g)},l.createElement("div",{className:r(I.feedbackIndicator)}),l.createElement(f,{ref:z,ariaLabel:g,className:r(I.colorItem,t(I,o("color-item-size-"+M)),e({},I.colorItemTextMode,N)),style:{background:N?"transparent":R},onClick:B,tabIndex:"-1",onMouseDown:function(e){return e.preventDefault()}},l.createElement("div",{className:r(I.colorIndicatorWrapper),style:H},D&&l.createElement(u,{icon:L?h:S,className:r(e({},I.colorIconWhite,!N)),ignoreFocusStyle:!0})))))}));export{k as default};
+import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"classnames";import l,{forwardRef as s,useMemo as n,useRef as c,useCallback as a,useEffect as i}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import{Tooltip as p}from"@vibe/tooltip/mockedClassNames";import{Clickable as f}from"@vibe/clickable/mockedClassNames";import{getTestId as v}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as C}from"../../../../tests/constants.js";import I from"./ColorPickerItemComponent.module.scss.js";var k=s((function(s,k){var g=s.color,y=s.onColorClicked,E=s.colorStyle,b=void 0===E?"regular":E,N=s.shouldRenderIndicatorWithoutBackground,S=s.ColorIndicatorIcon,j=s.SelectedIndicatorIcon,h=void 0===j?S:j,M=s.isSelected,L=s.colorSize,P=s.tooltipContent,W=s.isActive,_=s.colorShape,x=s["data-testid"],A=n((function(){return m.includes(g)}),[g]),R=A?d.getMondayColorAsStyle(g,b):g,z=c(null),B=a((function(){return y(g)}),[y,g]);i((function(){if((null==z?void 0:z.current)&&!N&&A){var e=z.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(g,"selected"===b?"regular":"hover")},t=function(e){e.target.style.background=R};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[g,R,b,A,z,N]);var D=M||S,H=N?{color:R}:{};return l.createElement(p,{content:P},l.createElement("li",{className:r(I.itemWrapper,e(e(e({},I.selectedColor,M),I.active,W),I.circle,"circle"===_)),"data-testid":x||v(C.COLOR_PICKER_ITEM,g)},l.createElement("div",{className:r(I.feedbackIndicator)}),l.createElement(f,{ref:z,"aria-label":g,className:r(I.colorItem,t(I,o("color-item-size-"+L)),e({},I.colorItemTextMode,N)),style:{background:N?"transparent":R},onClick:B,tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}},l.createElement("div",{className:r(I.colorIndicatorWrapper),style:H},D&&l.createElement(u,{icon:M?h:S,className:r(e({},I.colorIconWhite,!N)),ignoreFocusStyle:!0})))))}));export{k as default};
 //# sourceMappingURL=ColorPickerItemComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n ~~ariaLabel~~={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex~~=\"~~-1\"\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","~~ariaLabel","~~colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"2xBAgEMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,~~EAAAC~~,~~cAACe~~,~~EAAS~~,~~CACRC~~,IAAKlC,~~EACLmC~~,~~UAAWxD~~,~~EACX0C~~,UAAWC,EAAGC,~~EAAOa~~,UAAWC,~~EAASd~~,~~EAAQe~~,EAAU,~~mBAAqBlD~~,IAAWqC,EAAA,CAAA,EACxFF,~~EAAOgB~~,~~kBAAoBxD~~,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,~~EACTsC~~,~~SAAS~~,~~KACTC~~,YAAa,~~SAAAjC~~,GAAC,OAAIA,~~EAAEkC~~,gBAAgB,~~GAEpCzB~~,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,~~EAAOoB~~,~~uBAAwBjC~~,MAAOM,GACtDD,GACCE,EAAAC,~~cAAC0B~~,EAAI,CACHC,~~KAAM1D~~,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,~~EAAOuB~~,~~gBAAkB/~~D,~~IAE5BgE,~~kBACA,OAOhB"}
1	+ {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n aria-label={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex={-1}\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"2xBAgEMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,EAACC,cAAAe,EACC,CAAAC,IAAKlC,EACO,aAAArB,EACZ0C,UAAWC,EAAGC,EAAOY,UAAWC,EAASb,EAAQc,EAAU,mBAAqBjD,IAAWqC,EAAA,CAAA,EACxFF,EAAOe,kBAAoBvD,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,EACTqC,UAAW,EACXC,YAAa,SAAAhC,GAAC,OAAIA,EAAEiC,gBAAgB,GAEpCxB,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,EAAOmB,uBAAwBhC,MAAOM,GACtDD,GACCE,EAAAC,cAACyB,EAAI,CACHC,KAAMzD,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,EAAOsB,gBAAkB9D,IAE5B+D,kBACA,OAOhB"}

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

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper",circle:"circle",feedbackIndicator:"feedbackIndicator",active:"active",selectedColor:"selectedColor",colorItem:"colorItem",colorIndicatorWrapper:"colorIndicatorWrapper",colorItemSizeSmall:"colorItemSizeSmall",colorItemSizeMedium:"colorItemSizeMedium",colorItemSizeLarge:"colorItemSizeLarge",colorItemTextMode:"colorItemTextMode",colorIconWhite:"colorIconWhite"};!function(e){const r="s_id-4f41e3ef6859_3_86_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.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator: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:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator: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:hover:not(.active):not(.selectedColor) .feedbackIndicator {\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 .colorItem {\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 .colorItem .colorIndicatorWrapper {\n  display: flex;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor: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.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper",circle:"circle",feedbackIndicator:"feedbackIndicator",active:"active",selectedColor:"selectedColor",colorItem:"colorItem",colorIndicatorWrapper:"colorIndicatorWrapper",colorItemSizeSmall:"colorItemSizeSmall",colorItemSizeMedium:"colorItemSizeMedium",colorItemSizeLarge:"colorItemSizeLarge",colorItemTextMode:"colorItemTextMode",colorIconWhite:"colorIconWhite"};!function(e){const r="s_id-4f41e3ef6859_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const o=document.createElement("style");o.id=r,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator: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:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator: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:hover:not(.active):not(.selectedColor) .feedbackIndicator {\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 .colorItem {\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 .colorItem .colorIndicatorWrapper {\n  display: flex;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor: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.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

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