@czi-sds/components 15.1.1 → 15.2.0

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

@@ -0,0 +1,29 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_material_1 = require("@mui/icons-material");
+var warnings_1 = require("src/common/warnings");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ */
+var Chip = function (props) {
+    (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
+    var onDelete = props.onDelete;
+    if (onDelete) {
+        return (0, jsx_runtime_1.jsx)(style_1.StyledChip, __assign({ deleteIcon: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}) }, props));
+    }
+    return (0, jsx_runtime_1.jsx)(style_1.StyledChip, __assign({}, props));
+};
+exports.default = Chip;

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

@@ -0,0 +1,58 @@
+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 MediumSquareChip: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+    };
+};
+export declare const Success: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};
+export declare const Error: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};
+export declare const Warning: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};
+export declare const Info: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};
+export declare const Pending: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};
+export declare const Beta: {
+    args: {
+        isRounded: boolean;
+        label: string;
+        size: string;
+        status: string;
+    };
+};

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

@@ -0,0 +1,90 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Beta = exports.Pending = exports.Info = exports.Warning = exports.Error = exports.Success = exports.MediumSquareChip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("../Button"));
+var index_1 = __importDefault(require("./index"));
+var Demo = function (props) {
+    var size = props.size, isRounded = props.isRounded;
+    var _a = react_1.default.useState(false), visible = _a[0], setVisible = _a[1];
+    var handleShowChip = function () { return setVisible(true); };
+    var handleDismissChip = function () { return setVisible(false); };
+    if (size === "medium" && !isRounded) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleShowChip, sdsType: "secondary", sdsStyle: "square", children: "Click me!" }), visible && (0, jsx_runtime_1.jsx)(index_1.default, __assign({ onDelete: handleDismissChip }, props))] }));
+    }
+    return (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props));
+};
+exports.default = {
+    component: Demo,
+    title: "Chip - To Be Depreciated",
+};
+exports.MediumSquareChip = {
+    args: {
+        isRounded: false,
+        label: "Chip",
+        size: "medium",
+    },
+};
+exports.Success = {
+    args: {
+        isRounded: true,
+        label: "success",
+        size: "small",
+        status: "success",
+    },
+};
+exports.Error = {
+    args: {
+        isRounded: true,
+        label: "error",
+        size: "small",
+        status: "error",
+    },
+};
+exports.Warning = {
+    args: {
+        isRounded: true,
+        label: "warning",
+        size: "small",
+        status: "warning",
+    },
+};
+exports.Info = {
+    args: {
+        isRounded: true,
+        label: "info",
+        size: "small",
+        status: "info",
+    },
+};
+exports.Pending = {
+    args: {
+        isRounded: true,
+        label: "pending",
+        size: "small",
+        status: "pending",
+    },
+};
+exports.Beta = {
+    args: {
+        isRounded: true,
+        label: "beta",
+        size: "small",
+        status: "beta",
+    },
+};

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "../styles";
+export interface ChipExtraProps extends CommonThemeProps {
+    size?: "small" | "medium";
+    status?: "success" | "error" | "warning" | "info" | "pending" | "beta";
+    isRounded?: boolean;
+}
+export declare const StyledChip: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "default" | "error" | "info" | "success" | "warning", import("@mui/material").ChipPropsColorOverrides> | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").ChipPropsSizeOverrides> | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "filled", import("@mui/material").ChipPropsVariantOverrides> | 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" | "sx" | "variant" | "color" | "disabled" | "label" | "tabIndex" | "size" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ChipExtraProps, {}, {}>;

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

