@codezee/sixtify-brahma 0.2.7 → 0.2.8

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts

@@ -0,0 +1,23 @@
+import { type PropsWithChildren } from "react";
+import type { FilterListType } from "./FilterTypeWrapper";
+import { type PopoverProps } from "@mui/material";
+import type { Control, FieldValues } from "react-hook-form";
+type FilterPopupWrapperProp = PropsWithChildren<PopoverProps> & {
+    filterItem: FilterListType;
+    control: Control<FieldValues>;
+    currentFilterValue?: string | string[] | null;
+    onApply: () => void;
+};
+export type FilterPopupComponentType = {
+    autoComplete?: JSX.Element;
+    text: JSX.Element;
+    date: JSX.Element;
+    checkbox?: JSX.Element;
+    dateRange?: JSX.Element;
+    switch?: JSX.Element;
+    radio?: JSX.Element;
+};
+export declare const GetFilterPopupComponent: (selectedFilter: FilterListType, control: Control<FieldValues>) => FilterPopupComponentType;
+export declare const FilterPopupWrapper: ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }: FilterPopupWrapperProp) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterPopupWrapper.d.ts.map

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPopupWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopupWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAO1D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAC9D,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAClB,cAAc,WACrB,OAAO,CAAC,WAAW,CAAC,KAC5B,wBAkDF,CAAC;AAEF,eAAO,MAAM,kBAAkB,mFAQ5B,sBAAsB,4CAmBxB,CAAC"}

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterPopupWrapper = exports.GetFilterPopupComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilterPopup_1 = require("./FilterPopup");
+const FormFields_1 = require("../FormFields");
+const material_1 = require("@mui/material");
+const PadBox_1 = require("../PadBox");
+const GetFilterPopupComponent = (selectedFilter, control) => {
+    const theme = (0, material_1.useTheme)();
+    const { sapphireBlue, black } = theme.palette.app.color;
+    return {
+        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: `Select ${selectedFilter.label}`, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], sx: {
+                maxHeight: "250px",
+                overflowY: "auto",
+                width: "100%",
+                "& .MuiAutocomplete-tag": {
+                    backgroundColor: sapphireBlue[300],
+                    color: black[900],
+                },
+            } })),
+        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: selectedFilter.label })),
+        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
+        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
+    };
+};
+exports.GetFilterPopupComponent = GetFilterPopupComponent;
+const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }) => {
+    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, exports.GetFilterPopupComponent)(filterItem, control)[filterItem.type] }) }));
+};
+exports.FilterPopupWrapper = FilterPopupWrapper;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts

@@ -0,0 +1,25 @@
+import type { Control, FieldValues } from "react-hook-form";
+export type FilterComponentType = "autoComplete" | "text" | "date" | "dateRange" | "checkbox" | "radio" | "switch";
+type Options = readonly {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    avatar?: string;
+}[];
+export type FilterListType = {
+    label: string;
+    isDisabled?: boolean;
+    key: string;
+    value: string;
+    type: FilterComponentType;
+    menuInfo?: string;
+    options?: Options;
+    multiSelect?: boolean;
+};
+type FilterTypeWrapperProps = {
+    filter: FilterListType;
+    control: Control<FieldValues>;
+};
+export declare const FilterTypeWrapper: ({ filter, control, }: FilterTypeWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterTypeWrapper.d.ts.map

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTypeWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterTypeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAC3B,cAAc,GACd,MAAM,GACN,MAAM,GACN,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,KAAK,OAAO,GAAG,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,EAAE,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,iBAAiB,yBAG3B,sBAAsB,4CAoBxB,CAAC"}

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTypeWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Switch_1 = require("../FormFields/Switch");
+const FilterTypeWrapper = ({ filter, control, }) => {
+    const getFilterByType = (type) => {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", width: "100%", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), type === "switch" ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { control: control, name: filter.key })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.menuInfo }))] }));
+    };
+    return (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { children: getFilterByType(filter.type) });
+};
+exports.FilterTypeWrapper = FilterTypeWrapper;

package/packages/shared-components/dist/FilterList/getFormData.d.ts

@@ -0,0 +1,3 @@
+import type { FilterListType } from "./FilterTypeWrapper";
+export declare const getFormValue: (value: unknown, item: FilterListType) => unknown;
+//# sourceMappingURL=getFormData.d.ts.map

package/packages/shared-components/dist/FilterList/getFormData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFormData.d.ts","sourceRoot":"","sources":["../../src/FilterList/getFormData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAO,MAAM,YAAY,UAAW,OAAO,QAAQ,cAAc,YA0BhE,CAAC"}

package/packages/shared-components/dist/FilterList/getFormData.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormValue = void 0;
+const getFormValue = (value, item) => {
+    let keyValue = value;
+    if (item && item.type === "autoComplete") {
+        if (item.multiSelect && Array.isArray(value)) {
+            keyValue = item.options
+                ?.filter((option) => value.includes(option.value))
+                .map((option) => option.label)
+                .join(", ");
+        }
+        else {
+            keyValue = item.options
+                ?.filter((option) => option.value === value)
+                .map((option) => option.label)
+                .join(", ");
+        }
+    }
+    if (item.type === "dateRange" && Array.isArray(value) && value.length === 2) {
+        const startDate = value[0];
+        const endDate = value[1];
+        keyValue = `${startDate} <= Start Date <= ${endDate}`;
+    }
+    return keyValue;
+};
+exports.getFormValue = getFormValue;

package/packages/shared-components/dist/FilterList/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./FilterPopup";
+export * from "./FilterList";
+export * from "./FilterListV2";
+export * from "./FilterTypeWrapper";
+export * from "./FilterPopupWrapper";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/FilterList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FilterList/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/packages/shared-components/dist/FilterList/index.js

@@ -0,0 +1,21 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FilterPopup"), exports);
+__exportStar(require("./FilterList"), exports);
+__exportStar(require("./FilterListV2"), exports);
+__exportStar(require("./FilterTypeWrapper"), exports);
+__exportStar(require("./FilterPopupWrapper"), exports);

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,39 @@
+import type { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
+import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+export type Option = {
+    heading?: string;
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    employee_code?: string;
+    avatar?: string;
+    punch_code?: string;
+};
+export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & Omit<Omit<MuiAutocompleteProps<{
+    heading?: string;
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    avatar?: string;
+    employee_code?: string;
+    punch_code?: string;
+}, boolean, boolean, boolean>, "renderInput">, keyof ControllerRenderProps<P>> & {
+    required?: boolean;
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    withLabel?: boolean;
+    placeholder?: string;
+    isShowAvatar?: boolean;
+    shouldCloseOnSelect?: boolean;
+    onAction?: () => void;
+    isShowSelectAll?: boolean;
+    isShowOptionsOnType?: boolean;
+    maxLimit?: number;
+    renderOption?: (props: React.HTMLProps<HTMLLIElement>, option: Option, state: {
+        selected: boolean;
+    }) => JSX.Element;
+    getOptionLabel?: (option: string) => string;
+};
+export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmB/E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAOzB,MAAM,MAAM,MAAM,GAAG;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAClB;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,EACD,OAAO,EACP,OAAO,EACP,OAAO,CACR,EACD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAkZtB"}

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = Autocomplete;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const Actions_1 = require("../../Actions");
+const Toast_1 = require("../../Toast");
+const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
+const Skeleton_1 = require("./Skeleton");
+function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, ...restProps }) {
+    const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const handleSelectAll = (isSelected) => {
+        if (isSelected) {
+            const allValues = options.map((option) => option.value);
+            onChange(allValues);
+        }
+        else {
+            onChange([]);
+        }
+    };
+    const highlightedOptionRef = (0, react_1.useRef)("");
+    const isAllSelected = (0, react_1.useMemo)(() => {
+        return (multiple &&
+            isShowSelectAll &&
+            options.length > 0 &&
+            value?.length === options.filter((option) => !option.disabled).length);
+    }, [multiple, isShowSelectAll, options, value]);
+    const memoizedOptions = (0, react_1.useMemo)(() => {
+        return [
+            ...(multiple && isShowSelectAll && options.length
+                ? [{ label: "Select All", value: "select-all" }]
+                : []),
+            ...options,
+        ];
+    }, [multiple, isShowSelectAll, options]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (inputValue.length < 3) {
+            return [];
+        }
+        return options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+    }, [inputValue]);
+    // eslint-disable-next-line sonarjs/function-return-type
+    const selectedValue = (0, react_1.useMemo)(() => {
+        if (multiple && freeSolo) {
+            return (value?.map((val) => {
+                const selectedOption = options.find((option) => option.value === val);
+                return selectedOption ? selectedOption.label : val.toString();
+            }) || []);
+        }
+        else if (withLabel) {
+            return options.find((option) => option.value === value?.value) ?? null;
+        }
+        else if (multiple) {
+            return options.filter((option) => value?.includes(option.value));
+        }
+        else if (!options.find((option) => option.value === value) && freeSolo) {
+            return value;
+        }
+        return options.find((option) => option.value === value) || null;
+    }, [multiple, options, value]);
+    const { palette: { app: { color }, }, } = (0, material_1.useTheme)();
+    const StyledPaper = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
+        "& .MuiAutocomplete-listbox": {
+            maxHeight: 200,
+            overflowY: "auto",
+            marginTop: "10px",
+            "&::-webkit-scrollbar": {
+                width: "6px",
+            },
+            "&::-webkit-scrollbar-thumb": {
+                backgroundColor: theme.palette.secondary.main,
+                borderRadius: "4px",
+            },
+            "&::-webkit-scrollbar-track": {
+                backgroundColor: color.lightBlue[100],
+            },
+            "& .MuiAutocomplete-option": {
+                fontSize: "14px", // Change this to your desired font size
+            },
+        },
+    }));
+    const GroupHeader = (0, styles_1.styled)("div")(({ theme }) => ({
+        position: "sticky",
+        padding: "4px 10px",
+        fontSize: "16px",
+        fontWeight: 500,
+        color: theme.palette.app.color.butterflyBlue[900],
+        backgroundColor: theme.palette.app.color.butterflyBlue[500],
+    }));
+    const GroupItems = (0, styles_1.styled)("ul")({
+        padding: 0,
+    });
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label });
+    }
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    const handleKeyDown = (e) => {
+        if (e.code === "Space" && highlightedOptionRef.current) {
+            e.preventDefault();
+            if (multiple) {
+                if (highlightedOptionRef.current == "select-all") {
+                    handleSelectAll(!isAllSelected);
+                    return;
+                }
+                if (selectedValue && Array.isArray(selectedValue)) {
+                    if (maxLimit && selectedValue.length >= maxLimit) {
+                        Toast_1.toasts.error({
+                            title: t("common.autocomplete.limitExceed", { maxLimit }),
+                        });
+                        return;
+                    }
+                    const valuesArray = selectedValue.map((item) => item.value);
+                    if (valuesArray.includes(highlightedOptionRef.current)) {
+                        onChange(valuesArray.filter((value) => value !== highlightedOptionRef.current));
+                    }
+                    else {
+                        onChange([...valuesArray, highlightedOptionRef.current]);
+                    }
+                }
+            }
+            else {
+                onChange(highlightedOptionRef.current);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && (0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, children: label }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: StyledPaper, sx: {
+                            "& .MuiAutocomplete-tag": {
+                                backgroundColor: color.slate[700],
+                                color: "black",
+                            },
+                            width: "100%",
+                        }, onHighlightChange: (event, option) => {
+                            if (option) {
+                                if (highlightedOptionRef.current != option.value) {
+                                    highlightedOptionRef.current = option.value;
+                                }
+                            }
+                        }, disableCloseOnSelect: shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restProps, ...restField, renderTags: (value, getTagProps) => value.map((option, index) => {
+                            const { key, ...tagProps } = getTagProps({ index });
+                            const label = typeof option === "string" ? option : option.label;
+                            let avatarContent = "";
+                            let avatar = undefined;
+                            if (isShowAvatar) {
+                                if (!option.avatar) {
+                                    const initials = option.label
+                                        .split(" ")
+                                        .map((word) => word[0]?.toUpperCase())
+                                        .join("");
+                                    avatarContent = `${initials}`;
+                                }
+                                avatar = option.avatar ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: option.avatar, alt: option.label })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, { children: avatarContent }));
+                            }
+                            return ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: avatar, label: label, ...tagProps }, key));
+                        }), renderOption: (props, option, { selected }) => {
+                            if (renderOption) {
+                                return renderOption(props, option, { selected });
+                            }
+                            const { key, ...optionProps } = props;
+                            return ((0, jsx_runtime_1.jsx)("li", { ...optionProps, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: "small" }), indeterminate: !isAllSelected &&
+                                                        selectedValue?.length &&
+                                                        option.value === "select-all"
+                                                        ? true
+                                                        : false, checked: isAllSelected ? true : selected, sx: {
+                                                        marginRight: "8px",
+                                                        ".MuiCheckbox-indeterminate": {
+                                                            borderColor: color.butterflyBlue[900],
+                                                        },
+                                                    } })), option.label] }), option.value === "select-all" && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "280px" } }))] }) }, key));
+                        }, renderInput: (params) => {
+                            let startAdornment = params.InputProps.startAdornment;
+                            if (!multiple && selectedValue?.avatar && getOptionLabel) {
+                                startAdornment = ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "20px", marginLeft: "10px", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: selectedValue.avatar, alt: selectedValue.label, sx: { width: 24, height: 24 } }) }));
+                            }
+                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: placeholder || `Select ${label}`, error: error, helperText: helperText, InputProps: {
+                                    ...params.InputProps,
+                                    startAdornment,
+                                }, onChange: (e) => {
+                                    if (isShowOptionsOnType) {
+                                        setInputValue(e.target.value);
+                                    }
+                                }, onKeyDown: (e) => handleKeyDown(e) }));
+                        }, multiple: multiple, options: isShowOptionsOnType ? filteredOptions : memoizedOptions, isOptionEqualToValue: (option, value) => freeSolo ? false : option.value === value.value, onInputChange: (_, __, reason) => {
+                            if (reason === "clear") {
+                                setInputValue("");
+                            }
+                        }, getOptionLabel: (option) => {
+                            if (getOptionLabel) {
+                                return getOptionLabel(option);
+                            }
+                            if (typeof option === "string") {
+                                return option;
+                            }
+                            return option.label;
+                        }, value: selectedValue, 
+                        // eslint-disable-next-line sonarjs/cognitive-complexity
+                        onChange: (_, newValue) => {
+                            if (withLabel) {
+                                return onChange(newValue);
+                            }
+                            if (multiple &&
+                                Array.isArray(newValue) &&
+                                maxLimit &&
+                                newValue.length > maxLimit) {
+                                Toast_1.toasts.error({
+                                    title: t("common.autocomplete.limitExceed", { maxLimit }),
+                                });
+                                return;
+                            }
+                            if (multiple && isShowSelectAll && Array.isArray(newValue)) {
+                                const isSelectAllIncluded = newValue.some((option) => typeof option !== "string" && option?.value === "select-all");
+                                if (isSelectAllIncluded) {
+                                    handleSelectAll(!isAllSelected);
+                                    return;
+                                }
+                            }
+                            if (multiple && freeSolo) {
+                                if (Array.isArray(newValue)) {
+                                    // eslint-disable-next-line sonarjs/function-return-type
+                                    const values = newValue.map((option) => {
+                                        return typeof option === "string" ? option : option.value;
+                                    });
+                                    return onChange(values);
+                                }
+                                return onChange(value || []);
+                            }
+                            if (typeof newValue === "string") {
+                                return onChange(newValue ?? null);
+                            }
+                            if (Array.isArray(newValue)) {
+                                // eslint-disable-next-line sonarjs/function-return-type
+                                const values = newValue.map((option) => {
+                                    if (typeof option === "string") {
+                                        return newValue;
+                                    }
+                                    return option.value;
+                                });
+                                return onChange(values);
+                            }
+                            onChange(newValue ? newValue.value : null);
+                        }, groupBy: (option) => option.heading ?? "", renderGroup: (params) => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)(GroupHeader, { children: params.group }), (0, jsx_runtime_1.jsx)(GroupItems, { children: params.children })] }, params.key)), getOptionDisabled: (option) => !!option.disabled }), onAction && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: disabled, sx: {
+                            border: `1px solid ${color.iron[800]}`,
+                            padding: "0px",
+                            borderRadius: "5px",
+                        }, onClick: onAction, children: (0, jsx_runtime_1.jsx)(Actions_1.EditAction, {}) }))] })] }));
+}

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.d.ts

