@czi-sds/components 15.1.0 → 15.2.0

package/dist/src/core/Dropdown/index.test.js

@@ -0,0 +1,229 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var story_utils_1 = require("@chanzuckerberg/story-utils");
+var react_1 = require("@storybook/react");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var LoadingIndicator_1 = __importDefault(require("../LoadingIndicator"));
+var snapshotTestStoryFile = __importStar(require("./index.stories"));
+var index_stories_1 = __importStar(require("./index.stories"));
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+var STATUS_CANT_FIND_TEXT = "Status: can't reproduce";
+describe("<Dropdown />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("Dropdown component renders correctly", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        expect(DropdownElement).not.toBeNull();
+    });
+    it("Upon clicking the button, the dropdown menu closes.", function () {
+        var args = __assign({}, Test.args);
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        // Open the dropdown
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        react_2.fireEvent.click(DropdownElement);
+        // Click on the button again to close it
+        react_2.fireEvent.click(DropdownElement);
+        var menuItem = react_2.screen.queryByText(STATUS_CANT_FIND_TEXT);
+        expect(menuItem).toEqual(null);
+    });
+    it("Prop Test (loeading): Loading indicator correctly renders when loading state is true", function () {
+        var args = __assign(__assign({}, Test.args), { DropdownMenuProps: {
+                loading: true,
+                loadingText: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.default, { sdsStyle: "minimal" }) })),
+            }, multiple: true, options: [] });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        expect(DropdownElement).not.toBeNull();
+        react_2.fireEvent.click(DropdownElement);
+        expect(react_2.screen.getAllByText("Loading")).not.toBeNull();
+    });
+    it("Prop Test (search): Dropdown component search function correctly maintains searched-for items", function () {
+        var args = __assign(__assign({}, Test.args), { search: true });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        // Open the dropdown
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        react_2.fireEvent.click(DropdownElement);
+        // Select the search input by placeholder
+        var searchInput = react_2.screen.getByPlaceholderText("Search");
+        react_2.fireEvent.change(searchInput, { target: { value: "Status" } });
+        // We want to test that there ARE items with "Status: *" in the dropdown menu
+        // because we have searched for Status
+        var statusItem = react_2.screen.queryByText("Status: confirmed");
+        expect(statusItem).not.toBeNull();
+    });
+    it("Prop Test (search): Dropdown component search function correctly filters out Type items", function () {
+        var args = __assign(__assign({}, Test.args), { search: true });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        // Open the dropdown
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        react_2.fireEvent.click(DropdownElement);
+        // Select the search input by placeholder
+        var searchInput = react_2.screen.getByPlaceholderText("Search");
+        react_2.fireEvent.change(searchInput, { target: { value: "Status" } });
+        // We want to test that there are no items with "Type: *" in the dropdown menu
+        // because we have searched for Status
+        var typeBugItem = react_2.screen.queryByText("Type: bug");
+        expect(typeBugItem).toEqual(null);
+    });
+    it("Prop Test (Label): Dropdown component correctly renders with a new label", function () {
+        var args = __assign(__assign({}, Test.args), { label: "Test Label" });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        expect(react_2.screen.getAllByText("Test Label")).not.toBeNull();
+    });
+    it("Prop Test (closeOnBlur): Dropdown closes when button is clicked with closeOnBlue set to true", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var args, DropdownElement, menuItem;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    args = __assign(__assign({}, Test.args), { closeOnBlur: true });
+                    (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+                    DropdownElement = react_2.screen.getByTestId("dropdown");
+                    user_event_1.default.click(DropdownElement);
+                    // Awaiting to find the STATUS_CANT_FIND_TEXT on the screen to
+                    // make sure that the dropdown is opened
+                    return [4 /*yield*/, react_2.screen.findByText(STATUS_CANT_FIND_TEXT)];
+                case 1:
+                    // Awaiting to find the STATUS_CANT_FIND_TEXT on the screen to
+                    // make sure that the dropdown is opened
+                    _a.sent();
+                    // Click on the button again to close it
+                    user_event_1.default.click(DropdownElement);
+                    // Wait for 500ms before continuing with the test
+                    return [4 /*yield*/, (0, story_utils_1.wait)(500)];
+                case 2:
+                    // Wait for 500ms before continuing with the test
+                    _a.sent();
+                    menuItem = react_2.screen.queryByText(STATUS_CANT_FIND_TEXT);
+                    expect(menuItem).toBeNull();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("Prop Test (closeOnBlur): Dropdown closes when button is clicked with closeOnBlue set to false", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var args, DropdownElement, menuItem;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    args = __assign(__assign({}, Test.args), { closeOnBlur: false });
+                    (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+                    DropdownElement = react_2.screen.getByTestId("dropdown");
+                    user_event_1.default.click(DropdownElement);
+                    // Awaiting to find the STATUS_CANT_FIND_TEXT on the screen to
+                    // make sure that the dropdown is opened
+                    return [4 /*yield*/, react_2.screen.findByText(STATUS_CANT_FIND_TEXT)];
+                case 1:
+                    // Awaiting to find the STATUS_CANT_FIND_TEXT on the screen to
+                    // make sure that the dropdown is opened
+                    _a.sent();
+                    // Click on the button again to close it
+                    user_event_1.default.click(DropdownElement);
+                    // Wait for 500ms before continuing with the test
+                    return [4 /*yield*/, (0, story_utils_1.wait)(500)];
+                case 2:
+                    // Wait for 500ms before continuing with the test
+                    _a.sent();
+                    menuItem = react_2.screen.queryByText(STATUS_CANT_FIND_TEXT);
+                    expect(menuItem).toBeNull();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("Prop Test (disabled): Dropdown component doesn't open menu upon click", function () {
+        var args = __assign(__assign({}, Test.args), { disabled: true });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        // (Attempt to) open the dropdown
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        react_2.fireEvent.click(DropdownElement);
+        // DropdownMenu should not be found
+        var DropdownMenu = react_2.screen.queryByRole("tooltip");
+        expect(DropdownMenu).toBeNull();
+    });
+    it("Prop Test (buttons): Dropdown component renders buttons", function () {
+        // The condition for the Dropdown component to show buttons is
+        // buttons && !isTriggerChangeOnOptionClick && multiple
+        var args = __assign(__assign({}, Test.args), { buttons: true, isTriggerChangeOnOptionClick: false, multiple: true });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, args)));
+        // Open the dropdown
+        var DropdownElement = react_2.screen.getByTestId("dropdown");
+        react_2.fireEvent.click(DropdownElement);
+        // Check for the buttons by text
+        var primaryButton = react_2.screen.queryByText("Apply");
+        var secondaryButton = react_2.screen.queryByText("Cancel");
+        expect(primaryButton && secondaryButton).not.toBeNull();
+    });
+});

