@nypl/design-system-react-components 3.1.2 → 3.1.3
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.
|
@@ -1,29 +1,52 @@
|
|
|
1
1
|
import { ChakraComponent } from "@chakra-ui/react";
|
|
2
2
|
import React from "react";
|
|
3
|
-
export interface
|
|
3
|
+
export interface BaseProps {
|
|
4
4
|
/** The content to display in the modal body. */
|
|
5
5
|
bodyContent?: string | JSX.Element;
|
|
6
|
-
/** The label for the close button. */
|
|
7
|
-
closeButtonLabel?: string;
|
|
8
6
|
/** The text to display in the modal heading, can be a string or JSX Element. */
|
|
9
7
|
headingText?: string | JSX.Element;
|
|
10
8
|
/** ID that other components can cross reference for accessibility purposes. */
|
|
11
9
|
id?: string;
|
|
12
10
|
/** Boolean to determine if the modal is open or closed. */
|
|
13
11
|
isOpen?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface ConfirmationModalProps {
|
|
14
|
+
/** The label for the confirm button. */
|
|
15
|
+
confirmButtonLabel?: string;
|
|
16
|
+
onCancel: () => void;
|
|
17
|
+
onConfirm: () => void;
|
|
18
|
+
/** The `Modal` variant to render. */
|
|
19
|
+
type: "confirmation";
|
|
20
|
+
/** The label for the close button. This prop is used for the
|
|
21
|
+
* "cancel" button in the confirmation variant. */
|
|
22
|
+
closeButtonLabel?: string;
|
|
23
|
+
onClose?: never;
|
|
24
|
+
}
|
|
25
|
+
export interface DefaultModalProps {
|
|
26
|
+
/** The label for the close button. */
|
|
27
|
+
closeButtonLabel?: string;
|
|
14
28
|
onClose?: () => void;
|
|
29
|
+
/** The `Modal` variant to render. */
|
|
30
|
+
type: "default";
|
|
31
|
+
/** The label for the confirm button. This prop is not used
|
|
32
|
+
* in the default variant. */
|
|
33
|
+
confirmButtonLabel?: never;
|
|
34
|
+
onCancel?: never;
|
|
35
|
+
onConfirm?: never;
|
|
15
36
|
}
|
|
37
|
+
export type ModalTypeProps = ConfirmationModalProps | DefaultModalProps;
|
|
38
|
+
export type BaseModalProps = BaseProps & ModalTypeProps;
|
|
16
39
|
export interface ModalProps {
|
|
17
40
|
/** The text to display on the button that opens the modal. */
|
|
18
41
|
buttonText?: string;
|
|
19
42
|
/** ID that other components can cross reference for accessibility purposes */
|
|
20
43
|
id?: string;
|
|
21
44
|
/** Props to update the internal `Modal` component. This contains the
|
|
22
|
-
* `bodyContent`, `
|
|
23
|
-
* `onClose` props. */
|
|
45
|
+
* `bodyContent`, `headingText`, `isOpen`, and the modal type props. */
|
|
24
46
|
modalProps: BaseModalProps;
|
|
25
47
|
}
|
|
26
|
-
export declare
|
|
48
|
+
export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
|
|
49
|
+
export declare const BaseModal: ChakraComponent<React.FunctionComponent<BaseModalProps>, BaseModalProps>;
|
|
27
50
|
/**
|
|
28
51
|
* The `ModalTrigger` component renders a button that you click to open the
|
|
29
52
|
* internal `Modal` component. Note that props to update the internal `Modal`
|
package/dist/src/index.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ export { default as MatchMedia } from "../src/__tests__/mediaMatchMock";
|
|
|
46
46
|
export { default as Menu } from "./components/Menu/Menu";
|
|
47
47
|
export type { ListItemsData, ActionItem, GroupItem, DividerItem, } from "./components/Menu/Menu";
|
|
48
48
|
export { ModalTrigger, useModal } from "./components/Modal/Modal";
|
|
49
|
+
export type { BaseModalProps, ConfirmationModalProps, DefaultModalProps, } from "./components/Modal/Modal";
|
|
49
50
|
export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
|
|
50
51
|
export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
|
|
51
52
|
export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
|