@@ -0,0 +1,6 @@
+type SkeletonProps = {
+    label?: string;
+};
+export declare const Skeleton: ({ label }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,eAAO,MAAM,QAAQ,cAAe,aAAa,4CAoBhD,CAAC"}

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Skeleton = ({ label }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+                    transform: "scale(1)",
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                    transform: "scale(1)",
+                } })] }));
+};
+exports.Skeleton = Skeleton;

package/packages/shared-components/dist/FormFields/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Autocomplete";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/FormFields/Autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/packages/shared-components/dist/FormFields/Autocomplete/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Autocomplete"), exports);

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.d.ts

@@ -0,0 +1,7 @@
+import { type CheckboxProps as MuiCheckboxProps } from "@mui/material/Checkbox";
+import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+export type CheckBoxProps<P extends FieldValues> = UseControllerProps<P> & Omit<Omit<MuiCheckboxProps, "checked">, keyof ControllerRenderProps<P>> & {
+    loading?: boolean;
+};
+export declare function CheckBox<P extends FieldValues>({ name, rules, control, defaultValue, size, loading, ...restCheckBoxProps }: CheckBoxProps<P>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckBox.d.ts.map

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../src/FormFields/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAiB,EACf,KAAK,aAAa,IAAI,gBAAgB,EACvC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACtE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAe,EACf,GAAG,iBAAiB,EACrB,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkBlB"}

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckBox = CheckBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const react_hook_form_1 = require("react-hook-form");
+const CheckBox_styled_1 = require("./CheckBox.styled");
+const Skeleton_1 = require("./Skeleton");
+function CheckBox({ name, rules, control, defaultValue, size, loading = false, ...restCheckBoxProps }) {
+    const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: size }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: size }), checked: value, ...restField, ...restCheckBoxProps }));
+}

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.styled.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckStyled = exports.BoxStyled = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+exports.BoxStyled = (0, material_1.styled)(material_1.Box)(({ theme, size, }) => {
+    const { color } = theme.palette.app;
+    const checkBoxSize = size === "small"
+        ? {
+            width: "14px",
+            height: "14px",
+        }
+        : {
+            width: "20px",
+            height: "20px",
+        };
+    const style = {
+        ...checkBoxSize,
+        borderRadius: "4px",
+        border: `2px solid ${color.iron[900]}`,
+        "input:hover ~ &": {
+            borderColor: color.butterflyBlue[900],
+        },
+        "input:disabled ~ &": {
+            borderColor: color.iron[800],
+        },
+    };
+    return style;
+});
+exports.CheckStyled = (0, material_1.styled)(icons_material_1.Check)(({ theme, size, }) => {
+    const { color } = theme.palette.app;
+    const checkBoxSize = size === "small"
+        ? {
+            width: "14px",
+            height: "14px",
+        }
+        : {
+            width: "20px",
+            height: "20px",
+        };
+    const style = {
+        ...checkBoxSize,
+        border: `2px solid ${color.butterflyBlue[900]}`,
+        borderRadius: "4px",
+        color: color.iron[600],
+        backgroundColor: color.butterflyBlue[900],
+        "input:disabled ~ &": {
+            borderColor: color.iron[800],
+            backgroundColor: color.iron[800],
+        },
+    };
+    return style;
+});

package/packages/shared-components/dist/FormFields/CheckBox/Skeleton.d.ts

@@ -0,0 +1,2 @@
+export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/packages/shared-components/dist/FormFields/CheckBox/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/CheckBox/Skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CASpB,CAAC"}

package/packages/shared-components/dist/FormFields/CheckBox/Skeleton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Skeleton = () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 30, height: 30, sx: { borderRadius: "4px" }, variant: "rectangular" }));
+};
+exports.Skeleton = Skeleton;