package/dist/src/core/Dropdown/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/material").ButtonProps<import("react").ElementType<any>, {
+    component?: import("react").ElementType<any> | undefined;
+}>, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & import("../Button").SdsProps, string | number | symbol> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/dist/src/core/Dropdown/style.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButton = exports.Wrapper = void 0;
+var styles_1 = require("@mui/material/styles");
+var Button_1 = __importDefault(require("../Button"));
+var styles_2 = require("../styles");
+exports.Wrapper = (0, styles_1.styled)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 150px;\n"], ["\n  width: 150px;\n"])));
+exports.StyledButton = (0, styles_1.styled)(Button_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n      margin-top: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n      &:first-of-type {\n        margin-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      }\n\n      &:last-child {\n        margin-left: 0;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      }\n    ");
+});
+var templateObject_1, templateObject_2;

package/dist/src/core/DropdownMenu/DropdownMenu.namespace-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/DropdownMenu/DropdownMenu.namespace-test.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var utils_1 = require("src/common/utils");
+var OPTIONS = [
+    {
+        color: "#7057ff",
+        description: "Good for newcomers",
+        name: "good first issue",
+    },
+    {
+        color: "#008672",
+        description: "Extra attention is needed",
+        name: "help wanted",
+    },
+];
+var DropdownMenuNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.DropdownMenu, { anchorEl: null, disableCloseOnSelect: false, id: "1", multiple: true, onChange: utils_1.noop, open: true, options: OPTIONS, PopperBaseProps: { sx: { width: 300 } }, search: true, title: "Dropdown Menu Title", onClickAway: utils_1.noop, ClickAwayListenerProps: { mouseEvent: false } }));
+};

package/dist/src/core/DropdownMenu/GITHUB_LABELS.d.ts

@@ -0,0 +1,2 @@
+import { DefaultDropdownMenuOption } from ".";
+export declare const GITHUB_LABELS: DefaultDropdownMenuOption[];

