@drivy/cobalt 2.19.1 → 2.24.0

package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js

@@ -1,14 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { format } from 'date-fns';
-import React from 'react';
-import DayTooltip from './DayTooltip.js';
+import React, { useRef, useState } from 'react';
+import Popover from '../../Popover/index.js';
+import { tooltipConfig } from '../../Popover/tooltipConfig.js';
 
 function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelected, isDisabled, isInvalid, isRange, isActive, hasNotification, tooltipMessage, onSelect, onMouseEnter, onMouseLeave, hoverTooltipMessage, }) {
+    const dayRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
     const handleSelectDate = () => {
         !isDisabled && !isInvalid && onSelect(new Date(date));
     };
-    const jsx$1 = (jsxs("button", { className: cx("cobalt-CalendarRangePicker__day", {
+    const jsx$1 = (jsxs("button", { ref: dayRef, className: cx("cobalt-CalendarRangePicker__day", {
             "cobalt-CalendarRangePicker__day--today": isToday,
             "cobalt-CalendarRangePicker__day--startDay": isStartDay,
             "cobalt-CalendarRangePicker__day--endDay": isEndDay,
@@ -19,12 +22,16 @@ function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelecte
             "cobalt-CalendarRangePicker__day--disabled": isDisabled,
         }), onMouseEnter: () => {
             onMouseEnter(date, !!isDisabled);
+            setIsHovered(true);
         }, onMouseLeave: () => {
             onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(date);
+            setIsHovered(false);
         }, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd"), type: "button", children: [date.getDate(), hasNotification && (jsx("div", { className: "cobalt-CalendarRangePicker__day-notification-container", children: jsx("div", { className: "cobalt-CalendarRangePicker__day-notification" }) }))] }));
-    if (tooltipMessage)
-        return (jsx(DayTooltip, { visible: true, content: jsx("div", { className: "c-text-body-xs", children: tooltipMessage }), placement: isStartDay ? "top" : "bottom", children: jsx$1 }));
-    return hoverTooltipMessage ? (jsx(DayTooltip, { trigger: "mouseenter", content: jsx("div", { className: "c-text-body-xs", children: hoverTooltipMessage }), placement: "top", interactive: false, children: jsx$1 })) : (jsx$1);
+    const message = tooltipMessage !== null && tooltipMessage !== void 0 ? tooltipMessage : hoverTooltipMessage;
+    if (!message)
+        return jsx$1;
+    const isControlled = !!tooltipMessage;
+    return (jsxs(Fragment, { children: [jsx$1, jsx(Popover, { ...tooltipConfig, targetRef: dayRef, isOpen: isControlled || isHovered, onOpenChange: isControlled ? undefined : setIsHovered, placement: isControlled && !isStartDay ? "bottom" : "top", responsive: false, children: jsx("div", { className: "c-text-body-xs", children: message }) })] }));
 }
 function areEqual(prevProps, nextProps) {
     return (prevProps.isSelected === nextProps.isSelected &&

package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarRangePickerDay.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport { format } from \"date-fns\"\nimport React from \"react\"\nimport DayTooltip from \"./DayTooltip\"\n\ntype CalendarRangePickerDayPropsType = {\n  date: Date\n  isEditingStartDate: boolean\n  isEditingEndDate: boolean\n  isToday?: boolean\n  isStartDay?: boolean\n  isEndDay?: boolean\n  isSelected?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRange?: boolean\n  isActive?: boolean\n  hasNotification?: boolean\n  tooltipMessage?: string\n  hoverTooltipMessage?: string\n  onSelect: (date: Date) => void\n  onMouseEnter: (date: Date, disabled: boolean) => void\n  onMouseLeave?: (date: Date) => void\n}\n\nfunction CalendarRangePickerDay({\n  date,\n  isToday,\n  isStartDay,\n  isEndDay,\n  isSelected,\n  isDisabled,\n  isInvalid,\n  isRange,\n  isActive,\n  hasNotification,\n  tooltipMessage,\n  onSelect,\n  onMouseEnter,\n  onMouseLeave,\n  hoverTooltipMessage,\n}: CalendarRangePickerDayPropsType) {\n  const handleSelectDate = () => {\n    !isDisabled && !isInvalid && onSelect(new Date(date))\n  }\n\n  const jsx = (\n    <button\n      className={classNames(\"cobalt-CalendarRangePicker__day\", {\n        \"cobalt-CalendarRangePicker__day--today\": isToday,\n        \"cobalt-CalendarRangePicker__day--startDay\": isStartDay,\n        \"cobalt-CalendarRangePicker__day--endDay\": isEndDay,\n        \"cobalt-CalendarRangePicker__day--range\": isRange,\n        \"cobalt-CalendarRangePicker__day--selected\": isSelected,\n        \"cobalt-CalendarRangePicker__day--active\": isActive,\n        \"cobalt-CalendarRangePicker__day--invalid\": isInvalid,\n        \"cobalt-CalendarRangePicker__day--disabled\": isDisabled,\n      })}\n      onMouseEnter={() => {\n        onMouseEnter(date, !!isDisabled)\n      }}\n      onMouseLeave={() => {\n        onMouseLeave?.(date)\n      }}\n      onClick={handleSelectDate}\n      data-day={format(date, \"yyyy-MM-dd\")}\n      type=\"button\"\n    >\n      {date.getDate()}\n      {hasNotification && (\n        <div className=\"cobalt-CalendarRangePicker__day-notification-container\">\n          <div className=\"cobalt-CalendarRangePicker__day-notification\"></div>\n        </div>\n      )}\n    </button>\n  )\n\n  if (tooltipMessage)\n    return (\n      <DayTooltip\n        visible={true}\n        content={<div className=\"c-text-body-xs\">{tooltipMessage}</div>}\n        placement={isStartDay ? \"top\" : \"bottom\"}\n      >\n        {jsx}\n      </DayTooltip>\n    )\n\n  return hoverTooltipMessage ? (\n    <DayTooltip\n      trigger=\"mouseenter\"\n      content={<div className=\"c-text-body-xs\">{hoverTooltipMessage}</div>}\n      placement=\"top\"\n      interactive={false}\n    >\n      {jsx}\n    </DayTooltip>\n  ) : (\n    jsx\n  )\n}\n\nfunction areEqual(\n  prevProps: CalendarRangePickerDayPropsType,\n  nextProps: CalendarRangePickerDayPropsType,\n) {\n  return (\n    prevProps.isSelected === nextProps.isSelected &&\n    prevProps.isActive === nextProps.isActive &&\n    prevProps.isStartDay === nextProps.isStartDay &&\n    prevProps.isEndDay === nextProps.isEndDay &&\n    prevProps.isInvalid === nextProps.isInvalid &&\n    prevProps.isRange === nextProps.isRange &&\n    prevProps.hasNotification === nextProps.hasNotification &&\n    prevProps.isDisabled === nextProps.isDisabled &&\n    prevProps.isEditingStartDate === nextProps.isEditingStartDate &&\n    prevProps.isEditingEndDate === nextProps.isEditingEndDate\n  )\n}\n\nconst MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual)\nMemoizedComponent.displayName = \"CalendarRangePickerDay\"\n\nexport { MemoizedComponent as CalendarRangePickerDay }\n"],"names":["jsx","_jsxs","classNames","_jsx"],"mappings":"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"}
+{"version":3,"file":"CalendarRangePickerDay.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport { format } from \"date-fns\"\nimport React, { useRef, useState } from \"react\"\nimport Popover from \"../../Popover\"\nimport { tooltipConfig } from \"../../Popover/tooltipConfig\"\n\ntype CalendarRangePickerDayPropsType = {\n  date: Date\n  isEditingStartDate: boolean\n  isEditingEndDate: boolean\n  isToday?: boolean\n  isStartDay?: boolean\n  isEndDay?: boolean\n  isSelected?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRange?: boolean\n  isActive?: boolean\n  hasNotification?: boolean\n  tooltipMessage?: string\n  hoverTooltipMessage?: string\n  onSelect: (date: Date) => void\n  onMouseEnter: (date: Date, disabled: boolean) => void\n  onMouseLeave?: (date: Date) => void\n}\n\nfunction CalendarRangePickerDay({\n  date,\n  isToday,\n  isStartDay,\n  isEndDay,\n  isSelected,\n  isDisabled,\n  isInvalid,\n  isRange,\n  isActive,\n  hasNotification,\n  tooltipMessage,\n  onSelect,\n  onMouseEnter,\n  onMouseLeave,\n  hoverTooltipMessage,\n}: CalendarRangePickerDayPropsType) {\n  const dayRef = useRef<HTMLButtonElement>(null)\n  const [isHovered, setIsHovered] = useState(false)\n\n  const handleSelectDate = () => {\n    !isDisabled && !isInvalid && onSelect(new Date(date))\n  }\n\n  const jsx = (\n    <button\n      ref={dayRef}\n      className={classNames(\"cobalt-CalendarRangePicker__day\", {\n        \"cobalt-CalendarRangePicker__day--today\": isToday,\n        \"cobalt-CalendarRangePicker__day--startDay\": isStartDay,\n        \"cobalt-CalendarRangePicker__day--endDay\": isEndDay,\n        \"cobalt-CalendarRangePicker__day--range\": isRange,\n        \"cobalt-CalendarRangePicker__day--selected\": isSelected,\n        \"cobalt-CalendarRangePicker__day--active\": isActive,\n        \"cobalt-CalendarRangePicker__day--invalid\": isInvalid,\n        \"cobalt-CalendarRangePicker__day--disabled\": isDisabled,\n      })}\n      onMouseEnter={() => {\n        onMouseEnter(date, !!isDisabled)\n        setIsHovered(true)\n      }}\n      onMouseLeave={() => {\n        onMouseLeave?.(date)\n        setIsHovered(false)\n      }}\n      onClick={handleSelectDate}\n      data-day={format(date, \"yyyy-MM-dd\")}\n      type=\"button\"\n    >\n      {date.getDate()}\n      {hasNotification && (\n        <div className=\"cobalt-CalendarRangePicker__day-notification-container\">\n          <div className=\"cobalt-CalendarRangePicker__day-notification\"></div>\n        </div>\n      )}\n    </button>\n  )\n\n  const message = tooltipMessage ?? hoverTooltipMessage\n\n  if (!message) return jsx\n\n  const isControlled = !!tooltipMessage\n\n  return (\n    <>\n      {jsx}\n      <Popover\n        {...tooltipConfig}\n        targetRef={dayRef}\n        isOpen={isControlled || isHovered}\n        onOpenChange={isControlled ? undefined : setIsHovered}\n        placement={isControlled && !isStartDay ? \"bottom\" : \"top\"}\n        responsive={false}\n      >\n        <div className=\"c-text-body-xs\">{message}</div>\n      </Popover>\n    </>\n  )\n}\n\nfunction areEqual(\n  prevProps: CalendarRangePickerDayPropsType,\n  nextProps: CalendarRangePickerDayPropsType,\n) {\n  return (\n    prevProps.isSelected === nextProps.isSelected &&\n    prevProps.isActive === nextProps.isActive &&\n    prevProps.isStartDay === nextProps.isStartDay &&\n    prevProps.isEndDay === nextProps.isEndDay &&\n    prevProps.isInvalid === nextProps.isInvalid &&\n    prevProps.isRange === nextProps.isRange &&\n    prevProps.hasNotification === nextProps.hasNotification &&\n    prevProps.isDisabled === nextProps.isDisabled &&\n    prevProps.isEditingStartDate === nextProps.isEditingStartDate &&\n    prevProps.isEditingEndDate === nextProps.isEditingEndDate\n  )\n}\n\nconst MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual)\nMemoizedComponent.displayName = \"CalendarRangePickerDay\"\n\nexport { MemoizedComponent as CalendarRangePickerDay }\n"],"names":["jsx","_jsxs","classNames","_jsx","_Fragment"],"mappings":"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"}

package/components/PhotoDropzone/index.js

@@ -160,7 +160,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
                                 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, onClick: 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, 
+                                    }), ref: deleteButtonRef, onClick: 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, onOpenChange: setShowDeletePopover, placement: "left-start", offset: [0, 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, 
                 // Prevent the bubbled click from re-entering the label's onClick,
                 // which would cancel the file dialog via preventDefault.
                 onClick: (event) => event.stopPropagation(), accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })] }));

