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

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

@@ -20,12 +20,12 @@ interface MultiSelectCommonProps {
     isBlockElement?: boolean;
     /** The items to be rendered in the Multiselect as checkbox options. */
     items: MultiSelectItem[];
-    /** The label of the MultiSelect. */
-    label: string;
+    /** The label text rendered within the MultiSelect. */
+    labelText: string;
     /** The action to perform for clear/reset button of MultiSelect. */
     onClear?: () => void;
-    /** The variant of the MultiSelect. */
-    variant: "listbox" | "dialog";
+    /** 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. */
@@ -34,13 +34,13 @@ interface MultiSelectCommonProps {
 declare type ListboxOnChange = (selectedItem: MultiSelectItem, id: string) => void;
 declare type DialogOnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
 declare type MultiSelectVariantsProps = {
-    variant: "listbox";
+    type: "listbox";
     onApply?: never;
     /** The action to perform for downshift's onSelectedItemChange function. */
     onChange: ListboxOnChange;
     onMixedStateChange?: never;
 } | {
-    variant: "dialog";
+    type: "dialog";
     /** The action to perform for save/apply button of multiselect. */
     onApply: () => void;
     /** The action to perform on the checkbox's onChange function.  */
@@ -57,7 +57,7 @@ export declare type MultiSelectProps = MultiSelectCommonProps & MultiSelectVaria
  * 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";
+    type: "listbox";
     onApply?: never;
     /** The action to perform for downshift's onSelectedItemChange function. */
     onChange: ListboxOnChange;
@@ -65,7 +65,7 @@ export declare const MultiSelect: import("@chakra-ui/react").ChakraComponent<Rea
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>) | (MultiSelectCommonProps & {
-    variant: "dialog";
+    type: "dialog";
     /** The action to perform for save/apply button of multiselect. */
     onApply: () => void;
     /** The action to perform on the checkbox's onChange function.  */

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

@@ -1,6 +1,6 @@
 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"> & {
+export declare const MultiSelectDialog: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "labelText" | "onClear" | "type" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 } & {
     children?: React.ReactNode;

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

@@ -1,7 +1,7 @@
 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"> & {
+/** 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<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "labelText" | "onClear" | "type" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
     onChange: (selectedItem: MultiSelectItem, id: string) => void;
 } & {
     children?: React.ReactNode;

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

@@ -4,8 +4,8 @@ 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 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). */

package/dist/design-system-react-components.cjs.development.js

@@ -3044,8 +3044,7 @@ var CheckboxGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     "data-testid": "checkbox-group",
     direction: [layout],
     spacing: spacingProp,
-    ref: ref,
-    "aria-label": !showLabel ? labelText : undefined
+    ref: ref
   }, newChildren)), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
     id: id + "-helperErrorText",
     isInvalid: isInvalid,
@@ -9552,7 +9551,6 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
   });
   // Props for the `ChakraRadioGroup` component.
   var radioGroupProps = {
-    "aria-label": !showLabel ? labelText : undefined,
     name: name,
     onChange: function onChange(selected) {
       setValue(selected);
@@ -10050,7 +10048,7 @@ function useFeedbackBox() {
   };
 }
 
-var _excluded$1f = ["id", "isOpen", "multiSelectId", "multiSelectLabel", "onClear", "onKeyDown", "onMenuToggle", "selectedItems"];
+var _excluded$1f = ["id", "isOpen", "multiSelectId", "multiSelectLabelText", "onClear", "onKeyDown", "onMenuToggle", "selectedItems"];
 var _templateObject;
 var grow = /*#__PURE__*/react.keyframes(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  from {width: 22px; opacity: 0; }\n  to {width: 46px; opacity: 1;}\n"])));
 /**
@@ -10065,7 +10063,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref
   var id = props.id,
     isOpen = props.isOpen,
     multiSelectId = props.multiSelectId,
-    multiSelectLabel = props.multiSelectLabel,
+    multiSelectLabelText = props.multiSelectLabelText,
     onClear = props.onClear,
     onMenuToggle = props.onMenuToggle,
     selectedItems = props.selectedItems,
@@ -10078,7 +10076,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref
   if (((_selectedItems$multiS = selectedItems[multiSelectId]) == null ? void 0 : _selectedItems$multiS.items.length) > 0) {
     getSelectedItemsCount = "" + selectedItems[multiSelectId].items.length;
     var itemPlural = getSelectedItemsCount === "1" ? "" : "s";
-    selectedItemsAriaLabel = getSelectedItemsCount + " item" + itemPlural + " selected";
+    selectedItemsAriaLabel = "remove " + getSelectedItemsCount + " item" + itemPlural + " selected from " + multiSelectLabelText;
   }
   var styles = react.useMultiStyleConfig("MultiSelectMenuButton", {
     isOpen: isOpen,
@@ -10100,9 +10098,9 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref
     __css: styles.menuButton
   }, rest), React__default.createElement(react.Box, {
     as: "span",
-    title: multiSelectLabel,
+    title: multiSelectLabelText,
     __css: styles.buttonLabel
-  }, multiSelectLabel), React__default.createElement(Icon, {
+  }, multiSelectLabelText), React__default.createElement(Icon, {
     id: "ms-" + multiSelectId + "-icon",
     name: iconType,
     size: "small"
@@ -10123,18 +10121,19 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref
     id: "ms-" + multiSelectId + "-selected-items-count-icon",
     marginLeft: "xs",
     name: "close",
-    size: "xsmall"
+    size: "xsmall",
+    title: "Remove selected items"
   })));
 });
 
-var _excluded$1g = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onChange", "onClear", "selectedItems", "width"];
-/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `variant="listbox". It leverager downshift-js for accessiblity. */
+var _excluded$1g = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onChange", "onClear", "selectedItems", "width"];
+/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `type="listbox". It leverager downshift-js for accessiblity. */
 var MultiSelectListbox = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     isBlockElement = props.isBlockElement,
     isDefaultOpen = props.isDefaultOpen,
     items = props.items,
-    label = props.label,
+    labelText = props.labelText,
     onChange = props.onChange,
     onClear = props.onClear,
     selectedItems = props.selectedItems,
@@ -10177,18 +10176,18 @@ var MultiSelectListbox = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRe
     isBlockElement: isBlockElement,
     isOpen: isOpen
   });
-  // If a item passed to the listbox variant has children,
+  // If a item passed to the listbox type has children,
   if (items.some(function (item) {
     return item.children;
   })) {
-    console.warn("NYPL Reservoir MultiSelect: Only the variant 'dialog' can render nested select items.");
+    console.warn("NYPL Reservoir MultiSelect: Only the type 'dialog' can render nested select items.");
   }
   return React__default.createElement(react.Box, Object.assign({
     id: id,
     __css: styles
   }, rest), React__default.createElement(MultiSelectMenuButton$1, Object.assign({
     multiSelectId: id,
-    multiSelectLabel: label,
+    multiSelectLabelText: labelText,
     isOpen: isOpen,
     selectedItems: selectedItems,
     onClear: onClear,
@@ -10244,13 +10243,13 @@ var MultiSelectListbox = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRe
   }
 });
 
-var _excluded$1h = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "width"];
+var _excluded$1h = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "width"];
 var MultiSelectDialog = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     isBlockElement = props.isBlockElement,
     isDefaultOpen = props.isDefaultOpen,
     items = props.items,
-    label = props.label,
+    labelText = props.labelText,
     onApply = props.onApply,
     onChange = props.onChange,
     onClear = props.onClear,
@@ -10337,7 +10336,7 @@ var MultiSelectDialog = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef
   }, React__default.createElement(MultiSelectMenuButton$1, {
     id: "ms-" + id + "-menu-button",
     multiSelectId: id,
-    multiSelectLabel: label,
+    multiSelectLabelText: labelText,
     isOpen: isOpen,
     selectedItems: selectedItems,
     onMenuToggle: function onMenuToggle() {
@@ -10418,7 +10417,7 @@ var MultiSelectDialog = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef
   }
 });
 
-var _excluded$1i = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "variant", "width"];
+var _excluded$1i = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "type", "width"];
 /**
  * The `MultiSelect` component is a form input element that presents a list
  * of `Checkbox` components from which a user can make one or multiple
@@ -10433,13 +10432,13 @@ var MultiSelect$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     _props$isDefaultOpen = props.isDefaultOpen,
     isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen,
     items = props.items,
-    label = props.label,
+    labelText = props.labelText,
     onApply = props.onApply,
     onChange = props.onChange,
     onClear = props.onClear,
     onMixedStateChange = props.onMixedStateChange,
     selectedItems = props.selectedItems,
-    variant = props.variant,
+    type = props.type,
     _props$width = props.width,
     width = _props$width === void 0 ? "default" : _props$width,
     rest = _objectWithoutPropertiesLoose(props, _excluded$1i);
@@ -10448,20 +10447,20 @@ var MultiSelect$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     isBlockElement: isBlockElement,
     isDefaultOpen: isDefaultOpen,
     items: items,
-    label: label,
+    labelText: labelText,
     onClear: onClear,
     selectedItems: selectedItems,
-    variant: variant,
+    type: type,
     width: width
   };
-  if (variant === "listbox") {
+  if (type === "listbox") {
     var listboxOnChange = onChange;
     return React__default.createElement(MultiSelectListbox, Object.assign({}, commonProps, {
       ref: ref,
       onChange: listboxOnChange
     }, rest));
   }
-  if (variant === "dialog") {
+  if (type === "dialog") {
     var dialogOnChange = onChange;
     return React__default.createElement(MultiSelectDialog, Object.assign({}, commonProps, {
       onChange: dialogOnChange,
@@ -10535,7 +10534,6 @@ var MultiSelectGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
     isLegendHidden: !showLabel,
     __css: styles
   }, rest), React__default.createElement(react.Stack, {
-    "aria-label": !showLabel ? labelText : undefined,
     className: className,
     columnGap: "xs",
     "data-testid": "multi-select-group",