@simplybusiness/mobius 4.5.1 → 4.6.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.6.2
+
+### Patch Changes
+
+- a06350a: Fix `<TradeSelector>` in Safari 14
+
+## 4.6.1
+
+### Patch Changes
+
+- 0061f97: Add InsuranceBee partner theme
+
+## 4.6.0
+
+### Minor Changes
+
+- b0d7505: Add new variant "link" to `<Button>`
+
 ## 4.5.1
 
 ### Patch Changes

package/dist/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAqGSA;;;eAAAA;;;;uBAnGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AAyCpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAsGSA;;;eAAAA;;;;uBApGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AA0CpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,GAAG"}

package/dist/cjs/components/Popover/Popover.js

@@ -113,7 +113,8 @@ const Popover = (props)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.FloatingArrow, {
                         ref: arrowRef,
                         context: context,
-                        width: 20
+                        width: 20,
+                        className: "mobius/PopoverArrowIcon"
                     })
                 ]
             })

package/dist/cjs/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow ref={arrowRef} context={context} width={20} />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,2BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAsBH;;;;kCAEvC,qBAAC8D,oBAAa;wBAACpB,KAAKtC;wBAAUO,SAASA;wBAASoD,OAAO;;;;;;AAKjE"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius/PopoverArrowIcon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,2BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAsBH;;;;kCAEvC,qBAAC8D,oBAAa;wBACZpB,KAAKtC;wBACLO,SAASA;wBACToD,OAAO;wBACP5D,WAAU;;;;;;AAMtB"}

package/dist/cjs/hooks/index.js

@@ -6,6 +6,7 @@ _export_star(require("./useBodyScrollLock"), exports);
 _export_star(require("./useBreakpoint"), exports);
 _export_star(require("./useButton"), exports);
 _export_star(require("./useDialog"), exports);
+_export_star(require("./useDialogPolyfill"), exports);
 _export_star(require("./useLabel"), exports);
 _export_star(require("./useOnClickOutside"), exports);
 _export_star(require("./useTextField"), exports);

package/dist/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDialog\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/hooks/useDialog/useDialog.js

@@ -17,9 +17,9 @@ const FALLBACK_TRANSITION_DURATION = 0;
 const useDialog = (props)=>{
     const { ref, isOpen, transition, onOpen, onClose } = props;
     const shouldTransition = (0, _utils.supportsDialog)() && transition.isEnabled;
+    const { polyfillDialog } = (0, _useDialogPolyfill.useDialogPolyfill)();
     // Read CSS variable value as number
     const TRANSITION_DURATION_IN_MS = ref.current && Number(getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")) || FALLBACK_TRANSITION_DURATION;
-    (0, _useDialogPolyfill.useDialogPolyfill)(ref);
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
@@ -67,6 +67,7 @@ const useDialog = (props)=>{
         async function toggleDialog() {
             var _ref_current, _ref_current1;
             if (isOpen && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.open)) {
+                await polyfillDialog(ref);
                 open();
                 // Fix opening transition in Safari being skipped
                 // by wrapping with setTimeout
@@ -83,7 +84,8 @@ const useDialog = (props)=>{
         handleClose,
         isOpen,
         open,
-        ref
+        ref,
+        polyfillDialog
     ]);
     return {
         open,

package/dist/cjs/hooks/useDialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useDialogPolyfill(ref);\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","supportsDialog","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","useDialogPolyfill","useBodyScrollLock","enabled","open","useCallback","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","useEffect","toggleDialog","add"],"mappings":";;;;+BA0BaA;;;eAAAA;;;uBArBN;mCAC2B;mCACA;uBACH;AAe/B,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAE9B,MAAMF,YAAY,CAACG;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBC,IAAAA,qBAAc,OAAMJ,WAAWK,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACR,IAAIS,OAAO,IACVC,OACEC,iBAAiBX,IAAIS,OAAO,EACzBG,gBAAgB,CAACV,WAAWW,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFiB,IAAAA,oCAAiB,EAACf;IAClBgB,IAAAA,oCAAiB,EAAC;QAAEC,SAAShB;IAAO;IAEpC,MAAMiB,OAAOC,IAAAA,kBAAW,EAAC;YACvBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaoB,SAAS;QACtBjB,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMqB,QAAQF,IAAAA,kBAAW,EAAC;YACxBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaqB,KAAK;QAClBjB,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMsB,cAAcH,IAAAA,kBAAW,EAC7B,CAACI;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIpB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACC,MAAM,CAAC9B;YAC9B,uCAAuC;YACvC+B,WAAW,IAAMP,SAASb;QAC5B,OAAO;YACLa;QACF;IACF,GACA;QAACb;QAA2Ba;QAAOrB;QAAKK;KAAiB;IAG3DwB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBACE9B,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAakB,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BU,WAAW;wBACT5B;qBAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACK,GAAG,CAAClC;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACI,YAAUD,gBAAAA,IAAIS,OAAO,cAAXT,oCAAAA,cAAakB,IAAI,GAAE;gBACvCI;YACF;QACF;QAEAQ;IACF,GAAG;QAACR;QAAarB;QAAQiB;QAAMlB;KAAI;IAEnC,OAAO;QACLkB;QACAG,OAAOC;IACT;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n  const { polyfillDialog } = useDialogPolyfill();\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        await polyfillDialog(ref);\n\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref, polyfillDialog]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","supportsDialog","isEnabled","polyfillDialog","useDialogPolyfill","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","useBodyScrollLock","enabled","open","useCallback","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","useEffect","toggleDialog","add"],"mappings":";;;;+BA0BaA;;;eAAAA;;;uBArBN;mCAC2B;mCACA;uBACH;AAe/B,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAE9B,MAAMF,YAAY,CAACG;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBC,IAAAA,qBAAc,OAAMJ,WAAWK,SAAS;IACjE,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,oCAAiB;IAE5C,oCAAoC;IACpC,MAAMC,4BACJ,AAACV,IAAIW,OAAO,IACVC,OACEC,iBAAiBb,IAAIW,OAAO,EACzBG,gBAAgB,CAACZ,WAAWa,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBlB;IAEFmB,IAAAA,oCAAiB,EAAC;QAAEC,SAASjB;IAAO;IAEpC,MAAMkB,OAAOC,IAAAA,kBAAW,EAAC;YACvBpB;SAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAaqB,SAAS;QACtBlB,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMsB,QAAQF,IAAAA,kBAAW,EAAC;YACxBpB;SAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAasB,KAAK;QAClBlB,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMuB,cAAcH,IAAAA,kBAAW,EAC7B,CAACI;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIrB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAa2B,SAAS,CAACC,MAAM,CAAC/B;YAC9B,uCAAuC;YACvCgC,WAAW,IAAMP,SAASZ;QAC5B,OAAO;YACLY;QACF;IACF,GACA;QAACZ;QAA2BY;QAAOtB;QAAKK;KAAiB;IAG3DyB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBACE/B,cASOA;YATtB,IAAIC,UAAU,GAACD,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAamB,IAAI,GAAE;gBAChC,MAAMX,eAAeR;gBAErBmB;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BU,WAAW;wBACT7B;qBAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAa2B,SAAS,CAACK,GAAG,CAACnC;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACI,YAAUD,gBAAAA,IAAIW,OAAO,cAAXX,oCAAAA,cAAamB,IAAI,GAAE;gBACvCI;YACF;QACF;QAEAQ;IACF,GAAG;QAACR;QAAatB;QAAQkB;QAAMnB;QAAKQ;KAAe;IAEnD,OAAO;QACLW;QACAG,OAAOC;IACT;AACF"}

package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -51,27 +51,23 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const useDialogPolyfill = (ref)=>{
+const useDialogPolyfill = ()=>{
     const hasDialogSupport = (0, _utils.supportsDialog)();
-    (0, _react.useEffect)(()=>{
-        async function polyfillDialog() {
-            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
-                const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                try {
-                    dialogPolyfill.registerDialog(ref.current);
-                } catch (error) {
-                    // In iOS 15 <= 15.2 this intermittently fails with
-                    // TypeError: null is not an object (evaluating 'element.showModal')
-                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-                    console.error("Failed to load dialog-polyfill", error);
-                }
+    const hasAlreadyLoaded = (0, _react.useRef)(false);
+    const polyfillDialog = async (ref)=>{
+        if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+            const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
+            hasAlreadyLoaded.current = true;
+            try {
+                dialogPolyfill.registerDialog(ref.current);
+            } catch (error) {
+                console.error("Failed to load dialog-polyfill", error);
             }
         }
-        polyfillDialog();
-    }, [
-        ref,
-        hasDialogSupport
-    ]);
+    };
+    return {
+        polyfillDialog
+    };
 };
 
 //# sourceMappingURL=useDialogPolyfill.js.map

package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = (\n  ref: MutableRefObject<HTMLDialogElement | null>,\n) => {\n  const hasDialogSupport = supportsDialog();\n\n  useEffect(() => {\n    async function polyfillDialog() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        ref.current !== null\n      ) {\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(ref.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n    }\n\n    polyfillDialog();\n  }, [ref, hasDialogSupport]);\n};\n"],"names":["useDialogPolyfill","ref","hasDialogSupport","supportsDialog","useEffect","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJ+B;uBACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBC,IAAAA,qBAAc;IAEvCC,IAAAA,gBAAS,EAAC;QACR,eAAeC;YACb,IACE,CAACH,oBACD,OAAOI,WAAW,eAClBL,IAAIM,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACT,IAAIM,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACJ;QAAKC;KAAiB;AAC5B"}
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n  const hasDialogSupport = supportsDialog();\n  const hasAlreadyLoaded = useRef(false);\n\n  const polyfillDialog = async (\n    ref: MutableRefObject<HTMLDialogElement | null>,\n  ) => {\n    if (\n      !hasAlreadyLoaded.current &&\n      !hasDialogSupport &&\n      typeof window !== \"undefined\" &&\n      ref.current !== null\n    ) {\n      const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n      hasAlreadyLoaded.current = true;\n\n      try {\n        dialogPolyfill.registerDialog(ref.current);\n      } catch (error) {\n        console.error(\"Failed to load dialog-polyfill\", error);\n      }\n    }\n  };\n\n  return {\n    polyfillDialog,\n  };\n};\n"],"names":["useDialogPolyfill","hasDialogSupport","supportsDialog","hasAlreadyLoaded","useRef","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJ4B;uBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB;IAC/B,MAAMC,mBAAmBC,IAAAA,qBAAc;IACvC,MAAMC,mBAAmBC,IAAAA,aAAM,EAAC;IAEhC,MAAMC,iBAAiB,OACrBC;QAEA,IACE,CAACH,iBAAiBI,OAAO,IACzB,CAACN,oBACD,OAAOO,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;YACjDP,iBAAiBI,OAAO,GAAG;YAE3B,IAAI;gBACFG,eAAeC,cAAc,CAACL,IAAIC,OAAO;YAC3C,EAAE,OAAOK,OAAO;gBACdC,QAAQD,KAAK,CAAC,kCAAkCA;YAClD;QACF;IACF;IAEA,OAAO;QACLP;IACF;AACF"}