@drivy/cobalt 1.3.1 → 1.3.3

package/components/PhotoDropzone/index.js

@@ -1,9 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 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 BinIcon from '../Icon/__generated__/BinIcon.js';
 import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
@@ -19,6 +20,7 @@ const preventEventDefaults = (e) => {
 };
 const isEnterOrSpaceKey = (event) => event.key === "Enter" || event.key === " ";
 const PhotoDropzone = ({ className, description, deleteContent, errorContent, onDropped, onPhotoDelete, deleteContentMode = "popover", initialImageUrl = "", }) => {
+    const { isMobile } = useBreakpoint();
     const fileInputRef = useRef(null);
     const deleteButtonRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -27,6 +29,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
     const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl);
     const [displayDeletion, setDisplayDeletion] = useState(false);
     const [showDeletePopover, setShowDeletePopover] = useState(false);
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
     const openDeletePopover = (event) => {
         event && preventEventDefaults(event);
         setShowDeletePopover(true);
@@ -47,6 +50,8 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
     };
     const onDropzoneClick = (event) => {
         var _a;
+        if (isMobile && showDeletePopover)
+            return;
         event && preventEventDefaults(event);
         if (isLoading)
             return;
@@ -132,6 +137,9 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
             processFile(event.dataTransfer.files[0]);
         }
     };
+    useEffect(() => {
+        setIsImageLoaded(false);
+    }, [imagePreviewUrl]);
     const onDeleteButtonClick = showDeletePopover
         ? closeDeletePopover
         : openDeletePopover;
@@ -140,6 +148,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
             "cobalt-photo-dropzone--dragging": isDragging,
             "cobalt-photo-dropzone--loading": isLoading,
             "cobalt-photo-dropzone--errored": isErrored,
+            "cobalt-photo-dropzone--imageVisible": isImageLoaded,
         }), onMouseEnter: onDropzoneMouseEnter, onMouseLeave: onDropzoneMouseLeave, onDragEnter: onDragEnter, onDragLeave: onDragLeave, 
         // Not on click because we also use mouseEnter listener
         onMouseUp: onDropzoneClick, onTouchEnd: onDropzoneClick, onKeyUp: onDropzoneKey, onDrop: onDrop, 
@@ -153,7 +162,9 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         !isLoading &&
             !isErrored &&
             (imagePreviewUrl ? (React.createElement(React.Fragment, null,
-                React.createElement("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl }),
+                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,

package/components/PhotoDropzone/index.js.map

@@ -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} 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\"\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 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\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    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  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      })}\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=\"red\" />\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            />\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=\"indigo\" />\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":"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"}
+{"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=\"red\" />\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=\"indigo\" />\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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -60,8 +60,8 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
     "@types/node": "22.14.1",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
     "autoprefixer": "10.4.21",
     "core-js": "3.41.0",
     "css-loader": "7.1.2",

package/styles/components/Alerter/index.scss

@@ -1,11 +1,4 @@
 .cobalt- {
-  &alerter {
-    // Force alerts to display bottom-end when larger than mobile
-    @include breakpoint($from: "md") {
-      align-items: flex-end !important;
-    }
-  }
-
   &alert {
     @apply c-text-body-md c-p-sm c-mx-sm c-mb-sm c-shadow-md c-rounded-md;
     z-index: var(--z-index);

package/styles/components/PhotoDropzone/index.scss

@@ -23,7 +23,9 @@
   border-color: transparent;
 }
 
-.cobalt-photo-dropzone--filled:not(.cobalt-photo-dropzone--loading) {
+.cobalt-photo-dropzone--filled:not(.cobalt-photo-dropzone--loading):not(
+    .cobalt-photo-dropzone--imageVisible
+  ) {
   background: linear-gradient(
     90deg,
     theme("semanticBackgroundColor.neutral") 20px,

package/styles/components/Popover/index.scss

@@ -15,25 +15,19 @@
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: var(--theme-semanticBackgroundColor-secondary) !important;
+    border-top-color: theme("semanticBackgroundColor.secondary") !important;
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: var(
-      --theme-semanticBackgroundColor-secondary
-    ) !important;
+    border-bottom-color: theme("semanticBackgroundColor.secondary") !important;
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: var(
-      --theme-semanticBackgroundColor-secondary
-    ) !important;
+    border-left-color: theme("semanticBackgroundColor.secondary") !important;
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: var(
-      --theme-semanticBackgroundColor-secondary
-    ) !important;
+    border-right-color: theme("semanticBackgroundColor.secondary") !important;
   }
 }
 
@@ -59,13 +53,13 @@
 
 .use-cobalt-dark-theme {
   [data-theme~="cobalt-popover"] {
-    box-shadow: 0 0 0 1px var(--theme-semanticBorderColor-base);
+    box-shadow: 0 0 0 1px theme("semanticBorderColor.base");
 
     &[data-placement^="top"] > .tippy-arrow {
       bottom: -1px;
 
       &::before {
-        border-top-color: var(--theme-semanticBorderColor-base) !important;
+        border-top-color: theme("semanticBorderColor.base") !important;
       }
     }
 
@@ -73,7 +67,7 @@
       top: -1px;
 
       &::before {
-        border-bottom-color: var(--theme-semanticBorderColor-base) !important;
+        border-bottom-color: theme("semanticBorderColor.base") !important;
       }
     }
 
@@ -81,7 +75,7 @@
       right: -1px;
 
       &::before {
-        border-left-color: var(--theme-semanticBorderColor-base) !important;
+        border-left-color: theme("semanticBorderColor.base") !important;
       }
     }
 
@@ -89,7 +83,7 @@
       left: -1px;
 
       &::before {
-        border-right-color: var(--theme-semanticBorderColor-base) !important;
+        border-right-color: theme("semanticBorderColor.base") !important;
       }
     }
   }

package/styles/components/ProgressCircular/index.scss

@@ -1,7 +1,7 @@
 .cobalt-circularProgressBar {
   --content-size: 64px;
   --total-size: calc((var(--content-size) / 4) + var(--content-size));
-  --progress-color: var(--theme-semanticFillColor-base);
+  --progress-color: theme("semanticFillColor.base");
 
   position: relative;
 
@@ -72,14 +72,14 @@
   }
 
   &--info {
-    --progress-color: var(--theme-semanticFillColor-secondary);
+    --progress-color: theme("semanticFillColor.secondary");
   }
 
   &--error {
-    --progress-color: var(--theme-semanticFillColor-error);
+    --progress-color: theme("semanticFillColor.error");
   }
 
   &--success {
-    --progress-color: var(--theme-semanticFillColor-success);
+    --progress-color: theme("semanticFillColor.success");
   }
 }

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}