@nypl/design-system-react-components 3.0.0-react-chakra-rc2 → 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/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/MultiSelectItemsCountButton.d.ts

@@ -1,5 +1,6 @@
 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;
@@ -9,11 +10,13 @@ export interface MultiSelectItemsCountButtonProps {
     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;

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/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,13 +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 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";
+/** 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";
@@ -63,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";
@@ -82,6 +91,9 @@ 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";

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;
             };
         };