@mittwald/flow-react-components 1.2.0-next.36 → 1.2.0-next.38
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/AGENTS.md +14 -0
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/default.mjs +1 -1
- package/dist/js/packages/components/src/components/Activity/Activity.mjs +16 -5
- package/dist/js/packages/components/src/components/Activity/Activity.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Activity/context.mjs +20 -0
- package/dist/js/packages/components/src/components/Activity/context.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs +2 -4
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs +2 -4
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Option/Option.mjs +10 -2
- package/dist/js/packages/components/src/components/Option/Option.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Option/optionsTunnel.mjs +36 -0
- package/dist/js/packages/components/src/components/Option/optionsTunnel.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs +3 -0
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs +3 -0
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Select/Select.mjs +2 -4
- package/dist/js/packages/components/src/components/Select/Select.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.mjs +3 -0
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/componentFactory/flowComponent.mjs +1 -0
- package/dist/js/packages/components/src/lib/componentFactory/flowComponent.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/types/props.mjs.map +1 -1
- package/dist/types/components/Activity/Activity.d.ts.map +1 -1
- package/dist/types/components/Activity/context.d.ts +12 -0
- package/dist/types/components/Activity/context.d.ts.map +1 -0
- package/dist/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/types/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/types/components/Modal/components/ModalTrigger/ModalTrigger.d.ts +1 -0
- package/dist/types/components/Modal/components/ModalTrigger/ModalTrigger.d.ts.map +1 -1
- package/dist/types/components/Option/Option.d.ts +7 -0
- package/dist/types/components/Option/Option.d.ts.map +1 -1
- package/dist/types/components/Option/optionsTunnel.d.ts +22 -0
- package/dist/types/components/Option/optionsTunnel.d.ts.map +1 -0
- package/dist/types/components/Overlay/components/OverlayContent.d.ts.map +1 -1
- package/dist/types/components/Popover/components/PopoverContent/PopoverContent.d.ts.map +1 -1
- package/dist/types/components/Select/Select.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/lib/componentFactory/flowComponent.d.ts.map +1 -1
- package/dist/types/lib/types/props.d.ts.map +1 -1
- package/package.json +9 -9
package/dist/js/default.mjs
CHANGED
|
@@ -178,6 +178,7 @@ import { AlertBadge } from "./packages/components/src/components/AlertBadge/Aler
|
|
|
178
178
|
import { AlertText } from "./packages/components/src/components/AlertText/AlertText.mjs";
|
|
179
179
|
import { Combine } from "./packages/components/src/components/Combine/Combine.mjs";
|
|
180
180
|
import { Align } from "./packages/components/src/components/Align/Align.mjs";
|
|
181
|
+
import { Option } from "./packages/components/src/components/Option/Option.mjs";
|
|
181
182
|
import { PopoverContent } from "./packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs";
|
|
182
183
|
import { Popover } from "./packages/components/src/components/Popover/Popover.mjs";
|
|
183
184
|
import { Autocomplete } from "./packages/components/src/components/Autocomplete/Autocomplete.mjs";
|
|
@@ -242,7 +243,6 @@ import { ContextMenuTrigger } from "./packages/components/src/components/Context
|
|
|
242
243
|
import { ContextMenuSection } from "./packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs";
|
|
243
244
|
import { ContextualHelp } from "./packages/components/src/components/ContextualHelp/ContextualHelp.mjs";
|
|
244
245
|
import { CounterBadge } from "./packages/components/src/components/CounterBadge/CounterBadge.mjs";
|
|
245
|
-
import { Option } from "./packages/components/src/components/Option/Option.mjs";
|
|
246
246
|
import { CountryOptions } from "./packages/components/src/components/CountryOptions/CountryOptions.mjs";
|
|
247
247
|
import { sortByDachFirst } from "./packages/components/src/components/CountryOptions/lib/sortBy.mjs";
|
|
248
248
|
import { DatePicker } from "./packages/components/src/components/DatePicker/DatePicker.mjs";
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { SuspenseTrigger } from "../SuspenseTrigger/SuspenseTrigger.mjs";
|
|
4
|
-
import
|
|
4
|
+
import { ActivityContextProvider, useIsActivityActive } from "./context.mjs";
|
|
5
|
+
import React, { Suspense, useEffect, useLayoutEffect, useState } from "react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { useIsSSR } from "react-aria";
|
|
7
8
|
//#region src/components/Activity/Activity.tsx
|
|
@@ -17,6 +18,7 @@ var Activity = (props) => {
|
|
|
17
18
|
const { isActive: isActiveFromProps = true, inactiveDelay, forceCustomActivity = false, children } = props;
|
|
18
19
|
const [isActiveState, setIsActiveState] = useState(isActiveFromProps);
|
|
19
20
|
const isSsr = useIsSSR();
|
|
21
|
+
const isParentActive = useIsActivityActive();
|
|
20
22
|
useEffect(() => {
|
|
21
23
|
if (!inactiveDelay) return;
|
|
22
24
|
if (isActiveFromProps) setIsActiveState(true);
|
|
@@ -30,14 +32,23 @@ var Activity = (props) => {
|
|
|
30
32
|
}
|
|
31
33
|
}, [isActiveFromProps, inactiveDelay]);
|
|
32
34
|
const isActive = inactiveDelay ? isActiveState : isActiveFromProps;
|
|
35
|
+
const [isHiddenState, setIsHiddenState] = useState(!isActive);
|
|
36
|
+
useLayoutEffect(() => {
|
|
37
|
+
setIsHiddenState(!isActive);
|
|
38
|
+
}, [isActive]);
|
|
39
|
+
const isHidden = isHiddenState && !isActive;
|
|
33
40
|
if (isSsr) return isActive ? children : null;
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
const content = /* @__PURE__ */ jsx(ActivityContextProvider, {
|
|
42
|
+
value: isParentActive && isActive,
|
|
36
43
|
children
|
|
37
44
|
});
|
|
45
|
+
if (isActivitySupported && !forceCustomActivity) return /* @__PURE__ */ jsx(React.Activity, {
|
|
46
|
+
mode: isHidden ? "hidden" : "visible",
|
|
47
|
+
children: content
|
|
48
|
+
});
|
|
38
49
|
return /* @__PURE__ */ jsx(CustomActivity, {
|
|
39
|
-
isActive,
|
|
40
|
-
children
|
|
50
|
+
isActive: !isHidden,
|
|
51
|
+
children: content
|
|
41
52
|
});
|
|
42
53
|
};
|
|
43
54
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface ActivityProps extends PropsWithChildren {\n isActive?: boolean;\n inactiveDelay?: number;\n /** @internal */\n forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n const { children, isActive: isActive = true } = props;\n\n return (\n <Suspense fallback={null}>\n <SuspenseTrigger show={!isActive} />\n {children}\n </Suspense>\n );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n const {\n isActive: isActiveFromProps = true,\n inactiveDelay,\n forceCustomActivity = false,\n children,\n } = props;\n\n const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n const isSsr = useIsSSR();\n\n useEffect(() => {\n if (!inactiveDelay) {\n return;\n }\n\n if (isActiveFromProps) {\n setIsActiveState(true);\n } else {\n const timeout = setTimeout(() => {\n setIsActiveState(false);\n }, inactiveDelay);\n\n return () => {\n clearTimeout(timeout);\n };\n }\n }, [isActiveFromProps, inactiveDelay]);\n\n const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n if (isSsr) {\n return isActive ? children : null;\n }\n\n if (isActivitySupported && !forceCustomActivity) {\n return (\n <React.Activity mode={
|
|
1
|
+
{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useLayoutEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\nimport {\n ActivityContextProvider,\n useIsActivityActive,\n} from \"@/components/Activity/context\";\n\nexport interface ActivityProps extends PropsWithChildren {\n isActive?: boolean;\n inactiveDelay?: number;\n /** @internal */\n forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n const { children, isActive: isActive = true } = props;\n\n return (\n <Suspense fallback={null}>\n <SuspenseTrigger show={!isActive} />\n {children}\n </Suspense>\n );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n const {\n isActive: isActiveFromProps = true,\n inactiveDelay,\n forceCustomActivity = false,\n children,\n } = props;\n\n const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n const isSsr = useIsSSR();\n const isParentActive = useIsActivityActive();\n\n useEffect(() => {\n if (!inactiveDelay) {\n return;\n }\n\n if (isActiveFromProps) {\n setIsActiveState(true);\n } else {\n const timeout = setTimeout(() => {\n setIsActiveState(false);\n }, inactiveDelay);\n\n return () => {\n clearTimeout(timeout);\n };\n }\n }, [isActiveFromProps, inactiveDelay]);\n\n const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n /*\n * A hidden subtree keeps rendering, but React commits none of those renders —\n * that holds for React's own `Activity` as much as for the suspended one. Its\n * inline DOM is hidden along with it, yet anything it portalled elsewhere\n * stays on screen, frozen at the last commit: the open Select popover of the\n * tab you just left. So hide one commit after deactivating, which is the\n * commit the subtree needs to unmount its overlays. Setting the state from a\n * layout effect keeps that intermediate commit off the screen.\n */\n const [isHiddenState, setIsHiddenState] = useState(!isActive);\n\n useLayoutEffect(() => {\n setIsHiddenState(!isActive);\n }, [isActive]);\n\n const isHidden = isHiddenState && !isActive;\n\n if (isSsr) {\n return isActive ? children : null;\n }\n\n const content = (\n <ActivityContextProvider value={isParentActive && isActive}>\n {children}\n </ActivityContextProvider>\n );\n\n if (isActivitySupported && !forceCustomActivity) {\n return (\n <React.Activity mode={isHidden ? \"hidden\" : \"visible\"}>\n {content}\n </React.Activity>\n );\n }\n\n return <CustomActivity isActive={!isHidden}>{content}</CustomActivity>;\n};\n\nexport default Activity;\n"],"mappings":";;;;;;;;AAiBA,IAAM,sBAAsB,MAAM,QAAQ,WAAW,MAAM;AAE3D,IAAM,kBAAqC,UAAU;CACnD,MAAM,EAAE,UAAoB,WAAW,SAAS;CAEhD,OACE,qBAAC,UAAD;EAAU,UAAU;EAApB,UAAA,CACE,oBAAC,iBAAD,EAAiB,MAAM,CAAC,SAAW,CAAA,GAClC,QACO;;AAEd;AAEA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UAAU,oBAAoB,MAC9B,eACA,sBAAsB,OACtB,aACE;CAEJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,iBAAiB;CACpE,MAAM,QAAQ,SAAS;CACvB,MAAM,iBAAiB,oBAAoB;CAE3C,gBAAgB;EACd,IAAI,CAAC,eACH;EAGF,IAAI,mBACF,iBAAiB,IAAI;OAChB;GACL,MAAM,UAAU,iBAAiB;IAC/B,iBAAiB,KAAK;GACxB,GAAG,aAAa;GAEhB,aAAa;IACX,aAAa,OAAO;GACtB;EACF;CACF,GAAG,CAAC,mBAAmB,aAAa,CAAC;CAErC,MAAM,WAAW,gBAAgB,gBAAgB;CAWjD,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC,QAAQ;CAE5D,sBAAsB;EACpB,iBAAiB,CAAC,QAAQ;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,iBAAiB,CAAC;CAEnC,IAAI,OACF,OAAO,WAAW,WAAW;CAG/B,MAAM,UACJ,oBAAC,yBAAD;EAAyB,OAAO,kBAAkB;EAC/C;CACsB,CAAA;CAG3B,IAAI,uBAAuB,CAAC,qBAC1B,OACE,oBAAC,MAAM,UAAP;EAAgB,MAAM,WAAW,WAAW;EACzC,UAAA;CACa,CAAA;CAIpB,OAAO,oBAAC,gBAAD;EAAgB,UAAU,CAAC;EAAW,UAAA;CAAwB,CAAA;AACvE"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
//#region src/components/Activity/context.ts
|
|
5
|
+
var activityContext = createContext(true);
|
|
6
|
+
/**
|
|
7
|
+
* Whether the surrounding `Activity` is active.
|
|
8
|
+
*
|
|
9
|
+
* A deactivated `Activity` hides its subtree by suspending it (or by React's
|
|
10
|
+
* own `Activity`). Either way React stops committing that subtree's renders, so
|
|
11
|
+
* everything it portalled out of its own DOM — an open popover, a modal — stays
|
|
12
|
+
* on screen, frozen. Content that renders outside the subtree must therefore
|
|
13
|
+
* unmount itself while this is `false`.
|
|
14
|
+
*/
|
|
15
|
+
var useIsActivityActive = () => useContext(activityContext);
|
|
16
|
+
var ActivityContextProvider = activityContext.Provider;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { ActivityContextProvider, useIsActivityActive };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=context.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/Activity/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nconst activityContext = createContext(true);\n\n/**\n * Whether the surrounding `Activity` is active.\n *\n * A deactivated `Activity` hides its subtree by suspending it (or by React's\n * own `Activity`). Either way React stops committing that subtree's renders, so\n * everything it portalled out of its own DOM — an open popover, a modal — stays\n * on screen, frozen. Content that renders outside the subtree must therefore\n * unmount itself while this is `false`.\n */\nexport const useIsActivityActive = (): boolean => useContext(activityContext);\n\nexport const ActivityContextProvider = activityContext.Provider;\n"],"mappings":";;;;AAEA,IAAM,kBAAkB,cAAc,IAAI;;;;;;;;;;AAW1C,IAAa,4BAAqC,WAAW,eAAe;AAE5E,IAAa,0BAA0B,gBAAgB"}
|
|
@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
|
5
5
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
6
6
|
import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
|
|
7
7
|
import { Text } from "../Text/Text.mjs";
|
|
8
|
+
import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
|
|
8
9
|
import { Options } from "../Options/Options.mjs";
|
|
9
10
|
import __locale_default from "../../../../../_virtual/_3.locale.mjs";
|
|
10
11
|
import Autocomplete_module_default from "./Autocomplete.module.mjs";
|
|
@@ -51,10 +52,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
|
|
|
51
52
|
const propsContext = {
|
|
52
53
|
SearchField: inputProps,
|
|
53
54
|
TextField: inputProps,
|
|
54
|
-
Option: { tunnel:
|
|
55
|
-
id: "options",
|
|
56
|
-
component: "Autocomplete"
|
|
57
|
-
} },
|
|
55
|
+
Option: { tunnel: getOptionsTunnelProps("Autocomplete") },
|
|
58
56
|
Popover: { className: Autocomplete_module_default.popover },
|
|
59
57
|
...fieldPropsContext
|
|
60
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps<HTMLInputElement>,\n Omit<\n Aria.AutocompleteProps,\n \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const inputRef = useObjectRef(ref);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n\n const optionsOverlayController = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: () => optionsOverlayController.close(),\n });\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleInputChange = (value: string) => {\n if (value === \"\") {\n optionsOverlayController.close();\n } else if (isFocused(inputRef.current)) {\n optionsOverlayController.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const value = String(key);\n if (inputRef.current) {\n emitElementValueChange(inputRef.current, value);\n }\n optionsOverlayController.close();\n };\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n e.preventDefault();\n }\n },\n ref: inputRef,\n onChange: handleInputChange,\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Autocomplete\");\n\n const rootClassName = clsx(\n styles.autocomplete,\n fieldProps.className,\n className,\n );\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: inputProps,\n Option: {\n tunnel:
|
|
1
|
+
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps<HTMLInputElement>,\n Omit<\n Aria.AutocompleteProps,\n \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const inputRef = useObjectRef(ref);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n\n const optionsOverlayController = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: () => optionsOverlayController.close(),\n });\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleInputChange = (value: string) => {\n if (value === \"\") {\n optionsOverlayController.close();\n } else if (isFocused(inputRef.current)) {\n optionsOverlayController.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const value = String(key);\n if (inputRef.current) {\n emitElementValueChange(inputRef.current, value);\n }\n optionsOverlayController.close();\n };\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n e.preventDefault();\n }\n },\n ref: inputRef,\n onChange: handleInputChange,\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Autocomplete\");\n\n const rootClassName = clsx(\n styles.autocomplete,\n fieldProps.className,\n className,\n );\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: inputProps,\n Option: {\n tunnel: getOptionsTunnelProps(\"Autocomplete\"),\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div {...fieldProps} className={rootClassName}>\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[optionsOverlayController]}\n >\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n filter={contains}\n disableAutoFocusFirst\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={container}\n controller={optionsOverlayController}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <UiComponentTunnelExit\n id=\"options\"\n component=\"Autocomplete\"\n />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,gBAAgB,KACpB,4BAAO,cACP,WAAW,WACX,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;EACb,WAAW;EACX,QAAQ,EACN,QAAQ,sBAAsB,cAAc,EAC9C;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAhC,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,wBAAwB;GAEvC,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalized
|
|
|
7
7
|
import { Button } from "../Button/Button.mjs";
|
|
8
8
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
9
9
|
import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
|
|
10
|
+
import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
|
|
10
11
|
import { Options } from "../Options/Options.mjs";
|
|
11
12
|
import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
12
13
|
import ComboBox_module_default from "./ComboBox.module.mjs";
|
|
@@ -23,10 +24,7 @@ var ComboBox = flowComponent("ComboBox", (props) => {
|
|
|
23
24
|
const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
|
|
24
25
|
const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
|
|
25
26
|
const propsContext = {
|
|
26
|
-
Option: { tunnel:
|
|
27
|
-
id: "options",
|
|
28
|
-
component: "ComboBox"
|
|
29
|
-
} },
|
|
27
|
+
Option: { tunnel: getOptionsTunnelProps("ComboBox") },
|
|
30
28
|
...fieldPropsContext
|
|
31
29
|
};
|
|
32
30
|
const handleSelectionChange = (key) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n extends\n Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n Pick<Aria.InputProps, \"placeholder\">,\n Pick<OptionsProps, \"renderEmptyState\">,\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement> {\n /** Called with the key of the selected option whenever the selection changes. */\n onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n const {\n children,\n className,\n menuTrigger = \"focus\",\n onChange,\n onSelectionChange,\n placeholder,\n ref,\n renderEmptyState,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"ComboBox\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n const propsContext: PropsContext = {\n Option: {\n tunnel:
|
|
1
|
+
{"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n extends\n Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n Pick<Aria.InputProps, \"placeholder\">,\n Pick<OptionsProps, \"renderEmptyState\">,\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement> {\n /** Called with the key of the selected option whenever the selection changes. */\n onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n const {\n children,\n className,\n menuTrigger = \"focus\",\n onChange,\n onSelectionChange,\n placeholder,\n ref,\n renderEmptyState,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"ComboBox\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: getOptionsTunnelProps(\"ComboBox\"),\n },\n ...fieldPropsContext,\n };\n\n const handleSelectionChange = (key: Key | null) => {\n if (key === null) {\n return;\n }\n onChange?.(String(key));\n onSelectionChange?.(key);\n };\n\n const controller = useOverlayController(\"ComboBox\", {\n reuseControllerFromContext: false,\n });\n\n return (\n <Aria.ComboBox\n {...fieldProps}\n menuTrigger={menuTrigger}\n className={rootClassName}\n {...rest}\n onSelectionChange={handleSelectionChange}\n onOpenChange={(isOpen) => {\n controller.setOpen(isOpen);\n }}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n <div className={styles.input}>\n <Aria.Input placeholder={placeholder} ref={ref} />\n <Button\n className={styles.toggle}\n aria-label={stringFormatter.format(\"showOptions\")}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n </Button>\n </div>\n\n {children}\n\n <Options\n controller={controller}\n onOpenChange={() => {\n // cut-off to avoid double controller state changes\n }}\n renderEmptyState={renderEmptyState}\n >\n <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n </Options>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.ComboBox>\n );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KAAK,WAAW,WAAW,wBAAO,UAAU,SAAS;CAE3E,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACS;EACb,WAAW;EACX,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}
|
|
@@ -9,9 +9,17 @@ import { Children, useEffect, useRef } from "react";
|
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
import * as Aria from "react-aria-components";
|
|
11
11
|
//#region src/components/Option/Option.tsx
|
|
12
|
+
/**
|
|
13
|
+
* The key an option contributes to its collection: an explicit `value`, else
|
|
14
|
+
* the `textValue`, else the text among the children. Shared with the props
|
|
15
|
+
* context that routes options through a field's tunnel, so both derive the same
|
|
16
|
+
* identity for one option.
|
|
17
|
+
*/
|
|
18
|
+
var getOptionValue = (props) => props.value ?? props.textValue ?? extractTextFromChildren(props.children);
|
|
12
19
|
/** @flr-generate all */
|
|
13
20
|
var Option = flowComponent("Option", (props) => {
|
|
14
|
-
const { className, children, textValue = extractTextFromChildren(children), value
|
|
21
|
+
const { className, children, textValue = extractTextFromChildren(children), value: valueIgnored, ref, ...rest } = props;
|
|
22
|
+
const value = getOptionValue(props);
|
|
15
23
|
useWarnMissingValue(value === void 0);
|
|
16
24
|
const rootClassName = clsx(Option_module_default.option, className);
|
|
17
25
|
const hasChildren = Children.count(children) >= 1;
|
|
@@ -39,6 +47,6 @@ var useWarnMissingValue = (isMissing) => {
|
|
|
39
47
|
}, [isMissing]);
|
|
40
48
|
};
|
|
41
49
|
//#endregion
|
|
42
|
-
export { Option, Option as default };
|
|
50
|
+
export { Option, Option as default, getOptionValue };
|
|
43
51
|
|
|
44
52
|
//# sourceMappingURL=Option.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.mjs","names":[],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n extends\n Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * The value this option contributes to the field's selection, and the key\n * `defaultValue` / `value` of the surrounding field target.\n *\n * Defaults to `textValue`, which itself defaults to the text among the\n * option's children — element children such as a `Badge` do not contribute,\n * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n * the display text, or when the children carry no text at all.\n */\n value?: string | number;\n}\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n const {\n className,\n children,\n textValue = extractTextFromChildren(children),\n value
|
|
1
|
+
{"version":3,"file":"Option.mjs","names":[],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n extends\n Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * The value this option contributes to the field's selection, and the key\n * `defaultValue` / `value` of the surrounding field target.\n *\n * Defaults to `textValue`, which itself defaults to the text among the\n * option's children — element children such as a `Badge` do not contribute,\n * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n * the display text, or when the children carry no text at all.\n */\n value?: string | number;\n}\n\n/**\n * The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n */\nexport const getOptionValue = (\n props: Pick<OptionProps, \"value\" | \"textValue\" | \"children\">,\n): string | number | undefined =>\n props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n const {\n className,\n children,\n textValue = extractTextFromChildren(children),\n // Derived through `getOptionValue` below; destructured only to keep it out\n // of the props spread onto the react-aria item.\n value: valueIgnored,\n ref,\n ...rest\n } = props;\n\n const value = getOptionValue(props);\n\n useWarnMissingValue(value === undefined);\n\n const rootClassName = clsx(styles.option, className);\n const hasChildren = Children.count(children) >= 1;\n\n return (\n <Aria.ListBoxItem\n className={rootClassName}\n ref={ref}\n id={value}\n {...rest}\n textValue={textValue}\n >\n <span className={styles.content}>\n {hasChildren ? children : textValue}\n </span>\n <IconCheck aria-hidden className={styles.checkMark} />\n </Aria.ListBoxItem>\n );\n});\n\n/*\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n *\n * Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n const hasWarned = useRef(false);\n\n useEffect(() => {\n if (!isMissing || hasWarned.current) {\n return;\n }\n\n hasWarned.current = true;\n console.error(\n \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n );\n }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAK,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAW,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAW,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
|
|
4
|
+
import { getOptionValue } from "./Option.mjs";
|
|
5
|
+
//#region src/components/Option/optionsTunnel.ts
|
|
6
|
+
var optionsTunnelId = "options";
|
|
7
|
+
/**
|
|
8
|
+
* Props context entry that routes a field's `Option` children through its
|
|
9
|
+
* "options" tunnel.
|
|
10
|
+
*
|
|
11
|
+
* The entry id is the option's own collection key rather than a generated one.
|
|
12
|
+
* react-aria renders collection children twice — once into its hidden
|
|
13
|
+
* collection document, once for real — and both renders register a tunnel
|
|
14
|
+
* entry. With a generated id each render becomes its own entry, so the tunnel
|
|
15
|
+
* exit renders every option twice: the collection then holds two element nodes
|
|
16
|
+
* per key, and the `prevKey`/`nextKey` links derived from that doubled sibling
|
|
17
|
+
* chain form a ring. That ring makes `ArrowUp` on the first option wrap to the
|
|
18
|
+
* last one, and lets react-stately's focus restoration walk `getKeyBefore`
|
|
19
|
+
* forever, which freezes the tab.
|
|
20
|
+
*
|
|
21
|
+
* An option without a value keeps a generated id. Its collection key is a
|
|
22
|
+
* react-aria render counter in that case, which is unstable for other reasons
|
|
23
|
+
* already — `Option` warns about it.
|
|
24
|
+
*/
|
|
25
|
+
var getOptionsTunnelProps = (component) => dynamic((optionProps) => {
|
|
26
|
+
const value = getOptionValue(optionProps);
|
|
27
|
+
return {
|
|
28
|
+
id: optionsTunnelId,
|
|
29
|
+
component,
|
|
30
|
+
staticEntryId: value === void 0 ? void 0 : String(value)
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
//#endregion
|
|
34
|
+
export { getOptionsTunnelProps, optionsTunnelId };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=optionsTunnel.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"optionsTunnel.mjs","names":[],"sources":["../../../../../../../src/components/Option/optionsTunnel.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport { dynamic } from \"@/lib/propsContext\";\nimport { getOptionValue } from \"./Option\";\n\nexport const optionsTunnelId = \"options\";\n\n/**\n * Props context entry that routes a field's `Option` children through its\n * \"options\" tunnel.\n *\n * The entry id is the option's own collection key rather than a generated one.\n * react-aria renders collection children twice — once into its hidden\n * collection document, once for real — and both renders register a tunnel\n * entry. With a generated id each render becomes its own entry, so the tunnel\n * exit renders every option twice: the collection then holds two element nodes\n * per key, and the `prevKey`/`nextKey` links derived from that doubled sibling\n * chain form a ring. That ring makes `ArrowUp` on the first option wrap to the\n * last one, and lets react-stately's focus restoration walk `getKeyBefore`\n * forever, which freezes the tab.\n *\n * An option without a value keeps a generated id. Its collection key is a\n * react-aria render counter in that case, which is unstable for other reasons\n * already — `Option` warns about it.\n */\nexport const getOptionsTunnelProps = (component: FlowComponentName) =>\n dynamic<\"Option\", \"tunnel\">((optionProps) => {\n const value = getOptionValue(optionProps);\n\n return {\n id: optionsTunnelId,\n component,\n staticEntryId: value === undefined ? undefined : String(value),\n };\n });\n"],"mappings":";;;;;AAIA,IAAa,kBAAkB;;;;;;;;;;;;;;;;;;;AAoB/B,IAAa,yBAAyB,cACpC,SAA6B,gBAAgB;CAC3C,MAAM,QAAQ,eAAe,WAAW;CAExC,OAAO;EACL,IAAI;EACJ;EACA,eAAe,UAAU,KAAA,IAAY,KAAA,IAAY,OAAO,KAAK;CAC/D;AACF,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useIsActivityActive } from "../../Activity/context.mjs";
|
|
3
4
|
import DivView from "../../../views/DivView.mjs";
|
|
4
5
|
import Overlay_module_default from "../Overlay.module.mjs";
|
|
5
6
|
import { OverlaySuspenseFallback } from "./OverlaySuspenseFallback.mjs";
|
|
@@ -43,6 +44,7 @@ var getOverlayContainer = () => {
|
|
|
43
44
|
/** @flr-generate all */
|
|
44
45
|
var OverlayContent = (props) => {
|
|
45
46
|
const { children, className, "aria-labelledby": ariaLabelledBy, ...restProps } = props;
|
|
47
|
+
const isActivityActive = useIsActivityActive();
|
|
46
48
|
useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);
|
|
47
49
|
const Fallback = () => {
|
|
48
50
|
return /* @__PURE__ */ jsx(DivView, {
|
|
@@ -50,6 +52,7 @@ var OverlayContent = (props) => {
|
|
|
50
52
|
children: /* @__PURE__ */ jsx(OverlaySuspenseFallback, { ...restProps })
|
|
51
53
|
});
|
|
52
54
|
};
|
|
55
|
+
if (!isActivityActive) return null;
|
|
53
56
|
return /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
|
|
54
57
|
getContainer: getOverlayContainer,
|
|
55
58
|
children: /* @__PURE__ */ jsx(Aria.ModalOverlay, {
|
package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAM,4BAA4B;;;;;;;;;;;;;;;;;;;AAoBlC,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,sBAAsB,SAAS,KAAK,kBACtC,SAAS,KAAK,OAAO,iBAAiB;EAExC,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAC3C,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;IAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;IAC7B,UAAA,oBAAC,KAAK,QAAN;KAAa,mBAAiB;KAC3B;IACU,CAAA;GACL,CAAA,EACA,CAAA,EACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useIsActivityActive } from "../../../Activity/context.mjs";
|
|
3
4
|
import Popover_module_default from "../../Popover.module.mjs";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import * as Aria from "react-aria-components";
|
|
@@ -7,7 +8,9 @@ import * as Aria from "react-aria-components";
|
|
|
7
8
|
/** @flr-generate all */
|
|
8
9
|
var PopoverContent = (props) => {
|
|
9
10
|
const { children, className, isDialogContent = false, withTip, onOpenChange, ref, isOpen, width, ...rest } = props;
|
|
11
|
+
const isActivityActive = useIsActivityActive();
|
|
10
12
|
const ContentComponent = isDialogContent ? Aria.Dialog : "div";
|
|
13
|
+
if (!isActivityActive) return null;
|
|
11
14
|
return /* @__PURE__ */ jsxs(Aria.Popover, {
|
|
12
15
|
...rest,
|
|
13
16
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={16}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={{ width }}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={16}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={{ width }}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;AAkBA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,EAAE,MAAM;EAPjB,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
|
|
@@ -6,6 +6,7 @@ import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWar
|
|
|
6
6
|
import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
|
|
7
7
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
8
8
|
import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
|
|
9
|
+
import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
|
|
9
10
|
import { Options } from "../Options/Options.mjs";
|
|
10
11
|
import FormField_module_default from "../FormField/FormField.module.mjs";
|
|
11
12
|
import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
@@ -23,10 +24,7 @@ var Select = flowComponent("Select", (props) => {
|
|
|
23
24
|
const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "Select");
|
|
24
25
|
const rootClassName = clsx(Select_module_default.select, FormField_module_default.formField, className);
|
|
25
26
|
const propsContext = {
|
|
26
|
-
Option: { tunnel:
|
|
27
|
-
id: "options",
|
|
28
|
-
component: "Select"
|
|
29
|
-
} },
|
|
27
|
+
Option: { tunnel: getOptionsTunnelProps("Select") },
|
|
30
28
|
...fieldPropsContext
|
|
31
29
|
};
|
|
32
30
|
const controller = useOverlayController("Select", { reuseControllerFromContext: false });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n extends\n PropsWithChildren<\n Omit<\n Aria.SelectProps<string, \"single\" | \"multiple\">,\n \"children\" | \"className\" | \"ref\"\n >\n >,\n FlowComponentProps<HTMLButtonElement>,\n PropsWithClassName {\n /** Handler that is called when the selected value changes. */\n onChange?: (value: Key | Key[] | null) => void;\n /** @deprecated Use `onChange` instead. */\n onSelectionChange?: (value: Key | Key[] | null) => void;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n const {\n children,\n className,\n onChange,\n onSelectionChange,\n isReadOnly,\n ref,\n ...rest\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n if (onSelectionChange !== undefined) {\n warnDeprecation(\n \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"Select\");\n\n const rootClassName = clsx(\n styles.select,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Option: {\n tunnel:
|
|
1
|
+
{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n extends\n PropsWithChildren<\n Omit<\n Aria.SelectProps<string, \"single\" | \"multiple\">,\n \"children\" | \"className\" | \"ref\"\n >\n >,\n FlowComponentProps<HTMLButtonElement>,\n PropsWithClassName {\n /** Handler that is called when the selected value changes. */\n onChange?: (value: Key | Key[] | null) => void;\n /** @deprecated Use `onChange` instead. */\n onSelectionChange?: (value: Key | Key[] | null) => void;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n const {\n children,\n className,\n onChange,\n onSelectionChange,\n isReadOnly,\n ref,\n ...rest\n } = props;\n\n const warnDeprecation = useWarnDeprecation();\n if (onSelectionChange !== undefined) {\n warnDeprecation(\n \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n fieldPropsContext,\n fieldProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"Select\");\n\n const rootClassName = clsx(\n styles.select,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: getOptionsTunnelProps(\"Select\"),\n },\n ...fieldPropsContext,\n };\n\n const controller = useOverlayController(\"Select\", {\n reuseControllerFromContext: false,\n });\n const isOpen = controller.useIsOpen();\n\n return (\n <Aria.Select\n {...rest}\n {...fieldProps}\n className={clsx(rootClassName, fieldProps.className)}\n onChange={(value) => {\n if (!isReadOnly) {\n onChange?.(value);\n onSelectionChange?.(value);\n }\n }}\n onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n isOpen={isOpen}\n data-readonly={isReadOnly}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.Button\n data-readonly={isReadOnly}\n className={styles.toggle}\n ref={ref}\n >\n <Aria.SelectValue>\n {({ selectedText, isPlaceholder }) =>\n isPlaceholder || !selectedText ? undefined : selectedText\n }\n </Aria.SelectValue>\n <IconChevronDown />\n </Aria.Button>\n {children}\n <Options controller={controller}>\n <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n </Options>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.Select>\n );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAZjB,UAAA,CAcE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAW,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { ClearPropsContext } from "../../lib/propsContext/components/ClearPropsContext.mjs";
|
|
4
|
+
import { useIsActivityActive } from "../Activity/context.mjs";
|
|
4
5
|
import Tooltip_module_default from "./Tooltip.module.mjs";
|
|
5
6
|
import clsx from "clsx";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -9,7 +10,9 @@ import * as Aria from "react-aria-components";
|
|
|
9
10
|
/** @flr-generate all */
|
|
10
11
|
var Tooltip = (props) => {
|
|
11
12
|
const { children, className, ...rest } = props;
|
|
13
|
+
const isActivityActive = useIsActivityActive();
|
|
12
14
|
const rootClassName = clsx(Tooltip_module_default.tooltip, className);
|
|
15
|
+
if (!isActivityActive) return null;
|
|
13
16
|
return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsxs(Aria.Tooltip, {
|
|
14
17
|
...rest,
|
|
15
18
|
className: rootClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.tooltip, className);\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const rootClassName = clsx(styles.tooltip, className);\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,SAAQ;IACX,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}
|
|
@@ -57,6 +57,7 @@ function flowComponent(componentName, ImplementationComponentType, options = {})
|
|
|
57
57
|
if (tunnel) element = /* @__PURE__ */ jsx(UiComponentTunnelEntry, {
|
|
58
58
|
id: tunnel.id,
|
|
59
59
|
component: tunnel.component,
|
|
60
|
+
staticEntryId: tunnel.staticEntryId,
|
|
60
61
|
children: element
|
|
61
62
|
});
|
|
62
63
|
if (isViewComposition) element = /* @__PURE__ */ jsx(ViewCompositionReset, { children: element });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flowComponent.mjs","names":[],"sources":["../../../../../../../src/lib/componentFactory/flowComponent.tsx"],"sourcesContent":["import type {\n FlowComponentName,\n FlowComponentProps as FlowComponentPropsOfName,\n} from \"@/components/propTypes\";\nimport type {\n ComponentProps,\n ComponentType,\n FunctionComponent,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\";\nimport { cloneElement, memo } from \"react\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\nimport SlotContextProvider from \"@/lib/slotContext/SlotContextProvider\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport { ComponentPropsContextProvider } from \"@/components/ComponentPropsContextProvider\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { UiComponentTunnelProvider } from \"@/components/UiComponentTunnel/UiComponentTunnelProvider\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport {\n useReportComponentUsage,\n ViewCompositionReset,\n} from \"@/components/ComponentUsageProvider\";\n\ntype RefType<T> = T extends RefAttributes<infer R> ? R : undefined;\n\nexport interface FlowComponentProps<R = HTMLDivElement>\n extends PropsWithTunnel, RefAttributes<R> {\n /**\n * A React element the component is wrapped with. The element is cloned and\n * receives the component as its only child — useful to render the component\n * inside a link, a tooltip trigger or any other wrapper without changing the\n * surrounding markup.\n */\n wrapWith?: ReactElement;\n}\n\nexport type FlowComponentImplementationProps<C extends FlowComponentName> =\n Omit<FlowComponentPropsOfName<C>, keyof FlowComponentProps> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\ntype FlowComponentImplementationType<C extends FlowComponentName> =\n ComponentType<FlowComponentImplementationProps<C>>;\n\ntype FlowComponentType<C extends FlowComponentName> = FunctionComponent<\n FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>\n>;\n\nexport type FlowComponentProvisionType = \"provider\" | \"ui\" | \"layout\";\n\ninterface Options {\n type?: FlowComponentProvisionType;\n isRemoteComponent?: boolean;\n}\n\nexport function flowComponent<C extends FlowComponentName>(\n componentName: C,\n ImplementationComponentType: FlowComponentImplementationType<C>,\n options: Options = {},\n): FlowComponentType<C> {\n type Props = FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\n const { type = \"ui\", isRemoteComponent = false } = options;\n\n const MemoizedImplementationComponentType = memo(ImplementationComponentType);\n\n function Component(props: Props) {\n const isViewComposition = useReportComponentUsage(componentName);\n\n const { tunnel, wrapWith, ...propsWithContext } = useProps(\n componentName,\n props as FlowComponentPropsOfName<C>,\n ) as FlowComponentProps<RefType<FlowComponentPropsOfName<C>>>;\n\n const implementationTypeProps = propsWithContext as ComponentProps<\n typeof ImplementationComponentType\n >;\n\n const componentProps = useComponentPropsContext(componentName);\n\n ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;\n\n let element: ReactNode = (\n <MemoizedImplementationComponentType {...implementationTypeProps} />\n );\n\n if (type === \"ui\" || type === \"layout\") {\n element = (\n <UiComponentTunnelProvider component={componentName}>\n {element}\n </UiComponentTunnelProvider>\n );\n }\n\n element = (\n <ComponentPropsContextProvider componentProps={componentProps}>\n {element}\n </ComponentPropsContextProvider>\n );\n\n if (type === \"ui\") {\n /**\n * Protect the inside of UI components for accidental prop changes through\n * the Props Context.\n */\n if (isRemoteComponent) {\n element = <ClearPropsContext>{element}</ClearPropsContext>;\n } else {\n /**\n * In case of a UI component that does not have a remote counterpart\n * (like the Modal component), the <ClearPropsContext> must be\n * additionally applied on the host side by using the\n * <ClearPropsContextView>.\n *\n * This prevents Props Contexts created by parent components on the host\n * side affecting the children of this UI component.\n */\n element = (\n <ClearPropsContext>\n <ClearPropsContextView>{element}</ClearPropsContextView>\n </ClearPropsContext>\n );\n }\n }\n\n if (\"slot\" in props && !!props.slot && typeof props.slot === \"string\") {\n element = (\n <SlotContextProvider slot={props.slot} component={componentName}>\n {element}\n </SlotContextProvider>\n );\n }\n\n if (wrapWith) {\n element = cloneElement(wrapWith, undefined, element);\n }\n\n if (tunnel) {\n element = (\n <UiComponentTunnelEntry
|
|
1
|
+
{"version":3,"file":"flowComponent.mjs","names":[],"sources":["../../../../../../../src/lib/componentFactory/flowComponent.tsx"],"sourcesContent":["import type {\n FlowComponentName,\n FlowComponentProps as FlowComponentPropsOfName,\n} from \"@/components/propTypes\";\nimport type {\n ComponentProps,\n ComponentType,\n FunctionComponent,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from \"react\";\nimport { cloneElement, memo } from \"react\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\nimport SlotContextProvider from \"@/lib/slotContext/SlotContextProvider\";\nimport { useProps } from \"@/lib/hooks/useProps\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport { ComponentPropsContextProvider } from \"@/components/ComponentPropsContextProvider\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { UiComponentTunnelProvider } from \"@/components/UiComponentTunnel/UiComponentTunnelProvider\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport {\n useReportComponentUsage,\n ViewCompositionReset,\n} from \"@/components/ComponentUsageProvider\";\n\ntype RefType<T> = T extends RefAttributes<infer R> ? R : undefined;\n\nexport interface FlowComponentProps<R = HTMLDivElement>\n extends PropsWithTunnel, RefAttributes<R> {\n /**\n * A React element the component is wrapped with. The element is cloned and\n * receives the component as its only child — useful to render the component\n * inside a link, a tooltip trigger or any other wrapper without changing the\n * surrounding markup.\n */\n wrapWith?: ReactElement;\n}\n\nexport type FlowComponentImplementationProps<C extends FlowComponentName> =\n Omit<FlowComponentPropsOfName<C>, keyof FlowComponentProps> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\ntype FlowComponentImplementationType<C extends FlowComponentName> =\n ComponentType<FlowComponentImplementationProps<C>>;\n\ntype FlowComponentType<C extends FlowComponentName> = FunctionComponent<\n FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>\n>;\n\nexport type FlowComponentProvisionType = \"provider\" | \"ui\" | \"layout\";\n\ninterface Options {\n type?: FlowComponentProvisionType;\n isRemoteComponent?: boolean;\n}\n\nexport function flowComponent<C extends FlowComponentName>(\n componentName: C,\n ImplementationComponentType: FlowComponentImplementationType<C>,\n options: Options = {},\n): FlowComponentType<C> {\n type Props = FlowComponentPropsOfName<C> &\n RefAttributes<RefType<FlowComponentPropsOfName<C>>>;\n\n const { type = \"ui\", isRemoteComponent = false } = options;\n\n const MemoizedImplementationComponentType = memo(ImplementationComponentType);\n\n function Component(props: Props) {\n const isViewComposition = useReportComponentUsage(componentName);\n\n const { tunnel, wrapWith, ...propsWithContext } = useProps(\n componentName,\n props as FlowComponentPropsOfName<C>,\n ) as FlowComponentProps<RefType<FlowComponentPropsOfName<C>>>;\n\n const implementationTypeProps = propsWithContext as ComponentProps<\n typeof ImplementationComponentType\n >;\n\n const componentProps = useComponentPropsContext(componentName);\n\n ImplementationComponentType.displayName = `FlowComponentImpl(${componentName})`;\n\n let element: ReactNode = (\n <MemoizedImplementationComponentType {...implementationTypeProps} />\n );\n\n if (type === \"ui\" || type === \"layout\") {\n element = (\n <UiComponentTunnelProvider component={componentName}>\n {element}\n </UiComponentTunnelProvider>\n );\n }\n\n element = (\n <ComponentPropsContextProvider componentProps={componentProps}>\n {element}\n </ComponentPropsContextProvider>\n );\n\n if (type === \"ui\") {\n /**\n * Protect the inside of UI components for accidental prop changes through\n * the Props Context.\n */\n if (isRemoteComponent) {\n element = <ClearPropsContext>{element}</ClearPropsContext>;\n } else {\n /**\n * In case of a UI component that does not have a remote counterpart\n * (like the Modal component), the <ClearPropsContext> must be\n * additionally applied on the host side by using the\n * <ClearPropsContextView>.\n *\n * This prevents Props Contexts created by parent components on the host\n * side affecting the children of this UI component.\n */\n element = (\n <ClearPropsContext>\n <ClearPropsContextView>{element}</ClearPropsContextView>\n </ClearPropsContext>\n );\n }\n }\n\n if (\"slot\" in props && !!props.slot && typeof props.slot === \"string\") {\n element = (\n <SlotContextProvider slot={props.slot} component={componentName}>\n {element}\n </SlotContextProvider>\n );\n }\n\n if (wrapWith) {\n element = cloneElement(wrapWith, undefined, element);\n }\n\n if (tunnel) {\n element = (\n <UiComponentTunnelEntry\n id={tunnel.id}\n component={tunnel.component}\n staticEntryId={tunnel.staticEntryId}\n >\n {element}\n </UiComponentTunnelEntry>\n );\n }\n\n if (isViewComposition) {\n element = <ViewCompositionReset>{element}</ViewCompositionReset>;\n }\n\n return element;\n }\n\n Component.displayName = `FlowComponent(${componentName})`;\n return memo(Component);\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,SAAgB,cACd,eACA,6BACA,UAAmB,CAAC,GACE;CAItB,MAAM,EAAE,OAAO,MAAM,oBAAoB,UAAU;CAEnD,MAAM,sCAAsC,KAAK,2BAA2B;CAE5E,SAAS,UAAU,OAAc;EAC/B,MAAM,oBAAoB,wBAAwB,aAAa;EAE/D,MAAM,EAAE,QAAQ,UAAU,GAAG,qBAAqB,SAChD,eACA,KACF;EAEA,MAAM,0BAA0B;EAIhC,MAAM,iBAAiB,yBAAyB,aAAa;EAE7D,4BAA4B,cAAc,qBAAqB,cAAc;EAE7E,IAAI,UACF,oBAAC,qCAAD,EAAqC,GAAI,wBAA0B,CAAA;EAGrE,IAAI,SAAS,QAAQ,SAAS,UAC5B,UACE,oBAAC,2BAAD;GAA2B,WAAW;GACnC,UAAA;EACwB,CAAA;EAI/B,UACE,oBAAC,+BAAD;GAA+C;GAC5C,UAAA;EAC4B,CAAA;EAGjC,IAAI,SAAS,MAAM;;;;;GAKjB,IAAI,mBACF,UAAU,oBAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA;;;;;;;;;;;GAWzD,UACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,EACtC,CAAA;EAGzB;EAEA,IAAI,UAAU,SAAS,CAAC,CAAC,MAAM,QAAQ,OAAO,MAAM,SAAS,UAC3D,UACE,oBAAC,qBAAD;GAAqB,MAAM,MAAM;GAAM,WAAW;GAC/C,UAAA;EACkB,CAAA;EAIzB,IAAI,UACF,UAAU,aAAa,UAAU,KAAA,GAAW,OAAO;EAGrD,IAAI,QACF,UACE,oBAAC,wBAAD;GACE,IAAI,OAAO;GACX,WAAW,OAAO;GAClB,eAAe,OAAO;GAErB,UAAA;EACqB,CAAA;EAI5B,IAAI,mBACF,UAAU,oBAAC,sBAAD,EAAA,UAAuB,QAA8B,CAAA;EAGjE,OAAO;CACT;CAEA,UAAU,cAAc,iBAAiB,cAAc;CACvD,OAAO,KAAK,SAAS;AACvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n /** The elements status */\n status?: T;\n};\n\nexport interface PropsWithTunnel {\n /** @internal */\n tunnel?: {\n id: string;\n component: FlowComponentName;\n } | null;\n}\n\nexport interface PropsWithClassName {\n /** The elements class name. */\n className?: string;\n}\n\nexport type PropsWithElementType<\n T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n /** The HTML element or React component rendered as the elements root. */\n elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n /**\n * The breakpoint at which the element switches to its compact layout.\n * Evaluated as a container query against the surrounding container, not\n * against the viewport.\n */\n containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n \"dark\",\n \"light\",\n \"dark-static\",\n \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;
|
|
1
|
+
{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n /** The elements status */\n status?: T;\n};\n\nexport interface PropsWithTunnel {\n /** @internal */\n tunnel?: {\n id: string;\n component: FlowComponentName;\n /**\n * A stable entry id instead of a generated one. Needed wherever the same\n * component is rendered more than once for a single logical element:\n * react-aria renders collection children twice — once into its hidden\n * collection document, once for real — and a generated id would register\n * each render as its own entry, so the tunnel exit renders every element\n * twice. Must be unique among the siblings of one tunnel.\n */\n staticEntryId?: string;\n } | null;\n}\n\nexport interface PropsWithClassName {\n /** The elements class name. */\n className?: string;\n}\n\nexport type PropsWithElementType<\n T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n /** The HTML element or React component rendered as the elements root. */\n elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n /**\n * The breakpoint at which the element switches to its compact layout.\n * Evaluated as a container query against the surrounding container, not\n * against the viewport.\n */\n containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n \"dark\",\n \"light\",\n \"dark-static\",\n \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;AAiDA,IAAa,cAAc;CACzB;CACA;CACA;CACA;AACF;AAIA,SAAgB,aAAa,OAAoC;CAC/D,OAAO,YAAY,SAAS,KAAmB;AACjD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Activity.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/Activity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Activity.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/Activity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQxD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAGxB;AAeD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoEtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether the surrounding `Activity` is active.
|
|
3
|
+
*
|
|
4
|
+
* A deactivated `Activity` hides its subtree by suspending it (or by React's
|
|
5
|
+
* own `Activity`). Either way React stops committing that subtree's renders, so
|
|
6
|
+
* everything it portalled out of its own DOM — an open popover, a modal — stays
|
|
7
|
+
* on screen, frozen. Content that renders outside the subtree must therefore
|
|
8
|
+
* unmount itself while this is `false`.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useIsActivityActive: () => boolean;
|
|
11
|
+
export declare const ActivityContextProvider: import('react').Provider<boolean>;
|
|
12
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/context.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,QAAO,OAAsC,CAAC;AAE9E,eAAO,MAAM,uBAAuB,mCAA2B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAE9C,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAmB9C,MAAM,WAAW,iBACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,CAAC,gBAAgB,CAAC,EACpC,IAAI,CACF,IAAI,CAAC,iBAAiB,EACtB,UAAU,GAAG,eAAe,GAAG,YAAY,GAAG,mBAAmB,GAAG,KAAK,CAC1E;CAAG;AAER,wBAAwB;AACxB,eAAO,MAAM,YAAY,wGA8GvB,CAAC;AAEH,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAU9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAU9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAIjE,MAAM,WAAW,aACf,SACE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,EACxD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,EACpC,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,EACtC,iBAAiB,EACjB,kBAAkB,CAAC,gBAAgB,CAAC;IACtC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,wBAAwB;AACxB,eAAO,MAAM,QAAQ,oGAoFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -9,6 +9,7 @@ export declare const ModalTrigger: import('react').FunctionComponent<{
|
|
|
9
9
|
tunnel?: {
|
|
10
10
|
id: string;
|
|
11
11
|
component: import('../../../propTypes').FlowComponentName;
|
|
12
|
+
staticEntryId?: string;
|
|
12
13
|
} | null | undefined;
|
|
13
14
|
ref?: import('react').Ref<HTMLDivElement> | undefined;
|
|
14
15
|
key?: import('react').Key | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/components/ModalTrigger/ModalTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE9D,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/components/ModalTrigger/ModalTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE9D,eAAO,MAAM,YAAY;;;;;;;qBAkBqK,CAAC;;;;;kDAH9L,CAAC;AAEF,eAAe,YAAY,CAAC"}
|