package/components/PhotoDropzone/index.js.map

@@ -1 +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    event && preventEventDefaults(event)\n    if (isMobile && showDeletePopover) return\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      onClick={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                onClick={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        // Prevent the bubbled click from re-entering the label's onClick,\n        // which would cancel the file dialog via preventDefault.\n        onClick={(event) => event.stopPropagation()}\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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"}
+{"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    event && preventEventDefaults(event)\n    if (isMobile && showDeletePopover) return\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      onClick={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                onClick={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                  onOpenChange={setShowDeletePopover}\n                  placement=\"left-start\"\n                  offset={[0, 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        // Prevent the bubbled click from re-entering the label's onClick,\n        // which would cancel the file dialog via preventDefault.\n        onClick={(event) => event.stopPropagation()}\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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"}

package/components/Popover/DesktopPopover.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { registerPopover } from './popoverRegistry.js';
+import { useDesktopPopoverCore } from './useDesktopPopoverCore.js';
+
+const DesktopPopover = ({ targetRef, children, isOpen, onOpenChange, ...rest }) => {
+    const referenceElement = targetRef && "current" in targetRef ? targetRef.current : targetRef;
+    useEffect(() => {
+        if (!onOpenChange)
+            return;
+        return registerPopover(() => {
+            onOpenChange(false);
+        });
+    }, [onOpenChange]);
+    const { refs, getReferenceProps, renderFloating } = useDesktopPopoverCore({
+        isOpen,
+        onOpenChange,
+        referenceElement,
+        ...rest,
+    });
+    if (typeof children === "function") {
+        return children({ refs, getReferenceProps, renderFloating });
+    }
+    return renderFloating(children);
+};
+
+export { DesktopPopover };
+//# sourceMappingURL=DesktopPopover.js.map

package/components/Popover/DesktopPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopPopover.js","sources":["../../../src/components/Popover/DesktopPopover.ts"],"sourcesContent":["import { useEffect } from \"react\"\nimport type { PopoverPropsType } from \".\"\nimport { registerPopover } from \"./popoverRegistry\"\nimport { useDesktopPopoverCore } from \"./useDesktopPopoverCore\"\n\nexport const DesktopPopover = ({\n  targetRef,\n  children,\n  isOpen,\n  onOpenChange,\n  ...rest\n}: PopoverPropsType) => {\n  const referenceElement =\n    targetRef && \"current\" in targetRef ? targetRef.current : targetRef\n\n  useEffect(() => {\n    if (!onOpenChange) return\n\n    return registerPopover(() => {\n      onOpenChange(false)\n    })\n  }, [onOpenChange])\n\n  const { refs, getReferenceProps, renderFloating } = useDesktopPopoverCore({\n    isOpen,\n    onOpenChange,\n    referenceElement,\n    ...rest,\n  })\n\n  if (typeof children === \"function\") {\n    return children({ refs, getReferenceProps, renderFloating })\n  }\n\n  return renderFloating(children)\n}\n"],"names":[],"mappings":";;;;AAKa,MAAA,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,GAAG,IAAI,EACU,KAAI;AACrB,IAAA,MAAM,gBAAgB,GACpB,SAAS,IAAI,SAAS,IAAI,SAAS,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAA;IAErE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,OAAO,eAAe,CAAC,MAAK;YAC1B,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,SAAC,CAAC,CAAA;AACJ,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,qBAAqB,CAAC;QACxE,MAAM;QACN,YAAY;QACZ,gBAAgB;AAChB,QAAA,GAAG,IAAI;AACR,KAAA,CAAC,CAAA;AAEF,IAAA,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;QAClC,OAAO,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAC,CAAA;KAC7D;AAED,IAAA,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAA;AACjC;;;;"}

package/components/Popover/PopoverWrapper.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState } from 'react';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Popover from './index.js';
+
+const mergeRefs = (node, originalRef, buttonRef, extraRef) => {
+    buttonRef.current = node;
+    extraRef === null || extraRef === void 0 ? void 0 : extraRef(node);
+    if (typeof originalRef === "function") {
+        originalRef(node);
+    }
+    else if (originalRef && typeof originalRef === "object") {
+        originalRef.current = node;
+    }
+};
+function PopoverWrapper({ content, children, trigger, onOpenChange, isOpenByDefault = false, disabled = false, responsive = true, ...popoverProps }) {
+    var _a;
+    const buttonRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(isOpenByDefault);
+    const { breakpoint } = useBreakpoint();
+    const isMobile = responsive && (breakpoint === "sm" || breakpoint === "xs");
+    const handleOpenChange = (open) => {
+        setIsOpen(open);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
+    };
+    if (disabled)
+        return children;
+    if (isMobile) {
+        const childProps = children.props;
+        return (jsxs(Fragment, { children: [React.cloneElement(children, {
+                    onClick: (event) => {
+                        var _a;
+                        (_a = childProps.onClick) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+                        handleOpenChange(true);
+                    },
+                    ref: (node) => mergeRefs(node, children.ref, buttonRef),
+                }), jsx(Popover, { ...popoverProps, responsive: true, isOpen: isOpen, onOpenChange: handleOpenChange, targetRef: buttonRef, children: content })] }));
+    }
+    return (jsx(Popover, { ...popoverProps, responsive: false, isOpen: isOpen, onOpenChange: handleOpenChange, targetRef: buttonRef, trigger: trigger, interactive: (_a = popoverProps.interactive) !== null && _a !== void 0 ? _a : trigger === "mouseenter", children: ({ refs, getReferenceProps, renderFloating }) => {
+            const referenceProps = getReferenceProps(children.props);
+            return (jsxs(Fragment, { children: [React.cloneElement(children, {
+                        ...referenceProps,
+                        ref: (node) => mergeRefs(node, children.ref, buttonRef, refs.setReference),
+                    }), renderFloating(content)] }));
+        } }));
+}
+
+export { PopoverWrapper };
+//# sourceMappingURL=PopoverWrapper.js.map

