@corva/ui 3.79.0-12 → 3.79.0-14

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 (36) hide show
  1. package/cjs-bundle/components/CommentCard/CommentCard.js +1 -1
  2. package/cjs-bundle/components/CommentCard/CommentCard.js.map +1 -1
  3. package/cjs-bundle/components/CommentCard/CommentCard.scss.js +1 -1
  4. package/cjs-bundle/components/CurveTooltip/CurveTooltip.js +2 -0
  5. package/cjs-bundle/components/CurveTooltip/CurveTooltip.js.map +1 -0
  6. package/cjs-bundle/components/CurveTooltip/CurveTooltip.scss.js +2 -0
  7. package/cjs-bundle/components/CurveTooltip/CurveTooltip.scss.js.map +1 -0
  8. package/cjs-bundle/components/NewCommentCursor/NewCommentCursor.js +1 -1
  9. package/cjs-bundle/components/NewCommentCursor/NewCommentCursor.js.map +1 -1
  10. package/cjs-bundle/componentsV2/ColorPicker/Swatches/Swatches.js +1 -1
  11. package/cjs-bundle/componentsV2/ColorPicker/Swatches/Swatches.js.map +1 -1
  12. package/components/CommentCard/CommentCard.d.ts.map +1 -1
  13. package/components/CommentCard/CommentCard.js +1 -1
  14. package/components/CommentCard/CommentCard.js.map +1 -1
  15. package/components/CommentCard/CommentCard.scss.js +1 -1
  16. package/components/CommentCard/CommentCard.types.d.ts +3 -0
  17. package/components/CommentCard/CommentCard.types.d.ts.map +1 -1
  18. package/components/CurveTooltip/CurveTooltip.d.ts +24 -0
  19. package/components/CurveTooltip/CurveTooltip.d.ts.map +1 -0
  20. package/components/CurveTooltip/CurveTooltip.js +2 -0
  21. package/components/CurveTooltip/CurveTooltip.js.map +1 -0
  22. package/components/CurveTooltip/CurveTooltip.scss.js +2 -0
  23. package/components/CurveTooltip/CurveTooltip.scss.js.map +1 -0
  24. package/components/CurveTooltip/index.d.ts +2 -0
  25. package/components/CurveTooltip/index.d.ts.map +1 -0
  26. package/components/NewCommentCursor/NewCommentCursor.d.ts +2 -0
  27. package/components/NewCommentCursor/NewCommentCursor.d.ts.map +1 -1
  28. package/components/NewCommentCursor/NewCommentCursor.js +1 -1
  29. package/components/NewCommentCursor/NewCommentCursor.js.map +1 -1
  30. package/components/NewCommentCursor/__tests__/NewCommentCursor.test.d.ts +2 -0
  31. package/components/NewCommentCursor/__tests__/NewCommentCursor.test.d.ts.map +1 -0
  32. package/componentsV2/ColorPicker/Swatches/Swatches.js +1 -1
  33. package/componentsV2/ColorPicker/Swatches/Swatches.js.map +1 -1
  34. package/mcp-server/server.mjs +70 -4
  35. package/package.json +1 -1
  36. package/tsconfig.tsbuildinfo +1 -1
@@ -0,0 +1,24 @@
1
+ import { ReactElement, ReactNode } from 'react';
2
+ import { TooltipProps } from '../Tooltip/Tooltip';
3
+ export type CurveTooltipRow = {
4
+ label: string;
5
+ value: ReactNode;
6
+ unit?: ReactNode;
7
+ };
8
+ export type CurveTooltipData = {
9
+ title?: ReactNode;
10
+ value?: ReactNode;
11
+ unit?: ReactNode;
12
+ color?: string;
13
+ rows: CurveTooltipRow[];
14
+ };
15
+ type Props = {
16
+ data: CurveTooltipData;
17
+ children: ReactElement;
18
+ open?: boolean;
19
+ isFullScreen?: boolean;
20
+ placement?: TooltipProps['placement'];
21
+ };
22
+ export declare const CurveTooltip: ({ data, children, open, isFullScreen, placement }: Props) => import("react/jsx-runtime").JSX.Element;
23
+ export {};
24
+ //# sourceMappingURL=CurveTooltip.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CurveTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/CurveTooltip/CurveTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI3D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,YAAY,sDAA+D,KAAK,4CA+C5F,CAAC"}
@@ -0,0 +1,2 @@
1
+ import{Text as e}from"../../componentsV2/Text/Text.js";import{Tooltip as l}from"../Tooltip/Tooltip.js";import o from"./CurveTooltip.scss.js";import{jsx as t,jsxs as r,Fragment as i}from"react/jsx-runtime";var n={popperOptions:{modifiers:{preventOverflow:{enabled:!0,boundariesElement:"viewport"}}}},s={popper:o.popper,tooltip:o.tooltip},p=function(p){var a=p.data,c=p.children,u=p.open,d=p.isFullScreen,m=p.placement,v=void 0===m?"top":m;return null!=a.title||a.rows.length?t(l,{open:u,isFullScreen:d,placement:v,PopperProps:n,classes:s,title:r("div",{className:o.content,"data-testid":"curveTooltip",children:[null!=a.title&&r(e,{size:12,tagName:"div",className:o.title,children:[t("span",{className:o.titleBar,style:{backgroundColor:a.color}}),r("span",{children:[a.title,null!=a.value&&r(i,{children:[": ",a.value]})]}),null!=a.unit&&t(e,{size:12,color:"T6",children:a.unit})]}),a.rows.map((function(l){return r("div",{className:o.row,children:[t(e,{size:14,color:"T6",children:l.label}),t(e,{size:14,color:"T1",children:l.value}),null!=l.unit&&t(e,{size:12,color:"T6",className:o.rowUnit,children:l.unit})]},l.label)}))]}),children:c}):c};export{p as CurveTooltip};
2
+ //# sourceMappingURL=CurveTooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CurveTooltip.js","sources":["../../../src/components/CurveTooltip/CurveTooltip.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Text } from '../../componentsV2/Text';\nimport { Tooltip, TooltipProps } from '../Tooltip/Tooltip';\n\nimport styles from './CurveTooltip.scss';\n\nexport type CurveTooltipRow = {\n label: string;\n value: ReactNode;\n unit?: ReactNode;\n};\n\nexport type CurveTooltipData = {\n title?: ReactNode;\n value?: ReactNode;\n unit?: ReactNode;\n color?: string;\n rows: CurveTooltipRow[];\n};\n\ntype Props = {\n data: CurveTooltipData;\n children: ReactElement;\n open?: boolean;\n isFullScreen?: boolean;\n placement?: TooltipProps['placement'];\n};\n\nconst POPPER_PROPS = {\n popperOptions: {\n modifiers: { preventOverflow: { enabled: true, boundariesElement: 'viewport' } },\n },\n};\n\nconst TOOLTIP_CLASSES = { popper: styles.popper, tooltip: styles.tooltip };\n\nexport const CurveTooltip = ({ data, children, open, isFullScreen, placement = 'top' }: Props) => {\n if (data.title == null && !data.rows.length) return children;\n\n return (\n <Tooltip\n open={open}\n isFullScreen={isFullScreen}\n placement={placement}\n PopperProps={POPPER_PROPS}\n classes={TOOLTIP_CLASSES}\n title={\n <div className={styles.content} data-testid=\"curveTooltip\">\n {data.title != null && (\n <Text size={12} tagName=\"div\" className={styles.title}>\n <span className={styles.titleBar} style={{ backgroundColor: data.color }} />\n <span>\n {data.title}\n {data.value != null && <>: {data.value}</>}\n </span>\n {data.unit != null && (\n <Text size={12} color=\"T6\">\n {data.unit}\n </Text>\n )}\n </Text>\n )}\n {data.rows.map(row => (\n <div key={row.label} className={styles.row}>\n <Text size={14} color=\"T6\">\n {row.label}\n </Text>\n <Text size={14} color=\"T1\">\n {row.value}\n </Text>\n {row.unit != null && (\n <Text size={12} color=\"T6\" className={styles.rowUnit}>\n {row.unit}\n </Text>\n )}\n </div>\n ))}\n </div>\n }\n >\n {children}\n </Tooltip>\n );\n};\n"],"names":["POPPER_PROPS","popperOptions","modifiers","preventOverflow","enabled","boundariesElement","TOOLTIP_CLASSES","popper","styles","tooltip","CurveTooltip","_ref","data","children","open","isFullScreen","_ref$placement","placement","title","rows","length","_jsx","Tooltip","PopperProps","classes","_jsxs","className","content","Text","size","tagName","titleBar","style","backgroundColor","color","value","_Fragment","unit","map","row","label","rowUnit"],"mappings":"6MA6BA,IAAMA,EAAe,CACnBC,cAAe,CACbC,UAAW,CAAEC,gBAAiB,CAAEC,SAAS,EAAMC,kBAAmB,eAIhEC,EAAkB,CAAEC,OAAQC,EAAOD,OAAQE,QAASD,EAAOC,SAEpDC,EAAe,SAAsEC,GAAA,IAAnEC,IAAAA,KAAMC,IAAAA,SAAUC,IAAAA,KAAMC,IAAAA,aAAYC,EAAAL,EAAEM,UAAAA,aAAY,MAAKD,EAClF,OAAkB,MAAdJ,EAAKM,OAAkBN,EAAKO,KAAKC,OAGnCC,EAACC,EAAO,CACNR,KAAMA,EACNC,aAAcA,EACdE,UAAWA,EACXM,YAAavB,EACbwB,QAASlB,EACTY,MACEO,EAAA,MAAA,CAAKC,UAAWlB,EAAOmB,QAAS,cAAY,eAAcd,SAAA,CACzC,MAAdD,EAAKM,OACJO,EAACG,EAAI,CAACC,KAAM,GAAIC,QAAQ,MAAMJ,UAAWlB,EAAOU,MAAML,SACpD,CAAAQ,EAAA,OAAA,CAAMK,UAAWlB,EAAOuB,SAAUC,MAAO,CAAEC,gBAAiBrB,EAAKsB,SACjET,EAAA,OAAA,CAAAZ,SACGD,CAAAA,EAAKM,MACS,MAAdN,EAAKuB,OAAiBV,EAAAW,EAAA,CAAAvB,SAAKD,CAAAA,KAAAA,EAAKuB,YAErB,MAAbvB,EAAKyB,MACJhB,EAACO,EAAI,CAACC,KAAM,GAAIK,MAAM,KAAIrB,SACvBD,EAAKyB,UAKbzB,EAAKO,KAAKmB,KAAI,SAAAC,GAAG,OAChBd,EAAA,MAAA,CAAqBC,UAAWlB,EAAO+B,IAAI1B,SAAA,CACzCQ,EAACO,EAAI,CAACC,KAAM,GAAIK,MAAM,KAAIrB,SACvB0B,EAAIC,QAEPnB,EAACO,EAAI,CAACC,KAAM,GAAIK,MAAM,KAAIrB,SACvB0B,EAAIJ,QAEM,MAAZI,EAAIF,MACHhB,EAACO,EAAI,CAACC,KAAM,GAAIK,MAAM,KAAKR,UAAWlB,EAAOiC,QAAQ5B,SAClD0B,EAAIF,SATDE,EAAIC,MAYR,OAGX3B,SAEAA,IA3C+CA,CA8CtD"}
@@ -0,0 +1,2 @@
1
+ import o from'./../../ext-esm/style-inject/dist/style-inject.es.js';var t={spacing:"8",popper:"CurveTooltip_popper__inKjq",tooltip:"CurveTooltip_tooltip__8f67C",content:"CurveTooltip_content__OY7AI",title:"CurveTooltip_title__dzymJ",titleBar:"CurveTooltip_titleBar__XcI5e",row:"CurveTooltip_row__2zHX2",rowUnit:"CurveTooltip_rowUnit__MCGr4"};o(".CurveTooltip_popper__inKjq .MuiTooltip-tooltip.CurveTooltip_tooltip__8f67C{background:rgb(from var(--palette-background-b-9) r g b/.9);max-width:none}.CurveTooltip_popper__inKjq .MuiTooltip-tooltip.CurveTooltip_tooltip__8f67C.MuiTooltip-tooltipPlacementBottom{margin-top:4px}.CurveTooltip_popper__inKjq .MuiTooltip-tooltip.CurveTooltip_tooltip__8f67C.MuiTooltip-tooltipPlacementTop{margin-bottom:4px}.CurveTooltip_content__OY7AI{display:flex;flex-direction:column;gap:4px;padding:4px 0;white-space:nowrap}.CurveTooltip_title__dzymJ{align-items:center;display:flex;gap:4px;margin-bottom:4px}.CurveTooltip_titleBar__XcI5e{background:var(--palette-primary-text-6);border-radius:1px;flex-shrink:0;height:14px;width:2px}.CurveTooltip_row__2zHX2{align-items:baseline;display:flex;gap:4px}.CurveTooltip_row__2zHX2 .CurveTooltip_rowUnit__MCGr4{line-height:18px}");export{t as default};
2
+ //# sourceMappingURL=CurveTooltip.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,aAAa,sDAAyD;"}
@@ -0,0 +1,2 @@
1
+ export * from './CurveTooltip';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CurveTooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
@@ -1,6 +1,8 @@
1
+ import { CurveTooltipData } from '../CurveTooltip';
1
2
  export type NewCommentCursorProps = {
2
3
  size?: number;
3
4
  onClick?: () => void;
5
+ tooltip?: CurveTooltipData;
4
6
  className?: string;
5
7
  testId?: string;
6
8
  };
