@ankhorage/surface 4.3.0 → 4.4.0
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/CHANGELOG.md +6 -0
- package/README.md +4 -4
- package/dist/components/tabs/Tabs.js +2 -2
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/context.js +1 -1
- package/dist/components/tabs/context.js.map +1 -1
- package/dist/context/FontContext.d.ts.map +1 -1
- package/dist/context/FontContext.js +3 -3
- package/dist/context/FontContext.js.map +1 -1
- package/dist/context/TranslationContext.d.ts.map +1 -1
- package/dist/context/TranslationContext.js +3 -4
- package/dist/context/TranslationContext.js.map +1 -1
- package/dist/core/responsive/ResponsiveProvider.d.ts.map +1 -1
- package/dist/core/responsive/ResponsiveProvider.js +3 -3
- package/dist/core/responsive/ResponsiveProvider.js.map +1 -1
- package/dist/examples/DocsExamples.js +1 -1
- package/dist/examples/DocsExamples.js.map +1 -1
- package/dist/features/accordion/adapters/inbound/Accordion.js +2 -2
- package/dist/features/accordion/adapters/inbound/Accordion.js.map +1 -1
- package/dist/features/accordion/adapters/inbound/AccordionContent.js +1 -1
- package/dist/features/accordion/adapters/inbound/AccordionContent.js.map +1 -1
- package/dist/features/accordion/adapters/inbound/AccordionItem.js +3 -3
- package/dist/features/accordion/adapters/inbound/AccordionItem.js.map +1 -1
- package/dist/features/accordion/adapters/inbound/AccordionTrigger.js +1 -1
- package/dist/features/accordion/adapters/inbound/AccordionTrigger.js.map +1 -1
- package/dist/features/bottom-sheet/BottomSheetProvider.js +2 -2
- package/dist/features/bottom-sheet/BottomSheetProvider.js.map +1 -1
- package/dist/features/bottom-sheet/useBottomSheet.js +1 -1
- package/dist/features/bottom-sheet/useBottomSheet.js.map +1 -1
- package/dist/features/popover/adapters/inbound/Popover.d.ts +5 -0
- package/dist/features/popover/adapters/inbound/Popover.d.ts.map +1 -0
- package/dist/features/popover/adapters/inbound/Popover.js +31 -0
- package/dist/features/popover/adapters/inbound/Popover.js.map +1 -0
- package/dist/features/popover/adapters/inbound/PopoverOverlay.d.ts +17 -0
- package/dist/features/popover/adapters/inbound/PopoverOverlay.d.ts.map +1 -0
- package/dist/features/popover/adapters/inbound/PopoverOverlay.js +34 -0
- package/dist/features/popover/adapters/inbound/PopoverOverlay.js.map +1 -0
- package/dist/features/popover/adapters/inbound/usePopoverLayout.d.ts +21 -0
- package/dist/features/popover/adapters/inbound/usePopoverLayout.d.ts.map +1 -0
- package/dist/features/popover/adapters/inbound/usePopoverLayout.js +33 -0
- package/dist/features/popover/adapters/inbound/usePopoverLayout.js.map +1 -0
- package/dist/features/popover/public.d.ts +3 -0
- package/dist/features/popover/public.d.ts.map +1 -0
- package/dist/features/popover/public.js +2 -0
- package/dist/features/popover/public.js.map +1 -0
- package/dist/features/popover/utils/resolvePopoverPosition.d.ts +25 -0
- package/dist/features/popover/utils/resolvePopoverPosition.d.ts.map +1 -0
- package/dist/features/popover/utils/resolvePopoverPosition.js +23 -0
- package/dist/features/popover/utils/resolvePopoverPosition.js.map +1 -0
- package/dist/{components/toast → features/toast/adapters/inbound}/Toast.d.ts +2 -1
- package/dist/features/toast/adapters/inbound/Toast.d.ts.map +1 -0
- package/dist/{components/toast → features/toast/adapters/inbound}/Toast.js +37 -32
- package/dist/features/toast/adapters/inbound/Toast.js.map +1 -0
- package/dist/features/toast/adapters/inbound/ToastProvider.d.ts +5 -0
- package/dist/features/toast/adapters/inbound/ToastProvider.d.ts.map +1 -0
- package/dist/features/toast/adapters/inbound/ToastProvider.js +29 -0
- package/dist/features/toast/adapters/inbound/ToastProvider.js.map +1 -0
- package/dist/features/toast/adapters/inbound/useToast.d.ts +4 -0
- package/dist/features/toast/adapters/inbound/useToast.d.ts.map +1 -0
- package/dist/features/toast/adapters/inbound/useToast.js +11 -0
- package/dist/features/toast/adapters/inbound/useToast.js.map +1 -0
- package/dist/features/toast/composition/ToastContext.d.ts +4 -0
- package/dist/features/toast/composition/ToastContext.d.ts.map +1 -0
- package/dist/features/toast/composition/ToastContext.js +4 -0
- package/dist/features/toast/composition/ToastContext.js.map +1 -0
- package/dist/features/toast/composition/useToastRuntime.d.ts +11 -0
- package/dist/features/toast/composition/useToastRuntime.d.ts.map +1 -0
- package/dist/features/toast/composition/useToastRuntime.js +50 -0
- package/dist/features/toast/composition/useToastRuntime.js.map +1 -0
- package/dist/features/toast/public.d.ts +5 -0
- package/dist/features/toast/public.d.ts.map +1 -0
- package/dist/features/toast/public.js +4 -0
- package/dist/features/toast/public.js.map +1 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/internal/overlay/OverlayProvider.d.ts +1 -0
- package/dist/internal/overlay/OverlayProvider.d.ts.map +1 -1
- package/dist/internal/overlay/OverlayProvider.js +9 -7
- package/dist/internal/overlay/OverlayProvider.js.map +1 -1
- package/dist/internal/overlay/useOverlayStack.js +1 -1
- package/dist/internal/overlay/useOverlayStack.js.map +1 -1
- package/dist/internal/resolvers/resolveOverlayZIndex.d.ts +1 -1
- package/dist/internal/resolvers/resolveOverlayZIndex.d.ts.map +1 -1
- package/dist/internal/resolvers/resolveOverlayZIndex.js +1 -0
- package/dist/internal/resolvers/resolveOverlayZIndex.js.map +1 -1
- package/dist/layout/AppBar.js +1 -1
- package/dist/layout/AppBar.js.map +1 -1
- package/dist/theme/ThemeContext.d.ts.map +1 -1
- package/dist/theme/ThemeContext.js +4 -5
- package/dist/theme/ThemeContext.js.map +1 -1
- package/dist/types/popover.d.ts +21 -0
- package/dist/types/popover.d.ts.map +1 -0
- package/dist/types/popover.js +2 -0
- package/dist/types/popover.js.map +1 -0
- package/dist/{components/toast/types.d.ts → types/toast.d.ts} +11 -3
- package/dist/types/toast.d.ts.map +1 -0
- package/dist/types/toast.js +2 -0
- package/dist/types/toast.js.map +1 -0
- package/package.json +1 -1
- package/src/components/tabs/Tabs.tsx +2 -2
- package/src/components/tabs/context.tsx +1 -1
- package/src/context/FontContext.tsx +3 -3
- package/src/context/TranslationContext.tsx +3 -4
- package/src/core/responsive/ResponsiveProvider.tsx +3 -3
- package/src/examples/DocsExamples.tsx +1 -1
- package/src/features/accordion/adapters/inbound/Accordion.tsx +2 -2
- package/src/features/accordion/adapters/inbound/AccordionContent.tsx +1 -1
- package/src/features/accordion/adapters/inbound/AccordionItem.tsx +3 -3
- package/src/features/accordion/adapters/inbound/AccordionTrigger.tsx +1 -1
- package/src/features/bottom-sheet/BottomSheetProvider.tsx +2 -2
- package/src/features/bottom-sheet/useBottomSheet.ts +1 -1
- package/src/features/popover/adapters/inbound/Popover.tsx +49 -0
- package/src/features/popover/adapters/inbound/PopoverOverlay.tsx +72 -0
- package/src/features/popover/adapters/inbound/usePopoverLayout.ts +51 -0
- package/src/features/popover/public.ts +2 -0
- package/src/features/popover/utils/resolvePopoverPosition.test.ts +31 -0
- package/src/features/popover/utils/resolvePopoverPosition.ts +40 -0
- package/src/{components/toast → features/toast/adapters/inbound}/Toast.tsx +58 -54
- package/src/features/toast/adapters/inbound/ToastProvider.tsx +47 -0
- package/src/features/toast/adapters/inbound/useToast.test.tsx +18 -0
- package/src/features/toast/adapters/inbound/useToast.ts +15 -0
- package/src/features/toast/composition/ToastContext.ts +6 -0
- package/src/features/toast/composition/useToastRuntime.ts +76 -0
- package/src/features/toast/public.ts +10 -0
- package/src/index.test.ts +3 -1
- package/src/index.ts +14 -2
- package/src/internal/overlay/OverlayProvider.tsx +10 -8
- package/src/internal/overlay/useOverlayStack.ts +1 -1
- package/src/internal/resolvers/resolveOverlayZIndex.test.ts +2 -1
- package/src/internal/resolvers/resolveOverlayZIndex.ts +2 -1
- package/src/layout/AppBar.tsx +1 -1
- package/src/theme/ThemeContext.tsx +4 -5
- package/src/types/popover.ts +25 -0
- package/src/{components/toast/types.ts → types/toast.ts} +12 -2
- package/dist/components/toast/Toast.d.ts.map +0 -1
- package/dist/components/toast/Toast.js.map +0 -1
- package/dist/components/toast/ToastProvider.d.ts +0 -13
- package/dist/components/toast/ToastProvider.d.ts.map +0 -1
- package/dist/components/toast/ToastProvider.js +0 -70
- package/dist/components/toast/ToastProvider.js.map +0 -1
- package/dist/components/toast/index.d.ts +0 -4
- package/dist/components/toast/index.d.ts.map +0 -1
- package/dist/components/toast/index.js +0 -3
- package/dist/components/toast/index.js.map +0 -1
- package/dist/components/toast/types.d.ts.map +0 -1
- package/dist/components/toast/types.js +0 -2
- package/dist/components/toast/types.js.map +0 -1
- package/src/components/toast/ToastProvider.tsx +0 -115
- package/src/components/toast/index.ts +0 -3
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pressable, StyleSheet, View } from 'react-native';
|
|
3
|
+
import { Portal } from '../../../../internal/overlay/Portal';
|
|
4
|
+
import { usePopoverLayout } from './usePopoverLayout';
|
|
5
|
+
/*** Renders and positions one mounted popover overlay for an open anchor. */
|
|
6
|
+
export function PopoverOverlay({ anchorRef, children, closeOnOutsidePress, offset, onClose, passive, placement, testID, }) {
|
|
7
|
+
const { onContentLayout, position, ready } = usePopoverLayout({
|
|
8
|
+
anchorRef,
|
|
9
|
+
offset,
|
|
10
|
+
open: true,
|
|
11
|
+
placement,
|
|
12
|
+
});
|
|
13
|
+
return (<Portal layer="popover" visible={ready}>
|
|
14
|
+
<View pointerEvents="box-none" style={styles.overlay}>
|
|
15
|
+
{closeOnOutsidePress ? (<Pressable accessibilityLabel="Close popover" onPress={passive ? undefined : onClose} style={styles.backdrop} testID={testID ? `${testID}-backdrop` : undefined}/>) : null}
|
|
16
|
+
<View onLayout={onContentLayout} style={[styles.content, position]} testID={testID ? `${testID}-content` : undefined}>
|
|
17
|
+
{children}
|
|
18
|
+
</View>
|
|
19
|
+
</View>
|
|
20
|
+
</Portal>);
|
|
21
|
+
}
|
|
22
|
+
const absoluteFill = {
|
|
23
|
+
bottom: 0,
|
|
24
|
+
left: 0,
|
|
25
|
+
position: 'absolute',
|
|
26
|
+
right: 0,
|
|
27
|
+
top: 0,
|
|
28
|
+
};
|
|
29
|
+
const styles = StyleSheet.create({
|
|
30
|
+
backdrop: absoluteFill,
|
|
31
|
+
content: { position: 'absolute' },
|
|
32
|
+
overlay: absoluteFill,
|
|
33
|
+
});
|
|
34
|
+
//# sourceMappingURL=PopoverOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopoverOverlay.js","sourceRoot":"","sources":["../../../../../src/features/popover/adapters/inbound/PopoverOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,6EAA6E;AAC7E,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,MAAM,GACc;IACpB,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC;QAC5D,SAAS;QACT,MAAM;QACN,IAAI,EAAE,IAAI;QACV,SAAS;KACV,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CACrC;MAAA,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACnD;QAAA,CAAC,mBAAmB,CAAC,CAAC,CAAC,CACrB,CAAC,SAAS,CACR,kBAAkB,CAAC,eAAe,CAClC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CACvC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAClD,CACH,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,IAAI,CACH,QAAQ,CAAC,CAAC,eAAe,CAAC,CAC1B,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAClC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAEjD;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAaD,MAAM,YAAY,GAAc;IAC9B,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE,YAAY;IACtB,OAAO,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;IACjC,OAAO,EAAE,YAAY;CACtB,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';\n\nimport { Portal } from '../../../../internal/overlay/Portal';\nimport type { PopoverPlacement } from '../../../../types/popover';\nimport { usePopoverLayout } from './usePopoverLayout';\n\n/*** Renders and positions one mounted popover overlay for an open anchor. */\nexport function PopoverOverlay({\n anchorRef,\n children,\n closeOnOutsidePress,\n offset,\n onClose,\n passive,\n placement,\n testID,\n}: PopoverOverlayProps) {\n const { onContentLayout, position, ready } = usePopoverLayout({\n anchorRef,\n offset,\n open: true,\n placement,\n });\n\n return (\n <Portal layer=\"popover\" visible={ready}>\n <View pointerEvents=\"box-none\" style={styles.overlay}>\n {closeOnOutsidePress ? (\n <Pressable\n accessibilityLabel=\"Close popover\"\n onPress={passive ? undefined : onClose}\n style={styles.backdrop}\n testID={testID ? `${testID}-backdrop` : undefined}\n />\n ) : null}\n <View\n onLayout={onContentLayout}\n style={[styles.content, position]}\n testID={testID ? `${testID}-content` : undefined}\n >\n {children}\n </View>\n </View>\n </Portal>\n );\n}\n\ninterface PopoverOverlayProps {\n anchorRef: React.RefObject<View | null>;\n children?: React.ReactNode;\n closeOnOutsidePress: boolean;\n offset: number;\n onClose: () => void;\n passive: boolean;\n placement: PopoverPlacement;\n testID?: string;\n}\n\nconst absoluteFill: ViewStyle = {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n};\n\nconst styles = StyleSheet.create({\n backdrop: absoluteFill,\n content: { position: 'absolute' },\n overlay: absoluteFill,\n});\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type LayoutChangeEvent, type View } from 'react-native';
|
|
3
|
+
import type { PopoverPlacement } from '../../../../types/popover';
|
|
4
|
+
/*** Measures the anchor and resolves the current viewport-safe popover position. */
|
|
5
|
+
export declare function usePopoverLayout({ anchorRef, offset, open, placement }: UsePopoverLayoutInput): {
|
|
6
|
+
measureAnchor: () => void;
|
|
7
|
+
onContentLayout: (event: LayoutChangeEvent) => void;
|
|
8
|
+
position: {
|
|
9
|
+
left: number;
|
|
10
|
+
top: number;
|
|
11
|
+
} | undefined;
|
|
12
|
+
ready: boolean;
|
|
13
|
+
};
|
|
14
|
+
interface UsePopoverLayoutInput {
|
|
15
|
+
anchorRef: React.RefObject<View | null>;
|
|
16
|
+
offset: number;
|
|
17
|
+
open: boolean;
|
|
18
|
+
placement: PopoverPlacement;
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=usePopoverLayout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverLayout.d.ts","sourceRoot":"","sources":["../../../../../src/features/popover/adapters/inbound/usePopoverLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,iBAAiB,EAGtB,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,oFAAoF;AACpF,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB;;6BAe1C,iBAAiB;;;;;;EAgBpE;AAED,UAAU,qBAAqB;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,gBAAgB,CAAC;CAC7B"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useWindowDimensions, } from 'react-native';
|
|
3
|
+
import { resolvePopoverPosition } from '../../utils/resolvePopoverPosition';
|
|
4
|
+
/*** Measures the anchor and resolves the current viewport-safe popover position. */
|
|
5
|
+
export function usePopoverLayout({ anchorRef, offset, open, placement }) {
|
|
6
|
+
const [anchorLayout, setAnchorLayout] = React.useState(null);
|
|
7
|
+
const [contentSize, setContentSize] = React.useState({ height: 0, width: 0 });
|
|
8
|
+
const { height: viewportHeight, width: viewportWidth } = useWindowDimensions();
|
|
9
|
+
const measureAnchor = React.useCallback(() => {
|
|
10
|
+
anchorRef.current?.measureInWindow((x, y, width, height) => {
|
|
11
|
+
setAnchorLayout({ height, width, x, y });
|
|
12
|
+
});
|
|
13
|
+
}, [anchorRef]);
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
if (open)
|
|
16
|
+
measureAnchor();
|
|
17
|
+
}, [measureAnchor, open]);
|
|
18
|
+
const onContentLayout = React.useCallback((event) => {
|
|
19
|
+
setContentSize(event.nativeEvent.layout);
|
|
20
|
+
}, []);
|
|
21
|
+
const position = anchorLayout
|
|
22
|
+
? resolvePopoverPosition({
|
|
23
|
+
anchor: anchorLayout,
|
|
24
|
+
contentSize,
|
|
25
|
+
offset,
|
|
26
|
+
placement,
|
|
27
|
+
viewport: { height: viewportHeight, width: viewportWidth },
|
|
28
|
+
viewportPadding: 8,
|
|
29
|
+
})
|
|
30
|
+
: undefined;
|
|
31
|
+
return { measureAnchor, onContentLayout, position, ready: Boolean(anchorLayout) };
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=usePopoverLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePopoverLayout.js","sourceRoot":"","sources":["../../../../../src/features/popover/adapters/inbound/usePopoverLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,mBAAmB,GAEpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,oFAAoF;AACpF,MAAM,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAyB;IAC5F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IACrF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAC9E,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAE/E,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YACzD,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI;YAAE,aAAa,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QACrE,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,YAAY;QAC3B,CAAC,CAAC,sBAAsB,CAAC;YACrB,MAAM,EAAE,YAAY;YACpB,WAAW;YACX,MAAM;YACN,SAAS;YACT,QAAQ,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE;YAC1D,eAAe,EAAE,CAAC;SACnB,CAAC;QACJ,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;AACpF,CAAC","sourcesContent":["import React from 'react';\nimport {\n type LayoutChangeEvent,\n type LayoutRectangle,\n useWindowDimensions,\n type View,\n} from 'react-native';\n\nimport type { PopoverPlacement } from '../../../../types/popover';\nimport { resolvePopoverPosition } from '../../utils/resolvePopoverPosition';\n\n/*** Measures the anchor and resolves the current viewport-safe popover position. */\nexport function usePopoverLayout({ anchorRef, offset, open, placement }: UsePopoverLayoutInput) {\n const [anchorLayout, setAnchorLayout] = React.useState<LayoutRectangle | null>(null);\n const [contentSize, setContentSize] = React.useState({ height: 0, width: 0 });\n const { height: viewportHeight, width: viewportWidth } = useWindowDimensions();\n\n const measureAnchor = React.useCallback(() => {\n anchorRef.current?.measureInWindow((x, y, width, height) => {\n setAnchorLayout({ height, width, x, y });\n });\n }, [anchorRef]);\n\n React.useEffect(() => {\n if (open) measureAnchor();\n }, [measureAnchor, open]);\n\n const onContentLayout = React.useCallback((event: LayoutChangeEvent) => {\n setContentSize(event.nativeEvent.layout);\n }, []);\n\n const position = anchorLayout\n ? resolvePopoverPosition({\n anchor: anchorLayout,\n contentSize,\n offset,\n placement,\n viewport: { height: viewportHeight, width: viewportWidth },\n viewportPadding: 8,\n })\n : undefined;\n\n return { measureAnchor, onContentLayout, position, ready: Boolean(anchorLayout) };\n}\n\ninterface UsePopoverLayoutInput {\n anchorRef: React.RefObject<View | null>;\n offset: number;\n open: boolean;\n placement: PopoverPlacement;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/popover/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/popover/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export type { PopoverAnchorRenderProps, PopoverPlacement, PopoverProps } from '../../types/popover';\nexport { Popover } from './adapters/inbound/Popover';\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { PopoverPlacement } from '../../../types/popover';
|
|
2
|
+
/*** Resolves a viewport-clamped anchored position for popover content. */
|
|
3
|
+
export declare function resolvePopoverPosition({ anchor, contentSize, offset, placement, viewport, viewportPadding, }: {
|
|
4
|
+
anchor: {
|
|
5
|
+
height: number;
|
|
6
|
+
width: number;
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
};
|
|
10
|
+
contentSize: {
|
|
11
|
+
height: number;
|
|
12
|
+
width: number;
|
|
13
|
+
};
|
|
14
|
+
offset: number;
|
|
15
|
+
placement: PopoverPlacement;
|
|
16
|
+
viewport: {
|
|
17
|
+
height: number;
|
|
18
|
+
width: number;
|
|
19
|
+
};
|
|
20
|
+
viewportPadding: number;
|
|
21
|
+
}): {
|
|
22
|
+
left: number;
|
|
23
|
+
top: number;
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=resolvePopoverPosition.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolvePopoverPosition.d.ts","sourceRoot":"","sources":["../../../../src/features/popover/utils/resolvePopoverPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,0EAA0E;AAC1E,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,WAAW,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAC;CACzB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAiBhC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*** Resolves a viewport-clamped anchored position for popover content. */
|
|
2
|
+
export function resolvePopoverPosition({ anchor, contentSize, offset, placement, viewport, viewportPadding, }) {
|
|
3
|
+
const anchorCenterX = anchor.x + anchor.width / 2;
|
|
4
|
+
const rawLeft = placement.endsWith('-start')
|
|
5
|
+
? anchor.x
|
|
6
|
+
: placement.endsWith('-end')
|
|
7
|
+
? anchor.x + anchor.width - contentSize.width
|
|
8
|
+
: anchorCenterX - contentSize.width / 2;
|
|
9
|
+
const rawTop = placement.startsWith('top')
|
|
10
|
+
? anchor.y - contentSize.height - offset
|
|
11
|
+
: anchor.y + anchor.height + offset;
|
|
12
|
+
const maxLeft = Math.max(viewportPadding, viewport.width - contentSize.width - viewportPadding);
|
|
13
|
+
const maxTop = Math.max(viewportPadding, viewport.height - contentSize.height - viewportPadding);
|
|
14
|
+
return {
|
|
15
|
+
left: clamp(rawLeft, viewportPadding, maxLeft),
|
|
16
|
+
top: clamp(rawTop, viewportPadding, maxTop),
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
/*** Clamps one numeric position into the available viewport range. */
|
|
20
|
+
function clamp(value, minimum, maximum) {
|
|
21
|
+
return Math.min(Math.max(value, minimum), maximum);
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=resolvePopoverPosition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolvePopoverPosition.js","sourceRoot":"","sources":["../../../../src/features/popover/utils/resolvePopoverPosition.ts"],"names":[],"mappings":"AAEA,0EAA0E;AAC1E,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,GAQhB;IACC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC1C,CAAC,CAAC,MAAM,CAAC,CAAC;QACV,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC1B,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;YAC7C,CAAC,CAAC,aAAa,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC;QACxC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,MAAM;QACxC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;IACtC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,eAAe,CAAC,CAAC;IAEjG,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC;QAC9C,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,eAAe,EAAE,MAAM,CAAC;KAC5C,CAAC;AACJ,CAAC;AAED,sEAAsE;AACtE,SAAS,KAAK,CAAC,KAAa,EAAE,OAAe,EAAE,OAAe;IAC5D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;AACrD,CAAC","sourcesContent":["import type { PopoverPlacement } from '../../../types/popover';\n\n/*** Resolves a viewport-clamped anchored position for popover content. */\nexport function resolvePopoverPosition({\n anchor,\n contentSize,\n offset,\n placement,\n viewport,\n viewportPadding,\n}: {\n anchor: { height: number; width: number; x: number; y: number };\n contentSize: { height: number; width: number };\n offset: number;\n placement: PopoverPlacement;\n viewport: { height: number; width: number };\n viewportPadding: number;\n}): { left: number; top: number } {\n const anchorCenterX = anchor.x + anchor.width / 2;\n const rawLeft = placement.endsWith('-start')\n ? anchor.x\n : placement.endsWith('-end')\n ? anchor.x + anchor.width - contentSize.width\n : anchorCenterX - contentSize.width / 2;\n const rawTop = placement.startsWith('top')\n ? anchor.y - contentSize.height - offset\n : anchor.y + anchor.height + offset;\n const maxLeft = Math.max(viewportPadding, viewport.width - contentSize.width - viewportPadding);\n const maxTop = Math.max(viewportPadding, viewport.height - contentSize.height - viewportPadding);\n\n return {\n left: clamp(rawLeft, viewportPadding, maxLeft),\n top: clamp(rawTop, viewportPadding, maxTop),\n };\n}\n\n/*** Clamps one numeric position into the available viewport range. */\nfunction clamp(value: number, minimum: number, maximum: number): number {\n return Math.min(Math.max(value, minimum), maximum);\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ToastProps } from '
|
|
2
|
+
import type { ToastProps } from '../../../../types/toast';
|
|
3
|
+
/*** Renders one transient toast notification. */
|
|
3
4
|
export declare function Toast({ title, description, status, onDismiss, interactionPolicy, testID, }: ToastProps): React.JSX.Element;
|
|
4
5
|
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,iDAAiD;AACjD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAkB,EAClB,SAAS,EACT,iBAA6B,EAC7B,MAAM,GACP,EAAE,UAAU,qBAkCZ"}
|
|
@@ -1,10 +1,31 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Pressable } from 'react-native';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
2
|
+
import { Pressable, StyleSheet } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../../../theme/ThemeContext';
|
|
4
|
+
import { Box, Stack } from '../../../layout/public';
|
|
5
|
+
import { Surface } from '../../../surface/public';
|
|
6
|
+
import { Text } from '../../../typography/public';
|
|
7
|
+
/*** Renders one transient toast notification. */
|
|
8
|
+
export function Toast({ title, description, status = 'default', onDismiss, interactionPolicy = 'enabled', testID, }) {
|
|
9
|
+
const { theme } = useTheme();
|
|
10
|
+
const statusColor = resolveToastStatusColor(theme, status);
|
|
11
|
+
const statusTextColor = resolveToastStatusTextColor(status);
|
|
12
|
+
const passive = interactionPolicy === 'passive';
|
|
13
|
+
const statusStyle = React.useMemo(() => ({ borderLeftColor: statusColor }), [statusColor]);
|
|
14
|
+
return (<Surface p="m" style={[styles.root, statusStyle]} testID={testID} variant="raised">
|
|
15
|
+
<Stack align="center" direction="row" justify="space-between">
|
|
16
|
+
<Box flex={1}>
|
|
17
|
+
{title ? (<Text variant="label" weight="medium">
|
|
18
|
+
{title}
|
|
19
|
+
</Text>) : null}
|
|
20
|
+
{description ? <Text emphasis="muted">{description}</Text> : null}
|
|
21
|
+
</Box>
|
|
22
|
+
{onDismiss ? (<Pressable accessibilityLabel="Dismiss notification" accessibilityRole="button" onPress={passive ? undefined : onDismiss} testID={testID ? `${testID}-dismiss` : undefined}>
|
|
23
|
+
<Text color={statusTextColor}>×</Text>
|
|
24
|
+
</Pressable>) : null}
|
|
25
|
+
</Stack>
|
|
26
|
+
</Surface>);
|
|
27
|
+
}
|
|
28
|
+
/*** Resolves the border color representing a toast status. */
|
|
8
29
|
function resolveToastStatusColor(theme, status) {
|
|
9
30
|
switch (status) {
|
|
10
31
|
case 'success':
|
|
@@ -19,6 +40,7 @@ function resolveToastStatusColor(theme, status) {
|
|
|
19
40
|
return theme.semantics.action.primary.base;
|
|
20
41
|
}
|
|
21
42
|
}
|
|
43
|
+
/*** Resolves the semantic text color representing a toast status. */
|
|
22
44
|
function resolveToastStatusTextColor(status) {
|
|
23
45
|
switch (status) {
|
|
24
46
|
case 'success':
|
|
@@ -33,30 +55,13 @@ function resolveToastStatusTextColor(status) {
|
|
|
33
55
|
return 'primary';
|
|
34
56
|
}
|
|
35
57
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
shadowOpacity: 0.14,
|
|
46
|
-
shadowRadius: 12,
|
|
47
|
-
shadowOffset: { width: 0, height: 6 },
|
|
48
|
-
}} testID={testID} variant="raised">
|
|
49
|
-
<Inline align="center" justify="space-between">
|
|
50
|
-
<Box flex={1}>
|
|
51
|
-
{title ? (<Text variant="label" weight="medium">
|
|
52
|
-
{title}
|
|
53
|
-
</Text>) : null}
|
|
54
|
-
{description ? <Text emphasis="muted">{description}</Text> : null}
|
|
55
|
-
</Box>
|
|
56
|
-
{onDismiss ? (<Pressable accessibilityLabel="Dismiss notification" accessibilityRole="button" onPress={passive ? undefined : onDismiss} testID={testID ? `${testID}-dismiss` : undefined}>
|
|
57
|
-
<Text color={statusTextColor}>×</Text>
|
|
58
|
-
</Pressable>) : null}
|
|
59
|
-
</Inline>
|
|
60
|
-
</Surface>);
|
|
61
|
-
}
|
|
58
|
+
const styles = StyleSheet.create({
|
|
59
|
+
root: {
|
|
60
|
+
borderLeftWidth: 3,
|
|
61
|
+
minWidth: 280,
|
|
62
|
+
shadowOffset: { height: 6, width: 0 },
|
|
63
|
+
shadowOpacity: 0.14,
|
|
64
|
+
shadowRadius: 12,
|
|
65
|
+
},
|
|
66
|
+
});
|
|
62
67
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Pressable, StyleSheet, type ViewStyle } from 'react-native';\n\nimport type { SurfaceColor } from '../../../../surfaceColor';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../theme/types';\nimport type { ToastProps } from '../../../../types/toast';\nimport { Box, Stack } from '../../../layout/public';\nimport { Surface } from '../../../surface/public';\nimport { Text } from '../../../typography/public';\n\n/*** Renders one transient toast notification. */\nexport function Toast({\n title,\n description,\n status = 'default',\n onDismiss,\n interactionPolicy = 'enabled',\n testID,\n}: ToastProps) {\n const { theme } = useTheme();\n const statusColor = resolveToastStatusColor(theme, status);\n const statusTextColor = resolveToastStatusTextColor(status);\n const passive = interactionPolicy === 'passive';\n const statusStyle = React.useMemo<ViewStyle>(\n () => ({ borderLeftColor: statusColor }),\n [statusColor],\n );\n\n return (\n <Surface p=\"m\" style={[styles.root, statusStyle]} testID={testID} variant=\"raised\">\n <Stack align=\"center\" direction=\"row\" justify=\"space-between\">\n <Box flex={1}>\n {title ? (\n <Text variant=\"label\" weight=\"medium\">\n {title}\n </Text>\n ) : null}\n {description ? <Text emphasis=\"muted\">{description}</Text> : null}\n </Box>\n {onDismiss ? (\n <Pressable\n accessibilityLabel=\"Dismiss notification\"\n accessibilityRole=\"button\"\n onPress={passive ? undefined : onDismiss}\n testID={testID ? `${testID}-dismiss` : undefined}\n >\n <Text color={statusTextColor}>×</Text>\n </Pressable>\n ) : null}\n </Stack>\n </Surface>\n );\n}\n\n/*** Resolves the border color representing a toast status. */\nfunction resolveToastStatusColor(theme: SurfaceTheme, status: ToastProps['status']) {\n switch (status) {\n case 'success':\n return theme.semantics.success.base;\n case 'warning':\n return theme.semantics.warning.base;\n case 'error':\n return theme.semantics.error.base;\n case 'info':\n return theme.semantics.info.base;\n default:\n return theme.semantics.action.primary.base;\n }\n}\n\n/*** Resolves the semantic text color representing a toast status. */\nfunction resolveToastStatusTextColor(status: ToastProps['status']): SurfaceColor {\n switch (status) {\n case 'success':\n return 'success';\n case 'warning':\n return 'warning';\n case 'error':\n return 'error';\n case 'info':\n return 'info';\n default:\n return 'primary';\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n borderLeftWidth: 3,\n minWidth: 280,\n shadowOffset: { height: 6, width: 0 },\n shadowOpacity: 0.14,\n shadowRadius: 12,\n },\n});\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ToastProviderProps } from '../../../../types/toast';
|
|
3
|
+
/*** Provides the toast runtime context and renders its shared portal host. */
|
|
4
|
+
export declare function ToastProvider({ children, defaultDuration }: ToastProviderProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=ToastProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAMlE,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAsB,EAAE,EAAE,kBAAkB,qBA2BrF"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import { Portal } from '../../../../internal/overlay/Portal';
|
|
4
|
+
import { resolveOverlayAnimation } from '../../../../internal/resolvers';
|
|
5
|
+
import { Stack } from '../../../layout/public';
|
|
6
|
+
import { ToastContext } from '../../composition/ToastContext';
|
|
7
|
+
import { useToastRuntime } from '../../composition/useToastRuntime';
|
|
8
|
+
import { Toast } from './Toast';
|
|
9
|
+
/*** Provides the toast runtime context and renders its shared portal host. */
|
|
10
|
+
export function ToastProvider({ children, defaultDuration = 4000 }) {
|
|
11
|
+
const animation = resolveOverlayAnimation('toast');
|
|
12
|
+
const { controller, toasts } = useToastRuntime(defaultDuration);
|
|
13
|
+
const animationStyle = React.useMemo(() => ({ paddingTop: 16 + animation.offset }), [animation.offset]);
|
|
14
|
+
return (<ToastContext value={controller}>
|
|
15
|
+
{children}
|
|
16
|
+
<Portal layer="toast" visible={toasts.length > 0}>
|
|
17
|
+
<Stack gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
|
|
18
|
+
{toasts.map((toast) => (<Toast description={toast.description} key={toast.id} onDismiss={() => controller.dismissToast(toast.id)} status={toast.status} testID={toast.testID} title={toast.title}/>))}
|
|
19
|
+
</Stack>
|
|
20
|
+
</Portal>
|
|
21
|
+
</ToastContext>);
|
|
22
|
+
}
|
|
23
|
+
const styles = StyleSheet.create({
|
|
24
|
+
container: {
|
|
25
|
+
alignItems: 'flex-end',
|
|
26
|
+
padding: 16,
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=ToastProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,8EAA8E;AAC9E,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,IAAI,EAAsB;IACpF,MAAM,SAAS,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAC7C,CAAC,SAAS,CAAC,MAAM,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAC9B;MAAA,CAAC,QAAQ,CACT;MAAA,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAC/C;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAChF;UAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,CAAC,KAAK,CACJ,WAAW,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAC/B,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CACnD,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EACnB,CACH,CAAC,CACJ;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,UAAU;QACtB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet, type ViewStyle } from 'react-native';\n\nimport { Portal } from '../../../../internal/overlay/Portal';\nimport { resolveOverlayAnimation } from '../../../../internal/resolvers';\nimport type { ToastProviderProps } from '../../../../types/toast';\nimport { Stack } from '../../../layout/public';\nimport { ToastContext } from '../../composition/ToastContext';\nimport { useToastRuntime } from '../../composition/useToastRuntime';\nimport { Toast } from './Toast';\n\n/*** Provides the toast runtime context and renders its shared portal host. */\nexport function ToastProvider({ children, defaultDuration = 4000 }: ToastProviderProps) {\n const animation = resolveOverlayAnimation('toast');\n const { controller, toasts } = useToastRuntime(defaultDuration);\n const animationStyle = React.useMemo<ViewStyle>(\n () => ({ paddingTop: 16 + animation.offset }),\n [animation.offset],\n );\n\n return (\n <ToastContext value={controller}>\n {children}\n <Portal layer=\"toast\" visible={toasts.length > 0}>\n <Stack gap=\"s\" pointerEvents=\"box-none\" style={[styles.container, animationStyle]}>\n {toasts.map((toast) => (\n <Toast\n description={toast.description}\n key={toast.id}\n onDismiss={() => controller.dismissToast(toast.id)}\n status={toast.status}\n testID={toast.testID}\n title={toast.title}\n />\n ))}\n </Stack>\n </Portal>\n </ToastContext>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'flex-end',\n padding: 16,\n },\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/useToast.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,gEAAgE;AAChE,wBAAgB,QAAQ,IAAI,eAAe,CAQ1C"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { use } from 'react';
|
|
2
|
+
import { ToastContext } from '../../composition/ToastContext';
|
|
3
|
+
/*** Returns the toast controller installed by ToastProvider. */
|
|
4
|
+
export function useToast() {
|
|
5
|
+
const controller = use(ToastContext);
|
|
6
|
+
if (!controller) {
|
|
7
|
+
throw new Error('useToast must be used within <ToastProvider>.');
|
|
8
|
+
}
|
|
9
|
+
return controller;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=useToast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToast.js","sourceRoot":"","sources":["../../../../../src/features/toast/adapters/inbound/useToast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,gEAAgE;AAChE,MAAM,UAAU,QAAQ;IACtB,MAAM,UAAU,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;IAErC,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { use } from 'react';\n\nimport type { ToastController } from '../../../../types/toast';\nimport { ToastContext } from '../../composition/ToastContext';\n\n/*** Returns the toast controller installed by ToastProvider. */\nexport function useToast(): ToastController {\n const controller = use(ToastContext);\n\n if (!controller) {\n throw new Error('useToast must be used within <ToastProvider>.');\n }\n\n return controller;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/features/toast/composition/ToastContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,yEAAyE;AACzE,eAAO,MAAM,YAAY,iDAA8C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastContext.js","sourceRoot":"","sources":["../../../../src/features/toast/composition/ToastContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,yEAAyE;AACzE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport type { ToastController } from '../../../types/toast';\n\n/*** Stores the toast controller shared by ToastProvider and useToast. */\nexport const ToastContext = createContext<ToastController | null>(null);\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ToastController, ToastOptions } from '../../../types/toast';
|
|
2
|
+
/*** Owns the toast queue, dismissal timers, and imperative controller state. */
|
|
3
|
+
export declare function useToastRuntime(defaultDuration: number): {
|
|
4
|
+
controller: ToastController;
|
|
5
|
+
toasts: ToastEntry[];
|
|
6
|
+
};
|
|
7
|
+
interface ToastEntry extends ToastOptions {
|
|
8
|
+
id: string;
|
|
9
|
+
}
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=useToastRuntime.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToastRuntime.d.ts","sourceRoot":"","sources":["../../../../src/features/toast/composition/useToastRuntime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,gFAAgF;AAChF,wBAAgB,eAAe,CAAC,eAAe,EAAE,MAAM;;;EA4BtD;AAED,UAAU,UAAW,SAAQ,YAAY;IACvC,EAAE,EAAE,MAAM,CAAC;CACZ"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/*** Owns the toast queue, dismissal timers, and imperative controller state. */
|
|
3
|
+
export function useToastRuntime(defaultDuration) {
|
|
4
|
+
const [toasts, setToasts] = React.useState([]);
|
|
5
|
+
const timersRef = React.useRef(new Map());
|
|
6
|
+
const counterRef = React.useRef(0);
|
|
7
|
+
const dismissToast = React.useCallback((id) => {
|
|
8
|
+
const timer = timersRef.current.get(id);
|
|
9
|
+
if (timer) {
|
|
10
|
+
clearTimeout(timer);
|
|
11
|
+
timersRef.current.delete(id);
|
|
12
|
+
}
|
|
13
|
+
setToasts((current) => current.filter((toast) => toast.id !== id));
|
|
14
|
+
}, []);
|
|
15
|
+
const showToast = React.useCallback((options) => {
|
|
16
|
+
const id = options.id ?? `toast-${counterRef.current++}`;
|
|
17
|
+
setToasts((current) => [...current, { ...options, id }]);
|
|
18
|
+
return id;
|
|
19
|
+
}, []);
|
|
20
|
+
useToastTimers({ defaultDuration, dismissToast, timersRef, toasts });
|
|
21
|
+
const controller = React.useMemo(() => ({ dismissToast, showToast }), [dismissToast, showToast]);
|
|
22
|
+
return { controller, toasts };
|
|
23
|
+
}
|
|
24
|
+
/*** Synchronizes toast lifetimes with timer side effects and cleans them up on unmount. */
|
|
25
|
+
function useToastTimers({ defaultDuration, dismissToast, timersRef, toasts }) {
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
const timers = timersRef.current;
|
|
28
|
+
toasts.forEach((toast) => {
|
|
29
|
+
if (timers.has(toast.id))
|
|
30
|
+
return;
|
|
31
|
+
const timer = setTimeout(() => dismissToast(toast.id), toast.duration ?? defaultDuration);
|
|
32
|
+
timers.set(toast.id, timer);
|
|
33
|
+
});
|
|
34
|
+
const activeToastIds = new Set(toasts.map((toast) => toast.id));
|
|
35
|
+
timers.forEach((timer, id) => {
|
|
36
|
+
if (!activeToastIds.has(id)) {
|
|
37
|
+
clearTimeout(timer);
|
|
38
|
+
timers.delete(id);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}, [defaultDuration, dismissToast, timersRef, toasts]);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
const timers = timersRef.current;
|
|
44
|
+
return () => {
|
|
45
|
+
timers.forEach((timer) => clearTimeout(timer));
|
|
46
|
+
timers.clear();
|
|
47
|
+
};
|
|
48
|
+
}, [timersRef]);
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=useToastRuntime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToastRuntime.js","sourceRoot":"","sources":["../../../../src/features/toast/composition/useToastRuntime.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type { ToastController, ToastOptions } from '../../../types/toast';\n\n/*** Owns the toast queue, dismissal timers, and imperative controller state. */\nexport function useToastRuntime(defaultDuration: number) {\n const [toasts, setToasts] = React.useState<ToastEntry[]>([]);\n const timersRef = React.useRef(new Map<string, ReturnType<typeof setTimeout>>());\n const counterRef = React.useRef(0);\n\n const dismissToast = React.useCallback((id: string) => {\n const timer = timersRef.current.get(id);\n if (timer) {\n clearTimeout(timer);\n timersRef.current.delete(id);\n }\n setToasts((current) => current.filter((toast) => toast.id !== id));\n }, []);\n\n const showToast = React.useCallback((options: ToastOptions) => {\n const id = options.id ?? `toast-${counterRef.current++}`;\n setToasts((current) => [...current, { ...options, id }]);\n return id;\n }, []);\n\n useToastTimers({ defaultDuration, dismissToast, timersRef, toasts });\n\n const controller = React.useMemo<ToastController>(\n () => ({ dismissToast, showToast }),\n [dismissToast, showToast],\n );\n\n return { controller, toasts };\n}\n\ninterface ToastEntry extends ToastOptions {\n id: string;\n}\n\ninterface UseToastTimersInput {\n defaultDuration: number;\n dismissToast: (id: string) => void;\n timersRef: React.RefObject<Map<string, ReturnType<typeof setTimeout>>>;\n toasts: readonly ToastEntry[];\n}\n\n/*** Synchronizes toast lifetimes with timer side effects and cleans them up on unmount. */\nfunction useToastTimers({ defaultDuration, dismissToast, timersRef, toasts }: UseToastTimersInput) {\n React.useEffect(() => {\n const timers = timersRef.current;\n\n toasts.forEach((toast) => {\n if (timers.has(toast.id)) return;\n\n const timer = setTimeout(() => dismissToast(toast.id), toast.duration ?? defaultDuration);\n timers.set(toast.id, timer);\n });\n\n const activeToastIds = new Set(toasts.map((toast) => toast.id));\n timers.forEach((timer, id) => {\n if (!activeToastIds.has(id)) {\n clearTimeout(timer);\n timers.delete(id);\n }\n });\n }, [defaultDuration, dismissToast, timersRef, toasts]);\n\n React.useEffect(() => {\n const timers = timersRef.current;\n\n return () => {\n timers.forEach((timer) => clearTimeout(timer));\n timers.clear();\n };\n }, [timersRef]);\n}\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type { ToastController, ToastOptions, ToastProps, ToastProviderProps, ToastStatus, } from '../../types/toast';
|
|
2
|
+
export { Toast } from './adapters/inbound/Toast';
|
|
3
|
+
export { ToastProvider } from './adapters/inbound/ToastProvider';
|
|
4
|
+
export { useToast } from './adapters/inbound/useToast';
|
|
5
|
+
//# sourceMappingURL=public.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/toast/public.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,eAAe,EACf,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/toast/public.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export type {\n ToastController,\n ToastOptions,\n ToastProps,\n ToastProviderProps,\n ToastStatus,\n} from '../../types/toast';\nexport { Toast } from './adapters/inbound/Toast';\nexport { ToastProvider } from './adapters/inbound/ToastProvider';\nexport { useToast } from './adapters/inbound/useToast';\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -16,8 +16,6 @@ export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './compone
|
|
|
16
16
|
export { Tab, TabList, TabPanel, Tabs } from './components/tabs';
|
|
17
17
|
export type { TextareaProps } from './components/textarea';
|
|
18
18
|
export { Textarea } from './components/textarea';
|
|
19
|
-
export type { ToastOptions, ToastProps, ToastStatus } from './components/toast';
|
|
20
|
-
export { Toast, ToastProvider, useToast } from './components/toast';
|
|
21
19
|
export type { TooltipProps } from './components/tooltip';
|
|
22
20
|
export { Tooltip } from './components/tooltip';
|
|
23
21
|
export type { FontRuntime } from './context/FontContext';
|
|
@@ -47,8 +45,12 @@ export type { KeyboardAvoidingViewBehavior, KeyboardAvoidingViewProps, } from '.
|
|
|
47
45
|
export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
|
|
48
46
|
export type { BoxProps, ContainerProps, DividerProps, GridProps, StackProps, } from './features/layout/public';
|
|
49
47
|
export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
|
|
48
|
+
export type { PopoverAnchorRenderProps, PopoverPlacement, PopoverProps, } from './features/popover/public';
|
|
49
|
+
export { Popover } from './features/popover/public';
|
|
50
50
|
export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
|
|
51
51
|
export { Surface } from './features/surface/public';
|
|
52
|
+
export type { ToastController, ToastOptions, ToastProps, ToastProviderProps, ToastStatus, } from './features/toast/public';
|
|
53
|
+
export { Toast, ToastProvider, useToast } from './features/toast/public';
|
|
52
54
|
export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
|
|
53
55
|
export { Heading, Text } from './features/typography/public';
|
|
54
56
|
export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,6 @@ export { Modal } from './components/modal';
|
|
|
7
7
|
export { Switch } from './components/switch';
|
|
8
8
|
export { Tab, TabList, TabPanel, Tabs } from './components/tabs';
|
|
9
9
|
export { Textarea } from './components/textarea';
|
|
10
|
-
export { Toast, ToastProvider, useToast } from './components/toast';
|
|
11
10
|
export { Tooltip } from './components/tooltip';
|
|
12
11
|
export { FontProvider, useFontContext } from './context/FontContext';
|
|
13
12
|
export { TranslationProvider, useTranslationContext } from './context/TranslationContext';
|
|
@@ -23,7 +22,9 @@ export { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';
|
|
|
23
22
|
export { Image } from './features/image/public';
|
|
24
23
|
export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
|
|
25
24
|
export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
|
|
25
|
+
export { Popover } from './features/popover/public';
|
|
26
26
|
export { Surface } from './features/surface/public';
|
|
27
|
+
export { Toast, ToastProvider, useToast } from './features/toast/public';
|
|
27
28
|
export { Heading, Text } from './features/typography/public';
|
|
28
29
|
export * from './layout';
|
|
29
30
|
export { ButtonBase } from './primitives/button-base';
|