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

package/dist/src/__tests__/mediaMatchMock.d.ts

@@ -0,0 +1,79 @@
+/**
+ * NYPL Note:
+ * This file is directly taken from Chakra:
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/media-query/tests/matchmedia-mock-plus.ts
+ *
+ * We need this to test the `useNYPLBreakpoints` hook and, unfortunately,
+ * this function is not exported by Chakra.
+ */
+/**
+ * This mock is a combination of jest-matchmedia-mock
+ * https://github.com/dyakovk/jest-matchmedia-mock and
+ * mq-polyfill https://github.com/bigslycat/mq-polyfill.
+ *
+ * A solution which allowed resizing and a more realistic implementation of
+ * matchMedia was the reason for its creation. Neither project provided a good
+ * solution. Combining their strong points does. The class will listen for a
+ * resize event which is provided by a resizeTo function defined in the test:
+ *
+ *  window.resizeTo = function resizeTo(width, height) {
+ *    Object.assign(this, {
+ *      innerWidth: width,
+ *      innerHeight: height,
+ *      outerWidth: width,
+ *      outerHeight: height,
+ *    }).dispatchEvent(new this.Event('resize'))
+ *  }
+ *
+ * Listeners are only called if there has been a change in the match
+ * status for their media query.
+ */
+type MediaQueryListener = (this: MediaQueryList) => void;
+interface MediaQueryList {
+    readonly matches: boolean;
+    readonly media: string;
+    onchange: MediaQueryListener | null;
+    addListener(listener: MediaQueryListener): void;
+    removeListener(listener: MediaQueryListener): void;
+    addEventListener(type: "change", listener: MediaQueryListener): void;
+    removeEventListener(type: "change", listener: MediaQueryListener): void;
+    dispatchEvent(event: Event): boolean;
+}
+export default class MatchMedia {
+    private mediaQueries;
+    private prevMatchMap;
+    private mediaQueryList;
+    constructor();
+    private compileQuery;
+    private evalQuery;
+    /**
+     *
+     * Adds a listener function for the window resize event
+     * @private
+     */
+    private handleResize;
+    private addListener;
+    private removeListener;
+    /**
+     * Returns an array listing the media queries for which the matchMedia has registered listeners
+     * @public
+     */
+    getMediaQueries(): string[];
+    /**
+     * Returns a copy of the array of listeners for the specified media query
+     * @public
+     */
+    getListeners(mediaQuery: string): MediaQueryListener[];
+    /**
+     * Clears all registered media queries and their listeners
+     * @public
+     */
+    clear(): void;
+    /**
+     * Clears all registered media queries and their listeners,
+     * and destroys the implementation of `window.matchMedia`
+     * @public
+     */
+    destroy(): void;
+}
+export {};

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/Link/Link.d.ts

@@ -1,10 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { ChakraComponent, LinkProps as ChakraLinkProps } from "@chakra-ui/react";
 import React from "react";
 export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
 export type LinkTypes = typeof linkTypesArray[number];
-export interface LinkProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
+export interface LinkProps extends ChakraLinkProps {
     /** Additional class name to render in the `Link` component. */
     className?: string;
     /** Used to include or remove visited state styles. Default is true. */
@@ -28,8 +26,8 @@ export interface LinkProps {
     type?: LinkTypes;
 }
 /**
- * A component that uses an `href` prop or a child anchor element, to create
- * an anchor element with added styling and conventions.
+ * A component that uses an `href` prop or a child anchor `<a>` element, to
+ * create an anchor element with added styling and conventions.
  */
 export declare const Link: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<LinkProps> & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>, React.PropsWithChildren<LinkProps>>;
 export default Link;

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,32 @@
+import React from "react";
+export interface MultiSelectItemsCountButtonProps {
+    /** An ID string that other components can cross reference for accessibility purposes. */
+    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;
+    /** The number of selected items. */
+    selectedItemsCount: number;
+    /** The callback function for the menu toggle. */
+    onMenuToggle?: () => void;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    /** The action to perform for key down event. */
+    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/components/Tabs/Tabs.d.ts

@@ -5,11 +5,11 @@ export interface TabsDataProps {
     content: string | React.ReactNode;
 }
 export interface TabsProps {
-    /** The index of the tab to display for controlled situations. */
+    /** The index of the tab to display on the initial render. */
     defaultIndex?: number;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** The callback function invoked on every tab change event. */
+    /** The callback function invoked after every tab change event. The argument passed to the callback is the index of the tab just selected. */
     onChange?: (index: number) => any;
     /** Array of data to display */
     tabsData?: TabsDataProps[];

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

@@ -1,4 +1,4 @@
-export { Box, Center, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, VStack, } from "@chakra-ui/react";
+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 { default as Accordion } from "./components/Accordion/Accordion";
 export type { AccordionTypes } from "./components/Accordion/Accordion";
 export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
@@ -40,11 +40,20 @@ export { default as List } from "./components/List/List";
 export type { DescriptionProps, ListTypes } from "./components/List/List";
 export { default as Logo } from "./components/Logo/Logo";
 export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
+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 { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
-export type { NewsletterSignupViewType } from "./components/NewsletterSignup/NewsletterSignup";
+export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
+/** The code associated with the MultiSelectGroup component will not be exported
+ * until the refactor of the v2 version of the MultiSelectGroup component has
+ * been completed.
+ * */
+/** The code associated with the NewsletterSignup component and the
+ * NewsletterSignupViewType type will not be exported until the refactor of the
+ * component has been completed.
+ * */
 export { default as Notification } from "./components/Notification/Notification";
 export type { NotificationTypes } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
@@ -61,7 +70,9 @@ export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonL
 export type { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoader";
 export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
 export { default as Slider } from "./components/Slider/Slider";
-export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
+/** The code associated with the SocialMediaLinks component will not be exported
+ * until the refactor of the component has been completed.
+ * */
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export type { StatusBadgeTypes } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
@@ -80,6 +91,10 @@ 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";
+/** The useFilterBar hooks will not be exported until the refactor of the v2
+ * versions of the FilterBar component has been completed.
+ * */
+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/featuredContent.d.ts

@@ -39,10 +39,10 @@ declare const FeaturedContent: {
             alignItems: string;
             display: string;
             flexDirection: {
-                sm: "column-reverse";
+                base: "column-reverse";
                 md: "row-reverse";
             } | {
-                sm: "column";
+                base: "column";
                 md: "row";
             };
             maxWidth: string;
@@ -80,11 +80,11 @@ declare const FeaturedContent: {
             backgroundPosition: string;
             backgroundSize: string;
             height: {
-                sm: "320px";
+                base: "320px";
                 md: "auto";
             };
             width: {
-                sm: "100%";
+                base: "100%";
                 md: string;
             };
         };