npm - @drivy/cobalt - Versions diffs - 2.15.0 → 2.16.0 - Mend

@drivy/cobalt 2.15.0 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1244) hide show

package/components/Layout/Surfaces/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 const getDirectionClasses = (direction) => {
@@ -14,22 +14,22 @@ const getDirectionClasses = (direction) => {
     return directionClasses;
 };
 const Flexible = ({ children, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
-    return (React.createElement("div", { className: cx("cobalt-layout-flexible", getDirectionClasses(direction), {
+    return (jsx("div", { className: cx("cobalt-layout-flexible", getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
             "cobalt-layout--fullHeight": isFullHeight,
-        }) }, children));
+        }), children: children }));
 };
 const FlexibleWithConstraint = ({ children, size, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
-    return (React.createElement("div", { className: cx(`cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`, getDirectionClasses(direction), {
+    return (jsx("div", { className: cx(`cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`, getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
             "cobalt-layout--fullHeight": isFullHeight,
-        }) }, children));
+        }), children: children }));
 };
 const Fixed = ({ children, width, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
-    return (React.createElement("div", { className: cx(`cobalt-layout-fixed cobalt-layout-fixed--${width}`, getDirectionClasses(direction), {
+    return (jsx("div", { className: cx(`cobalt-layout-fixed cobalt-layout-fixed--${width}`, getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
             "cobalt-layout--fullHeight": isFullHeight,
-        }) }, children));
+        }), children: children }));
 };
 export { Fixed, Flexible, FlexibleWithConstraint };

package/components/Layout/Surfaces/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import ~~React,~~ ~~{ type ReactNode }~~ from \"~~react~~\"\nimport cx from \"~~classnames~~\"\nimport { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" \| \"column\" \| \"row-reverse\" \| \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n direction: ResponsiveDirection \| DirectionProp\n) => {\n const directionClasses: string[] = []\n if (typeof direction === \"string\") {\n directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n } else {\n for (const [key, value] of Object.entries(direction)) {\n directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n }\n }\n return directionClasses\n}\n\nexport const Flexible = ({\n children,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n })}\n >\n {children}\n </div>\n )\n}\n\nexport const FlexibleWithConstraint = ({\n children,\n size,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n size: \"small\" \| \"medium\" \| \"large\"\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\n `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n getDirectionClasses(direction),\n {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n }\n )}\n >\n {children}\n </div>\n )\n}\n\nexport const Fixed = ({\n children,\n width,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n width: 280 \| 420 \| 600\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\n `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n getDirectionClasses(direction),\n {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n }\n )}\n >\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;MAEY,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAMrB,KAAI;AACH,IAAA,~~QACE~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CAAC,EAED,EAAA,QAAQ,~~CACL~~,EACP;AACH,EAAC;MAEY,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,~~QACE~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,~~CACL~~,EACP;AACH,EAAC;MAEY,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,~~QACE~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,~~CACL~~,EACP;AACH;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { ReactNode } from \"react\"\nimport type { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" \| \"column\" \| \"row-reverse\" \| \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n direction: ResponsiveDirection \| DirectionProp,\n) => {\n const directionClasses: string[] = []\n if (typeof direction === \"string\") {\n directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n } else {\n for (const [key, value] of Object.entries(direction)) {\n directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n }\n }\n return directionClasses\n}\n\nexport const Flexible = ({\n children,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n })}\n >\n {children}\n </div>\n )\n}\n\nexport const FlexibleWithConstraint = ({\n children,\n size,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n size: \"small\" \| \"medium\" \| \"large\"\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\n `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n getDirectionClasses(direction),\n {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n },\n )}\n >\n {children}\n </div>\n )\n}\n\nexport const Fixed = ({\n children,\n width,\n direction = \"column\",\n bottomPadding = false,\n isFullHeight = false,\n}: {\n children?: ReactNode\n width: 280 \| 420 \| 600\n direction?: ResponsiveDirection \| DirectionProp\n bottomPadding?: boolean\n isFullHeight?: boolean\n}) => {\n return (\n <div\n className={cx(\n `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n getDirectionClasses(direction),\n {\n \"cobalt-layout--bottomPadding\": bottomPadding,\n \"cobalt-layout--fullHeight\": isFullHeight,\n },\n )}\n >\n {children}\n </div>\n )\n}\n"],"names":["_jsx"],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;MAEY,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAMrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH,EAAC;MAEY,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH,EAAC;MAEY,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH;;;;"}

package/components/Modal/ModalFooter.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 const ModalFooter = ({ children, className }) => {
-    return React.createElement("div", { className: cx("cobalt-modal-footer", className) }, children);
+    return jsx("div", { className: cx("cobalt-modal-footer", className), children: children });
 };
 export { ModalFooter as default };

package/components/Modal/ModalFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalFooter.js","sources":["../../../src/components/Modal/ModalFooter.tsx"],"sourcesContent":["import ~~React~~ from \"~~react~~\"\nimport cx from \"~~classnames~~\"\n\nexport type ModalFooterPropsType = {\n children?: React.ReactNode\n className?: string\n}\n\nconst ModalFooter = ({ children, className }: ModalFooterPropsType) => {\n return <div className={cx(\"cobalt-modal-footer\", className)}>{children}</div>\n}\n\nexport default ModalFooter\n"],"names":[],"mappings":";;;AAQM,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,KAAI;AACpE,IAAA,~~OAAO~~,~~KAAK~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,EAAG,QAAQ,CAAO,CAAA;AAC/E;;;;"}
1	+ {"version":3,"file":"ModalFooter.js","sources":["../../../src/components/Modal/ModalFooter.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport type ModalFooterPropsType = {\n children?: React.ReactNode\n className?: string\n}\n\nconst ModalFooter = ({ children, className }: ModalFooterPropsType) => {\n return <div className={cx(\"cobalt-modal-footer\", className)}>{children}</div>\n}\n\nexport default ModalFooter\n"],"names":["_jsx"],"mappings":";;;AAQM,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,KAAI;AACpE,IAAA,OAAOA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA;AAC/E;;;;"}

package/components/Modal/ModalHeader.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Dialog } from '@ark-ui/react';
 import '../Icon/index.js';
 import CloseIcon from '../Icon/__generated__/CloseIcon.js';
@@ -6,11 +6,7 @@ import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 const ModalHeader = ({ title, close, }) => {
     if (!title && !close)
         return null;
-    return (React.createElement("div", { className: "cobalt-modal-header" },
-        React.createElement(Dialog.Title, { className: "cobalt-modal-header__title" }, title),
-        close && (React.createElement("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close },
-            React.createElement("span", { "aria-hidden": true },
-                React.createElement(CloseIcon, { color: "onSurfaceVariant" }))))));
+    return (jsxs("div", { className: "cobalt-modal-header", children: [jsx(Dialog.Title, { className: "cobalt-modal-header__title", children: title }), close && (jsx("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close, children: jsx("span", { "aria-hidden": true, children: jsx(CloseIcon, { color: "onSurfaceVariant" }) }) }))] }));
 };
 export { ModalHeader as default };

package/components/Modal/ModalHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import ~~React~~ from \"react\"\nimport { ~~Dialog~~ } from \"~~@ark-ui/~~react\"\n\nimport { CloseIcon } from \"../Icon\"\n\nconst ModalHeader = ({\n title,\n close,\n}: {\n title?: React.ReactNode\n close?: () => void\n}) => {\n if (!title && !close) return null\n\n return (\n <div className=\"cobalt-modal-header\">\n <Dialog.Title className=\"cobalt-modal-header__title\">\n {title}\n </Dialog.Title>\n {close && (\n <button\n type=\"button\"\n className=\"cobalt-modal-header__close-button\"\n onClick={close}\n >\n <span aria-hidden>\n <CloseIcon color=\"onSurfaceVariant\" />\n </span>\n </button>\n )}\n </div>\n )\n}\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;~~AAEjC~~,~~IAAA~~,~~QACE~~,~~KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,~~SAAS,EAAC,qBAAqB,EAAA~~;QAClC~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,~~MAAM,CAAC,KAAK,~~EAAA~~,~~EAAC,~~SAAS,EAAC,4BAA4B,EACjD,EAAA,KAAK,~~CACO;AACd~~,~~QAAA~~,KAAK,~~KACJ~~,~~KACE~~,CAAA,~~aAAA,CAAA,~~QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA~~;AAEd~~,~~YAAA~~,~~KAAA~~,~~CAAA~~,~~aAAA,~~CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA~~;gBACE~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA~~,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,~~EAAG~~,~~CAAA~~,~~CACjC~~,~~CACA~~,CACV,CACG,EACP;AACH;;;;"}
1	+ {"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import { Dialog } from \"@ark-ui/react\"\nimport type React from \"react\"\n\nimport { CloseIcon } from \"../Icon\"\n\nconst ModalHeader = ({\n title,\n close,\n}: {\n title?: React.ReactNode\n close?: () => void\n}) => {\n if (!title && !close) return null\n\n return (\n <div className=\"cobalt-modal-header\">\n <Dialog.Title className=\"cobalt-modal-header__title\">\n {title}\n </Dialog.Title>\n {close && (\n <button\n type=\"button\"\n className=\"cobalt-modal-header__close-button\"\n onClick={close}\n >\n <span aria-hidden>\n <CloseIcon color=\"onSurfaceVariant\" />\n </span>\n </button>\n )}\n </div>\n )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;IAEjC,QACEA,cAAK,SAAS,EAAC,qBAAqB,EAClC,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,4BAA4B,EACjD,QAAA,EAAA,KAAK,GACO,EACd,KAAK,KACJA,GACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA,QAAA,EAEdA,GACE,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAA,CAAG,GACjC,EACA,CAAA,CACV,CACG,EAAA,CAAA,EACP;AACH;;;;"}

package/components/Modal/MultiStepModal.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { useRef, useState } from 'react';
 import Modal from './index.js';
 const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHeight = true, ...modalProps }) => {
@@ -25,21 +26,15 @@ const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHei
     const minimumScale = useMidSizeHeight
         ? "c-opacity-0 c-grid-rows-[0.5fr]"
         : "c-opacity-0 c-grid-rows-[0fr]";
-    return (React.createElement(Modal, { ...modalProps, title: React.createElement(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed },
-        React.createElement("div", { className: "c-w-full c-overflow-hidden" },
-            React.createElement("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
-                    width: `${steps.length * 100}%`,
-                    transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
-                } }, steps.map((StepComponents, index) => {
-                return (React.createElement("div", { key: "modal_step_" + index, className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
-                        "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
-                        [minimumScale]: index !== currentStep,
-                    }), style: { width: `${100 / steps.length}%` } },
-                    React.createElement("div", { className: "c-overflow-hidden" },
-                        React.createElement(StepComponents.content, { ...stepProps }))));
-            }))),
-        CurrentStepComponents.footer && (React.createElement(Modal.Footer, null,
-            React.createElement(CurrentStepComponents.footer, { ...stepProps })))));
+    return (jsxs(Modal, { ...modalProps, title: jsx(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed, children: [jsx("div", { className: "c-w-full c-overflow-hidden", children: jsx("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
+                        width: `${steps.length * 100}%`,
+                        transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
+                    }, children: steps.map((StepComponents, index) => {
+                        return (jsx("div", { className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
+                                "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
+                                [minimumScale]: index !== currentStep,
+                            }), style: { width: `${100 / steps.length}%` }, children: jsx("div", { className: "c-overflow-hidden", children: jsx(StepComponents.content, { ...stepProps }) }) }, `step-${index}-${steps[index].title.toString()}`));
+                    }) }) }), CurrentStepComponents.footer && (jsx(Modal.Footer, { children: jsx(CurrentStepComponents.footer, { ...stepProps }) }))] }));
 };
 export { MultiStepModal as default };

