@drivy/cobalt 2.19.0 → 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/Modal/index.js

@@ -8,7 +8,7 @@ import ModalHeader from './ModalHeader.js';
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
+const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, fullScreen, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
     useEffect(() => {
         isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
     }, [onShow, isOpen]);
@@ -19,15 +19,16 @@ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-lab
         }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true, 
         // For some reason, onHidden can sometimes not be called if we use unmountOnExit
         unmountOnExit: !onHidden, children: jsx(Portal, { children: jsx(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
-                    "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
-                    "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
+                    "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
+                    "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                 }), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
                         "cobalt-modal--overflowHidden": overflowHidden,
                         "cobalt-modal--fullHeight": fullHeight,
                         "cobalt-modal--fullWidth": fullWidth,
+                        "cobalt-modal--fullScreen": fullScreen,
                     }), ref: ref, children: jsxs(Dialog.Content, { className: cx("cobalt-modal__content", className, {
-                            "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
-                            "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
+                            "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
+                            "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                         }), children: [jsx(ModalHeader, { title: title, close: close }), jsxs(Dialog.Description, { className: "cobalt-modal-body__wrapper", children: [jsx("div", { className: cx("cobalt-modal-body", {
                                             "cobalt-modal-body--bodySpacing": bodySpacing,
                                             "cobalt-modal-body--hasFooter": hasFooter,

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  \"aria-label\": string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Custom css classes to add to the modal\n   */\n  className?: string\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: React.ReactNode\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  /**\n   * Remove the modal from the DOM on hidden (enabled by default)\n   */\n  unmountOnHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      isOpen,\n      close,\n      className,\n      initialFocusRef,\n      \"aria-label\": ariaLabel,\n      title,\n      children,\n      overflowHidden = true,\n      bodySpacing = true,\n      fullWidth,\n      fullHeight,\n      onHidden,\n      onShow,\n      skipAnimation,\n      onDismissAttempt,\n    }: ModalPropsType,\n    ref,\n  ) => {\n    useEffect(() => {\n      isOpen && onShow?.()\n    }, [onShow, isOpen])\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c),\n    )\n    const hasFooter = isValidElement(modalFooter)\n\n    return (\n      <Dialog.Root\n        aria-label={ariaLabel}\n        open={isOpen}\n        onOpenChange={(e) => {\n          e.open ? onShow?.() : close?.()\n        }}\n        onExitComplete={onHidden}\n        initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n        onPointerDownOutside={close ? undefined : onDismissAttempt}\n        lazyMount\n        // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n        unmountOnExit={!onHidden}\n      >\n        <Portal>\n          <Dialog.Backdrop\n            className={cx(\"cobalt-modal__overlay\", {\n              \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n              \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n            })}\n          >\n            <Dialog.Positioner\n              className={cx(\"cobalt-modal\", {\n                \"cobalt-modal--overflowHidden\": overflowHidden,\n                \"cobalt-modal--fullHeight\": fullHeight,\n                \"cobalt-modal--fullWidth\": fullWidth,\n              })}\n              ref={ref}\n            >\n              <Dialog.Content\n                className={cx(\"cobalt-modal__content\", className, {\n                  \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n                  \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n                })}\n              >\n                <ModalHeader title={title} close={close} />\n                <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n                  <div\n                    className={cx(\"cobalt-modal-body\", {\n                      \"cobalt-modal-body--bodySpacing\": bodySpacing,\n                      \"cobalt-modal-body--hasFooter\": hasFooter,\n                    })}\n                  >\n                    {children}\n                  </div>\n                  {hasFooter && <ModalFooter {...modalFooter.props} />}\n                </Dialog.Description>\n              </Dialog.Content>\n            </Dialog.Positioner>\n          </Dialog.Backdrop>\n        </Portal>\n      </Dialog.Root>\n    )\n  },\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  \"aria-label\": string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Custom css classes to add to the modal\n   */\n  className?: string\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: React.ReactNode\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  fullScreen?: boolean\n  /**\n   * Remove the modal from the DOM on hidden (enabled by default)\n   */\n  unmountOnHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      isOpen,\n      close,\n      className,\n      initialFocusRef,\n      \"aria-label\": ariaLabel,\n      title,\n      children,\n      overflowHidden = true,\n      bodySpacing = true,\n      fullWidth,\n      fullHeight,\n      fullScreen,\n      onHidden,\n      onShow,\n      skipAnimation,\n      onDismissAttempt,\n    }: ModalPropsType,\n    ref,\n  ) => {\n    useEffect(() => {\n      isOpen && onShow?.()\n    }, [onShow, isOpen])\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c),\n    )\n    const hasFooter = isValidElement(modalFooter)\n\n    return (\n      <Dialog.Root\n        aria-label={ariaLabel}\n        open={isOpen}\n        onOpenChange={(e) => {\n          e.open ? onShow?.() : close?.()\n        }}\n        onExitComplete={onHidden}\n        initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n        onPointerDownOutside={close ? undefined : onDismissAttempt}\n        lazyMount\n        // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n        unmountOnExit={!onHidden}\n      >\n        <Portal>\n          <Dialog.Backdrop\n            className={cx(\"cobalt-modal__overlay\", {\n              \"cobalt-modal--skipAnimation__enter\":\n                skipAnimation?.enter || fullScreen,\n              \"cobalt-modal--skipAnimation__leave\":\n                skipAnimation?.leave || fullScreen,\n            })}\n          >\n            <Dialog.Positioner\n              className={cx(\"cobalt-modal\", {\n                \"cobalt-modal--overflowHidden\": overflowHidden,\n                \"cobalt-modal--fullHeight\": fullHeight,\n                \"cobalt-modal--fullWidth\": fullWidth,\n                \"cobalt-modal--fullScreen\": fullScreen,\n              })}\n              ref={ref}\n            >\n              <Dialog.Content\n                className={cx(\"cobalt-modal__content\", className, {\n                  \"cobalt-modal--skipAnimation__enter\":\n                    skipAnimation?.enter || fullScreen,\n                  \"cobalt-modal--skipAnimation__leave\":\n                    skipAnimation?.leave || fullScreen,\n                })}\n              >\n                <ModalHeader title={title} close={close} />\n                <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n                  <div\n                    className={cx(\"cobalt-modal-body\", {\n                      \"cobalt-modal-body--bodySpacing\": bodySpacing,\n                      \"cobalt-modal-body--hasFooter\": hasFooter,\n                    })}\n                  >\n                    {children}\n                  </div>\n                  {hasFooter && <ModalFooter {...modalFooter.props} />}\n                </Dialog.Description>\n              </Dialog.Content>\n            </Dialog.Positioner>\n          </Dialog.Backdrop>\n        </Portal>\n      </Dialog.Root>\n    )\n  },\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/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":"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"}

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;;;;;"}