package/components/Popover/PopoverWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverWrapper.js","sources":["../../../src/components/Popover/PopoverWrapper.tsx"],"sourcesContent":["import React, { type ReactElement, type Ref, useRef, useState } from \"react\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Popover, { type PopoverPropsType } from \".\"\n\ntype RefableElement = ReactElement & {\n  ref?: Ref<HTMLElement>\n}\n\nexport type PopoverWrapperPropsType = Omit<\n  PopoverPropsType,\n  \"targetRef\" | \"children\" | \"isOpen\"\n> & {\n  content: React.ReactNode\n  disabled?: boolean\n  isOpenByDefault?: boolean\n  children: RefableElement\n}\n\nconst mergeRefs = (\n  node: HTMLElement | null,\n  originalRef: Ref<HTMLElement> | undefined,\n  buttonRef: React.MutableRefObject<HTMLElement | null>,\n  extraRef?: (node: HTMLElement | null) => void,\n) => {\n  buttonRef.current = node\n  extraRef?.(node)\n\n  if (typeof originalRef === \"function\") {\n    originalRef(node)\n  } else if (originalRef && typeof originalRef === \"object\") {\n    ;(originalRef as React.MutableRefObject<HTMLElement | null>).current = node\n  }\n}\n\nexport function PopoverWrapper({\n  content,\n  children,\n  trigger,\n  onOpenChange,\n  isOpenByDefault = false,\n  disabled = false,\n  responsive = true,\n  ...popoverProps\n}: PopoverWrapperPropsType) {\n  const buttonRef = useRef<HTMLElement | null>(null)\n  const [isOpen, setIsOpen] = useState(isOpenByDefault)\n  const { breakpoint } = useBreakpoint()\n  const isMobile = responsive && (breakpoint === \"sm\" || breakpoint === \"xs\")\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open)\n    onOpenChange?.(open)\n  }\n\n  if (disabled) return children\n\n  if (isMobile) {\n    const childProps = children.props as {\n      onClick?: (event: React.MouseEvent<HTMLElement>) => void\n    }\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          onClick: (event: React.MouseEvent<HTMLElement>) => {\n            childProps.onClick?.(event)\n            handleOpenChange(true)\n          },\n          ref: (node: HTMLElement | null) =>\n            mergeRefs(node, children.ref, buttonRef),\n        })}\n        <Popover\n          {...popoverProps}\n          responsive\n          isOpen={isOpen}\n          onOpenChange={handleOpenChange}\n          targetRef={buttonRef}\n        >\n          {content}\n        </Popover>\n      </>\n    )\n  }\n\n  return (\n    <Popover\n      {...popoverProps}\n      responsive={false}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      targetRef={buttonRef}\n      trigger={trigger}\n      interactive={popoverProps.interactive ?? trigger === \"mouseenter\"}\n    >\n      {({ refs, getReferenceProps, renderFloating }) => {\n        const referenceProps = getReferenceProps(children.props)\n\n        return (\n          <>\n            {React.cloneElement(children, {\n              ...referenceProps,\n              ref: (node: HTMLElement | null) =>\n                mergeRefs(node, children.ref, buttonRef, refs.setReference),\n            })}\n            {renderFloating(content)}\n          </>\n        )\n      }}\n    </Popover>\n  )\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAkBA,MAAM,SAAS,GAAG,CAChB,IAAwB,EACxB,WAAyC,EACzC,SAAqD,EACrD,QAA6C,KAC3C;AACF,IAAA,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;AACxB,IAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;AAEhB,IAAA,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE;QACrC,WAAW,CAAC,IAAI,CAAC,CAAA;KAClB;AAAM,SAAA,IAAI,WAAW,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AACvD,QAAA,WAA0D,CAAC,OAAO,GAAG,IAAI,CAAA;KAC5E;AACH,CAAC,CAAA;AAEK,SAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,GAAG,KAAK,EACvB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,IAAI,EACjB,GAAG,YAAY,EACS,EAAA;;AACxB,IAAA,MAAM,SAAS,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAA;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AACrD,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAA;AACtC,IAAA,MAAM,QAAQ,GAAG,UAAU,KAAK,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAC,CAAA;AAE3E,IAAA,MAAM,gBAAgB,GAAG,CAAC,IAAa,KAAI;QACzC,SAAS,CAAC,IAAI,CAAC,CAAA;AACf,QAAA,YAAY,aAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAG,IAAI,CAAC,CAAA;AACtB,KAAC,CAAA;AAED,IAAA,IAAI,QAAQ;AAAE,QAAA,OAAO,QAAQ,CAAA;IAE7B,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAE3B,CAAA;AAED,QAAA,QACEA,IACG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAC5B,oBAAA,OAAO,EAAE,CAAC,KAAoC,KAAI;;AAChD,wBAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,KAAK,CAAC,CAAA;wBAC3B,gBAAgB,CAAC,IAAI,CAAC,CAAA;qBACvB;AACD,oBAAA,GAAG,EAAE,CAAC,IAAwB,KAC5B,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC;iBAC3C,CAAC,EACFC,GAAC,CAAA,OAAO,EACF,EAAA,GAAA,YAAY,EAChB,UAAU,EAAA,IAAA,EACV,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAE,SAAS,YAEnB,OAAO,EAAA,CACA,CACT,EAAA,CAAA,EACJ;KACF;IAED,QACEA,IAAC,OAAO,EAAA,EAAA,GACF,YAAY,EAChB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,CAAA,EAAA,GAAA,YAAY,CAAC,WAAW,mCAAI,OAAO,KAAK,YAAY,EAEhE,QAAA,EAAA,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAI;YAC/C,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAExD,YAAA,QACEF,IACG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAC5B,wBAAA,GAAG,cAAc;AACjB,wBAAA,GAAG,EAAE,CAAC,IAAwB,KAC5B,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC;AAC9D,qBAAA,CAAC,EACD,cAAc,CAAC,OAAO,CAAC,CAAA,EAAA,CACvB,EACJ;SACF,EAAA,CACO,EACX;AACH;;;;"}

package/components/Popover/TooltipWrapper.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { PopoverWrapper } from './PopoverWrapper.js';
+import { tooltipConfig } from './tooltipConfig.js';
+
+function TooltipWrapper({ content, children, ...popoverProps }) {
+    return (jsx(PopoverWrapper, { ...tooltipConfig, ...popoverProps, content: content, responsive: false, children: children }));
+}
+
+export { TooltipWrapper };
+//# sourceMappingURL=TooltipWrapper.js.map

package/components/Popover/TooltipWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWrapper.js","sources":["../../../src/components/Popover/TooltipWrapper.tsx"],"sourcesContent":["import { PopoverWrapper, type PopoverWrapperPropsType } from \"./PopoverWrapper\"\nimport { tooltipConfig } from \"./tooltipConfig\"\n\nexport type TooltipWrapperPropsType = Omit<\n  PopoverWrapperPropsType,\n  \"responsive\"\n>\n\nexport function TooltipWrapper({\n  content,\n  children,\n  ...popoverProps\n}: TooltipWrapperPropsType) {\n  return (\n    <PopoverWrapper\n      {...tooltipConfig}\n      {...popoverProps}\n      content={content}\n      responsive={false}\n    >\n      {children}\n    </PopoverWrapper>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;AAQM,SAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,GAAG,YAAY,EACS,EAAA;AACxB,IAAA,QACEA,GAAC,CAAA,cAAc,OACT,aAAa,EAAA,GACb,YAAY,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,YAEhB,QAAQ,EAAA,CACM,EAClB;AACH;;;;"}

package/components/Popover/index.js

@@ -1,51 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import Tippy from '@tippyjs/react';
-import { useCallback, useEffect } from 'react';
-import { sticky } from 'tippy.js';
 import useBreakpoint from '../../hooks/useBreakpoint.js';
-import { zIndexes } from '../../tokens/index.js';
 import Modal from '../Modal/index.js';
-import LazyTippy from './LazyTippy.js';
+import { DesktopPopover } from './DesktopPopover.js';
 
-const ESC_KEY_CODE = 27;
-const defaultTippyProps = {
-    animation: "shift-away-subtle",
-    interactive: true,
-    interactiveBorder: 10,
-    delay: [0, 0],
-    duration: [200, 150],
-    maxWidth: 500,
-    sticky: true,
-    plugins: [sticky],
-    theme: "light cobalt-popover",
-    inertia: true,
-};
 const MobilePopover = ({ isOpen, children, ariaLabel = "Popover mobile modal", onDismiss, bodySpacing, onShow, onHidden, }) => {
     return (jsx(Modal, { "aria-label": ariaLabel, isOpen: isOpen, onDismissAttempt: onDismiss, bodySpacing: bodySpacing, onShow: onShow, onHidden: onHidden, children: children }));
 };
