react-restyle-components 0.2.54 → 0.2.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/package.json +1 -1
  2. package/lib/src/core-components/atoms/form/form.component.js +5 -5
  3. package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +1 -1
  4. package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js +1 -1
  5. package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map +1 -1
  6. package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +10 -4
  7. package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts +2 -2
  8. package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts.map +1 -1
  9. package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js +15 -16
  10. package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts +0 -1
  11. package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts.map +1 -1
  12. package/lib/src/core-components/molecules/autocomplete/autocomplete.js +9 -9
  13. package/lib/src/core-components/molecules/multi-select/multi-select.component.js +1 -1
  14. package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js +1 -1
  15. package/package.json +1 -1
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.53",
3
+ "version": "0.2.55",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
package/lib/src/core-components/atoms/form/form.component.js CHANGED
@@ -16,7 +16,7 @@ export const Input = React.forwardRef((props, ref) => {
16
16
  e.preventDefault();
17
17
  }
18
18
  };
19
- return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], {
19
+ return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
20
20
  [s['border-red']]: props.hasError,
21
21
  [s['border-gray-300']]: !props.hasError,
22
22
  }), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }) }));
@@ -29,19 +29,19 @@ export const InputPassword = React.forwardRef((props, ref) => {
29
29
  const handleMouseUp = () => {
30
30
  setShowPassword(false);
31
31
  };
32
- return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['relative']), children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:bg-boxdark'], {
32
+ return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['relative']), children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['dark:bg-boxdark'], {
33
33
  [s['border-red']]: props.hasError,
34
34
  [s['border-gray-300']]: !props.hasError,
35
35
  }), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }), _jsx("div", { className: cn(s['flex'], s['absolute'], s['right-3']), children: _jsx("svg", { className: cn(s['h-6'], s['dark:bg-boxdark']), fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: showPassword ? (_jsx("path", { fill: "currentColor", d: "M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" })) : (_jsx("path", { fill: "currentColor", d: "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z" })) }) })] }) }));
36
36
  });
37
- export const MultilineInput = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, className: props.className, children: _jsx("textarea", { id: props.id, autoComplete: "given-name", value: props.value, disabled: props.disabled, style: props.style, rows: props.rows, onKeyUp: props.onKeyUp && props.onKeyUp, placeholder: props.placeholder, onChange: (e) => props.onChange && props.onChange(e.target.value), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:bg-boxdark'], {
37
+ export const MultilineInput = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, className: props.className, children: _jsx("textarea", { id: props.id, autoComplete: "given-name", value: props.value, disabled: props.disabled, style: props.style, rows: props.rows, onKeyUp: props.onKeyUp && props.onKeyUp, placeholder: props.placeholder, onChange: (e) => props.onChange && props.onChange(e.target.value), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['dark:bg-boxdark'], {
38
38
  [s['border-red']]: props.hasError,
39
39
  [s['border-gray-300']]: !props.hasError,
40
40
  }), defaultValue: props.defaultValue }) }));
41
41
  export const InputRadio = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.labelStyle, children: props.values?.map((item, key) => (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), onClick: () => {
42
42
  props.onChange && props.onChange(item.value);
43
43
  }, children: [_jsx("input", { type: "radio", id: props.id, name: props.name, value: item.value, checked: item.value == props.value ? true : false, onChange: () => props.onChange && props.onChange(item.value), className: cn(s['w-4'], s['h-4'], s['text-blue-600'], s['bg-gray-100'], s['border-gray-300'], s['focus:ring-blue-500'], s['dark:focus:ring-blue-600'], s['dark:ring-offset-gray-800'], s['focus:ring-2'], s['dark:bg-gray-700'], s['dark:border-gray-600']) }, key), _jsx(Label, { htmlFor: props.id || '', style: { marginTop: 6 }, children: item.label })] }, key))) }));
