react-restyle-components 0.2.92 → 0.2.94

package/lib/src/core-components/index.d.ts

@@ -30,5 +30,6 @@ export * from './src/molecules/auto-complete-group-by/auto-complete-group-by.com
 export * from './src/molecules/color-picker/color-picker.component';
 export * from './src/molecules/color-picker-modal/color-picker-modal.component';
 export * from './src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component';
+export * from './src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component';
 export { Form };
 //# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,iCAAiC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sDAAsD,CAAC;AACrE,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAE5D,cAAc,mEAAmE,CAAC;AAClF,cAAc,qJAAqJ,CAAC;AACpK,cAAc,iJAAiJ,CAAC;AAChK,cAAc,qDAAqD,CAAC;AACpE,cAAc,2EAA2E,CAAC;AAC1F,cAAc,uCAAuC,CAAC;AACtD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yEAAyE,CAAC;AACxF,cAAc,qDAAqD,CAAC;AACpE,cAAc,iEAAiE,CAAC;AAChF,cAAc,iGAAiG,CAAC;AAEhH,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,iCAAiC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sDAAsD,CAAC;AACrE,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAE5D,cAAc,mEAAmE,CAAC;AAClF,cAAc,qJAAqJ,CAAC;AACpK,cAAc,iJAAiJ,CAAC;AAChK,cAAc,qDAAqD,CAAC;AACpE,cAAc,2EAA2E,CAAC;AAC1F,cAAc,uCAAuC,CAAC;AACtD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yEAAyE,CAAC;AACxF,cAAc,qDAAqD,CAAC;AACpE,cAAc,iEAAiE,CAAC;AAChF,cAAc,iGAAiG,CAAC;AAChH,cAAc,yIAAyI,CAAC;AAExJ,OAAO,EAAC,IAAI,EAAC,CAAC"}

package/lib/src/core-components/index.js

@@ -30,4 +30,5 @@ export * from './src/molecules/auto-complete-group-by/auto-complete-group-by.com
 export * from './src/molecules/color-picker/color-picker.component';
 export * from './src/molecules/color-picker-modal/color-picker-modal.component';
 export * from './src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component';
+export * from './src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component';
 export { Form };

package/lib/src/core-components/jest.config.d.ts

@@ -1,11 +1,11 @@
 declare const _default: {
-    present: string;
+    preset: string;
     testEnvironment: string;
     transform: {
         '^.+\\.tsx?$': string;
     };
     moduleNameMapper: {
-        '\\.(css|sass)$': string;
+        '\\.(css|scss|sass|less|style|svg)$': string;
     };
 };
 export default _default;

package/lib/src/core-components/jest.config.js

@@ -1,10 +1,10 @@
 export default {
-    present: 'ts-jest',
+    preset: 'ts-jest',
     testEnvironment: 'jest-environment-jsdom',
     transform: {
         '^.+\\.tsx?$': 'ts-jest',
     },
     moduleNameMapper: {
-        '\\.(css|sass)$': '<rootDir>/src/__mocks__/styleMock.ts',
+        '\\.(css|scss|sass|less|style|svg)$': '<rootDir>/__mocks__/styleMock.ts',
     },
 };

package/lib/src/core-components/src/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../src/core-components/src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAInB,iBAAS,GAAG,4CAiBX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../src/core-components/src/App.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,CAAC;AAInB,iBAAS,GAAG,4CAcX;AAED,eAAe,GAAG,CAAC"}

package/lib/src/core-components/src/atoms/button/Button.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=Button.spec.d.ts.map

