@nypl/design-system-react-components 1.5.4 → 1.6.0-vite-rc-2

package/dist/{components → src/components}/Toggle/Toggle.d.ts

@@ -1,42 +1,43 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export declare type ToggleSizes = "default" | "small";
-export interface ToggleProps {
-    /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
-     *   If true, the toggle will be initially set to the "on" position. */
-    defaultChecked?: boolean;
-    /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
-    /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true. */
-    invalidText?: HelperErrorTextType;
-    /** When using the Toggle as a "controlled" form element, you can specify
-     * the Toggle's checked state using this prop.
-     * Learn more about controlled and uncontrolled form fields:
-     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
-    isChecked?: boolean;
-    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-     * This also makes the text italic and color scheme gray. */
-    isDisabled?: boolean;
-    /** Adds the 'aria-invalid' attribute to the input when true. */
-    isInvalid?: boolean;
-    /** Adds the 'required' attribute to the input when true. */
-    isRequired?: boolean;
-    /** The toggle's label. This will serve as the text content for the `<label>` element */
-    labelText: string;
-    /** The name prop indicates the `Toggle`'s form element name. If none is
-     * specified, 'default' will be used. */
-    name?: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The size of the Toggle. Defaults to "large". */
-    size?: ToggleSizes;
-}
-export declare const onChangeDefault: () => void;
-/**
- * Component that renders Chakra's `Switch` component along with NYPL defaults.
- */
-export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
-export default Toggle;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const toggleSizesArray: readonly ["default", "small"];
+export type ToggleSizes = typeof toggleSizesArray[number];
+export interface ToggleProps {
+    /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
+     *   If true, the toggle will be initially set to the "on" position. */
+    defaultChecked?: boolean;
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Optional string to populate the HelperErrorText for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** When using the Toggle as a "controlled" form element, you can specify
+     * the Toggle's checked state using this prop.
+     * Learn more about controlled and uncontrolled form fields:
+     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The toggle's label. This will serve as the text content for the `<label>` element */
+    labelText: string;
+    /** The name prop indicates the `Toggle`'s form element name. If none is
+     * specified, 'default' will be used. */
+    name?: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The size of the Toggle. Defaults to "large". */
+    size?: ToggleSizes;
+}
+export declare const onChangeDefault: () => void;
+/**
+ * Component that renders Chakra's `Switch` component along with NYPL defaults.
+ */
+export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Toggle;

package/dist/{components → src/components}/Tooltip/Tooltip.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-export interface TooltipProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
-    /** Value used to populate the tooltip content. */
-    content: string | number | React.ReactNode;
-    /** A class name for the Tooltip parent div. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Adds the `disabled` prop to the Tooltip when true. */
-    isDisabled?: boolean;
-    /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */
-    shouldWrapChildren?: boolean;
-}
-export declare const Tooltip: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Tooltip;
+import React from "react";
+export interface TooltipProps {
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Value used to populate the tooltip content. */
+    content: string | number | React.ReactNode;
+    /** A class name for the Tooltip parent div. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Adds the `disabled` prop to the Tooltip when true. */
+    isDisabled?: boolean;
+    /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */
+    shouldWrapChildren?: boolean;
+}
+export declare const Tooltip: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Tooltip;

package/dist/{components → src/components}/VideoPlayer/VideoPlayer.d.ts

