@corva/ui 3.79.0-12 → 3.79.0-13

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.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("@babel/runtime/helpers/defineProperty"),e=require("classnames"),c=require("lodash"),n=require("react"),r=require("../utils.js"),i=require("./constants.js"),t=require("./Swatches.scss.js"),u=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var a=require("react/jsx-runtime");function l(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var m=l(s),j=l(o),q=l(e),I=["a"];function d(s,o){var e=Object.keys(s);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(s);o&&(c=c.filter((function(o){return Object.getOwnPropertyDescriptor(s,o).enumerable}))),e.push.apply(e,c)}return e}function p(s){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?d(Object(e),!0).forEach((function(o){j.default(s,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(e)):d(Object(e)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(e,o))}))}return s}exports.Swatches=function(s){var o=s.value,e=s.onChange,l=s.addTransparent,j=s.autoFocus,d=s.onAutoFocus,b=n.useRef([]),f=p(p({},o),{},{a:1}),h=0===o.a,C=l?i.paletteColors.toSpliced(i.paletteColors.length-1,1,"#FFFFFF00"):i.paletteColors,O=function(s){var o=r.parseColor(s),e=o.a,n=p(p({},m.default(o,I)),{},{a:1}),i=0===e;return c.isEqual(f,n)&&!i&&!h||h&&i},v=C.findIndex(O);n.useEffect((function(){if(j){var s=-1===v?0:v,o=b.current[s];o&&(o.focus({preventScroll:!0}),null==d||d())}}),[j,d,v]);var g=function(s,o){var c;(e(r.parseColor(C[s])),o)&&(null===(c=b.current[s])||void 0===c||c.focus({preventScroll:!0}))},F=function(s){var o,e=Number(s.currentTarget.dataset.index);switch(s.key){case"ArrowRight":o=(e+1)%C.length;break;case"ArrowLeft":o=(e-1+C.length)%C.length;break;case"ArrowDown":o=(e+12)%C.length;break;case"ArrowUp":o=(e-12+C.length)%C.length;break;case"Home":o=0;break;case"End":o=C.length-1;break;case"Enter":case" ":return s.preventDefault(),void g(e,!1);default:return}"number"==typeof o&&(s.preventDefault(),g(o,!0))};return a.jsx("div",{className:t.root,role:"radiogroup","aria-label":"Color palette",children:C.map((function(s,o){var c=r.parseColor(s),n=r.getLuminance(s)>.97,i=0===c.a,l=O(s);return a.jsx("div",{ref:function(s){b.current[o]=s},className:q.default(t.swatch,l&&t.selected,i&&t.transparent,(n||i)&&t.darkAccent),onClick:function(){return e(c)},onKeyDown:F,style:i?void 0:{background:s},role:"radio","aria-checked":l,"aria-label":i?"Transparent":s.toUpperCase(),tabIndex:l||-1===v&&0===o?0:-1,"data-index":o,children:a.jsx(u.CheckSmallIcon,{size:14,className:t.icon})},s)}))})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("@babel/runtime/helpers/defineProperty"),e=require("classnames"),c=require("lodash"),n=require("react"),r=require("../utils.js"),i=require("./constants.js"),u=require("./Swatches.scss.js"),t=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var a=require("react/jsx-runtime");function l(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var m=l(s),j=l(o),q=l(e),I=["a"];function d(s,o){var e=Object.keys(s);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(s);o&&(c=c.filter((function(o){return Object.getOwnPropertyDescriptor(s,o).enumerable}))),e.push.apply(e,c)}return e}function p(s){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?d(Object(e),!0).forEach((function(o){j.default(s,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(e)):d(Object(e)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(e,o))}))}return s}exports.Swatches=function(s){var o=s.value,e=s.onChange,l=s.addTransparent,j=s.autoFocus,d=s.onAutoFocus,b=n.useRef([]),f=p(p({},o),{},{a:1}),h=0===o.a,C=l?i.paletteColors.toSpliced(11,1,"#FFFFFF00"):i.paletteColors,O=function(s){var o=r.parseColor(s),e=o.a,n=p(p({},m.default(o,I)),{},{a:1}),i=0===e;return c.isEqual(f,n)&&!i&&!h||h&&i},v=C.findIndex(O);n.useEffect((function(){if(j){var s=-1===v?0:v,o=b.current[s];o&&(o.focus({preventScroll:!0}),null==d||d())}}),[j,d,v]);var g=function(s,o){var c;(e(r.parseColor(C[s])),o)&&(null===(c=b.current[s])||void 0===c||c.focus({preventScroll:!0}))},F=function(s){var o,e=Number(s.currentTarget.dataset.index);switch(s.key){case"ArrowRight":o=(e+1)%C.length;break;case"ArrowLeft":o=(e-1+C.length)%C.length;break;case"ArrowDown":o=(e+12)%C.length;break;case"ArrowUp":o=(e-12+C.length)%C.length;break;case"Home":o=0;break;case"End":o=C.length-1;break;case"Enter":case" ":return s.preventDefault(),void g(e,!1);default:return}"number"==typeof o&&(s.preventDefault(),g(o,!0))};return a.jsx("div",{className:u.root,role:"radiogroup","aria-label":"Color palette",children:C.map((function(s,o){var c=r.parseColor(s),n=r.getLuminance(s)>.97,i=0===c.a,l=O(s);return a.jsx("div",{ref:function(s){b.current[o]=s},className:q.default(u.swatch,l&&u.selected,i&&u.transparent,(n||i)&&u.darkAccent),onClick:function(){return e(c)},onKeyDown:F,style:i?void 0:{background:s},role:"radio","aria-checked":l,"aria-label":i?"Transparent":s.toUpperCase(),tabIndex:l||-1===v&&0===o?0:-1,"data-index":o,children:a.jsx(t.CheckSmallIcon,{size:14,className:u.icon})},s)}))})};
2
2
  //# sourceMappingURL=Swatches.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Swatches.js","sources":["../../../../../src/componentsV2/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isEqual } from 'lodash';\nimport { KeyboardEventHandler, useEffect, useRef } from 'react';\n\nimport { ColorChannels, getLuminance, parseColor } from '../utils';\n\nimport { paletteColors } from './constants';\n\nimport styles from './Swatches.scss';\n\nimport { CheckSmallIcon } from '~/icons';\n\nexport type SwatchesProps = {\n /**\n * Hex or rgba, with or without alpha\n */\n value: ColorChannels;\n onChange: (color: ColorChannels) => void;\n addTransparent?: boolean;\n autoFocus?: boolean;\n onAutoFocus?: () => void;\n};\n\nconst colorsPerRow = 12;\n\nexport const Swatches = ({\n value,\n onChange,\n addTransparent,\n autoFocus,\n onAutoFocus,\n}: SwatchesProps) => {\n const swatchRefs = useRef<Array<HTMLDivElement | null>>([]);\n const opaqueValue = { ...value, a: 1 };\n const isValueTransparent = value.a === 0;\n\n const colors = addTransparent\n ? paletteColors.toSpliced(paletteColors.length - 1, 1, '#FFFFFF00')\n : paletteColors;\n\n const isSelectedColor = (color: string) => {\n const { a, ...colorChannels } = parseColor(color);\n const opaqueColor = { ...colorChannels, a: 1 };\n const isTransparent = a === 0;\n\n return (\n (isEqual(opaqueValue, opaqueColor) && !isTransparent && !isValueTransparent) ||\n (isValueTransparent && isTransparent)\n );\n };\n\n const selectedIndex = colors.findIndex(isSelectedColor);\n\n useEffect(() => {\n if (!autoFocus) {\n return;\n }\n\n const focusIndex = selectedIndex === -1 ? 0 : selectedIndex;\n const swatch = swatchRefs.current[focusIndex];\n\n if (swatch) {\n swatch.focus({ preventScroll: true });\n onAutoFocus?.();\n }\n }, [autoFocus, onAutoFocus, selectedIndex]);\n\n const selectColor = (index: number, focus: boolean) => {\n onChange(parseColor(colors[index]));\n\n if (focus) {\n swatchRefs.current[index]?.focus({ preventScroll: true });\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n const currentIndex = Number(event.currentTarget.dataset.index);\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % colors.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + colors.length) % colors.length;\n break;\n case 'ArrowDown':\n nextIndex = (currentIndex + colorsPerRow) % colors.length;\n break;\n case 'ArrowUp':\n nextIndex = (currentIndex - colorsPerRow + colors.length) % colors.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = colors.length - 1;\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n selectColor(currentIndex, false);\n return;\n default:\n return;\n }\n\n if (typeof nextIndex === 'number') {\n event.preventDefault();\n selectColor(nextIndex, true);\n }\n };\n\n return (\n <div className={styles.root} role=\"radiogroup\" aria-label=\"Color palette\">\n {colors.map((color, index) => {\n const channels = parseColor(color);\n const isLightColor = getLuminance(color) > 0.97;\n const isTransparent = channels.a === 0;\n const isSelected = isSelectedColor(color);\n\n return (\n <div\n key={color}\n ref={element => {\n swatchRefs.current[index] = element;\n }}\n className={classNames(\n styles.swatch,\n isSelected && styles.selected,\n isTransparent && styles.transparent,\n (isLightColor || isTransparent) && styles.darkAccent\n )}\n onClick={() => onChange(channels)}\n onKeyDown={handleKeyDown}\n style={isTransparent ? undefined : { background: color }}\n role=\"radio\"\n aria-checked={isSelected}\n aria-label={isTransparent ? 'Transparent' : color.toUpperCase()}\n tabIndex={isSelected || (selectedIndex === -1 && index === 0) ? 0 : -1}\n data-index={index}\n >\n <CheckSmallIcon size={14} className={styles.icon} />\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["_ref","value","onChange","addTransparent","autoFocus","onAutoFocus","swatchRefs","useRef","opaqueValue","a","isValueTransparent","colors","paletteColors","toSpliced","length","isSelectedColor","color","parseColor","opaqueColor","_objectWithoutProperties","_parseColor","_excluded","isTransparent","isEqual","selectedIndex","findIndex","useEffect","focusIndex","swatch","current","focus","preventScroll","selectColor","index","_swatchRefs$current$i","handleKeyDown","event","nextIndex","currentIndex","Number","currentTarget","dataset","key","preventDefault","_jsx","className","styles","root","role","children","map","channels","isLightColor","getLuminance","isSelected","ref","element","classNames","selected","transparent","darkAccent","onClick","onKeyDown","style","undefined","background","toUpperCase","tabIndex","CheckSmallIcon","size","icon"],"mappings":"g0KAyBwB,SAMHA,GAAA,IALnBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,eACAC,IAAAA,UACAC,IAAAA,YAEMC,EAAaC,SAAqC,IAClDC,SAAmBP,GAAK,GAAA,CAAEQ,EAAG,IAC7BC,EAAiC,IAAZT,EAAMQ,EAE3BE,EAASR,EACXS,EAAaA,cAACC,UAAUD,EAAAA,cAAcE,OAAS,EAAG,EAAG,aACrDF,EAAAA,cAEEG,EAAkB,SAACC,GACvB,IAAgCC,EAAAA,EAAUA,WAACD,GAAnCP,IAAAA,EACFS,SADqBC,EAAA,QAAAC,EAAAC,IACW,GAAA,CAAEZ,EAAG,IACrCa,EAAsB,IAANb,EAEtB,OACGc,EAAOA,QAACf,EAAaU,KAAiBI,IAAkBZ,GACxDA,GAAsBY,GAIrBE,EAAgBb,EAAOc,UAAUV,GAEvCW,EAAAA,WAAU,WACR,GAAKtB,EAAL,CAIA,IAAMuB,GAAgC,IAAnBH,EAAuB,EAAIA,EACxCI,EAAStB,EAAWuB,QAAQF,GAE9BC,IACFA,EAAOE,MAAM,CAAEC,eAAe,IAC9B1B,SAAAA,IAPF,CASD,GAAE,CAACD,EAAWC,EAAamB,IAE5B,IAAMQ,EAAc,SAACC,EAAeH,GAGvB,IAAAI,GAFXhC,EAASe,EAAAA,WAAWN,EAAOsB,KAEvBH,KACuB,QAAzBxB,EAAAA,EAAWuB,QAAQI,UAAM,IAAAC,GAAzBA,EAA2BJ,MAAM,CAAEC,eAAe,MAIhDI,EAAsD,SAAAC,GAC1D,IACIC,EADEC,EAAeC,OAAOH,EAAMI,cAAcC,QAAQR,OAGxD,OAAQG,EAAMM,KACZ,IAAK,aACHL,GAAaC,EAAe,GAAK3B,EAAOG,OACxC,MACF,IAAK,YACHuB,GAAaC,EAAe,EAAI3B,EAAOG,QAAUH,EAAOG,OACxD,MACF,IAAK,YACHuB,GAAaC,EAhEA,IAgE+B3B,EAAOG,OACnD,MACF,IAAK,UACHuB,GAAaC,EAnEA,GAmE8B3B,EAAOG,QAAUH,EAAOG,OACnE,MACF,IAAK,OACHuB,EAAY,EACZ,MACF,IAAK,MACHA,EAAY1B,EAAOG,OAAS,EAC5B,MACF,IAAK,QACL,IAAK,IAGH,OAFAsB,EAAMO,sBACNX,EAAYM,GAAc,GAE5B,QACE,OAGqB,iBAAdD,IACTD,EAAMO,iBACNX,EAAYK,GAAW,KAI3B,OACEO,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAOC,KAAMC,KAAK,aAAa,aAAW,gBAAeC,SACtEtC,EAAOuC,KAAI,SAAClC,EAAOiB,GAClB,IAAMkB,EAAWlC,aAAWD,GACtBoC,EAAeC,EAAAA,aAAarC,GAAS,IACrCM,EAA+B,IAAf6B,EAAS1C,EACzB6C,EAAavC,EAAgBC,GAEnC,OACE4B,EAAAA,IAAA,MAAA,CAEEW,IAAK,SAAAC,GACHlD,EAAWuB,QAAQI,GAASuB,CAC5B,EACFX,UAAWY,EAAU,QACnBX,EAAOlB,OACP0B,GAAcR,EAAOY,SACrBpC,GAAiBwB,EAAOa,aACvBP,GAAgB9B,IAAkBwB,EAAOc,YAE5CC,QAAS,WAAA,OAAM3D,EAASiD,EAAU,EAClCW,UAAW3B,EACX4B,MAAOzC,OAAgB0C,EAAY,CAAEC,WAAYjD,GACjDgC,KAAK,QACL,eAAcM,EACd,aAAYhC,EAAgB,cAAgBN,EAAMkD,cAClDC,SAAUb,IAAkC,IAAnB9B,GAAkC,IAAVS,EAAe,GAAK,EACrE,aAAYA,EAAMgB,SAElBL,MAACwB,iBAAc,CAACC,KAAM,GAAIxB,UAAWC,EAAOwB,QAnBvCtD,OAyBjB"}