@@ -1 +1 @@
1
- {"version":3,"file":"NewCommentCursor.d.ts","sourceRoot":"","sources":["../../../src/components/NewCommentCursor/NewCommentCursor.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAQF,eAAO,MAAM,gBAAgB,kHA+B5B,CAAC"}
1
+ {"version":3,"file":"NewCommentCursor.d.ts","sourceRoot":"","sources":["../../../src/components/NewCommentCursor/NewCommentCursor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAQF,eAAO,MAAM,gBAAgB,kHA0C5B,CAAC"}
@@ -1,2 +1,2 @@
1
- import{forwardRef as e}from"react";import r from"classnames";import i from"./NewCommentCursor.scss.js";import{jsx as o,jsxs as l}from"react/jsx-runtime";var t=e((function(e,t){var d=e.size,n=void 0===d?40:d,s=e.onClick,a=e.className,c=e.testId;return o("div",{ref:t,"data-testid":c,className:r(i.root,a),style:{width:n,height:n},onClick:s,children:l("svg",{width:.48839026568430455*n,height:.48839026568430455*n,viewBox:"0 0 8.75 8.75",fill:"none","aria-hidden":!0,children:[o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 4.375C0 4.02982 0.279822 3.75 0.625 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375C8.75 4.72018 8.47018 5 8.125 5H0.625C0.279822 5 0 4.72018 0 4.375Z",fill:"currentColor"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.375 0C4.72018 0 5 0.279822 5 0.625V8.125C5 8.47018 4.72018 8.75 4.375 8.75C4.02982 8.75 3.75 8.47018 3.75 8.125V0.625C3.75 0.279822 4.02982 0 4.375 0Z",fill:"currentColor"})]})})}));export{t as NewCommentCursor};
1
+ import{forwardRef as e}from"react";import o from"classnames";import t from"./NewCommentCursor.scss.js";import{CurveTooltip as r}from"../CurveTooltip/CurveTooltip.js";import{jsx as i,jsxs as l}from"react/jsx-runtime";var d=e((function(e,d){var n=e.size,s=void 0===n?40:n,a=e.onClick,c=e.tooltip,m=e.className,C=e.testId,p=i("div",{ref:d,"data-testid":C,className:o(t.root,m),style:{width:s,height:s},onClick:a,children:l("svg",{width:.48839026568430455*s,height:.48839026568430455*s,viewBox:"0 0 8.75 8.75",fill:"none","aria-hidden":!0,children:[i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 4.375C0 4.02982 0.279822 3.75 0.625 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375C8.75 4.72018 8.47018 5 8.125 5H0.625C0.279822 5 0 4.72018 0 4.375Z",fill:"currentColor"}),i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.375 0C4.72018 0 5 0.279822 5 0.625V8.125C5 8.47018 4.72018 8.75 4.375 8.75C4.02982 8.75 3.75 8.47018 3.75 8.125V0.625C3.75 0.279822 4.02982 0 4.375 0Z",fill:"currentColor"})]})});return c?i(r,{data:c,open:!0,isFullScreen:!1,placement:"bottom-start",children:p}):p}));export{d as NewCommentCursor};
2
2
  //# sourceMappingURL=NewCommentCursor.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NewCommentCursor.js","sources":["../../../src/components/NewCommentCursor/NewCommentCursor.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport styles from './NewCommentCursor.scss';\n\nexport type NewCommentCursorProps = {\n size?: number;\n onClick?: () => void;\n\n className?: string;\n testId?: string;\n};\n\n// Figma's \"Vector\" plus glyph is sized relative to the pin (\"Union\", 17.916 units),\n// not the full 24px canvas the pin sits in (node 3119:21596, \"add-message-custom-fill\").\n// Our CSS-drawn pin fills the whole container, so the glyph scales off `size` directly\n// using that plus/pin ratio. Paths/viewBox below are exact Figma coordinates.\nconst GLYPH_RATIO = 8.75 / 17.916;\n\nexport const NewCommentCursor = forwardRef<HTMLDivElement, NewCommentCursorProps>(\n ({ size = 40, onClick, className, testId }, ref) => (\n <div\n ref={ref}\n data-testid={testId}\n className={classNames(styles.root, className)}\n style={{ width: size, height: size }}\n onClick={onClick}\n >\n <svg\n width={size * GLYPH_RATIO}\n height={size * GLYPH_RATIO}\n viewBox=\"0 0 8.75 8.75\"\n fill=\"none\"\n aria-hidden\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0 4.375C0 4.02982 0.279822 3.75 0.625 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375C8.75 4.72018 8.47018 5 8.125 5H0.625C0.279822 5 0 4.72018 0 4.375Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4.375 0C4.72018 0 5 0.279822 5 0.625V8.125C5 8.47018 4.72018 8.75 4.375 8.75C4.02982 8.75 3.75 8.47018 3.75 8.125V0.625C3.75 0.279822 4.02982 0 4.375 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n )\n);\n"],"names":["NewCommentCursor","forwardRef","ref","_ref$size","_ref","size","onClick","className","testId","_jsx","classNames","styles","root","style","width","height","children","_jsxs","viewBox","fill","fillRule","clipRule","d"],"mappings":"yJAiBA,IAEaA,EAAmBC,GAC9B,WAA4CC,GAAG,IAAAC,EAAAC,EAA5CC,KAAAA,aAAO,GAAEF,EAAEG,IAAAA,QAASC,IAAAA,UAAWC,IAAAA,OAAM,OACtCC,EAAA,MAAA,CACEP,IAAKA,EACL,cAAaM,EACbD,UAAWG,EAAWC,EAAOC,KAAML,GACnCM,MAAO,CAAEC,MAAOT,EAAMU,OAAQV,GAC9BC,QAASA,EAAQU,SAEjBC,EAAA,MAAA,CACEH,MAZY,mBAYLT,EACPU,OAbY,mBAaJV,EACRa,QAAQ,gBACRC,KAAK,OACL,eAAW,EAAAH,SAEX,CAAAP,EAAA,OAAA,CACEW,SAAS,UACTC,SAAS,UACTC,EAAE,4JACFH,KAAK,iBAEPV,EAAA,OAAA,CACEW,SAAS,UACTC,SAAS,UACTC,EAAE,4JACFH,KAAK,qBAGL"}