package/dist/src/core/DropdownMenu/GITHUB_LABELS.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GITHUB_LABELS = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Tag_1 = __importDefault(require("../Tag"));
+exports.GITHUB_LABELS = [
+    {
+        name: "Status: can't reproduce",
+        section: "name only",
+    },
+    {
+        name: "Status: confirmed",
+        section: "name only",
+    },
+    {
+        count: 3,
+        name: "Status: duplicate",
+        section: "name with count",
+    },
+    {
+        count: 5,
+        name: "Status: needs information",
+        section: "name with count",
+    },
+    {
+        details: "This will not be worked on",
+        name: "Status: wont do/fix",
+        section: "name with details",
+    },
+    {
+        details: "This is still in progress",
+        name: "Status: work in progress",
+        section: "name with details",
+    },
+    {
+        details: "This will not be worked on",
+        name: "Type: bug",
+        sdsIcon: "bacteria",
+        sdsIconProps: {
+            className: "custom-class-name",
+        },
+        section: "With Icon",
+    },
+    {
+        count: 4,
+        name: "Type: discussion",
+        sdsIcon: "puzzlePiece",
+        section: "With Icon",
+    },
+    {
+        name: "Type: documentation",
+        sdsIcon: "copy",
+        section: "With Icon",
+    },
+    {
+        name: "Type: enhancement",
+        sdsIcon: "lightBulb",
+        section: "With Icon",
+    },
+    {
+        name: "Type: epic",
+        sdsIcon: "list",
+        section: "With Icon",
+    },
+    {
+        name: "Type: feature request",
+        sdsIcon: "treeVertical",
+        section: "With Icon",
+    },
+    {
+        name: "Type: question",
+        sdsIcon: "search",
+        section: "With Icon",
+    },
+    {
+        component: ((0, jsx_runtime_1.jsxs)("div", { children: ["Available Labels:", (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 10 }, children: [(0, jsx_runtime_1.jsx)(Tag_1.default, { label: "bug", sdsStyle: "rounded", sdsType: "secondary", color: "error" }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "feature", sdsStyle: "rounded", sdsType: "secondary", color: "warning" }), (0, jsx_runtime_1.jsx)(Tag_1.default, { label: "refactor", sdsStyle: "rounded", sdsType: "secondary", color: "gray" })] })] })),
+        name: "custom 2",
+        section: "custom component",
+    },
+];

package/dist/src/core/DropdownMenu/index.d.ts

@@ -0,0 +1,42 @@
+import { AutocompleteInputChangeReason, AutocompleteProps, AutocompleteRenderInputParams, ClickAwayListenerProps as MUIClickAwayListenerProps, PopperProps } from "@mui/material";
+import React, { ReactNode, SyntheticEvent } from "react";
+import { IconProps } from "../Icon";
+import { InputSearchProps } from "../InputSearch";
+import { IconNameToSmallSizes } from "../MenuItem";
+import { StyleProps, StyledPaper, StyledPopper } from "./style";
+interface DropdownMenuOptionGeneral {
+    name: string;
+    section?: string;
+}
+export interface DropdownMenuOptionBasic extends DropdownMenuOptionGeneral {
+    count?: number;
+    details?: string;
+    sdsIcon?: keyof IconNameToSmallSizes;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSmallSizes>>;
+}
+export interface DropdownMenuOptionComponent extends DropdownMenuOptionGeneral {
+    component?: ReactNode;
+}
+type Exclusive<T, U> = T & {
+    [K in Exclude<keyof U, keyof T>]?: undefined;
+};
+export type DefaultDropdownMenuOption = Exclusive<DropdownMenuOptionBasic, DropdownMenuOptionComponent> | Exclusive<DropdownMenuOptionComponent, DropdownMenuOptionBasic>;
+type RenderFunctionType = (props: any) => JSX.Element;
+interface ExtraDropdownMenuProps extends StyleProps {
+    keepSearchOnSelect?: boolean;
+    renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+    onInputChange?: (event: SyntheticEvent<Element, Event>, value: string, reason: AutocompleteInputChangeReason) => void;
+    InputBaseProps?: Partial<InputSearchProps>;
+    PopperBaseProps?: Partial<PopperProps>;
+    title?: string;
+    anchorEl: HTMLElement | null;
+    PopperComponent?: typeof StyledPopper | RenderFunctionType;
+    PaperComponent?: typeof StyledPaper | RenderFunctionType;
+    children?: JSX.Element | null;
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
+}
+type CustomAutocompleteProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+export type DropdownMenuProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownMenuProps;
+declare const DropdownMenu: <T extends DefaultDropdownMenuOption, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: DropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
+export default DropdownMenu;

