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

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

@@ -1,51 +1,51 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { LayoutTypes } from "../../helpers/types";
-export interface CheckboxGroupProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
-    /** Populates the initial value of the input */
-    defaultValue?: string[];
-    /** 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 error state */
-    invalidText?: HelperErrorTextType;
-    /** Adds the 'disabled' prop to the input when true. */
-    isDisabled?: boolean;
-    /** Set's the `Checkbox`s' wrapper to be full width. */
-    isFullWidth?: boolean;
-    /** A`dds the 'aria-invalid' attribute to the input and
-     * sets the error state when true. */
-    isInvalid?: boolean;
-    /** Adds the 'required' attribute to the input when true. */
-    isRequired?: boolean;
-    /** The checkbox group label displayed in a `legend` element if `showlabel` is
-     * true, or an "aria-label" if `showLabel` is false. */
-    labelText: string;
-    /** Renders the checkbox buttons in a row or column (default). */
-    layout?: LayoutTypes;
-    /** The `name` prop indicates the form group for all the `Checkbox` children. */
-    name: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (value: string[]) => void;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Offers the ability to show the group's legend onscreen or hide it. Refer
-     * to the `labelText` property for more information. */
-    showLabel?: boolean;
-    /** Whether or not to display the "(Required)" text in the label text.
-     * True by default. */
-    showRequiredLabel?: boolean;
-    /** The values to programmatically update the selected `Checkbox`es. */
-    value?: string[];
-}
-/**
- * Wrapper component to wrap `Checkbox` components. Can be displayed in a
- * column or in a row. The `CheckboxGroup` component renders all the necessary
- * wrapping and associated text elements, but the checkbox input elements
- * _need_ to be child `Checkbox` components from the NYPL Design System.
- */
-export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default CheckboxGroup;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/types";
+export interface CheckboxGroupProps {
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Populates the initial value of the input */
+    defaultValue?: string[];
+    /** 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 error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' prop to the input when true. */
+    isDisabled?: boolean;
+    /** Set's the `Checkbox`s' wrapper to be full width. */
+    isFullWidth?: boolean;
+    /** A`dds the 'aria-invalid' attribute to the input and
+     * sets the error state when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox group label displayed in a `legend` element if `showlabel` is
+     * true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** Renders the checkbox buttons in a row or column (default). */
+    layout?: LayoutTypes;
+    /** The `name` prop indicates the form group for all the `Checkbox` children. */
+    name: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (value: string[]) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the group's legend onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+    /** The values to programmatically update the selected `Checkbox`es. */
+    value?: string[];
+}
+/**
+ * Wrapper component to wrap `Checkbox` components. Can be displayed in a
+ * column or in a row. The `CheckboxGroup` component renders all the necessary
+ * wrapping and associated text elements, but the checkbox input elements
+ * _need_ to be child `Checkbox` components from the NYPL Design System.
+ */
+export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default CheckboxGroup;

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

@@ -1,31 +1,31 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface ComponentWrapperProps {
-    /** The UI elements that will be wrapped by this component */
-    children: React.ReactNode;
-    /** A class name for the `div` parent element. */
-    className?: string;
-    /** Optional string to set the text for the component's description */
-    descriptionText?: string | JSX.Element;
-    /** Optional string to set the text for a `Heading` component */
-    headingText?: string;
-    /** Optional string to set the text for a `HelperErrorText` component */
-    helperText?: HelperErrorTextType;
-    /** Styles that target the helper text. */
-    helperTextStyles?: {
-        [key: string]: any;
-    };
-    /** 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;
-    /** Sets invalid text in the error state. */
-    isInvalid?: boolean;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-}
-export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ComponentWrapperProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default ComponentWrapper;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface ComponentWrapperProps {
+    /** The UI elements that will be wrapped by this component */
+    children: React.ReactNode;
+    /** A class name for the `div` parent element. */
+    className?: string;
+    /** Optional string to set the text for the component's description */
+    descriptionText?: string | JSX.Element;
+    /** Optional string to set the text for a `Heading` component */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component */
+    helperText?: HelperErrorTextType;
+    /** Styles that target the helper text. */
+    helperTextStyles?: {
+        [key: string]: any;
+    };
+    /** 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;
+    /** Sets invalid text in the error state. */
+    isInvalid?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+}
+export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ComponentWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ComponentWrapper;

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

