@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
234 lines (210 loc) • 9.79 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _downshift = require("downshift");
var _DropList = require("./DropList.utils");
var _DropListDownshift = require("./DropList.downshift.common");
var _DropList2 = require("./DropList.css");
var _DropList3 = _interopRequireWildcard(require("./DropList.ListItem"));
var _DropList4 = require("./DropList.constants");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function noop() {}
function Select(_ref) {
var _ref$clearOnSelect = _ref.clearOnSelect,
clearOnSelect = _ref$clearOnSelect === void 0 ? false : _ref$clearOnSelect,
_ref$closeOnSelection = _ref.closeOnSelection,
closeOnSelection = _ref$closeOnSelection === void 0 ? true : _ref$closeOnSelection,
_ref$customEmptyList = _ref.customEmptyList,
customEmptyList = _ref$customEmptyList === void 0 ? null : _ref$customEmptyList,
customEmptyListItems = _ref.customEmptyListItems,
_ref$dataCy = _ref['data-cy'],
dataCy = _ref$dataCy === void 0 ? "DropList." + _DropList4.VARIANTS.SELECT : _ref$dataCy,
_ref$enableLeftRightN = _ref.enableLeftRightNavigation,
enableLeftRightNavigation = _ref$enableLeftRightN === void 0 ? false : _ref$enableLeftRightN,
_ref$handleSelectedIt = _ref.handleSelectedItemChange,
handleSelectedItemChange = _ref$handleSelectedIt === void 0 ? noop : _ref$handleSelectedIt,
_ref$isOpen = _ref.isOpen,
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
_ref$items = _ref.items,
items = _ref$items === void 0 ? [] : _ref$items,
menuAriaLabel = _ref.menuAriaLabel,
menuCSS = _ref.menuCSS,
menuWidth = _ref.menuWidth,
_ref$focusToggler = _ref.focusToggler,
focusToggler = _ref$focusToggler === void 0 ? noop : _ref$focusToggler,
_ref$onDropListLeave = _ref.onDropListLeave,
onDropListLeave = _ref$onDropListLeave === void 0 ? noop : _ref$onDropListLeave,
_ref$onMenuBlur = _ref.onMenuBlur,
onMenuBlur = _ref$onMenuBlur === void 0 ? noop : _ref$onMenuBlur,
_ref$onMenuFocus = _ref.onMenuFocus,
onMenuFocus = _ref$onMenuFocus === void 0 ? noop : _ref$onMenuFocus,
_ref$onListItemSelect = _ref.onListItemSelectEvent,
onListItemSelectEvent = _ref$onListItemSelect === void 0 ? noop : _ref$onListItemSelect,
_ref$renderCustomList = _ref.renderCustomListItem,
renderCustomListItem = _ref$renderCustomList === void 0 ? null : _ref$renderCustomList,
_ref$selectedItem = _ref.selectedItem,
selectedItem = _ref$selectedItem === void 0 ? null : _ref$selectedItem,
selectedItems = _ref.selectedItems,
_ref$toggleOpenedStat = _ref.toggleOpenedState,
toggleOpenedState = _ref$toggleOpenedStat === void 0 ? noop : _ref$toggleOpenedStat,
_ref$withMultipleSele = _ref.withMultipleSelection,
withMultipleSelection = _ref$withMultipleSele === void 0 ? false : _ref$withMultipleSele;
var isListEmpty = items.length === 0;
var allItems = isListEmpty && Array.isArray(customEmptyListItems) ? customEmptyListItems : items;
var _useSelect = (0, _downshift.useSelect)({
initialIsOpen: isOpen,
isOpen: isOpen,
items: allItems,
itemToString: _DropList.itemToString,
selectedItem: selectedItem,
getA11ySelectionMessage: function getA11ySelectionMessage(_ref2) {
var selectedItem = _ref2.selectedItem;
return (0, _DropListDownshift.getA11ySelectionMessageCommon)({
selectedItem: selectedItem,
selectedItems: selectedItems,
withMultipleSelection: withMultipleSelection
});
},
onIsOpenChange: function onIsOpenChange(changes) {
(0, _DropListDownshift.onIsOpenChangeCommon)({
closeOnSelection: closeOnSelection,
toggleOpenedState: toggleOpenedState,
type: _DropList4.VARIANTS.SELECT + "." + changes.type
});
},
onSelectedItemChange: handleSelectedItemChange,
onStateChange: function onStateChange(_ref3) {
var type = _ref3.type;
switch (type) {
case _downshift.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
case _downshift.useSelect.stateChangeTypes.MenuKeyDownEnter:
case _downshift.useSelect.stateChangeTypes.ItemClick:
clearOnSelect && handleSelectedItemChange({
selectedItem: null
});
closeOnSelection && focusToggler();
break;
default:
break;
}
},
stateReducer: function stateReducer(state, actionAndChanges) {
var changes = actionAndChanges.changes,
type = actionAndChanges.type;
return (0, _DropListDownshift.stateReducerCommon)({
changes: changes,
closeOnSelection: closeOnSelection,
items: allItems,
selectedItems: selectedItems,
state: state,
type: _DropList4.VARIANTS.SELECT + "." + type,
withMultipleSelection: withMultipleSelection
});
}
}),
highlightedIndex = _useSelect.highlightedIndex,
getItemProps = _useSelect.getItemProps,
getMenuProps = _useSelect.getMenuProps,
getToggleButtonProps = _useSelect.getToggleButtonProps,
setHighlightedIndex = _useSelect.setHighlightedIndex;
function renderListItem(item, index) {
var itemProps = (0, _extends2.default)({
highlightedIndex: highlightedIndex,
index: index,
isSelected: (0, _DropList.isItemSelected)({
item: item,
selectedItem: selectedItem,
selectedItems: selectedItems
}),
item: item,
key: (0, _DropList3.generateListItemKey)(item, index),
withMultipleSelection: withMultipleSelection,
renderCustomListItem: renderCustomListItem,
isDisabled: item.isDisabled
}, getItemProps({
item: item,
index: index,
onClick: function onClick(event) {
event.persist();
onListItemSelectEvent({
listItemNode: event.target,
event: event
});
if (item.isDisabled) {
event.nativeEvent.preventDownshiftDefault = true;
return;
}
}
}));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList3.default, (0, _extends2.default)({}, itemProps));
}
function handleMenuKeyDown(event) {
if (enableLeftRightNavigation) {
if (event.key === 'ArrowRight') {
if (highlightedIndex !== allItems.length - 1) {
setHighlightedIndex(highlightedIndex + 1);
}
} else if (event.key === 'ArrowLeft') {
if (highlightedIndex <= 0) {
setHighlightedIndex(0);
} else {
setHighlightedIndex(highlightedIndex - 1);
}
}
}
if (event.key === 'Escape') {
focusToggler();
} else if (event.key === 'Enter' || event.key === ' ') {
// Since the event happens on the Menu and not the list item
// we look for the selected item and send it to onListItemSelectEvent as listItemNode
event.target.querySelectorAll('.DropListItem').forEach(function (item) {
if (item.classList.contains('is-highlighted')) {
event.persist();
onListItemSelectEvent({
listItemNode: item,
event: event
});
}
});
} else if (event.key === 'Tab') {
isOpen && toggleOpenedState(false);
onDropListLeave();
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropList2.DropListWrapperUI, {
className: "DropList DropList__Select",
"data-cy": dataCy,
menuCSS: menuCSS,
menuWidth: menuWidth,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.A11yTogglerUI, (0, _extends2.default)({}, getToggleButtonProps(), {
"aria-labelledby": null,
children: "Toggler"
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.MenuListUI, (0, _extends2.default)({
"data-event-driver": true,
className: _DropList4.DROPLIST_MENULIST + " MenuList-Select"
}, getMenuProps({
onKeyDown: handleMenuKeyDown,
onFocus: function onFocus(e) {
onMenuFocus(e);
},
onBlur: function onBlur(e) {
onMenuBlur(e);
}
}), {
"aria-label": menuAriaLabel,
"aria-labelledby": null,
children: (0, _DropList.renderListContents)({
customEmptyList: customEmptyList,
items: allItems,
renderListItem: renderListItem
})
}))]
});
}
var _default = Select;
exports.default = _default;