package/lib/src/core-components/src/atoms/button/Button.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/atoms/button/Button.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/lib/src/core-components/src/atoms/button/{Button.test.js → Button.spec.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, it, expect } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Button } from './button.component';
 import { TooltipProvider } from '../tooltip/tooltip.component';
 describe('Renders a button', async () => {

package/lib/src/core-components/src/atoms/check-box/checkBox.spec.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { vi } from 'vitest';
 import { CheckBox } from './checkBox.component';
 describe('CheckBox Component', () => {
     test('renders CheckBox with default props', () => {
@@ -15,7 +14,7 @@ describe('CheckBox Component', () => {
         expect(screen.getByText('Custom Bank')).toBeInTheDocument();
     });
     test('calls onChange with correct arguments when checkbox is clicked', () => {
-        const handleChange = vi.fn();
+        const handleChange = jest.fn();
         render(_jsx(CheckBox, { title: "Banks", data: [{ title: 'SBI Bank', checked: false }], onChange: handleChange }));
         fireEvent.click(screen.getByText('SBI Bank'));
         expect(handleChange).toHaveBeenCalledWith([

package/lib/src/core-components/src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.d.ts

@@ -0,0 +1,17 @@
+export interface AutoCompleteFilterMultiSelectSelectedTopDisplayProps {
+    uniqueField?: string;
+    loader?: boolean;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    disable?: boolean;
+    isUpperCase?: boolean;
+    name?: string;
+    onFilter?: (value: string) => void;
+    onUpdate: (item: any) => void;
+    onSelect: (item: any, isSelectedRemove?: boolean) => any;
+    onBlur?: (e: any) => void;
+    dynamicCheck?: string;
+}
+export declare const AutoCompleteFilterMultiSelectSelectedTopDisplay: ({ uniqueField, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, dynamicCheck, }: AutoCompleteFilterMultiSelectSelectedTopDisplayProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auto-complete-filter-multi-select-selected-top-display.component.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-filter-multi-select-selected-top-display.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,oDAAoD;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC;IACzD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,+CAA+C,kIAazD,oDAAoD,4CA6NtD,CAAC"}

package/lib/src/core-components/src/molecules/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import React, { useState, useEffect, useRef } from 'react';
+import _ from 'lodash';
+import { Icon } from '../../atoms/icons/icons.component';
+import { debounce } from '@techabl/core-utils';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField = '_id', placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, dynamicCheck = 'panelCode', }) => {
+    const [value, setValue] = useState('');
+    const [options, setOptions] = useState();
+    const [originalOptions, setOriginalOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    if (originalOptions && options) {
+                        if (isListOpen) {
+                            onUpdate && onUpdate(data.selected);
+                        }
+                    }
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    let count = 0;
+    const getSelectedItem = (selectedItem, list) => {
+        if (count === 0) {
+            const finalList = list?.filter((item, index) => {
+                item.selected = false;
+                selectedItem && selectedItem.length > 0
+                    ? selectedItem?.find((sItem, index) => {
+                        if (sItem[uniqueField] === item[uniqueField]) {
+                            item.selected = true;
+                        }
+                    })
+                    : (item.selected = false);
+                count++;
+                return item;
+            });
+            list = finalList;
+        }
+        return list;
+    };
+    useEffect(() => {
+        setOriginalOptions(getSelectedItem(data.selected, data.list));
+        setOptions(getSelectedItem(data.selected, data.list));
+    }, [data, data.selected]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        debounce(() => {
+            onFilter && onFilter(search);
+        });
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.target.value;
+            debounce(() => {
+                onFilter && onFilter(search);
+            });
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                    }), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+                                ? `${(data.selected && data.selected.length) || 0} Items`
+                                : isUpperCase
+                                    ? value?.toUpperCase()
+                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp" })) : (_jsx(Icon, { nameIcon: "FaChevronDown" }))] }), options && isListOpen ? (options?.length > 0 ? (_jsxs("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-500']), style: { zIndex: 80, width: '100%' }, children: [_jsx("ul", { children: data.selected?.map((item, index) => (_jsx(React.Fragment, { children: _jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), children: _jsxs("label", { className: cn(s['flex']), children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => onSelect({ ...item, selected: true }, true) }), ' ', _jsx("span", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: data.displayKey
+                                                    .map((key) => `${item[key]}
+                              `)
+                                                    .join(' - ') })] }) }, index) }, index))) }), _jsx("hr", {}), _jsx("ul", { className: cn(s['p-2'], s['rounded-sm']), children: _jsx("div", { children: _jsx("div", { style: { height: 'auto', maxHeight: '300px' }, children: options?.map((item, index) => (_jsx(React.Fragment, { children: _.some(data.selected, {
+                                            [dynamicCheck]: item[dynamicCheck],
+                                        }) == false && (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), children: _jsxs("label", { className: cn(s['flex']), children: [_jsx("input", { type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: data.displayKey
+                                                            .map((key) => `${item[key]}
+                                          `)
+                                                            .join(' - ') })] }) }, index)) }, index))) }) }) })] })) : (_jsx("span", { className: cn(s['text-gray-400'], s['p-2']), children: "Item not found!" }))) : null] }) }));
+};

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=auto-complete-group-by.component.spec.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-group-by.component.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/lib/src/core-components/src/molecules/auto-complete-group-by/{auto-complete-group-by.component.test.js → auto-complete-group-by.component.spec.js}

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { AutocompleteGroupBy } from './auto-complete-group-by.component';
 describe('AutocompleteGroupBy component', () => {
     it('render autocompleteGroupBy correctly', () => {

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ColorPickerModal } from './color-picker-modal.component';
-test('Render Autocomplete', () => {
-    render(_jsx(ColorPickerModal, { color: "#000000", onChange: () => { } }));
+describe('ColorPickerModal', () => {
+    it('renders without crashing', () => {
+        const { container } = render(_jsx(ColorPickerModal, { color: "#000000", onChange: () => { } }));
+        expect(container).toBeInTheDocument();
+    });
 });

package/lib/src/core-hooks/src/usePreventEKey/usePreventEKey.hook.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 export declare const usePreventEKey: () => (e: React.KeyboardEvent<HTMLInputElement>) => void;
 //# sourceMappingURL=usePreventEKey.hook.d.ts.map

package/lib/src/core-hooks/src/usePreventEKey/usePreventEKey.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreventEKey.hook.d.ts","sourceRoot":"","sources":["../../../../../src/core-hooks/src/usePreventEKey/usePreventEKey.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,YACF,mBAAmB,CAAC,gBAAgB,CAAC,SAK7D,CAAC"}
+{"version":3,"file":"usePreventEKey.hook.d.ts","sourceRoot":"","sources":["../../../../../src/core-hooks/src/usePreventEKey/usePreventEKey.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,cAAc,YACF,mBAAmB,CAAC,gBAAgB,CAAC,SAK7D,CAAC"}

package/lib/src/core-utils/src/uuid/uuid.util.js

@@ -1,5 +1,5 @@
 /* eslint-disable unicorn/prefer-math-trunc */
-import _ from 'lodash';
+import * as _ from 'lodash';
 export function uuidv4(len) {
     return _.repeat('x', len).replace(/[xy]/g, function (c) {
         const r = (Math.random() * len) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.92",
+  "version": "0.2.94",
   "private": false,
   "description": "Easy use restyle components",
   "author": {

package/lib/src/core-components/src/atoms/button/Button.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Button.test.d.ts.map

package/lib/src/core-components/src/atoms/button/Button.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/atoms/button/Button.test.tsx"],"names":[],"mappings":""}

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=auto-complete-group-by.component.test.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"auto-complete-group-by.component.test.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.test.tsx"],"names":[],"mappings":""}