@lumx/react 4.4.1-alpha.3 → 4.4.1-alpha.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/_internal/{BfgxEBp6.js → C9YCH96e.js} +5 -2
- package/_internal/C9YCH96e.js.map +1 -0
- package/index.d.ts +2 -2
- package/index.js +1 -1
- package/package.json +3 -3
- package/utils/index.js +1 -1
- package/_internal/BfgxEBp6.js.map +0 -1
|
@@ -56,6 +56,9 @@ function isClickAway(targets, elements) {
|
|
|
56
56
|
* Adds mousedown/touchstart listeners on `document` and calls the callback when a click
|
|
57
57
|
* occurs outside the elements returned by `getElements`.
|
|
58
58
|
*
|
|
59
|
+
* Note: when `getElements` returns an empty array, any click is considered a click away.
|
|
60
|
+
* Callers should guard against calling `setupClickAway` when no refs are registered.
|
|
61
|
+
*
|
|
59
62
|
* @param getElements - Getter returning the current list of elements considered "inside".
|
|
60
63
|
* @param callback - Callback to invoke on click away.
|
|
61
64
|
* @returns A teardown function that removes the event listeners.
|
|
@@ -67,7 +70,7 @@ function setupClickAway(getElements, callback) {
|
|
|
67
70
|
const listener = evt => {
|
|
68
71
|
const targets = [evt.composedPath?.()[0], evt.target];
|
|
69
72
|
const elements = getElements();
|
|
70
|
-
if (
|
|
73
|
+
if (isClickAway(targets, elements)) {
|
|
71
74
|
callback(evt);
|
|
72
75
|
}
|
|
73
76
|
};
|
|
@@ -189,4 +192,4 @@ const Portal = ({
|
|
|
189
192
|
};
|
|
190
193
|
|
|
191
194
|
export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
|
|
192
|
-
//# sourceMappingURL=
|
|
195
|
+
//# sourceMappingURL=C9YCH96e.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C9YCH96e.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n return !elements.some((element) => targets.some((target) => element?.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n getElements: () => HTMLElement[],\n callback: ClickAwayCallback,\n): (() => void) | undefined {\n if (!callback) {\n return undefined;\n }\n\n const listener: EventListener = (evt) => {\n const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n const elements = getElements();\n if (isClickAway(targets, elements)) {\n callback(evt);\n }\n };\n\n CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n return () => {\n CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n /**\n * A callback function to call when the user clicks away from the elements.\n */\n callback: EventListener | Falsy;\n /**\n * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n */\n childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n useEffect(() => {\n const getElements = () => {\n const refs = childrenRefs.current;\n if (!refs) return [];\n return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n };\n return setupClickAway(getElements, callback);\n }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n childrenRefs: Array<RefObject<HTMLElement>>;\n addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n /**\n * (Optional) Element that should be considered as part of the parent\n */\n parentRef?: RefObject<HTMLElement>;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n children,\n callback,\n childrenRefs,\n parentRef,\n}) => {\n const parentContext = useContext(ClickAwayAncestorContext);\n const currentContext = useMemo(() => {\n const context: ContextValue = {\n childrenRefs: [],\n /**\n * Add element refs to the current context and propagate to the parent context.\n */\n addRefs(...newChildrenRefs) {\n // Add element refs that should be considered as inside the click away context.\n context.childrenRefs.push(...newChildrenRefs);\n\n if (parentContext) {\n // Also add then to the parent context\n parentContext.addRefs(...newChildrenRefs);\n if (parentRef) {\n // The parent element is also considered as inside the parent click away context but not inside the current context\n parentContext.addRefs(parentRef);\n }\n }\n },\n };\n return context;\n }, [parentContext, parentRef]);\n\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!currentRefs) {\n return;\n }\n currentContext.addRefs(...currentRefs);\n }, [currentContext, childrenRefs]);\n\n useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n children?: React.ReactNode;\n value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n enabled?: boolean;\n children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n const init = React.useContext(PortalContext);\n const context = React.useMemo(\n () => {\n return enabled ? init() : null;\n },\n // Only update on 'enabled'\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [enabled],\n );\n\n React.useLayoutEffect(() => {\n return context?.teardown;\n }, [context?.teardown, enabled]);\n\n const { container } = context ?? {};\n if (!container || typeof container === 'string') {\n return <>{children}</>;\n }\n return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","filter","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -753,7 +753,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
|
|
|
753
753
|
* @param ref Component ref.
|
|
754
754
|
* @return React element.
|
|
755
755
|
*/
|
|
756
|
-
declare const Button: Comp<ButtonProps,
|
|
756
|
+
declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
|
|
757
757
|
|
|
758
758
|
interface IconButtonProps$1 extends BaseButtonProps {
|
|
759
759
|
/**
|
|
@@ -2259,7 +2259,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
|
|
|
2259
2259
|
* @param ref Component ref.
|
|
2260
2260
|
* @return React element.
|
|
2261
2261
|
*/
|
|
2262
|
-
declare const Link: Comp<LinkProps,
|
|
2262
|
+
declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
|
|
2263
2263
|
|
|
2264
2264
|
/**
|
|
2265
2265
|
* Defines the props of the component.
|
package/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import concat from 'lodash/concat.js';
|
|
|
16
16
|
import dropRight from 'lodash/dropRight.js';
|
|
17
17
|
import partition from 'lodash/partition.js';
|
|
18
18
|
import reduce from 'lodash/reduce.js';
|
|
19
|
-
import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/
|
|
19
|
+
import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/C9YCH96e.js';
|
|
20
20
|
import isEmpty from 'lodash/isEmpty.js';
|
|
21
21
|
import { getDisabledState } from '@lumx/core/js/utils/disabledState';
|
|
22
22
|
import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@floating-ui/react-dom": "^2.1.7",
|
|
10
|
-
"@lumx/core": "^4.4.1-alpha.
|
|
11
|
-
"@lumx/icons": "^4.4.1-alpha.
|
|
10
|
+
"@lumx/core": "^4.4.1-alpha.4",
|
|
11
|
+
"@lumx/icons": "^4.4.1-alpha.4",
|
|
12
12
|
"body-scroll-lock": "^3.1.5"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
@@ -99,6 +99,6 @@
|
|
|
99
99
|
"build:storybook": "storybook build"
|
|
100
100
|
},
|
|
101
101
|
"sideEffects": false,
|
|
102
|
-
"version": "4.4.1-alpha.
|
|
102
|
+
"version": "4.4.1-alpha.4",
|
|
103
103
|
"stableVersion": "4.4.0"
|
|
104
104
|
}
|
package/utils/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React__default, { useEffect } from 'react';
|
|
2
2
|
import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/
|
|
4
|
+
export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/C9YCH96e.js';
|
|
5
5
|
import noop from 'lodash/noop.js';
|
|
6
6
|
import findLast from 'lodash/findLast.js';
|
|
7
7
|
import find from 'lodash/find.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BfgxEBp6.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n return !elements.some((element) => targets.some((target) => element?.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n getElements: () => HTMLElement[],\n callback: ClickAwayCallback,\n): (() => void) | undefined {\n if (!callback) {\n return undefined;\n }\n\n const listener: EventListener = (evt) => {\n const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n const elements = getElements();\n if (elements.length > 0 && isClickAway(targets, elements)) {\n callback(evt);\n }\n };\n\n CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n return () => {\n CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n /**\n * A callback function to call when the user clicks away from the elements.\n */\n callback: EventListener | Falsy;\n /**\n * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n */\n childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n useEffect(() => {\n const getElements = () => {\n const refs = childrenRefs.current;\n if (!refs) return [];\n return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n };\n return setupClickAway(getElements, callback);\n }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n childrenRefs: Array<RefObject<HTMLElement>>;\n addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n /**\n * (Optional) Element that should be considered as part of the parent\n */\n parentRef?: RefObject<HTMLElement>;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n children,\n callback,\n childrenRefs,\n parentRef,\n}) => {\n const parentContext = useContext(ClickAwayAncestorContext);\n const currentContext = useMemo(() => {\n const context: ContextValue = {\n childrenRefs: [],\n /**\n * Add element refs to the current context and propagate to the parent context.\n */\n addRefs(...newChildrenRefs) {\n // Add element refs that should be considered as inside the click away context.\n context.childrenRefs.push(...newChildrenRefs);\n\n if (parentContext) {\n // Also add then to the parent context\n parentContext.addRefs(...newChildrenRefs);\n if (parentRef) {\n // The parent element is also considered as inside the parent click away context but not inside the current context\n parentContext.addRefs(parentRef);\n }\n }\n },\n };\n return context;\n }, [parentContext, parentRef]);\n\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!currentRefs) {\n return;\n }\n currentContext.addRefs(...currentRefs);\n }, [currentContext, childrenRefs]);\n\n useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n children?: React.ReactNode;\n value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n enabled?: boolean;\n children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n const init = React.useContext(PortalContext);\n const context = React.useMemo(\n () => {\n return enabled ? init() : null;\n },\n // Only update on 'enabled'\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [enabled],\n );\n\n React.useLayoutEffect(() => {\n return context?.teardown;\n }, [context?.teardown, enabled]);\n\n const { container } = context ?? {};\n if (!container || typeof container === 'string') {\n return <>{children}</>;\n }\n return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","length","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","filter","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}
|