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

package/dist/design-system-react-components.esm.js

@@ -3038,8 +3038,7 @@ var CheckboxGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
     "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,
@@ -9546,7 +9545,6 @@ var RadioGroup$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   });
   // Props for the `ChakraRadioGroup` component.
   var radioGroupProps = {
-    "aria-label": !showLabel ? labelText : undefined,
     name: name,
     onChange: function onChange(selected) {
       setValue(selected);
@@ -10044,7 +10042,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__*/keyframes$1(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  from {width: 22px; opacity: 0; }\n  to {width: 46px; opacity: 1;}\n"])));
 /**
@@ -10059,7 +10057,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/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,
@@ -10072,7 +10070,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/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 = useMultiStyleConfig("MultiSelectMenuButton", {
     isOpen: isOpen,
@@ -10094,9 +10092,9 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     __css: styles.menuButton
   }, rest), React__default.createElement(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"
@@ -10117,18 +10115,19 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/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__*/chakra( /*#__PURE__*/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,
@@ -10171,18 +10170,18 @@ var MultiSelectListbox = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (
     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(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,
@@ -10238,13 +10237,13 @@ var MultiSelectListbox = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (
   }
 });
 
-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__*/chakra( /*#__PURE__*/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,
@@ -10331,7 +10330,7 @@ var MultiSelectDialog = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (p
   }, React__default.createElement(MultiSelectMenuButton$1, {
     id: "ms-" + id + "-menu-button",
     multiSelectId: id,
-    multiSelectLabel: label,
+    multiSelectLabelText: labelText,
     isOpen: isOpen,
     selectedItems: selectedItems,
     onMenuToggle: function onMenuToggle() {
@@ -10412,7 +10411,7 @@ var MultiSelectDialog = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (p
   }
 });
 
-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
@@ -10427,13 +10426,13 @@ var MultiSelect$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
     _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);
@@ -10442,20 +10441,20 @@ var MultiSelect$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
     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,
@@ -10529,7 +10528,6 @@ var MultiSelectGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
     isLegendHidden: !showLabel,
     __css: styles
   }, rest), React__default.createElement(Stack, {
-    "aria-label": !showLabel ? labelText : undefined,
     className: className,
     columnGap: "xs",
     "data-testid": "multi-select-group",