@nypl/design-system-react-components 3.0.0-react-chakra-rc3 → 3.0.0-react-chakra-rc4

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

@@ -21,7 +21,7 @@ export interface MultiSelectProps {
     /** The number of items that will be visible in the list when the component first loads. */
     defaultItemsVisible?: number;
     /** The action to perform for clear/reset button of MultiSelect. */
-    onClear?: () => void;
+    onClearAll?: () => void;
     /** The action to perform on the checkbox's onChange function. */
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** The action to perform for a mixed state checkbox (parent checkbox). */

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

@@ -15,7 +15,7 @@ export interface MultiSelectItemsCountButtonProps {
     /** The callback function for the menu toggle. */
     onMenuToggle?: () => void;
     /** The action to perform for clear/reset button of MultiSelect. */
-    onClear?: () => void;
+    onClearAll?: () => void;
     /** The action to perform for key down event. */
     onKeyDown?: () => void;
     /** Ref to the Accordion Button element. */

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

@@ -5,6 +5,8 @@ import { TagSetFilterProps } from "./TagSetFilter";
 export interface BaseTagSetProps {
     /** Additional class for the component. */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
 export type TagSetProps = BaseTagSetProps & TagSetTypeProps;

package/dist/src/components/TagSet/TagSetExplore.d.ts

@@ -3,16 +3,20 @@ import { IconNames } from "../Icons/Icon";
 export interface TagSetExploreDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
+    /** The ID of the tag. */
+    id?: string;
     /** The content to display; should be a link-type component. */
     label: JSX.Element;
 }
 export interface TagSetExploreProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Whether the tags should be removable. This prop is not used in the "explore" variant. */
+    /** Whether the tags should be removable. This prop is not used in the
+     * "explore" variant. */
     isDismissible?: never;
+    /** The function to perform when the Clear All button is clicked. This prop
+     * is not used in the "explore" variant. */
+    onClear?: never;
     /** The function to perform when a tag is clicked when `isDismissible` is
-     * true.  This prop is not used in the "explore" variant.*/
+     * true.  This prop is not used in the "explore" variant. */
     onClick?: never;
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -1,10 +1,14 @@
-import React from "react";
+/// <reference types="react" />
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
+    /** The ID of the tag. */
+    id: string;
     /** The string label to display. */
     label: string;
+    /** Any other properties the consuming app may need for app logic filtering. */
+    [key: string]: string;
 }
 export interface TagSetFilterProps {
     /** ID that other components can cross reference for accessibility purposes. */
@@ -12,7 +16,7 @@ export interface TagSetFilterProps {
     /** Whether the tags should be removable. */
     isDismissible?: boolean;
     /** The function to perform when a tag is clicked when `isDismissible` is true. */
-    onClick?: (tagLabel: string) => void;
+    onClick?: (tagSet: TagSetFilterDataProps) => void;
     /** The array of data to display as tags. */
     tagSetData: TagSetFilterDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */

package/dist/src/theme/components/breadcrumb.d.ts

@@ -29,6 +29,16 @@ declare const Breadcrumb: {
                 color: string;
                 textDecoration: string;
             };
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: any;
+                zIndex: string;
+                _dark: {
+                    outlineColor: any;
+                };
+            };
         };
         "li:last-child": {
             fontWeight: {
@@ -102,6 +112,16 @@ declare const Breadcrumb: {
                         color: string;
                     };
                 };
+                _focus: {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: any;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: any;
+                    };
+                };
             };
             "li:last-child": {
                 ".chakra-breadcrumb__link": {

package/dist/src/theme/components/global.d.ts

@@ -1,6 +1,16 @@
 /** Export "mixin" styles. */
 export { screenreaderOnly, wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
+declare const customFocusColor: (focusColor: any, focusColorDark: any) => {
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: any;
+    zIndex: string;
+    _dark: {
+        outlineColor: any;
+    };
+};
 declare const activeFocus: (darkMode?: boolean) => {
     boxShadow: string;
     outline: string;
@@ -139,4 +149,4 @@ declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

package/dist/src/theme/components/multiSelectItemsCountButton.d.ts

@@ -18,6 +18,7 @@ declare const MultiSelectItemsCountButton: {
         };
         width: string;
         zIndex: number;
+        py: string;
         _hover: {
             borderColor: string;
         };

package/dist/src/theme/components/notification.d.ts

@@ -47,6 +47,18 @@ declare const Notification: {
             _dark: {
                 color: string;
             };
+            _focus: {
+                ":not([disabled])": {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: any;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: any;
+                    };
+                };
+            };
             _hover: {
                 bg: string;
             };

package/dist/src/theme/components/statusBadge.d.ts

@@ -1,5 +1,6 @@
 declare const StatusBadge: {
     baseStyle?: {
+        alignItems: string;
         bgColor: string;
         borderLeft: string;
         borderColor: string;
@@ -11,7 +12,6 @@ declare const StatusBadge: {
         py: string;
         paddingInlineEnd: string;
         paddingInlineStart: string;
-        textAlign: string;
         whiteSpace: string;
         width: string;
         _dark: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.0.0-react-chakra-rc3",
+  "version": "3.0.0-react-chakra-rc4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",