@nypl/design-system-react-components 2.0.0-rc8 → 2.0.1

package/dist/src/index.d.ts

@@ -19,7 +19,6 @@ export { default as DSProvider } from "./theme/provider";
 export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
 export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
-export { default as FilterBar } from "./components/FilterBar/FilterBar";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { default as Heading } from "./components/Heading/Heading";
 export type { HeadingSizes, HeadingLevels } from "./components/Heading/Heading";
@@ -40,10 +39,6 @@ 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 { ModalTrigger, useModal } from "./components/Modal/Modal";
-export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
-export type { MultiSelectProps, MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
-export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
-export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiSelectGroup";
 export { default as Notification } from "./components/Notification/Notification";
 export type { NotificationTypes } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
@@ -79,8 +74,6 @@ 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 useFilterBar } from "./hooks/useFilterBar";
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.0.0-rc8",
+  "version": "2.0.1",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "lint": "eslint src --ext=ts,tsx --cache",
     "prepare": "npm run build && husky install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook:v1": "storybook build -c .storybook -o ./reservoir/v1",
+    "build-storybook:v2": "storybook build -c .storybook -o ./reservoir/v2",
     "prebuild:storybook": "npm run test:generate-output",
     "build-storybook": "storybook build"
   },

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

@@ -1,61 +0,0 @@
-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` */
-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 */
-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 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<React.PropsWithChildren<FilterBarProps> & React.RefAttributes<HTMLDivElement>>, {}>;
-export default FilterBar;

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

@@ -1,61 +0,0 @@
-import React from "react";
-export interface MultiSelectItem {
-    id: string;
-    name: string;
-    children?: MultiSelectItem[];
-}
-export declare const multiSelectWidthsArray: readonly ["default", "fitContent", "full"];
-export type MultiSelectWidths = typeof multiSelectWidthsArray[number];
-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 text rendered within the MultiSelect. */
-    labelText: string;
-    /** The action to perform for clear/reset button of MultiSelect. */
-    onClear?: () => void;
-    /** The type of MultiSelect that will be rendered. */
-    type: "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;
-}
-type ListboxOnChange = (selectedItem: MultiSelectItem, id: string) => void;
-type DialogOnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
-type MultiSelectVariantsProps = {
-    type: "listbox";
-    onApply?: never;
-    /** The action to perform for downshift's onSelectedItemChange function. */
-    onChange: ListboxOnChange;
-    onMixedStateChange?: never;
-} | {
-    type: "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 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<React.PropsWithChildren<MultiSelectProps> & React.RefAttributes<HTMLDivElement>>, {}>;
-export default MultiSelect;

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { MultiSelectProps } from "./MultiSelect";
-export declare const MultiSelectDialog: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Omit<MultiSelectProps, "onChange"> & {
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default MultiSelectDialog;

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

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

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

@@ -1,27 +0,0 @@
-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 text rendered within the MultiSelect using this button. */
-    multiSelectLabelText: 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/src/components/MultiSelectGroup/MultiSelectGroup.d.ts

@@ -1,28 +0,0 @@
-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;
-    /** The id of the MultiSelectGroup. */
-    id: string;
-    /** The label text rendered within the MultiSelectGroup. */
-    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/src/hooks/useFilterBar.d.ts

@@ -1,21 +0,0 @@
-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/src/hooks/useMultiSelect.d.ts

@@ -1,15 +0,0 @@
-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;
-};