@@ -1,40 +1,42 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export declare type VideoPlayerTypes = "vimeo" | "youtube";
-export declare type VideoPlayerAspectRatios = "fourByThree" | "sixteenByNine" | "square";
-export interface VideoPlayerProps {
-    /** Optional aspect ratio prop to control the sizing of the video player; if
-     * omitted, the video player defaults to `sixteen-by-nine` */
-    aspectRatio?: VideoPlayerAspectRatios;
-    /** Optional className you can add in addition to `video-player` */
-    className?: string;
-    /** Optional string to set the text for a video description */
-    descriptionText?: string;
-    /** Optional string to set a code snippet provided by YouTube or Vimeo; the
-     * `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 to set the text for a `HelperErrorText` component */
-    helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Optional title to be added to the `<iframe>` element for improved
-     * accessibility; this title should describe in a few words the content of
-     * the video; if omitted, a generic title will be added; if a `title`
-     * attribute is already present in the `embedCode` prop, this prop will be
-     * ignored */
-    iframeTitle?: string;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Required YouTube or Vimeo video ID. This value can be pulled from a
-     * video's YouTube or Vimeo URL. */
-    videoId?: string;
-    /** Required. Used to specify which video service is being used. */
-    videoType?: VideoPlayerTypes;
-}
-export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default VideoPlayer;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const VideoPlayerAspectRatiosArray: readonly ["fourByThree", "sixteenByNine", "square"];
+export declare const VideoPlayerTypesArray: readonly ["vimeo", "youtube"];
+export type VideoPlayerAspectRatios = typeof VideoPlayerAspectRatiosArray[number];
+export type VideoPlayerTypes = typeof VideoPlayerTypesArray[number];
+export interface VideoPlayerProps {
+    /** Optional aspect ratio prop to control the sizing of the video player; if
+     * omitted, the video player defaults to `sixteen-by-nine` */
+    aspectRatio?: VideoPlayerAspectRatios;
+    /** Optional className you can add in addition to `video-player` */
+    className?: string;
+    /** Optional string to set the text for a video description */
+    descriptionText?: string;
+    /** Optional string to set a code snippet provided by YouTube or Vimeo; the
+     * `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 to set the text for a `HelperErrorText` component */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Optional title to be added to the `<iframe>` element for improved
+     * accessibility; this title should describe in a few words the content of
+     * the video; if omitted, a generic title will be added; if a `title`
+     * attribute is already present in the `embedCode` prop, this prop will be
+     * ignored */
+    iframeTitle?: string;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Required YouTube or Vimeo video ID. This value can be pulled from a
+     * video's YouTube or Vimeo URL. */
+    videoId?: string;
+    /** Required. Used to specify which video service is being used. */
+    videoType?: VideoPlayerTypes;
+}
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default VideoPlayer;

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

@@ -0,0 +1,2 @@
+export declare const layoutTypesArray: readonly ["column", "row"];
+export type LayoutTypes = typeof layoutTypesArray[number];

package/dist/{hooks → src/hooks}/useCarouselStyles.d.ts

@@ -1,17 +1,17 @@
-/**
- * Custom hook that controls the sliding function for the carousel wrapper.
- * This returns functions to use for the "previous" and "next" buttons as well
- * as a CSS style object that should be use to transition between slides. There
- * is also a function to programmatically slide to the first slide.
- * Inspired by: https://codesandbox.io/s/fxjeo
- */
-export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
-    prevSlide: () => void;
-    nextSlide: () => void;
-    carouselStyle: {
-        transition: string;
-        marginStart: string;
-    };
-    goToStart: () => void;
-};
-export default useCarouselStyles;
+/**
+ * Custom hook that controls the sliding function for the carousel wrapper.
+ * This returns functions to use for the "previous" and "next" buttons as well
+ * as a CSS style object that should be use to transition between slides. There
+ * is also a function to programmatically slide to the first slide.
+ * Inspired by: https://codesandbox.io/s/fxjeo
+ */
+export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
+    prevSlide: () => void;
+    nextSlide: () => void;
+    carouselStyle: {
+        transition: string;
+        marginStart: string;
+    };
+    goToStart: () => void;
+};
+export default useCarouselStyles;

package/dist/{hooks → src/hooks}/useCloseDropDown.d.ts

@@ -1,7 +1,7 @@
-/**
- * Close dropdowns when clicking outside of them or by pressing
- * the escape key. It expects an action callback that will set
- * the dropdown state to false (close).
- */
-declare const useCloseDropDown: (actionCb: (val: boolean) => void, ref: React.RefObject<HTMLDivElement>) => void;
-export default useCloseDropDown;
+/**
+ * Close dropdowns when clicking outside of them or by pressing
+ * the escape key. It expects an action callback that will set
+ * the dropdown state to false (close).
+ */
+declare const useCloseDropDown: (actionCb: (val: boolean) => void, ref: React.RefObject<HTMLDivElement>) => void;
+export default useCloseDropDown;

