@transferwise/components 46.119.0 → 46.119.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/dimmer/Dimmer.js +0 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +0 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/inputs/_BottomSheet.js +0 -1
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +0 -1
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/inputs/_Popover.js +0 -1
- package/build/inputs/_Popover.js.map +1 -1
- package/build/inputs/_Popover.mjs +0 -1
- package/build/inputs/_Popover.mjs.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/inputs/_Popover.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/dimmer/Dimmer.tsx +1 -5
- package/src/inputs/_BottomSheet.tsx +1 -5
- package/src/inputs/_Popover.tsx +1 -5
package/build/dimmer/Dimmer.js
CHANGED
|
@@ -172,7 +172,6 @@ const DimmerWrapper = ({
|
|
|
172
172
|
return open || hasNotExited ? /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
|
|
173
173
|
theme: "personal",
|
|
174
174
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
175
|
-
isNotRootProvider: true,
|
|
176
175
|
children: children
|
|
177
176
|
}) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
178
177
|
children: children
|
|
@@ -1 +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 removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\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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"}
|
|
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 removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\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 theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\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","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
|
package/build/dimmer/Dimmer.mjs
CHANGED
|
@@ -168,7 +168,6 @@ const DimmerWrapper = ({
|
|
|
168
168
|
return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
|
|
169
169
|
theme: "personal",
|
|
170
170
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
171
|
-
isNotRootProvider: true,
|
|
172
171
|
children: children
|
|
173
172
|
}) : /*#__PURE__*/jsx(Fragment, {
|
|
174
173
|
children: children
|
|
@@ -1 +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 removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\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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"}
|
|
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 removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\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 theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\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","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
|
|
@@ -53,7 +53,6 @@ function BottomSheet({
|
|
|
53
53
|
children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
|
|
54
54
|
theme: "personal",
|
|
55
55
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
56
|
-
isNotRootProvider: true,
|
|
57
56
|
children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
|
|
58
57
|
show: open,
|
|
59
58
|
className: "np-bottom-sheet-v2-container",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider
|
|
1
|
+
{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
|
@@ -51,7 +51,6 @@ function BottomSheet({
|
|
|
51
51
|
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
52
52
|
theme: "personal",
|
|
53
53
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
54
|
-
isNotRootProvider: true,
|
|
55
54
|
children: /*#__PURE__*/jsxs(Transition, {
|
|
56
55
|
show: open,
|
|
57
56
|
className: "np-bottom-sheet-v2-container",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider
|
|
1
|
+
{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
package/build/inputs/_Popover.js
CHANGED
|
@@ -68,7 +68,6 @@ function Popover({
|
|
|
68
68
|
children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
|
|
69
69
|
theme: "personal",
|
|
70
70
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
71
|
-
isNotRootProvider: true,
|
|
72
71
|
children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
|
|
73
72
|
show: open,
|
|
74
73
|
leave: "transition-opacity",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: PopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n placement,\n middleware: [\n offset(8),\n flip({ padding: floatingPadding, crossAxis: false }),\n shift(),\n floatingSize({\n padding: floatingPadding,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider
|
|
1
|
+
{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: PopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n placement,\n middleware: [\n offset(8),\n flip({ padding: floatingPadding, crossAxis: false }),\n shift(),\n floatingSize({\n padding: floatingPadding,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
|
|
@@ -66,7 +66,6 @@ function Popover({
|
|
|
66
66
|
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
67
67
|
theme: "personal",
|
|
68
68
|
screenMode: theme === 'personal' ? screenMode : 'light',
|
|
69
|
-
isNotRootProvider: true,
|
|
70
69
|
children: /*#__PURE__*/jsx(Transition, {
|
|
71
70
|
show: open,
|
|
72
71
|
leave: "transition-opacity",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: PopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n placement,\n middleware: [\n offset(8),\n flip({ padding: floatingPadding, crossAxis: false }),\n shift(),\n floatingSize({\n padding: floatingPadding,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider
|
|
1
|
+
{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: PopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n placement,\n middleware: [\n offset(8),\n flip({ padding: floatingPadding, crossAxis: false }),\n shift(),\n floatingSize({\n padding: floatingPadding,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
|
|
@@ -1 +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,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EACjB,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,GAAI,OAAO,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,uKAYb,WAAW,gCAmHb,CAAC;
|
|
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,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EACjB,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,GAAI,OAAO,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,uKAYb,WAAW,gCAmHb,CAAC;AAkBF,eAAO,MAAM,oBAAoB,GAAI,2BAGlC;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB,2FAcA,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;;AAElB,wBAAsC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+
|
|
1
|
+
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAyFlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+
|
|
1
|
+
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAiFd"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.119.
|
|
3
|
+
"version": "46.119.3",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
86
86
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
87
87
|
"@transferwise/less-config": "3.1.2",
|
|
88
|
-
"@transferwise/neptune-css": "14.26.
|
|
88
|
+
"@transferwise/neptune-css": "14.26.1",
|
|
89
89
|
"@wise/wds-configs": "0.0.0",
|
|
90
|
-
"@wise/components-theming": "1.9.
|
|
90
|
+
"@wise/components-theming": "1.9.4"
|
|
91
91
|
},
|
|
92
92
|
"peerDependencies": {
|
|
93
93
|
"@transferwise/icons": "^3 || ^4",
|
|
@@ -121,7 +121,8 @@
|
|
|
121
121
|
"virtua": "^0.48.2"
|
|
122
122
|
},
|
|
123
123
|
"publishConfig": {
|
|
124
|
-
"access": "public"
|
|
124
|
+
"access": "public",
|
|
125
|
+
"registry": "https://registry.npmjs.org/"
|
|
125
126
|
},
|
|
126
127
|
"scripts": {
|
|
127
128
|
"dev": "npm-run-all --parallel dev:* dev:*:* storybook:dev",
|
package/src/dimmer/Dimmer.tsx
CHANGED
|
@@ -183,11 +183,7 @@ const DimmerWrapper: React.ComponentType<{
|
|
|
183
183
|
const { screenMode, theme } = useTheme();
|
|
184
184
|
|
|
185
185
|
return open || hasNotExited ? (
|
|
186
|
-
<ThemeProvider
|
|
187
|
-
theme="personal"
|
|
188
|
-
screenMode={theme === 'personal' ? screenMode : 'light'}
|
|
189
|
-
isNotRootProvider
|
|
190
|
-
>
|
|
186
|
+
<ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
|
|
191
187
|
{children}
|
|
192
188
|
</ThemeProvider>
|
|
193
189
|
) : (
|
|
@@ -71,11 +71,7 @@ export function BottomSheet({
|
|
|
71
71
|
})}
|
|
72
72
|
|
|
73
73
|
<FloatingPortal>
|
|
74
|
-
<ThemeProvider
|
|
75
|
-
theme="personal"
|
|
76
|
-
screenMode={theme === 'personal' ? screenMode : 'light'}
|
|
77
|
-
isNotRootProvider
|
|
78
|
-
>
|
|
74
|
+
<ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
|
|
79
75
|
<Transition
|
|
80
76
|
show={open}
|
|
81
77
|
className="np-bottom-sheet-v2-container"
|
package/src/inputs/_Popover.tsx
CHANGED
|
@@ -90,11 +90,7 @@ export function Popover({
|
|
|
90
90
|
})}
|
|
91
91
|
|
|
92
92
|
<FloatingPortal>
|
|
93
|
-
<ThemeProvider
|
|
94
|
-
theme="personal"
|
|
95
|
-
screenMode={theme === 'personal' ? screenMode : 'light'}
|
|
96
|
-
isNotRootProvider
|
|
97
|
-
>
|
|
93
|
+
<ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
|
|
98
94
|
<Transition
|
|
99
95
|
show={open}
|
|
100
96
|
leave="transition-opacity"
|