@@ -0,0 +1,95 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledChip = void 0;
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var small = function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n    padding: ", "px ", "px;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n  "], ["\n    height: ", "px;\n    padding: ", "px ", "px;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n  "])), spacings === null || spacings === void 0 ? void 0 : spacings.l, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.xs, (0, styles_2.fontCapsXxxxs)(props));
+};
+var medium = function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var colors = (0, styles_2.getColors)(props);
+    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "], ["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "])), spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[500], colors === null || colors === void 0 ? void 0 : colors.primary[600], (0, styles_2.fontHeaderXs)(props), spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, spacings === null || spacings === void 0 ? void 0 : spacings.l);
+};
+var rounded = function (props) {
+    var corners = (0, styles_2.getCorners)(props);
+    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
+};
+var square = function (props) {
+    var corners = (0, styles_2.getCorners)(props);
+    return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.m);
+};
+var success = function (props) {
+    return createStatusCss(props, "success");
+};
+var error = function (props) {
+    return createStatusCss(props, "error");
+};
+var beta = function (props) {
+    return createStatusCss(props, "beta");
+};
+var pending = function (props) {
+    return createStatusCss(props, "pending");
+};
+var warning = function (props) {
+    return createStatusCss(props, "warning");
+};
+var info = function (props) {
+    return createStatusCss(props, "info");
+};
+function createStatusCss(props, status) {
+    var colors = (0, styles_2.getColors)(props);
+    if (!colors)
+        return;
+    var statusToColors = {
+        beta: {
+            dark: colors.beta[600],
+            light: colors.beta[200],
+        },
+        error: {
+            dark: colors.error[600],
+            light: colors.error[200],
+        },
+        info: {
+            dark: colors.info[600],
+            light: colors.info[200],
+        },
+        pending: {
+            dark: colors.gray[600],
+            light: colors.gray[200],
+        },
+        success: {
+            dark: colors.success[600],
+            light: colors.success[200],
+        },
+        warning: {
+            dark: colors.warning[600],
+            light: colors.warning[200],
+        },
+    };
+    var statusColors = statusToColors[status];
+    return (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n\n    .MuiChip-label {\n      color: ", ";\n    }\n  "], ["\n    background-color: ", ";\n\n    .MuiChip-label {\n      color: ", ";\n    }\n  "])), statusColors.light, statusColors.dark);
+}
+var statusToCss = {
+    beta: beta,
+    error: error,
+    info: info,
+    pending: pending,
+    success: success,
+    warning: warning,
+};
+var doNotForwardProps = ["isRounded"];
+exports.StyledChip = (0, styles_1.styled)(material_1.Chip, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
+    var size = props.size, status = props.status, isRounded = props.isRounded;
+    return (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), isRounded && rounded(props), !isRounded && square(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var utils_1 = require("src/common/utils");
+var OPTIONS = [
+    {
+        color: "#7057ff",
+        description: "Good for newcomers",
+        name: "good first issue",
+    },
+    {
+        color: "#008672",
+        description: "Extra attention is needed",
+        name: "help wanted",
+    },
+];
+var ComplexFilterNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.ComplexFilter, { label: "Click Target", onChange: utils_1.noop, multiple: true, search: true, options: OPTIONS, isTriggerChangeOnOptionClick: true }));
+};

package/dist/src/core/ComplexFilter/components/Chips/index.d.ts

@@ -0,0 +1,8 @@
+import { DefaultDropdownMenuOption } from "src/core/DropdownMenu";
+interface Props {
+    value: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null;
+    multiple?: boolean;
+    onDelete: (option: DefaultDropdownMenuOption) => void;
+}
+declare const Chips: ({ value, multiple, onDelete, }: Props) => JSX.Element | null;
+export default Chips;

package/dist/src/core/ComplexFilter/components/Chips/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TagFilter_1 = __importDefault(require("src/core/TagFilter"));
+var Chips = function (_a) {
+    var value = _a.value, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDelete = _a.onDelete;
+    if (!value)
+        return null;
+    if (!multiple) {
+        var name_1 = value.name;
+        return (0, jsx_runtime_1.jsx)(TagFilter_1.default, { label: name_1, onDelete: onDelete });
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value.map(function (item) {
+            var name = item.name;
+            return ((0, jsx_runtime_1.jsx)(TagFilter_1.default, { label: name, onDelete: function () { return onDelete(item); } }, name));
+        }) }));
+};
+exports.default = Chips;

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

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import { Value } from "../Dropdown";
+import DropdownMenu, { DefaultDropdownMenuOption } from "../DropdownMenu";
+import { StyledPopper } from "../DropdownMenu/style";
+import InputDropdown, { InputDropdownProps as InputDropdownPropsType } from "../InputDropdown";
+export { InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, };
+export interface ComplexFilterProps<Multiple> {
+    label: ReactNode;
+    options: DefaultDropdownMenuOption[];
+    multiple?: Multiple;
+    search?: boolean;
+    onChange: (options: Value<DefaultDropdownMenuOption, Multiple>) => void;
+    DropdownMenuProps?: Partial<typeof DropdownMenu>;
+    InputDropdownProps?: Partial<InputDropdownPropsType>;
+    value?: Value<DefaultDropdownMenuOption, Multiple>;
+    style?: React.CSSProperties;
+    className?: string;
+    PopperComponent?: typeof StyledPopper;
+    InputDropdownComponent?: typeof InputDropdown;
+    isTriggerChangeOnOptionClick?: boolean;
+}
+declare const ComplexFilter: <Multiple extends boolean | undefined = false>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<Multiple>) => JSX.Element;
+export default ComplexFilter;

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

