@nypl/design-system-react-components 3.0.0-react-chakra-rc → 3.0.0-react-chakra-rc2

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

@@ -3,12 +3,18 @@ import React from "react";
 export type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
     accordionType?: AccordionTypes;
-    label: string;
+    ariaLabel?: string;
+    /** Ref to the DOM element of the AccordionButton. */
+    buttonInteractionRef?: any;
+    label: string | JSX.Element;
     panel: string | React.ReactNode;
 }
 export interface AccordionProps {
     /** Array of data to display, and an optional accordionType */
     accordionData: AccordionDataProps[];
+    /** Global aria-label value that is applied to all accordions if individual
+     * ariaLabel props are not included with accordionData entries. */
+    ariaLabel?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { ChakraComponent } from "@chakra-ui/react";
+export interface MultiSelectItem {
+    id: string;
+    name: string;
+    isDisabled?: boolean;
+    children?: MultiSelectItem[];
+}
+export declare const multiSelectWidthsArray: readonly ["fitContent", "full"];
+export type MultiSelectWidths = typeof multiSelectWidthsArray[number];
+export declare const multiSelectListOverflowArray: readonly ["scroll", "expand"];
+export type MultiSelectListOverflowTypes = typeof multiSelectListOverflowArray[number];
+export interface SelectedItems {
+    [name: string]: {
+        items: string[];
+    };
+}
+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. */
+    defaultItemsVisible?: number;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    /** The action to perform on the checkbox's onChange function. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    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. */
+    isBlockElement?: boolean;
+    /** Set the default open or closed state of the Multiselect. */
+    isDefaultOpen?: boolean;
+    /** Boolean value used to enable the component's search functionality
+     * The default value is false. */
+    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?: MultiSelectListOverflowTypes;
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** Value used to set the width for the MultiSelect component. */
+    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.
+*/
+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

@@ -0,0 +1,29 @@
+import React from "react";
+export interface MultiSelectItemsCountButtonProps {
+    id: string;
+    /** The id of the MultiSelect using this button. */
+    multiSelectId: string;
+    /** The label text rendered within the MultiSelect using this button. */
+    multiSelectLabelText: string;
+    /** The open status of the MultiSelect menu. */
+    isOpen: boolean;
+    /** The selected items state (items that were checked by user). */
+    selectedItemsString: string;
+    selectedItemsCount: number;
+    /** The callback function for the menu toggle. */
+    onMenuToggle?: () => void;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    onKeyDown?: () => void;
+    /** Ref to the Accordion Button element. */
+    accordianButtonRef: any;
+}
+/**
+ * The toggle button component used to open and close the `MultiSelect` menu.
+ * A second button is rendered above the main button that displays the current
+ * number of selected items. Clicking on the second button will clear all
+ * 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>>;
+export default MultiSelectItemsCountButton;

package/dist/src/hooks/useMultiSelect.d.ts

@@ -0,0 +1,18 @@
+import { MultiSelectItem, SelectedItems } from "../components/MultiSelect/MultiSelect";
+/**
+ * The useMultiSelect hook returns an object containing all the functions and
+ * state needed to handle the selectedItems of a `MultiSelect` component. It can
+ * be used in conjunction with one single `MultiSelect` component as well as a
+ * group of `MultiSelect`s in the `MultiSelectGroup` component. The returned
+ * object includes the functions onChange, onClear, onMixedStateChange for
+ * handling any changes to the selection of items and the current state of the
+ * selection: selectedItems.
+ */
+export default function useMultiSelect(initialState?: SelectedItems): {
+    selectedItems: {} | SelectedItems;
+    setSelectedItems: (newState: SelectedItems) => void;
+    onChange: (itemId: string, multiSelectId: string) => void;
+    onMixedStateChange: (parentId: string, multiSelectId: string, items: MultiSelectItem[]) => void;
+    onClear: (multiSelectId: string) => void;
+    onClearAll: () => void;
+};

package/dist/src/index.d.ts

@@ -43,6 +43,8 @@ export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
 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 { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
 export { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
 export type { NewsletterSignupViewType } from "./components/NewsletterSignup/NewsletterSignup";
 export { default as Notification } from "./components/Notification/Notification";
@@ -80,6 +82,7 @@ export { default as Toggle } from "./components/Toggle/Toggle";
 export type { ToggleSizes } from "./components/Toggle/Toggle";
 export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
+export { default as useMultiSelect } from "./hooks/useMultiSelect";
 export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useWindowSize } from "./hooks/useWindowSize";

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

@@ -17,6 +17,9 @@ declare const Accordion: {
             };
             color: string;
             fontWeight: string;
+            svg: {
+                marginStart: string;
+            };
             _dark: {
                 bg: string;
                 color: string;

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

@@ -1,10 +1,4 @@
 export declare const multiSelectWidths: {
-    default: {
-        width: {
-            base: string;
-            md: string;
-        };
-    };
     fitContent: {
         width: {
             base: string;
@@ -13,17 +7,117 @@ export declare const multiSelectWidths: {
         minWidth: {
             md: string;
         };
+        maxWidth: {
+            md: string;
+        };
     };
     full: {
         width: string;
     };
 };
 declare const MultiSelect: {
-    parts: string[];
-    baseStyle: ({ isBlockElement, isOpen, width }: {
-        isBlockElement: any;
-        isOpen: any;
-        width?: string;
-    }) => any;
+    baseStyle?: ({ isBlockElement, width }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        base: {
+            position: string;
+        };
+        menuChildren: {
+            paddingLeft: string;
+            marginBottom: number;
+        };
+        viewAllButton: {
+            color: string;
+            marginLeft: string;
+            px: string;
+            py: string;
+            _hover: {
+                bg: string;
+            };
+            _dark: {
+                color: string;
+                _hover: {
+                    bg: string;
+                };
+            };
+        };
+        buttonTextLabel: {
+            marginLeft: string;
+            textOverflow: string;
+            overflow: string;
+            marginBottom: number;
+        };
+        menuSearchInputBox: {
+            input: {
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        accordionStyles: {
+            ".chakra-accordion__item": {
+                _dark: {
+                    bgColor: string;
+                };
+            };
+            ".chakra-accordion__button": {
+                backgroundColor: string;
+                fontWeight: string;
+                minWidth: string;
+                position: string;
+                width: string | {
+                    base: "100%";
+                    md: "fit-content";
+                };
+                overflow: string;
+                zIndex: number;
+                div: {
+                    overflow: string;
+                    textOverflow: string;
+                    whiteSpace: string;
+                };
+                span: {
+                    overflow: string;
+                };
+                _hover: {
+                    backgroundColor: string;
+                };
+                _dark: {
+                    backgroundColor: string;
+                    borderStartColor: string;
+                    borderStartWidth: string;
+                    _hover: {
+                        borderStartColor: string;
+                    };
+                };
+                _expanded: {
+                    bgColor: string;
+                    _dark: {
+                        bgColor: string;
+                    };
+                };
+            };
+            ".chakra-collapse": any;
+            ".chakra-accordion__panel": {
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
 };
 export default MultiSelect;

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

@@ -0,0 +1,52 @@
+declare const MultiSelectItemsCountButton: {
+    baseStyle?: ({ isOpen }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        alignItems: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        borderColor: string;
+        display: string;
+        flexShrink: number;
+        fontSize: string;
+        justifyContent: string;
+        left: string;
+        marginRight: string;
+        position: string;
+        top: {
+            base: "12px";
+            md: "10px";
+        };
+        width: string;
+        zIndex: number;
+        _hover: {
+            borderColor: string;
+        };
+        svg: {
+            marginLeft: string;
+            marginRight: string;
+            marginTop: string;
+        };
+        _dark: {
+            backgroundColor: string;
+            borderColor: string;
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                borderColor: string;
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+};
+export default MultiSelectItemsCountButton;

package/package.json

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

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

@@ -1,99 +0,0 @@
-declare const MultiSelectMenuButton: {
-    parts: string[];
-    baseStyle: ({ hasSelectedItems, isOpen }: {
-        hasSelectedItems?: boolean;
-        isOpen?: boolean;
-    }) => {
-        buttonLabel: {
-            color: string;
-            justifyContent: string;
-            overflow: string;
-            marginLeft: string;
-            marginRight: string;
-            textAlign: string;
-            textOverflow: string;
-            whiteSpace: string;
-            transition: string;
-            _dark: {
-                color: string;
-            };
-        };
-        menuButton: {
-            alignItems: string;
-            backgroundColor: string;
-            borderBottomLeftRadius: string;
-            borderBottomRightRadius: string;
-            borderColor: string;
-            borderRadius: string;
-            borderWidth: string;
-            fontSize: string;
-            minHeight: {
-                base: string;
-                md: string;
-            };
-            px: string;
-            py: string;
-            display: string;
-            justifyContent: string;
-            width: string;
-            _hover: {
-                backgroundColor: string;
-                borderColor: string;
-            };
-            svg: {
-                marginTop: string;
-            };
-            _dark: {
-                backgroundColor: string;
-                borderBottomLeftRadius: string;
-                borderBottomRightRadius: string;
-                borderColor: string;
-                svg: {
-                    fill: string;
-                };
-                _hover: {
-                    backgroundColor: string;
-                    borderColor: string;
-                };
-            };
-        };
-        selectedItemsCountButton: {
-            alignItems: string;
-            backgroundColor: string;
-            border: string;
-            borderRadius: string;
-            borderColor: string;
-            display: string;
-            flexShrink: number;
-            fontSize: string;
-            justifyContent: string;
-            left: string;
-            marginRight: string;
-            position: string;
-            top: {
-                base: string;
-                md: string;
-            };
-            width: string;
-            _hover: {
-                borderColor: string;
-            };
-            svg: {
-                marginLeft: string;
-                marginRight: string;
-                marginTop: string;
-            };
-            _dark: {
-                backgroundColor: string;
-                borderColor: string;
-                svg: {
-                    fill: string;
-                };
-                _hover: {
-                    borderColor: string;
-                };
-            };
-        };
-    };
-};
-export default MultiSelectMenuButton;