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

package/dist/hooks/__tests__/useFilterBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useMultiSelect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useFilterBar.d.ts

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

package/dist/hooks/useMultiSelect.d.ts

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

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as DatePicker, DatePickerTypes, FullDateType, } from "./compone
 export { default as DSProvider } from "./theme/provider";
 export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
+export { default as FilterBar } from "./components/FilterBar/FilterBar";
 export { default as Footer } from "./components/Footer/Footer";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { default as Header } from "./components/Header/Header";
@@ -29,6 +30,8 @@ export { default as Link, LinkTypes } from "./components/Link/Link";
 export { default as List, ListTypes } from "./components/List/List";
 export { default as Logo, LogoNames, LogoSizes } from "./components/Logo/Logo";
 export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export { default as MultiSelect, MultiSelectProps, MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
+export { default as MultiSelectGroup, MultiSelectGroupProps, } from "./components/MultiSelectGroup/MultiSelectGroup";
 export { default as Notification, NotificationTypes, } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicator";
@@ -52,6 +55,8 @@ export { default as Text, TextSizes } from "./components/Text/Text";
 export { default as TextInput, TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
 export { default as Toggle, ToggleSizes } from "./components/Toggle/Toggle";
 export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
+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/dist/theme/components/feedbackBox.d.ts

@@ -2,7 +2,12 @@ declare const FeedbackBox: {
     parts: string[];
     baseStyle: {
         closeButton: {
+            /** This is overriding the default min-height value in order to keep the
+             * button spacing symmetrical. */
+            minHeight: string;
+            right: string;
             p: string;
+            position: string;
             span: {
                 clip: string;
                 height: {
@@ -20,6 +25,7 @@ declare const FeedbackBox: {
                 };
                 wordWrap: string;
             };
+            top: string;
         };
         drawerBody: {
             paddingTop: string;

package/dist/theme/components/filterBar.d.ts

@@ -0,0 +1,30 @@
+export declare const filterBarWidth: {
+    default: {
+        width: {
+            base: string;
+            md: string;
+        };
+    };
+    full: {
+        width: string;
+    };
+};
+declare const FilterBar: {
+    parts: string[];
+    baseStyle: ({ width }: {
+        width: any;
+    }) => {
+        width: string;
+        modalHeader: {
+            bg: string;
+        };
+        modalFooter: {
+            bg: string;
+        };
+        modalCloseButton: {
+            mt: string;
+        };
+        globalButtonGroupWrapper: any;
+    };
+};
+export default FilterBar;

package/dist/theme/components/link.d.ts

@@ -6,12 +6,34 @@ export declare const baseLinkStyles: {
     };
 };
 declare const Link: {
+    parts: string[];
     baseStyle: {
+        /** This is needed for custom anchor elements or link components
+         * that are passed as children to the `Link` component. */
         a: {
             _hover: {
                 color: string;
             };
         };
+        /** The element will handle descriptive text added to aid
+         * screen readers. */
+        srOnly: {
+            clip: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            overflow: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            wordWrap: string;
+        };
         color: string;
         textDecoration: string;
         _hover: {

package/dist/theme/components/multiSelect.d.ts

@@ -0,0 +1,29 @@
+export declare const multiSelectWidths: {
+    default: {
+        width: {
+            base: string;
+            md: string;
+        };
+    };
+    fitContent: {
+        width: {
+            base: string;
+            md: string;
+        };
+        minWidth: {
+            md: string;
+        };
+    };
+    full: {
+        width: string;
+    };
+};
+declare const MultiSelect: {
+    parts: string[];
+    baseStyle: ({ isBlockElement, isOpen, width }: {
+        isBlockElement: any;
+        isOpen: any;
+        width?: string;
+    }) => any;
+};
+export default MultiSelect;

package/dist/theme/components/multiSelectMenuButton.d.ts

@@ -0,0 +1,72 @@
+declare const MultiSelectMenuButton: {
+    parts: string[];
+    baseStyle: ({ hasSelectedItems, isOpen }: {
+        hasSelectedItems?: boolean;
+        isOpen?: boolean;
+    }) => {
+        buttonLabel: {
+            justifyContent: string;
+            overflow: string;
+            marginLeft: string;
+            marginRight: string;
+            textAlign: string;
+            textOverflow: string;
+            whiteSpace: string;
+            transition: string;
+        };
+        menuButton: {
+            alignItems: string;
+            backgroundColor: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            borderColor: string;
+            borderRadius: string;
+            borderWidth: string;
+            fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
+            px: string;
+            py: string;
+            display: string;
+            justifyContent: string;
+            width: string;
+            _hover: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            svg: {
+                marginTop: string;
+            };
+        };
+        selectedItemsCountButton: {
+            alignItems: string;
+            backgroundColor: string;
+            border: string;
+            borderRadius: string;
+            borderColor: string;
+            display: string;
+            flexShrink: number;
+            fontSize: string;
+            justifyContent: string;
+            left: string;
+            marginRight: string;
+            position: string;
+            top: {
+                base: string;
+                md: string;
+            };
+            width: string;
+            _hover: {
+                borderColor: string;
+            };
+            svg: {
+                marginLeft: string;
+                marginRight: string;
+                marginTop: string;
+            };
+        };
+    };
+};
+export default MultiSelectMenuButton;

package/dist/theme/components/select.d.ts

@@ -4,9 +4,6 @@ interface SelectBaseStyle {
 declare const Select: {
     parts: string[];
     baseStyle: ({ labelPosition }: SelectBaseStyle) => {
-        ".chakra-select__icon-wrapper": {
-            zIndex: string;
-        };
         inline: {
             display: {
                 md: string;
@@ -52,6 +49,9 @@ declare const Select: {
                 opacity: string;
             };
             _focus: {
+                "+ .chakra-select__icon-wrapper": {
+                    zIndex: string;
+                };
                 borderColor: string;
                 boxShadow: string;
                 outline: string;

package/dist/utils/utils.d.ts

@@ -28,4 +28,10 @@ interface GetAriaAttrsProps {
  * `aria-describedby` attributes, based on the label and footnote values.
  */
 export declare const getAriaAttrs: ({ footnote, id, labelText, name, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
+/** Convert a hex color value to an rgb or rgba value */
+export declare const hexToRGB: (hex: string, alpha: number) => string;
+/** Calculate color luminance */
+export declare const colorLuminance: (r: any, g: any, b: any) => number;
+/** Calculate color contrast ratio */
+export declare const contrastRatio: (hex1: string, hex2: string) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.3.0",
+  "version": "1.4.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",