@nypl/design-system-react-components 1.3.1 → 1.4.0-rc

package/dist/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { SelectedItems } from "../MultiSelect/MultiSelect";
+interface FilterBarCommonProps {
+    children: React.ReactNode;
+    /** The id of the MultiSelect. */
+    id?: string;
+    /** Determines on Mobile if filter modal overlay is open or closed */
+    isOpen: boolean;
+    /** Heading text of FilterBar */
+    headingText: string;
+    /** Renders the layout of the FilterBar child components in a row or column. */
+    layout?: LayoutTypes;
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** User for the global `Clear Filters` button. This button is always shown on mobile, optional on desktop */
+    onClear: () => void;
+    /** If passed, the global `Clear Filters` button will render on desktop and tablet */
+    showClearAll?: boolean;
+    /** Set width of `FilterBar` child components */
+    filterWidth?: string;
+}
+/** Types related to an optional global submit button `Apply Filters` */
+declare type SubmitAllProps = {
+    /** If passed the `Apply Filters` button will render on desktop and tablet */
+    showSubmitAll?: false;
+    /** Function for `Apply Filters` button, needs to be provided by the consuming app */
+    onSubmit?: never;
+}
+/** onSubmit is required only if showSubmitAll is passed */
+ | {
+    showSubmitAll: true;
+    onSubmit: () => void;
+};
+/** Types related to the Modal handling */
+declare type HandleModalProps = {
+    /** If onToggle is passed as prop, it will open and close the filter modal on mobile */
+    onToggle: () => void;
+    /** onOpen and onClose will not be used in this scenario */
+    onOpen?: never;
+    onClose?: never;
+} | {
+    /** If onToggle is omitted, onOpen and onClose should be provided instead */
+    onToggle?: undefined;
+    /** onOpen will open the filter modal on mobile */
+    onOpen: () => void;
+    /** onClose will close the filter modal on mobile */
+    onClose: () => void;
+};
+export declare type FilterBarProps = FilterBarCommonProps & SubmitAllProps & HandleModalProps;
+/**
+ * `FilterBar` is a wrapper component for filter components.
+ * The DS considers the following components as filter components:
+ * - `MultiSelectGroup`
+ *
+ * The wrapped components/ component groups can be displayed in a column or
+ * in a row layout. `FilterBar` can render additional `Clear All` and a `Apply Filters` buttons. The two
+ * _optional_ buttons are controlled by the `showClearAll`/ `onClear` or `showSubmitAll`/`onSubmit` props repectively.
+ */
+export declare const FilterBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<(FilterBarCommonProps & {
+    /** If passed the `Apply Filters` button will render on desktop and tablet */
+    showSubmitAll?: false;
+    /** Function for `Apply Filters` button, needs to be provided by the consuming app */
+    onSubmit?: never;
+} & {
+    /** If onToggle is passed as prop, it will open and close the filter modal on mobile */
+    onToggle: () => void;
+    /** onOpen and onClose will not be used in this scenario */
+    onOpen?: never;
+    onClose?: never;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>) | (FilterBarCommonProps & {
+    /** If passed the `Apply Filters` button will render on desktop and tablet */
+    showSubmitAll?: false;
+    /** Function for `Apply Filters` button, needs to be provided by the consuming app */
+    onSubmit?: never;
+} & {
+    /** If onToggle is omitted, onOpen and onClose should be provided instead */
+    onToggle?: undefined;
+    /** onOpen will open the filter modal on mobile */
+    onOpen: () => void;
+    /** onClose will close the filter modal on mobile */
+    onClose: () => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>) | (FilterBarCommonProps & {
+    showSubmitAll: true;
+    onSubmit: () => void;
+} & {
+    /** If onToggle is passed as prop, it will open and close the filter modal on mobile */
+    onToggle: () => void;
+    /** onOpen and onClose will not be used in this scenario */
+    onOpen?: never;
+    onClose?: never;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>) | (FilterBarCommonProps & {
+    showSubmitAll: true;
+    onSubmit: () => void;
+} & {
+    /** If onToggle is omitted, onOpen and onClose should be provided instead */
+    onToggle?: undefined;
+    /** onOpen will open the filter modal on mobile */
+    onOpen: () => void;
+    /** onClose will close the filter modal on mobile */
+    onClose: () => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>)>, {}>;
+export default FilterBar;

package/dist/components/FilterBar/FilterBar.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Story } from "@storybook/react/types-6-0";
+import { FilterBarProps } from "./FilterBar";
+export declare const FilterBarStory: Story<FilterBarProps>;
+export declare const FilterBarLayoutStory: () => JSX.Element;
+export declare const FilterBarRowContainerStory: () => JSX.Element;
+export declare const FilterBarColumnContainerStory: () => JSX.Element;

package/dist/components/HelperErrorText/HelperErrorText.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
-export declare type AriaLiveValues = "assertive" | "off" | "polite";
+export declare type AriaLiveValues = "assertive" | "off" | "polite" | undefined;
 export declare type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
-    /** Aria attribute. When true, assistive technologies will
-     * read the entire DOM element. When false, only changes (additionals or
-     * removals) will be read. True by default. */
+    /** Aria attribute. When true, assistive technologies will read the entire
+     * DOM element. When false, only changes (additionals or removals) will be
+     * read. True by default. */
     ariaAtomic?: boolean;
-    /** Aria attribute used in the invalid state to read error text by default.
+    /** Aria attribute used to handle live updates for the helper and error text.
      * This indicates the priority of the text and when it should be presented to
      * users using screen readers; "off" indicates that the content should not be
      * presented, "polite" that it will be announced at the next available time
      * slot, and "assertive" that it should be announced immediately. This is set
-     * to "off" by default and to "polite" by when `isInvalid` is true. */
+     * to "polite" by default. */
     ariaLive?: AriaLiveValues;
     /** Additional className to add. */
     className?: string;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+export interface MultiSelectItem {
+    id: string;
+    name: string;
+    children?: MultiSelectItem[];
+}
+export declare type MultiSelectWidths = "default" | "fitContent" | "full";
+export interface SelectedItems {
+    [name: string]: {
+        items: string[];
+    };
+}
+interface MultiSelectCommonProps {
+    /** The id of the MultiSelect. */
+    id: string;
+    /** Set the default open or closed state of the Multiselect. */
+    isDefaultOpen?: boolean;
+    /** Boolean value used to control how the MultiSelect component will render within the page and interact with other DOM elements.
+     * The default value is false. */
+    isBlockElement?: boolean;
+    /** The items to be rendered in the Multiselect as checkbox options. */
+    items: MultiSelectItem[];
+    /** The label of the MultiSelect. */
+    label: string;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    /** The variant of the MultiSelect. */
+    variant: "listbox" | "dialog";
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** Value used to set the width for the MultiSelect component. */
+    width?: MultiSelectWidths;
+}
+declare type ListboxOnChange = (selectedItem: MultiSelectItem, id: string) => void;
+declare type DialogOnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
+declare type MultiSelectVariantsProps = {
+    variant: "listbox";
+    onApply?: never;
+    /** The action to perform for downshift's onSelectedItemChange function. */
+    onChange: ListboxOnChange;
+    onMixedStateChange?: never;
+} | {
+    variant: "dialog";
+    /** The action to perform for save/apply button of multiselect. */
+    onApply: () => void;
+    /** The action to perform on the checkbox's onChange function.  */
+    onChange: DialogOnChange;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: DialogOnChange;
+};
+export declare type MultiSelectProps = MultiSelectCommonProps & MultiSelectVariantsProps;
+/**
+ * The `MultiSelect` component is a form input element that presents a list
+ * of `Checkbox` components from which a user can make one or multiple
+ * selections. Two variants of the MultiSelect component are offered, each with
+ * slightly different functionality and requirements.  Because of these
+ * differences, the two variants are broken out in separate stories below.
+ */
+export declare const MultiSelect: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<(MultiSelectCommonProps & {
+    variant: "listbox";
+    onApply?: never;
+    /** The action to perform for downshift's onSelectedItemChange function. */
+    onChange: ListboxOnChange;
+    onMixedStateChange?: never;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>) | (MultiSelectCommonProps & {
+    variant: "dialog";
+    /** The action to perform for save/apply button of multiselect. */
+    onApply: () => void;
+    /** The action to perform on the checkbox's onChange function.  */
+    onChange: DialogOnChange;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: DialogOnChange;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>)>, {}>;
+export default MultiSelect;

package/dist/components/MultiSelect/MultiSelect.stories.d.ts

@@ -0,0 +1,4 @@
+import { Story } from "@storybook/react/types-6-0";
+import { MultiSelectProps } from "./MultiSelect";
+export declare const MultiSelectListboxStory: Story<MultiSelectProps>;
+export declare const MultiSelectDialogStory: Story<MultiSelectProps>;

package/dist/components/MultiSelect/MultiSelectDialog.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { MultiSelectProps } from "./MultiSelect";
+export declare const MultiSelectDialog: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "label" | "onClear" | "variant" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default MultiSelectDialog;

package/dist/components/MultiSelect/MultiSelectListbox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MultiSelectItem, MultiSelectProps } from "./MultiSelect";
+/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `variant="listbox". It leverager downshift-js for accessiblity. */
+export declare const MultiSelectListbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "label" | "onClear" | "variant" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
+    onChange: (selectedItem: MultiSelectItem, id: string) => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>, {}>;
+export default MultiSelectListbox;

package/dist/components/MultiSelect/MultiSelectMenuButton.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { SelectedItems } from "./MultiSelect";
+export interface MultiSelectMenuButtonProps {
+    id: string;
+    /** The id of the MultiSelect using this button. */
+    multiSelectId: string;
+    /** The label of the MultiSelect using this button. */
+    multiSelectLabel: string;
+    /** The open status of the MultiSelect menu. */
+    isOpen: boolean;
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** The callback function for the menu toggle. */
+    onMenuToggle?: () => void;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    onKeyDown?: () => void;
+}
+/**
+ * The toggle button component used to open and close the `MultiSelect` menu.
+ * A second button is rendered above the main button that displays the current
+ * number of selected items. Clicking on the second button will clear all
+ * the selected items and the main button's close event will not be fired
+ * (as expected).
+ */
+declare const MultiSelectMenuButton: React.ForwardRefExoticComponent<MultiSelectMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default MultiSelectMenuButton;

package/dist/components/MultiSelectGroup/MultiSelectGroup.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
+export interface MultiSelectGroupProps {
+    children: React.ReactNode;
+    /** Additional className to use. */
+    className?: string;
+    id: string;
+    labelText: string;
+    /** Renders the layout of `MultiSelect` components in a row or column. */
+    layout?: LayoutTypes;
+    /** Width will be passed on each `MultiSelect` component. */
+    multiSelectWidth?: MultiSelectWidths;
+    /** Is set to `true` by default and determines if the `labelText` is visible on the site. */
+    showLabel?: boolean;
+}
+/**
+ * `MultiSelectGroup` is a wrapper component specific for `MultiSelect` components. The wrapped `MutliSelect` components can be displayed in a
+ * column or in a row. The `MultiSelectGroup` component renders all the necessary
+ * wrapping and associated text elements, but the child elements
+ * _need_ to be `MultiSelect` components from the NYPL Design System.
+ */
+export declare const MultiSelectGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<MultiSelectGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default MultiSelectGroup;

package/dist/components/MultiSelectGroup/MultiSelectGroup.stories.d.ts

@@ -0,0 +1,4 @@
+import { Story } from "@storybook/react/types-6-0";
+import { MultiSelectGroupProps } from "./MultiSelectGroup";
+export declare const MultiSelectGroupStory: Story<MultiSelectGroupProps>;
+export declare const MultiSelectGroupLayoutStory: Story<MultiSelectGroupProps>;

package/dist/components/Slider/Slider.d.ts

@@ -35,6 +35,8 @@ export interface SliderProps {
     name?: string;
     /** Callback function that gets the value(s) selected. */
     onChange?: (val: number | number[]) => void;
+    /** Callback function when the user is done selecting a new value. */
+    onChangeEnd?: (val: number | number[]) => void;
     /** Offers the ability to hide the `TextInput` boxes. */
     showBoxes?: boolean;
     /** Offers the ability to hide the helper/invalid text. */