44
- export const InputDate = ({ name, value, label, id, hasError, disabled, format, onChange, onFocusRemove, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: "date", id: id, name: name, disabled: disabled || false, value: value, onChange: (e) => onChange && onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], {
44
+ export const InputDate = ({ name, value, label, id, hasError, disabled, format, onChange, onFocusRemove, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: "date", id: id, name: name, disabled: disabled || false, value: value, onChange: (e) => onChange && onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
45
45
  [s['border-red']]: hasError,
46
46
  [s['border-gray-300']]: !hasError,
47
47
  }) }) }));
@@ -54,7 +54,7 @@ export const InputDateTime = ({ type, id, label, hasError, className, min, onCha
54
54
  export const CheckBox = (props) => {
55
55
  return (_jsxs("div", { children: [_jsx("input", { onClick: props.handleCheckChieldElement, type: "checkbox", checked: props.isChecked, value: props.value }, props.id), ' ', props.value] }));
56
56
  };
57
- export const InputFile = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, children: _jsx("input", { type: "file", id: props.id, name: props.name, disabled: props.disabled || false, accept: props.accept, value: props.value, onChange: (e) => props.onChange && props.onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], {
57
+ export const InputFile = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, children: _jsx("input", { type: "file", id: props.id, name: props.name, disabled: props.disabled || false, accept: props.accept, value: props.value, onChange: (e) => props.onChange && props.onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
58
58
  [s['border-red']]: props.hasError,
59
59
  [s['border-gray-300']]: !props.hasError,
60
60
  }), multiple: props.multiple }) }));
package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js CHANGED
@@ -72,7 +72,7 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
72
72
  onFilter && onFilter(search);
73
73
  }
74
74
  };
75
- 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-2'], {
75
+ 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'], {
76
76
  [s['border-red']]: hasError,
77
77
  [s['border-gray-300']]: !hasError,
78
78
  }, s['rounded-md']), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js CHANGED
@@ -40,7 +40,7 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
40
40
  onFilter(search);
41
41
  });
42
42
  };
43
- return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, 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-2'], {
43
+ return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, 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'], {
44
44
  [s['border-red']]: hasError,
45
45
  [s['border-gray-300']]: !hasError,
46
46
  }, s['rounded-md']), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAEhC,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAiKvD,CAAC"}
1
+ {"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAIhC,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CA+LvD,CAAC"}
package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js CHANGED
@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
3
3
  import { useState, useEffect, useRef } from 'react';
4
4
  import { Icon } from '../../atoms/icons/icons.component';
5
5
  import '../../../tc.module.css';
6
+ import s from '../../../tc.module.css';
7
+ import { cn } from '../../../core-utils';
6
8
  export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
7
9
  const [value, setValue] = useState(displayValue);
8
10
  const [options, setOptions] = useState(data.list);
@@ -57,22 +59,26 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
57
59
  }
58
60
  }
59
61
  };
