@octopusdeploy/design-system-components
Version:
The design systems component library.
53 lines (52 loc) • 3.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.dropdownListWidths = void 0;
exports.DropdownList = DropdownList;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Button_1 = require("../../Button");
const useDropdownButton_1 = require("../../Dropdown/useDropdownButton");
const Popover_1 = require("../../Popover");
const Tooltip_1 = require("../../Tooltip");
const SharedFormStyling_styles_1 = require("../Primitives/SharedFormStyling.styles");
const SelectBase_1 = require("./SelectBase");
const SelectOption_1 = require("./SelectOption");
const SelectOptionList_1 = require("./SelectOptionList");
exports.dropdownListWidths = ["default", "wide"];
const renderOption = (option, selected) => (0, jsx_runtime_1.jsx)(SelectOption_1.SelectOption, { option: option, selected: selected });
/**
* A trigger button that opens a filterable dropdown list and reports the chosen option via
* `onItemSelected`. This is used for pick-an-item-then-act flows (e.g. inserting a variable into a field).
* It reuses the same filterable, virtualised option list, so consumers get filtering for free without having to
* wire up the underlying dropdown primitives themselves.
*/
function DropdownList({ items, getOption, onItemSelected, allowFilter = true, sortItems = false, placement = "bottom-start", accessibleName, triggerIcon, triggerAccessibleName, triggerTooltip, disabled, width = "default", }) {
const { isOpen, toggleDropdown, closeDropdown, buttonElement, setButtonRef, setDropdownRef, buttonAriaAttributes, dropdownAttributes } = (0, useDropdownButton_1.useDropdownButton)({
trapFocus: true,
dropdownAriaRole: "dialog",
});
const handleClickAway = () => {
closeDropdown();
if (document.activeElement === null || document.activeElement === document.body) {
buttonElement?.focus();
}
};
const handleOptionsSelected = (options) => {
const option = options[0];
if (!option || (0, SelectBase_1.isMissingSelectedOption)(option))
return;
onItemSelected(option);
};
const trigger = ((0, jsx_runtime_1.jsx)(Button_1.Button, { ref: setButtonRef, size: "small", importance: "ghost", icon: triggerIcon, accessibleName: triggerAccessibleName, onClick: toggleDropdown, disabled: disabled, "aria-controls": buttonAriaAttributes["aria-controls"], "aria-haspopup": buttonAriaAttributes["aria-haspopup"], "aria-expanded": buttonAriaAttributes["aria-expanded"] }));
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerTooltip ? (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: triggerTooltip, children: trigger }) : trigger, (0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: isOpen, anchorEl: buttonElement, placement: placement, onClose: handleClickAway, elementId: dropdownAttributes.dropdownId, accessibleName: accessibleName, accessibleRole: "dialog", boundaryPadding: 16, children: (0, jsx_runtime_1.jsx)("div", { ref: setDropdownRef, className: (0, css_1.cx)(SharedFormStyling_styles_1.dropdownContainerStyles, getDropdownListWidthStyles(width)), children: (0, jsx_runtime_1.jsx)(SelectOptionList_1.SelectOptionList, { items: items, getOption: getOption, sortItems: sortItems, value: undefined, isMultiSelectable: false, allowFilter: allowFilter, label: accessibleName, renderOption: renderOption, onOptionsSelected: handleOptionsSelected, closeDropdown: closeDropdown }) }) })] }));
}
function getDropdownListWidthStyles(width) {
switch (width) {
case "wide":
return wideDropdownStyles;
default:
return defaultDropdownStyles;
}
}
const defaultDropdownStyles = (0, css_1.css)({ width: "19rem" });
const wideDropdownStyles = (0, css_1.css)({ width: "25rem" });