@@ -1,81 +1,82 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { TextInputRefType } from "../TextInput/TextInput";
-export declare type DatePickerTypes = "full" | "month" | "year";
-export interface FullDateType {
-    /** Date object that gets returned for the onChange
-     * function only for date ranges. */
-    endDate?: Date;
-    /** Date object that gets returned for the onChange function. */
-    startDate: Date;
-}
-interface DateRangeRowProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
-    /** Whether to render a single date input or two for a range of two dates. */
-    isDateRange?: boolean;
-}
-interface DatePickerWrapperProps extends DateRangeRowProps {
-    /** Additional className. */
-    className?: string;
-    /** Adds the 'required' property to the input element(s). */
-    isRequired?: boolean;
-    /** Passed to the `TextInput` component to render a label associated with an input field. */
-    labelText: string;
-    /** Offers the ability to show the label onscreen or hide it. */
-    showLabel?: boolean;
-    /** Whether or not to display the "(Required)" text in the label text.
-     * True by default. */
-    showRequiredLabel?: boolean;
-}
-export interface DatePickerProps extends DatePickerWrapperProps {
-    /** The date format to display. Defaults to "yyyy-MM-dd".
-     * Must be in ISO-8601 format. */
-    dateFormat?: string;
-    /** DatePicker date types that can be rendered. */
-    dateType?: DatePickerTypes;
-    /** Populates the `HelperErrorText` component in this component. */
-    helperText?: HelperErrorTextType;
-    /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
-    helperTextFrom?: string;
-    /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
-    helperTextTo?: string;
-    /** The initial date value. This must be in the mm/dd/yyyy format. */
-    initialDate?: string;
-    /** The initialTo date value used for date ranges.
-     * This must be in the mm/dd/yyyy format. */
-    initialDateTo?: string;
-    /** Populates the `HelperErrorText` error state for both "From"
-     * and "To" input components. */
-    invalidText?: HelperErrorTextType;
-    /** Adds the 'disabled' property to the input element(s). */
-    isDisabled?: boolean;
-    /** Adds 'isInvalid' styling. */
-    isInvalid?: boolean;
-    /** Adds the 'required' property to the input element(s). */
-    isRequired?: boolean;
-    /** The maximum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format. */
-    maxDate?: string;
-    /** The minimum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format. */
-    minDate?: string;
-    /** Value name for the single input field or the "From" input field in a date range. */
-    nameFrom?: string;
-    /** Value name for the "To" input field */
-    nameTo?: string;
-    /** The action to perform on the `input`'s onChange function for both fields.
-     * This will return the data in an object with `startDate` and `endDate` keys.
-     */
-    onChange?: (data: FullDateType) => void;
-    /** An additional explicit React ref passed for a date range's "To"
-     * input field. Note that the "From" input takes the initial "ref" value. */
-    refTo?: React.Ref<TextInputRefType>;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-}
-/**
- * Returns a single date input field or two date input fields for a date range.
- */
-export declare const DatePicker: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>, {}>;
-export default DatePicker;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { TextInputRefType } from "../TextInput/TextInput";
+export declare const datePickerTypesArray: readonly ["full", "month", "year"];
+export type DatePickerTypes = typeof datePickerTypesArray[number];
+export interface FullDateType {
+    /** Date object that gets returned for the onChange
+     * function only for date ranges. */
+    endDate?: Date;
+    /** Date object that gets returned for the onChange function. */
+    startDate: Date;
+}
+interface DateRangeRowProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Whether to render a single date input or two for a range of two dates. */
+    isDateRange?: boolean;
+}
+interface DatePickerWrapperProps extends DateRangeRowProps {
+    /** Additional className. */
+    className?: string;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** Passed to the `TextInput` component to render a label associated with an input field. */
+    labelText: string;
+    /** Offers the ability to show the label onscreen or hide it. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
+export interface DatePickerProps extends DatePickerWrapperProps {
+    /** The date format to display. Defaults to "yyyy-MM-dd".
+     * Must be in ISO-8601 format. */
+    dateFormat?: string;
+    /** DatePicker date types that can be rendered. */
+    dateType?: DatePickerTypes;
+    /** Populates the `HelperErrorText` component in this component. */
+    helperText?: HelperErrorTextType;
+    /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
+    helperTextFrom?: string;
+    /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
+    helperTextTo?: string;
+    /** The initial date value. This must be in the mm/dd/yyyy format. */
+    initialDate?: string;
+    /** The initialTo date value used for date ranges.
+     * This must be in the mm/dd/yyyy format. */
+    initialDateTo?: string;
+    /** Populates the `HelperErrorText` error state for both "From"
+     * and "To" input components. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' property to the input element(s). */
+    isDisabled?: boolean;
+    /** Adds 'isInvalid' styling. */
+    isInvalid?: boolean;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** The maximum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    maxDate?: string;
+    /** The minimum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    minDate?: string;
+    /** Value name for the single input field or the "From" input field in a date range. */
+    nameFrom?: string;
+    /** Value name for the "To" input field */
+    nameTo?: string;
+    /** The action to perform on the `input`'s onChange function for both fields.
+     * This will return the data in an object with `startDate` and `endDate` keys.
+     */
+    onChange?: (data: FullDateType) => void;
+    /** An additional explicit React ref passed for a date range's "To"
+     * input field. Note that the "From" input takes the initial "ref" value. */
+    refTo?: React.Ref<TextInputRefType>;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+}
+/**
+ * Returns a single date input field or two date input fields for a date range.
+ */
+export declare const DatePicker: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>, {}>;
+export default DatePicker;

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