package/components/Modal/MultiStepModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import ~~React,~~ { ~~useRef,~~ ~~useState~~ } from \"react\"\nimport cx from \"~~classnames~~\"\nimport Modal, { ModalPropsType } from \".\"\n\ntype StepComponentType<T> = (props: {\n navigation: {\n nextStep: () => void\n previousStep: () => void\n closeModal: () => void\n }\n data: T\n}) => React.ReactNode\n\nexport type ModalStepType<T> = {\n title: StepComponentType<T>\n content: StepComponentType<T>\n footer?: StepComponentType<T>\n}\n\ntype MultiStepsModalProps<T = null> = {\n stepData?: T\n close: () => void\n onHidden?: (currentStepIndex: number) => void\n steps: ModalStepType<T>[]\n useMidSizeHeight?: boolean\n} & Omit<ModalPropsType, \"children\" \| \"onHidden\" \| \"close\">\n\nconst MultiStepModal = <T,>({\n stepData = null as T,\n close,\n steps,\n onHidden,\n useMidSizeHeight = true,\n ...modalProps\n}: MultiStepsModalProps<T>) => {\n const bodyScrollContentRef = useRef<HTMLDivElement>(null)\n const [currentStep, setCurrentStep] = useState(0)\n\n const handleNextStep = () => {\n setCurrentStep(\n currentStep >= steps.length - 1 ? currentStep : currentStep + 1\n )\n }\n\n const handlePreviousStep = () => {\n setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1)\n }\n\n const onModalClosed = () => {\n onHidden?.(currentStep)\n setCurrentStep(0)\n }\n\n const navigation = {\n nextStep: handleNextStep,\n previousStep: handlePreviousStep,\n closeModal: close,\n }\n\n const CurrentStepComponents = steps[currentStep]\n const stepProps = { data: stepData, navigation }\n\n const minimumScale = useMidSizeHeight\n ? \"c-opacity-0 c-grid-rows-[0.5fr]\"\n : \"c-opacity-0 c-grid-rows-[0fr]\"\n\n return (\n <Modal\n {...modalProps}\n title={<CurrentStepComponents.title {...stepProps} />}\n close={close}\n onHidden={onModalClosed}\n >\n <div className=\"c-w-full c-overflow-hidden\">\n <div\n className=\"c-py-sm c-transition-transform c-duration-500 c-ease-in-out\"\n ref={bodyScrollContentRef}\n style={{\n width: `${steps.length * 100}%`,\n transform: `translateX(-${(100 / steps.length) * currentStep}%)`,\n }}\n >\n {steps.map((StepComponents, index) => {\n return (\n <div\n key={~~\"modal_step_\" +~~ index}\n className={cx(\n \"c-inline-grid c-align-top c-transition-all c-duration-500\",\n {\n \"c-opacity-100 c-grid-rows-[1fr]\": index === currentStep,\n [minimumScale]: index !== currentStep,\n }\n )}\n style={{ width: `${100 / steps.length}%` }}\n >\n <div className=\"c-overflow-hidden\">\n <StepComponents.content {...stepProps} />\n </div>\n </div>\n )\n })}\n </div>\n </div>\n {CurrentStepComponents.footer && (\n <Modal.Footer>\n <CurrentStepComponents.footer {...stepProps} />\n </Modal.Footer>\n )}\n </Modal>\n )\n}\n\nexport default MultiStepModal\n"],"names":[],"mappings":"~~;;;;AA2BM~~,MAAA,cAAc,GAAG,CAAK,EAC1B,QAAQ,GAAG,IAAS,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,GAAG,UAAU,EACW,KAAI;AAC5B,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEjD,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,cAAc,CACZ,WAAW,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAChE,CAAA;AACH,KAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,MAAK;AAC9B,QAAA,cAAc,CAAC,WAAW,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,CAAA;AACxD,KAAC,CAAA;IAED,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,WAAW,CAAC,CAAA;QACvB,cAAc,CAAC,CAAC,CAAC,CAAA;AACnB,KAAC,CAAA;AAED,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,QAAQ,EAAE,cAAc;AACxB,QAAA,YAAY,EAAE,kBAAkB;AAChC,QAAA,UAAU,EAAE,KAAK;KAClB,CAAA;AAED,IAAA,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAA;IAEhD,MAAM,YAAY,GAAG,gBAAgB;AACnC,UAAE,iCAAiC;UACjC,+BAA+B,CAAA;~~IAEnC~~,~~QACE~~,~~oBAAC~~,KAAK,~~EAAA~~,EAAA,~~GACA~~,UAAU,EACd,KAAK,~~EAAE~~,~~KAAA~~,CAAA,~~aAAA,CAAC,~~qBAAqB,CAAC,KAAK,~~EAAK~~,EAAA,~~GAAA~~,SAAS,~~GAAI~~,EACrD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EAAA~~;QAEvB~~,~~KAAK~~,~~CAAA~~,~~aAAA~~,~~CAAA~~,~~KAAA,EAAA,EAAA,~~SAAS,EAAC,4BAA4B,~~EAAA;YACzC~~,~~KACE~~,~~CAAA~~,~~aAAA~~,CAAA,KAAA,EAAA,~~EAAA~~,SAAS,EAAC,6DAA6D,EACvE,GAAG,EAAE,oBAAoB,EACzB,KAAK,EAAE;AACL,~~oBAAA~~,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,MAAM,GAAG,GAAG,CAAG,CAAA,CAAA;~~oBAC~~/B,SAAS,EAAE,CAAe,YAAA,EAAA,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,IAAI,WAAW,CAAI,EAAA,CAAA;~~iBACjE~~,EAEA,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,KAAK,KAAI;AACnC,~~gBAAA~~,~~QACE~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,~~EACE~~,~~GAAG,EAAE,aAAa,GAAG,KAAK,EAC1B,~~SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D;~~wBACE~~,iCAAiC,EAAE,KAAK,KAAK,WAAW;AACxD,~~wBAAA~~,CAAC,YAAY,GAAG,KAAK,KAAK,WAAW;~~AACtC~~,~~qBAAA,~~CACF,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,~~CAAG~~,~~EAAA~~,GAAG,GAAG,KAAK,CAAC,MAAM,~~GAAG~~,EAAE,~~EAAA;oBAE1C~~,~~KAAK~~,~~CAAA~~,~~aAAA~~,CAAA,KAAA,EAAA,~~EAAA~~,SAAS,EAAC,mBAAmB,~~EAAA;wBAChC~~,~~KAAC~~,CAAA,~~aAAA,CAAA,~~cAAc,CAAC,OAAO,EAAA,EAAA,GAAK,SAAS,EAAI,CAAA,CACrC,~~CACF~~,EACP;~~aACF~~,CAAC,~~CACE~~,CACF~~;AACL~~,~~QAAA~~,qBAAqB,CAAC,MAAM,~~KAC3B~~,~~KAAC~~,~~CAAA~~,~~aAAA,CAAA,~~KAAK,CAAC,MAAM,EAAA,~~IAAA;YACX~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,~~qBAAqB,CAAC,MAAM,~~EAAK~~,EAAA,~~GAAA~~,SAAS,~~GAAI~~,~~CAClC~~,CAChB,CACK,EACT;AACH;;;;"}
1	+ {"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { useRef, useState } from \"react\"\nimport Modal, { type ModalPropsType } from \".\"\n\ntype StepComponentType<T> = (props: {\n navigation: {\n nextStep: () => void\n previousStep: () => void\n closeModal: () => void\n }\n data: T\n}) => React.ReactNode\n\nexport type ModalStepType<T> = {\n title: StepComponentType<T>\n content: StepComponentType<T>\n footer?: StepComponentType<T>\n}\n\ntype MultiStepsModalProps<T = null> = {\n stepData?: T\n close: () => void\n onHidden?: (currentStepIndex: number) => void\n steps: ModalStepType<T>[]\n useMidSizeHeight?: boolean\n} & Omit<ModalPropsType, \"children\" \| \"onHidden\" \| \"close\">\n\nconst MultiStepModal = <T,>({\n stepData = null as T,\n close,\n steps,\n onHidden,\n useMidSizeHeight = true,\n ...modalProps\n}: MultiStepsModalProps<T>) => {\n const bodyScrollContentRef = useRef<HTMLDivElement>(null)\n const [currentStep, setCurrentStep] = useState(0)\n\n const handleNextStep = () => {\n setCurrentStep(\n currentStep >= steps.length - 1 ? currentStep : currentStep + 1,\n )\n }\n\n const handlePreviousStep = () => {\n setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1)\n }\n\n const onModalClosed = () => {\n onHidden?.(currentStep)\n setCurrentStep(0)\n }\n\n const navigation = {\n nextStep: handleNextStep,\n previousStep: handlePreviousStep,\n closeModal: close,\n }\n\n const CurrentStepComponents = steps[currentStep]\n const stepProps = { data: stepData, navigation }\n\n const minimumScale = useMidSizeHeight\n ? \"c-opacity-0 c-grid-rows-[0.5fr]\"\n : \"c-opacity-0 c-grid-rows-[0fr]\"\n\n return (\n <Modal\n {...modalProps}\n title={<CurrentStepComponents.title {...stepProps} />}\n close={close}\n onHidden={onModalClosed}\n >\n <div className=\"c-w-full c-overflow-hidden\">\n <div\n className=\"c-py-sm c-transition-transform c-duration-500 c-ease-in-out\"\n ref={bodyScrollContentRef}\n style={{\n width: `${steps.length * 100}%`,\n transform: `translateX(-${(100 / steps.length) * currentStep}%)`,\n }}\n >\n {steps.map((StepComponents, index) => {\n return (\n <div\n key={`step-${index}-${steps[index].title.toString()}`}\n className={cx(\n \"c-inline-grid c-align-top c-transition-all c-duration-500\",\n {\n \"c-opacity-100 c-grid-rows-[1fr]\": index === currentStep,\n [minimumScale]: index !== currentStep,\n },\n )}\n style={{ width: `${100 / steps.length}%` }}\n >\n <div className=\"c-overflow-hidden\">\n <StepComponents.content {...stepProps} />\n </div>\n </div>\n )\n })}\n </div>\n </div>\n {CurrentStepComponents.footer && (\n <Modal.Footer>\n <CurrentStepComponents.footer {...stepProps} />\n </Modal.Footer>\n )}\n </Modal>\n )\n}\n\nexport default MultiStepModal\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/components/Modal/index.js CHANGED Viewed

@@ -1,44 +1,37 @@
-import React, { forwardRef, useEffect, isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Dialog, Portal } from '@ark-ui/react';
 import cx from 'classnames';
-import ModalHeader from './ModalHeader.js';
+import React, { forwardRef, useEffect, isValidElement } from 'react';
 import ModalFooter from './ModalFooter.js';
+import ModalHeader from './ModalHeader.js';
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
+const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
     useEffect(() => {
         isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
     }, [onShow, isOpen]);
     const modalFooter = React.Children.toArray(children).find((c) => isModalFooterAPIComponent(c));
     const hasFooter = isValidElement(modalFooter);
-    return (React.createElement(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
+    return (jsx(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
             e.open ? onShow === null || onShow === void 0 ? void 0 : onShow() : close === null || close === void 0 ? void 0 : close();
         }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true,
         // For some reason, onHidden can sometimes not be called if we use unmountOnExit
-        unmountOnExit: !onHidden },
-        React.createElement(Portal, null,
-            React.createElement(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
+        unmountOnExit: !onHidden, children: jsx(Portal, { children: jsx(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
                     "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
                     "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                }) },
-                React.createElement(Dialog.Positioner, { className: cx("cobalt-modal", {
+                }), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
                         "cobalt-modal--overflowHidden": overflowHidden,
                         "cobalt-modal--fullHeight": fullHeight,
                         "cobalt-modal--fullWidth": fullWidth,
-                    }), ref: ref },
-                    React.createElement(Dialog.Content, { className: cx("cobalt-modal__content", className, {
+                    }), ref: ref, children: jsxs(Dialog.Content, { className: cx("cobalt-modal__content", className, {
                             "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
                             "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                        }) },
-                        React.createElement(ModalHeader, { title: title, close: close }),
-                        React.createElement(Dialog.Description, { className: "cobalt-modal-body__wrapper" },
-                            React.createElement("div", { className: cx("cobalt-modal-body", {
-                                    "cobalt-modal-body--bodySpacing": bodySpacing,
-                                    "cobalt-modal-body--hasFooter": hasFooter,
-                                }) }, children),
-                            hasFooter && React.createElement(ModalFooter, { ...modalFooter.props }))))))));
+                        }), children: [jsx(ModalHeader, { title: title, close: close }), jsxs(Dialog.Description, { className: "cobalt-modal-body__wrapper", children: [jsx("div", { className: cx("cobalt-modal-body", {
+                                            "cobalt-modal-body--bodySpacing": bodySpacing,
+                                            "cobalt-modal-body--hasFooter": hasFooter,
+                                        }), children: children }), hasFooter && jsx(ModalFooter, { ...modalFooter.props })] })] }) }) }) }) }));
 });
 Modal.displayName = "Modal";
 var Modal$1 = Object.assign(Modal, { Footer: ModalFooterAPI });

