@trackunit/react-compound-components 1.3.219 → 1.3.221
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/index.cjs.js +10 -18
- package/index.esm.js +11 -19
- package/package.json +10 -10
- package/src/ConfirmationDialog/ConfirmationDialogModal.d.ts +3 -4
package/index.cjs.js
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
|
|
5
5
|
var reactCoreHooks = require('@trackunit/react-core-hooks');
|
|
6
|
+
var reactModal = require('@trackunit/react-modal');
|
|
6
7
|
var react = require('react');
|
|
7
8
|
var reactComponents = require('@trackunit/react-components');
|
|
8
|
-
var reactModal = require('@trackunit/react-modal');
|
|
9
9
|
var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
|
|
10
10
|
var ImageGallery = require('react-image-gallery');
|
|
11
11
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -64,16 +64,16 @@ const setupLibraryTranslations = () => {
|
|
|
64
64
|
/**
|
|
65
65
|
*
|
|
66
66
|
*/
|
|
67
|
-
const ConfirmationDialogModal = ({
|
|
68
|
-
return (jsxRuntime.jsx(reactModal.Modal, { className: "max-w-xl",
|
|
67
|
+
const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
|
|
68
|
+
return (jsxRuntime.jsx(reactModal.Modal, { ...modalProps, className: "max-w-xl", children: jsxRuntime.jsxs(reactComponents.Card, { "aria-describedby": "dialogDesc", "aria-labelledby": "dialogTitle", role: "dialog", children: [jsxRuntime.jsx(reactComponents.CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsxRuntime.jsx(reactComponents.CardBody, { className: "bg-secondary-50", id: "dialogDesc", children: message }), jsxRuntime.jsxs(reactComponents.CardFooter, { className: "bg-secondary-50", hideSeparator: true, children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "secondary", children: secondaryActionLabel }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }) }));
|
|
69
69
|
};
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
*
|
|
73
73
|
*/
|
|
74
74
|
const ConfirmationDialogContextProvider = ({ children }) => {
|
|
75
|
-
const [isOpen, setIsOpen] = react.useState(false);
|
|
76
75
|
const [t] = useTranslation();
|
|
76
|
+
const modal = reactModal.useModal();
|
|
77
77
|
const [resolveAction, setResolveAction] = react.useState(null);
|
|
78
78
|
const [confirmationDialogProps, setConfirmationDialogProps] = react.useState({
|
|
79
79
|
title: t("confirmationDialog.default.title"),
|
|
@@ -82,34 +82,26 @@ const ConfirmationDialogContextProvider = ({ children }) => {
|
|
|
82
82
|
secondaryActionLabel: t("confirmationDialog.default.secondarybutton"),
|
|
83
83
|
message: t("confirmationDialog.default.message"),
|
|
84
84
|
});
|
|
85
|
-
const closeModal = react.useCallback(() => {
|
|
86
|
-
setIsOpen(false);
|
|
87
|
-
}, []);
|
|
88
85
|
const confirmationDialogModalProps = react.useMemo(() => ({
|
|
89
86
|
...confirmationDialogProps,
|
|
90
|
-
isOpen,
|
|
91
|
-
handleDismiss: () => {
|
|
92
|
-
resolveAction?.("CLOSE");
|
|
93
|
-
closeModal();
|
|
94
|
-
},
|
|
95
87
|
handlePrimaryActionClick: () => {
|
|
96
88
|
resolveAction?.("PRIMARY");
|
|
97
|
-
|
|
89
|
+
modal.close();
|
|
98
90
|
},
|
|
99
91
|
handleSecondaryActionClick: () => {
|
|
100
92
|
resolveAction?.("SECONDARY");
|
|
101
|
-
|
|
93
|
+
modal.close();
|
|
102
94
|
},
|
|
103
|
-
}), [confirmationDialogProps,
|
|
95
|
+
}), [confirmationDialogProps, resolveAction, modal]);
|
|
104
96
|
const confirm = react.useCallback(async (props) => {
|
|
105
97
|
setConfirmationDialogProps(prev => ({ ...prev, ...props }));
|
|
106
|
-
|
|
98
|
+
modal.open();
|
|
107
99
|
return new Promise(resolve => {
|
|
108
100
|
setResolveAction(() => resolve);
|
|
109
101
|
});
|
|
110
|
-
}, []);
|
|
102
|
+
}, [modal]);
|
|
111
103
|
const value = react.useMemo(() => ({ confirm }), [confirm]);
|
|
112
|
-
return (jsxRuntime.jsxs(reactCoreHooks.ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsxRuntime.jsx(ConfirmationDialogModal, { ...confirmationDialogModalProps }) : null] }));
|
|
104
|
+
return (jsxRuntime.jsxs(reactCoreHooks.ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsxRuntime.jsx(ConfirmationDialogModal, { ...modal, ...confirmationDialogModalProps }) : null] }));
|
|
113
105
|
};
|
|
114
106
|
|
|
115
107
|
const IMAGE_ENDPOINT = "https://images.iris.trackunit.com";
|
package/index.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
|
|
4
|
-
import {
|
|
4
|
+
import { Modal, useModal } from '@trackunit/react-modal';
|
|
5
|
+
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
|
5
6
|
import { Card, CardHeader, CardBody, CardFooter, Button, useViewportBreakpoints, Icon, Spinner } from '@trackunit/react-components';
|
|
6
|
-
import { Modal } from '@trackunit/react-modal';
|
|
7
7
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
8
8
|
import ImageGallery from 'react-image-gallery';
|
|
9
9
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -62,16 +62,16 @@ const setupLibraryTranslations = () => {
|
|
|
62
62
|
/**
|
|
63
63
|
*
|
|
64
64
|
*/
|
|
65
|
-
const ConfirmationDialogModal = ({
|
|
66
|
-
return (jsx(Modal, { className: "max-w-xl",
|
|
65
|
+
const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
|
|
66
|
+
return (jsx(Modal, { ...modalProps, className: "max-w-xl", children: jsxs(Card, { "aria-describedby": "dialogDesc", "aria-labelledby": "dialogTitle", role: "dialog", children: [jsx(CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsx(CardBody, { className: "bg-secondary-50", id: "dialogDesc", children: message }), jsxs(CardFooter, { className: "bg-secondary-50", hideSeparator: true, children: [jsx(Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "secondary", children: secondaryActionLabel }), jsx(Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }) }));
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
/**
|
|
70
70
|
*
|
|
71
71
|
*/
|
|
72
72
|
const ConfirmationDialogContextProvider = ({ children }) => {
|
|
73
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
74
73
|
const [t] = useTranslation();
|
|
74
|
+
const modal = useModal();
|
|
75
75
|
const [resolveAction, setResolveAction] = useState(null);
|
|
76
76
|
const [confirmationDialogProps, setConfirmationDialogProps] = useState({
|
|
77
77
|
title: t("confirmationDialog.default.title"),
|
|
@@ -80,34 +80,26 @@ const ConfirmationDialogContextProvider = ({ children }) => {
|
|
|
80
80
|
secondaryActionLabel: t("confirmationDialog.default.secondarybutton"),
|
|
81
81
|
message: t("confirmationDialog.default.message"),
|
|
82
82
|
});
|
|
83
|
-
const closeModal = useCallback(() => {
|
|
84
|
-
setIsOpen(false);
|
|
85
|
-
}, []);
|
|
86
83
|
const confirmationDialogModalProps = useMemo(() => ({
|
|
87
84
|
...confirmationDialogProps,
|
|
88
|
-
isOpen,
|
|
89
|
-
handleDismiss: () => {
|
|
90
|
-
resolveAction?.("CLOSE");
|
|
91
|
-
closeModal();
|
|
92
|
-
},
|
|
93
85
|
handlePrimaryActionClick: () => {
|
|
94
86
|
resolveAction?.("PRIMARY");
|
|
95
|
-
|
|
87
|
+
modal.close();
|
|
96
88
|
},
|
|
97
89
|
handleSecondaryActionClick: () => {
|
|
98
90
|
resolveAction?.("SECONDARY");
|
|
99
|
-
|
|
91
|
+
modal.close();
|
|
100
92
|
},
|
|
101
|
-
}), [confirmationDialogProps,
|
|
93
|
+
}), [confirmationDialogProps, resolveAction, modal]);
|
|
102
94
|
const confirm = useCallback(async (props) => {
|
|
103
95
|
setConfirmationDialogProps(prev => ({ ...prev, ...props }));
|
|
104
|
-
|
|
96
|
+
modal.open();
|
|
105
97
|
return new Promise(resolve => {
|
|
106
98
|
setResolveAction(() => resolve);
|
|
107
99
|
});
|
|
108
|
-
}, []);
|
|
100
|
+
}, [modal]);
|
|
109
101
|
const value = useMemo(() => ({ confirm }), [confirm]);
|
|
110
|
-
return (jsxs(ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsx(ConfirmationDialogModal, { ...confirmationDialogModalProps }) : null] }));
|
|
102
|
+
return (jsxs(ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsx(ConfirmationDialogModal, { ...modal, ...confirmationDialogModalProps }) : null] }));
|
|
111
103
|
};
|
|
112
104
|
|
|
113
105
|
const IMAGE_ENDPOINT = "https://images.iris.trackunit.com";
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-compound-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.221",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"react": "19.0.0",
|
|
8
8
|
"tailwind-merge": "^2.0.0",
|
|
9
9
|
"react-image-gallery": "1.3.0",
|
|
10
|
-
"@trackunit/react-core-contexts-api": "1.4.
|
|
11
|
-
"@trackunit/react-core-hooks": "1.3.
|
|
12
|
-
"@trackunit/react-components": "1.4.
|
|
13
|
-
"@trackunit/react-modal": "1.3.
|
|
14
|
-
"@trackunit/css-class-variance-utilities": "1.3.
|
|
15
|
-
"@trackunit/date-and-time-utils": "1.3.
|
|
16
|
-
"@trackunit/react-form-components": "1.3.
|
|
17
|
-
"@trackunit/i18n-library-translation": "1.3.
|
|
18
|
-
"@trackunit/react-test-setup": "1.0.
|
|
10
|
+
"@trackunit/react-core-contexts-api": "1.4.159",
|
|
11
|
+
"@trackunit/react-core-hooks": "1.3.165",
|
|
12
|
+
"@trackunit/react-components": "1.4.185",
|
|
13
|
+
"@trackunit/react-modal": "1.3.202",
|
|
14
|
+
"@trackunit/css-class-variance-utilities": "1.3.151",
|
|
15
|
+
"@trackunit/date-and-time-utils": "1.3.151",
|
|
16
|
+
"@trackunit/react-form-components": "1.3.210",
|
|
17
|
+
"@trackunit/i18n-library-translation": "1.3.172",
|
|
18
|
+
"@trackunit/react-test-setup": "1.0.41"
|
|
19
19
|
},
|
|
20
20
|
"engines": {
|
|
21
21
|
"node": ">=22.x",
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
+
import { UseModalReturnValue } from "@trackunit/react-modal";
|
|
2
3
|
import { ConfirmationDialogProps } from "./useConfirmationDialog.demo";
|
|
3
|
-
export interface ConfirmationDialogModalProps extends Pick<ConfirmationDialogProps, "title" | "message" | "primaryActionLabel" | "secondaryActionLabel" | "primaryActionType">, CommonProps {
|
|
4
|
-
isOpen: boolean;
|
|
5
|
-
handleDismiss: () => void;
|
|
4
|
+
export interface ConfirmationDialogModalProps extends Pick<ConfirmationDialogProps, "title" | "message" | "primaryActionLabel" | "secondaryActionLabel" | "primaryActionType">, UseModalReturnValue, CommonProps {
|
|
6
5
|
handlePrimaryActionClick: () => void;
|
|
7
6
|
handleSecondaryActionClick: () => void;
|
|
8
7
|
}
|
|
9
8
|
/**
|
|
10
9
|
*
|
|
11
10
|
*/
|
|
12
|
-
export declare const ConfirmationDialogModal: ({
|
|
11
|
+
export declare const ConfirmationDialogModal: ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }: ConfirmationDialogModalProps) => import("react/jsx-runtime").JSX.Element;
|