@@ -1,63 +1,64 @@
-import React from "react";
-declare type ViewType = "form" | "confirmation" | "error";
-interface FeedbackBoxProps {
-    /** Additional class name to add. */
-    className?: string;
-    /** Used to add additional information to the default confirmation message in
-     * the confirmation view. */
-    confirmationText?: string | JSX.Element;
-    /** Used to add description text above the form input fields in
-     * the initial/form view. */
-    descriptionText?: string | JSX.Element;
-    /** A data object containing key/value pairs that will be added to the form
-     * field submitted data. */
-    hiddenFields?: any;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Toggles the invalid state for the email field. */
-    isInvalidComment?: boolean;
-    /** Toggles the invalid state for the comment field. */
-    isInvalidEmail?: boolean;
-    /** Only used for internal purposes. */
-    isOpen?: boolean;
-    /** Used to add a notification above the description in the
-     * initial/form view.*/
-    notificationText?: string | JSX.Element;
-    /** Only used for internal purposes. */
-    onClose?: any;
-    /** Only used for internal purposes. */
-    onOpen?: any;
-    /** Callback function that will be invoked when the form is submitted.
-     * The returned data object contains key/value pairs including the
-     * values from the `hiddenFields` prop.
-     */
-    onSubmit: (values: {
-        [key: string]: string;
-    }) => any;
-    /** Toggles the category radio group field. */
-    showCategoryField?: boolean;
-    /** Toggles the email input field. When set to `true`, an additional
-     * confirmation message will be rendered. */
-    showEmailField?: boolean;
-    /** Used to populate the label on the open button and the `Drawer`'s
-     * header title. */
-    title: string;
-    /** Used to specify what screen should be displayed. */
-    view?: ViewType;
-}
-/**
- * The `FeedbackBox` component renders a fixed-positioned button on the bottom
- * right corner of a page that opens a Chakra `Drawer` popup component. Inside
- * of the popup, a form is rendered with fields that allows users to provide
- * feedback. The `FeedbackBox` component does *not* call any API with the
- * submitted data; that feature is the responsibility of the consuming
- * application.
- */
-export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeedbackBoxProps & React.RefAttributes<any>>, {}>;
-export declare function useFeedbackBox(): {
-    isOpen: boolean;
-    onClose: () => void;
-    onOpen: () => void;
-    FeedbackBox: import("@chakra-ui/react").ChakraComponent<(props: any) => JSX.Element, {}>;
-};
-export default FeedbackBox;
+import React from "react";
+export declare const feedbackBoxViewTypeArray: readonly ["form", "confirmation", "error"];
+export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
+interface FeedbackBoxProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Used to add additional information to the default confirmation message in
+     * the confirmation view. */
+    confirmationText?: string | JSX.Element;
+    /** Used to add description text above the form input fields in
+     * the initial/form view. */
+    descriptionText?: string | JSX.Element;
+    /** A data object containing key/value pairs that will be added to the form
+     * field submitted data. */
+    hiddenFields?: any;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the comment field. */
+    isInvalidComment?: boolean;
+    /** Toggles the invalid state for the email field. */
+    isInvalidEmail?: boolean;
+    /** Only used for internal purposes. */
+    isOpen?: boolean;
+    /** Used to add a notification above the description in the
+     * initial/form view.*/
+    notificationText?: string | JSX.Element;
+    /** Only used for internal purposes. */
+    onClose?: any;
+    /** Only used for internal purposes. */
+    onOpen?: any;
+    /** Callback function that will be invoked when the form is submitted.
+     * The returned data object contains key/value pairs including the
+     * values from the `hiddenFields` prop.
+     */
+    onSubmit: (values: {
+        [key: string]: string;
+    }) => any;
+    /** Toggles the category radio group field. */
+    showCategoryField?: boolean;
+    /** Toggles the email input field. When set to `true`, an additional
+     * confirmation message will be rendered. */
+    showEmailField?: boolean;
+    /** Used to populate the label on the open button and the `Drawer`'s
+     * header title. */
+    title: string;
+    /** Used to specify what screen should be displayed. */
+    view?: FeedbackBoxViewType;
+}
+/**
+ * The `FeedbackBox` component renders a fixed-positioned button on the bottom
+ * right corner of a page that opens a Chakra `Drawer` popup component. Inside
+ * of the popup, a form is rendered with fields that allows users to provide
+ * feedback. The `FeedbackBox` component does *not* call any API with the
+ * submitted data; that feature is the responsibility of the consuming
+ * application.
+ */
+export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeedbackBoxProps & React.RefAttributes<any>>, {}>;
+export declare function useFeedbackBox(): {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    FeedbackBox: import("@chakra-ui/react").ChakraComponent<(props: any) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+};
+export default FeedbackBox;

