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

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/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,6 +40,8 @@ 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 NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
 export type { NewsletterSignupViewType } from "./components/NewsletterSignup/NewsletterSignup";

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,6 +10,11 @@ declare const Accordion: {
         };
         button: {
             borderWidth: string;
+            " > span ": {
+                display: string;
+                alignItems: string;
+                minHeight: string;
+            };
             color: string;
             fontWeight: string;
             _dark: {
@@ -30,5 +34,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;