@czi-sds/components 15.2.0 → 15.4.0

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

@@ -1,20 +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 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 DropdownNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsx)(components_1.Dropdown, { DropdownMenuProps: { loading: true, loadingText: "Loading ..." }, label: "Click Target", onChange: utils_1.noop, options: OPTIONS, buttonPosition: "left", buttons: true, closeOnBlur: true, multiple: true, search: true, onClose: utils_1.noop, InputDropdownProps: { sdsStyle: "square" }, PopperComponent: components_1.DropdownPopper }));
-};

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

@@ -1,31 +0,0 @@
-import { AutocompleteValue } from "@mui/material/useAutocomplete";
-import React, { ReactNode } from "react";
-import { DefaultDropdownMenuOption, DropdownMenuProps as SdsDropdownMenuProps } from "../DropdownMenu";
-import { StyledPaper, StyledPopper } from "../DropdownMenu/style";
-import InputDropdown, { InputDropdownProps as InputDropdownPropsType } from "../InputDropdown";
-export { InputDropdown as DropdownInputDropdown, StyledPaper as DropdownPaper, StyledPopper as DropdownPopper, };
-export type Value<T, Multiple> = Multiple extends undefined | false ? T | null : Array<T> | null;
-export type MUIValue<Multiple> = AutocompleteValue<DefaultDropdownMenuOption, Multiple, undefined, undefined>;
-type RenderFunctionType = (props: any) => JSX.Element;
-export interface DropdownProps<Multiple extends boolean | undefined> {
-    buttonPosition?: "left" | "right";
-    buttons?: boolean;
-    closeOnBlur?: boolean;
-    disabled?: boolean;
-    label: ReactNode;
-    options: DefaultDropdownMenuOption[];
-    onChange: (options: Value<DefaultDropdownMenuOption, Multiple>) => void;
-    onClose?: () => void;
-    multiple?: Multiple;
-    search?: boolean;
-    DropdownMenuProps?: Partial<SdsDropdownMenuProps<DefaultDropdownMenuOption, Multiple, undefined, undefined>>;
-    InputDropdownProps?: Partial<InputDropdownPropsType>;
-    value?: Value<DefaultDropdownMenuOption, Multiple>;
-    style?: React.CSSProperties;
-    className?: string;
-    PopperComponent?: typeof StyledPopper | RenderFunctionType;
-    InputDropdownComponent?: typeof InputDropdown;
-    isTriggerChangeOnOptionClick?: boolean;
-}
-declare const Dropdown: <Multiple extends boolean | undefined = false>({ options, label, multiple, search, buttonPosition, buttons, closeOnBlur, onChange, onClose, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, disabled, ...rest }: DropdownProps<Multiple>) => JSX.Element;
-export default Dropdown;

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