package/dist/{hooks → src/hooks}/useFilterBar.d.ts

@@ -1,21 +1,21 @@
-import { SelectedItems } from "./../components/MultiSelect/MultiSelect";
-/**
- * The `useFilterBar` hook returns an object containing all the functions and state needed to control a FilterBar component and its child components.
- * The returned object includes the functions `onChange`, `onMixedStateChange`, `onClear` and `onClearAll` for handling any changes to the selectedItems object,
- * a `setSelectedItems` function that allows to set an initial selectedItems state
- * and the current state of the selection: `selectedItems`.
- * In addition it returns all props to handle a filter module overlay for the mobile view: a boolean value representing the current module state: `isModalOpen`,
- * an `onToggle` function to change the module state or alternatively `onOpen` and `onClose` functions.
- */
-export default function useFilterBar(initialState?: SelectedItems): {
-    selectedItems: {} | SelectedItems;
-    setSelectedItems: (newState: SelectedItems) => void;
-    isModalOpen: boolean;
-    onOpen: () => void;
-    onClose: () => void;
-    onToggle: () => void;
-    onChange: (itemId: string, multiSelectId: string) => void;
-    onMixedStateChange: (parentId: string, multiSelectId: string, items: import("../components/MultiSelect/MultiSelect").MultiSelectItem[]) => void;
-    onClear: (multiSelectId: string) => void;
-    onClearAll: () => void;
-};
+import { SelectedItems } from "./../components/MultiSelect/MultiSelect";
+/**
+ * The `useFilterBar` hook returns an object containing all the functions and state needed to control a FilterBar component and its child components.
+ * The returned object includes the functions `onChange`, `onMixedStateChange`, `onClear` and `onClearAll` for handling any changes to the selectedItems object,
+ * a `setSelectedItems` function that allows to set an initial selectedItems state
+ * and the current state of the selection: `selectedItems`.
+ * In addition it returns all props to handle a filter module overlay for the mobile view: a boolean value representing the current module state: `isModalOpen`,
+ * an `onToggle` function to change the module state or alternatively `onOpen` and `onClose` functions.
+ */
+export default function useFilterBar(initialState?: SelectedItems): {
+    selectedItems: {} | SelectedItems;
+    setSelectedItems: (newState: SelectedItems) => void;
+    isModalOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+    onChange: (itemId: string, multiSelectId: string) => void;
+    onMixedStateChange: (parentId: string, multiSelectId: string, items: import("./../components/MultiSelect/MultiSelect").MultiSelectItem[]) => void;
+    onClear: (multiSelectId: string) => void;
+    onClearAll: () => void;
+};

package/dist/{hooks → src/hooks}/useMultiSelect.d.ts

@@ -1,15 +1,15 @@
-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;
-};
+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/{hooks → src/hooks}/useNYPLBreakpoints.d.ts

@@ -1,13 +1,13 @@
-/**
- * This hook is used to determine if the current screen size is larger than
- * the specific NYPL breakpoint values. The returned value is an object with
- * boolean values for each breakpoint.
- */
-declare const useNYPLBreakpoints: () => {
-    isLargerThanSmall: any;
-    isLargerThanMedium: any;
-    isLargerThanMobile: any;
-    isLargerThanLarge: any;
-    isLargerThanXLarge: any;
-};
-export default useNYPLBreakpoints;
+/**
+ * This hook is used to determine if the current screen size is larger than
+ * the specific NYPL breakpoint values. The returned value is an object with
+ * boolean values for each breakpoint.
+ */
+declare const useNYPLBreakpoints: () => {
+    isLargerThanSmall: any;
+    isLargerThanMedium: any;
+    isLargerThanMobile: any;
+    isLargerThanLarge: any;
+    isLargerThanXLarge: any;
+};
+export default useNYPLBreakpoints;