1
+ {"version":3,"file":"Swatches.js","sources":["../../../../../src/componentsV2/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isEqual } from 'lodash';\nimport { KeyboardEventHandler, useEffect, useRef } from 'react';\n\nimport { ColorChannels, getLuminance, parseColor } from '../utils';\n\nimport { paletteColors } from './constants';\n\nimport styles from './Swatches.scss';\n\nimport { CheckSmallIcon } from '~/icons';\n\nexport type SwatchesProps = {\n /**\n * Hex or rgba, with or without alpha\n */\n value: ColorChannels;\n onChange: (color: ColorChannels) => void;\n addTransparent?: boolean;\n autoFocus?: boolean;\n onAutoFocus?: () => void;\n};\n\nconst colorsPerRow = 12;\n\nexport const Swatches = ({\n value,\n onChange,\n addTransparent,\n autoFocus,\n onAutoFocus,\n}: SwatchesProps) => {\n const swatchRefs = useRef<Array<HTMLDivElement | null>>([]);\n const opaqueValue = { ...value, a: 1 };\n const isValueTransparent = value.a === 0;\n\n const colors = addTransparent\n ? paletteColors.toSpliced(colorsPerRow - 1, 1, '#FFFFFF00')\n : paletteColors;\n\n const isSelectedColor = (color: string) => {\n const { a, ...colorChannels } = parseColor(color);\n const opaqueColor = { ...colorChannels, a: 1 };\n const isTransparent = a === 0;\n\n return (\n (isEqual(opaqueValue, opaqueColor) && !isTransparent && !isValueTransparent) ||\n (isValueTransparent && isTransparent)\n );\n };\n\n const selectedIndex = colors.findIndex(isSelectedColor);\n\n useEffect(() => {\n if (!autoFocus) {\n return;\n }\n\n const focusIndex = selectedIndex === -1 ? 0 : selectedIndex;\n const swatch = swatchRefs.current[focusIndex];\n\n if (swatch) {\n swatch.focus({ preventScroll: true });\n onAutoFocus?.();\n }\n }, [autoFocus, onAutoFocus, selectedIndex]);\n\n const selectColor = (index: number, focus: boolean) => {\n onChange(parseColor(colors[index]));\n\n if (focus) {\n swatchRefs.current[index]?.focus({ preventScroll: true });\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n const currentIndex = Number(event.currentTarget.dataset.index);\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % colors.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + colors.length) % colors.length;\n break;\n case 'ArrowDown':\n nextIndex = (currentIndex + colorsPerRow) % colors.length;\n break;\n case 'ArrowUp':\n nextIndex = (currentIndex - colorsPerRow + colors.length) % colors.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = colors.length - 1;\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n selectColor(currentIndex, false);\n return;\n default:\n return;\n }\n\n if (typeof nextIndex === 'number') {\n event.preventDefault();\n selectColor(nextIndex, true);\n }\n };\n\n return (\n <div className={styles.root} role=\"radiogroup\" aria-label=\"Color palette\">\n {colors.map((color, index) => {\n const channels = parseColor(color);\n const isLightColor = getLuminance(color) > 0.97;\n const isTransparent = channels.a === 0;\n const isSelected = isSelectedColor(color);\n\n return (\n <div\n key={color}\n ref={element => {\n swatchRefs.current[index] = element;\n }}\n className={classNames(\n styles.swatch,\n isSelected && styles.selected,\n isTransparent && styles.transparent,\n (isLightColor || isTransparent) && styles.darkAccent\n )}\n onClick={() => onChange(channels)}\n onKeyDown={handleKeyDown}\n style={isTransparent ? undefined : { background: color }}\n role=\"radio\"\n aria-checked={isSelected}\n aria-label={isTransparent ? 'Transparent' : color.toUpperCase()}\n tabIndex={isSelected || (selectedIndex === -1 && index === 0) ? 0 : -1}\n data-index={index}\n >\n <CheckSmallIcon size={14} className={styles.icon} />\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["_ref","value","onChange","addTransparent","autoFocus","onAutoFocus","swatchRefs","useRef","opaqueValue","a","isValueTransparent","colors","paletteColors","toSpliced","colorsPerRow","isSelectedColor","color","parseColor","opaqueColor","_objectWithoutProperties","_parseColor","_excluded","isTransparent","isEqual","selectedIndex","findIndex","useEffect","focusIndex","swatch","current","focus","preventScroll","selectColor","index","_swatchRefs$current$i","handleKeyDown","event","nextIndex","currentIndex","Number","currentTarget","dataset","key","length","preventDefault","_jsx","className","styles","root","role","children","map","channels","isLightColor","getLuminance","isSelected","ref","element","classNames","selected","transparent","darkAccent","onClick","onKeyDown","style","undefined","background","toUpperCase","tabIndex","CheckSmallIcon","size","icon"],"mappings":"g0KAyBwB,SAMHA,GAAA,IALnBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,eACAC,IAAAA,UACAC,IAAAA,YAEMC,EAAaC,SAAqC,IAClDC,SAAmBP,GAAK,GAAA,CAAEQ,EAAG,IAC7BC,EAAiC,IAAZT,EAAMQ,EAE3BE,EAASR,EACXS,EAAAA,cAAcC,UAAUC,GAAkB,EAAG,aAC7CF,gBAEEG,EAAkB,SAACC,GACvB,IAAgCC,EAAAA,EAAUA,WAACD,GAAnCP,IAAAA,EACFS,SADqBC,EAAA,QAAAC,EAAAC,IACW,GAAA,CAAEZ,EAAG,IACrCa,EAAsB,IAANb,EAEtB,OACGc,EAAOA,QAACf,EAAaU,KAAiBI,IAAkBZ,GACxDA,GAAsBY,GAIrBE,EAAgBb,EAAOc,UAAUV,GAEvCW,EAAAA,WAAU,WACR,GAAKtB,EAAL,CAIA,IAAMuB,GAAgC,IAAnBH,EAAuB,EAAIA,EACxCI,EAAStB,EAAWuB,QAAQF,GAE9BC,IACFA,EAAOE,MAAM,CAAEC,eAAe,IAC9B1B,SAAAA,IAPF,CASD,GAAE,CAACD,EAAWC,EAAamB,IAE5B,IAAMQ,EAAc,SAACC,EAAeH,GAGvB,IAAAI,GAFXhC,EAASe,EAAAA,WAAWN,EAAOsB,KAEvBH,KACuB,QAAzBxB,EAAAA,EAAWuB,QAAQI,UAAM,IAAAC,GAAzBA,EAA2BJ,MAAM,CAAEC,eAAe,MAIhDI,EAAsD,SAAAC,GAC1D,IACIC,EADEC,EAAeC,OAAOH,EAAMI,cAAcC,QAAQR,OAGxD,OAAQG,EAAMM,KACZ,IAAK,aACHL,GAAaC,EAAe,GAAK3B,EAAOgC,OACxC,MACF,IAAK,YACHN,GAAaC,EAAe,EAAI3B,EAAOgC,QAAUhC,EAAOgC,OACxD,MACF,IAAK,YACHN,GAAaC,EAhEA,IAgE+B3B,EAAOgC,OACnD,MACF,IAAK,UACHN,GAAaC,EAnEA,GAmE8B3B,EAAOgC,QAAUhC,EAAOgC,OACnE,MACF,IAAK,OACHN,EAAY,EACZ,MACF,IAAK,MACHA,EAAY1B,EAAOgC,OAAS,EAC5B,MACF,IAAK,QACL,IAAK,IAGH,OAFAP,EAAMQ,sBACNZ,EAAYM,GAAc,GAE5B,QACE,OAGqB,iBAAdD,IACTD,EAAMQ,iBACNZ,EAAYK,GAAW,KAI3B,OACEQ,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAOC,KAAMC,KAAK,aAAa,aAAW,gBAAeC,SACtEvC,EAAOwC,KAAI,SAACnC,EAAOiB,GAClB,IAAMmB,EAAWnC,aAAWD,GACtBqC,EAAeC,EAAAA,aAAatC,GAAS,IACrCM,EAA+B,IAAf8B,EAAS3C,EACzB8C,EAAaxC,EAAgBC,GAEnC,OACE6B,EAAAA,IAAA,MAAA,CAEEW,IAAK,SAAAC,GACHnD,EAAWuB,QAAQI,GAASwB,CAC5B,EACFX,UAAWY,EAAU,QACnBX,EAAOnB,OACP2B,GAAcR,EAAOY,SACrBrC,GAAiByB,EAAOa,aACvBP,GAAgB/B,IAAkByB,EAAOc,YAE5CC,QAAS,WAAA,OAAM5D,EAASkD,EAAU,EAClCW,UAAW5B,EACX6B,MAAO1C,OAAgB2C,EAAY,CAAEC,WAAYlD,GACjDiC,KAAK,QACL,eAAcM,EACd,aAAYjC,EAAgB,cAAgBN,EAAMmD,cAClDC,SAAUb,IAAkC,IAAnB/B,GAAkC,IAAVS,EAAe,GAAK,EACrE,aAAYA,EAAMiB,SAElBL,MAACwB,iBAAc,CAACC,KAAM,GAAIxB,UAAWC,EAAOwB,QAnBvCvD,OAyBjB"}
@@ -1,2 +1,2 @@
1
- import o from"@babel/runtime/helpers/objectWithoutProperties";import s from"@babel/runtime/helpers/defineProperty";import c from"classnames";import{isEqual as n}from"lodash";import{useRef as i,useEffect as t}from"react";import{parseColor as r,getLuminance as e}from"../utils.js";import{paletteColors as m}from"./constants.js";import p from"./Swatches.scss.js";import{CheckSmallIcon as u}from"../../../icons/iconParkIcons.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/DragOne.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/SearchOne.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/InfoRounded.js";import"../../../icons/customIcons/icons/FlameFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/DrilloutUnit.js";import"../../../icons/customIcons/icons/FracFleet.js";import"../../../icons/customIcons/icons/Global.js";import"../../../icons/customIcons/icons/Program.js";import"../../../icons/customIcons/icons/Rig.js";import"../../../icons/customIcons/icons/Well.js";import"../../../icons/customIcons/icons/Gap.js";import"../../../icons/customIcons/icons/Pin.js";import"../../../icons/customIcons/icons/PinOne.js";import"../../../icons/customIcons/icons/PinOneCrossed.js";import"../../../icons/customIcons/icons/CloseOneFilled.js";import"../../../icons/customIcons/icons/AttentionFilled.js";import"../../../icons/customIcons/icons/CheckOneFilled.js";import"../../../icons/customIcons/icons/Archive.js";import"../../../icons/customIcons/icons/ArchiveCancel.js";import"../../../icons/customIcons/icons/Unarchive.js";import"../../../icons/customIcons/icons/Archived.js";import"../../../icons/customIcons/icons/InterventionUnit.js";import"../../../icons/customIcons/icons/CloudDelete.js";import"../../../icons/customIcons/icons/Lasso.js";import"../../../icons/customIcons/icons/Radius.js";import"../../../icons/customIcons/icons/ErrorOps.js";import"../../../icons/customIcons/icons/DataTypeOps.js";import"../../../icons/customIcons/icons/FalsePositiveOps.js";import"../../../icons/customIcons/icons/CalibrationOps.js";import"../../../icons/customIcons/icons/CriticalOps.js";import"../../../icons/customIcons/icons/Company.js";import"../../../icons/customIcons/icons/ArchiveOne.js";import"../../../icons/customIcons/icons/ParseBotFusion.js";import"../../../icons/customIcons/icons/Connect.js";import"../../../icons/customIcons/icons/PuzzleOne.js";import"../../../icons/customIcons/icons/Feed.js";import"../../../icons/customIcons/icons/Prompt.js";import"../../../icons/customIcons/icons/Companies.js";import"../../../icons/customIcons/icons/ClipboardAi.js";import"../../../icons/customIcons/icons/Key.js";import"../../../icons/customIcons/icons/AtSignCrossed.js";import"../../../icons/customIcons/icons/MappingManual.js";import"../../../icons/customIcons/icons/Mapping.js";import"../../../icons/customIcons/icons/Metrics.js";import"../../../icons/customIcons/icons/Drops.js";import"../../../icons/customIcons/icons/ClipboardSearch.js";import"../../../icons/customIcons/icons/Template.js";import"../../../icons/customIcons/icons/ClipboardMetrics.js";import"../../../icons/customIcons/icons/ClipboardBuilder.js";import"../../../icons/customIcons/icons/UnitConversion.js";import"../../../icons/customIcons/icons/NPT.js";import"../../../icons/customIcons/icons/GuidedFrac.js";import{jsx as a}from"react/jsx-runtime";var l=["a"];function j(o,s){var c=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),c.push.apply(c,n)}return c}function I(o){for(var c=1;c<arguments.length;c++){var n=null!=arguments[c]?arguments[c]:{};c%2?j(Object(n),!0).forEach((function(c){s(o,c,n[c])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(n,s))}))}return o}var d=function(s){var j=s.value,d=s.onChange,b=s.addTransparent,f=s.autoFocus,h=s.onAutoFocus,O=i([]),v=I(I({},j),{},{a:1}),C=0===j.a,g=b?m.toSpliced(m.length-1,1,"#FFFFFF00"):m,F=function(s){var c=r(s),i=c.a,t=I(I({},o(c,l)),{},{a:1}),e=0===i;return n(v,t)&&!e&&!C||C&&e},P=g.findIndex(F);t((function(){if(f){var o=-1===P?0:P,s=O.current[o];s&&(s.focus({preventScroll:!0}),null==h||h())}}),[f,h,P]);var k=function(o,s){var c;(d(r(g[o])),s)&&(null===(c=O.current[o])||void 0===c||c.focus({preventScroll:!0}))},y=function(o){var s,c=Number(o.currentTarget.dataset.index);switch(o.key){case"ArrowRight":s=(c+1)%g.length;break;case"ArrowLeft":s=(c-1+g.length)%g.length;break;case"ArrowDown":s=(c+12)%g.length;break;case"ArrowUp":s=(c-12+g.length)%g.length;break;case"Home":s=0;break;case"End":s=g.length-1;break;case"Enter":case" ":return o.preventDefault(),void k(c,!1);default:return}"number"==typeof s&&(o.preventDefault(),k(s,!0))};return a("div",{className:p.root,role:"radiogroup","aria-label":"Color palette",children:g.map((function(o,s){var n=r(o),i=e(o)>.97,t=0===n.a,m=F(o);return a("div",{ref:function(o){O.current[s]=o},className:c(p.swatch,m&&p.selected,t&&p.transparent,(i||t)&&p.darkAccent),onClick:function(){return d(n)},onKeyDown:y,style:t?void 0:{background:o},role:"radio","aria-checked":m,"aria-label":t?"Transparent":o.toUpperCase(),tabIndex:m||-1===P&&0===s?0:-1,"data-index":s,children:a(u,{size:14,className:p.icon})},o)}))})};export{d as Swatches};
1
+ import o from"@babel/runtime/helpers/objectWithoutProperties";import s from"@babel/runtime/helpers/defineProperty";import c from"classnames";import{isEqual as n}from"lodash";import{useRef as i,useEffect as t}from"react";import{parseColor as r,getLuminance as e}from"../utils.js";import{paletteColors as m}from"./constants.js";import p from"./Swatches.scss.js";import{CheckSmallIcon as u}from"../../../icons/iconParkIcons.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/DragOne.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/SearchOne.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/InfoRounded.js";import"../../../icons/customIcons/icons/FlameFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/DrilloutUnit.js";import"../../../icons/customIcons/icons/FracFleet.js";import"../../../icons/customIcons/icons/Global.js";import"../../../icons/customIcons/icons/Program.js";import"../../../icons/customIcons/icons/Rig.js";import"../../../icons/customIcons/icons/Well.js";import"../../../icons/customIcons/icons/Gap.js";import"../../../icons/customIcons/icons/Pin.js";import"../../../icons/customIcons/icons/PinOne.js";import"../../../icons/customIcons/icons/PinOneCrossed.js";import"../../../icons/customIcons/icons/CloseOneFilled.js";import"../../../icons/customIcons/icons/AttentionFilled.js";import"../../../icons/customIcons/icons/CheckOneFilled.js";import"../../../icons/customIcons/icons/Archive.js";import"../../../icons/customIcons/icons/ArchiveCancel.js";import"../../../icons/customIcons/icons/Unarchive.js";import"../../../icons/customIcons/icons/Archived.js";import"../../../icons/customIcons/icons/InterventionUnit.js";import"../../../icons/customIcons/icons/CloudDelete.js";import"../../../icons/customIcons/icons/Lasso.js";import"../../../icons/customIcons/icons/Radius.js";import"../../../icons/customIcons/icons/ErrorOps.js";import"../../../icons/customIcons/icons/DataTypeOps.js";import"../../../icons/customIcons/icons/FalsePositiveOps.js";import"../../../icons/customIcons/icons/CalibrationOps.js";import"../../../icons/customIcons/icons/CriticalOps.js";import"../../../icons/customIcons/icons/Company.js";import"../../../icons/customIcons/icons/ArchiveOne.js";import"../../../icons/customIcons/icons/ParseBotFusion.js";import"../../../icons/customIcons/icons/Connect.js";import"../../../icons/customIcons/icons/PuzzleOne.js";import"../../../icons/customIcons/icons/Feed.js";import"../../../icons/customIcons/icons/Prompt.js";import"../../../icons/customIcons/icons/Companies.js";import"../../../icons/customIcons/icons/ClipboardAi.js";import"../../../icons/customIcons/icons/Key.js";import"../../../icons/customIcons/icons/AtSignCrossed.js";import"../../../icons/customIcons/icons/MappingManual.js";import"../../../icons/customIcons/icons/Mapping.js";import"../../../icons/customIcons/icons/Metrics.js";import"../../../icons/customIcons/icons/Drops.js";import"../../../icons/customIcons/icons/ClipboardSearch.js";import"../../../icons/customIcons/icons/Template.js";import"../../../icons/customIcons/icons/ClipboardMetrics.js";import"../../../icons/customIcons/icons/ClipboardBuilder.js";import"../../../icons/customIcons/icons/UnitConversion.js";import"../../../icons/customIcons/icons/NPT.js";import"../../../icons/customIcons/icons/GuidedFrac.js";import{jsx as a}from"react/jsx-runtime";var l=["a"];function j(o,s){var c=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),c.push.apply(c,n)}return c}function I(o){for(var c=1;c<arguments.length;c++){var n=null!=arguments[c]?arguments[c]:{};c%2?j(Object(n),!0).forEach((function(c){s(o,c,n[c])})):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(n,s))}))}return o}var d=function(s){var j=s.value,d=s.onChange,b=s.addTransparent,f=s.autoFocus,h=s.onAutoFocus,O=i([]),v=I(I({},j),{},{a:1}),C=0===j.a,g=b?m.toSpliced(11,1,"#FFFFFF00"):m,F=function(s){var c=r(s),i=c.a,t=I(I({},o(c,l)),{},{a:1}),e=0===i;return n(v,t)&&!e&&!C||C&&e},P=g.findIndex(F);t((function(){if(f){var o=-1===P?0:P,s=O.current[o];s&&(s.focus({preventScroll:!0}),null==h||h())}}),[f,h,P]);var k=function(o,s){var c;(d(r(g[o])),s)&&(null===(c=O.current[o])||void 0===c||c.focus({preventScroll:!0}))},y=function(o){var s,c=Number(o.currentTarget.dataset.index);switch(o.key){case"ArrowRight":s=(c+1)%g.length;break;case"ArrowLeft":s=(c-1+g.length)%g.length;break;case"ArrowDown":s=(c+12)%g.length;break;case"ArrowUp":s=(c-12+g.length)%g.length;break;case"Home":s=0;break;case"End":s=g.length-1;break;case"Enter":case" ":return o.preventDefault(),void k(c,!1);default:return}"number"==typeof s&&(o.preventDefault(),k(s,!0))};return a("div",{className:p.root,role:"radiogroup","aria-label":"Color palette",children:g.map((function(o,s){var n=r(o),i=e(o)>.97,t=0===n.a,m=F(o);return a("div",{ref:function(o){O.current[s]=o},className:c(p.swatch,m&&p.selected,t&&p.transparent,(i||t)&&p.darkAccent),onClick:function(){return d(n)},onKeyDown:y,style:t?void 0:{background:o},role:"radio","aria-checked":m,"aria-label":t?"Transparent":o.toUpperCase(),tabIndex:m||-1===P&&0===s?0:-1,"data-index":s,children:a(u,{size:14,className:p.icon})},o)}))})};export{d as Swatches};
2
2
  //# sourceMappingURL=Swatches.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Swatches.js","sources":["../../../../src/componentsV2/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isEqual } from 'lodash';\nimport { KeyboardEventHandler, useEffect, useRef } from 'react';\n\nimport { ColorChannels, getLuminance, parseColor } from '../utils';\n\nimport { paletteColors } from './constants';\n\nimport styles from './Swatches.scss';\n\nimport { CheckSmallIcon } from '~/icons';\n\nexport type SwatchesProps = {\n /**\n * Hex or rgba, with or without alpha\n */\n value: ColorChannels;\n onChange: (color: ColorChannels) => void;\n addTransparent?: boolean;\n autoFocus?: boolean;\n onAutoFocus?: () => void;\n};\n\nconst colorsPerRow = 12;\n\nexport const Swatches = ({\n value,\n onChange,\n addTransparent,\n autoFocus,\n onAutoFocus,\n}: SwatchesProps) => {\n const swatchRefs = useRef<Array<HTMLDivElement | null>>([]);\n const opaqueValue = { ...value, a: 1 };\n const isValueTransparent = value.a === 0;\n\n const colors = addTransparent\n ? paletteColors.toSpliced(paletteColors.length - 1, 1, '#FFFFFF00')\n : paletteColors;\n\n const isSelectedColor = (color: string) => {\n const { a, ...colorChannels } = parseColor(color);\n const opaqueColor = { ...colorChannels, a: 1 };\n const isTransparent = a === 0;\n\n return (\n (isEqual(opaqueValue, opaqueColor) && !isTransparent && !isValueTransparent) ||\n (isValueTransparent && isTransparent)\n );\n };\n\n const selectedIndex = colors.findIndex(isSelectedColor);\n\n useEffect(() => {\n if (!autoFocus) {\n return;\n }\n\n const focusIndex = selectedIndex === -1 ? 0 : selectedIndex;\n const swatch = swatchRefs.current[focusIndex];\n\n if (swatch) {\n swatch.focus({ preventScroll: true });\n onAutoFocus?.();\n }\n }, [autoFocus, onAutoFocus, selectedIndex]);\n\n const selectColor = (index: number, focus: boolean) => {\n onChange(parseColor(colors[index]));\n\n if (focus) {\n swatchRefs.current[index]?.focus({ preventScroll: true });\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n const currentIndex = Number(event.currentTarget.dataset.index);\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % colors.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + colors.length) % colors.length;\n break;\n case 'ArrowDown':\n nextIndex = (currentIndex + colorsPerRow) % colors.length;\n break;\n case 'ArrowUp':\n nextIndex = (currentIndex - colorsPerRow + colors.length) % colors.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = colors.length - 1;\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n selectColor(currentIndex, false);\n return;\n default:\n return;\n }\n\n if (typeof nextIndex === 'number') {\n event.preventDefault();\n selectColor(nextIndex, true);\n }\n };\n\n return (\n <div className={styles.root} role=\"radiogroup\" aria-label=\"Color palette\">\n {colors.map((color, index) => {\n const channels = parseColor(color);\n const isLightColor = getLuminance(color) > 0.97;\n const isTransparent = channels.a === 0;\n const isSelected = isSelectedColor(color);\n\n return (\n <div\n key={color}\n ref={element => {\n swatchRefs.current[index] = element;\n }}\n className={classNames(\n styles.swatch,\n isSelected && styles.selected,\n isTransparent && styles.transparent,\n (isLightColor || isTransparent) && styles.darkAccent\n )}\n onClick={() => onChange(channels)}\n onKeyDown={handleKeyDown}\n style={isTransparent ? undefined : { background: color }}\n role=\"radio\"\n aria-checked={isSelected}\n aria-label={isTransparent ? 'Transparent' : color.toUpperCase()}\n tabIndex={isSelected || (selectedIndex === -1 && index === 0) ? 0 : -1}\n data-index={index}\n >\n <CheckSmallIcon size={14} className={styles.icon} />\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["Swatches","_ref","value","onChange","addTransparent","autoFocus","onAutoFocus","swatchRefs","useRef","opaqueValue","a","isValueTransparent","colors","paletteColors","toSpliced","length","isSelectedColor","color","parseColor","opaqueColor","_objectWithoutProperties","_parseColor","_excluded","isTransparent","isEqual","selectedIndex","findIndex","useEffect","focusIndex","swatch","current","focus","preventScroll","selectColor","index","_swatchRefs$current$i","handleKeyDown","event","nextIndex","currentIndex","Number","currentTarget","dataset","key","preventDefault","_jsx","className","styles","root","role","children","map","channels","isLightColor","getLuminance","isSelected","ref","element","classNames","selected","transparent","darkAccent","onClick","onKeyDown","style","undefined","background","toUpperCase","tabIndex","CheckSmallIcon","size","icon"],"mappings":"+hKAuBA,IAEaA,EAAW,SAMHC,GAAA,IALnBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,eACAC,IAAAA,UACAC,IAAAA,YAEMC,EAAaC,EAAqC,IAClDC,SAAmBP,GAAK,GAAA,CAAEQ,EAAG,IAC7BC,EAAiC,IAAZT,EAAMQ,EAE3BE,EAASR,EACXS,EAAcC,UAAUD,EAAcE,OAAS,EAAG,EAAG,aACrDF,EAEEG,EAAkB,SAACC,GACvB,IAAgCC,EAAAA,EAAWD,GAAnCP,IAAAA,EACFS,SADqBC,EAAAC,EAAAC,IACW,GAAA,CAAEZ,EAAG,IACrCa,EAAsB,IAANb,EAEtB,OACGc,EAAQf,EAAaU,KAAiBI,IAAkBZ,GACxDA,GAAsBY,GAIrBE,EAAgBb,EAAOc,UAAUV,GAEvCW,GAAU,WACR,GAAKtB,EAAL,CAIA,IAAMuB,GAAgC,IAAnBH,EAAuB,EAAIA,EACxCI,EAAStB,EAAWuB,QAAQF,GAE9BC,IACFA,EAAOE,MAAM,CAAEC,eAAe,IAC9B1B,SAAAA,IAPF,CASD,GAAE,CAACD,EAAWC,EAAamB,IAE5B,IAAMQ,EAAc,SAACC,EAAeH,GAGvB,IAAAI,GAFXhC,EAASe,EAAWN,EAAOsB,KAEvBH,KACuB,QAAzBxB,EAAAA,EAAWuB,QAAQI,UAAM,IAAAC,GAAzBA,EAA2BJ,MAAM,CAAEC,eAAe,MAIhDI,EAAsD,SAAAC,GAC1D,IACIC,EADEC,EAAeC,OAAOH,EAAMI,cAAcC,QAAQR,OAGxD,OAAQG,EAAMM,KACZ,IAAK,aACHL,GAAaC,EAAe,GAAK3B,EAAOG,OACxC,MACF,IAAK,YACHuB,GAAaC,EAAe,EAAI3B,EAAOG,QAAUH,EAAOG,OACxD,MACF,IAAK,YACHuB,GAAaC,EAhEA,IAgE+B3B,EAAOG,OACnD,MACF,IAAK,UACHuB,GAAaC,EAnEA,GAmE8B3B,EAAOG,QAAUH,EAAOG,OACnE,MACF,IAAK,OACHuB,EAAY,EACZ,MACF,IAAK,MACHA,EAAY1B,EAAOG,OAAS,EAC5B,MACF,IAAK,QACL,IAAK,IAGH,OAFAsB,EAAMO,sBACNX,EAAYM,GAAc,GAE5B,QACE,OAGqB,iBAAdD,IACTD,EAAMO,iBACNX,EAAYK,GAAW,KAI3B,OACEO,EAAA,MAAA,CAAKC,UAAWC,EAAOC,KAAMC,KAAK,aAAa,aAAW,gBAAeC,SACtEtC,EAAOuC,KAAI,SAAClC,EAAOiB,GAClB,IAAMkB,EAAWlC,EAAWD,GACtBoC,EAAeC,EAAarC,GAAS,IACrCM,EAA+B,IAAf6B,EAAS1C,EACzB6C,EAAavC,EAAgBC,GAEnC,OACE4B,EAAA,MAAA,CAEEW,IAAK,SAAAC,GACHlD,EAAWuB,QAAQI,GAASuB,CAC5B,EACFX,UAAWY,EACTX,EAAOlB,OACP0B,GAAcR,EAAOY,SACrBpC,GAAiBwB,EAAOa,aACvBP,GAAgB9B,IAAkBwB,EAAOc,YAE5CC,QAAS,WAAA,OAAM3D,EAASiD,EAAU,EAClCW,UAAW3B,EACX4B,MAAOzC,OAAgB0C,EAAY,CAAEC,WAAYjD,GACjDgC,KAAK,QACL,eAAcM,EACd,aAAYhC,EAAgB,cAAgBN,EAAMkD,cAClDC,SAAUb,IAAkC,IAAnB9B,GAAkC,IAAVS,EAAe,GAAK,EACrE,aAAYA,EAAMgB,SAElBL,EAACwB,EAAc,CAACC,KAAM,GAAIxB,UAAWC,EAAOwB,QAnBvCtD,OAyBjB"}
