@transferwise/components 46.119.2 → 46.119.4
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/chips/Chip.js +3 -11
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs +3 -11
- package/build/chips/Chip.mjs.map +1 -1
- 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/SelectInput.js +5 -1
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +5 -1
- package/build/inputs/SelectInput.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/progressBar/ProgressBar.js +1 -5
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs +1 -5
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/select/Select.js +1 -7
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -7
- package/build/select/Select.mjs.map +1 -1
- package/build/types/chips/Chip.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.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/build/types/progressBar/ProgressBar.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/chips/Chip.tsx +5 -14
- package/src/chips/__snapshots__/Chips.spec.tsx.snap +31 -29
- package/src/dimmer/Dimmer.tsx +1 -5
- package/src/inputs/SelectInput.spec.tsx +40 -0
- package/src/inputs/SelectInput.story.tsx +8 -2
- package/src/inputs/SelectInput.tsx +10 -1
- package/src/inputs/_BottomSheet.tsx +1 -5
- package/src/inputs/_Popover.tsx +1 -5
- package/src/progressBar/ProgressBar.tsx +1 -6
- package/src/select/Select.tsx +1 -2
package/build/chips/Chip.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var componentsTheming = require('@wise/components-theming');
|
|
6
5
|
var clsx = require('clsx');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
var Body = require('../body/Body.js');
|
|
@@ -43,9 +42,6 @@ const Chip = ({
|
|
|
43
42
|
const isActionable = onClick || onKeyPress;
|
|
44
43
|
const defaultRole = isActionable ? 'button' : undefined;
|
|
45
44
|
const tabIndex = isActionable ? 0 : -1;
|
|
46
|
-
const {
|
|
47
|
-
isModern
|
|
48
|
-
} = componentsTheming.useTheme();
|
|
49
45
|
const closeButtonReference = React.useRef(null);
|
|
50
46
|
const previousCloseButtonShown = React.useRef(undefined);
|
|
51
47
|
React.useEffect(() => {
|
|
@@ -64,20 +60,16 @@ const Chip = ({
|
|
|
64
60
|
onClick,
|
|
65
61
|
onKeyPress
|
|
66
62
|
}),
|
|
67
|
-
children: [
|
|
63
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
68
64
|
"aria-hidden": !!onRemove,
|
|
69
65
|
type: typography.Typography.BODY_DEFAULT_BOLD,
|
|
70
66
|
children: label
|
|
71
|
-
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
72
|
-
"aria-hidden": "false",
|
|
73
|
-
className: "np-chip-label",
|
|
74
|
-
children: label
|
|
75
67
|
}), onRemove ? /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
|
|
76
68
|
ref: closeButtonReference,
|
|
77
|
-
className:
|
|
69
|
+
className: "btn-unstyled",
|
|
78
70
|
"aria-label": closeButton?.['aria-label'],
|
|
79
71
|
size: "sm",
|
|
80
|
-
filled:
|
|
72
|
+
filled: true,
|
|
81
73
|
onClick: onRemove
|
|
82
74
|
}) : null]
|
|
83
75
|
}, value);
|
package/build/chips/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
|
package/build/chips/Chip.mjs
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { useTheme } from '@wise/components-theming';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
2
|
import { useRef, useEffect } from 'react';
|
|
4
3
|
import Body from '../body/Body.mjs';
|
|
@@ -39,9 +38,6 @@ const Chip = ({
|
|
|
39
38
|
const isActionable = onClick || onKeyPress;
|
|
40
39
|
const defaultRole = isActionable ? 'button' : undefined;
|
|
41
40
|
const tabIndex = isActionable ? 0 : -1;
|
|
42
|
-
const {
|
|
43
|
-
isModern
|
|
44
|
-
} = useTheme();
|
|
45
41
|
const closeButtonReference = useRef(null);
|
|
46
42
|
const previousCloseButtonShown = useRef(undefined);
|
|
47
43
|
useEffect(() => {
|
|
@@ -60,20 +56,16 @@ const Chip = ({
|
|
|
60
56
|
onClick,
|
|
61
57
|
onKeyPress
|
|
62
58
|
}),
|
|
63
|
-
children: [
|
|
59
|
+
children: [/*#__PURE__*/jsx(Body, {
|
|
64
60
|
"aria-hidden": !!onRemove,
|
|
65
61
|
type: Typography.BODY_DEFAULT_BOLD,
|
|
66
62
|
children: label
|
|
67
|
-
}) : /*#__PURE__*/jsx("span", {
|
|
68
|
-
"aria-hidden": "false",
|
|
69
|
-
className: "np-chip-label",
|
|
70
|
-
children: label
|
|
71
63
|
}), onRemove ? /*#__PURE__*/jsx(CloseButton, {
|
|
72
64
|
ref: closeButtonReference,
|
|
73
|
-
className:
|
|
65
|
+
className: "btn-unstyled",
|
|
74
66
|
"aria-label": closeButton?.['aria-label'],
|
|
75
67
|
size: "sm",
|
|
76
|
-
filled:
|
|
68
|
+
filled: true,
|
|
77
69
|
onClick: onRemove
|
|
78
70
|
}) : null]
|
|
79
71
|
}, value);
|
package/build/chips/Chip.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
|
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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"}
|
|
@@ -29,7 +29,11 @@ var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
|
|
|
29
29
|
|
|
30
30
|
const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
|
|
31
31
|
function searchableString(value) {
|
|
32
|
-
return value.trim().replace(/\s+/gu, ' ')
|
|
32
|
+
return value.trim().replace(/\s+/gu, ' ')
|
|
33
|
+
// NFD converts an Å to A + ̊ (and other special characters)
|
|
34
|
+
.normalize('NFD')
|
|
35
|
+
// and then this replaces the ̊ with nothing (and other special characters)
|
|
36
|
+
.replace(/[\u0300-\u036f]/g, '').toLowerCase();
|
|
33
37
|
}
|
|
34
38
|
function inferSearchableStrings(value) {
|
|
35
39
|
if (typeof value === 'string') {
|