@impulse-ui-native/modal 9.1.2 → 10.0.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/dist/components/close.d.mts +1 -2
- package/dist/components/content.d.mts +1 -2
- package/dist/components/description.d.mts +1 -2
- package/dist/components/footer.d.mts +1 -2
- package/dist/components/header.d.mts +1 -2
- package/dist/components/index.d.mts +9 -10
- package/dist/components/modal.d.mts +1 -2
- package/dist/components/provider.d.mts +1 -2
- package/dist/components/root.d.mts +1 -2
- package/dist/components/surface.d.mts +1 -2
- package/dist/components/title.d.mts +1 -2
- package/dist/constants/modal-close.constants.d.mts +2 -2
- package/dist/hooks/use-modal-lifecycle.hook.js +3 -37
- package/dist/hooks/use-modal-lifecycle.hook.js.map +1 -1
- package/dist/index.d.mts +0 -1
- package/package.json +12 -12
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalCloseProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalClose: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) =>
|
|
8
|
+
declare const ModalClose: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalClose };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalContentProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalContent: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) =>
|
|
8
|
+
declare const ModalContent: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalContent };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalDescriptionProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalDescription: react.MemoExoticComponent<(props: ModalDescriptionProps) =>
|
|
8
|
+
declare const ModalDescription: react.MemoExoticComponent<(props: ModalDescriptionProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalDescription };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalFooterProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalFooter: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) =>
|
|
8
|
+
declare const ModalFooter: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalFooter };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalHeaderProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalHeader: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) =>
|
|
8
|
+
declare const ModalHeader: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalHeader };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
2
|
import { ModalProps, ModalProviderProps, ModalRootProps, ModalHeaderProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalTitleProps, ModalDescriptionProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
@@ -7,16 +6,16 @@ import '@impulse-ui-native/primitives';
|
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
8
|
declare const Modal: react.NamedExoticComponent<ModalProps> & {
|
|
10
|
-
readonly type: ({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) =>
|
|
9
|
+
readonly type: ({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) => react.JSX.Element;
|
|
11
10
|
} & {
|
|
12
|
-
Provider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) =>
|
|
13
|
-
Root: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) =>
|
|
14
|
-
Header: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) =>
|
|
15
|
-
Close: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) =>
|
|
16
|
-
Content: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) =>
|
|
17
|
-
Footer: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) =>
|
|
18
|
-
Title: react.MemoExoticComponent<(props: ModalTitleProps) =>
|
|
19
|
-
Description: react.MemoExoticComponent<(props: ModalDescriptionProps) =>
|
|
11
|
+
Provider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) => react.JSX.Element>;
|
|
12
|
+
Root: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) => react.JSX.Element | null>;
|
|
13
|
+
Header: react.MemoExoticComponent<({ style, ...props }: ModalHeaderProps) => react.JSX.Element>;
|
|
14
|
+
Close: react.MemoExoticComponent<({ disabled, loading, style, onPress, ...props }: ModalCloseProps) => react.JSX.Element>;
|
|
15
|
+
Content: react.MemoExoticComponent<({ style, ...props }: ModalContentProps) => react.JSX.Element>;
|
|
16
|
+
Footer: react.MemoExoticComponent<({ style, ...props }: ModalFooterProps) => react.JSX.Element>;
|
|
17
|
+
Title: react.MemoExoticComponent<(props: ModalTitleProps) => react.JSX.Element>;
|
|
18
|
+
Description: react.MemoExoticComponent<(props: ModalDescriptionProps) => react.JSX.Element>;
|
|
20
19
|
};
|
|
21
20
|
|
|
22
21
|
export { Modal };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalComponent: react.MemoExoticComponent<({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) =>
|
|
8
|
+
declare const ModalComponent: react.MemoExoticComponent<({ id, open, layer, onOpen, onOpenFinished, onStatusChange, onClose, onCloseFinished, header, title, footer, hideClose, children, ...props }: ModalProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalComponent };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalProviderProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalProvider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) =>
|
|
8
|
+
declare const ModalProvider: react.MemoExoticComponent<({ children, layer, ...props }: ModalProviderProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalProvider };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalRootProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalRoot: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) =>
|
|
8
|
+
declare const ModalRoot: react.MemoExoticComponent<({ children, ...props }: ModalRootProps) => react.JSX.Element | null>;
|
|
10
9
|
|
|
11
10
|
export { ModalRoot };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalSurfaceProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalSurface: react.MemoExoticComponent<({ size, style, ...props }: ModalSurfaceProps) =>
|
|
8
|
+
declare const ModalSurface: react.MemoExoticComponent<({ size, style, ...props }: ModalSurfaceProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalSurface };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { ModalTitleProps } from '../types/modal.types.mjs';
|
|
4
3
|
import 'react-native-reanimated';
|
|
5
4
|
import '@impulse-ui-native/overlay';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
import '@impulse-ui-native/theme';
|
|
8
7
|
|
|
9
|
-
declare const ModalTitle: react.MemoExoticComponent<(props: ModalTitleProps) =>
|
|
8
|
+
declare const ModalTitle: react.MemoExoticComponent<(props: ModalTitleProps) => react.JSX.Element>;
|
|
10
9
|
|
|
11
10
|
export { ModalTitle };
|
|
@@ -1,44 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
cancelAnimation,
|
|
4
|
-
useSharedValue,
|
|
5
|
-
withTiming
|
|
6
|
-
} from "react-native-reanimated";
|
|
7
|
-
import { scheduleOnRN } from "react-native-worklets";
|
|
8
|
-
import { useEventCallback } from "@impulse-ui-native/core";
|
|
9
|
-
import { useOverlayLifecycle } from "@impulse-ui-native/overlay";
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useOverlayLifecycle, useOverlayTiming } from "@impulse-ui-native/overlay";
|
|
10
3
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
11
4
|
function useModalLifecycle(props) {
|
|
12
5
|
const tokens = useComponentsTokens().modal;
|
|
13
|
-
const progress =
|
|
14
|
-
const enter = useEventCallback(
|
|
15
|
-
(transitionId, complete) => {
|
|
16
|
-
progress.set(
|
|
17
|
-
withTiming(1, { duration: tokens.enterDuration }, (finished) => {
|
|
18
|
-
if (finished) {
|
|
19
|
-
scheduleOnRN(complete, transitionId);
|
|
20
|
-
}
|
|
21
|
-
})
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
);
|
|
25
|
-
const exit = useEventCallback(
|
|
26
|
-
(transitionId, complete) => {
|
|
27
|
-
progress.set(
|
|
28
|
-
withTiming(0, { duration: tokens.exitDuration }, (finished) => {
|
|
29
|
-
if (finished) {
|
|
30
|
-
scheduleOnRN(complete, transitionId);
|
|
31
|
-
}
|
|
32
|
-
})
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
const options = useMemo(
|
|
37
|
-
() => ({ onEnter: enter, onExit: exit }),
|
|
38
|
-
[enter, exit]
|
|
39
|
-
);
|
|
6
|
+
const { options, progress } = useOverlayTiming(tokens);
|
|
40
7
|
const lifecycle = useOverlayLifecycle(props, options);
|
|
41
|
-
useEffect(() => () => cancelAnimation(progress), [progress]);
|
|
42
8
|
return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);
|
|
43
9
|
}
|
|
44
10
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-modal-lifecycle.hook.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-modal-lifecycle.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useOverlayLifecycle, useOverlayTiming } from \"@impulse-ui-native/overlay\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ModalLifecycleProps } from \"../types\";\n\nexport function useModalLifecycle(props: ModalLifecycleProps) {\n const tokens = useComponentsTokens().modal;\n const { options, progress } = useOverlayTiming(tokens);\n const lifecycle = useOverlayLifecycle(props, options);\n\n return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,2BAA2B;AAI7B,SAAS,kBAAkB,OAA4B;AAC5D,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,iBAAiB,MAAM;AACrD,QAAM,YAAY,oBAAoB,OAAO,OAAO;AAEpD,SAAO,QAAQ,OAAO,EAAE,GAAG,WAAW,SAAS,IAAI,CAAC,WAAW,QAAQ,CAAC;AAC1E;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export { Modal } from './components/index.mjs';
|
|
2
2
|
export { ModalCloseProps, ModalContentProps, ModalContextValue, ModalDescriptionProps, ModalFooterProps, ModalHeaderProps, ModalLifecycleProps, ModalProps, ModalProviderProps, ModalRootProps, ModalSurfaceProps, ModalTitleProps } from './types/modal.types.mjs';
|
|
3
3
|
export { useModalContext } from './hooks/use-modal-context.hook.mjs';
|
|
4
|
-
import 'react/jsx-runtime';
|
|
5
4
|
import 'react';
|
|
6
5
|
import 'react-native-reanimated';
|
|
7
6
|
import '@impulse-ui-native/overlay';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/modal",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"description": "Compound modal dialogs with local and OverlayHost lifecycle support.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
30
|
+
"@impulse-ui-native/icon": "10.0.0",
|
|
31
|
+
"@impulse-ui-native/primitives": "10.0.0",
|
|
32
|
+
"@impulse-ui-native/theme": "10.0.0",
|
|
33
|
+
"@impulse-ui-native/core": "10.0.0",
|
|
34
|
+
"@impulse-ui-native/overlay": "10.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@types/react": "~19.
|
|
37
|
+
"@types/react": "~19.3.0",
|
|
38
38
|
"eslint": "^9.38.0",
|
|
39
39
|
"prettier": "^3.6.2",
|
|
40
|
-
"react": "19.
|
|
41
|
-
"react-native": "0.
|
|
40
|
+
"react": "19.3.0",
|
|
41
|
+
"react-native": "0.88.0",
|
|
42
42
|
"typescript": "~6.0.3",
|
|
43
|
-
"react-native-reanimated": "4.
|
|
44
|
-
"react-native-safe-area-context": "~5.
|
|
45
|
-
"react-native-worklets": "0.
|
|
43
|
+
"react-native-reanimated": "4.7.1",
|
|
44
|
+
"react-native-safe-area-context": "~5.10.1",
|
|
45
|
+
"react-native-worklets": "0.13.0",
|
|
46
46
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
47
47
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
48
48
|
"@impulse-ui-native/tsconfig": "1.0.0"
|