-const Popover = ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing = true, onShow, onHidden, 
-// Desktop props
-arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8, zIndex = zIndexes.dropdown, appendToBody = false, fitContent = false, lazy, }) => {
+const Popover = ({ arrow = false, placement = "bottom-start", bodySpacing = true, appendToBody = false, fitContent = false, responsive = true, ...restProps }) => {
     const { breakpoint } = useBreakpoint();
-    const isMobile = breakpoint === "sm" || breakpoint === "xs";
-    const escListener = useCallback((event) => {
-        if (event.keyCode === ESC_KEY_CODE && isOpen)
-            close();
-    }, [isOpen, close]);
-    useEffect(() => {
-        window.addEventListener("keydown", escListener);
-        return () => window.removeEventListener("keydown", escListener);
-    }, [escListener]);
-    const onTippyClose = () => {
-        if (onHidden)
-            onHidden();
-    };
-    const onTippyOpen = () => {
-        if (onShow)
-            onShow();
-    };
-    const TippyComp = lazy ? LazyTippy : Tippy;
-    return isMobile ? (jsx(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden, children: children })) : (jsx(TippyComp, { content: bodySpacing ? (jsx("div", { className: "cobalt-popover--bodySpacing", children: children })) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""} ${fitContent ? "cobalt-popover--fitContent" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close, appendTo: appendToBody ? document.body : "parent" }));
+    const isMobile = responsive && (breakpoint === "sm" || breakpoint === "xs");
+    const mobileChildren = typeof restProps.children === "function" ? null : restProps.children;
+    return isMobile ? (jsx(MobilePopover, { isOpen: restProps.isOpen, onDismiss: () => {
+            var _a;
+            (_a = restProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(restProps, false);
+        }, bodySpacing: bodySpacing, ariaLabel: restProps["aria-label"], onShow: restProps.onShow, onHidden: restProps.onHidden, children: mobileChildren })) : (jsx(DesktopPopover, { arrow: arrow, placement: placement, bodySpacing: bodySpacing, appendToBody: appendToBody, fitContent: fitContent, ...restProps }));
 };
 
 export { Popover as default };

package/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import Tippy, { type TippyProps } from \"@tippyjs/react\"\nimport type React from \"react\"\nimport { useCallback, useEffect } from \"react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { zIndexes } from \"../../tokens\"\nimport Modal, { type ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  flip?: boolean\n  theme?: string\n  distance?: number\n  zIndex?: number\n  appendToBody?: boolean\n  fitContent?: boolean\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  flip = true,\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  appendToBody = false,\n  fitContent = false,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close],\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme} ${\n        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      } ${fitContent ? \"cobalt-popover--fitContent\" : \"\"}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      popperOptions={{ modifiers: [{ name: \"flip\", enabled: flip }] }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n      appendTo={appendToBody ? document.body : \"parent\"}\n    />\n  )\n}\n\nexport default Popover\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type React from \"react\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { type ModalPropsType } from \"../Modal\"\nimport { DesktopPopover } from \"./DesktopPopover\"\nimport type {\n  DesktopPopoverCoreRefs,\n  PopoverConfig,\n} from \"./useDesktopPopoverCore\"\n\ntype DesktopPopoverRenderProps = {\n  refs: DesktopPopoverCoreRefs\n  getReferenceProps: ReturnType<\n    typeof import(\"@floating-ui/react\").useInteractions\n  >[\"getReferenceProps\"]\n  renderFloating: (content: React.ReactNode) => React.ReactNode\n}\n\nexport type DesktopPopoverChildren =\n  | React.ReactNode\n  | ((props: DesktopPopoverRenderProps) => React.ReactNode)\n\nexport type PopoverPropsType = PopoverConfig & {\n  children?: DesktopPopoverChildren\n  isOpen: boolean\n  onOpenChange?: (open: boolean) => void\n  \"aria-label\"?: string\n  targetRef: React.RefObject<Element | null> | Element | null\n  responsive?: boolean\n}\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  arrow = false,\n  placement = \"bottom-start\",\n  bodySpacing = true,\n  appendToBody = false,\n  fitContent = false,\n  responsive = true,\n  ...restProps\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = responsive && (breakpoint === \"sm\" || breakpoint === \"xs\")\n\n  const mobileChildren =\n    typeof restProps.children === \"function\" ? null : restProps.children\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={restProps.isOpen}\n      onDismiss={() => {\n        restProps.onOpenChange?.(false)\n      }}\n      bodySpacing={bodySpacing}\n      ariaLabel={restProps[\"aria-label\"]}\n      onShow={restProps.onShow}\n      onHidden={restProps.onHidden}\n    >\n      {mobileChildren}\n    </MobilePopover>\n  ) : (\n    <DesktopPopover\n      arrow={arrow}\n      placement={placement}\n      bodySpacing={bodySpacing}\n      appendToBody={appendToBody}\n      fitContent={fitContent}\n      {...restProps}\n    />\n  )\n}\n\nexport default Popover\n"],"names":["_jsx"],"mappings":";;;;;AA8BA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,sBAAsB,EAClC,SAAS,EACT,WAAW,EACX,MAAM,EACN,QAAQ,GAST,KAAI;AACH,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACQ,SAAS,EACrB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,SAAS,EAC3B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAEjB,QAAQ,EAAA,CACH,EACT;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,cAAc,EAC1B,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,KAAK,EACpB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACK,KAAI;AACrB,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAA;AACtC,IAAA,MAAM,QAAQ,GAAG,UAAU,KAAK,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAC,CAAA;AAE3E,IAAA,MAAM,cAAc,GAClB,OAAO,SAAS,CAAC,QAAQ,KAAK,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAA;AAEtE,IAAA,OAAO,QAAQ,IACbA,IAAC,aAAa,EAAA,EACZ,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,SAAS,EAAE,MAAK;;AACd,YAAA,CAAA,EAAA,GAAA,SAAS,CAAC,YAAY,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,SAAA,EAAA,KAAK,CAAC,CAAA;SAChC,EACD,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,CAAC,YAAY,CAAC,EAClC,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAAA,QAAA,EAE3B,cAAc,EAAA,CACD,KAEhBA,GAAC,CAAA,cAAc,EACb,EAAA,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EAClB,GAAA,SAAS,EACb,CAAA,CACH,CAAA;AACH;;;;"}

package/components/Popover/popoverRegistry.js

@@ -0,0 +1,15 @@
+const registry = new Set();
+const registerPopover = (close) => {
+    registry.add(close);
+    return () => {
+        registry.delete(close);
+    };
+};
+const hideAllPopovers = () => {
+    registry.forEach((close) => {
+        close();
+    });
+};
+
+export { hideAllPopovers, registerPopover };
+//# sourceMappingURL=popoverRegistry.js.map

package/components/Popover/popoverRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popoverRegistry.js","sources":["../../../src/components/Popover/popoverRegistry.ts"],"sourcesContent":["type CloseFn = () => void\n\nconst registry = new Set<CloseFn>()\n\nexport const registerPopover = (close: CloseFn) => {\n  registry.add(close)\n\n  return () => {\n    registry.delete(close)\n  }\n}\n\nexport const hideAllPopovers = () => {\n  registry.forEach((close) => {\n    close()\n  })\n}\n"],"names":[],"mappings":"AAEA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAW,CAAA;AAEtB,MAAA,eAAe,GAAG,CAAC,KAAc,KAAI;AAChD,IAAA,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AAEnB,IAAA,OAAO,MAAK;AACV,QAAA,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AACxB,KAAC,CAAA;AACH,EAAC;AAEM,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACzB,QAAA,KAAK,EAAE,CAAA;AACT,KAAC,CAAC,CAAA;AACJ;;;;"}

package/components/Popover/tooltipConfig.js

@@ -0,0 +1,12 @@
+const tooltipConfig = {
+    trigger: "mouseenter",
+    interactive: false,
+    tooltip: true,
+    arrow: true,
+    placement: "top",
+    bodySpacing: false,
+    appendToBody: true,
+};
+
+export { tooltipConfig };
+//# sourceMappingURL=tooltipConfig.js.map

package/components/Popover/tooltipConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipConfig.js","sources":["../../../src/components/Popover/tooltipConfig.ts"],"sourcesContent":["import type { PopoverConfig } from \"./useDesktopPopoverCore\"\n\nexport const tooltipConfig = {\n  trigger: \"mouseenter\",\n  interactive: false,\n  tooltip: true,\n  arrow: true,\n  placement: \"top\",\n  bodySpacing: false,\n  appendToBody: true,\n} satisfies Partial<PopoverConfig>\n"],"names":[],"mappings":"AAEa,MAAA,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,IAAI;;;;;"}

