@simplybusiness/mobius 4.5.1 → 4.6.2

package/dist/esm/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":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","console","warn","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AAyCpC,MAAMC,uBACJL,WAAW,CAACM,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,GAAGlB,UAAUG;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCkB,QAAQC,IAAI,CACV;QAEFnB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMoB,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEa,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWK,SAAS;IAEtBL,WAAWK,SAAS,GAAGD;IAEvB,qBACE,KAACd;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOqB,WAAW,GAAG;AACrB,SAASrB,MAAM,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":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","console","warn","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AA0CpC,MAAMC,uBACJL,WAAW,CAACM,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,GAAGlB,UAAUG;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCkB,QAAQC,IAAI,CACV;QAEFnB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMoB,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEa,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWK,SAAS;IAEtBL,WAAWK,SAAS,GAAGD;IAEvB,qBACE,KAACd;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOqB,WAAW,GAAG;AACrB,SAASrB,MAAM,GAAG"}

package/dist/esm/components/Popover/Popover.js

@@ -98,7 +98,8 @@ export const Popover = (props)=>{
                     /*#__PURE__*/ _jsx(FloatingArrow, {
                         ref: arrowRef,
                         context: context,
-                        width: 20
+                        width: 20,
+                        className: "mobius/PopoverArrowIcon"
                     })
                 ]
             })

package/dist/esm/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":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBAAcmD,KAAK1B;wBAAUK,SAASA;wBAASqC,OAAO;;;;;;AAKjE,EAAE"}
+{"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":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBACCmD,KAAK1B;wBACLK,SAASA;wBACTqC,OAAO;wBACP3C,WAAU;;;;;;AAMtB,EAAE"}

package/dist/esm/hooks/index.js

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/dist/esm/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":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}
+{"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":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}

package/dist/esm/hooks/useDialog/useDialog.js

@@ -7,9 +7,9 @@ const FALLBACK_TRANSITION_DURATION = 0;
 export const useDialog = (props)=>{
     const { ref, isOpen, transition, onOpen, onClose } = props;
     const shouldTransition = supportsDialog() && transition.isEnabled;
+    const { polyfillDialog } = 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;
-    useDialogPolyfill(ref);
     useBodyScrollLock({
         enabled: isOpen
     });
@@ -57,6 +57,7 @@ export 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
@@ -73,7 +74,8 @@ export const useDialog = (props)=>{
         handleClose,
         isOpen,
         open,
-        ref
+        ref,
+        polyfillDialog
     ]);
     return {
         open,

package/dist/esm/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":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACP,IAAIQ,OAAO,IACVC,OACEC,iBAAiBV,IAAIQ,OAAO,EACzBG,gBAAgB,CAACT,WAAWU,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFJ,kBAAkBO;IAClBN,kBAAkB;QAAEoB,SAASb;IAAO;IAEpC,MAAMc,OAAOxB,YAAY;YACvBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAagB,SAAS;QACtBb,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMiB,QAAQ1B,YAAY;YACxBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAaiB,KAAK;QAClBb,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMkB,cAAc3B,YAClB,CAAC4B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIhB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACC,MAAM,CAAC3B;YAC9B,uCAAuC;YACvC4B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOjB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAeiC;gBACEzB,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAae,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTxB;qBAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACI,GAAG,CAAC9B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIQ,OAAO,cAAXR,oCAAAA,cAAae,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAajB;QAAQc;QAAMf;KAAI;IAEnC,OAAO;QACLe;QACAE,OAAOC;IACT;AACF,EAAE"}
+{"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":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","polyfillDialog","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IACjE,MAAM,EAAEC,cAAc,EAAE,GAAGd;IAE3B,oCAAoC;IACpC,MAAMe,4BACJ,AAACR,IAAIS,OAAO,IACVC,OACEC,iBAAiBX,IAAIS,OAAO,EACzBG,gBAAgB,CAACV,WAAWW,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBjB;IAEFH,kBAAkB;QAAEqB,SAASd;IAAO;IAEpC,MAAMe,OAAOzB,YAAY;YACvBS;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaiB,SAAS;QACtBd,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMkB,QAAQ3B,YAAY;YACxBS;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAakB,KAAK;QAClBd,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMmB,cAAc5B,YAClB,CAAC6B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIjB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAauB,SAAS,CAACC,MAAM,CAAC5B;YAC9B,uCAAuC;YACvC6B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOlB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAekC;gBACE1B,cASOA;YATtB,IAAIC,UAAU,GAACD,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAagB,IAAI,GAAE;gBAChC,MAAMT,eAAeP;gBAErBgB;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTzB;qBAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAauB,SAAS,CAACI,GAAG,CAAC/B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIS,OAAO,cAAXT,oCAAAA,cAAagB,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAalB;QAAQe;QAAMhB;QAAKO;KAAe;IAEnD,OAAO;QACLS;QACAE,OAAOC;IACT;AACF,EAAE"}

package/dist/esm/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -1,27 +1,23 @@
-import { useEffect } from "react";
+import { useRef } from "react";
 import { supportsDialog } from "../../utils";
 // Add polyfill for HTML Dialog in old browsers
-export const useDialogPolyfill = (ref)=>{
+export const useDialogPolyfill = ()=>{
     const hasDialogSupport = supportsDialog();
-    useEffect(()=>{
-        async function polyfillDialog() {
-            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
-                const { default: dialogPolyfill } = await import("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 = useRef(false);
+    const polyfillDialog = async (ref)=>{
+        if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+            const { default: dialogPolyfill } = await import("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/esm/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":["useEffect","supportsDialog","useDialogPolyfill","ref","hasDialogSupport","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":"AAAA,SAA2BA,SAAS,QAAQ,QAAQ;AACpD,SAASC,cAAc,QAAQ,cAAc;AAE7C,+CAA+C;AAC/C,OAAO,MAAMC,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBH;IAEzBD,UAAU;QACR,eAAeK;YACb,IACE,CAACD,oBACD,OAAOE,WAAW,eAClBH,IAAII,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACP,IAAII,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACF;QAAKC;KAAiB;AAC5B,EAAE"}
+{"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":["useRef","supportsDialog","useDialogPolyfill","hasDialogSupport","hasAlreadyLoaded","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":"AAAA,SAA2BA,MAAM,QAAQ,QAAQ;AACjD,SAASC,cAAc,QAAQ,cAAc;AAE7C,+CAA+C;AAC/C,OAAO,MAAMC,oBAAoB;IAC/B,MAAMC,mBAAmBF;IACzB,MAAMG,mBAAmBJ,OAAO;IAEhC,MAAMK,iBAAiB,OACrBC;QAEA,IACE,CAACF,iBAAiBG,OAAO,IACzB,CAACJ,oBACD,OAAOK,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;YACjDN,iBAAiBG,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,EAAE"}

package/dist/types/components/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { UseButtonProps } from "../../hooks/useButton";
 export type ButtonElementType = HTMLButtonElement;
-export type Variant = "primary" | "secondary" | "ghost" | "inverse" | "inverse-ghost" | "basic";
+export type Variant = "primary" | "secondary" | "ghost" | "inverse" | "inverse-ghost" | "basic" | "link";
 export type Size = "sm" | "md" | "lg";
 export interface ButtonProps extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {
     /** Custom class name for setting specific CSS */

package/dist/types/components/Button/Button.stories.d.ts

@@ -7,7 +7,8 @@ export declare const Secondary: StoryType;
 export declare const Ghost: StoryType;
 export declare const Basic: StoryType;
 export declare const Large: StoryType;
-export declare const Link: StoryType;
+export declare const AsLinkElement: StoryType;
+export declare const WithLinkStyles: StoryType;
 export declare const Loading: StoryType;
 export declare const Success: StoryType;
 export declare const Disabled: StoryType;

package/dist/types/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/dist/types/hooks/useDialogPolyfill/useDialogPolyfill.d.ts

@@ -1,2 +1,4 @@
 import { MutableRefObject } from "react";
-export declare const useDialogPolyfill: (ref: MutableRefObject<HTMLDialogElement | null>) => void;
+export declare const useDialogPolyfill: () => {
+    polyfillDialog: (ref: MutableRefObject<HTMLDialogElement | null>) => Promise<void>;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.5.1",
+  "version": "4.6.2",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Button/Button.mdx

@@ -42,9 +42,13 @@ import { Button } from "@simplybusiness/mobius";
 
 <Canvas of={ButtonStories.Large} />
 
-## Link
+## As Link Element
 
-<Canvas of={ButtonStories.Link} />
+<Canvas of={ButtonStories.AsLinkElement} />
+
+## With Link Styles
+
+<Canvas of={ButtonStories.WithLinkStyles} />
 
 ## Loading
 

package/src/components/Button/Button.stories.tsx

@@ -117,7 +117,7 @@ export const Large: StoryType = {
   },
 };
 
-export const Link: StoryType = {
+export const AsLinkElement: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Link Button",
@@ -133,6 +133,19 @@ export const Link: StoryType = {
   },
 };
 
+export const WithLinkStyles: StoryType = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Confirm",
+    variant: "link",
+    size: "md",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
 export const Loading: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {

package/src/components/Button/Button.test.tsx

@@ -106,5 +106,13 @@ describe("Button", () => {
       expect(button).toHaveClass(CLASS_NAME);
       expect(button).toHaveClass("my-class");
     });
+
+    it("uses --variant-link class", () => {
+      render(<Button variant="link" />);
+
+      const button = screen.getByRole("button");
+
+      expect(button).toHaveClass("--variant-link");
+    });
   });
 });

package/src/components/Button/Button.tsx

@@ -17,7 +17,8 @@ export type Variant =
   | "ghost"
   | "inverse"
   | "inverse-ghost"
-  | "basic";
+  | "basic"
+  | "link";
 
 export type Size = "sm" | "md" | "lg";
 

package/src/components/Drawer/Drawer.test.tsx

@@ -25,13 +25,15 @@ describe("Drawer", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should render with default class names", () => {
+  it("should render with default class names", async () => {
     render(
       <Drawer isOpen direction="right">
         <Drawer.Header />
       </Drawer>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -39,13 +41,15 @@ describe("Drawer", () => {
     expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
   });
 
-  it("should render with custom class name", () => {
+  it("should render with custom class name", async () => {
     render(
       <Drawer direction="right" className={DRAWER_TEST_CLASS_NAME} isOpen>
         <Drawer.Header />
       </Drawer>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -55,17 +59,23 @@ describe("Drawer", () => {
   });
 
   describe("given the direction prop is set", () => {
-    it("should render with appropriate class name (right)", () => {
+    it("should render with appropriate class name (right)", async () => {
       render(<Drawer isOpen direction="right" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
+
       expect(dialog).toHaveClass("--right");
     });
 
-    it("should render with appropriate class name (bottom)", () => {
+    it("should render with appropriate class name (bottom)", async () => {
       render(<Drawer isOpen direction="bottom" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
+
       expect(dialog).toHaveClass("--bottom");
     });
   });
@@ -105,6 +115,8 @@ describe("Drawer", () => {
 
       render(<App />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       const drawerContent = screen.getByText("Sample content");
 

package/src/components/Modal/Modal.test.tsx

@@ -25,13 +25,15 @@ describe("Modal", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should render with default class names", () => {
+  it("should render with default class names", async () => {
     render(
       <Modal isOpen>
         <Modal.Header />
       </Modal>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -39,13 +41,15 @@ describe("Modal", () => {
     expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
   });
 
-  it("should render with custom class name", () => {
+  it("should render with custom class name", async () => {
     render(
       <Modal className={MODAL_TEST_CLASS_NAME} isOpen>
         <Modal.Header />
       </Modal>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -55,18 +59,22 @@ describe("Modal", () => {
   });
 
   describe("given the animation prop is set to slideUp", () => {
-    it("should render with appropriate class name", () => {
+    it("should render with appropriate class name", async () => {
       render(<Modal isOpen animation="slideUp" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       expect(dialog).toHaveClass("--slide-up");
     });
   });
 
   describe("given the animation prop is set to fade", () => {
-    it("should render with appropriate class name", () => {
+    it("should render with appropriate class name", async () => {
       render(<Modal isOpen animation="fade" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       expect(dialog).toHaveClass("--fade");
     });
@@ -87,6 +95,8 @@ describe("Modal", () => {
 
       render(<App />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       const drawerContent = screen.getByText("Sample content");
 

package/src/components/Popover/Popover.tsx

@@ -135,7 +135,12 @@ export const Popover = (props: PopoverProps) => {
             </header>
             <div className="mobius/PopoverBody">{children}</div>
           </div>
-          <FloatingArrow ref={arrowRef} context={context} width={20} />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            width={20}
+            className="mobius/PopoverArrowIcon"
+          />
         </div>
       )}
     </>

package/src/hooks/index.tsx

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/src/hooks/useDialog/useDialog.ts

@@ -27,6 +27,7 @@ const FALLBACK_TRANSITION_DURATION = 0;
 export const useDialog = (props: useDialogProps) => {
   const { ref, isOpen, transition, onOpen, onClose } = props;
   const shouldTransition = supportsDialog() && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
 
   // Read CSS variable value as number
   const TRANSITION_DURATION_IN_MS =
@@ -38,7 +39,6 @@ export const useDialog = (props: useDialogProps) => {
       )) ||
     FALLBACK_TRANSITION_DURATION;
 
-  useDialogPolyfill(ref);
   useBodyScrollLock({ enabled: isOpen });
 
   const open = useCallback(() => {
@@ -77,6 +77,8 @@ export const useDialog = (props: useDialogProps) => {
   useEffect(() => {
     async function toggleDialog() {
       if (isOpen && !ref.current?.open) {
+        await polyfillDialog(ref);
+
         open();
         // Fix opening transition in Safari being skipped
         // by wrapping with setTimeout
@@ -89,7 +91,7 @@ export const useDialog = (props: useDialogProps) => {
     }
 
     toggleDialog();
-  }, [handleClose, isOpen, open, ref]);
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
 
   return {
     open,

package/src/hooks/useDialogPolyfill/useDialogPolyfill.ts

@@ -1,32 +1,32 @@
-import { MutableRefObject, useEffect } from "react";
+import { MutableRefObject, useRef } from "react";
 import { supportsDialog } from "../../utils";
 
 // Add polyfill for HTML Dialog in old browsers
-export const useDialogPolyfill = (
-  ref: MutableRefObject<HTMLDialogElement | null>,
-) => {
+export const useDialogPolyfill = () => {
   const hasDialogSupport = supportsDialog();
+  const hasAlreadyLoaded = useRef(false);
 
-  useEffect(() => {
-    async function polyfillDialog() {
-      if (
-        !hasDialogSupport &&
-        typeof window !== "undefined" &&
-        ref.current !== null
-      ) {
-        const { default: dialogPolyfill } = await import("dialog-polyfill");
+  const polyfillDialog = async (
+    ref: MutableRefObject<HTMLDialogElement | null>,
+  ) => {
+    if (
+      !hasAlreadyLoaded.current &&
+      !hasDialogSupport &&
+      typeof window !== "undefined" &&
+      ref.current !== null
+    ) {
+      const { default: dialogPolyfill } = await import("dialog-polyfill");
+      hasAlreadyLoaded.current = true;
 
-        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);
-        }
+      try {
+        dialogPolyfill.registerDialog(ref.current);
+      } catch (error) {
+        console.error("Failed to load dialog-polyfill", error);
       }
     }
+  };
 
-    polyfillDialog();
-  }, [ref, hasDialogSupport]);
+  return {
+    polyfillDialog,
+  };
 };

package/dist/cjs/components/Accordion/Accordion.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode, Ref, RefAttributes } from "react";
-import { ForwardedRefComponent } from "../../types/components";
-import { DOMProps } from "../../types/dom";
-export type AccordionElementType = HTMLDivElement;
-export type AccordionRef = Ref<AccordionElementType>;
-export interface AccordionLinkProps extends DOMProps {
-    /** Link text to show accordion content */
-    text?: string;
-    onClick?: () => void;
-    toggle: () => void;
-    headerChildren?: ReactNode;
-    ariaExpanded: boolean | undefined;
-}
-export interface AccordionProps extends DOMProps, RefAttributes<AccordionElementType> {
-    /** Custom class name for setting specific CSS */
-    className?: string;
-    /** Link text to show accordion content */
-    showText?: string;
-    /** Link text to hide accordion content */
-    hideText?: string;
-    /** Whether header is above or below content */
-    headerPosition?: "top" | "bottom";
-    /** Whether to expand the accordion initially */
-    startOpen?: boolean | undefined;
-    /** Callback that fires each time the accordion is opened */
-    onOpen?: () => void;
-    /** Callback that fires each time the accordion is closed */
-    onClose?: () => void;
-    /** Callback that fires each time the accordion state changes */
-    onChange?: (state: boolean) => void;
-    children?: ReactNode;
-    headerChildren?: ReactNode;
-}
-export declare const Accordion: ForwardedRefComponent<AccordionProps, AccordionElementType>;

package/dist/cjs/components/Accordion/Accordion.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "..";
-type StoryType = StoryObj<typeof Accordion>;
-declare const meta: Meta<typeof Accordion>;
-export declare const Normal: StoryType;
-export declare const StartExpanded: StoryType;
-export declare const BottomHeader: StoryType;
-export declare const WithChildren: StoryType;
-export declare const ComplexContent: StoryType;
-export default meta;