1
+ {"version":3,"file":"Swatches.js","sources":["../../../../src/componentsV2/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isEqual } from 'lodash';\nimport { KeyboardEventHandler, useEffect, useRef } from 'react';\n\nimport { ColorChannels, getLuminance, parseColor } from '../utils';\n\nimport { paletteColors } from './constants';\n\nimport styles from './Swatches.scss';\n\nimport { CheckSmallIcon } from '~/icons';\n\nexport type SwatchesProps = {\n /**\n * Hex or rgba, with or without alpha\n */\n value: ColorChannels;\n onChange: (color: ColorChannels) => void;\n addTransparent?: boolean;\n autoFocus?: boolean;\n onAutoFocus?: () => void;\n};\n\nconst colorsPerRow = 12;\n\nexport const Swatches = ({\n value,\n onChange,\n addTransparent,\n autoFocus,\n onAutoFocus,\n}: SwatchesProps) => {\n const swatchRefs = useRef<Array<HTMLDivElement | null>>([]);\n const opaqueValue = { ...value, a: 1 };\n const isValueTransparent = value.a === 0;\n\n const colors = addTransparent\n ? paletteColors.toSpliced(colorsPerRow - 1, 1, '#FFFFFF00')\n : paletteColors;\n\n const isSelectedColor = (color: string) => {\n const { a, ...colorChannels } = parseColor(color);\n const opaqueColor = { ...colorChannels, a: 1 };\n const isTransparent = a === 0;\n\n return (\n (isEqual(opaqueValue, opaqueColor) && !isTransparent && !isValueTransparent) ||\n (isValueTransparent && isTransparent)\n );\n };\n\n const selectedIndex = colors.findIndex(isSelectedColor);\n\n useEffect(() => {\n if (!autoFocus) {\n return;\n }\n\n const focusIndex = selectedIndex === -1 ? 0 : selectedIndex;\n const swatch = swatchRefs.current[focusIndex];\n\n if (swatch) {\n swatch.focus({ preventScroll: true });\n onAutoFocus?.();\n }\n }, [autoFocus, onAutoFocus, selectedIndex]);\n\n const selectColor = (index: number, focus: boolean) => {\n onChange(parseColor(colors[index]));\n\n if (focus) {\n swatchRefs.current[index]?.focus({ preventScroll: true });\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {\n const currentIndex = Number(event.currentTarget.dataset.index);\n let nextIndex: number | undefined;\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = (currentIndex + 1) % colors.length;\n break;\n case 'ArrowLeft':\n nextIndex = (currentIndex - 1 + colors.length) % colors.length;\n break;\n case 'ArrowDown':\n nextIndex = (currentIndex + colorsPerRow) % colors.length;\n break;\n case 'ArrowUp':\n nextIndex = (currentIndex - colorsPerRow + colors.length) % colors.length;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = colors.length - 1;\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n selectColor(currentIndex, false);\n return;\n default:\n return;\n }\n\n if (typeof nextIndex === 'number') {\n event.preventDefault();\n selectColor(nextIndex, true);\n }\n };\n\n return (\n <div className={styles.root} role=\"radiogroup\" aria-label=\"Color palette\">\n {colors.map((color, index) => {\n const channels = parseColor(color);\n const isLightColor = getLuminance(color) > 0.97;\n const isTransparent = channels.a === 0;\n const isSelected = isSelectedColor(color);\n\n return (\n <div\n key={color}\n ref={element => {\n swatchRefs.current[index] = element;\n }}\n className={classNames(\n styles.swatch,\n isSelected && styles.selected,\n isTransparent && styles.transparent,\n (isLightColor || isTransparent) && styles.darkAccent\n )}\n onClick={() => onChange(channels)}\n onKeyDown={handleKeyDown}\n style={isTransparent ? undefined : { background: color }}\n role=\"radio\"\n aria-checked={isSelected}\n aria-label={isTransparent ? 'Transparent' : color.toUpperCase()}\n tabIndex={isSelected || (selectedIndex === -1 && index === 0) ? 0 : -1}\n data-index={index}\n >\n <CheckSmallIcon size={14} className={styles.icon} />\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["Swatches","_ref","value","onChange","addTransparent","autoFocus","onAutoFocus","swatchRefs","useRef","opaqueValue","a","isValueTransparent","colors","paletteColors","toSpliced","colorsPerRow","isSelectedColor","color","parseColor","opaqueColor","_objectWithoutProperties","_parseColor","_excluded","isTransparent","isEqual","selectedIndex","findIndex","useEffect","focusIndex","swatch","current","focus","preventScroll","selectColor","index","_swatchRefs$current$i","handleKeyDown","event","nextIndex","currentIndex","Number","currentTarget","dataset","key","length","preventDefault","_jsx","className","styles","root","role","children","map","channels","isLightColor","getLuminance","isSelected","ref","element","classNames","selected","transparent","darkAccent","onClick","onKeyDown","style","undefined","background","toUpperCase","tabIndex","CheckSmallIcon","size","icon"],"mappings":"+hKAuBA,IAEaA,EAAW,SAMHC,GAAA,IALnBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,eACAC,IAAAA,UACAC,IAAAA,YAEMC,EAAaC,EAAqC,IAClDC,SAAmBP,GAAK,GAAA,CAAEQ,EAAG,IAC7BC,EAAiC,IAAZT,EAAMQ,EAE3BE,EAASR,EACXS,EAAcC,UAAUC,GAAkB,EAAG,aAC7CF,EAEEG,EAAkB,SAACC,GACvB,IAAgCC,EAAAA,EAAWD,GAAnCP,IAAAA,EACFS,SADqBC,EAAAC,EAAAC,IACW,GAAA,CAAEZ,EAAG,IACrCa,EAAsB,IAANb,EAEtB,OACGc,EAAQf,EAAaU,KAAiBI,IAAkBZ,GACxDA,GAAsBY,GAIrBE,EAAgBb,EAAOc,UAAUV,GAEvCW,GAAU,WACR,GAAKtB,EAAL,CAIA,IAAMuB,GAAgC,IAAnBH,EAAuB,EAAIA,EACxCI,EAAStB,EAAWuB,QAAQF,GAE9BC,IACFA,EAAOE,MAAM,CAAEC,eAAe,IAC9B1B,SAAAA,IAPF,CASD,GAAE,CAACD,EAAWC,EAAamB,IAE5B,IAAMQ,EAAc,SAACC,EAAeH,GAGvB,IAAAI,GAFXhC,EAASe,EAAWN,EAAOsB,KAEvBH,KACuB,QAAzBxB,EAAAA,EAAWuB,QAAQI,UAAM,IAAAC,GAAzBA,EAA2BJ,MAAM,CAAEC,eAAe,MAIhDI,EAAsD,SAAAC,GAC1D,IACIC,EADEC,EAAeC,OAAOH,EAAMI,cAAcC,QAAQR,OAGxD,OAAQG,EAAMM,KACZ,IAAK,aACHL,GAAaC,EAAe,GAAK3B,EAAOgC,OACxC,MACF,IAAK,YACHN,GAAaC,EAAe,EAAI3B,EAAOgC,QAAUhC,EAAOgC,OACxD,MACF,IAAK,YACHN,GAAaC,EAhEA,IAgE+B3B,EAAOgC,OACnD,MACF,IAAK,UACHN,GAAaC,EAnEA,GAmE8B3B,EAAOgC,QAAUhC,EAAOgC,OACnE,MACF,IAAK,OACHN,EAAY,EACZ,MACF,IAAK,MACHA,EAAY1B,EAAOgC,OAAS,EAC5B,MACF,IAAK,QACL,IAAK,IAGH,OAFAP,EAAMQ,sBACNZ,EAAYM,GAAc,GAE5B,QACE,OAGqB,iBAAdD,IACTD,EAAMQ,iBACNZ,EAAYK,GAAW,KAI3B,OACEQ,EAAA,MAAA,CAAKC,UAAWC,EAAOC,KAAMC,KAAK,aAAa,aAAW,gBAAeC,SACtEvC,EAAOwC,KAAI,SAACnC,EAAOiB,GAClB,IAAMmB,EAAWnC,EAAWD,GACtBqC,EAAeC,EAAatC,GAAS,IACrCM,EAA+B,IAAf8B,EAAS3C,EACzB8C,EAAaxC,EAAgBC,GAEnC,OACE6B,EAAA,MAAA,CAEEW,IAAK,SAAAC,GACHnD,EAAWuB,QAAQI,GAASwB,CAC5B,EACFX,UAAWY,EACTX,EAAOnB,OACP2B,GAAcR,EAAOY,SACrBrC,GAAiByB,EAAOa,aACvBP,GAAgB/B,IAAkByB,EAAOc,YAE5CC,QAAS,WAAA,OAAM5D,EAASkD,EAAU,EAClCW,UAAW5B,EACX6B,MAAO1C,OAAgB2C,EAAY,CAAEC,WAAYlD,GACjDiC,KAAK,QACL,eAAcM,EACd,aAAYjC,EAAgB,cAAgBN,EAAMmD,cAClDC,SAAUb,IAAkC,IAAnB/B,GAAkC,IAAVS,EAAe,GAAK,EACrE,aAAYA,EAAMiB,SAElBL,EAACwB,EAAc,CAACC,KAAM,GAAIxB,UAAWC,EAAOwB,QAnBvCvD,OAyBjB"}
@@ -248,7 +248,7 @@ const validateDsn = dsn => {
248
248
 
249
249
  const MCP_SERVER_VERSION = '1.9.1';
250
250
 
251
- var version = "3.79.0-12";
251
+ var version = "3.79.0-13";
252
252
 
253
253
  const CORVA_UI_VERSION = version;
254
254
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@corva/ui",
3
- "version": "3.79.0-12",
3
+ "version": "3.79.0-13",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Shared components/utils for Corva ui projects",
6
6
  "repository": {