@nypl/design-system-react-components 3.1.2 → 3.1.4

package/dist/src/components/List/List.d.ts

@@ -22,6 +22,8 @@ export interface ListProps {
     listItems?: (string | JSX.Element | DescriptionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
+    /** Show dividers between rows for the description list variant. */
+    showRowDividers?: boolean;
     /** Optional string value used to set the text for a `Heading` component, or
      * a DS Heading component that can be passed in. This title only applies to
      * to Description Lists and will render above the list. */

package/dist/src/components/Modal/Modal.d.ts

@@ -1,29 +1,52 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface BaseModalProps {
+export interface BaseProps {
     /** The content to display in the modal body. */
     bodyContent?: string | JSX.Element;
-    /** The label for the close button. */
-    closeButtonLabel?: string;
     /** The text to display in the modal heading, can be a string or JSX Element. */
     headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Boolean to determine if the modal is open or closed. */
     isOpen?: boolean;
+}
+export interface ConfirmationModalProps {
+    /** The label for the confirm button. */
+    confirmButtonLabel?: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+    /** The `Modal` variant to render. */
+    type: "confirmation";
+    /** The label for the close button. This prop is used for the
+     * "cancel" button in the confirmation variant. */
+    closeButtonLabel?: string;
+    onClose?: never;
+}
+export interface DefaultModalProps {
+    /** The label for the close button. */
+    closeButtonLabel?: string;
     onClose?: () => void;
+    /** The `Modal` variant to render. */
+    type: "default";
+    /** The label for the confirm button. This prop is not used
+     * in the default variant. */
+    confirmButtonLabel?: never;
+    onCancel?: never;
+    onConfirm?: never;
 }
+export type ModalTypeProps = ConfirmationModalProps | DefaultModalProps;
+export type BaseModalProps = BaseProps & ModalTypeProps;
 export interface ModalProps {
     /** The text to display on the button that opens the modal. */
     buttonText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Props to update the internal `Modal` component. This contains the
-     * `bodyContent`, `closeButtonLabel`, `headingText`, `isOpen`, and
-     * `onClose` props. */
+     * `bodyContent`, `headingText`, `isOpen`, and the modal type props. */
     modalProps: BaseModalProps;
 }
-export declare const BaseModal: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<BaseModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<BaseModalProps>>;
+export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
+export declare const BaseModal: ChakraComponent<React.FunctionComponent<BaseModalProps>, BaseModalProps>;
 /**
  * The `ModalTrigger` component renders a button that you click to open the
  * internal `Modal` component. Note that props to update the internal `Modal`

package/dist/src/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { ChakraComponent } from "@chakra-ui/react";
+import React from "react";
 export interface MultiSelectItem {
     id: string;
     name: string;
@@ -18,7 +18,8 @@ export interface SelectedItems {
 export interface MultiSelectProps {
     /** The button text rendered within the MultiSelect. */
     buttonText: string;
-    /** The number of items that will be visible in the list when the component first loads. */
+    /** The number of items that will be visible in the list when the component
+     * first loads. */
     defaultItemsVisible?: number;
     /** The action to perform for the clear/reset button of individual MultiSelects. */
     onClear?: () => void;
@@ -28,9 +29,8 @@ export interface MultiSelectProps {
     onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** An ID string that other components can cross reference for accessibility purposes. */
     id: string;
-    /** Boolean value used to control how the MultiSelect component will render within the page
-     * and interact with other DOM elements.
-     * The default value is false. */
+    /** Boolean value used to control how the MultiSelect component will render
+     * within the page and interact with other DOM elements. The default value is false. */
     isBlockElement?: boolean;
     /** Set the default open or closed state of the Multiselect. */
     isDefaultOpen?: boolean;
@@ -39,7 +39,8 @@ export interface MultiSelectProps {
     isSearchable?: boolean;
     /** The items to be rendered in the Multiselect as checkbox options. */
     items: MultiSelectItem[];
-    /** listOverflow is a property indicating how the list should handle overflow, with options limited to either "scroll" or "expand." */
+    /** listOverflow is a property indicating how the list should handle overflow,
+     * with options limited to either "scroll" or "expand." */
     listOverflow?: MultiSelectListOverflowTypes;
     /** The selected items state (items that were checked by user). */
     selectedItems: SelectedItems;
@@ -47,9 +48,10 @@ export interface MultiSelectProps {
     width?: MultiSelectWidths;
 }
 /**
-  The MultiSelect component is a customizable form input that supports multiple configurations,
-  including search functionality, checkbox options, and hierarchical structure,
-  with a parent checkbox toggling all children and dynamic styling through Chakra UI.
-*/
+ * The MultiSelect component is a customizable form input that supports multiple
+ * configurations, including search functionality, checkbox options, and
+ * hierarchical structure, with a parent checkbox toggling all children and
+ * dynamic styling through Chakra UI.
+ */
 export declare const MultiSelect: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<MultiSelectProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<MultiSelectProps>>;
 export default MultiSelect;

package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export interface MultiSelectItemsCountButtonProps {
     /** An ID string that other components can cross reference for accessibility purposes. */
     id: string;
@@ -28,5 +28,5 @@ export interface MultiSelectItemsCountButtonProps {
  * the selected items and the main button's close event will not be fired
  * (as expected).
  */
-declare const MultiSelectItemsCountButton: React.ForwardRefExoticComponent<MultiSelectItemsCountButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const MultiSelectItemsCountButton: import("react").ForwardRefExoticComponent<MultiSelectItemsCountButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default MultiSelectItemsCountButton;

package/dist/src/components/TextInput/TextInput.d.ts

@@ -15,7 +15,7 @@ export declare const TextInputFormats: {
     url: string;
 };
 export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
-export interface InputProps {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** FOR INTERNAL DS USE ONLY: Adds an aria-label or appends to an existing aria-label for screen readers.*/
     additionalAriaLabel?: string;
     /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Box, Center, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, FocusLock, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, useStyleConfig, useMultiStyleConfig, VStack, } from "@chakra-ui/react";
+export { Box, Center, chakra, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, FocusLock, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, useStyleConfig, useMediaQuery, useMultiStyleConfig, VStack, } from "@chakra-ui/react";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export type { AccordionTypes } from "./components/Accordion/Accordion";
 export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
@@ -46,6 +46,7 @@ export { default as MatchMedia } from "../src/__tests__/mediaMatchMock";
 export { default as Menu } from "./components/Menu/Menu";
 export type { ListItemsData, ActionItem, GroupItem, DividerItem, } from "./components/Menu/Menu";
 export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export type { BaseModalProps, ConfirmationModalProps, DefaultModalProps, } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
 export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
 export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";

package/dist/src/theme/components/buttonGroup.d.ts

@@ -1,6 +1,9 @@
 declare const ButtonGroup: {
     baseStyle?: ({ buttonWidth }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-        width: string;
+        width: {
+            base: "100%";
+            md: "100%" | "fit-content";
+        };
         button: {
             flexGrow: string;
         };

package/dist/src/theme/components/checkbox.d.ts

@@ -45,6 +45,8 @@ declare const Checkbox: {
                     };
                 };
             };
+            alignItems: string;
+            position: string;
         };
         control: {
             border: string;

package/dist/src/theme/components/list.d.ts

@@ -18,7 +18,7 @@ export declare const baseListStyles: (props?: ListBaseStyle) => {
         };
     };
 };
-export declare const baseSectionDescriptionStyles: {
+export declare const baseSectionDescriptionStyles: (showRowDividers?: boolean) => {
     borderBottom: string;
     borderColor: string;
     paddingStart: string;
@@ -57,7 +57,7 @@ export declare const unorderedStyles: (props?: ListBaseStyle) => {
     margin: string;
     marginBottom: string;
 };
-export declare const descriptionStyles: {
+export declare const descriptionStyles: (showRowDividers?: boolean) => {
     dl: {
         display: string;
         gridTemplateColumns: {
@@ -183,7 +183,7 @@ declare const List: {
                 marginBottom: string;
             };
         };
-        dl: {
+        dl: ({ showRowDividers }: StyleFunctionProps) => {
             base: {
                 dl: {
                     display: string;

package/dist/src/theme/components/multiSelectItemsCountButton.d.ts

@@ -19,6 +19,9 @@ declare const MultiSelectItemsCountButton: {
         width: string;
         zIndex: number;
         py: string;
+        _focus: {
+            zIndex: string;
+        };
         _hover: {
             borderColor: string;
         };

package/dist/src/theme/components/structuredContent.d.ts

@@ -296,7 +296,10 @@ declare const StructuredContent: {
                 base: string;
                 md: string;
             };
-            paddingTop: string;
+            paddingTop: string; /** The following styles are meant to target HTML elements that are
+             * not rendered from the Reservoir DS. Typically, these HTML elements
+             * are added from an API response.
+             */
             paddingEnd: {
                 md: string;
             };
@@ -307,10 +310,7 @@ declare const StructuredContent: {
         };
         dd: {
             margin: string;
-            paddingBottom: string; /** The following styles are meant to target HTML elements that are
-             * not rendered from the Reservoir DS. Typically, these HTML elements
-             * are added from an API response.
-             */
+            paddingBottom: string;
             borderTop: {
                 base: string;
                 md: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",