1
+ {"version":3,"file":"NewCommentCursor.js","sources":["../../../src/components/NewCommentCursor/NewCommentCursor.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport styles from './NewCommentCursor.scss';\nimport { CurveTooltip, CurveTooltipData } from '../CurveTooltip';\n\nexport type NewCommentCursorProps = {\n size?: number;\n onClick?: () => void;\n tooltip?: CurveTooltipData;\n\n className?: string;\n testId?: string;\n};\n\n// Figma's \"Vector\" plus glyph is sized relative to the pin (\"Union\", 17.916 units),\n// not the full 24px canvas the pin sits in (node 3119:21596, \"add-message-custom-fill\").\n// Our CSS-drawn pin fills the whole container, so the glyph scales off `size` directly\n// using that plus/pin ratio. Paths/viewBox below are exact Figma coordinates.\nconst GLYPH_RATIO = 8.75 / 17.916;\n\nexport const NewCommentCursor = forwardRef<HTMLDivElement, NewCommentCursorProps>(\n ({ size = 40, onClick, tooltip, className, testId }, ref) => {\n const cursor = (\n <div\n ref={ref}\n data-testid={testId}\n className={classNames(styles.root, className)}\n style={{ width: size, height: size }}\n onClick={onClick}\n >\n <svg\n width={size * GLYPH_RATIO}\n height={size * GLYPH_RATIO}\n viewBox=\"0 0 8.75 8.75\"\n fill=\"none\"\n aria-hidden\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0 4.375C0 4.02982 0.279822 3.75 0.625 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375C8.75 4.72018 8.47018 5 8.125 5H0.625C0.279822 5 0 4.72018 0 4.375Z\"\n fill=\"currentColor\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4.375 0C4.72018 0 5 0.279822 5 0.625V8.125C5 8.47018 4.72018 8.75 4.375 8.75C4.02982 8.75 3.75 8.47018 3.75 8.125V0.625C3.75 0.279822 4.02982 0 4.375 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n\n // isFullScreen: the DC variant resizes the app iframe on open, making a cursor-following tooltip loop.\n return tooltip ? (\n <CurveTooltip data={tooltip} open isFullScreen={false} placement=\"bottom-start\">\n {cursor}\n </CurveTooltip>\n ) : (\n cursor\n );\n }\n);\n"],"names":["NewCommentCursor","forwardRef","_ref","ref","_ref$size","size","onClick","tooltip","className","testId","cursor","_jsx","classNames","styles","root","style","width","height","children","_jsxs","viewBox","fill","fillRule","clipRule","d","CurveTooltip","data","open","isFullScreen","placement"],"mappings":"wNAmBA,IAEaA,EAAmBC,GAC9B,SAAAC,EAAqDC,GAAQ,IAAAC,EAAAF,EAA1DG,KAAAA,aAAO,GAAED,EAAEE,IAAAA,QAASC,IAAAA,QAASC,IAAAA,UAAWC,IAAAA,OACnCC,EACJC,EAAA,MAAA,CACER,IAAKA,EACL,cAAaM,EACbD,UAAWI,EAAWC,EAAOC,KAAMN,GACnCO,MAAO,CAAEC,MAAOX,EAAMY,OAAQZ,GAC9BC,QAASA,EAAQY,SAEjBC,EAAA,MAAA,CACEH,MAbU,mBAaHX,EACPY,OAdU,mBAcFZ,EACRe,QAAQ,gBACRC,KAAK,OACL,eAAW,EAAAH,SAEX,CAAAP,EAAA,OAAA,CACEW,SAAS,UACTC,SAAS,UACTC,EAAE,4JACFH,KAAK,iBAEPV,EAAA,OAAA,CACEW,SAAS,UACTC,SAAS,UACTC,EAAE,4JACFH,KAAK,sBAOb,OAAOd,EACLI,EAACc,EAAY,CAACC,KAAMnB,EAASoB,MAAI,EAACC,cAAc,EAAOC,UAAU,eAAcX,SAC5ER,IAGHA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=NewCommentCursor.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NewCommentCursor.test.d.ts","sourceRoot":"","sources":["../../../../src/components/NewCommentCursor/__tests__/NewCommentCursor.test.tsx"],"names":[],"mappings":""}
@@ -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"}