react-restyle-components 0.1.85 → 0.1.86

package/lib/cjs/src/core-components/molecules/css-multiline-input/css-properties.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.properties = void 0;
+/* eslint-disable no-sparse-arrays */
+exports.properties = [
+    {
+        alignContent: [
+            'flex-start',
+            'flex-end',
+            'center',
+            'stretch',
+            'space-between',
+            'space-around',
+        ],
+    },
+    { alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'] },
+    {
+        alignSelf: [
+            'auto',
+            'flex-start',
+            'flex-end',
+            'center',
+            'baseline',
+            'stretch',
+        ],
+    },
+    { flex: ['number', 'string'] },
+    { flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'] },
+    { flexWrap: ['nowrap', 'wrap', 'wrap-reverse'] },
+    { flexFlow: ['number'] },
+    { flexGrow: ['number'] },
+    { flexShrink: ['number'] },
+    { flexBasis: ['number', 'string'] },
+    {
+        justifyContent: [
+            ,
+            'flex-start',
+            'flex-end',
+            'center',
+            'space-around',
+            'space-between',
+            'space-evenly',
+        ],
+    },
+    { gap: ['number', 'string'] },
+    { rowGap: ['number'] },
+    { columnGap: ['number'] },
+    // Layout
+    { aspectRatio: ['number', 'string'] },
+    { bottom: ['number', 'string'] },
+    { display: ['flex', 'none'] },
+    { left: ['number', 'string'] },
+    { position: ['absolute', 'relative'] },
+    { right: ['number', 'string'] },
+    { top: ['number', 'string'] },
+    { overflow: ['hidden'] },
+    { zIndex: ['number', 'string'] },
+    // Dimension
+    { height: ['number', 'string'] },
+    { maxHeight: ['number', 'string'] },
+    { maxWidth: ['number', 'string'] },
+    { minHeight: ['number', 'string'] },
+    { minWidth: ['number', 'string'] },
+    { width: ['number', 'string'] },
+    // Color
+    { backgroundColor: ['string'] },
+    { color: ['string'] },
+    { opacity: ['number'] },
+    // Text
+    { fontSize: ['number', 'string'] },
+    { fontFamily: ['string'] },
+    { fontStyle: ['string', 'normal'] },
+    {
+        fontWeight: [
+            ,
+            'number',
+            'thin',
+            'hairline',
+            'ultralight',
+            'extralight',
+            'light',
+            'normal',
+            'medium',
+            'semibold',
+            'demibold',
+            'bold',
+            'ultrabold',
+            'extrabold',
+            'heavy',
+            'black',
+        ],
+    },
+    { letterSpacing: ['number', 'string'] },
+    { lineHeight: ['number', 'string'] },
+    { maxLines: ['number'] },
+    { textAlign: ['left', 'right', 'center', 'justify'] },
+    {
+        textDecoration: [
+            ,
+            'line-through',
+            'underline',
+            'none',
+            'line-through underline',
+            'underline line-through',
+        ],
+    },
+    { textDecorationColor: ['string'] },
+    { textDecorationStyle: ['dashed', 'dotted', 'solid', 'string'] },
+    { textIndent: ['any'] },
+    { textOverflow: ['ellipsis'] },
+    { textTransform: ['capitalize', 'lowercase', 'uppercase'] },
+    { verticalAlign: ['sub', 'super'] },
+    // Sizing/positioning
+    { objectFit: ['string'] },
+    { objectPosition: ['number', 'string'] },
+    { objectPositionX: ['number', 'string'] },
+    { objectPositionY: ['number', 'string'] },
+    // Margin/padding
+    { margin: ['number', 'string'] },
+    { marginHorizontal: ['number', 'string'] },
+    { marginVertical: ['number', 'string'] },
+    { marginTop: ['number', 'string'] },
+    { marginRight: ['number', 'string'] },
+    { marginBottom: ['number', 'string'] },
+    { marginLeft: ['number', 'string'] },
+    { padding: ['number', 'string'] },
+    { paddingHorizontal: ['number', 'string'] },
+    { paddingVertical: ['number', 'string'] },
+    { paddingTop: ['number', 'string'] },
+    { paddingRight: ['number', 'string'] },
+    { paddingBottom: ['number', 'string'] },
+    { paddingLeft: ['number', 'string'] },
+    // Transformations
+    { transform: ['string'] },
+    { transformOrigin: ['number', 'string'] },
+    { transformOriginX: ['number', 'string'] },
+    { transformOriginY: ['number', 'string'] },
+    // Borders
+    { border: ['number', 'string'] },
+    { borderWidth: ['number', 'string'] },
+    { borderColor: ['string'] },
+    { borderStyle: ['dashed', 'dotted', 'solid'] },
+    { borderTop: ['number', 'string'] },
+    { borderTopColor: ['string'] },
+    { borderTopStyle: ['dashed', 'dotted', 'solid'] },
+    { borderTopWidth: ['number', 'string'] },
+    { borderRight: ['number', 'string'] },
+    { borderRightColor: ['string'] },
+    { borderRightStyle: ['dashed', 'dotted', 'solid'] },
+    { borderRightWidth: ['number', 'string'] },
+    { borderBottom: ['number', 'string'] },
+    { borderBottomColor: ['string'] },
+    { borderBottomStyle: ['dashed', 'dotted', 'solid'] },
+    { borderBottomWidth: ['number', 'string'] },
+    { borderLeft: ['number', 'string'] },
+    { borderLeftColor: ['string'] },
+    { borderLeftStyle: ['dashed', 'dotted', 'solid'] },
+    { borderLeftWidth: ['number', 'string'] },
+    { borderTopLeftRadius: ['number', 'string'] },
+    { borderTopRightRadius: ['number', 'string'] },
+    { borderBottomRightRadius: ['number', 'string'] },
+    { borderBottomLeftRadius: ['number', 'string'] },
+    { borderRadius: ['number', 'string'] },
+];

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ModalConfirmProps {
+    visible: boolean;
+    title?: string;
+    message: string;
+    submitTitle?: string;
+    closeTitle?: string;
+    onClick: () => void;
+    onClose: () => void;
+}
+export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, onClick, onClose, }: ModalConfirmProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.js

@@ -0,0 +1,60 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalConfirm = void 0;
+const react_1 = __importStar(require("react"));
+const reactstrap_1 = require("reactstrap");
+const ModalConfirm = ({ visible = false, title = 'Confirm', message = '', submitTitle = 'Send', closeTitle = 'Close', onClick, onClose, }) => {
+    const [showModal, setShowModal] = (0, react_1.useState)(visible);
+    (0, react_1.useEffect)(() => {
+        setShowModal(visible);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(reactstrap_1.Container, null, showModal && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50  outline-none focus:outline-none " },
+                react_1.default.createElement("div", { className: "relative  my-6  mx-auto " },
+                    react_1.default.createElement("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-fit min-w-80 bg-white outline-none focus:outline-none" },
+                        react_1.default.createElement("div", { className: "flex items-center justify-between p-2 border-b border-solid border-gray-300 rounded-t" },
+                            react_1.default.createElement("h3", { className: "text-2xl font-semibold" }, title),
+                            react_1.default.createElement("button", { className: "p-1  border-0 text-black opacity-1 ml-6 float-right text-3xl leading-none font-semibold outline-none focus:outline-none", onClick: () => {
+                                    setShowModal(false);
+                                    onClose && onClose();
+                                } },
+                                react_1.default.createElement("span", { className: " text-black h-6 w-6 text-2xl block outline-none focus:outline-none" }, "\u00D7"))),
+                        react_1.default.createElement("div", { className: "flex p-2" },
+                            react_1.default.createElement("div", { className: "flex" },
+                                react_1.default.createElement("span", { className: "text-md" }, message))),
+                        react_1.default.createElement("div", { className: "flex items-center justify-end p-2 border-t border-solid border-gray-300 rounded-b" },
+                            react_1.default.createElement("button", { className: "text-red-500 background-transparent font-bold uppercase p-2 text-sm outline-none focus:outline-none mr-1 mb-1", type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                    setShowModal(false);
+                                    onClose && onClose();
+                                } }, closeTitle),
+                            react_1.default.createElement("button", { className: "bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm p-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1", type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                    onClick();
+                                } }, submitTitle))))),
+            react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))))));
+};
+exports.ModalConfirm = ModalConfirm;

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModalConfirm } from './modal-confirm.component';
+declare const meta: Meta<typeof ModalConfirm>;
+export default meta;
+type Story = StoryObj<typeof ModalConfirm>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const modal_confirm_component_1 = require("./modal-confirm.component");
+const meta = {
+    title: 'Design System/Molecules/ModalConfirm',
+    component: modal_confirm_component_1.ModalConfirm,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { ModalConfirm } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        visible: true,
+        title: 'Confirm',
+        message: 'Are you sure delete?',
+        submitTitle: 'Submit',
+        onClick: () => { },
+        onClose: () => { },
+    },
+};

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.test.d.ts

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