package/dist/src/core/DropdownMenu/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var utils_1 = require("src/common/utils");
+var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
+var MenuItem_1 = __importDefault(require("../MenuItem"));
+var style_1 = require("./style");
+var DropdownMenu = function (props) {
+    var _a = props.multiple, multiple = _a === void 0 ? false : _a, anchorEl = props.anchorEl, _b = props.disableCloseOnSelect, disableCloseOnSelect = _b === void 0 ? multiple : _b, _c = props.getOptionLabel, getOptionLabel = _c === void 0 ? defaultGetOptionLabel : _c, id = props.id, _d = props.InputBaseProps, InputBaseProps = _d === void 0 ? {} : _d, _e = props.isOptionEqualToValue, isOptionEqualToValue = _e === void 0 ? defaultIsOptionEqualToValue : _e, _f = props.keepSearchOnSelect, keepSearchOnSelect = _f === void 0 ? true : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? utils_1.noop : _k, _l = props.open, open = _l === void 0 ? false : _l, _m = props.PaperComponent, PaperComponent = _m === void 0 ? style_1.StyledPaper : _m, _o = props.PopperComponent, PopperComponent = _o === void 0 ? style_1.StyledPopper : _o, _p = props.PopperBaseProps, PopperBaseProps = _p === void 0 ? {} : _p, _q = props.renderOption, renderOption = _q === void 0 ? defaultRenderOption : _q, _r = props.renderTags, renderTags = _r === void 0 ? defaultRenderTags : _r, _s = props.search, search = _s === void 0 ? false : _s, title = props.title, children = props.children, onClickAway = props.onClickAway, ClickAwayListenerProps = props.ClickAwayListenerProps;
+    var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
+    return ((0, jsx_runtime_1.jsx)(PopperComponent, __assign({ id: id, modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 8],
+                },
+            },
+        ], open: open, anchorEl: anchorEl, placement: "bottom-start" }, PopperBaseProps, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: (0, jsx_runtime_1.jsxs)("div", { children: [title && ((0, jsx_runtime_1.jsx)(style_1.StyledHeaderTitle, { search: search, children: title })), (0, jsx_runtime_1.jsx)(style_1.StyledAutocomplete, __assign({ clearOnBlur: false, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: PaperComponent, renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: function (params) { return ((0, jsx_runtime_1.jsx)(style_1.InputBaseWrapper, { search: search, children: (0, jsx_runtime_1.jsx)(style_1.StyledMenuInputSearch, __assign({ id: "location-search", label: "Search for a location", placeholder: "Search", ref: params.InputProps.ref, search: search, 
+                                // eslint-disable-next-line jsx-a11y/no-autofocus
+                                autoFocus: true, 
+                                // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+                                onKeyDown: function (event) {
+                                    if (event.key === "Backspace") {
+                                        event.stopPropagation();
+                                    }
+                                }, InputProps: __assign(__assign({ 
+                                    /**
+                                     * (thuang): Works with css caret-color: "transparent" to hide
+                                     * mobile keyboard
+                                     */
+                                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { sdsType: "secondary", sdsSize: "small", sdsIcon: "search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
+                            if (event && event.type === "blur") {
+                                setInputValue("");
+                            }
+                            else if (reason !== "reset" ||
+                                (reason === "reset" && !keepSearchOnSelect)) {
+                                setInputValue(value);
+                            }
+                            if (onInputChange)
+                                onInputChange(event, value, reason);
+                        } })), children] }) })) })));
+    function defaultGetOptionLabel(option) {
+        if (typeof option === "object" && "name" in option)
+            return option.name;
+        return option.toString();
+    }
+    function defaultIsOptionEqualToValue(option, val) {
+        return option.name === val.name;
+    }
+    function defaultRenderTags() {
+        return null;
+    }
+    function defaultRenderOption(optionProps, option, _a) {
+        var selected = _a.selected;
+        var MenuItemContent;
+        var component = option.component, details = option.details, count = option.count, sdsIcon = option.sdsIcon, sdsIconProps = option.sdsIconProps;
+        var label = getOptionLabel(option);
+        if (component) {
+            MenuItemContent = component;
+        }
+        else {
+            MenuItemContent = ((0, jsx_runtime_1.jsxs)(style_1.StyledMenuItemText, { children: [label, details && ((0, jsx_runtime_1.jsx)(style_1.StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
+        }
+        return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, sdsIcon: sdsIcon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { children: MenuItemContent })));
+    }
+};
+exports.default = DropdownMenu;

package/dist/src/core/DropdownMenu/index.stories.d.ts

@@ -0,0 +1,55 @@
+import { Args } from "@storybook/react";
+import { DefaultDropdownMenuOption } from "./index";
+export type DropdownOptionValue<T, Multiple> = Multiple extends undefined | false ? T | undefined : Array<T> | undefined;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {
+    args: {
+        groupBy: ((option: DefaultDropdownMenuOption) => string) | undefined;
+        keepSearchOnSelect: boolean;
+        multiple: boolean;
+        search: boolean;
+        title: string;
+    };
+};
+export declare const LivePreview: {
+    args: {
+        keepSearchOnSelect: boolean;
+        multiple: boolean;
+        search: boolean;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const ScreenshotTest: {
+    parameters: {
+        axe: {
+            timeout: number;
+        };
+        controls: {
+            exclude: string[];
+        };
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    args: {
+        keepSearchOnSelect: boolean;
+        multiple: boolean;
+        search: boolean;
+        title: string;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};