@nypl/design-system-react-components 2.2.0-react-chakra-rc → 3.0.0-link-test-rc

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TableProps {
     /** Additional class name for the `Table` component. */
@@ -26,5 +27,5 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-export declare const Table: React.FC<any>;
+export declare const Table: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TableProps> & React.RefAttributes<HTMLTableElement>>, React.PropsWithChildren<TableProps>>;
 export default Table;

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

@@ -1,4 +1,4 @@
-import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TabsDataProps {
     label: string;
@@ -21,6 +21,6 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-export declare const Tabs: React.FC<any>;
+export declare const Tabs: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TabsProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TabsProps>>;
 export { TabList, Tab, TabPanels, TabPanel };
 export default Tabs;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
@@ -20,5 +21,5 @@ export declare function isFilterType(type: TagSetProps["type"]): type is "filter
  * The full label text will be automatically revealed when the tag is hovered
  * with a DS `Tooltip` component.
  */
-export declare const TagSet: React.FC<any>;
+export declare const TagSet: ChakraComponent<React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, TagSetProps>;
 export default TagSet;

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

@@ -24,5 +24,5 @@ export interface TagSetExploreProps {
  * The `label` property in the `tagSetData` prop should be set to a link-type
  * JSX component for linking to specific content.
  */
-export declare const TagSetExplore: React.FC<any>;
+export declare const TagSetExplore: React.FC<TagSetExploreProps>;
 export default TagSetExplore;

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

@@ -22,5 +22,5 @@ export interface TagSetFilterProps {
  * The "filter" `TagSet` variant will display tags that can be removed when
  * `isDismissible` is true and they are clicked.
  */
-export declare const TagSetFilter: React.FC<any>;
+export declare const TagSetFilter: React.FC<TagSetFilterProps>;
 export default TagSetFilter;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TemplateProps {
 }
@@ -47,7 +48,7 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * The main top-level parent component that wraps all template-related
  * components.
  */
-declare const Template: React.FC<any>;
+declare const Template: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateProps>>;
 /**
  * This optional component renders its children from edge-to-edge and should
  * be used for alerts or notifications that are typically site-wide. This must
@@ -131,6 +132,6 @@ declare const TemplateFooter: React.FC<any>;
  * be rendered. For example, if you want to render content in the
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
-export declare const TemplateAppContainer: React.FC<any>;
+export declare const TemplateAppContainer: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateAppContainerProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateAppContainerProps>>;
 export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
 export default TemplateAppContainer;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini", "overline1", "overline2", "subtitle1", "subtitle2"];
 export type TextSizes = typeof textSizesArray[number];
@@ -21,5 +22,5 @@ export interface TextProps {
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }
-export declare const Text: React.FC<any>;
+export declare const Text: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TextProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TextProps>>;
 export default Text;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const autoCompleteValuesArray: readonly ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "given-name", "honorific-prefix", "honorific-suffix", "impp", "language", "name", "new-password", "nickname", "organization-title", "organization", "photo", "postal-code", "sex", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username"];
@@ -94,5 +95,5 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-export declare const TextInput: React.FC<any>;
+export declare const TextInput: ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, InputProps>;
 export default TextInput;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const toggleSizesArray: readonly ["default", "small"];
@@ -39,5 +40,5 @@ export declare const onChangeDefault: () => void;
 /**
  * Component that renders Chakra's `Switch` component along with NYPL defaults.
  */
-export declare const Toggle: React.FC<any>;
+export declare const Toggle: ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, ToggleProps>;
 export default Toggle;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { ChakraComponent } from "@chakra-ui/react";
 export interface TooltipProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;
@@ -13,5 +14,5 @@ export interface TooltipProps {
     /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */
     shouldWrapChildren?: boolean;
 }
-export declare const Tooltip: React.FC<any>;
+export declare const Tooltip: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TooltipProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TooltipProps>>;
 export default Tooltip;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const VideoPlayerAspectRatiosArray: readonly ["fourByThree", "sixteenByNine", "square"];
@@ -16,8 +17,10 @@ export interface VideoPlayerProps {
      * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
      * and `videoType` props */
     embedCode?: string;
-    /** Optional string to set the text for a `Heading` component */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
@@ -36,5 +39,5 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export declare const VideoPlayer: React.FC<any>;
+export declare const VideoPlayer: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<VideoPlayerProps> & React.RefAttributes<HTMLDivElement>>, VideoPlayerProps>;
 export default VideoPlayer;

package/dist/src/helpers/types.d.ts

@@ -48,3 +48,5 @@ export declare const sectionColorsDataMap: {
 };
 export declare const sectionTypeArray: string[];
 export type SectionTypes = typeof sectionTypeArray[number];
+export declare const dimensionTypeArray: readonly ["height", "width"];
+export type DimensionTypes = typeof dimensionTypeArray[number];

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface UseDSHeadingProps {
+    title: string | JSX.Element;
+    id?: string;
+    customDefaultHeading?: string | JSX.Element;
+    additionalStyles?: {
+        [key: string]: any;
+    };
+}
+/**
+ * DS internal helper hook to render a default `h2` heading element if the
+ * passed title is a string. Otherwise, it will return the title as is if it
+ * is a JSX element.
+ */
+declare function useDSHeading({ title, id, customDefaultHeading, additionalStyles, }: UseDSHeadingProps): string | JSX.Element;
+export default useDSHeading;

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * DS internal helper hook for the Tabs component to scroll
+ * the selected tab into view using useEffect and querySelector.
+ *
+ * Returns a ref for the TabList component.
+ */
+export declare const useScrollTabIntoView: (index: number) => React.MutableRefObject<HTMLDivElement>;
+export default useScrollTabIntoView;

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

@@ -1,8 +1,10 @@
 /**
  * DS internal helper hook to use state with prop dependencies.
  *
- * This hook should NOT be used by consuming apps. DS components should use this hook rather than useState() whenever
- * a change in state is expected for a given prop from a consuming app. The hook updates the DS component with useEffect().
+ * This hook should NOT be used by consuming apps. DS components should use
+ * this hook rather than useState() whenever a change in state is expected
+ * for a given prop from a consuming app. The hook updates the DS component
+ * with useEffect().
  */
 declare function useStateWithDependencies(initialValue: any): typeof initialValue;
 export default useStateWithDependencies;

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Box, Center, Circle, ColorModeScript, cookieStorageManager, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, VStack, } from "@chakra-ui/react";
+export { Box, Center, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, 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,7 +40,11 @@ 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 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";
@@ -78,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

@@ -1,6 +1,5 @@
 declare const Accordion: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         container: {
             border: string;
             width: string;
@@ -11,8 +10,16 @@ declare const Accordion: {
         };
         button: {
             borderWidth: string;
+            " > span ": {
+                display: string;
+                alignItems: string;
+                minHeight: string;
+            };
             color: string;
             fontWeight: string;
+            svg: {
+                marginStart: string;
+            };
             _dark: {
                 bg: string;
                 color: string;
@@ -30,5 +37,21 @@ declare const Accordion: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("button" | "container" | "panel")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("button" | "container" | "panel")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("button" | "container" | "panel")[];
 };
 export default Accordion;

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

@@ -1,32 +1,32 @@
 declare const AlphabetFilter: {
-    baseStyle: {
+    baseStyle?: {
         button: {
             minWidth: {
                 base: string;
-                md: string;
+                md: "auto";
             };
             height: {
                 base: string;
-                md: string;
+                md: "auto";
             };
             padding: string;
             margin: string;
             fontWeight: string;
             fontSize: {
-                base: string;
-                md: string;
+                base: "mobile.subtitle.subtitle1";
+                md: "desktop.subtitle.subtitle1";
             };
             lineHeight: string;
             _last: {
                 fontSize: string;
                 fontWeight: string;
                 px: {
-                    base: string;
-                    md: string;
+                    base: "s";
+                    md: "xs";
                 };
                 py: {
                     base: any;
-                    md: string;
+                    md: "xxs";
                 };
                 whiteSpace: string;
             };
@@ -36,5 +36,21 @@ declare const AlphabetFilter: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "button"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "button"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "button"[];
 };
 export default AlphabetFilter;

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

@@ -1,5 +1,6 @@
 declare const AudioPlayer: {
-    baseStyle: {
+    baseStyle?: {
+        base: {};
         invalid: {
             backgroundColor: string;
             border: string;
@@ -12,5 +13,21 @@ declare const AudioPlayer: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("invalid" | "base")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("invalid" | "base")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("invalid" | "base")[];
 };
 export default AudioPlayer;

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

@@ -1,5 +1,5 @@
 declare const Breadcrumb: {
-    baseStyle: {
+    baseStyle?: {
         bg: string;
         color: string;
         fontSize: string;
@@ -12,12 +12,12 @@ declare const Breadcrumb: {
         };
         ol: {
             alignItems: {
-                base: string;
-                md: string;
+                base: "center";
+                md: "unset";
             };
             display: {
-                base: string;
-                md: string;
+                base: "flex";
+                md: "block";
             };
             margin: string;
             maxWidth: string;
@@ -32,8 +32,8 @@ declare const Breadcrumb: {
         };
         "li:last-child": {
             fontWeight: {
-                base: string;
-                md: string;
+                base: "breadcrumbs.default";
+                md: "breadcrumbs.lastChild";
             };
             ".chakra-breadcrumb__link": {
                 _hover: {
@@ -53,19 +53,19 @@ declare const Breadcrumb: {
         };
         "li:not(:last-child)": {
             display: {
-                base: string;
-                md: string;
+                base: "none";
+                md: "inline-block";
             };
             a: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "xs";
+                    md: "0";
                 };
             };
             ".icon": {
                 display: {
-                    base: string;
-                    md: string;
+                    base: "inline";
+                    md: "none";
                 };
             };
             "span:not(.breadcrumb-label)": {
@@ -77,13 +77,16 @@ declare const Breadcrumb: {
             display: string;
             span: {
                 display: {
-                    base: string;
-                    md: string;
+                    base: "none";
+                    md: "inline";
                 };
             };
         };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
         blogs: {
             bg: string;
             color: string;
@@ -154,5 +157,10 @@ declare const Breadcrumb: {
             };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "education" | "locations" | "research" | "whatsOn";
+        colorScheme?: string;
+    };
 };
 export default Breadcrumb;

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

@@ -1,3 +1,38 @@
+export declare const baseButtonStyle: {
+    alignItems: string;
+    borderRadius: string;
+    display: string;
+    cursor: string;
+    color: string;
+    fontWeight: string;
+    height: string;
+    justifyContent: string;
+    lineHeight: string;
+    minWidth: string;
+    textDecoration: string;
+    wordWrap: string;
+    svg: {
+        fill: string;
+    };
+    _hover: {
+        bg: string;
+    };
+    _visited: {
+        color: string;
+    };
+    _disabled: {
+        bg: string;
+        color: string;
+        opacity: string;
+        pointerEvents: string;
+    };
+    _dark: {
+        _disabled: {
+            bg: string;
+            color: string;
+        };
+    };
+};
 export declare const buttonBaseStyle: {
     base: {
         alignItems: string;
@@ -6,8 +41,10 @@ export declare const buttonBaseStyle: {
         cursor: string;
         color: string;
         fontWeight: string;
+        height: string;
         justifyContent: string;
         lineHeight: string;
+        minWidth: string;
         textDecoration: string;
         wordWrap: string;
         svg: {
@@ -77,8 +114,10 @@ declare const Button: {
             cursor: string;
             color: string;
             fontWeight: string;
+            height: string;
             justifyContent: string;
             lineHeight: string;
+            minWidth: string;
             textDecoration: string;
             wordWrap: string;
             svg: {

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

@@ -1,11 +1,20 @@
 declare const ButtonGroup: {
-    baseStyle: ({ buttonWidth }: {
-        buttonWidth: any;
-    }) => {
+    baseStyle?: ({ buttonWidth }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
         width: string;
         button: {
             flexGrow: 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 ButtonGroup;