package/components/Modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import ~~React,~~ { ~~isValidElement, useEffect, forwardRef } from \"react\"\nimport {~~ Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ~~ModalHeader~~ from \"~~./ModalHeader~~\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n [\"aria-label\"]: string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Custom css classes to add to the modal\n /\n className?: string\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: React.ReactNode\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Disable enter/leave animation (animation enabled by default)\n /\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /\n Disable modal max-width limit\n /\n fullWidth?: boolean\n /\n Always take the full height of the screen\n /\n fullHeight?: boolean\n /\n Remove the modal from the DOM on hidden (enabled by default)\n /\n unmountOnHidden?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n [\"aria-label\"]: ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n }: ModalPropsType,\n ref\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n unmountOnExit={!onHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Dialog.Backdrop>\n </Portal>\n </Dialog.Root>\n )\n }\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":[],"mappings":"~~;;;;;;AA6EA~~;AACa,MAAA,cAAc,GAAG,CAAC,MAA4B,KAAK,KAAI;MAEvD,yBAAyB,GAAG,CACvC,SAA0B,KAE1B,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,IAAI,KAAK,eAAc;AAEtE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EACE,MAAM,EACN,KAAK,EACL,SAAS,EACT,eAAe,EACf,~~CAAC,~~YAAY,~~GAAG~~,SAAS,~~EACzB~~,KAAK,EACL,QAAQ,EACR,cAAc,GAAG,IAAI,EACrB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,gBAAgB,GACD,EACjB,GAAG,KACD;IACF,SAAS,CAAC,MAAK;QACb,MAAM,KAAI,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,EAAI,CAAA,CAAA;AACtB,KAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAEpB,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAC1D,yBAAyB,CAAC,CAAC,CAAC,CAC7B,CAAA;AACD,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE7C,IAAA,~~QACE~~,~~KAAC~~,CAAA,~~aAAA,CAAA,~~MAAM,CAAC,IAAI,kBACE,SAAS,EACrB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,CAAC,KAAI;YAClB,CAAC,CAAC,IAAI,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,MAAM,EAAI,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,EAAI,CAAA;AACjC,SAAC,EACD,cAAc,EAAE,QAAQ,EACxB,cAAc,EAAE,eAAe,KAAK,MAAM,eAAe,CAAC,OAAO,CAAC,EAClE,oBAAoB,EAAE,KAAK,GAAG,SAAS,GAAG,gBAAgB,EAC1D,SAAS,EAAA,IAAA;;~~QAET~~,aAAa,EAAE,CAAC,QAAQ,~~EAAA;AAExB~~,QAAA,~~KAAA~~,~~CAAA~~,~~aAAA,~~CAAC,MAAM,EAAA,~~IAAA;YACL~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,~~MAAM,CAAC,QAAQ,EAAA,~~EACd,~~SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;AACrC,oBAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;AAC1D,oBAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;iBAC3D,CAAC,EAAA~~;gBAEF~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,CAAA,MAAM,CAAC,UAAU,EAAA,~~EAChB,~~SAAS,EAAE,EAAE,CAAC,cAAc,EAAE;AAC5B,wBAAA,8BAA8B,EAAE,cAAc;AAC9C,wBAAA,0BAA0B,EAAE,UAAU;AACtC,wBAAA,yBAAyB,EAAE,SAAS;~~qBACrC~~,CAAC,EACF,GAAG,EAAE,GAAG,EAAA~~;oBAER~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,~~MAAM,CAAC,OAAO,EACb,~~EAAA,~~SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,4BAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;AAC1D,4BAAA,oCAAoC,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,KAAK;~~yBAC3D~~,CAAC,EAAA~~;wBAEF~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,~~WAAW,~~IAAC~~,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,~~EAAI~~,~~CAAA;AAC3C~~,~~wBAAA~~,~~KAAA~~,~~CAAA,aAAA,~~CAAC,MAAM,CAAC,WAAW,EAAC,~~EAAA,~~SAAS,EAAC,4BAA4B,EAAA~~;AACxD~~,~~4BAAA~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,CAAA,KAAA,EAAA,~~EACE~~,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE;AACjC,~~oCAAA~~,gCAAgC,EAAE,WAAW;AAC7C,~~oCAAA~~,8BAA8B,EAAE,SAAS;~~iCAC1C~~,CAAC,EAAA,EAED,QAAQ,~~CACL;AACL~~,~~4BAAA~~,SAAS,~~IAAI~~,~~KAAA~~,~~CAAA,aAAA,~~CAAC,WAAW,~~EAAA~~,EAAA,~~GAAK~~,WAAW,CAAC,KAAK,~~EAAI~~,~~CAAA~~,~~CACjC~~,CACN,CACC,~~CACJ~~,~~CACX~~,CACG,EACf;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,cAAe,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n /*\n mandatory for A11y\n /\n \"aria-label\": string\n /\n Function called to close the modal, providing it make the modal closeable\n /\n close?: () => void\n /\n React.ref of the element to focus first when the modal opens\n /\n initialFocusRef?: React.RefObject<HTMLElement>\n /\n State to show or hide the modal/dialog\n /\n isOpen: boolean\n /\n Custom css classes to add to the modal\n /\n className?: string\n /\n Action to fire if the user try to dismiss when the modal is not closeable\n /\n onDismissAttempt?: () => void\n /\n Listener called when the modal has been fully hidden\n /\n onHidden?: () => void\n /\n Listener called when the modal begins to show\n /\n onShow?: () => void\n /\n Modal title\n /\n title?: React.ReactNode\n /\n Disable/Enable body paddings (enabled by default)\n /\n bodySpacing?: boolean\n /\n Disable/Enable hidding overflowing absolute elements (enabled by default)\n /\n overflowHidden?: boolean\n /\n Disable enter/leave animation (animation enabled by default)\n /\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /\n Disable modal max-width limit\n /\n fullWidth?: boolean\n /\n Always take the full height of the screen\n /\n fullHeight?: boolean\n /\n Remove the modal from the DOM on hidden (enabled by default)\n /\n unmountOnHidden?: boolean\n /\n Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n \"aria-label\": ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n }: ModalPropsType,\n ref,\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c),\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n unmountOnExit={!onHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Dialog.Backdrop>\n </Portal>\n </Dialog.Root>\n )\n },\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/Note/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
-const Note = ({ children, fullWidth = false, className, isError = false, }) => (React.createElement("div", { className: cx("cobalt-Note", className, {
+const Note = ({ children, fullWidth = false, className, isError = false, }) => (jsx("div", { className: cx("cobalt-Note", className, {
         "cobalt-Note--fullWidth": fullWidth,
         "cobalt-Note--error": isError,
-    }) }, children));
+    }), children: children }));
 export { Note, Note as default };
 //# sourceMappingURL=index.js.map

package/components/Note/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import ~~React~~ from \"~~react~~\"\nimport cx from \"~~classnames~~\"\n\nexport interface NoteProps {\n children: React.ReactNode\n /*\n will fill available width\n * @default false\n */\n fullWidth?: boolean\n className?: string\n isError?: boolean\n}\n\nexport const Note = ({\n children,\n fullWidth = false,\n className,\n isError = false,\n}: NoteProps) => (\n <div\n className={cx(\"cobalt-Note\", className, {\n \"cobalt-Note--fullWidth\": fullWidth,\n \"cobalt-Note--error\": isError,\n })}\n >\n {children}\n </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAcO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,GAAG,KAAK,GACL,~~MACV~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACnC,QAAA,oBAAoB,EAAE,OAAO;AAC9B,KAAA,CAAC,EAED,EAAA,QAAQ,~~CACL~~;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport interface NoteProps {\n children: React.ReactNode\n /*\n will fill available width\n * @default false\n */\n fullWidth?: boolean\n className?: string\n isError?: boolean\n}\n\nexport const Note = ({\n children,\n fullWidth = false,\n className,\n isError = false,\n}: NoteProps) => (\n <div\n className={cx(\"cobalt-Note\", className, {\n \"cobalt-Note--fullWidth\": fullWidth,\n \"cobalt-Note--error\": isError,\n })}\n >\n {children}\n </div>\n)\n\nexport default Note\n"],"names":["_jsx"],"mappings":";;;AAcO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,GAAG,KAAK,GACL,MACVA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACnC,QAAA,oBAAoB,EAAE,OAAO;AAC9B,KAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA;;;;"}

package/components/Pagination/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import Button from '../Buttons/Button/index.js';
 import '../Icon/index.js';
@@ -8,7 +8,7 @@ import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
 const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
     const isActive = currentPage === pageNumber;