package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.test.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const modal_confirm_component_1 = require("./modal-confirm.component");
+it('render ModalConfirm correctly', () => {
+    const modalConfirm = (0, _core_utils_1.render)(react_1.default.createElement(modal_confirm_component_1.ModalConfirm, { visible: true, title: "Confirm", message: "Are you sure delete?", onClick: () => jest.fn(), onClose: () => {
+            jest.fn();
+        } }));
+    expect(modalConfirm).toMatchSnapshot();
+});

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface MultiSelectProps {
+    options: Array<string>;
+    selectedItems?: Array<string>;
+    hasError?: boolean;
+    onSelect: (item: any) => any;
+}
+export declare const MultiSelect: ({ options, selectedItems, hasError, onSelect, }: MultiSelectProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.js

@@ -0,0 +1,79 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = void 0;
+/* eslint-disable  */
+const react_1 = __importStar(require("react"));
+const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
+    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
+    const useOutsideAlerter = (ref) => {
+        (0, react_1.useEffect)(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    (0, react_1.useEffect)(() => {
+        setSelectedOptions(selectedItems);
+    }, [selectedItems]);
+    const wrapperRef = (0, react_1.useRef)(null);
+    useOutsideAlerter(wrapperRef);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red  ' : 'border-gray-300'}`, ref: wrapperRef },
+            react_1.default.createElement("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
+                    setIsListOpen(!isListOpen);
+                } }, selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select'),
+            react_1.default.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
+                ? options?.length > 0 && (react_1.default.createElement("ul", null, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "flex items-center text-center" },
+                    react_1.default.createElement("input", { className: "bg-black", type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
+                            if (selectedOptions?.includes(item)) {
+                                setSelectedOptions(selectedOptions?.filter((e) => e != item));
+                            }
+                            else {
+                                if (selectedOptions?.length > 0) {
+                                    setSelectedOptions(selectedOptions?.concat([item]));
+                                }
+                                else {
+                                    setSelectedOptions([item]);
+                                }
+                            }
+                        }, onBlur: () => {
+                            if (!isListOpen)
+                                onSelect(selectedOptions);
+                        } }),
+                    ' ',
+                    react_1.default.createElement("label", { className: "ml-3 mt-2 pt-1 dark:text-white" },
+                        ' ',
+                        item))))))
+                : null))));
+};
+exports.MultiSelect = MultiSelect;

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiSelect } from './multi-select.component';
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const multi_select_component_1 = require("./multi-select.component");
+const meta = {
+    title: 'Design System/Molecules/MultiSelect',
+    component: multi_select_component_1.MultiSelect,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { MultiSelect } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        options: ['UPI', 'CARD', 'CASH'],
+        selectedItems: ['CASH', 'UPI'],
+        onSelect: (item) => {
+            console.log({ item });
+        },
+    },
+};

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.test.d.ts

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

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.test.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/await-async-query */
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const multi_select_component_1 = require("./multi-select.component");
+it('render MultiSelect correctly', () => {
+    const result = (0, _core_utils_1.render)(react_1.default.createElement(multi_select_component_1.MultiSelect, { options: ['UPI', 'CASH'], selectedItems: ['CASH'], onSelect: () => { } }));
+    expect(result).toMatchSnapshot();
+});

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface MultiSelectWithFieldProps {
+    displayField: string;
+    options: Array<any>;
+    selectedItems?: Array<any>;
+    hasError?: boolean;
+    onSelect: (item: any) => any;
+}
+export declare const MultiSelectWithField: ({ displayField, options, selectedItems, hasError, onSelect, }: MultiSelectWithFieldProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js

@@ -0,0 +1,88 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectWithField = void 0;
+/* eslint-disable  */
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
+    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
+    const useOutsideAlerter = ref => {
+        (0, react_1.useEffect)(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    (0, react_1.useEffect)(() => {
+        setSelectedOptions(selectedItems);
+    }, [selectedItems]);
+    const wrapperRef = (0, react_1.useRef)(null);
+    useOutsideAlerter(wrapperRef);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red  ' : 'border-gray-300'}`, ref: wrapperRef },
+            react_1.default.createElement("span", { className: 'p-2 mt-1 shadow-sm', onClick: () => {
+                    setIsListOpen(!isListOpen);
+                } }, selectedOptions?.length > 0
+                ? `${selectedOptions?.length} Items`
+                : 'Select'),
+            react_1.default.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
+                ? options?.length > 0 && (react_1.default.createElement("ul", { className: 'flex flex-col gap-1 p-2' }, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'flex items-center' },
+                    react_1.default.createElement("input", { className: 'flex bg-black', type: 'checkbox', checked: !lodash_1.default.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                            item[displayField]?.toUpperCase()))
+                            ? true
+                            : false, onChange: () => {
+                            if (!lodash_1.default.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                                item[displayField]?.toUpperCase()))) {
+                                setSelectedOptions(selectedOptions?.filter(e => e[displayField]?.toUpperCase() !=
+                                    item[displayField]?.toUpperCase()));
+                            }
+                            else {
+                                if (selectedOptions?.length > 0) {
+                                    setSelectedOptions(selectedOptions?.concat([item]));
+                                }
+                                else {
+                                    setSelectedOptions([item]);
+                                }
+                            }
+                        }, onBlur: () => {
+                            if (!isListOpen)
+                                onSelect(selectedOptions);
+                        } }),
+                    ' ',
+                    react_1.default.createElement("span", { className: 'flex ml-2  dark:text-white text-center' }, item[displayField]))))))
+                : null))));
+};
+exports.MultiSelectWithField = MultiSelectWithField;

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiSelectWithField } from './multi-select-with-field.component';
+declare const meta: Meta<typeof MultiSelectWithField>;
+export default meta;
+type Story = StoryObj<typeof MultiSelectWithField>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const multi_select_with_field_component_1 = require("./multi-select-with-field.component");
+const meta = {
+    title: 'Design System/Molecules/MultiSelectWithField',
+    component: multi_select_with_field_component_1.MultiSelectWithField,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { MultiSelectWithField } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        displayField: 'code',
+        options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }],
+        selectedItems: [{ code: 'CASH' }],
+        onSelect: (item) => {
+            console.log({ item });
+        },
+    },
+};

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.d.ts

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