package/dist/{components → src/components}/FeedbackBox/useFeedbackBoxReducer.d.ts

@@ -1,19 +1,19 @@
-interface FeedbackBoxState {
-    category?: string;
-    comment: string;
-    email?: string;
-}
-/**
- * DS internal helper reducer hook to manage internal state for the FeedbackBox
- * component. Note: this custom hook is not tested directly as it's an
- * implementation detail of the FeedbackBox component, following the guidance
- * of RTL: https://testing-library.com/docs/example-react-hooks-useReducer
- */
-declare function useFeedbackBoxReducer(): {
-    state: FeedbackBoxState;
-    setCategory: (category: string) => void;
-    setComment: (comment: string) => void;
-    setEmail: (email: string) => void;
-    clearValues: () => void;
-};
-export default useFeedbackBoxReducer;
+interface FeedbackBoxState {
+    category?: string;
+    comment: string;
+    email?: string;
+}
+/**
+ * DS internal helper reducer hook to manage internal state for the FeedbackBox
+ * component. Note: this custom hook is not tested directly as it's an
+ * implementation detail of the FeedbackBox component, following the guidance
+ * of RTL: https://testing-library.com/docs/example-react-hooks-useReducer
+ */
+declare function useFeedbackBoxReducer(): {
+    state: FeedbackBoxState;
+    setCategory: (category: string) => void;
+    setComment: (comment: string) => void;
+    setEmail: (email: string) => void;
+    clearValues: () => void;
+};
+export default useFeedbackBoxReducer;

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

@@ -1,24 +1,24 @@
-import React from "react";
-interface FieldsetProps {
-    /** Additional class name to add. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
-    /** Flag to show or hide the text in the `legend` element. False by default. */
-    isLegendHidden?: boolean;
-    /** Flag to render "Required" in the `legend`. True by default. */
-    isRequired?: boolean;
-    /** Text to display in the `legend` element. */
-    legendText?: string;
-    /** Whether or not to display the "(Required)" text in the `legend` text.
-     * True by default. */
-    showRequiredLabel?: boolean;
-}
-/**
- * A wrapper component that renders a `fieldset` element along with a `legend`
- * element as its first child. Commonly used to wrap form components.
- */
-export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FieldsetProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement & HTMLFieldSetElement>>, {}>;
-export default Fieldset;
+import React from "react";
+interface FieldsetProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Flag to show or hide the text in the `legend` element. False by default. */
+    isLegendHidden?: boolean;
+    /** Flag to render "Required" in the `legend`. True by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Whether or not to display the "(Required)" text in the `legend` text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FieldsetProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLFieldSetElement>>, {}>;
+export default Fieldset;