@czi-sds/components 15.1.1 → 15.3.0

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

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

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

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

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

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