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

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

@@ -21,7 +21,7 @@ export interface MultiSelectProps {
     /** 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;
+    onClearAll?: () => 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). */

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;
+    onClearAll?: () => 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/components/TagSet/TagSet.d.ts

@@ -5,6 +5,8 @@ import { TagSetFilterProps } from "./TagSetFilter";
 export interface BaseTagSetProps {
     /** Additional class for the component. */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
 export type TagSetProps = BaseTagSetProps & TagSetTypeProps;

package/dist/src/components/TagSet/TagSetExplore.d.ts

@@ -3,16 +3,20 @@ import { IconNames } from "../Icons/Icon";
 export interface TagSetExploreDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
+    /** The ID of the tag. */
+    id?: string;
     /** The content to display; should be a link-type component. */
     label: JSX.Element;
 }
 export interface TagSetExploreProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Whether the tags should be removable. This prop is not used in the "explore" variant. */
+    /** Whether the tags should be removable. This prop is not used in the
+     * "explore" variant. */
     isDismissible?: never;
+    /** The function to perform when the Clear All button is clicked. This prop
+     * is not used in the "explore" variant. */
+    onClear?: never;
     /** The function to perform when a tag is clicked when `isDismissible` is
-     * true.  This prop is not used in the "explore" variant.*/
+     * true.  This prop is not used in the "explore" variant. */
     onClick?: never;
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -1,10 +1,14 @@
-import React from "react";
+/// <reference types="react" />
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
+    /** The ID of the tag. */
+    id: string;
     /** The string label to display. */
     label: string;
+    /** Any other properties the consuming app may need for app logic filtering. */
+    [key: string]: string;
 }
 export interface TagSetFilterProps {
     /** ID that other components can cross reference for accessibility purposes. */
@@ -12,7 +16,7 @@ export interface TagSetFilterProps {
     /** Whether the tags should be removable. */
     isDismissible?: boolean;
     /** The function to perform when a tag is clicked when `isDismissible` is true. */
-    onClick?: (tagLabel: string) => void;
+    onClick?: (tagSet: TagSetFilterDataProps) => void;
     /** The array of data to display as tags. */
     tagSetData: TagSetFilterDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */

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

@@ -29,6 +29,16 @@ declare const Breadcrumb: {
                 color: string;
                 textDecoration: string;
             };
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: any;
+                zIndex: string;
+                _dark: {
+                    outlineColor: any;
+                };
+            };
         };
         "li:last-child": {
             fontWeight: {
@@ -102,6 +112,16 @@ declare const Breadcrumb: {
                         color: string;
                     };
                 };
+                _focus: {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: any;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: any;
+                    };
+                };
             };
             "li:last-child": {
                 ".chakra-breadcrumb__link": {

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

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

@@ -1,6 +1,16 @@
 /** Export "mixin" styles. */
 export { screenreaderOnly, wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
+declare const customFocusColor: (focusColor: any, focusColorDark: any) => {
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: any;
+    zIndex: string;
+    _dark: {
+        outlineColor: any;
+    };
+};
 declare const activeFocus: (darkMode?: boolean) => {
     boxShadow: string;
     outline: string;
@@ -139,4 +149,4 @@ declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };