@czi-sds/components 15.3.0 → 15.4.0

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

@@ -1,438 +0,0 @@
-"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

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

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

@@ -1,51 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-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

@@ -1,85 +0,0 @@
-"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

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

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

@@ -1,7 +0,0 @@
-"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" }));
-};