-    return (React.createElement(Button, { className: cx("cobalt-pagination__Button"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
+    return (jsx(Button, { className: cx("cobalt-pagination__Button"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber), children: pageNumber }));
 };
 const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
 const generatePages = (currentPage, totalPages, options) => {
@@ -53,7 +53,6 @@ const generatePages = (currentPage, totalPages, options) => {
     }
     return pages;
 };
-// eslint-disable-next-line complexity
 const Pagination = ({ onPageChange, currentPage, totalPages, options = {
     maxVisibleLength: 11,
     edgeVisibleLength: 3,
@@ -61,10 +60,7 @@ const Pagination = ({ onPageChange, currentPage, totalPages, options = {
     if (totalPages <= 1)
         return null;
     const pages = generatePages(currentPage, totalPages, options);
-    return (React.createElement("div", { className: "cobalt-pagination" },
-        React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: React.createElement(ChevronLeftIcon, null) }),
-        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "primary" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
-        React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: React.createElement(ChevronRightIcon, null) })));
+    return (jsxs("div", { className: "cobalt-pagination", children: [jsx(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: jsx(ChevronLeftIcon, {}) }), pages.map((page) => page === PAGE_DOTS_VALUE ? (jsx(DotsHorizontalIcon, { className: "cobalt-pagination__threeDots", color: "primary" }, `dots-${page}`)) : (jsx(PaginationButton, { currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }, page))), jsx(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: jsx(ChevronRightIcon, {}) })] }));
 };
 export { Pagination as default };

package/components/Pagination/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import ~~React from \"react\"\nimport~~ cx from \"classnames\"\nimport Button from \"../Buttons/Button\"\nimport { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n currentPage,\n pageNumber,\n onPageChange,\n}: {\n currentPage: number\n pageNumber: number\n onPageChange: (page: number) => void\n}) => {\n const isActive = currentPage === pageNumber\n return (\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n selected={isActive}\n onClick={() => !isActive && onPageChange(pageNumber)}\n >\n {pageNumber}\n </Button>\n )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n currentPage: number,\n totalPages: number,\n options: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n) => {\n const pages: number[] = []\n const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n if (totalPages <= maxVisiblePages) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i)\n }\n return pages\n }\n\n // Calculate dynamic range for middle pages\n const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n let startMiddlePage = Math.max(\n currentPage - Math.floor(middlePagesCount / 2),\n edgeButtons + 1\n )\n let endMiddlePage = Math.min(\n currentPage + Math.floor(middlePagesCount / 2),\n totalPages - edgeButtons\n )\n\n // Adjust start and end pages if they exceed boundaries\n if (startMiddlePage === edgeButtons + 1) {\n endMiddlePage = startMiddlePage + middlePagesCount - 1\n } else if (endMiddlePage === totalPages - edgeButtons) {\n startMiddlePage = endMiddlePage - middlePagesCount + 1\n }\n\n // Add leading edge buttons\n for (let i = 1; i <= edgeButtons; i++) {\n pages.push(i)\n }\n if (startMiddlePage > edgeButtons + 1) {\n pages.push(PAGE_DOTS_VALUE)\n }\n\n // Add middle pages\n for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n pages.push(i)\n }\n\n // Add trailing edge buttons\n if (endMiddlePage < totalPages - edgeButtons) {\n pages.push(PAGE_DOTS_VALUE)\n }\n for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n pages.push(i)\n }\n\n return pages\n}\n\~~n// eslint-disable-next-line complexity\~~nconst Pagination = ({\n onPageChange,\n currentPage,\n totalPages,\n options = {\n maxVisibleLength: 11,\n edgeVisibleLength: 3,\n },\n}: {\n currentPage: number\n totalPages: number\n onPageChange: (page: number) => void\n options?: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n}) => {\n if (totalPages <= 1) return null\n const pages = generatePages(currentPage, totalPages, options)\n\n return (\n <div className=\"cobalt-pagination\">\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === 1}\n onClick={() => onPageChange(currentPage - 1)}\n icon={<ChevronLeftIcon />}\n />\n {pages.map((page~~, index~~) =>\n page === PAGE_DOTS_VALUE ? (\n <DotsHorizontalIcon\n key={`dots-${~~index~~}`}\n className=\"cobalt-pagination__threeDots\"\n color=\"primary\"\n />\n ) : (\n <PaginationButton\n key={page}\n currentPage={currentPage}\n pageNumber={page}\n onPageChange={onPageChange}\n />\n )\n )}\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === totalPages}\n onClick={() => onPageChange(currentPage + 1)}\n icon={<ChevronRightIcon />}\n />\n </div>\n )\n}\n\nexport default Pagination\n"],"names":[],"mappings":";;;;;;;;AAKA,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,UAAU,EACV,YAAY,GAKb,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,UAAU,CAAA;AAC3C,IAAA,~~QACE~~,~~KAAA~~,~~CAAA,aAAA,~~CAAC,MAAM,EAAA,EACL,SAAS,EAAE,EAAE,CAAC,2BAA2B,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,YAAY,CAAC,UAAU,CAAC,EAAA,EAEnD,UAAU,CACJ,EACV;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,CAAC,CAAA;AAE1B,MAAM,aAAa,GAAG,CACpB,WAAmB,EACnB,UAAkB,EAClB,OAGC,KACC;IACF,MAAM,KAAK,GAAa,EAAE,CAAA;AAC1B,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,gBAAgB,CAAA;AAChD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,iBAAiB,CAAA;AAE7C,IAAA,IAAI,UAAU,IAAI,eAAe,EAAE;;AAEjC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SACd;AACD,QAAA,OAAO,KAAK,CAAA;KACb;;IAGD,MAAM,gBAAgB,GAAG,eAAe,GAAG,CAAC,GAAG,WAAW,CAAA;IAC1D,IAAI,eAAe,GAAG,IAAI,CAAC,GAAG,CAC5B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,WAAW,GAAG,CAAC,CAChB,CAAA;IACD,IAAI,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,UAAU,GAAG,WAAW,CACzB,CAAA;;AAGD,IAAA,IAAI,eAAe,KAAK,WAAW,GAAG,CAAC,EAAE;AACvC,QAAA,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;AAAM,SAAA,IAAI,aAAa,KAAK,UAAU,GAAG,WAAW,EAAE;AACrD,QAAA,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AACD,IAAA,IAAI,eAAe,GAAG,WAAW,GAAG,CAAC,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC,EAAE,EAAE;AACrD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;;AAGD,IAAA,IAAI,aAAa,GAAG,UAAU,GAAG,WAAW,EAAE;AAC5C,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;AACD,IAAA,KAAK,IAAI,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AAC/D,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AAED,IAAA,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;~~AAED;AACM~~,MAAA,UAAU,GAAG,CAAC,EAClB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,GAAG;AACR,IAAA,gBAAgB,EAAE,EAAE;AACpB,IAAA,iBAAiB,EAAE,CAAC;AACrB,CAAA,GASF,KAAI;IACH,IAAI,UAAU,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI,CAAA;IAChC,MAAM,KAAK,GAAG,aAAa,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,CAAC,CAAA;AAE7D,IAAA,~~QACE~~,~~KAAA~~,CAAA,~~aAAA,CAAA,~~KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA~~;AAChC~~,QAAA,~~KAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,MAAM,EAAA,~~EACL,~~SAAS,EAAE,EAAE,CAAC,2BAA2B,CAAC,EAC1C,QAAQ,EAAE,WAAW,KAAK,CAAC,EAC3B,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,~~EAAE~~,~~KAAC~~,CAAA,~~aAAA~~,CAAA,~~eAAe~~,~~OAAG~~,~~EACzB~~,~~CAAA;QACD,~~KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,~~EAAE~~,~~KAAK,KACrB,~~IAAI,KAAK,eAAe,~~IACtB~~,~~KAAC~~,CAAA,~~aAAA,CAAA,~~kBAAkB,~~EACjB~~,EAAA,~~GAAG,EAAE,CAAA,KAAA,EAAQ,KAAK,CAAA,CAAE,EACpB,~~SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAC,SAAS,~~EACf~~,~~CAAA~~,~~KAEF~~,~~KAAC~~,~~CAAA~~,~~aAAA~~,CAAA,~~gBAAgB~~,~~EACf~~,~~EAAA~~,~~GAAG~~,~~EAAE~~,~~IAAI~~,~~EACT~~,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,YAAY,~~EAC1B~~,~~CAAA~~,CACH,CACF~~;AACD~~,~~QAAA~~,~~KAAA~~,~~CAAA,aAAA,CAAC,~~MAAM,EAAA,EACL,SAAS,EAAE,EAAE,CAAC,2BAA2B,CAAC,EAC1C,QAAQ,EAAE,WAAW,KAAK,UAAU,EACpC,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,~~EAAE~~,~~oBAAC~~,gBAAgB,EAAA,~~IAAA~~,CAAG,EAC1B,CAAA,CACE,EACP;AACH;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import cx from \"classnames\"\n\nimport Button from \"../Buttons/Button\"\nimport { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n currentPage,\n pageNumber,\n onPageChange,\n}: {\n currentPage: number\n pageNumber: number\n onPageChange: (page: number) => void\n}) => {\n const isActive = currentPage === pageNumber\n return (\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n selected={isActive}\n onClick={() => !isActive && onPageChange(pageNumber)}\n >\n {pageNumber}\n </Button>\n )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n currentPage: number,\n totalPages: number,\n options: {\n maxVisibleLength: number\n edgeVisibleLength: number\n },\n) => {\n const pages: number[] = []\n const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n if (totalPages <= maxVisiblePages) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i)\n }\n return pages\n }\n\n // Calculate dynamic range for middle pages\n const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n let startMiddlePage = Math.max(\n currentPage - Math.floor(middlePagesCount / 2),\n edgeButtons + 1,\n )\n let endMiddlePage = Math.min(\n currentPage + Math.floor(middlePagesCount / 2),\n totalPages - edgeButtons,\n )\n\n // Adjust start and end pages if they exceed boundaries\n if (startMiddlePage === edgeButtons + 1) {\n endMiddlePage = startMiddlePage + middlePagesCount - 1\n } else if (endMiddlePage === totalPages - edgeButtons) {\n startMiddlePage = endMiddlePage - middlePagesCount + 1\n }\n\n // Add leading edge buttons\n for (let i = 1; i <= edgeButtons; i++) {\n pages.push(i)\n }\n if (startMiddlePage > edgeButtons + 1) {\n pages.push(PAGE_DOTS_VALUE)\n }\n\n // Add middle pages\n for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n pages.push(i)\n }\n\n // Add trailing edge buttons\n if (endMiddlePage < totalPages - edgeButtons) {\n pages.push(PAGE_DOTS_VALUE)\n }\n for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n pages.push(i)\n }\n\n return pages\n}\n\nconst Pagination = ({\n onPageChange,\n currentPage,\n totalPages,\n options = {\n maxVisibleLength: 11,\n edgeVisibleLength: 3,\n },\n}: {\n currentPage: number\n totalPages: number\n onPageChange: (page: number) => void\n options?: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n}) => {\n if (totalPages <= 1) return null\n const pages = generatePages(currentPage, totalPages, options)\n\n return (\n <div className=\"cobalt-pagination\">\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === 1}\n onClick={() => onPageChange(currentPage - 1)}\n icon={<ChevronLeftIcon />}\n />\n {pages.map((page) =>\n page === PAGE_DOTS_VALUE ? (\n <DotsHorizontalIcon\n key={`dots-${page}`}\n className=\"cobalt-pagination__threeDots\"\n color=\"primary\"\n />\n ) : (\n <PaginationButton\n key={page}\n currentPage={currentPage}\n pageNumber={page}\n onPageChange={onPageChange}\n />\n ),\n )}\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === totalPages}\n onClick={() => onPageChange(currentPage + 1)}\n icon={<ChevronRightIcon />}\n />\n </div>\n )\n}\n\nexport default Pagination\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/PhotoDropzone/index.js CHANGED Viewed

@@ -1,22 +1,24 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
 import '../Icon/index.js';
-import { validateFile } from '../utils/validateFile.js';
-import Popover from '../Popover/index.js';
 import Modal from '../Modal/index.js';
-import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Popover from '../Popover/index.js';
+import { validateFile } from '../utils/validateFile.js';
 import BinIcon from '../Icon/__generated__/BinIcon.js';
-import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
 import LoadingIcon from '../Icon/__generated__/LoadingIcon.js';
+import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 const ACCEPTED_MAX_SIZE_MB = 10;
 const ACCEPTED_PHOTOS_TYPES = ["jpg", "jpeg", "png", "gif"];
 const ERROR_DISPLAY_TIME = 6000;
 const ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(", ");
 const preventEventDefaults = (e) => {
-    e.preventDefault && e.preventDefault();
-    e.stopPropagation && e.stopPropagation();
+    var _a, _b;
+    (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+    (_b = e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
 };
 const isEnterOrSpaceKey = (event) => event.key === "Enter" || event.key === " ";
 const PhotoDropzone = ({ className, description, deleteContent, errorContent, onDropped, onPhotoDelete, deleteContentMode = "popover", initialImageUrl = "", }) => {
@@ -81,7 +83,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
             fileInputRef.current.value = "";
         closeDeletePopover();
         setImagePreviewUrl("");
-        onPhotoDelete && onPhotoDelete();
+        onPhotoDelete === null || onPhotoDelete === void 0 ? void 0 : onPhotoDelete();
     };
     const onDragEnter = (event) => {
         preventEventDefaults(event);
@@ -138,12 +140,13 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         }
     };
     useEffect(() => {
-        setIsImageLoaded(false);
+        if (imagePreviewUrl)
+            setIsImageLoaded(false);
     }, [imagePreviewUrl]);
     const onDeleteButtonClick = showDeletePopover
         ? closeDeletePopover
         : openDeletePopover;
-    return (React.createElement("div", { tabIndex: 0, className: cx("cobalt-photo-dropzone", className, {
+    return (jsxs("label", { className: cx("cobalt-photo-dropzone", className, {
             "cobalt-photo-dropzone--filled": imagePreviewUrl,
             "cobalt-photo-dropzone--dragging": isDragging,
             "cobalt-photo-dropzone--loading": isLoading,
@@ -153,31 +156,16 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         // Not on click because we also use mouseEnter listener
         onMouseUp: onDropzoneClick, onTouchEnd: onDropzoneClick, onKeyUp: onDropzoneKey, onDrop: onDrop,
         // Need to reset those listeners to avoid default browser behaviour
-        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults },
-        isErrored && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
-            React.createElement(ContextualWarningCircleFilledIcon, { color: "error" }),
-            errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB))),
-        isLoading && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
-            React.createElement(LoadingIcon, null))),
-        !isLoading &&
-            !isErrored &&
-            (imagePreviewUrl ? (React.createElement(React.Fragment, null,
-                React.createElement("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl, onLoad: () => {
-                        setIsImageLoaded(true);
-                    } }),
-                React.createElement("div", null,
-                    React.createElement("button", { className: cx("cobalt-photo-dropzone__delete-button", {
-                            "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
-                        }), ref: deleteButtonRef,
-                        // Must follow the click listeners on the dropzone,
-                        // in order to have the correct events bubbling
-                        onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
-                        React.createElement(BinIcon, { color: "onSurface" })),
-                    deleteContentMode === "modal" && (React.createElement(Modal, { isOpen: showDeletePopover, "aria-label": "delete", bodySpacing: false }, deleteContent(onDelete, closeDeletePopover))),
-                    deleteContentMode === "popover" && (React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deleteContent(onDelete, closeDeletePopover)))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
-                description && React.createElement("div", null, description),
-                React.createElement(PlusIcon, null)))),
-        React.createElement("input", { ref: fileInputRef, className: "cobalt-photo-dropzone__hidden-input", type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })));
+        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults, children: [isErrored && (jsxs("div", { className: "cobalt-photo-dropzone__description", children: [jsx(ContextualWarningCircleFilledIcon, { color: "error" }), errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)] })), isLoading && (jsx("div", { className: "cobalt-photo-dropzone__description", children: jsx(LoadingIcon, {}) })), !isLoading &&
+                !isErrored &&
+                (imagePreviewUrl ? (jsxs(Fragment, { children: [jsx("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl, alt: "Uploaded preview", onLoad: () => {
+                                setIsImageLoaded(true);
+                            } }), jsxs("div", { children: [jsx("button", { type: "button", className: cx("cobalt-photo-dropzone__delete-button", {
+                                        "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
+                                    }), ref: deleteButtonRef,
+                                    // Must follow the click listeners on the dropzone,
+                                    // in order to have the correct events bubbling
+                                    onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey, children: jsx(BinIcon, { color: "onSurface" }) }), deleteContentMode === "modal" && (jsx(Modal, { isOpen: showDeletePopover, "aria-label": "delete", bodySpacing: false, children: deleteContent(onDelete, closeDeletePopover) })), deleteContentMode === "popover" && (jsx(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true, children: deleteContent(onDelete, closeDeletePopover) }))] })] })) : (jsxs("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong", children: [description && jsx("div", { children: description }), jsx(PlusIcon, {})] }))), jsx("input", { ref: fileInputRef, className: "cobalt-photo-dropzone__hidden-input", type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })] }));
 };
 export { PhotoDropzone as default };

