@czi-sds/components 15.1.0 → 15.2.0

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

@@ -0,0 +1,438 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.ScreenshotTest = exports.LivePreview = exports.Default = void 0;
+var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_2 = __importStar(require("react"));
+var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
+var InputDropdown_1 = __importDefault(require("../InputDropdown"));
+var Tag_1 = __importDefault(require("../Tag"));
+var GITHUB_LABELS_1 = require("./GITHUB_LABELS");
+var index_1 = __importDefault(require("./index"));
+var POPPER_POSITION = "bottom-start";
+var POPPER_WIDTH = 160;
+var groupByOptions = [
+    undefined,
+    function (option) { return option.section; },
+];
+var DropdownMenu = function (props) {
+    var multiple = props.multiple, _a = props.options, options = _a === void 0 ? GITHUB_LABELS_1.GITHUB_LABELS : _a, search = props.search, title = props.title, propValue = props.value;
+    var isControlled = propValue !== undefined;
+    var _b = (0, react_2.useState)(getInitialValue()), value = _b[0], setValue = _b[1];
+    var _c = (0, react_2.useState)(getInitialValue()), pendingValue = _c[0], setPendingValue = _c[1];
+    var anchorRef = (0, react_2.useRef)(null);
+    var _d = react_2.default.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
+    (0, react_2.useEffect)(function () {
+        setAnchorEl(anchorRef.current);
+    }, [anchorRef.current]);
+    (0, react_2.useEffect)(function () {
+        if (isControlled) {
+            setValue(propValue);
+        }
+    }, [propValue]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { margin: "16px 0 0 24px" }, ref: anchorRef, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({ anchorEl: anchorEl, disableCloseOnSelect: false, multiple: multiple, onChange: handleChange, onClickAway: handleClickAway, open: true, options: options, PopperBaseProps: {
+                disablePortal: false,
+                placement: POPPER_POSITION,
+                sx: { width: 300 },
+            }, search: search, title: title, value: multiple ? pendingValue : value, getOptionDisabled: function (option) {
+                return (option.name === "Type: feature request" ||
+                    option.name === "Type: documentation");
+            } }, props)) }));
+    function handleClickAway() {
+        if (multiple) {
+            setValue(pendingValue);
+        }
+    }
+    function handleChange(_, newValue) {
+        if (multiple) {
+            return setPendingValue(newValue);
+        }
+        setValue(newValue);
+    }
+    function getInitialValue() {
+        if (isControlled) {
+            return propValue;
+        }
+        return multiple
+            ? []
+            : null;
+    }
+};
+exports.default = {
+    argTypes: {
+        ClickAwayListenerProps: {
+            control: { type: "object" },
+        },
+        groupBy: {
+            control: {
+                labels: ["No group by", "Group by section names"],
+                type: "select",
+            },
+            mapping: groupByOptions,
+            options: Object.keys(groupByOptions),
+        },
+        keepSearchOnSelect: {
+            control: { type: "boolean" },
+        },
+        label: {
+            control: { type: "text" },
+            require: true,
+        },
+        multiple: {
+            control: { type: "boolean" },
+        },
+        search: {
+            control: { type: "boolean" },
+        },
+        title: {
+            control: { type: "text" },
+        },
+    },
+    component: DropdownMenu,
+    // (masoudmanson) For the purpose of storybook, the button is removed
+    // from the dropdown menu component which may cause some accessibility
+    // violations related to ARIA roles and attributes. However, this
+    // should not be a concern as the component is always used with a button
+    // in real applications. To avoid false positive test failures, the following
+    // accessibility rules have been temporarily disabled in the tests
+    parameters: {
+        axe: {
+            disabledRules: [
+                "aria-input-field-name",
+                "aria-required-children",
+                "aria-required-parent",
+                "button-name",
+                "list",
+                "listitem",
+            ],
+        },
+    },
+    title: "Dropdowns/DropdownMenu",
+};
+// Default
+exports.Default = {
+    args: {
+        groupBy: groupByOptions[1],
+        keepSearchOnSelect: true,
+        multiple: true,
+        search: true,
+        title: "Github Labels",
+    },
+};
+// Live Preview
+var storyRow = {
+    display: "grid",
+    gridColumnGap: 24,
+    gridRowGap: 8,
+    gridTemplateColumns: "repeat(4, 160px)",
+    gridTemplateRows: "repeat(2, auto)",
+};
+var StyledInputDropdownLive1 = (0, material_1.styled)(InputDropdown_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative !important;\n  min-width: unset;\n  &.MuiButtonBase-root {\n    margin: 0 !important;\n\n    & > span {\n      font-size: 13px;\n    }\n  }\n"], ["\n  position: relative !important;\n  min-width: unset;\n  &.MuiButtonBase-root {\n    margin: 0 !important;\n\n    & > span {\n      font-size: 13px;\n    }\n  }\n"])));
+var StyledInputDropdownLive3 = (0, material_1.styled)(InputDropdown_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative !important;\n  min-width: 160px;\n  &.MuiButtonBase-root {\n    margin: 0 !important;\n\n    & > span {\n      font-size: 13px;\n    }\n  }\n"], ["\n  position: relative !important;\n  min-width: 160px;\n  &.MuiButtonBase-root {\n    margin: 0 !important;\n\n    & > span {\n      font-size: 13px;\n    }\n  }\n"])));
+var LIVE_PREVIEW_LABELS = [
+    {
+        name: "Menu Item 1",
+        section: "Section 1",
+    },
+    {
+        name: "Menu Item 2",
+        section: "Section 1",
+    },
+    {
+        name: "Menu Item 3",
+        section: "Section 1",
+    },
+    {
+        name: "Menu Item 4",
+        section: "Section 2",
+    },
+    {
+        name: "Menu Item 5",
+        section: "Section 2",
+    },
+    {
+        name: "Menu Item 6",
+        section: "Section 2",
+    },
+];
+var LivePreviewDemo = function () {
+    var options = LIVE_PREVIEW_LABELS;
+    var _a = (0, react_2.useState)(null), anchorEl1 = _a[0], setAnchorEl1 = _a[1];
+    var _b = (0, react_2.useState)(null), anchorEl2 = _b[0], setAnchorEl2 = _b[1];
+    var _c = (0, react_2.useState)(null), anchorEl3 = _c[0], setAnchorEl3 = _c[1];
+    var _d = (0, react_2.useState)(null), anchorEl4 = _d[0], setAnchorEl4 = _d[1];
+    var _e = (0, react_2.useState)(false), open1 = _e[0], setOpen1 = _e[1];
+    var _f = (0, react_2.useState)(false), open2 = _f[0], setOpen2 = _f[1];
+    var _g = (0, react_2.useState)(false), open3 = _g[0], setOpen3 = _g[1];
+    var _h = (0, react_2.useState)(false), open4 = _h[0], setOpen4 = _h[1];
+    var _j = (0, react_2.useState)(null), value1 = _j[0], setValue1 = _j[1];
+    var _k = (0, react_2.useState)(null), value2 = _k[0], setValue2 = _k[1];
+    var _l = (0, react_2.useState)([]), pendingValue3 = _l[0], setPendingValue3 = _l[1];
+    var _m = (0, react_2.useState)([]), pendingValue4 = _m[0], setPendingValue4 = _m[1];
+    return ((0, jsx_runtime_1.jsxs)("div", { style: storyRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: { alignSelf: "end", gridArea: "1/1/2/2" }, children: [(0, jsx_runtime_1.jsx)(StyledInputDropdownLive1, { "aria-describedby": "live1", onClick: handleClick1, label: "Click Target", sdsStage: open1 ? "userInput" : "default", sdsType: "label", multiple: false, sdsStyle: "minimal" }), (0, jsx_runtime_1.jsx)(index_1.default, { anchorEl: anchorEl1, open: !!open1, onChange: handleChange1, disableCloseOnSelect: false, options: options.slice(0, 3), PopperBaseProps: {
+                            placement: POPPER_POSITION,
+                            sx: { width: POPPER_WIDTH },
+                        }, search: false, multiple: false, hasSections: false, value: value1, onClickAway: handleClickAway1 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { gridArea: "1/2/2/3" }, children: [(0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { "aria-describedby": "live2", "aria-label": "Open menu", onClick: handleClick2, on: false, sdsSize: "large", sdsType: "secondary", sdsIcon: "infoSpeechBubble" }), (0, jsx_runtime_1.jsx)(index_1.default, { anchorEl: anchorEl2, open: !!open2, search: false, multiple: false, onChange: handleChange2, disableCloseOnSelect: false, options: options.slice(0, 3), PopperBaseProps: {
+                            placement: POPPER_POSITION,
+                            sx: { width: POPPER_WIDTH },
+                        }, value: value2, title: "Title Lorem Ipsum", onClickAway: handleClickAway2 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { gridArea: "1/3/2/4" }, children: [(0, jsx_runtime_1.jsx)(StyledInputDropdownLive3, { "aria-describedby": "live3", onClick: handleClick3, label: "Click Target", sdsStage: open3 ? "userInput" : "default", sdsType: "label", multiple: true, sdsStyle: "rounded" }), (0, jsx_runtime_1.jsx)(index_1.default, { anchorEl: anchorEl3, open: !!open3, search: true, multiple: true, onChange: handleChange3, disableCloseOnSelect: true, options: options, PopperBaseProps: {
+                            placement: POPPER_POSITION,
+                            sx: { width: POPPER_WIDTH },
+                        }, value: pendingValue3, onClickAway: handleClickAway3 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { gridArea: "1/4/2/5" }, children: [(0, jsx_runtime_1.jsx)(StyledInputDropdownLive3, { "aria-describedby": "live4", onClick: handleClick4, label: "Click Target", sdsStage: open4 ? "userInput" : "default", sdsType: "label", multiple: true, sdsStyle: "square" }), (0, jsx_runtime_1.jsx)(index_1.default, { anchorEl: anchorEl4, open: !!open4, search: false, multiple: true, hasSections: true, groupBy: function (option) { return option.section; }, onChange: handleChange4, disableCloseOnSelect: true, options: options, PopperBaseProps: {
+                            placement: POPPER_POSITION,
+                            sx: { width: POPPER_WIDTH },
+                        }, value: pendingValue4, onClickAway: handleClickAway4 })] })] }));
+    function handleClickAway1() {
+        return open1 && setOpen1(false);
+    }
+    function handleClick1(event) {
+        if (open1) {
+            setOpen1(false);
+            if (anchorEl1) {
+                anchorEl1.focus();
+            }
+            setAnchorEl1(null);
+        }
+        else {
+            setAnchorEl1(event.currentTarget);
+            setOpen1(true);
+        }
+    }
+    function handleChange1(_, newValue) {
+        setOpen1(false);
+        setValue1(newValue);
+    }
+    function handleClickAway2() {
+        return open2 && setOpen2(false);
+    }
+    function handleClick2(event) {
+        if (open2) {
+            setOpen2(false);
+            if (anchorEl2) {
+                anchorEl2.focus();
+            }
+            setAnchorEl2(null);
+        }
+        else {
+            setAnchorEl2(event.currentTarget);
+            setOpen2(true);
+        }
+    }
+    function handleChange2(_, newValue) {
+        setOpen2(false);
+        setValue2(newValue);
+    }
+    function handleClickAway3() {
+        return open3 && setOpen3(false);
+    }
+    function handleClick3(event) {
+        if (open3) {
+            setOpen3(false);
+            if (anchorEl3) {
+                anchorEl3.focus();
+            }
+            setAnchorEl3(null);
+        }
+        else {
+            setAnchorEl3(event.currentTarget);
+            setOpen3(true);
+        }
+    }
+    function handleChange3(_, newValue) {
+        return setPendingValue3(newValue);
+    }
+    function handleClickAway4() {
+        return open4 && setOpen4(false);
+    }
+    function handleClick4(event) {
+        if (open4) {
+            setOpen4(false);
+            if (anchorEl4) {
+                anchorEl4.focus();
+            }
+            setAnchorEl4(null);
+        }
+        else {
+            setAnchorEl4(event.currentTarget);
+            setOpen4(true);
+        }
+    }
+    function handleChange4(_, newValue) {
+        return setPendingValue4(newValue);
+    }
+};
+exports.LivePreview = {
+    args: {
+        keepSearchOnSelect: true,
+        multiple: false,
+        search: false,
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Screenshot test
+var ScreenshotTestDemo = function (props) {
+    var TITLE_OPTIONS = [undefined, "Sample title text"];
+    var SEARCH_OPTIONS = [false, true];
+    var GROUP_BY_OPTIONS = [false, true];
+    var SCREENSHOT_TEST_TAG_COMPONENT = {
+        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",
+    };
+    var SCREENSHOT_TEST_OPTIONS = LIVE_PREVIEW_LABELS.concat(SCREENSHOT_TEST_TAG_COMPONENT);
+    var DISPLAY_CONTENTS = {
+        display: "contents",
+    };
+    var MID_LABEL = {
+        borderStyle: "solid none none none",
+        gridColumn: "1 / 3",
+        justifySelf: "stretch",
+        paddingTop: 10,
+    };
+    // loop through all TITLE_OPTIONS
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: TITLE_OPTIONS.map(function (title) {
+            return (0, jsx_runtime_1.jsx)(DropdownMenuTitle, { title: title }, title);
+        }) }));
+    // loop through all SEARCH_OPTIONS + create headers for TITLE_OPTIONS
+    function DropdownMenuTitle(_a) {
+        var title = _a.title;
+        var LEVEL_STYLE = {
+            columnGap: "25px",
+            display: "inline-grid",
+            fontFamily: "sans-serif",
+            marginLeft: "50px",
+        };
+        var LABEL_STYLE = {
+            fontSize: "2em",
+            gridColumn: "1 / 3",
+            marginBottom: 10,
+        };
+        return ((0, jsx_runtime_1.jsxs)("div", { style: LEVEL_STYLE, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Title: ", (0, jsx_runtime_1.jsx)("b", { children: title ? "yes" : "no" })] }), SEARCH_OPTIONS.map(function (search) {
+                    return ((0, jsx_runtime_1.jsx)(DropdownMenuSearch, { title: title, search: search }, String(search)));
+                })] }));
+    }
+    function DropdownMenuSearch(_a) {
+        var title = _a.title, search = _a.search;
+        var SEARCH_LABEL = __assign(__assign({}, MID_LABEL), { borderWidth: "2px", fontSize: "1.17em", margin: 0 });
+        var LEVEL_STYLE = {
+            margin: "0 300px 475px 0",
+        };
+        var GROUP_BY_LABEL = {
+            fontSize: "0.67em",
+            margin: "10px 0 475px",
+        };
+        return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [(0, jsx_runtime_1.jsxs)("p", { style: SEARCH_LABEL, children: ["Search: ", (0, jsx_runtime_1.jsx)("b", { children: search ? "yes" : "no" })] }), GROUP_BY_OPTIONS.map(function (groupBy) {
+                    return ((0, jsx_runtime_1.jsx)("div", { style: LEVEL_STYLE, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { style: GROUP_BY_LABEL, children: ["Grouped: ", (0, jsx_runtime_1.jsx)("b", { children: groupBy ? "yes" : "no" })] }), (0, react_1.createElement)(DropdownMenu, __assign({}, props, { hasSections: true, groupBy: groupBy &&
+                                        (function (option) {
+                                            return option.section;
+                                        }), options: SCREENSHOT_TEST_OPTIONS, title: title, search: search, key: String(groupBy) }))] }) }, "level-".concat(String(groupBy))));
+                })] }));
+    }
+}; // close ScreenShotTestDemo
+exports.ScreenshotTest = {
+    parameters: {
+        axe: {
+            timeout: 10 * 1000,
+        },
+        controls: {
+            exclude: [
+                "groupBy",
+                "keepSearchOnSelect",
+                "multiple",
+                "search",
+                "title",
+                "ClickAwayListenerProps",
+                "label",
+            ],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(ScreenshotTestDemo, __assign({}, args)); },
+};
+// Test
+var TestDemo = function (props) {
+    var multiple = props.multiple, _a = props.options, options = _a === void 0 ? GITHUB_LABELS_1.GITHUB_LABELS : _a, search = props.search;
+    var anchorRef = (0, react_2.useRef)(null);
+    var _b = (0, react_2.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = (0, react_2.useState)(multiple ? [] : null), value = _c[0], setValue = _c[1];
+    var _d = (0, react_2.useState)([]), pendingValue = _d[0], setPendingValue = _d[1];
+    (0, react_2.useEffect)(function () {
+        setAnchorEl(anchorRef.current);
+    }, [anchorRef.current]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { margin: "16px 0 0 24px" }, ref: anchorRef, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({ anchorEl: anchorEl, open: true, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, groupBy: function (option) {
+                return option.section;
+            } }, props)) }));
+    function handleClickAway() {
+        return multiple && setValue(pendingValue);
+    }
+    function handleChange(_, newValue) {
+        if (!multiple) {
+            setValue(newValue);
+        }
+        return setPendingValue(newValue);
+    }
+};
+exports.Test = {
+    args: {
+        keepSearchOnSelect: false,
+        multiple: true,
+        search: true,
+        title: "Github Labels",
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({ "data-testid": "dropdown-menu" }, args)); },
+};
+var templateObject_1, templateObject_2;

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

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

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