package/dist/{hooks → src/hooks}/useNYPLTheme.d.ts

@@ -1,67 +1,67 @@
-/**
- * A custom hook that returns the Chakra-based NYPL theme object. This must be
- * used inside a component that is wrapped in the `DSProvider` component, so
- * that the theme object can be available to use.
- */
-declare function useNYPLTheme(): {
-    breakpoints?: undefined;
-    colors?: undefined;
-    fontSizes?: undefined;
-    fontWeights?: undefined;
-    fonts?: undefined;
-    radii?: undefined;
-    space?: undefined;
-} | {
-    breakpoints: any;
-    colors: {
-        brand: any;
-        dark: any;
-        section: any;
-        transparent: any;
-        ui: any;
-    };
-    fontSizes: {
-        "-3": any;
-        "-2": any;
-        "-1": any;
-        0: any;
-        1: any;
-        2: any;
-        3: any;
-        4: any;
-        breadcrumbs: any;
-        button: any;
-        heading: any;
-        helper: any;
-        label: any;
-        text: any;
-    };
-    fontWeights: {
-        light: any;
-        regular: any;
-        medium: any;
-        bold: any;
-        breadcrumbs: any;
-        button: any;
-        heading: any;
-        helper: any;
-        label: any;
-        text: any;
-    };
-    fonts: {
-        body: any;
-        heading: any;
-    };
-    radii: any;
-    space: {
-        xxs: any;
-        xs: any;
-        s: any;
-        m: any;
-        l: any;
-        xl: any;
-        xxl: any;
-        xxxl: any;
-    };
-};
-export default useNYPLTheme;
+/**
+ * A custom hook that returns the Chakra-based NYPL theme object. This must be
+ * used inside a component that is wrapped in the `DSProvider` component, so
+ * that the theme object can be available to use.
+ */
+declare function useNYPLTheme(): {
+    breakpoints?: undefined;
+    colors?: undefined;
+    fontSizes?: undefined;
+    fontWeights?: undefined;
+    fonts?: undefined;
+    radii?: undefined;
+    space?: undefined;
+} | {
+    breakpoints: any;
+    colors: {
+        brand: any;
+        dark: any;
+        section: any;
+        transparent: any;
+        ui: any;
+    };
+    fontSizes: {
+        "-3": any;
+        "-2": any;
+        "-1": any;
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
+    };
+    fontWeights: {
+        light: any;
+        regular: any;
+        medium: any;
+        bold: any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
+    };
+    fonts: {
+        body: any;
+        heading: any;
+    };
+    radii: any;
+    space: {
+        xxs: any;
+        xs: any;
+        s: any;
+        m: any;
+        l: any;
+        xl: any;
+        xxl: any;
+        xxxl: any;
+    };
+};
+export default useNYPLTheme;

package/dist/{hooks → src/hooks}/useStateWithDependencies.d.ts

@@ -1,5 +1,5 @@
-/**
- * DS internal helper hook to use state with prop dependencies.
- */
-declare function useStateWithDependencies(initialValue: any): typeof initialValue;
-export default useStateWithDependencies;
+/**
+ * DS internal helper hook to use state with prop dependencies.
+ */
+declare function useStateWithDependencies(initialValue: any): typeof initialValue;
+export default useStateWithDependencies;

package/dist/{hooks → src/hooks}/useWindowSize.d.ts

@@ -1,10 +1,10 @@
-interface WindowSize {
-    width: number;
-    height: number;
-}
-/**
- * React hook used to get the window size on device resizing.
- * Based on https://usehooks-typescript.com/react-hook/use-window-size
- */
-declare function useWindowSize(): WindowSize;
-export default useWindowSize;
+interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * React hook used to get the window size on device resizing.
+ * Based on https://usehooks-typescript.com/react-hook/use-window-size
+ */
+declare function useWindowSize(): WindowSize;
+export default useWindowSize;