@nypl/design-system-react-components 1.4.0-rc2 → 1.4.0-rc3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/MultiSelect/MultiSelect.d.ts +8 -8
- package/dist/components/MultiSelect/MultiSelectDialog.d.ts +1 -1
- package/dist/components/MultiSelect/MultiSelectListbox.d.ts +2 -2
- package/dist/components/MultiSelect/MultiSelectMenuButton.d.ts +2 -2
- package/dist/design-system-react-components.cjs.development.js +21 -21
- package/dist/design-system-react-components.cjs.development.js.map +1 -1
- package/dist/design-system-react-components.cjs.production.min.js +1 -1
- package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
- package/dist/design-system-react-components.esm.js +21 -21
- package/dist/design-system-react-components.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -10042,7 +10042,7 @@ function useFeedbackBox() {
|
|
|
10042
10042
|
};
|
|
10043
10043
|
}
|
|
10044
10044
|
|
|
10045
|
-
var _excluded$1f = ["id", "isOpen", "multiSelectId", "
|
|
10045
|
+
var _excluded$1f = ["id", "isOpen", "multiSelectId", "multiSelectLabelText", "onClear", "onKeyDown", "onMenuToggle", "selectedItems"];
|
|
10046
10046
|
var _templateObject;
|
|
10047
10047
|
var grow = /*#__PURE__*/keyframes$1(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n from {width: 22px; opacity: 0; }\n to {width: 46px; opacity: 1;}\n"])));
|
|
10048
10048
|
/**
|
|
@@ -10057,7 +10057,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
10057
10057
|
var id = props.id,
|
|
10058
10058
|
isOpen = props.isOpen,
|
|
10059
10059
|
multiSelectId = props.multiSelectId,
|
|
10060
|
-
|
|
10060
|
+
multiSelectLabelText = props.multiSelectLabelText,
|
|
10061
10061
|
onClear = props.onClear,
|
|
10062
10062
|
onMenuToggle = props.onMenuToggle,
|
|
10063
10063
|
selectedItems = props.selectedItems,
|
|
@@ -10070,7 +10070,7 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
10070
10070
|
if (((_selectedItems$multiS = selectedItems[multiSelectId]) == null ? void 0 : _selectedItems$multiS.items.length) > 0) {
|
|
10071
10071
|
getSelectedItemsCount = "" + selectedItems[multiSelectId].items.length;
|
|
10072
10072
|
var itemPlural = getSelectedItemsCount === "1" ? "" : "s";
|
|
10073
|
-
selectedItemsAriaLabel = "remove " + getSelectedItemsCount + " item" + itemPlural + " selected from " +
|
|
10073
|
+
selectedItemsAriaLabel = "remove " + getSelectedItemsCount + " item" + itemPlural + " selected from " + multiSelectLabelText;
|
|
10074
10074
|
}
|
|
10075
10075
|
var styles = useMultiStyleConfig("MultiSelectMenuButton", {
|
|
10076
10076
|
isOpen: isOpen,
|
|
@@ -10092,9 +10092,9 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
10092
10092
|
__css: styles.menuButton
|
|
10093
10093
|
}, rest), React__default.createElement(Box, {
|
|
10094
10094
|
as: "span",
|
|
10095
|
-
title:
|
|
10095
|
+
title: multiSelectLabelText,
|
|
10096
10096
|
__css: styles.buttonLabel
|
|
10097
|
-
},
|
|
10097
|
+
}, multiSelectLabelText), React__default.createElement(Icon, {
|
|
10098
10098
|
id: "ms-" + multiSelectId + "-icon",
|
|
10099
10099
|
name: iconType,
|
|
10100
10100
|
size: "small"
|
|
@@ -10120,14 +10120,14 @@ var MultiSelectMenuButton$1 = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
10120
10120
|
})));
|
|
10121
10121
|
});
|
|
10122
10122
|
|
|
10123
|
-
var _excluded$1g = ["id", "isBlockElement", "isDefaultOpen", "items", "
|
|
10124
|
-
/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `
|
|
10123
|
+
var _excluded$1g = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onChange", "onClear", "selectedItems", "width"];
|
|
10124
|
+
/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `type="listbox". It leverager downshift-js for accessiblity. */
|
|
10125
10125
|
var MultiSelectListbox = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
10126
10126
|
var id = props.id,
|
|
10127
10127
|
isBlockElement = props.isBlockElement,
|
|
10128
10128
|
isDefaultOpen = props.isDefaultOpen,
|
|
10129
10129
|
items = props.items,
|
|
10130
|
-
|
|
10130
|
+
labelText = props.labelText,
|
|
10131
10131
|
onChange = props.onChange,
|
|
10132
10132
|
onClear = props.onClear,
|
|
10133
10133
|
selectedItems = props.selectedItems,
|
|
@@ -10170,18 +10170,18 @@ var MultiSelectListbox = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (
|
|
|
10170
10170
|
isBlockElement: isBlockElement,
|
|
10171
10171
|
isOpen: isOpen
|
|
10172
10172
|
});
|
|
10173
|
-
// If a item passed to the listbox
|
|
10173
|
+
// If a item passed to the listbox type has children,
|
|
10174
10174
|
if (items.some(function (item) {
|
|
10175
10175
|
return item.children;
|
|
10176
10176
|
})) {
|
|
10177
|
-
console.warn("NYPL Reservoir MultiSelect: Only the
|
|
10177
|
+
console.warn("NYPL Reservoir MultiSelect: Only the type 'dialog' can render nested select items.");
|
|
10178
10178
|
}
|
|
10179
10179
|
return React__default.createElement(Box, Object.assign({
|
|
10180
10180
|
id: id,
|
|
10181
10181
|
__css: styles
|
|
10182
10182
|
}, rest), React__default.createElement(MultiSelectMenuButton$1, Object.assign({
|
|
10183
10183
|
multiSelectId: id,
|
|
10184
|
-
|
|
10184
|
+
multiSelectLabelText: labelText,
|
|
10185
10185
|
isOpen: isOpen,
|
|
10186
10186
|
selectedItems: selectedItems,
|
|
10187
10187
|
onClear: onClear,
|
|
@@ -10237,13 +10237,13 @@ var MultiSelectListbox = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (
|
|
|
10237
10237
|
}
|
|
10238
10238
|
});
|
|
10239
10239
|
|
|
10240
|
-
var _excluded$1h = ["id", "isBlockElement", "isDefaultOpen", "items", "
|
|
10240
|
+
var _excluded$1h = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "width"];
|
|
10241
10241
|
var MultiSelectDialog = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
10242
10242
|
var id = props.id,
|
|
10243
10243
|
isBlockElement = props.isBlockElement,
|
|
10244
10244
|
isDefaultOpen = props.isDefaultOpen,
|
|
10245
10245
|
items = props.items,
|
|
10246
|
-
|
|
10246
|
+
labelText = props.labelText,
|
|
10247
10247
|
onApply = props.onApply,
|
|
10248
10248
|
onChange = props.onChange,
|
|
10249
10249
|
onClear = props.onClear,
|
|
@@ -10330,7 +10330,7 @@ var MultiSelectDialog = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (p
|
|
|
10330
10330
|
}, React__default.createElement(MultiSelectMenuButton$1, {
|
|
10331
10331
|
id: "ms-" + id + "-menu-button",
|
|
10332
10332
|
multiSelectId: id,
|
|
10333
|
-
|
|
10333
|
+
multiSelectLabelText: labelText,
|
|
10334
10334
|
isOpen: isOpen,
|
|
10335
10335
|
selectedItems: selectedItems,
|
|
10336
10336
|
onMenuToggle: function onMenuToggle() {
|
|
@@ -10411,7 +10411,7 @@ var MultiSelectDialog = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (p
|
|
|
10411
10411
|
}
|
|
10412
10412
|
});
|
|
10413
10413
|
|
|
10414
|
-
var _excluded$1i = ["id", "isBlockElement", "isDefaultOpen", "items", "
|
|
10414
|
+
var _excluded$1i = ["id", "isBlockElement", "isDefaultOpen", "items", "labelText", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "type", "width"];
|
|
10415
10415
|
/**
|
|
10416
10416
|
* The `MultiSelect` component is a form input element that presents a list
|
|
10417
10417
|
* of `Checkbox` components from which a user can make one or multiple
|
|
@@ -10426,13 +10426,13 @@ var MultiSelect$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
|
|
|
10426
10426
|
_props$isDefaultOpen = props.isDefaultOpen,
|
|
10427
10427
|
isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen,
|
|
10428
10428
|
items = props.items,
|
|
10429
|
-
|
|
10429
|
+
labelText = props.labelText,
|
|
10430
10430
|
onApply = props.onApply,
|
|
10431
10431
|
onChange = props.onChange,
|
|
10432
10432
|
onClear = props.onClear,
|
|
10433
10433
|
onMixedStateChange = props.onMixedStateChange,
|
|
10434
10434
|
selectedItems = props.selectedItems,
|
|
10435
|
-
|
|
10435
|
+
type = props.type,
|
|
10436
10436
|
_props$width = props.width,
|
|
10437
10437
|
width = _props$width === void 0 ? "default" : _props$width,
|
|
10438
10438
|
rest = _objectWithoutPropertiesLoose(props, _excluded$1i);
|
|
@@ -10441,20 +10441,20 @@ var MultiSelect$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
|
|
|
10441
10441
|
isBlockElement: isBlockElement,
|
|
10442
10442
|
isDefaultOpen: isDefaultOpen,
|
|
10443
10443
|
items: items,
|
|
10444
|
-
|
|
10444
|
+
labelText: labelText,
|
|
10445
10445
|
onClear: onClear,
|
|
10446
10446
|
selectedItems: selectedItems,
|
|
10447
|
-
|
|
10447
|
+
type: type,
|
|
10448
10448
|
width: width
|
|
10449
10449
|
};
|
|
10450
|
-
if (
|
|
10450
|
+
if (type === "listbox") {
|
|
10451
10451
|
var listboxOnChange = onChange;
|
|
10452
10452
|
return React__default.createElement(MultiSelectListbox, Object.assign({}, commonProps, {
|
|
10453
10453
|
ref: ref,
|
|
10454
10454
|
onChange: listboxOnChange
|
|
10455
10455
|
}, rest));
|
|
10456
10456
|
}
|
|
10457
|
-
if (
|
|
10457
|
+
if (type === "dialog") {
|
|
10458
10458
|
var dialogOnChange = onChange;
|
|
10459
10459
|
return React__default.createElement(MultiSelectDialog, Object.assign({}, commonProps, {
|
|
10460
10460
|
onChange: dialogOnChange,
|