@@ -0,0 +1,51 @@
+"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;
+};
+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 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);
+describe("<DropdownMenu />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders DropdownMenu component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
+        var DropdownMenuElement = react_2.screen.getByTestId("dropdown-menu");
+        expect(DropdownMenuElement).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,40 @@
+import Autocomplete from "@mui/material/Autocomplete";
+import { ReactElement } from "react";
+import { CommonThemeProps } from "../styles";
+export interface StyleProps extends CommonThemeProps {
+    count?: number;
+    hasSections?: boolean;
+    icon?: ReactElement;
+    search?: boolean;
+    title?: string;
+}
+export declare const StyledAutocomplete: typeof Autocomplete;
+export declare const InputBaseWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuInputSearch: import("@emotion/styled").StyledComponent<Pick<import("../InputSearch").InputSearchProps, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "translate" | "margin" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "fullWidth" | "size" | "name" | "type" | "value" | "autoComplete" | "required" | "rows" | "error" | "inputProps" | "inputRef" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "maxRows" | "minRows" | "SelectProps" | keyof import("../InputSearch").AccessibleInputSearchProps | keyof import("../InputSearch/style").InputSearchExtraProps> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    search: boolean;
+}, {}, {}>;
+export declare const StyledHeaderTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    search: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPopper: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any> | undefined;
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
+    } | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "elevation" | "square" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledMenuItemDetails: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuItemText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,85 @@
+"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.StyledMenuItemText = exports.StyledMenuItemDetails = exports.StyledPaper = exports.StyledPopper = exports.StyledHeaderTitle = exports.StyledMenuInputSearch = exports.InputBaseWrapper = exports.StyledAutocomplete = void 0;
+var material_1 = require("@mui/material");
+var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+var styles_1 = require("@mui/material/styles");
+var InputSearch_1 = __importDefault(require("../InputSearch"));
+var styles_2 = require("../styles");
+var doNotForwardProps = [
+    "anchorEl",
+    "count",
+    "keepSearchOnSelect",
+    "search",
+    "InputBaseProps",
+    "hasSections",
+    "title",
+    "PopperBaseProps",
+    "onClickAway",
+    "ClickAwayListenerProps",
+];
+exports.StyledAutocomplete = (0, styles_1.styled)(Autocomplete_1.default, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  + .MuiAutocomplete-popper\n    > .MuiAutocomplete-paper\n    .MuiAutocomplete-groupLabel {\n    ", "\n  }\n\n  ", "\n"], ["\n  + .MuiAutocomplete-popper\n    > .MuiAutocomplete-paper\n    .MuiAutocomplete-groupLabel {\n    ", "\n  }\n\n  ", "\n"])), styles_2.fontCapsXxxxs, function (props) {
+    var search = props.search, title = props.title, hasSections = props.hasSections;
+    var spacings = (0, styles_2.getSpaces)(props);
+    var colors = (0, styles_2.getColors)(props);
+    var borders = (0, styles_2.getBorders)(props);
+    return "\n      ".concat(!search && "height: 0", ";\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n        }\n      }\n\n      & + .MuiAutocomplete-popper {\n        position: relative !important;\n        transform: none !important;\n        width: 100% !important;\n      }\n\n      & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n\n      ").concat(search || title || hasSections
+        ? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;")
+        : "", "\n\n      .MuiAutocomplete-listbox {\n        max-height: 40vh;\n        padding-top: 0;\n        padding-bottom: 0;\n        \n        ").concat(search || title || hasSections
+        ? "padding-right: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;")
+        : "", "\n\n        .MuiAutocomplete-option {\n          min-height: unset;\n        }\n\n        .MuiAutocomplete-option.Mui-focused {\n          background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n        }\n\n        .MuiAutocomplete-option[aria-selected=\"true\"] {\n          background-color: white;\n        }\n\n        .MuiAutocomplete-option[aria-disabled=\"true\"] {\n          opacity: 1;\n        }\n\n        .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n          background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n        }\n\n        & > li:last-child .MuiAutocomplete-groupUl {\n          border-bottom: none;\n          margin-bottom: 0;\n        }\n      }\n\n      .MuiAutocomplete-groupLabel {\n        top: 0;\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n      }\n\n      .MuiAutocomplete-groupUl {\n        margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n        position: relative;\n        padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n        border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n        & li:last-of-type {\n          position: relative;\n          margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n        }\n      } \n    ");
+});
+exports.InputBaseWrapper = (0, styles_1.styled)("div", {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var search = props.search;
+    if (!search) {
+        // (thuang): We cannot use `display: none;` here, since
+        // the component needs to be in the DOM to handle backdrop
+        // click to close the menu
+        return "\n        border: 0;\n        padding: 0;\n\n        white-space: nowrap;\n\n        clip-path: inset(100%);\n        clip: rect(0 0 0 0);\n        overflow: hidden;\n        margin: 0;\n      ";
+    }
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n      margin: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n    ");
+});
+exports.StyledMenuInputSearch = (0, styles_1.styled)(InputSearch_1.default, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"], ["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"])), function (_a) {
+    var search = _a.search;
+    return (search ? "auto" : "transparent");
+});
+exports.StyledHeaderTitle = (0, styles_1.styled)("div", {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontHeaderXs, function (props) {
+    var search = props.search;
+    var typography = (0, styles_2.getTypography)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      color: black;\n      padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n      padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px; \n      ").concat(search ? "padding-bottom: 0px;" : "padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;"), "\n    ");
+});
+exports.StyledPopper = (0, styles_1.styled)(material_1.Popper, {
+    shouldForwardProp: function (prop) {
+        return !doNotForwardProps.includes(prop) || prop === "anchorEl";
+    },
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  .MuiAutocomplete-popperDisablePortal {\n    position: relative;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n  }\n\n  ", "\n"], ["\n  .MuiAutocomplete-popperDisablePortal {\n    position: relative;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n  }\n\n  ", "\n"])), function (props) {
+    var borders = (0, styles_2.getBorders)(props);
+    var corners = (0, styles_2.getCorners)(props);
+    var shadows = (0, styles_2.getShadows)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    return "\n      background-color: white;\n      border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n      box-sizing: border-box;\n      z-index: 1400;\n    ");
+});
+exports.StyledPaper = (0, styles_1.styled)(material_1.Paper)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-shadow: none;\n  margin: 0;\n  border-radius: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n"], ["\n  box-shadow: none;\n  margin: 0;\n  border-radius: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n"])));
+exports.StyledMenuItemDetails = (0, styles_1.styled)("div")(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_2.fontBodyXxs, function (props) {
+    var colors = (0, styles_2.getColors)(props);
+    return "\n      color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n      white-space: pre-wrap;\n    ");
+});
+exports.StyledMenuItemText = (0, styles_1.styled)("div")(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var IconNameSpaceTest = function () {
+    return ((0, jsx_runtime_1.jsx)(components_1.Icon, { color: "primary", shade: 400, sdsIcon: "bacteria", sdsSize: "xl", sdsType: "static" }));
+};