package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/await-async-query */
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const multi_select_with_field_component_1 = require("./multi-select-with-field.component");
+it('render MultiSelectWithField correctly', () => {
+    const result = (0, _core_utils_1.render)(react_1.default.createElement(multi_select_with_field_component_1.MultiSelectWithField, { displayField: 'code', options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }], selectedItems: [{ code: 'CASH' }], onSelect: (item) => {
+            console.log({ item });
+        } }));
+    expect(result).toMatchSnapshot();
+});

package/lib/cjs/src/core-utils/index.d.ts

@@ -0,0 +1 @@
+export * from './unit-test.utils';

package/lib/cjs/src/core-utils/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("./unit-test.utils"), exports);

package/lib/cjs/src/core-utils/unit-test.utils.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const Providers: ({ children }: any) => React.JSX.Element;
+declare const render: any;
+export { render, Providers };

package/lib/cjs/src/core-utils/unit-test.utils.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Providers = exports.render = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Providers = ({ children }) => {
+    return react_1.default.createElement("div", null, children);
+};
+exports.Providers = Providers;
+const render = (Component) => {
+    return (0, react_2.render)(Component, { wrapper: Providers });
+};
+exports.render = render;

package/lib/cjs/src/index.d.ts

@@ -0,0 +1 @@
+import './index.css';