package/components/PhotoDropzone/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import React, {\n useState,\n DragEvent as ReactDragEvent,\n useRef,\n TouchEvent as ReactTouchEvent,\n ChangeEvent as ReactChangeEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n ReactNode,\n useEffect,\n} from \"react\"\nimport cx from \"classnames\"\nimport {\n PlusIcon,\n BinIcon,\n LoadingIcon,\n ContextualWarningCircleFilledIcon,\n} from \"../Icon\"\nimport { validateFile } from \"../utils/validateFile\"\nimport Popover from \"../Popover\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n className?: string\n description?: string\n deleteContent: (onDelete: () => void, close: () => void) => ReactNode\n deleteContentMode?: \"popover\" \| \"modal\"\n errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n onDropped: (file: File) => Promise<void> \| void\n onPhotoDelete?: () => void\n initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n e: ReactDragEvent \| ReactMouseEvent \| ReactKeyboardEvent \| ReactTouchEvent\n) => {\n e.preventDefault && e.preventDefault()\n e.stopPropagation && e.stopPropagation()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n event.key === \"Enter\" \|\| event.key === \" \"\n\nconst PhotoDropzone = ({\n className,\n description,\n deleteContent,\n errorContent,\n onDropped,\n onPhotoDelete,\n deleteContentMode = \"popover\",\n initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n const { isMobile } = useBreakpoint()\n const fileInputRef = useRef<HTMLInputElement>(null)\n const deleteButtonRef = useRef<HTMLButtonElement>(null)\n const [isDragging, setIsDragging] = useState(false)\n const [isLoading, setIsLoading] = useState(false)\n const [isErrored, setIsErrored] = useState(false)\n const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n const [displayDeletion, setDisplayDeletion] = useState(false)\n const [showDeletePopover, setShowDeletePopover] = useState(false)\n const [isImageLoaded, setIsImageLoaded] = useState(false)\n\n const openDeletePopover = (\n event?: ReactMouseEvent \| ReactKeyboardEvent \| ReactTouchEvent\n ) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(true)\n }\n const closeDeletePopover = (event?: ReactMouseEvent \| ReactTouchEvent) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(false)\n }\n\n const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (imagePreviewUrl) setDisplayDeletion(true)\n }\n\n const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n }\n\n const onDropzoneClick = (event?: ReactMouseEvent \| ReactTouchEvent) => {\n if (isMobile && showDeletePopover) return\n event && preventEventDefaults(event)\n if (isLoading) return\n if (isErrored) setIsErrored(false)\n if (imagePreviewUrl) {\n if (showDeletePopover) closeDeletePopover()\n return setDisplayDeletion(!displayDeletion)\n }\n fileInputRef.current?.click()\n }\n\n const onDropzoneKey = (event: ReactKeyboardEvent) => {\n if (showDeletePopover) return\n if (isEnterOrSpaceKey(event)) {\n onDropzoneClick()\n }\n }\n\n const onDeleteKey = (event: ReactKeyboardEvent) => {\n if (isEnterOrSpaceKey(event)) {\n openDeletePopover(event)\n }\n }\n\n const onDelete = () => {\n if (fileInputRef.current) fileInputRef.current.value = \"\"\n closeDeletePopover()\n setImagePreviewUrl(\"\")\n onPhotoDelete && onPhotoDelete()\n }\n\n const onDragEnter = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n if (isErrored) setIsErrored(false)\n !imagePreviewUrl && setIsDragging(true)\n }\n\n const onDragLeave = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n setIsDragging(false)\n }\n\n const processFile = async (fileToProcess: File) => {\n setIsDragging(false)\n setIsErrored(false)\n setIsLoading(true)\n\n const isValidFile = await validateFile(\n fileToProcess,\n (fileToValidate, extension) => {\n const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n if (fileToValidate.size > maxFileSize) {\n return false\n } else if (!extension \|\| !acceptedFileTypes.includes(extension)) {\n return false\n } else {\n return true\n }\n }\n )\n\n if (isValidFile) {\n const imageSrc = URL.createObjectURL(fileToProcess)\n setImagePreviewUrl(imageSrc)\n await onDropped(fileToProcess)\n setIsLoading(false)\n } else {\n setIsLoading(false)\n setIsErrored(true)\n setTimeout(() => {\n setIsErrored(false)\n }, ERROR_DISPLAY_TIME)\n }\n }\n\n const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n if (event.target.files?.length) {\n processFile(event.target.files[0])\n }\n }\n\n const onDrop = (event: ReactDragEvent<HTMLDivElement>) => {\n preventEventDefaults(event)\n if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n processFile(event.dataTransfer.files[0])\n }\n }\n\n useEffect(() => {\n setIsImageLoaded(false)\n }, [imagePreviewUrl])\n\n const onDeleteButtonClick = showDeletePopover\n ? closeDeletePopover\n : openDeletePopover\n\n return (\n <div\n tabIndex={0}\n className={cx(\"cobalt-photo-dropzone\", className, {\n \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n \"cobalt-photo-dropzone--dragging\": isDragging,\n \"cobalt-photo-dropzone--loading\": isLoading,\n \"cobalt-photo-dropzone--errored\": isErrored,\n \"cobalt-photo-dropzone--imageVisible\": isImageLoaded,\n })}\n onMouseEnter={onDropzoneMouseEnter}\n onMouseLeave={onDropzoneMouseLeave}\n onDragEnter={onDragEnter}\n onDragLeave={onDragLeave}\n // Not on click because we also use mouseEnter listener\n onMouseUp={onDropzoneClick}\n onTouchEnd={onDropzoneClick}\n onKeyUp={onDropzoneKey}\n onDrop={onDrop}\n // Need to reset those listeners to avoid default browser behaviour\n onDragStart={preventEventDefaults}\n onDragEnd={preventEventDefaults}\n onDragOver={preventEventDefaults}\n >\n {isErrored && (\n <div className=\"cobalt-photo-dropzone__description\">\n <ContextualWarningCircleFilledIcon color=\"error\" />\n {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n </div>\n )}\n {isLoading && (\n <div className=\"cobalt-photo-dropzone__description\">\n <LoadingIcon />\n </div>\n )}\n {!isLoading &&\n !isErrored &&\n (imagePreviewUrl ? (\n <>\n <img\n className=\"cobalt-photo-dropzone__preview\"\n src={imagePreviewUrl}\n onLoad={() => {\n setIsImageLoaded(true)\n }}\n />\n <div>\n <button\n className={cx(\"cobalt-photo-dropzone__delete-button\", {\n \"cobalt-photo-dropzone__delete-button--triggered\":\n displayDeletion,\n })}\n ref={deleteButtonRef}\n // Must follow the click listeners on the dropzone,\n // in order to have the correct events bubbling\n onTouchEnd={onDeleteButtonClick}\n onMouseUp={onDeleteButtonClick}\n onKeyUp={onDeleteKey}\n >\n <BinIcon color=\"onSurface\" />\n </button>\n {deleteContentMode === \"modal\" && (\n <Modal\n isOpen={showDeletePopover}\n aria-label=\"delete\"\n bodySpacing={false}\n >\n {deleteContent(onDelete, closeDeletePopover)}\n </Modal>\n )}\n\n {deleteContentMode === \"popover\" && (\n <Popover\n targetRef={deleteButtonRef}\n isOpen={showDeletePopover}\n close={closeDeletePopover}\n placement=\"left-start\"\n distance={12}\n bodySpacing={false}\n arrow\n >\n {deleteContent(onDelete, closeDeletePopover)}\n </Popover>\n )}\n </div>\n </>\n ) : (\n <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n {description && <div>{description}</div>}\n <PlusIcon />\n </div>\n ))}\n <input\n ref={fileInputRef}\n className=\"cobalt-photo-dropzone__hidden-input\"\n type=\"file\"\n onChange={onFileInputChanged}\n accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n multiple={false}\n />\n </div>\n )\n}\n\nexport default PhotoDropzone\n"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,MAAM,oBAAoB,GAAG,EAAE,CAAA;AAC/B,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAA;AAC/B,MAAM,4BAA4B,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAarE,MAAM,oBAAoB,GAAG,CAC3B,CAA0E,KACxE;AACF,IAAA,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,cAAc,EAAE,CAAA;AACtC,IAAA,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;AAC1C,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,KAAyB,KAClD,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAA;AAEtC,MAAA,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,iBAAiB,GAAG,SAAS,EAC7B,eAAe,GAAG,EAAE,GACG,KAAI;AAC3B,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAA;AACpC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;AACnD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IACvE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEzD,IAAA,MAAM,iBAAiB,GAAG,CACxB,KAA8D,KAC5D;AACF,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAC5B,KAAC,CAAA;AACD,IAAA,MAAM,kBAAkB,GAAG,CAAC,KAAyC,KAAI;AACvE,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAAuB,KAAI;AACvD,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;AACpC,QAAA,IAAI,eAAe;YAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/C,KAAC,CAAA;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAAuB,KAAI;AACvD,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,IAAI,eAAe,IAAI,CAAC,iBAAiB;YAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;AACtE,KAAC,CAAA;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAyC,KAAI;;QACpE,IAAI,QAAQ,IAAI,iBAAiB;YAAE,OAAM;AACzC,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;AACpC,QAAA,IAAI,SAAS;YAAE,OAAM;AACrB,QAAA,IAAI,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;QAClC,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,iBAAiB;AAAE,gBAAA,kBAAkB,EAAE,CAAA;AAC3C,YAAA,OAAO,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;SAC5C;AACD,QAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAA;AAC/B,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;AAClD,QAAA,IAAI,iBAAiB;YAAE,OAAM;AAC7B,QAAA,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;AAC5B,YAAA,eAAe,EAAE,CAAA;SAClB;AACH,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAyB,KAAI;AAChD,QAAA,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;YAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAA;SACzB;AACH,KAAC,CAAA;IAED,MAAM,QAAQ,GAAG,MAAK;QACpB,IAAI,YAAY,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;AACzD,QAAA,kBAAkB,EAAE,CAAA;QACpB,kBAAkB,CAAC,EAAE,CAAC,CAAA;QACtB,aAAa,IAAI,aAAa,EAAE,CAAA;AAClC,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAqB,KAAI;QAC5C,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC3B,QAAA,IAAI,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;AAClC,QAAA,CAAC,eAAe,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;AACzC,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAqB,KAAI;QAC5C,oBAAoB,CAAC,KAAK,CAAC,CAAA;QAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;AACtB,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,aAAmB,KAAI;QAChD,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,IAAI,CAAC,CAAA;AAElB,QAAA,MAAM,WAAW,GAAG,MAAM,YAAY,CACpC,aAAa,EACb,CAAC,cAAc,EAAE,SAAS,KAAI;AAC5B,YAAA,MAAM,WAAW,GAAG,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAA;YACtD,MAAM,iBAAiB,GAAG,qBAAqB,CAAA;AAE/C,YAAA,IAAI,cAAc,CAAC,IAAI,GAAG,WAAW,EAAE;AACrC,gBAAA,OAAO,KAAK,CAAA;aACb;iBAAM,IAAI,CAAC,SAAS,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAC/D,gBAAA,OAAO,KAAK,CAAA;aACb;iBAAM;AACL,gBAAA,OAAO,IAAI,CAAA;aACZ;AACH,SAAC,CACF,CAAA;QAED,IAAI,WAAW,EAAE;YACf,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;YACnD,kBAAkB,CAAC,QAAQ,CAAC,CAAA;AAC5B,YAAA,MAAM,SAAS,CAAC,aAAa,CAAC,CAAA;YAC9B,YAAY,CAAC,KAAK,CAAC,CAAA;SACpB;aAAM;YACL,YAAY,CAAC,KAAK,CAAC,CAAA;YACnB,YAAY,CAAC,IAAI,CAAC,CAAA;YAClB,UAAU,CAAC,MAAK;gBACd,YAAY,CAAC,KAAK,CAAC,CAAA;aACpB,EAAE,kBAAkB,CAAC,CAAA;SACvB;AACH,KAAC,CAAA;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,KAAyC,KAAI;;QACvE,IAAI,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,EAAE;YAC9B,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SACnC;AACH,KAAC,CAAA;AAED,IAAA,MAAM,MAAM,GAAG,CAAC,KAAqC,KAAI;;QACvD,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC3B,QAAA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,KAAI,CAAC,eAAe,EAAE;YACzD,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SACzC;AACH,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACb,gBAAgB,CAAC,KAAK,CAAC,CAAA;AACzB,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,MAAM,mBAAmB,GAAG,iBAAiB;AAC3C,UAAE,kBAAkB;UAClB,iBAAiB,CAAA;AAErB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,+BAA+B,EAAE,eAAe;AAChD,YAAA,iCAAiC,EAAE,UAAU;AAC7C,YAAA,gCAAgC,EAAE,SAAS;AAC3C,YAAA,gCAAgC,EAAE,SAAS;AAC3C,YAAA,qCAAqC,EAAE,aAAa;AACrD,SAAA,CAAC,EACF,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,oBAAoB,EAClC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW;;AAExB,QAAA,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,MAAM;;QAEd,WAAW,EAAE,oBAAoB,EACjC,SAAS,EAAE,oBAAoB,EAC/B,UAAU,EAAE,oBAAoB,EAAA;AAE/B,QAAA,SAAS,KACR,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,YAAA,KAAA,CAAA,aAAA,CAAC,iCAAiC,EAAA,EAAC,KAAK,EAAC,OAAO,EAAG,CAAA;AAClD,YAAA,YAAY,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,CAC7D,CACP;AACA,QAAA,SAAS,KACR,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;YACjD,KAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA,CACX,CACP;AACA,QAAA,CAAC,SAAS;AACT,YAAA,CAAC,SAAS;AACV,aAAC,eAAe,IACd,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,eAAe,EACpB,MAAM,EAAE,MAAK;wBACX,gBAAgB,CAAC,IAAI,CAAC,CAAA;AACxB,qBAAC,EACD,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE;AACpD,4BAAA,iDAAiD,EAC/C,eAAe;yBAClB,CAAC,EACF,GAAG,EAAE,eAAe;;;wBAGpB,UAAU,EAAE,mBAAmB,EAC/B,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,WAAW,EAAA;AAEpB,wBAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,WAAW,GAAG,CACtB;oBACR,iBAAiB,KAAK,OAAO,KAC5B,KAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,MAAM,EAAE,iBAAiB,EACd,YAAA,EAAA,QAAQ,EACnB,WAAW,EAAE,KAAK,EAAA,EAEjB,aAAa,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CACtC,CACT;oBAEA,iBAAiB,KAAK,SAAS,KAC9B,oBAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,EAC1B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,KAAK,EAClB,KAAK,UAEJ,aAAa,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CACpC,CACX,CACG,CACL,KAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+EAA+E,EAAA;gBAC3F,WAAW,IAAI,KAAM,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,WAAW,CAAO;AACxC,gBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG,CACR,CACP,CAAC;AACJ,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,kBAAkB,EAC5B,MAAM,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,IAAI,GAAG,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/D,QAAQ,EAAE,KAAK,EACf,CAAA,CACE,EACP;AACH;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport {\n type ChangeEvent as ReactChangeEvent,\n type DragEvent as ReactDragEvent,\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n type TouchEvent as ReactTouchEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport {\n BinIcon,\n ContextualWarningCircleFilledIcon,\n LoadingIcon,\n PlusIcon,\n} from \"../Icon\"\nimport Modal from \"../Modal\"\nimport Popover from \"../Popover\"\nimport { validateFile } from \"../utils/validateFile\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n className?: string\n description?: string\n deleteContent: (onDelete: () => void, close: () => void) => ReactNode\n deleteContentMode?: \"popover\" \| \"modal\"\n errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n onDropped: (file: File) => Promise<void> \| void\n onPhotoDelete?: () => void\n initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n e: ReactDragEvent \| ReactMouseEvent \| ReactKeyboardEvent \| ReactTouchEvent,\n) => {\n e.preventDefault?.()\n e.stopPropagation?.()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n event.key === \"Enter\" \|\| event.key === \" \"\n\nconst PhotoDropzone = ({\n className,\n description,\n deleteContent,\n errorContent,\n onDropped,\n onPhotoDelete,\n deleteContentMode = \"popover\",\n initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n const { isMobile } = useBreakpoint()\n const fileInputRef = useRef<HTMLInputElement>(null)\n const deleteButtonRef = useRef<HTMLButtonElement>(null)\n const [isDragging, setIsDragging] = useState(false)\n const [isLoading, setIsLoading] = useState(false)\n const [isErrored, setIsErrored] = useState(false)\n const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n const [displayDeletion, setDisplayDeletion] = useState(false)\n const [showDeletePopover, setShowDeletePopover] = useState(false)\n const [isImageLoaded, setIsImageLoaded] = useState(false)\n\n const openDeletePopover = (\n event?: ReactMouseEvent \| ReactKeyboardEvent \| ReactTouchEvent,\n ) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(true)\n }\n const closeDeletePopover = (event?: ReactMouseEvent \| ReactTouchEvent) => {\n event && preventEventDefaults(event)\n setShowDeletePopover(false)\n }\n\n const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (imagePreviewUrl) setDisplayDeletion(true)\n }\n\n const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n event && preventEventDefaults(event)\n if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n }\n\n const onDropzoneClick = (event?: ReactMouseEvent \| ReactTouchEvent) => {\n if (isMobile && showDeletePopover) return\n event && preventEventDefaults(event)\n if (isLoading) return\n if (isErrored) setIsErrored(false)\n if (imagePreviewUrl) {\n if (showDeletePopover) closeDeletePopover()\n return setDisplayDeletion(!displayDeletion)\n }\n fileInputRef.current?.click()\n }\n\n const onDropzoneKey = (event: ReactKeyboardEvent) => {\n if (showDeletePopover) return\n if (isEnterOrSpaceKey(event)) {\n onDropzoneClick()\n }\n }\n\n const onDeleteKey = (event: ReactKeyboardEvent) => {\n if (isEnterOrSpaceKey(event)) {\n openDeletePopover(event)\n }\n }\n\n const onDelete = () => {\n if (fileInputRef.current) fileInputRef.current.value = \"\"\n closeDeletePopover()\n setImagePreviewUrl(\"\")\n onPhotoDelete?.()\n }\n\n const onDragEnter = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n if (isErrored) setIsErrored(false)\n !imagePreviewUrl && setIsDragging(true)\n }\n\n const onDragLeave = (event: ReactDragEvent) => {\n preventEventDefaults(event)\n setIsDragging(false)\n }\n\n const processFile = async (fileToProcess: File) => {\n setIsDragging(false)\n setIsErrored(false)\n setIsLoading(true)\n\n const isValidFile = await validateFile(\n fileToProcess,\n (fileToValidate, extension) => {\n const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n if (fileToValidate.size > maxFileSize) {\n return false\n } else if (!extension \|\| !acceptedFileTypes.includes(extension)) {\n return false\n } else {\n return true\n }\n },\n )\n\n if (isValidFile) {\n const imageSrc = URL.createObjectURL(fileToProcess)\n setImagePreviewUrl(imageSrc)\n await onDropped(fileToProcess)\n setIsLoading(false)\n } else {\n setIsLoading(false)\n setIsErrored(true)\n setTimeout(() => {\n setIsErrored(false)\n }, ERROR_DISPLAY_TIME)\n }\n }\n\n const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n if (event.target.files?.length) {\n processFile(event.target.files[0])\n }\n }\n\n const onDrop = (event: ReactDragEvent<HTMLLabelElement>) => {\n preventEventDefaults(event)\n if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n processFile(event.dataTransfer.files[0])\n }\n }\n\n useEffect(() => {\n if (imagePreviewUrl) setIsImageLoaded(false)\n }, [imagePreviewUrl])\n\n const onDeleteButtonClick = showDeletePopover\n ? closeDeletePopover\n : openDeletePopover\n\n return (\n <label\n className={cx(\"cobalt-photo-dropzone\", className, {\n \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n \"cobalt-photo-dropzone--dragging\": isDragging,\n \"cobalt-photo-dropzone--loading\": isLoading,\n \"cobalt-photo-dropzone--errored\": isErrored,\n \"cobalt-photo-dropzone--imageVisible\": isImageLoaded,\n })}\n onMouseEnter={onDropzoneMouseEnter}\n onMouseLeave={onDropzoneMouseLeave}\n onDragEnter={onDragEnter}\n onDragLeave={onDragLeave}\n // Not on click because we also use mouseEnter listener\n onMouseUp={onDropzoneClick}\n onTouchEnd={onDropzoneClick}\n onKeyUp={onDropzoneKey}\n onDrop={onDrop}\n // Need to reset those listeners to avoid default browser behaviour\n onDragStart={preventEventDefaults}\n onDragEnd={preventEventDefaults}\n onDragOver={preventEventDefaults}\n >\n {isErrored && (\n <div className=\"cobalt-photo-dropzone__description\">\n <ContextualWarningCircleFilledIcon color=\"error\" />\n {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n </div>\n )}\n {isLoading && (\n <div className=\"cobalt-photo-dropzone__description\">\n <LoadingIcon />\n </div>\n )}\n {!isLoading &&\n !isErrored &&\n (imagePreviewUrl ? (\n <>\n <img\n className=\"cobalt-photo-dropzone__preview\"\n src={imagePreviewUrl}\n alt=\"Uploaded preview\"\n onLoad={() => {\n setIsImageLoaded(true)\n }}\n />\n <div>\n <button\n type=\"button\"\n className={cx(\"cobalt-photo-dropzone__delete-button\", {\n \"cobalt-photo-dropzone__delete-button--triggered\":\n displayDeletion,\n })}\n ref={deleteButtonRef}\n // Must follow the click listeners on the dropzone,\n // in order to have the correct events bubbling\n onTouchEnd={onDeleteButtonClick}\n onMouseUp={onDeleteButtonClick}\n onKeyUp={onDeleteKey}\n >\n <BinIcon color=\"onSurface\" />\n </button>\n {deleteContentMode === \"modal\" && (\n <Modal\n isOpen={showDeletePopover}\n aria-label=\"delete\"\n bodySpacing={false}\n >\n {deleteContent(onDelete, closeDeletePopover)}\n </Modal>\n )}\n\n {deleteContentMode === \"popover\" && (\n <Popover\n targetRef={deleteButtonRef}\n isOpen={showDeletePopover}\n close={closeDeletePopover}\n placement=\"left-start\"\n distance={12}\n bodySpacing={false}\n arrow\n >\n {deleteContent(onDelete, closeDeletePopover)}\n </Popover>\n )}\n </div>\n </>\n ) : (\n <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n {description && <div>{description}</div>}\n <PlusIcon />\n </div>\n ))}\n <input\n ref={fileInputRef}\n className=\"cobalt-photo-dropzone__hidden-input\"\n type=\"file\"\n onChange={onFileInputChanged}\n accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n multiple={false}\n />\n </label>\n )\n}\n\nexport default PhotoDropzone\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}