@servicetitan/anvil2-ext-common 0.0.0-ANV-3856-20251105215913
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 +60 -0
- package/README.md +0 -0
- package/dist/favicon.ico +0 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useConfirmDialog/ConfirmDialog.d.ts +74 -0
- package/dist/hooks/useConfirmDialog/index.d.ts +1 -0
- package/dist/hooks/useConfirmDialog/useConfirmDialog.d.ts +54 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/useConfirmDialog-DaQ5Golt.js +61 -0
- package/dist/useConfirmDialog-DaQ5Golt.js.map +1 -0
- package/dist/useConfirmDialog.d.ts +6 -0
- package/dist/useConfirmDialog.js +2 -0
- package/dist/useConfirmDialog.js.map +1 -0
- package/package.json +90 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# @servicetitan/anvil2-ext-common
|
|
2
|
+
|
|
3
|
+
## 0.0.0-ANV-3856-20251105215913
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`7889423`](https://github.com/servicetitan/hammer/commit/788942353ece5412f6c4c7382907489d9861d068), [`7889423`](https://github.com/servicetitan/hammer/commit/788942353ece5412f6c4c7382907489d9861d068), [`d4ece88`](https://github.com/servicetitan/hammer/commit/d4ece883d709b19bd42405b3bab7b51dbd92d7df), [`4a70c88`](https://github.com/servicetitan/hammer/commit/4a70c88392905b3c3de55715eb8d0af05f2f3eef)]:
|
|
8
|
+
- @servicetitan/anvil2@0.0.0-ANV-3856-20251105215913
|
|
9
|
+
|
|
10
|
+
## 0.1.6
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [[`eec7556`](https://github.com/servicetitan/hammer/commit/eec75569f008fa2df8166b8efd5c5975741ad386)]:
|
|
15
|
+
- @servicetitan/anvil2@1.47.1
|
|
16
|
+
|
|
17
|
+
## 0.1.5
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies [[`32bc784`](https://github.com/servicetitan/hammer/commit/32bc78468278dc7e08a27a5427b6312509d87191), [`9ddafae`](https://github.com/servicetitan/hammer/commit/9ddafaeea62cca4513690f0e8d1bb991a1ea4957), [`db91374`](https://github.com/servicetitan/hammer/commit/db9137443c670eb190eb22fac14188c6e7d7537d), [`db91374`](https://github.com/servicetitan/hammer/commit/db9137443c670eb190eb22fac14188c6e7d7537d), [`54d93cb`](https://github.com/servicetitan/hammer/commit/54d93cb8b0c726fba8815407d800d0c93004aa80), [`6c3e1de`](https://github.com/servicetitan/hammer/commit/6c3e1de13a0d4e881cd497e06c0fe739ebe29fbc), [`db91374`](https://github.com/servicetitan/hammer/commit/db9137443c670eb190eb22fac14188c6e7d7537d), [`db91374`](https://github.com/servicetitan/hammer/commit/db9137443c670eb190eb22fac14188c6e7d7537d)]:
|
|
22
|
+
- @servicetitan/anvil2@1.47.0
|
|
23
|
+
|
|
24
|
+
## 0.1.4
|
|
25
|
+
|
|
26
|
+
### Patch Changes
|
|
27
|
+
|
|
28
|
+
- Updated dependencies [[`d7fc638`](https://github.com/servicetitan/hammer/commit/d7fc63866ede9561f6e039d855738d7c2d294716)]:
|
|
29
|
+
- @servicetitan/anvil2@1.46.11
|
|
30
|
+
|
|
31
|
+
## 0.1.3
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- Updated dependencies [[`edeac4f`](https://github.com/servicetitan/hammer/commit/edeac4f9be74f2e8c28ab6dec734a87c6933c180), [`8a69a5e`](https://github.com/servicetitan/hammer/commit/8a69a5eae1b615555a00561103038bfc02ea363e)]:
|
|
36
|
+
- @servicetitan/anvil2@1.46.10
|
|
37
|
+
|
|
38
|
+
## 0.1.2
|
|
39
|
+
|
|
40
|
+
### Patch Changes
|
|
41
|
+
|
|
42
|
+
- Updated dependencies [[`853ab3d`](https://github.com/servicetitan/hammer/commit/853ab3dd5ca662325957d79412a7d3668f9588a3), [`b93a325`](https://github.com/servicetitan/hammer/commit/b93a32592af523e90c5f74a2731150d2711666e4)]:
|
|
43
|
+
- @servicetitan/anvil2@1.46.9
|
|
44
|
+
|
|
45
|
+
## 0.1.1
|
|
46
|
+
|
|
47
|
+
### Patch Changes
|
|
48
|
+
|
|
49
|
+
- [`d97ef4d`](https://github.com/servicetitan/hammer/commit/d97ef4d33c6240831a48b38e70305a6b5eb33d6d) Thanks [@rgdelato](https://github.com/rgdelato)! - [ext-common] Fix `package.json` `files` property
|
|
50
|
+
|
|
51
|
+
## 0.1.0
|
|
52
|
+
|
|
53
|
+
### Minor Changes
|
|
54
|
+
|
|
55
|
+
- [#1566](https://github.com/servicetitan/hammer/pull/1566) [`5822b65`](https://github.com/servicetitan/hammer/commit/5822b65debe42dce860a2174f91bef2b42da0370) Thanks [@rgdelato](https://github.com/rgdelato)! - [useConfirmDialog] Add `useConfirmDialog` to new `@servicetitan/anvil2-ext-common` package
|
|
56
|
+
|
|
57
|
+
### Patch Changes
|
|
58
|
+
|
|
59
|
+
- Updated dependencies [[`fc8b30c`](https://github.com/servicetitan/hammer/commit/fc8b30cc6a8cb7ec99f9630e9ba9d9a4e5af5e4b), [`3daa6f6`](https://github.com/servicetitan/hammer/commit/3daa6f67670bcdb5e978ad083056db4d29892b16), [`3df1040`](https://github.com/servicetitan/hammer/commit/3df1040566f627a937f2f7f7e889c3c2bcfb230a)]:
|
|
60
|
+
- @servicetitan/anvil2@1.46.8
|
package/README.md
ADDED
|
File without changes
|
package/dist/favicon.ico
ADDED
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useConfirmDialog';
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { ComponentProps, ComponentPropsWithRef, FC, ReactNode } from 'react';
|
|
2
|
+
import { Button, Dialog } from '@servicetitan/anvil2';
|
|
3
|
+
import { Prettify } from '../../types';
|
|
4
|
+
export interface PrimaryButtonInternalProps {
|
|
5
|
+
appearance?: ComponentProps<typeof Button>["appearance"];
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export interface ConfirmDialogInternalProps {
|
|
10
|
+
/**
|
|
11
|
+
* Callback function when the confirm button is clicked
|
|
12
|
+
*/
|
|
13
|
+
onConfirm: () => void;
|
|
14
|
+
/**
|
|
15
|
+
* Content to be displayed in the dialog
|
|
16
|
+
* @defaultValue 'Are you sure?'
|
|
17
|
+
*/
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Appearance of the primary button
|
|
21
|
+
* @defaultValue 'primary'
|
|
22
|
+
*/
|
|
23
|
+
appearance?: PrimaryButtonInternalProps["appearance"];
|
|
24
|
+
/**
|
|
25
|
+
* Header content of the dialog
|
|
26
|
+
* @defaultValue 'Confirm'
|
|
27
|
+
*/
|
|
28
|
+
header?: ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Content of the primary button
|
|
31
|
+
* @defaultValue 'OK'
|
|
32
|
+
*/
|
|
33
|
+
primaryButton?: ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* Content of the cancel button
|
|
36
|
+
* @defaultValue 'Cancel'
|
|
37
|
+
*/
|
|
38
|
+
cancelButton?: ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* Props to be passed to the internal <Dialog.Header>
|
|
41
|
+
*/
|
|
42
|
+
headerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Header>, "children">;
|
|
43
|
+
/**
|
|
44
|
+
* Props to be passed to the internal <Dialog.Content>
|
|
45
|
+
*/
|
|
46
|
+
contentProps?: Omit<ComponentPropsWithRef<typeof Dialog.Content>, "children">;
|
|
47
|
+
/**
|
|
48
|
+
* Props to be passed to the internal <Dialog.Footer>
|
|
49
|
+
*/
|
|
50
|
+
footerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Footer>, "children">;
|
|
51
|
+
/**
|
|
52
|
+
* Props to be passed to the internal <Dialog.CancelButton>
|
|
53
|
+
*/
|
|
54
|
+
cancelButtonProps?: Omit<ComponentPropsWithRef<typeof Dialog.CancelButton>, "children">;
|
|
55
|
+
/**
|
|
56
|
+
* Props to be passed to the internal primary <Button>
|
|
57
|
+
*/
|
|
58
|
+
primaryButtonProps?: Omit<ComponentPropsWithRef<typeof Button>, keyof PrimaryButtonInternalProps>;
|
|
59
|
+
}
|
|
60
|
+
export type ConfirmDialogProps = Prettify<ConfirmDialogInternalProps & Omit<ComponentPropsWithRef<typeof Dialog>, keyof ConfirmDialogInternalProps>>;
|
|
61
|
+
/**
|
|
62
|
+
* ConfirmDialog component for displaying a simple confirmation dialog.
|
|
63
|
+
*
|
|
64
|
+
* @remarks
|
|
65
|
+
* - Any property of Anvil's <Dialog> can be passed directly to <ConfirmDialog>
|
|
66
|
+
*
|
|
67
|
+
* - header, primaryButton, and cancelButton are typed as ReactNode,
|
|
68
|
+
* so arbitrary React markup can be passed in addition to strings.
|
|
69
|
+
*
|
|
70
|
+
* - headerProps, contentProps, footerProps, cancelButtonProps, and primaryButtonProps
|
|
71
|
+
* can be used to customize the internal components. They will be forwarded directly
|
|
72
|
+
* to <Dialog.Header>, <Dialog.Content>, <Dialog.Footer>, etc.
|
|
73
|
+
*/
|
|
74
|
+
export declare const ConfirmDialog: FC<ConfirmDialogProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useConfirmDialog, useConfirmDialog as default, type UseConfirmDialogProps, } from './useConfirmDialog';
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ConfirmDialogProps } from './ConfirmDialog';
|
|
2
|
+
import { Optional, Prettify } from '../../types';
|
|
3
|
+
export type UseConfirmDialogProps = Prettify<Omit<Optional<ConfirmDialogProps, "open">, "onClose" | "onConfirm">>;
|
|
4
|
+
/**
|
|
5
|
+
* useConfirmDialog hook for displaying a confirmation dialog.
|
|
6
|
+
* - simpler markup than building a whole <Dialog>
|
|
7
|
+
* - no need to explicitly manage its `open` state
|
|
8
|
+
*
|
|
9
|
+
* @param onConfirm (required) - Function to call when the confirmation action is taken.
|
|
10
|
+
* @param onClose (optional) - Function to call when the dialog is closed.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* const [ConfirmDelete, onDelete] = useConfirmDialog(store.onDelete);
|
|
15
|
+
*
|
|
16
|
+
* // Then in markup below:
|
|
17
|
+
* <ConfirmDelete header="Confirm Deletion" primaryButton="Delete" appearance="danger">
|
|
18
|
+
* Are you sure you want to delete this item?
|
|
19
|
+
* </ConfirmDelete>
|
|
20
|
+
*
|
|
21
|
+
* // If no children are supplied, the default message 'Are you sure?' will be used.
|
|
22
|
+
* <ConfirmDelete />
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* If you want to manually control the `open` state of the ConfirmDialog:
|
|
27
|
+
* ```ts
|
|
28
|
+
* const [ConfirmDelete] = useConfirmDialog(store.onDelete);
|
|
29
|
+
*
|
|
30
|
+
* // Then in markup below:
|
|
31
|
+
* <ConfirmDelete open={showConfirmDelete} header="Confirm Deletion" primaryButton="Delete" appearance="danger">
|
|
32
|
+
* Are you sure you want to delete this item?
|
|
33
|
+
* </ConfirmDelete>
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @remarks
|
|
37
|
+
* - The returned `ConfirmDialog` component will handle its own open/close state,
|
|
38
|
+
* or you can override it by passing the `open` prop to it.
|
|
39
|
+
*
|
|
40
|
+
* - The `onConfirm` function will be called when the user confirms the action.
|
|
41
|
+
*
|
|
42
|
+
* - If provided, the `onCancel` function will be called when the dialog is cancelled
|
|
43
|
+
* (either by clicking the cancel button, the close button, or outside the dialog).
|
|
44
|
+
*
|
|
45
|
+
* - If you need to customize the dialog further:
|
|
46
|
+
* - Any property of Anvil2's <Dialog> can be passed to <ConfirmDialog> except `open` and `onClose`
|
|
47
|
+
*
|
|
48
|
+
* - The `header`, `primaryButton`, and `cancelButton` properties are typed as ReactNode,
|
|
49
|
+
* so arbitrary React markup can be passed in addition to strings.
|
|
50
|
+
*
|
|
51
|
+
* - The following properties are passed to the internal components:
|
|
52
|
+
* `headerProps`, `contentProps`, `footerProps`, `cancelButtonProps`, `primaryButtonProps`
|
|
53
|
+
*/
|
|
54
|
+
export declare const useConfirmDialog: (onConfirm: () => void, onCancel?: () => void) => readonly [(props: UseConfirmDialogProps) => import("react/jsx-runtime").JSX.Element, () => void, () => void];
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Dialog, Button } from '@servicetitan/anvil2';
|
|
4
|
+
|
|
5
|
+
const ConfirmDialog = ({
|
|
6
|
+
appearance = "primary",
|
|
7
|
+
header = "Confirm",
|
|
8
|
+
children = "Are you sure?",
|
|
9
|
+
primaryButton = "OK",
|
|
10
|
+
cancelButton = "Cancel",
|
|
11
|
+
onConfirm,
|
|
12
|
+
cancelButtonProps,
|
|
13
|
+
primaryButtonProps,
|
|
14
|
+
headerProps,
|
|
15
|
+
contentProps,
|
|
16
|
+
footerProps,
|
|
17
|
+
...dialogProps
|
|
18
|
+
}) => {
|
|
19
|
+
const primaryButtonInternalProps = {
|
|
20
|
+
appearance,
|
|
21
|
+
onClick: onConfirm,
|
|
22
|
+
children: primaryButton
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsxs(Dialog, { ...dialogProps, children: [
|
|
25
|
+
/* @__PURE__ */ jsx(Dialog.Header, { ...headerProps, children: header }),
|
|
26
|
+
/* @__PURE__ */ jsx(Dialog.Content, { ...contentProps, children }),
|
|
27
|
+
/* @__PURE__ */ jsxs(Dialog.Footer, { ...footerProps, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Dialog.CancelButton, { ...cancelButtonProps, children: cancelButton }),
|
|
29
|
+
/* @__PURE__ */ jsx(Button, { ...primaryButtonInternalProps, ...primaryButtonProps })
|
|
30
|
+
] })
|
|
31
|
+
] });
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const useConfirmDialog = (onConfirm, onCancel) => {
|
|
35
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
36
|
+
const onConfirmInner = () => {
|
|
37
|
+
onConfirm();
|
|
38
|
+
setIsOpen(false);
|
|
39
|
+
};
|
|
40
|
+
const closeDialogInner = () => {
|
|
41
|
+
onCancel?.();
|
|
42
|
+
setIsOpen(false);
|
|
43
|
+
};
|
|
44
|
+
const UseConfirmDialogInner = (props) => /* @__PURE__ */ jsx(
|
|
45
|
+
ConfirmDialog,
|
|
46
|
+
{
|
|
47
|
+
open: isOpen,
|
|
48
|
+
...props,
|
|
49
|
+
onConfirm: onConfirmInner,
|
|
50
|
+
onClose: closeDialogInner
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
return [
|
|
54
|
+
UseConfirmDialogInner,
|
|
55
|
+
() => setIsOpen(true),
|
|
56
|
+
() => setIsOpen(false)
|
|
57
|
+
];
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export { useConfirmDialog as u };
|
|
61
|
+
//# sourceMappingURL=useConfirmDialog-DaQ5Golt.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useConfirmDialog-DaQ5Golt.js","sources":["../src/hooks/useConfirmDialog/ConfirmDialog.tsx","../src/hooks/useConfirmDialog/useConfirmDialog.tsx"],"sourcesContent":["import { ComponentProps, ComponentPropsWithRef, FC, ReactNode } from \"react\";\nimport { Button, Dialog } from \"@servicetitan/anvil2\";\nimport { Prettify } from \"../../types\";\n\nexport interface PrimaryButtonInternalProps {\n appearance?: ComponentProps<typeof Button>[\"appearance\"];\n onClick?: () => void;\n children: ReactNode;\n}\n\nexport interface ConfirmDialogInternalProps {\n /**\n * Callback function when the confirm button is clicked\n */\n onConfirm: () => void;\n\n /**\n * Content to be displayed in the dialog\n * @defaultValue 'Are you sure?'\n */\n children?: ReactNode;\n\n /**\n * Appearance of the primary button\n * @defaultValue 'primary'\n */\n appearance?: PrimaryButtonInternalProps[\"appearance\"];\n\n /**\n * Header content of the dialog\n * @defaultValue 'Confirm'\n */\n header?: ReactNode;\n\n /**\n * Content of the primary button\n * @defaultValue 'OK'\n */\n primaryButton?: ReactNode;\n\n /**\n * Content of the cancel button\n * @defaultValue 'Cancel'\n */\n cancelButton?: ReactNode;\n\n /**\n * Props to be passed to the internal <Dialog.Header>\n */\n headerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Header>, \"children\">;\n\n /**\n * Props to be passed to the internal <Dialog.Content>\n */\n contentProps?: Omit<ComponentPropsWithRef<typeof Dialog.Content>, \"children\">;\n\n /**\n * Props to be passed to the internal <Dialog.Footer>\n */\n footerProps?: Omit<ComponentPropsWithRef<typeof Dialog.Footer>, \"children\">;\n\n /**\n * Props to be passed to the internal <Dialog.CancelButton>\n */\n cancelButtonProps?: Omit<\n ComponentPropsWithRef<typeof Dialog.CancelButton>,\n \"children\"\n >;\n\n /**\n * Props to be passed to the internal primary <Button>\n */\n primaryButtonProps?: Omit<\n ComponentPropsWithRef<typeof Button>,\n keyof PrimaryButtonInternalProps\n >;\n}\n\nexport type ConfirmDialogProps = Prettify<\n ConfirmDialogInternalProps &\n Omit<ComponentPropsWithRef<typeof Dialog>, keyof ConfirmDialogInternalProps>\n>;\n\n/**\n * ConfirmDialog component for displaying a simple confirmation dialog.\n *\n * @remarks\n * - Any property of Anvil's <Dialog> can be passed directly to <ConfirmDialog>\n *\n * - header, primaryButton, and cancelButton are typed as ReactNode,\n * so arbitrary React markup can be passed in addition to strings.\n *\n * - headerProps, contentProps, footerProps, cancelButtonProps, and primaryButtonProps\n * can be used to customize the internal components. They will be forwarded directly\n * to <Dialog.Header>, <Dialog.Content>, <Dialog.Footer>, etc.\n */\nexport const ConfirmDialog: FC<ConfirmDialogProps> = ({\n appearance = \"primary\",\n header = \"Confirm\",\n children = \"Are you sure?\",\n primaryButton = \"OK\",\n cancelButton = \"Cancel\",\n onConfirm,\n cancelButtonProps,\n primaryButtonProps,\n headerProps,\n contentProps,\n footerProps,\n ...dialogProps\n}: ConfirmDialogProps) => {\n const primaryButtonInternalProps: PrimaryButtonInternalProps = {\n appearance,\n onClick: onConfirm,\n children: primaryButton,\n };\n\n return (\n <Dialog {...dialogProps}>\n <Dialog.Header {...headerProps}>{header}</Dialog.Header>\n <Dialog.Content {...contentProps}>{children}</Dialog.Content>\n <Dialog.Footer {...footerProps}>\n <Dialog.CancelButton {...cancelButtonProps}>\n {cancelButton}\n </Dialog.CancelButton>\n\n {/* allow primaryButtonProps object to override the explicit top-level props - primaryButton, appearance, onClick */}\n <Button {...primaryButtonInternalProps} {...primaryButtonProps} />\n </Dialog.Footer>\n </Dialog>\n );\n};\n","import { useState } from \"react\";\nimport { ConfirmDialog, ConfirmDialogProps } from \"./ConfirmDialog\";\nimport { Optional, Prettify } from \"../../types\";\n\nexport type UseConfirmDialogProps = Prettify<\n Omit<Optional<ConfirmDialogProps, \"open\">, \"onClose\" | \"onConfirm\">\n>;\n\n/**\n * useConfirmDialog hook for displaying a confirmation dialog.\n * - simpler markup than building a whole <Dialog>\n * - no need to explicitly manage its `open` state\n *\n * @param onConfirm (required) - Function to call when the confirmation action is taken.\n * @param onClose (optional) - Function to call when the dialog is closed.\n *\n * @example\n * ```ts\n * const [ConfirmDelete, onDelete] = useConfirmDialog(store.onDelete);\n *\n * // Then in markup below:\n * <ConfirmDelete header=\"Confirm Deletion\" primaryButton=\"Delete\" appearance=\"danger\">\n * Are you sure you want to delete this item?\n * </ConfirmDelete>\n *\n * // If no children are supplied, the default message 'Are you sure?' will be used.\n * <ConfirmDelete />\n * ```\n *\n * @example\n * If you want to manually control the `open` state of the ConfirmDialog:\n * ```ts\n * const [ConfirmDelete] = useConfirmDialog(store.onDelete);\n *\n * // Then in markup below:\n * <ConfirmDelete open={showConfirmDelete} header=\"Confirm Deletion\" primaryButton=\"Delete\" appearance=\"danger\">\n * Are you sure you want to delete this item?\n * </ConfirmDelete>\n * ```\n *\n * @remarks\n * - The returned `ConfirmDialog` component will handle its own open/close state,\n * or you can override it by passing the `open` prop to it.\n *\n * - The `onConfirm` function will be called when the user confirms the action.\n *\n * - If provided, the `onCancel` function will be called when the dialog is cancelled\n * (either by clicking the cancel button, the close button, or outside the dialog).\n *\n * - If you need to customize the dialog further:\n * - Any property of Anvil2's <Dialog> can be passed to <ConfirmDialog> except `open` and `onClose`\n *\n * - The `header`, `primaryButton`, and `cancelButton` properties are typed as ReactNode,\n * so arbitrary React markup can be passed in addition to strings.\n *\n * - The following properties are passed to the internal components:\n * `headerProps`, `contentProps`, `footerProps`, `cancelButtonProps`, `primaryButtonProps`\n */\nexport const useConfirmDialog = (\n onConfirm: () => void,\n onCancel?: () => void,\n) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const onConfirmInner = () => {\n onConfirm();\n setIsOpen(false);\n };\n\n const closeDialogInner = () => {\n onCancel?.();\n setIsOpen(false);\n };\n\n const UseConfirmDialogInner = (props: UseConfirmDialogProps) => (\n <ConfirmDialog\n open={isOpen}\n {...props} // allow `open` passed to <ConfirmDialog> to override internal `isOpen`\n onConfirm={onConfirmInner}\n onClose={closeDialogInner}\n />\n );\n\n return [\n UseConfirmDialogInner,\n () => setIsOpen(true),\n () => setIsOpen(false),\n ] as const;\n};\n"],"names":[],"mappings":";;;;AAgGO,MAAM,gBAAwC,CAAC;AAAA,EACpD,UAAA,GAAa,SAAA;AAAA,EACb,MAAA,GAAS,SAAA;AAAA,EACT,QAAA,GAAW,eAAA;AAAA,EACX,aAAA,GAAgB,IAAA;AAAA,EAChB,YAAA,GAAe,QAAA;AAAA,EACf,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,0BAAA,GAAyD;AAAA,IAC7D,UAAA;AAAA,IACA,OAAA,EAAS,SAAA;AAAA,IACT,QAAA,EAAU;AAAA,GACZ;AAEA,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,WAAA,EACV,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,CAAO,MAAA,EAAP,EAAe,GAAG,aAAc,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACvC,MAAA,CAAO,OAAA,EAAP,EAAgB,GAAG,cAAe,QAAA,EAAS,CAAA;AAAA,oBAC5C,IAAA,CAAC,MAAA,CAAO,MAAA,EAAP,EAAe,GAAG,WAAA,EACjB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,CAAO,YAAA,EAAP,EAAqB,GAAG,mBACtB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,sBAGA,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,0BAAA,EAA6B,GAAG,kBAAA,EAAoB;AAAA,KAAA,EAClE;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;;ACxEO,MAAM,gBAAA,GAAmB,CAC9B,SAAA,EACA,QAAA,KACG;AACH,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,SAAA,EAAU;AACV,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,QAAA,IAAW;AACX,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,qBAAA,GAAwB,CAAC,KAAA,qBAC7B,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,MAAA;AAAA,MACL,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,cAAA;AAAA,MACX,OAAA,EAAS;AAAA;AAAA,GACX;AAGF,EAAA,OAAO;AAAA,IACL,qBAAA;AAAA,IACA,MAAM,UAAU,IAAI,CAAA;AAAA,IACpB,MAAM,UAAU,KAAK;AAAA,GACvB;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useConfirmDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@servicetitan/anvil2-ext-common",
|
|
3
|
+
"version": "0.0.0-ANV-3856-20251105215913",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"types": "./dist/index.d.ts",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": ".",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"*.css",
|
|
10
|
+
"*.scss"
|
|
11
|
+
],
|
|
12
|
+
"files": [
|
|
13
|
+
"dist",
|
|
14
|
+
"CHANGELOG.md"
|
|
15
|
+
],
|
|
16
|
+
"exports": {
|
|
17
|
+
".": "./dist/index.js",
|
|
18
|
+
"./package.json": "./package.json"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [],
|
|
21
|
+
"author": "",
|
|
22
|
+
"license": "ISC",
|
|
23
|
+
"description": "",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@react-hook/merged-ref": "^1.3.2",
|
|
26
|
+
"@react-hook/resize-observer": "^2.0.1",
|
|
27
|
+
"classnames": "^2.5.1",
|
|
28
|
+
"tabbable": "^6.2.0",
|
|
29
|
+
"tinycolor2": "^1.6.0",
|
|
30
|
+
"uuid": "^10.0.0",
|
|
31
|
+
"@servicetitan/anvil2": "0.0.0-ANV-3856-20251105215913"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"@types/react": "^18",
|
|
35
|
+
"@types/react-dom": "^18",
|
|
36
|
+
"react": "^18",
|
|
37
|
+
"react-dom": "^18"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@chromatic-com/storybook": "^4.1.1",
|
|
41
|
+
"@storybook/addon-a11y": "9.1.5",
|
|
42
|
+
"@storybook/addon-docs": "9.1.5",
|
|
43
|
+
"@storybook/addon-links": "9.1.5",
|
|
44
|
+
"@storybook/addon-vitest": "9.1.5",
|
|
45
|
+
"@storybook/react-vite": "9.1.5",
|
|
46
|
+
"@testing-library/jest-dom": "^5.17.0",
|
|
47
|
+
"@testing-library/react": "^16.1.0",
|
|
48
|
+
"@testing-library/user-event": "^14.5.2",
|
|
49
|
+
"@types/crypto-js": "^4.2.2",
|
|
50
|
+
"@types/luxon": "^3.4.2",
|
|
51
|
+
"@types/react": "18.3.18",
|
|
52
|
+
"@types/react-dom": "18.3.5",
|
|
53
|
+
"@types/react-window": "^1.8.8",
|
|
54
|
+
"@types/testing-library__jest-dom": "^5.14.9",
|
|
55
|
+
"@types/tinycolor2": "^1.4.6",
|
|
56
|
+
"@types/uuid": "^10.0.0",
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
|
58
|
+
"@typescript-eslint/parser": "^6.14.0",
|
|
59
|
+
"@vitest/browser": "^3.2.4",
|
|
60
|
+
"@vitest/coverage-v8": "^3.0.8",
|
|
61
|
+
"chromatic": "^11.20.2",
|
|
62
|
+
"commander": "^12.1.0",
|
|
63
|
+
"globals": "^15.15.0",
|
|
64
|
+
"happy-dom": "^17.4.4",
|
|
65
|
+
"mdast-util-to-string": "^4.0.0",
|
|
66
|
+
"playwright": "^1.52.0",
|
|
67
|
+
"react": "18.2.0",
|
|
68
|
+
"react-dom": "18.2.0",
|
|
69
|
+
"remark-gfm": "^4.0.0",
|
|
70
|
+
"remark-parse": "^11.0.0",
|
|
71
|
+
"remark-stringify": "^11.0.0",
|
|
72
|
+
"sass": "1.87.0",
|
|
73
|
+
"storybook": "9.1.5",
|
|
74
|
+
"svgo": "^3.3.2",
|
|
75
|
+
"typescript": "~5.7.2",
|
|
76
|
+
"unified": "^11.0.5",
|
|
77
|
+
"vite": "6.4.1",
|
|
78
|
+
"vitest": "^3.2.4",
|
|
79
|
+
"vitest-axe": "^0.1.0"
|
|
80
|
+
},
|
|
81
|
+
"scripts": {
|
|
82
|
+
"dev": "vite",
|
|
83
|
+
"build": "vite build",
|
|
84
|
+
"lint": "eslint .",
|
|
85
|
+
"preview": "vite preview",
|
|
86
|
+
"storybook": "storybook dev -p 8008",
|
|
87
|
+
"build-storybook": "storybook build --stats-json",
|
|
88
|
+
"test-storybook": "vitest --project=storybook"
|
|
89
|
+
}
|
|
90
|
+
}
|