@entur/modal 1.7.71 → 1.7.73-beta.0

package/dist/modal.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n  className,\n  open,\n  ...rest\n}) => (\n  <DialogOverlay\n    className={classNames('eds-modal__overlay', className)}\n    isOpen={open}\n    {...rest}\n  />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  [key: string]: any;\n};\n\nexport const headingsMap = {\n  extraSmall: Heading4,\n  small: Heading3,\n  medium: Heading2,\n  large: Heading2,\n  extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  children,\n  className,\n  size,\n  title,\n  align = 'start',\n  ...rest\n}) => {\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const randomId = useRandomId('eds-modal');\n  return (\n    <DialogContent\n      className={classNames(\n        'eds-modal__content',\n        `eds-modal__content--size-${size}`,\n        `eds-modal__content--align-${align}`,\n        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      {title && (\n        <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n  /** Innholdet. Typisk tekst, lenker eller knapper */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Tekst som beskriver lukkeknappen for skjermlesere\n   * @default 'Lukk skuff'\n   */\n  closeLabel?: string;\n  /** Om draweren skal vises i mørk variant\n   * @default false\n   */\n  contrast?: boolean;\n  /** Callback som kalles når brukeren ønsker å lukke draweren */\n  onDismiss: () => void;\n  /** Om draweren er åpen eller ikke\n   * @default true\n   */\n  open?: boolean;\n  /** Tittel på toppen av draweren */\n  title: string;\n  /** Styling som sendes til Drawer */\n  style?: React.CSSProperties;\n  /** Legger på et overlay over resten av siden */\n  overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  className,\n  closeLabel = 'Lukk skuff',\n  contrast = false,\n  open = true,\n  onDismiss,\n  title,\n  style,\n  overlay = false,\n}) => {\n  const titleId = useRandomId('eds-drawer');\n\n  if (!open) {\n    return null;\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      onDismiss();\n    }\n  };\n\n  const Wrapper = contrast ? Contrast : React.Fragment;\n  const ContentContainer = overlay ? DialogContent : 'div';\n  return (\n    <ConditionalWrapper\n      condition={overlay}\n      wrapper={(children: React.ReactNode) => (\n        <ModalOverlay open={open} onDismiss={onDismiss}>\n          {children}\n        </ModalOverlay>\n      )}\n    >\n      <Wrapper>\n        <ContentContainer\n          aria-labelledby={titleId}\n          className={classNames('eds-drawer', className)}\n          onKeyDown={handleKeyDown}\n          style={style}\n        >\n          <MoveFocusInside>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n              aria-label={closeLabel}\n            >\n              <CloseIcon aria-hidden />\n            </IconButton>\n            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n          </MoveFocusInside>\n        </ContentContainer>\n      </Wrapper>\n    </ConditionalWrapper>\n  );\n};\n\nconst ConditionalWrapper: React.FC<{\n  condition: boolean;\n  wrapper: (child: JSX.Element) => JSX.Element;\n  children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n  condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Skjermleser-label til lukk-knappen */\n  closeLabel?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Om modalen skal lukkes når man klikker på utsiden av den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  children,\n  closeLabel = 'Lukk',\n  initialFocusRef,\n  open,\n  onDismiss,\n  size,\n  align = 'start',\n  title,\n  closeOnClickOutside = true,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-modal');\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n  let handleOnDismiss;\n  if (onDismiss && closeOnClickOutside) {\n    handleOnDismiss = onDismiss;\n  }\n  return (\n    <ModalOverlay\n      open={open}\n      onDismiss={handleOnDismiss}\n      initialFocusRef={initialFocusRef}\n    >\n      <ModalContent size={size} align={align} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n            type=\"button\"\n          >\n            <CloseIcon />\n          </IconButton>\n        )}\n        {title && (\n          <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n            {title}\n          </Heading>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","_ref2","condition","wrapper","warnAboutMissingStyles","_ref$closeLabel","closeLabel","_ref$contrast","contrast","_ref$open","onDismiss","style","_ref$overlay","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","handleOnDismiss","initialFocusRef","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes"],"mappings":"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"}