@transferwise/components 46.74.0 → 46.74.1

package/build/dimmer/Dimmer.js

@@ -35,7 +35,8 @@ const Dimmer = ({
   open = false,
   scrollable = false,
   transparent = false,
-  onClose
+  onClose,
+  onExited: handleExited
 }) => {
   const [hasNotExited, setHasNotExited] = React.useState(false);
   const dimmerReference = React.useRef(null);
@@ -70,6 +71,7 @@ const Dimmer = ({
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
+    handleExited?.();
   };
   React.useEffect(() => {
     const localReferenceCopy = dimmerReference.current;

package/build/dimmer/Dimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/Dimmer.mjs

@@ -31,7 +31,8 @@ const Dimmer = ({
   open = false,
   scrollable = false,
   transparent = false,
-  onClose
+  onClose,
+  onExited: handleExited
 }) => {
   const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef(null);
@@ -66,6 +67,7 @@ const Dimmer = ({
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
+    handleExited?.();
   };
   useEffect(() => {
     const localReferenceCopy = dimmerReference.current;

package/build/dimmer/Dimmer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/drawer/Drawer.js

@@ -19,6 +19,7 @@ function Drawer({
   footerContent,
   headerTitle,
   onClose,
+  onUnmount,
   open = false,
   position: position$1 = 'right',
   role = 'dialog',
@@ -33,6 +34,7 @@ function Drawer({
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
     open: open,
     onClose: onClose,
+    onExited: onUnmount,
     children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel.default, {
       open: open,
       position: isMobile ? position.Position.BOTTOM : position$1,

package/build/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,cAAA,CAACE,oBAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGf,UAAS;AAAAN,MAAAA,QAAA,eACxEsB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,SAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,eAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,cAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,cAAA,CAACa,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n  onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  onUnmount,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA6BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT,CAAA;EAED,MAAM;AAAEO,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,cAAA,CAACG,oBAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGhB,UAAS;AAAAP,MAAAA,QAAA,eACxEwB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,SAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,eAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVe,cAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDe,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/drawer/Drawer.mjs

@@ -17,6 +17,7 @@ function Drawer({
   footerContent,
   headerTitle,
   onClose,
+  onUnmount,
   open = false,
   position = 'right',
   role = 'dialog',
@@ -31,6 +32,7 @@ function Drawer({
   return /*#__PURE__*/jsx(Dimmer, {
     open: open,
     onClose: onClose,
+    onExited: onUnmount,
     children: /*#__PURE__*/jsx(SlidingPanel, {
       open: open,
       position: isMobile ? Position.BOTTOM : position,

package/build/drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,GAAA,CAACE,YAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGf,QAAS;AAAAN,MAAAA,QAAA,eACxEsB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,IAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,IAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,GAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,GAAA,CAACa,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n  onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  onUnmount,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA6BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT,CAAA;EAED,MAAM;AAAEO,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,GAAA,CAACG,YAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGhB,QAAS;AAAAP,MAAAA,QAAA,eACxEwB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,IAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,IAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVe,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDe,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/modal/Modal.js

@@ -21,6 +21,7 @@ const Modal = ({
   body,
   footer = null,
   onClose,
+  onUnmount,
   className,
   open,
   size: size$1 = size.Size.MEDIUM,
@@ -45,6 +46,7 @@ const Modal = ({
     footerContent: footer,
     position: position.Position.BOTTOM,
     onClose: onClose,
+    onUnmount: onUnmount,
     children: body
   }) : /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
     open: open,
@@ -52,6 +54,7 @@ const Modal = ({
     contentPosition: position$1,
     disableClickToClose: disableDimmerClickToClose,
     onClose: onClose,
+    onExited: onUnmount,
     children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       nodeRef: contentReference,
       appear: true,

package/build/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {\n                    'modal--withoutborder': noDivider,\n                  })}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {\n                    'modal--withoutborder': noDivider,\n                  })}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}

package/build/modal/Modal.mjs

@@ -19,6 +19,7 @@ const Modal = ({
   body,
   footer = null,
   onClose,
+  onUnmount,
   className,
   open,
   size = Size.MEDIUM,
@@ -43,6 +44,7 @@ const Modal = ({
     footerContent: footer,
     position: Position.BOTTOM,
     onClose: onClose,
+    onUnmount: onUnmount,
     children: body
   }) : /*#__PURE__*/jsx(Dimmer, {
     open: open,
@@ -50,6 +52,7 @@ const Modal = ({
     contentPosition: position,
     disableClickToClose: disableDimmerClickToClose,
     onClose: onClose,
+    onExited: onUnmount,
     children: /*#__PURE__*/jsx(CSSTransition, {
       nodeRef: contentReference,
       appear: true,

package/build/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {\n                    'modal--withoutborder': noDivider,\n                  })}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {\n                    'modal--withoutborder': noDivider,\n                  })}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}

package/build/types/dimmer/Dimmer.d.ts

@@ -11,9 +11,10 @@ export type DimmerProps = CommonProps & {
     scrollable?: boolean;
     transparent?: boolean;
     onClose?: (event: KeyboardEvent | MouseEvent) => void;
+    onExited?: () => void;
 };
 export declare const handleTouchMove: (event: Event) => void;
-declare const Dimmer: ({ children, className, disableClickToClose, contentPosition, fadeContentOnEnter, fadeContentOnExit, open, scrollable, transparent, onClose, }: DimmerProps) => import("react").JSX.Element;
+declare const Dimmer: ({ children, className, disableClickToClose, contentPosition, fadeContentOnEnter, fadeContentOnExit, open, scrollable, transparent, onClose, onExited: handleExited, }: DimmerProps) => import("react").JSX.Element;
 export declare const DimmerContentWrapper: ({ children, scrollBody, }: {
     children: React.ReactElement;
     scrollBody: boolean;

package/build/types/dimmer/Dimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.d.ts","sourceRoot":"","sources":["../../../src/dimmer/Dimmer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGxF,OAAO,EAEL,WAAW,EACX,cAAc,EACd,cAAc,EACd,WAAW,EAEZ,MAAM,WAAW,CAAC;AAOnB,eAAO,MAAM,cAAc,MAAM,CAAC;AAIlC,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,kJAWT,WAAW,gCAiHb,CAAC;AAsBF,eAAO,MAAM,oBAAoB,8BAG9B;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB,2FAcA,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;;AAElB,wBAAsC"}
+{"version":3,"file":"Dimmer.d.ts","sourceRoot":"","sources":["../../../src/dimmer/Dimmer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGxF,OAAO,EAEL,WAAW,EACX,cAAc,EACd,cAAc,EACd,WAAW,EAEZ,MAAM,WAAW,CAAC;AAOnB,eAAO,MAAM,cAAc,MAAM,CAAC;AAIlC,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,0KAYT,WAAW,gCAmHb,CAAC;AAsBF,eAAO,MAAM,oBAAoB,8BAG9B;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB,2FAcA,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;;AAElB,wBAAsC"}

package/build/types/drawer/Drawer.d.ts

@@ -14,6 +14,7 @@ export type DrawerProps = {
     position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
     /** The action to perform on close click. */
     onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+    onUnmount?: () => void;
 } & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
-export default function Drawer({ children, className, footerContent, headerTitle, onClose, open, position, role, 'aria-labelledby': ariaLabelledBy, }: DrawerProps): import("react").JSX.Element;
+export default function Drawer({ children, className, footerContent, headerTitle, onClose, onUnmount, open, position, role, 'aria-labelledby': ariaLabelledBy, }: DrawerProps): import("react").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/build/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7D,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAY,EACZ,QAAkB,EAClB,IAAe,EACf,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAuCb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAY,EACZ,QAAkB,EAClB,IAAe,EACf,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAuCb"}

package/build/types/modal/Modal.d.ts

@@ -6,11 +6,12 @@ export type ModalProps = CommonProps & {
     footer?: ReactNode;
     size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;
     onClose: () => void;
+    onUnmount?: () => void;
     open: boolean;
     scroll?: ScrollContent | ScrollViewport;
     position?: PositionTop | PositionCenter;
     disableDimmerClickToClose?: boolean;
 };
-declare const Modal: ({ title, body, footer, onClose, className, open, size, scroll, position, disableDimmerClickToClose, ...otherProps }: ModalProps) => import("react").JSX.Element;
+declare const Modal: ({ title, body, footer, onClose, onUnmount, className, open, size, scroll, position, disableDimmerClickToClose, ...otherProps }: ModalProps) => import("react").JSX.Element;
 export default Modal;
 //# sourceMappingURL=Modal.d.ts.map

package/build/types/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAG7D,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,wHAYR,UAAU,gCAgHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAG7D,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,mIAaR,UAAU,gCAkHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/uploadInput/UploadInput.d.ts

@@ -72,6 +72,15 @@ export type UploadInputProps = {
 } & Pick<UploadButtonProps, 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'> & {
     onDownload?: UploadItemProps['onDownload'];
 } & CommonProps;
+/**
+ * The component allows users to upload files, manage the list of uploaded files,
+ * and handle file validation and deletion.
+ *
+ * @param {UploadInputProps} props - The properties for the UploadInput component.
+ *
+ * @see {@link UploadInput} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
+ */
 declare const UploadInput: ({ files, fileInputName, className, deleteConfirm, disabled, multiple, fileTypes, sizeLimit, description, onUploadFile, onDeleteFile, onValidationError, onFilesChange, onDownload, maxFiles, maxFilesErrorMessage, id, sizeLimitErrorMessage, uploadButtonTitle, }: UploadInputProps) => import("react").JSX.Element;
 export default UploadInput;
 //# sourceMappingURL=UploadInput.d.ts.map

package/build/types/uploadInput/UploadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAYjE,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCA8SlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAgCjE;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCAkTlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItem.d.ts

@@ -7,6 +7,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
     singleFileUpload: boolean;
     canDelete: boolean;
     onDelete: () => void;
+    onFocus: () => void;
     /**
      * Callback to be called when the file link is clicked.
      * When provided, you need to manually trigger actions to load/download the file.
@@ -17,11 +18,25 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
     ref?: React.Ref<UploadItemRef>;
 };
 interface UploadItemRef {
+    /**
+     * A method to set focus on the upload item.
+     * @returns {void}
+     */
     focus: () => void;
+    /**
+     * A required unique identifier for the upload item.
+     */
+    id: string | number;
+    /**
+     * An optional status of the upload item.
+     */
+    status?: string;
 }
 export declare enum TEST_IDS {
     uploadItem = "uploadItem",
-    mediaBody = "mediaBody"
+    mediaBody = "mediaBody",
+    link = "link",
+    action = "action"
 }
 declare const UploadItem: import("react").ForwardRefExoticComponent<Omit<UploadItemProps, "ref"> & import("react").RefAttributes<UploadItemRef>>;
 export default UploadItem;

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AAEF,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,wHAgJf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AACF,UAAU,aAAa;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,QAAA,MAAM,UAAU,wHAyJf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAc,MAAM,OAAO,CAAC;AASlE,eAAO,MAAM,cAAc;UALnB,MAAM;iBACC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;sBACtB,OAAO;;;sEAyB1B,CAAC"}
+{"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAc,MAAM,OAAO,CAAC;AASlE,eAAO,MAAM,cAAc;UALnB,MAAM;iBACC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;sBACtB,OAAO;;;sEAiC1B,CAAC"}