60
- return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md dark:text-black`, children: [_jsx("input", { placeholder: placeholder, type: keyboard, value: value, className: `${className} w-full focus:outline-none bg-none dark:text-black`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
62
+ return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
63
+ [s['border-red']]: hasError,
64
+ [s['border-gray-300']]: !hasError,
65
+ [s['dark:text-black']]: true,
66
+ }), children: [_jsx("input", { placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
61
67
  color: '#000000',
62
68
  size: 22,
63
69
  } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
64
70
  color: '#000000',
65
71
  size: 22,
66
72
  } }))] }), options && isListOpen
67
- ? options.length > 0 && (_jsx("div", { className: `mt-1 absolute w-full bg-gray-100 p-2 rounded-sm `, style: {
73
+ ? options.length > 0 && (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm']), style: {
68
74
  zIndex: 500,
69
- }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: "text-gray-400 flex items-center", onClick: () => {
75
+ }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
70
76
  setValue(data.displayKey
71
77
  .map((key) => `${item[key]}`)
72
78
  .join(' - '));
73
79
  setIsListOpen(false);
74
80
  onSelect && onSelect(item);
75
- }, children: _jsx("label", { className: "ml-2 mt-1 text-black", style: {
81
+ }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
76
82
  textOverflow: 'ellipsis',
77
83
  minWidth: 0,
78
84
  overflow: 'hidden',
package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  interface AutocompleteGroupByProps {
2
2
  data: any[];
3
- onChange?: (item: any, children: any) => void;
4
3
  hasError?: boolean;
5
4
  displayValue?: string;
5
+ onChange?: (item: any, children: any) => void;
6
6
  onClose?: () => void;
7
7
  }
8
- export declare const AutocompleteGroupBy: (props: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const AutocompleteGroupBy: ({ data, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
9
9
  export {};
10
10
  //# sourceMappingURL=auto-complete-group-by.component.d.ts.map
package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CAyPlE,CAAC"}
1
+ {"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,yDAM7B,wBAAwB,4CAqP1B,CAAC"}
package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js CHANGED
@@ -4,9 +4,9 @@ import { useState, useEffect, useRef } from 'react';
4
4
  import { Icon } from '../../atoms/icons/icons.component';
5
5
  import s from '../../../tc.module.css';
6
6
  import { cn } from '../../../core-utils';
7
- export const AutocompleteGroupBy = (props) => {
7
+ export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue = '', onChange, onClose, }) => {
8
8
  //const [userRouter, setUserRouter] = useState<any>()
9
- const [value, setValue] = useState(props.displayValue);
9
+ const [value, setValue] = useState(displayValue);
10
10
  const [options, setOptions] = useState();
11
11
  const [isListOpen, setIsListOpen] = useState(false);
12
12
  const useOutsideAlerter = (ref) => {
@@ -31,11 +31,11 @@ export const AutocompleteGroupBy = (props) => {
31
31
  const wrapperRef = useRef(null);
32
32
  useOutsideAlerter(wrapperRef);
33
33
  useEffect(() => {
34
- setValue(props.displayValue);
35
- }, [props.displayValue]);
34
+ setValue(displayValue);
35
+ }, [displayValue]);
36
36
  useEffect(() => {
37
- setOptions(props.data || []);
38
- }, [props]);
37
+ setOptions(data || []);
38
+ }, [data]);
39
39
  const uniqByKeepFirst = (a, key) => {
40
40
  const seen = new Set();
41
41
  return a.filter((item) => {
@@ -74,17 +74,17 @@ export const AutocompleteGroupBy = (props) => {
74
74
  setOptions(data);
75
75
  }
76
76
  };
77
- const onChange = (e) => {
77
+ const onChangeValue = (e) => {
78
78
  const search = e.target.value;
79
79
  setValue(search);
80
- filter(search, props.data);
80
+ filter(search, data);
81
81
  };
82
- return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], {
83
- [s['border-red']]: props.hasError,
84
- [s['border-gray-300']]: !props.hasError,
82
+ return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
83
+ [s['border-red']]: hasError,
84
+ [s['border-gray-300']]: !hasError,
85
85
  }, s['rounded-md']), children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: cn(s['w-full'] + ' ' + s['focus:outline-none']),
86
86
  // onKeyUp={onKeyUp}
87
- onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
87
+ onChange: onChangeValue, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
88
88
  if (e.key === 'Enter') {
89
89
  e.preventDefault();
90
90
  // Find the selected item and children
@@ -104,8 +104,8 @@ export const AutocompleteGroupBy = (props) => {
104
104
  }
105
105
  }
106
106
  // Call props.onChange with the selected item and children
107
- if (props.onChange && selectedItem && selectedChildren) {
108
- props.onChange(selectedItem, selectedChildren);
107
+ if (onChange && selectedItem && selectedChildren) {
108
+ onChange(selectedItem, selectedChildren);
109
109
  }
110
110
  setIsListOpen(false);
111
111
  setValue(value); // Set the value to what the user entered
@@ -119,8 +119,7 @@ export const AutocompleteGroupBy = (props) => {
119
119
  size: 22,
120
120
  } }))] }), options && isListOpen
121
121
  ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['z-50'], s['rounded-md'], s['bg-gray-200'], s['w-100'], s['w-full']), children: _jsx("ul", { className: cn(s['flex'], s['p-2'], s['rounded-sm'], s['w-full']), children: _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['overflow-scroll']), style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: cn(s['flex'] + ' ' + s['text-gray-400']), children: item.title }, index), _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['ml-4'], s['w-full']), children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: cn(s['flex'], s['hover:bg-gray-200'], s['focus:outline-none'], s['cursor-pointer'], s['w-full']), onClick: async () => {
122
- props.onChange &&
123
- props.onChange(item, children);
122
+ onChange && onChange(item, children);
124
123
  setIsListOpen(false);
125
124
  setValue(children.title);
126
125
  setOptions([]);
package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import '../../../tc.module.css';
2
1
  interface AutocompleteProps {
3
2
  value: string;
4
3
  onValueChange: (value: string) => void;
package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAIhC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAkLnB,CAAC"}
1
+ {"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAgNnB,CAAC"}
package/lib/src/core-components/molecules/autocomplete/autocomplete.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState, useRef, useEffect, useCallback } from 'react';
3
- // import './autocomplete.css';
4
- import '../../../tc.module.css';
3
+ import s from '../../../tc.module.css';
4
+ import { cn } from '../../../core-utils';
5
5
  const LI_ELEMENT_HEIGHT = 34;
6
6
  export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
7
7
  const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
@@ -86,13 +86,13 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
86
86
  onValueChange,
87
87
  ]);
88
88
  const renderList = () => {
89
- return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: "flex absolute rounded-sm w-full", style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: "flex flex-col gap-1 bg-gray-200 w-full", id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
90
- let className = 'flex gap-2 p-2 ';
89
+ return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
90
+ let className = cn(s['flex'], s['gap-2'], s['p-2']);
91
91
  if (index === activeOption) {
92
- className = className + 'font-bold';
92
+ className = cn(className, s['font-bold']);
93
93
  }
94
94
  return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
95
- }) })) : (_jsxs("div", { className: "flex bg-gray-200 w-full p-2", children: [' ', _jsx("span", { children: "Not Found Result!!" }), ' '] })) }) })) : (_jsx(_Fragment, {})) }));
95
+ }) })) : (_jsx("div", { className: cn(s['flex'], s['bg-gray-200'], s['w-full'], s['p-2']), children: _jsx("span", { children: "Not Found Result!!" }) })) }) })) : (_jsx(_Fragment, {})) }));
96
96
  };
97
97
  useEffect(() => {
98
98
  // this only works on click when inside timeout
@@ -102,7 +102,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
102
102
  filteredOptions[0] && onValueChange(filteredOptions[0]);
103
103
  // setShouldShowList(true);
104
104
  }, []);
105
- return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col relative", children: [_jsx("div", { className: "flex leading-4 p-2 focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 rounded-md", children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: "flex focus:outline-none", placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
105
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative']), children: [_jsx("div", { className: cn(s['flex'], 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']), children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: cn(s['flex'], s['focus:outline-none']), placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
106
106
  setShouldShowList(true);
107
- } }) }), _jsx("div", { className: "flex", children: renderList() })] }) }));
107
+ } }) }), _jsx("div", { className: cn(s['flex']), children: renderList() })] }) }));
108
108
  };
package/lib/src/core-components/molecules/multi-select/multi-select.component.js CHANGED
@@ -23,7 +23,7 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
23
23
  }, [selectedItems]);
24
24
  const wrapperRef = useRef(null);
25
25
  useOutsideAlerter(wrapperRef);
26
- return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border-2'], {
26
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
27
27
  [s['border-red']]: hasError,
28
28
  [s['border-gray-300']]: !hasError,
29
29
  }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {
package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js CHANGED
@@ -25,7 +25,7 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
25
25
  }, [selectedItems]);
26
26
  const wrapperRef = useRef(null);
27
27
  useOutsideAlerter(wrapperRef);
28
- return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border-2'], {
28
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
29
29
  [s['border-red']]: hasError,
30
30
  [s['border-gray-300']]: !hasError,
31
31
  }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.54",
3
+ "version": "0.2.56",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {