{"version":3,"file":"useModal.cjs","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import { useA11yDialog } from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { ModalConfig, UseModalOptions } from \"./types.js\";\n\nexport type ModalInstance = ReturnType<typeof useA11yDialog>[0];\n\nexport type UseModalReturn = readonly [ModalInstance, ModalConfig];\n\n/**\n * @example\n * ```jsx\n * const heading = \"Bekreft sletting\";\n * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });\n *\n * useEffect(() => {\n *      if (!instance) {\n *          return;\n *      }\n *      instance.show();\n *  }, [instance]);\n *\n * return ReactDOM.createPortal(\n *      <ModalContainer {...container}>\n *          <ModalOverlay {...overlay} />\n *          <Modal {...modal}>\n *              <ModalHeader>\n *                  <ModalTitle {...title}>{heading}</ModalTitle>\n *                  <ModalCloseButton {...closeButton} />\n *              </ModalHeader>\n *              <ModalBody>\n *                  Er du sikker på at du vil slette Foo Bar Baz?\n *              </ModalBody>\n *              <ModalActions>\n *                  <PrimaryButton\n *                      onClick={() => {\n *                          // Do the thing\n *                          instance?.hide()\n *                      }}\n *                  >\n *                      Bekreft\n *                  </PrimaryButton>\n *                  <TertiaryButton onClick={() => instance?.hide()}>\n *                     Avbryt\n *                 </TertiaryButton>\n *              </ModalActions>\n *          </Modal>\n *      </ModalContainer>,\n *      document.body,\n *  );\n * ```\n */\nexport function useModal(props: UseModalOptions): UseModalReturn {\n    const {\n        id: idProp,\n        role = \"dialog\",\n        closeButtonLabel = \"Lukk\",\n        ...rest\n    } = props;\n\n    const id = useId(idProp || \"jkl-modal\", { generateSuffix: !idProp });\n\n    const [instance, config] = useA11yDialog({\n        id,\n        role,\n        ...rest,\n    });\n\n    const { dialog, ...restConfig } = config;\n\n    const modalConfig: ModalConfig = {\n        modal: config.dialog,\n        ...restConfig,\n        closeButton: {\n            ...config.closeButton,\n            \"aria-label\": closeButtonLabel,\n        },\n    };\n\n    return [instance, modalConfig];\n}\n"],"names":["props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"+KAmDO,SAAkBA,GACrB,MACIC,GAAIC,EACJC,KAAAA,EAAO,SACPC,iBAAAA,EAAmB,UAChBC,GACHL,EAEEC,EAAKK,EAAAA,MAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,gBAAc,CACrCT,GAAAA,EACAE,KAAAA,KACGE,KAGCM,OAAAA,KAAWC,GAAeH,EAWlC,MAAO,CAACD,EATyB,CAC7BK,MAAOJ,EAAOE,UACXC,EACHE,YAAa,IACNL,EAAOK,YACV,aAAcV,IAK1B"}