package/components/Popover/useDesktopPopoverCore.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFloating, shift, offset, flip, arrow, autoUpdate, useHover, safePolygon, useClick, useDismiss, useRole, useInteractions, useTransitionStyles, FloatingArrow, FloatingPortal } from '@floating-ui/react';
+import cx from 'classnames';
+import { useRef, useEffect } from 'react';
+import { zIndexes } from '../../tokens/index.js';
+
+const ANIMATION_TRANSITION_DISTANCE_PX = 4;
+function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement = "top", flip: flip$1 = true, tooltip = false, arrow: showArrow = true, theme = "", zIndex = zIndexes.dropdown, appendToBody = true, fitContent = true, withBorder = false, trigger = "click", interactive = false, delay = 0, offset: offset$1, bodySpacing = false, ariaLabel, onShow, onHidden, getFloatingExtraProps, }) {
+    const arrowRef = useRef(null);
+    const [crossAxis, mainAxis] = offset$1 !== null && offset$1 !== void 0 ? offset$1 : [0, showArrow ? 12 : 8];
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange,
+        placement,
+        transform: false,
+        middleware: [
+            shift({ padding: 8 }),
+            offset({ mainAxis, crossAxis }),
+            ...(flip$1 ? [flip()] : []),
+            ...(showArrow ? [arrow({ element: arrowRef })] : []),
+        ],
+        whileElementsMounted: autoUpdate,
+        elements: { reference: referenceElement },
+    });
+    const isHover = trigger === "mouseenter";
+    const isClick = trigger === "click";
+    const hover = useHover(context, {
+        enabled: isHover,
+        move: false,
+        delay,
+        handleClose: isHover && interactive ? safePolygon() : undefined,
+    });
+    const click = useClick(context, {
+        enabled: isClick,
+    });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "dialog" });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        click,
+        dismiss,
+        role,
+    ]);
+    const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+        duration: { open: 200, close: 150 },
+        initial: ({ side }) => ({
+            opacity: 0,
+            transform: side === "top"
+                ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                : side === "bottom"
+                    ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                    : side === "left"
+                        ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`
+                        : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,
+        }),
+    });
+    const prevMountedRef = useRef(false);
+    useEffect(() => {
+        if (isMounted && !prevMountedRef.current)
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        if (!isMounted && prevMountedRef.current)
+            onHidden === null || onHidden === void 0 ? void 0 : onHidden();
+        prevMountedRef.current = isMounted;
+    }, [isMounted, onShow, onHidden]);
+    const renderFloating = (content) => {
+        var _a;
+        if (!isMounted)
+            return null;
+        const body = bodySpacing ? (jsx("div", { className: "cobalt-popover--bodySpacing", children: content })) : (content);
+        const extraFloatingProps = (_a = getFloatingExtraProps === null || getFloatingExtraProps === void 0 ? void 0 : getFloatingExtraProps()) !== null && _a !== void 0 ? _a : {};
+        const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } = extraFloatingProps;
+        const node = (jsxs("div", { ref: refs.setFloating, style: {
+                ...floatingStyles,
+                ...transitionStyles,
+                zIndex,
+            }, className: cx("cobalt-popover", {
+                "cobalt-popover--withArrow": showArrow,
+                "cobalt-popover--fitContent": fitContent,
+                "cobalt-popover--withBorder": withBorder,
+            }), "data-placement": context.placement, "data-theme": cx(theme, {
+                tooltip: tooltip,
+            }), ...getFloatingProps({
+                "aria-label": ariaLabel,
+                ...restExtraFloatingProps,
+                onMouseEnter,
+                onMouseLeave,
+            }), children: [showArrow && (jsx(FloatingArrow, { ref: arrowRef, context: context, className: "cobalt-popover__arrow" })), body] }));
+        return appendToBody ? jsx(FloatingPortal, { children: node }) : node;
+    };
+    return {
+        refs: {
+            setReference: refs.setReference,
+            setFloating: refs.setFloating,
+        },
+        getReferenceProps,
+        renderFloating,
+        isMounted,
+    };
+}
+
+export { useDesktopPopoverCore };
+//# sourceMappingURL=useDesktopPopoverCore.js.map

package/components/Popover/useDesktopPopoverCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDesktopPopoverCore.js","sources":["../../../src/components/Popover/useDesktopPopoverCore.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  FloatingPortal,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  type Placement,\n  safePolygon,\n  shift as shiftMiddleware,\n  useClick,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from \"@floating-ui/react\"\nimport classNames from \"classnames\"\nimport type React from \"react\"\nimport { useEffect, useRef } from \"react\"\nimport { zIndexes } from \"../../tokens\"\n\nconst ANIMATION_TRANSITION_DISTANCE_PX = 4\n\nexport type PopoverConfig = {\n  placement?: Placement\n  flip?: boolean\n  arrow?: boolean\n  theme?: string\n  tooltip?: boolean\n  lightMode?: boolean\n  zIndex?: number\n  appendToBody?: boolean\n  withBorder?: boolean\n  fitContent?: boolean\n  trigger?: \"click\" | \"mouseenter\"\n  interactive?: boolean\n  delay?: number | { open?: number; close?: number }\n  offset?: [number, number]\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n}\n\nexport type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, \"trigger\"> & {\n  isOpen: boolean\n  onOpenChange?: (open: boolean) => void\n  referenceElement: Element | null\n  trigger?: \"click\" | \"mouseenter\" | \"manual\"\n  ariaLabel?: string\n  getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>\n}\n\nexport type DesktopPopoverCoreRefs = {\n  setReference: (node: Element | null) => void\n  setFloating: (node: HTMLElement | null) => void\n}\n\ntype UseDesktopPopoverCoreReturnType = {\n  refs: DesktopPopoverCoreRefs\n  getReferenceProps: ReturnType<\n    typeof import(\"@floating-ui/react\").useInteractions\n  >[\"getReferenceProps\"]\n  renderFloating: (content: React.ReactNode) => React.ReactNode\n  isMounted: boolean\n}\n\nexport function useDesktopPopoverCore({\n  isOpen,\n  onOpenChange,\n  referenceElement,\n  placement = \"top\",\n  flip = true,\n  tooltip = false,\n  arrow: showArrow = true,\n  theme = \"\",\n  zIndex = zIndexes.dropdown,\n  appendToBody = true,\n  fitContent = true,\n  withBorder = false,\n  trigger = \"click\",\n  interactive = false,\n  delay = 0,\n  offset,\n  bodySpacing = false,\n  ariaLabel,\n  onShow,\n  onHidden,\n  getFloatingExtraProps,\n}: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType {\n  const arrowRef = useRef<SVGSVGElement | null>(null)\n\n  const [crossAxis, mainAxis] = offset ?? [0, showArrow ? 12 : 8]\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange,\n    placement,\n    transform: false,\n    middleware: [\n      shiftMiddleware({ padding: 8 }),\n      offsetMiddleware({ mainAxis, crossAxis }),\n      ...(flip ? [flipMiddleware()] : []),\n      ...(showArrow ? [arrow({ element: arrowRef })] : []),\n    ],\n    whileElementsMounted: autoUpdate,\n    elements: { reference: referenceElement },\n  })\n\n  const isHover = trigger === \"mouseenter\"\n  const isClick = trigger === \"click\"\n\n  const hover = useHover(context, {\n    enabled: isHover,\n    move: false,\n    delay,\n    handleClose: isHover && interactive ? safePolygon() : undefined,\n  })\n\n  const click = useClick(context, {\n    enabled: isClick,\n  })\n\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: \"dialog\" })\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    click,\n    dismiss,\n    role,\n  ])\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: { open: 200, close: 150 },\n    initial: ({ side }) => ({\n      opacity: 0,\n      transform:\n        side === \"top\"\n          ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n          : side === \"bottom\"\n            ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n            : side === \"left\"\n              ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n              : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,\n    }),\n  })\n\n  const prevMountedRef = useRef(false)\n\n  useEffect(() => {\n    if (isMounted && !prevMountedRef.current) onShow?.()\n    if (!isMounted && prevMountedRef.current) onHidden?.()\n    prevMountedRef.current = isMounted\n  }, [isMounted, onShow, onHidden])\n\n  const renderFloating = (content: React.ReactNode) => {\n    if (!isMounted) return null\n\n    const body = bodySpacing ? (\n      <div className=\"cobalt-popover--bodySpacing\">{content}</div>\n    ) : (\n      content\n    )\n\n    const extraFloatingProps = getFloatingExtraProps?.() ?? {}\n    const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } =\n      extraFloatingProps\n\n    const node = (\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          ...transitionStyles,\n          zIndex,\n        }}\n        className={classNames(\"cobalt-popover\", {\n          \"cobalt-popover--withArrow\": showArrow,\n          \"cobalt-popover--fitContent\": fitContent,\n          \"cobalt-popover--withBorder\": withBorder,\n        })}\n        data-placement={context.placement}\n        data-theme={classNames(theme, {\n          tooltip: tooltip,\n        })}\n        {...getFloatingProps({\n          \"aria-label\": ariaLabel,\n          ...restExtraFloatingProps,\n          onMouseEnter,\n          onMouseLeave,\n        })}\n      >\n        {showArrow && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            className=\"cobalt-popover__arrow\"\n          />\n        )}\n        {body}\n      </div>\n    )\n\n    return appendToBody ? <FloatingPortal>{node}</FloatingPortal> : node\n  }\n\n  return {\n    refs: {\n      setReference: refs.setReference,\n      setFloating: refs.setFloating,\n    },\n    getReferenceProps,\n    renderFloating,\n    isMounted,\n  }\n}\n"],"names":["flip","offset","shiftMiddleware","offsetMiddleware","flipMiddleware","_jsx","_jsxs","classNames"],"mappings":"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"}

package/components/Popover/useSingletonPopover.js

@@ -0,0 +1,148 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { registerPopover } from './popoverRegistry.js';
+import { useDesktopPopoverCore } from './useDesktopPopoverCore.js';
+
+function normalizeDelay(delay) {
+    var _a, _b;
+    if (typeof delay === "number") {
+        return { open: delay, close: delay };
+    }
+    return {
+        open: (_a = delay === null || delay === void 0 ? void 0 : delay.open) !== null && _a !== void 0 ? _a : 0,
+        close: (_b = delay === null || delay === void 0 ? void 0 : delay.close) !== null && _b !== void 0 ? _b : 0,
+    };
+}
+function useSingletonPopover({ trigger = "mouseenter", delay = 0, interactive = false, gracePeriod = 100, ...options }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [content, setContent] = useState(null);
+    const openTimeoutRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const delays = normalizeDelay(delay);
+    const clearOpenTimeout = useCallback(() => {
+        if (openTimeoutRef.current != null) {
+            window.clearTimeout(openTimeoutRef.current);
+            openTimeoutRef.current = null;
+        }
+    }, []);
+    const clearCloseTimeout = useCallback(() => {
+        if (closeTimeoutRef.current != null) {
+            window.clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (openTimeoutRef.current != null) {
+                window.clearTimeout(openTimeoutRef.current);
+            }
+            if (closeTimeoutRef.current != null) {
+                window.clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
+    const closePopover = useCallback((immediate = false, useGracePeriod = false) => {
+        clearOpenTimeout();
+        const run = () => {
+            setIsOpen(false);
+        };
+        const closeDelay = useGracePeriod
+            ? Math.max(delays.close, gracePeriod)
+            : delays.close;
+        if (immediate || closeDelay === 0) {
+            clearCloseTimeout();
+            run();
+            return;
+        }
+        clearCloseTimeout();
+        closeTimeoutRef.current = window.setTimeout(run, closeDelay);
+    }, [clearOpenTimeout, clearCloseTimeout, delays.close, gracePeriod]);
+    useEffect(() => {
+        return registerPopover(() => {
+            closePopover(true);
+        });
+    }, [closePopover]);
+    const core = useDesktopPopoverCore({
+        ...options,
+        isOpen,
+        onOpenChange: setIsOpen,
+        referenceElement,
+        trigger: "manual",
+        interactive,
+        getFloatingExtraProps: interactive && trigger === "mouseenter"
+            ? () => ({
+                onMouseEnter: () => {
+                    clearCloseTimeout();
+                },
+                onMouseLeave: () => {
+                    closePopover(false, true);
+                },
+            })
+            : undefined,
+    });
+    const openWithItem = (item, element, immediate = false) => {
+        clearCloseTimeout();
+        const run = () => {
+            setReferenceElement(element);
+            core.refs.setReference(element);
+            setContent(item.content);
+            setIsOpen(true);
+        };
+        const shouldOpenImmediately = immediate || isOpen || delays.open === 0;
+        if (shouldOpenImmediately) {
+            clearOpenTimeout();
+            run();
+            return;
+        }
+        clearOpenTimeout();
+        openTimeoutRef.current = window.setTimeout(run, delays.open);
+    };
+    const getReferenceProps = (item, userProps = {}) => {
+        const { onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onClick, ...restUserProps } = userProps;
+        return core.getReferenceProps({
+            ...restUserProps,
+            onMouseEnter: (e) => {
+                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+                if (trigger === "mouseenter") {
+                    openWithItem(item, e.currentTarget);
+                }
+            },
+            onPointerEnter: (e) => {
+                onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(e);
+            },
+            onMouseLeave: (e) => {
+                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+                if (trigger === "mouseenter" && !interactive) {
+                    closePopover(false, true);
+                }
+            },
+            onPointerLeave: (e) => {
+                onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(e);
+            },
+            onClick: (e) => {
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                if (trigger === "click") {
+                    const sameReference = referenceElement === e.currentTarget;
+                    setReferenceElement(e.currentTarget);
+                    core.refs.setReference(e.currentTarget);
+                    setContent(item.content);
+                    if (sameReference && isOpen) {
+                        setIsOpen(false);
+                    }
+                    else {
+                        setIsOpen(true);
+                    }
+                }
+            },
+        });
+    };
+    return {
+        getReferenceProps,
+        renderFloating: () => content == null ? null : core.renderFloating(content),
+        close: () => closePopover(true),
+        isOpen,
+    };
+}
+
+export { useSingletonPopover };
+//# sourceMappingURL=useSingletonPopover.js.map

package/components/Popover/useSingletonPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSingletonPopover.js","sources":["../../../src/components/Popover/useSingletonPopover.tsx"],"sourcesContent":["import type React from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { registerPopover } from \"./popoverRegistry\"\nimport type { UseDesktopPopoverCoreOptions } from \"./useDesktopPopoverCore\"\nimport { useDesktopPopoverCore } from \"./useDesktopPopoverCore\"\n\ntype SingletonItem = {\n  content: React.ReactNode\n}\n\ntype SingletonReferenceProps = React.HTMLAttributes<HTMLElement>\n\ntype SingletonOptions = Omit<\n  UseDesktopPopoverCoreOptions,\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"referenceElement\"\n  | \"trigger\"\n  | \"getFloatingExtraProps\"\n> & {\n  trigger?: \"click\" | \"mouseenter\"\n  gracePeriod?: number\n}\n\nfunction normalizeDelay(delay: SingletonOptions[\"delay\"]) {\n  if (typeof delay === \"number\") {\n    return { open: delay, close: delay }\n  }\n\n  return {\n    open: delay?.open ?? 0,\n    close: delay?.close ?? 0,\n  }\n}\n\nexport function useSingletonPopover({\n  trigger = \"mouseenter\",\n  delay = 0,\n  interactive = false,\n  gracePeriod = 100,\n  ...options\n}: SingletonOptions) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null,\n  )\n  const [content, setContent] = useState<React.ReactNode>(null)\n\n  const openTimeoutRef = useRef<number | null>(null)\n  const closeTimeoutRef = useRef<number | null>(null)\n\n  const delays = normalizeDelay(delay)\n\n  const clearOpenTimeout = useCallback(() => {\n    if (openTimeoutRef.current != null) {\n      window.clearTimeout(openTimeoutRef.current)\n      openTimeoutRef.current = null\n    }\n  }, [])\n\n  const clearCloseTimeout = useCallback(() => {\n    if (closeTimeoutRef.current != null) {\n      window.clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current != null) {\n        window.clearTimeout(openTimeoutRef.current)\n      }\n\n      if (closeTimeoutRef.current != null) {\n        window.clearTimeout(closeTimeoutRef.current)\n      }\n    }\n  }, [])\n\n  const closePopover = useCallback(\n    (immediate = false, useGracePeriod = false) => {\n      clearOpenTimeout()\n\n      const run = () => {\n        setIsOpen(false)\n      }\n\n      const closeDelay = useGracePeriod\n        ? Math.max(delays.close, gracePeriod)\n        : delays.close\n\n      if (immediate || closeDelay === 0) {\n        clearCloseTimeout()\n        run()\n        return\n      }\n\n      clearCloseTimeout()\n      closeTimeoutRef.current = window.setTimeout(run, closeDelay)\n    },\n    [clearOpenTimeout, clearCloseTimeout, delays.close, gracePeriod],\n  )\n\n  useEffect(() => {\n    return registerPopover(() => {\n      closePopover(true)\n    })\n  }, [closePopover])\n\n  const core = useDesktopPopoverCore({\n    ...options,\n    isOpen,\n    onOpenChange: setIsOpen,\n    referenceElement,\n    trigger: \"manual\",\n    interactive,\n    getFloatingExtraProps:\n      interactive && trigger === \"mouseenter\"\n        ? () => ({\n            onMouseEnter: () => {\n              clearCloseTimeout()\n            },\n            onMouseLeave: () => {\n              closePopover(false, true)\n            },\n          })\n        : undefined,\n  })\n\n  const openWithItem = (\n    item: SingletonItem,\n    element: HTMLElement,\n    immediate = false,\n  ) => {\n    clearCloseTimeout()\n\n    const run = () => {\n      setReferenceElement(element)\n      core.refs.setReference(element)\n      setContent(item.content)\n      setIsOpen(true)\n    }\n\n    const shouldOpenImmediately = immediate || isOpen || delays.open === 0\n\n    if (shouldOpenImmediately) {\n      clearOpenTimeout()\n      run()\n      return\n    }\n\n    clearOpenTimeout()\n    openTimeoutRef.current = window.setTimeout(run, delays.open)\n  }\n\n  const getReferenceProps = (\n    item: SingletonItem,\n    userProps: SingletonReferenceProps = {},\n  ) => {\n    const {\n      onMouseEnter,\n      onMouseLeave,\n      onPointerEnter,\n      onPointerLeave,\n      onClick,\n      ...restUserProps\n    } = userProps\n\n    return core.getReferenceProps({\n      ...restUserProps,\n\n      onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n        onMouseEnter?.(e)\n\n        if (trigger === \"mouseenter\") {\n          openWithItem(item, e.currentTarget)\n        }\n      },\n\n      onPointerEnter: (e: React.PointerEvent<HTMLElement>) => {\n        onPointerEnter?.(e)\n      },\n\n      onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n        onMouseLeave?.(e)\n\n        if (trigger === \"mouseenter\" && !interactive) {\n          closePopover(false, true)\n        }\n      },\n\n      onPointerLeave: (e: React.PointerEvent<HTMLElement>) => {\n        onPointerLeave?.(e)\n      },\n\n      onClick: (e: React.MouseEvent<HTMLElement>) => {\n        onClick?.(e)\n\n        if (trigger === \"click\") {\n          const sameReference = referenceElement === e.currentTarget\n\n          setReferenceElement(e.currentTarget)\n          core.refs.setReference(e.currentTarget)\n          setContent(item.content)\n\n          if (sameReference && isOpen) {\n            setIsOpen(false)\n          } else {\n            setIsOpen(true)\n          }\n        }\n      },\n    })\n  }\n\n  return {\n    getReferenceProps,\n    renderFloating: () =>\n      content == null ? null : core.renderFloating(content),\n    close: () => closePopover(true),\n    isOpen,\n  }\n}\n"],"names":[],"mappings":"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"}

package/index.js

@@ -50,6 +50,11 @@ export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
 export { PlateNumber } from './components/PlateNumber/index.js';
 export { default as Popover } from './components/Popover/index.js';
+export { PopoverWrapper } from './components/Popover/PopoverWrapper.js';
+export { hideAllPopovers } from './components/Popover/popoverRegistry.js';
+export { TooltipWrapper } from './components/Popover/TooltipWrapper.js';
+export { tooltipConfig } from './components/Popover/tooltipConfig.js';
+export { useSingletonPopover } from './components/Popover/useSingletonPopover.js';
 export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBanner } from './components/ProgressBanner/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.19.1",
+  "version": "2.24.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -20,17 +20,16 @@
   },
   "dependencies": {
     "@ark-ui/react": "5.30.0",
+    "@floating-ui/react": "0.27.10",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.6.0",
-    "@tippyjs/react": "4.2.6",
     "classnames": "2.5.1",
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "5.1.11",
     "postcss": "8.5.14",
-    "tailwindcss": "3.4.19",
-    "tippy.js": "6.3.7"
+    "tailwindcss": "3.4.19"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -305,11 +305,3 @@
     }
   }
 }
-
-.tippy-box[data-theme~="range-picker"] {
-  @apply c-p-xs;
-
-  .tippy-content {
-    min-width: unset;
-  }
-}

package/styles/components/Popover/index.scss

@@ -1,90 +1,47 @@
-@import "tippy.js/dist/tippy.css";
-@import "tippy.js/themes/light.css";
-@import "tippy.js/animations/shift-away-subtle.css";
-
-[data-theme~="cobalt-popover"] {
-  &.tippy-box {
-    @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
-  }
-
-  .tippy-content {
-    padding: 0;
-    min-width: 16rem;
-
-    @apply c-rounded-lg;
-  }
-
-  &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: theme("colors.surfaceBright") !important;
-  }
-
-  &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: theme("colors.surfaceBright") !important;
-  }
+.cobalt-popover {
+  @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
+  padding: 0;
+  min-width: 16rem;
+  max-width: 500px;
 }
 
-[data-theme~="cobalt-popover--fitContent"] {
-  .tippy-content {
-    min-width: auto;
-  }
+.cobalt-popover--fitContent {
+  min-width: auto;
+  max-width: none;
 }
 
-[data-theme~="cobalt-popover--withArrow"] {
-  &.tippy-box {
-    @apply c-rounded-xl;
-  }
+.cobalt-popover--withArrow {
+  @apply c-rounded-xl;
+}
 
-  .tippy-content {
-    @apply c-rounded-xl;
-  }
+.cobalt-popover--withBorder {
+  @apply c-border c-border-outline;
 }
 
 .cobalt-popover--bodySpacing {
   padding: theme("spacing.md");
 }
 
+.cobalt-popover__arrow {
+  fill: theme("colors.surfaceBright");
+}
+
 .use-cobalt-dark-theme {
-  [data-theme~="cobalt-popover"] {
+  .cobalt-popover {
     box-shadow: 0 0 0 1px theme("colors.outline");
+  }
 
-    &[data-placement^="top"] > .tippy-arrow {
-      bottom: -1px;
-
-      &::before {
-        border-top-color: theme("colors.outline") !important;
-      }
-    }
-
-    &[data-placement^="bottom"] > .tippy-arrow {
-      top: -1px;
-
-      &::before {
-        border-bottom-color: theme("colors.outline") !important;
-      }
-    }
-
-    &[data-placement^="left"] > .tippy-arrow {
-      right: -1px;
+  .cobalt-popover__arrow {
+    fill: theme("colors.surfaceBright");
+    stroke: theme("colors.outline");
+    stroke-width: 1;
+  }
+}
 
-      &::before {
-        border-left-color: theme("colors.outline") !important;
-      }
-    }
+.cobalt-popover[data-theme~="tooltip"] {
+  @apply c-py-2xs c-px-xs c-rounded c-text-body-sm;
 
-    &[data-placement^="right"] > .tippy-arrow {
-      left: -1px;
+  min-width: auto;
 
-      &::before {
-        border-right-color: theme("colors.outline") !important;
-      }
-    }
-  }
+  box-shadow: elevation(), elevation(md);
 }

package/types/src/components/Popover/DesktopPopover.d.ts

@@ -0,0 +1,2 @@
+import type { PopoverPropsType } from ".";
+export declare const DesktopPopover: ({ targetRef, children, isOpen, onOpenChange, ...rest }: PopoverPropsType) => import("react").ReactNode;

package/types/src/components/Popover/PopoverWrapper.d.ts

@@ -0,0 +1,13 @@
+import React, { type ReactElement, type Ref } from "react";
+import { type PopoverPropsType } from ".";
+type RefableElement = ReactElement & {
+    ref?: Ref<HTMLElement>;
+};
+export type PopoverWrapperPropsType = Omit<PopoverPropsType, "targetRef" | "children" | "isOpen"> & {
+    content: React.ReactNode;
+    disabled?: boolean;
+    isOpenByDefault?: boolean;
+    children: RefableElement;
+};
+export declare function PopoverWrapper({ content, children, trigger, onOpenChange, isOpenByDefault, disabled, responsive, ...popoverProps }: PopoverWrapperPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/src/components/Popover/TooltipWrapper.d.ts

@@ -0,0 +1,3 @@
+import { type PopoverWrapperPropsType } from "./PopoverWrapper";
+export type TooltipWrapperPropsType = Omit<PopoverWrapperPropsType, "responsive">;
+export declare function TooltipWrapper({ content, children, ...popoverProps }: TooltipWrapperPropsType): import("react/jsx-runtime").JSX.Element;

package/types/src/components/Popover/index.d.ts

@@ -1,29 +1,18 @@
-import { type TippyProps } from "@tippyjs/react";
 import type React from "react";
-export type PopoverPropsType = {
-    children?: React.ReactNode;
+import type { DesktopPopoverCoreRefs, PopoverConfig } from "./useDesktopPopoverCore";
+type DesktopPopoverRenderProps = {
+    refs: DesktopPopoverCoreRefs;
+    getReferenceProps: ReturnType<typeof import("@floating-ui/react").useInteractions>["getReferenceProps"];
+    renderFloating: (content: React.ReactNode) => React.ReactNode;
+};
+export type DesktopPopoverChildren = React.ReactNode | ((props: DesktopPopoverRenderProps) => React.ReactNode);
+export type PopoverPropsType = PopoverConfig & {
+    children?: DesktopPopoverChildren;
     isOpen: boolean;
-    close: () => void;
+    onOpenChange?: (open: boolean) => void;
     "aria-label"?: string;
-    bodySpacing?: boolean;
-    onShow?: () => void;
-    onHidden?: () => void;
-    targetRef: TippyProps["reference"];
-    arrow?: boolean;
-    placement?: TippyProps["placement"];
-    flip?: boolean;
-    theme?: string;
-    distance?: number;
-    zIndex?: number;
-    appendToBody?: boolean;
-    fitContent?: boolean;
-    /**
-     * __Only for desktop popover__
-     *
-     * Allow to render the content only when the popover is mounted in the DOM
-     * Useful to render async content in the popover
-     */
-    lazy?: boolean;
+    targetRef: React.RefObject<Element | null> | Element | null;
+    responsive?: boolean;
 };
-declare const Popover: ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing, onShow, onHidden, arrow, placement, flip, theme, distance, zIndex, appendToBody, fitContent, lazy, }: PopoverPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: ({ arrow, placement, bodySpacing, appendToBody, fitContent, responsive, ...restProps }: PopoverPropsType) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/types/src/components/Popover/popoverRegistry.d.ts

@@ -0,0 +1,4 @@
+type CloseFn = () => void;
+export declare const registerPopover: (close: CloseFn) => () => void;
+export declare const hideAllPopovers: () => void;
+export {};

package/types/src/components/Popover/tooltipConfig.d.ts

@@ -0,0 +1,9 @@
+export declare const tooltipConfig: {
+    trigger: "mouseenter";
+    interactive: false;
+    tooltip: true;
+    arrow: true;
+    placement: "top";
+    bodySpacing: false;
+    appendToBody: true;
+};

package/types/src/components/Popover/useDesktopPopoverCore.d.ts

@@ -0,0 +1,44 @@
+import { type Placement } from "@floating-ui/react";
+import type React from "react";
+export type PopoverConfig = {
+    placement?: Placement;
+    flip?: boolean;
+    arrow?: boolean;
+    theme?: string;
+    tooltip?: boolean;
+    lightMode?: boolean;
+    zIndex?: number;
+    appendToBody?: boolean;
+    withBorder?: boolean;
+    fitContent?: boolean;
+    trigger?: "click" | "mouseenter";
+    interactive?: boolean;
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    offset?: [number, number];
+    bodySpacing?: boolean;
+    onShow?: () => void;
+    onHidden?: () => void;
+};
+export type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, "trigger"> & {
+    isOpen: boolean;
+    onOpenChange?: (open: boolean) => void;
+    referenceElement: Element | null;
+    trigger?: "click" | "mouseenter" | "manual";
+    ariaLabel?: string;
+    getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>;
+};
+export type DesktopPopoverCoreRefs = {
+    setReference: (node: Element | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+};
+type UseDesktopPopoverCoreReturnType = {
+    refs: DesktopPopoverCoreRefs;
+    getReferenceProps: ReturnType<typeof import("@floating-ui/react").useInteractions>["getReferenceProps"];
+    renderFloating: (content: React.ReactNode) => React.ReactNode;
+    isMounted: boolean;
+};
+export declare function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement, flip, tooltip, arrow: showArrow, theme, zIndex, appendToBody, fitContent, withBorder, trigger, interactive, delay, offset, bodySpacing, ariaLabel, onShow, onHidden, getFloatingExtraProps, }: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType;
+export {};

package/types/src/components/Popover/useSingletonPopover.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { UseDesktopPopoverCoreOptions } from "./useDesktopPopoverCore";
+type SingletonItem = {
+    content: React.ReactNode;
+};
+type SingletonReferenceProps = React.HTMLAttributes<HTMLElement>;
+type SingletonOptions = Omit<UseDesktopPopoverCoreOptions, "isOpen" | "onOpenChange" | "referenceElement" | "trigger" | "getFloatingExtraProps"> & {
+    trigger?: "click" | "mouseenter";
+    gracePeriod?: number;
+};
+export declare function useSingletonPopover({ trigger, delay, interactive, gracePeriod, ...options }: SingletonOptions): {
+    getReferenceProps: (item: SingletonItem, userProps?: SingletonReferenceProps) => Record<string, unknown>;
+    renderFloating: () => React.ReactNode;
+    close: () => void;
+    isOpen: boolean;
+};
+export {};

package/types/src/index.d.ts

@@ -50,6 +50,12 @@ export { default as PhotoDropzone } from "./components/PhotoDropzone";
 export { Pill, PillGroup } from "./components/Pill";
 export { PlateNumber } from "./components/PlateNumber";
 export { default as Popover } from "./components/Popover";
+export { PopoverWrapper, type PopoverWrapperPropsType, } from "./components/Popover/PopoverWrapper";
+export { hideAllPopovers } from "./components/Popover/popoverRegistry";
+export { TooltipWrapper } from "./components/Popover/TooltipWrapper";
+export { tooltipConfig } from "./components/Popover/tooltipConfig";
+export type { PopoverConfig } from "./components/Popover/useDesktopPopoverCore";
+export { useSingletonPopover } from "./components/Popover/useSingletonPopover";
 export { PriceTable, PriceTableRow } from "./components/PriceTable";
 export { ProgressBanner } from "./components/ProgressBanner";
 export { ProgressBar } from "./components/ProgressBar";

package/components/Calendar/CalendarRangePicker/DayTooltip.js

@@ -1,23 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import Tippy from '@tippyjs/react';
-import { sticky } from 'tippy.js';
-
-const DayTooltip = (props) => {
-    return (jsx(Tippy, { animation: "fade",
-        arrow: true,
-        interactive: true,
-        interactiveBorder: 10,
-        placement: "top",
-        theme: "cobalt-popover range-picker",
-        delay: [0, 0],
-        duration: [0, 0],
-        maxWidth: 500,
-        offset: [0, 8],
-        sticky: true,
-        plugins: [sticky],
-        appendTo: document.body,
-        ...props }));
-};
-
-export { DayTooltip as default };
-//# sourceMappingURL=DayTooltip.js.map

package/components/Calendar/CalendarRangePicker/DayTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DayTooltip.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/DayTooltip.tsx"],"sourcesContent":["import Tippy, { type TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nconst DayTooltip = (props: TippyProps) => {\n  return (\n    <Tippy\n      {...{\n        animation: \"fade\",\n        arrow: true,\n        interactive: true,\n        interactiveBorder: 10,\n        placement: \"top\",\n        theme: \"cobalt-popover range-picker\",\n        delay: [0, 0],\n        duration: [0, 0],\n        maxWidth: 500,\n        offset: [0, 8],\n        sticky: true,\n        plugins: [sticky],\n        appendTo: document.body,\n        ...props,\n      }}\n    />\n  )\n}\n\nexport default DayTooltip\n"],"names":["_jsx"],"mappings":";;;;AAGA,MAAM,UAAU,GAAG,CAAC,KAAiB,KAAI;AACvC,IAAA,QACEA,GAAC,CAAA,KAAK,EAEF,EAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACd,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC,MAAM,CAAC;QACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI;QACvB,GAAG,KAAK,EAEV,CAAA,EACH;AACH;;;;"}

package/components/Popover/LazyTippy.js

@@ -1,9 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import Tippy from '@tippyjs/react';
-
-const LazyTippy = (props) => {
-    return props.visible ? jsx(Tippy, { ...props }) : null;
-};
-
-export { LazyTippy as default };
-//# sourceMappingURL=LazyTippy.js.map

package/components/Popover/LazyTippy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LazyTippy.js","sources":["../../../src/components/Popover/LazyTippy.tsx"],"sourcesContent":["// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.\n// Replace <Tippy /> with <LazyTippy /> component and it should work the same.\n\nimport Tippy, { type TippyProps } from \"@tippyjs/react\"\n\nconst LazyTippy = (props: TippyProps) => {\n  return props.visible ? <Tippy {...props} /> : null\n}\n\nexport default LazyTippy\n"],"names":["_jsx"],"mappings":";;;AAKA,MAAM,SAAS,GAAG,CAAC,KAAiB,KAAI;AACtC,IAAA,OAAO,KAAK,CAAC,OAAO,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,KAAK,EAAI,CAAA,GAAG,IAAI,CAAA;AACpD;;;;"}

package/types/src/__tests__/AsyncComponent.d.ts

@@ -1,6 +0,0 @@
-import type React from "react";
-declare const AsyncComponent: ({ children, timeout, }: {
-    children?: React.ReactNode;
-    timeout?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default AsyncComponent;

package/types/src/components/Calendar/CalendarRangePicker/DayTooltip.d.ts

@@ -1,3 +0,0 @@
-import { type TippyProps } from "@tippyjs/react";
-declare const DayTooltip: (props: TippyProps) => import("react/jsx-runtime").JSX.Element;
-export default DayTooltip;

package/types/src/components/Popover/LazyTippy.d.ts

@@ -1,3 +0,0 @@
-import { type TippyProps } from "@tippyjs/react";
-declare const LazyTippy: (props: TippyProps) => import("react/jsx-runtime").JSX.Element | null;
-export default LazyTippy;