@@ -0,0 +1,119 @@
+"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.ComplexFilterPopper = exports.ComplexFilterInputDropdown = 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, "ComplexFilterPopper", { enumerable: true, get: function () { return style_1.StyledPopper; } });
+var InputDropdown_1 = __importDefault(require("../InputDropdown"));
+exports.ComplexFilterInputDropdown = InputDropdown_1.default;
+var Chips_1 = __importDefault(require("./components/Chips"));
+var style_2 = require("./style");
+// eslint-disable-next-line sonarjs/cognitive-complexity
+var ComplexFilter = 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, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown_1.default : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
+    var isControlled = propValue !== undefined;
+    var _j = (0, react_1.useState)(false), open = _j[0], setOpen = _j[1];
+    var _k = (0, react_1.useState)(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var _l = (0, react_1.useState)(getInitialValue()), value = _l[0], setValue = _l[1];
+    var _m = (0, react_1.useState)(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
+    (0, react_1.useEffect)(function () {
+        onChange(value);
+        setPendingValue(value);
+    }, [value]);
+    (0, react_1.useEffect)(function () {
+        if (isControlled) {
+            setValue(propValue);
+        }
+    }, [propValue]);
+    // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
+    // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
+    // * such as sliders for ranges, inline multi selects, etc.
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(style_2.Wrapper, __assign({}, rest, { children: [(0, jsx_runtime_1.jsx)(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), (0, jsx_runtime_1.jsx)(style_2.StyledChipsWrapper, { children: (0, jsx_runtime_1.jsx)(Chips_1.default, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), (0, jsx_runtime_1.jsx)(DropdownMenu_1.default, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: (multiple ? pendingValue : value), onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps))] }));
+    function handleClick(event) {
+        if (open) {
+            if (multiple) {
+                setValue(pendingValue);
+            }
+            setOpen(false);
+            if (anchorEl) {
+                anchorEl.focus();
+            }
+            setAnchorEl(null);
+        }
+        else {
+            if (multiple) {
+                setPendingValue(value);
+            }
+            setAnchorEl(event.currentTarget);
+            setOpen(true);
+        }
+    }
+    function handleClose() {
+        if (open) {
+            setOpen(false);
+            if (multiple) {
+                setValue(pendingValue);
+            }
+        }
+    }
+    function handleMenuSelectClose(event, reason) {
+        var reasons = ["escape", "select-option"];
+        if (reasons.includes(reason)) {
+            handleClose();
+        }
+    }
+    function handleChange(_, newValue) {
+        if (multiple) {
+            if (isTriggerChangeOnOptionClick) {
+                setPendingValue(newValue);
+                return setValue(newValue);
+            }
+            return setPendingValue(newValue);
+        }
+        setValue(newValue);
+        setOpen(false);
+    }
+    function handleDelete(option) {
+        if (!multiple) {
+            return setValue(null);
+        }
+        var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
+        setValue(newValue);
+    }
+    function getInitialValue() {
+        if (isControlled) {
+            return propValue;
+        }
+        return multiple
+            ? []
+            : null;
+    }
+};
+exports.default = ComplexFilter;

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

@@ -0,0 +1,33 @@
+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: {
+        isTriggerChangeOnOptionClick: boolean;
+        label: string;
+        multiple: boolean;
+        onChange: (value: never) => void;
+        search: boolean;
+    };
+};
+export declare const LivePreview: {
+    args: {
+        keepSearchOnSelect: boolean;
+        multiple: boolean;
+        search: boolean;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};

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

@@ -0,0 +1,126 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var utils_1 = require("src/common/utils");
+var GITHUB_LABELS_1 = require("../DropdownMenu/GITHUB_LABELS");
+var index_1 = __importDefault(require("./index"));
+var ComplexFilter = 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);
+    },
+];
+exports.default = {
+    argTypes: {
+        isTriggerChangeOnOptionClick: {
+            control: {
+                type: "boolean",
+            },
+        },
+        label: {
+            control: {
+                type: "text",
+            },
+        },
+        multiple: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onChange: {
+            control: {
+                labels: ["Noop", "console.log(value)"],
+                type: "select",
+            },
+            mapping: onChangeOptions,
+            options: Object.keys(onChangeOptions),
+        },
+        search: {
+            control: {
+                type: "boolean",
+            },
+        },
+    },
+    component: ComplexFilter,
+    title: "ComplexFilter",
+};
+// Default
+exports.Default = {
+    args: {
+        isTriggerChangeOnOptionClick: false,
+        label: "Click Target",
+        multiple: true,
+        onChange: onChangeOptions[1],
+        search: true,
+    },
+};
+// Live preview
+var livePreviewStyles = {
+    display: "grid",
+    gridColumnGap: 30,
+    gridTemplateColumns: "repeat(3, min-content)",
+};
+var LivePreviewDemo = function () {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: { gridArea: "1/1/2/2" }, children: (0, jsx_runtime_1.jsx)(index_1.default, { DropdownMenuProps: {
+                        PopperBaseProps: {
+                            sx: { width: 160 },
+                        },
+                    }, label: "Filter Label", multiple: false, search: false, onChange: utils_1.noop, options: LIVE_PREVIEW_OPTIONS }) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "1/2/2/3" }, children: (0, jsx_runtime_1.jsx)(index_1.default, { DropdownMenuProps: {
+                        PopperBaseProps: {
+                            sx: { width: 160 },
+                        },
+                    }, label: "Filter Label", multiple: true, search: false, onChange: utils_1.noop, options: LIVE_PREVIEW_OPTIONS }) })] }));
+};
+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)); },
+};
+var LIVE_PREVIEW_OPTIONS = [
+    { name: "Filter Item 1" },
+    { name: "Filter Item 2" },
+    { name: "Filter Item 3" },
+];
+// Test
+var TestDemo = function (props) {
+    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ "data-testid": "complex-filter", label: "Click Target", onChange: utils_1.noop, options: GITHUB_LABELS_1.GITHUB_LABELS }, props)));
+};
+exports.Test = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};

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

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