@@ -1,160 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownPopper = exports.DropdownPaper = exports.DropdownInputDropdown = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var DropdownMenu_1 = __importDefault(require("../DropdownMenu"));
-var style_1 = require("../DropdownMenu/style");
-Object.defineProperty(exports, "DropdownPaper", { enumerable: true, get: function () { return style_1.StyledPaper; } });
-Object.defineProperty(exports, "DropdownPopper", { enumerable: true, get: function () { return style_1.StyledPopper; } });
-var InputDropdown_1 = __importDefault(require("../InputDropdown"));
-exports.DropdownInputDropdown = InputDropdown_1.default;
-var style_2 = require("./style");
-// eslint-disable-next-line sonarjs/cognitive-complexity
-var Dropdown = function (_a) {
-    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? "right" : _e, _f = _a.buttons, buttons = _f === void 0 ? false : _f, 
-    // By default, most dropdowns will close when the user clicks outside the dropdown.
-    // The exception is the multiple select variant with Apply/Cancel buttons,
-    // which by default will not close on blur. If closeOnBlur is enabled, clicking out
-    // is equivalent to clicking the Cancel button, closing the dropdown and losing
-    // unapplied changes.
-    _g = _a.closeOnBlur, 
-    // By default, most dropdowns will close when the user clicks outside the dropdown.
-    // The exception is the multiple select variant with Apply/Cancel buttons,
-    // which by default will not close on blur. If closeOnBlur is enabled, clicking out
-    // is equivalent to clicking the Cancel button, closing the dropdown and losing
-    // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onChange = _a.onChange, onClose = _a.onClose, _h = _a.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, _j = _a.InputDropdownProps, InputDropdownProps = _j === void 0 ? { sdsStyle: "minimal" } : _j, propValue = _a.value, PopperComponent = _a.PopperComponent, _k = _a.InputDropdownComponent, InputDropdownComponent = _k === void 0 ? InputDropdown_1.default : _k, _l = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _l === void 0 ? false : _l, _m = _a.disabled, disabled = _m === void 0 ? false : _m, rest = __rest(_a, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onChange", "onClose", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled"]);
-    if (buttons && !multiple) {
-        // eslint-disable-next-line no-console
-        console.warn("Warning: buttons are only supported for multiple select dropdowns.");
-    }
-    var isControlled = propValue !== undefined;
-    var _o = (0, react_1.useState)(null), anchorEl = _o[0], setAnchorEl = _o[1];
-    var _p = (0, react_1.useState)(getInitialValue), value = _p[0], setValue = _p[1];
-    var _q = (0, react_1.useState)([]), pendingValue = _q[0], setPendingValue = _q[1];
-    (0, react_1.useEffect)(function () {
-        onChange(value);
-    }, [value]);
-    (0, react_1.useEffect)(function () {
-        if (isControlled) {
-            setValue(propValue);
-        }
-    }, [propValue]);
-    var _r = (0, react_1.useState)(false), open = _r[0], setOpen = _r[1];
-    var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), (0, jsx_runtime_1.jsx)(DropdownMenu_1.default, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, value: (multiple ? pendingValue : value), onChange: handleChange, disableCloseOnSelect: multiple, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, options: options, onClickAway: handleClickAway }, DropdownMenuProps, { children: shouldShowButtons ? ((0, jsx_runtime_1.jsx)("div", { children: buttonPosition === "left" ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(style_2.StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), (0, jsx_runtime_1.jsx)(style_2.StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(style_2.StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), (0, jsx_runtime_1.jsx)(style_2.StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
-    function handleClickAway() {
-        if (open) {
-            // (masoudmanson): We want to keep the dropdown menu open in two scenarios:
-            // 1. If the dropdown has buttons,
-            // 2. When there are no buttons, and the closeOnBlur property is set to false,
-            // In all other cases, we close the menu.
-            if (closeOnBlur && !shouldShowButtons) {
-                setOpen(false);
-            }
-            if (multiple) {
-                setValue(pendingValue);
-            }
-        }
-    }
-    function handleClick(event) {
-        if (open) {
-            if (multiple) {
-                setValue(pendingValue);
-            }
-            setOpen(false);
-            if (anchorEl) {
-                anchorEl.focus();
-            }
-        }
-        else {
-            if (multiple) {
-                setPendingValue(value);
-            }
-            setAnchorEl(event.currentTarget);
-            setOpen(true);
-        }
-    }
-    function handleClose(_, reason) {
-        // (thuang): We don't want to close the menu when the input is clicked
-        if (reason === "toggleInput") {
-            return;
-        }
-        // (masoudmanson): When the dropdown loses focus, we will not close it immediately. Instead, we will update the values and
-        // only close the dropdown at the end of this block by calling setOpen(false).
-        if (shouldShowButtons && reason === "blur") {
-            return;
-        }
-        if (multiple) {
-            setValue(pendingValue);
-        }
-        if (anchorEl) {
-            anchorEl.focus();
-        }
-        if (closeOnBlur)
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        if (shouldShowButtons) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            setOpen(false);
-        }
-    }
-    function handleChange(_, newValue) {
-        if (multiple) {
-            if (isTriggerChangeOnOptionClick) {
-                setPendingValue(newValue);
-                return setValue(newValue);
-            }
-            return setPendingValue(newValue);
-        }
-        setValue(newValue);
-        setOpen(false);
-    }
-    function handleCancel() {
-        if (multiple) {
-            // (masoudmanson): To undo the latest actions made on the selections,
-            // we set the value of the selection to the pendingValue. This allows us to
-            // cancel any recent changes and restore the previous selection state.
-            setPendingValue(value);
-        }
-        if (anchorEl) {
-            anchorEl.focus();
-        }
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setOpen(false);
-    }
-    function getInitialValue() {
-        if (isControlled) {
-            return propValue;
-        }
-        return multiple
-            ? []
-            : null;
-    }
-};
-exports.default = Dropdown;

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

@@ -1,68 +0,0 @@
-import { Args } from "@storybook/react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-export declare const Default: {
-    args: {
-        buttonPosition: string;
-        buttons: boolean;
-        closeOnBlur: boolean;
-        disabled: boolean;
-        isTriggerChangeOnOptionClick: boolean;
-        label: string;
-        multiple: boolean;
-        onChange: () => void;
-        onClose: () => void;
-        search: boolean;
-    };
-};
-export declare const LoadingResultsIndicator: {
-    args: {
-        DropdownMenuProps: {
-            loading: boolean;
-            loadingText: JSX.Element;
-        };
-        label: string;
-        onChange: () => void;
-        options: never[];
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-};
-export declare const InsideModal: {
-    parameters: {
-        axe: {
-            disabledRules: string[];
-        };
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: () => JSX.Element;
-};
-export declare const ControlledDropdown: {
-    args: {
-        label: string;
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};
-export declare const Test: {
-    args: {
-        buttonPosition: string;
-        label: string;
-        onChange: () => void;
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};

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

@@ -1,215 +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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Test = exports.ControlledDropdown = exports.InsideModal = exports.LoadingResultsIndicator = exports.Default = void 0;
-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 Button_1 = __importDefault(require("../Button"));
-var GITHUB_LABELS_1 = require("../DropdownMenu/GITHUB_LABELS");
-var LoadingIndicator_1 = __importDefault(require("../LoadingIndicator"));
-var index_1 = __importDefault(require("./index"));
-var Dropdown = function (props) {
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ label: "Click Target", onChange: utils_1.noop, options: GITHUB_LABELS_1.GITHUB_LABELS, DropdownMenuProps: {
-            groupBy: function (option) {
-                return option.section;
-            },
-        } }, props)));
-};
-var onChangeOptions = [
-    utils_1.noop,
-    function (value) {
-        // eslint-disable-next-line no-console
-        console.log(value);
-    },
-];
-var onCloseOptions = [
-    utils_1.noop,
-    function () {
-        // eslint-disable-next-line no-console
-        console.log("Closed!");
-    },
-];
-var buttonPositionOptions = ["left", "right"];
-var LABEL = "Click Target";
-exports.default = {
-    argTypes: {
-        DropdownMenuProps: { control: { type: "object" } },
-        buttonPosition: {
-            constrol: {
-                labels: ["left", "right"],
-                type: "select",
-            },
-            mapping: buttonPositionOptions,
-            options: Object.keys(buttonPositionOptions),
-        },
-        buttons: {
-            control: {
-                type: "boolean",
-            },
-        },
-        closeOnBlur: {
-            control: {
-                type: "boolean",
-            },
-        },
-        disabled: {
-            control: {
-                type: "boolean",
-            },
-        },
-        label: { control: { type: "text" } },
-        multiple: {
-            control: {
-                type: "boolean",
-            },
-        },
-        onChange: {
-            control: {
-                labels: ["NOOP", "Log value on change"],
-                type: "select",
-            },
-            mapping: onChangeOptions,
-            options: Object.keys(onChangeOptions),
-        },
-        onClose: {
-            control: {
-                labels: ["NOOP", "console.log('Closed!')"],
-                type: "select",
-            },
-            mapping: onCloseOptions,
-            options: Object.keys(onCloseOptions),
-        },
-        search: {
-            control: {
-                type: "boolean",
-            },
-            defaulValue: true,
-        },
-    },
-    component: Dropdown,
-    title: "Dropdowns/Dropdown",
-};
-exports.Default = {
-    args: {
-        buttonPosition: "left",
-        buttons: false,
-        closeOnBlur: true,
-        disabled: false,
-        isTriggerChangeOnOptionClick: false,
-        label: LABEL,
-        multiple: true,
-        onChange: utils_1.noop,
-        onClose: utils_1.noop,
-        search: true,
-    },
-};
-exports.LoadingResultsIndicator = {
-    args: {
-        DropdownMenuProps: {
-            loading: true,
-            loadingText: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.default, { sdsStyle: "minimal" }),
-        },
-        label: LABEL,
-        onChange: utils_1.noop,
-        options: [],
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-};
-// Inside Modal
-var StyledPaper = (0, material_1.styled)(material_1.Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 200px;\n  padding: 50px;\n"], ["\n  width: 200px;\n  padding: 50px;\n"])));
-exports.InsideModal = {
-    parameters: {
-        axe: {
-            disabledRules: ["aria-dialog-name"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function () {
-        var _a = (0, react_1.useState)([GITHUB_LABELS_1.GITHUB_LABELS[0], GITHUB_LABELS_1.GITHUB_LABELS[1]]), value = _a[0], setValue = _a[1];
-        var FullWidthDropdown = (0, material_1.styled)(index_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
-        return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { open: true, disableEnforceFocus: true, PaperComponent: StyledPaper, children: (0, jsx_runtime_1.jsx)(FullWidthDropdown, { label: "Dropdown", options: GITHUB_LABELS_1.GITHUB_LABELS, onChange: handleChange, value: value, multiple: true, InputDropdownProps: { sdsStyle: "square" } }) }));
-        function handleChange(newValue) {
-            setValue(newValue);
-        }
-    },
-};
-// Controlled Dropdown
-var ControlledDropdownDemo = function (props) {
-    var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
-    var StyledButton = (0, material_1.styled)(Button_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:focus {\n      outline: none;\n    }\n\n    margin: 0 0 24px 8px;\n  "], ["\n    &:focus {\n      outline: none;\n    }\n\n    margin: 0 0 24px 8px;\n  "])));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledButton, { onClick: handleClick, sdsStyle: "minimal", sdsType: "primary", children: "Click here to select the first three options" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(index_1.default, __assign({ label: "Click Target", options: GITHUB_LABELS_1.GITHUB_LABELS }, props, { value: value, onChange: handleChange, "data-testid": "dropdown", DropdownMenuProps: {
-                    groupBy: function (option) {
-                        return option.section;
-                    },
-                    title: "Github Labels",
-                }, multiple: true }))] }));
-    function handleClick() {
-        setValue(__spreadArray([], GITHUB_LABELS_1.GITHUB_LABELS.slice(0, 3), true));
-    }
-    function handleChange(newValue) {
-        setValue(newValue);
-    }
-};
-exports.ControlledDropdown = {
-    args: {
-        label: LABEL,
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(ControlledDropdownDemo, __assign({}, args)); },
-};
-// Test
-var TestDemo = function (props) {
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ label: "Click Target", onChange: utils_1.noop, options: GITHUB_LABELS_1.GITHUB_LABELS }, props, { "data-testid": "dropdown" })));
-};
-exports.Test = {
-    args: {
-        buttonPosition: "left",
-        label: LABEL,
-        onChange: utils_1.noop,
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
-};
-var templateObject_1, templateObject_2, templateObject_3;

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

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