react-restyle-components 0.2.48 → 0.2.49

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 (18) hide show
  1. package/lib/package.json +1 -1
  2. package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts.map +1 -1
  3. package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js +5 -3
  4. 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
  5. package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +6 -4
  6. package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts.map +1 -1
  7. package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js +4 -9
  8. package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts +0 -1
  9. package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts.map +1 -1
  10. package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js +4 -3
  11. package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts.map +1 -1
  12. package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.js +6 -4
  13. package/lib/src/core-components/molecules/multi-select/multi-select.component.d.ts +0 -1
  14. package/lib/src/core-components/molecules/multi-select/multi-select.component.d.ts.map +1 -1
  15. package/lib/src/core-components/molecules/multi-select/multi-select.component.js +9 -5
  16. package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.d.ts.map +1 -1
  17. package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js +6 -4
  18. 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.47",
3
+ "version": "0.2.48",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"auto-complete-filter-single-select.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.tsx"],"names":[],"mappings":"AAKA,UAAU,mCAAmC;IAC3C,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,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,8BAA8B,wFASxC,mCAAmC,4CAuGrC,CAAC"}
1
+ {"version":3,"file":"auto-complete-filter-single-select.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.tsx"],"names":[],"mappings":"AAOA,UAAU,mCAAmC;IAC3C,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,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,8BAA8B,wFASxC,mCAAmC,4CAiIrC,CAAC"}
package/lib/src/core-components/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.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 { debounce } from '../../../core-utils';
6
+ import s from '../../../tc.module.css';
7
+ import { cn } from '../../../core-utils';
6
8
  export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, onFilter, onSelect, }) => {
7
9
  const [value, setValue] = useState(displayValue);
8
10
  const [options, setOptions] = useState();
@@ -36,7 +38,7 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
36
38
  onFilter(search);
37
39
  });
38
40
  };
39
- return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, 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`, children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: `w-full focus:outline-none bg-none`,
41
+ 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'], hasError ? s['border-red'] : s['border-gray-300'], s['rounded-md']), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']),
40
42
  // onKeyUp={onKeyUp}
41
43
  onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
42
44
  color: '#000000',
@@ -45,10 +47,10 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
45
47
  color: '#000000',
46
48
  size: 22,
47
49
  } }))] }), options && isListOpen
48
- ? options.length > 0 && (_jsx("div", { className: "mt-1 absolute bg-gray-100 p-2 rounded-sm z-50", children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: "text-gray-400 flex items-center", onClick: () => {
50
+ ? options.length > 0 && (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50']), children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
49
51
  setValue(item[data.displayKey]);
50
52
  setIsListOpen(false);
51
53
  onSelect(item);
52
- }, children: _jsx("label", { className: "ml-2 mt-1 text-black", children: item[data.displayKey] }) }, index) }))) }) }))
54
+ }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: item[data.displayKey] }) }, index) }))) }) }))
53
55
  : null] }) }));
54
56
  };
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,4CA8JvD,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,4CA2LvD,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);
@@ -55,22 +57,22 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
55
57
  }
56
58
  }
57
59
  };
58
- 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: {
60
+ 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'], hasError ? s['border-red'] : s['border-gray-300'], s['rounded-md'], s['dark:text-black']), children: [_jsx("input", { placeholder: placeholder, type: keyboard, value: value, className: cn(className, s['w-full'], s['focus:outline-none'], s['bg-none'], s['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: {
59
61
  color: '#000000',
60
62
  size: 22,
61
63
  } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
62
64
  color: '#000000',
63
65
  size: 22,
64
66
  } }))] }), options && isListOpen
65
- ? options.length > 0 && (_jsx("div", { className: `mt-1 absolute w-full bg-gray-100 p-2 rounded-sm `, style: {
67
+ ? 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: {
66
68
  zIndex: 500,
67
- }, children: _jsx("ul", { children: options?.map((item, index) => (_jsxs("li", { className: "text-gray-400 flex items-center", onClick: () => {
69
+ }, children: _jsx("ul", { children: options?.map((item, index) => (_jsxs("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
68
70
  setValue(data.displayKey
69
71
  .map((key) => `${item[key]}`)
70
72
  .join(' - '));
71
73
  setIsListOpen(false);
72
74
  onSelect && onSelect(item);
73
- }, children: [' ', _jsx("label", { className: "ml-2 mt-1 text-black", style: {
75
+ }, children: [' ', _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
74
76
  textOverflow: 'ellipsis',
75
77
  minWidth: 0,
76
78
  overflow: 'hidden',
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":"AAIA,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,4CA2MlE,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,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,4CAsPlE,CAAC"}
package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js CHANGED
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  /* eslint-disable */
3
3
  import { useState, useEffect, useRef } from 'react';
4
4
  import { Icon } from '../../atoms/icons/icons.component';
5
+ import s from '../../../tc.module.css';
6
+ import { cn } from '../../../core-utils';
5
7
  export const AutocompleteGroupBy = (props) => {
6
8
  //const [userRouter, setUserRouter] = useState<any>()
7
9
  const [value, setValue] = useState(props.displayValue);
@@ -77,14 +79,7 @@ export const AutocompleteGroupBy = (props) => {
77
79
  setValue(search);
78
80
  filter(search, props.data);
79
81
  };
80
- // const onKeyUp = e => {
81
- // const charCode = e.which ? e.which : e.keyCode;
82
- // if (charCode === 8) {
83
- // const search = e.target.value;
84
- // filter(search, data);
85
- // }
86
- // };
87
- return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 bg-white focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md`, children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: "w-full focus:outline-none",
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'], props.hasError ? s['border-red'] : s['border-gray-300'], s['rounded-md']), children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: cn(s['w-full'] + ' ' + s['focus:outline-none']),
88
83
  // onKeyUp={onKeyUp}
89
84
  onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
90
85
  if (e.key === 'Enter') {
@@ -120,7 +115,7 @@ export const AutocompleteGroupBy = (props) => {
120
115
  color: '#000000',
121
116
  size: 22,
122
117
  } }))] }), options && isListOpen
123
- ? options?.length > 0 && (_jsx("div", { className: "flex mt-1 absolute z-50 rounded-md bg-gray-200 w-100 w-full", children: _jsx("ul", { className: "flex p-2 rounded-sm w-full", children: _jsx("div", { className: "flex flex-col w-full overflow-scroll", style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: "flex text-gray-400", children: item.title }, index), _jsx("ul", { className: "flex flex-col ml-4 w-full", children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: "flex hover:bg-gray-200 focus:outline-none cursor-pointer w-full", onClick: async () => {
118
+ ? 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 () => {
124
119
  props.onChange &&
125
120
  props.onChange(item, children);
126
121
  setIsListOpen(false);
package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import '../../../tc.module.css';
2
1
  interface CSSMultilineProps {
3
2
  label?: string;
4
3
  defaultValue?: string;
package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAKA,OAAO,wBAAwB,CAAC;AAEhC,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;CACtB;AAWD,eAAO,MAAM,YAAY,sEAOtB,iBAAiB,4CAwGnB,CAAC"}
1
+ {"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;CACtB;AAWD,eAAO,MAAM,YAAY,sEAOtB,iBAAiB,4CA8HnB,CAAC"}
package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js CHANGED
@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useState, useRef } from 'react';
3
3
  import * as Form from '../../atoms/form/form.component';
4
4
  import { properties as propertiesObj } from './css-properties';
5
- import '../../../tc.module.css';
5
+ import s from '../../../tc.module.css';
6
+ import { cn } from '../../../core-utils';
6
7
  const mapToArray = (arr) => {
7
8
  const res = [];
8
9
  arr.forEach(function (obj, index) {
@@ -60,10 +61,10 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
60
61
  const onKeyUp = (e) => {
61
62
  setIsListOpen(true);
62
63
  };
63
- return (_jsxs("div", { className: "flex flex-col w-full", ref: wrapperRef, children: [_jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: className, onKeyUp: onKeyUp, onChange: (css) => {
64
+ return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full']), ref: wrapperRef, children: [_jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
64
65
  value.current = css;
65
66
  filter(css);
66
- } }), isListOpen && (_jsx("div", { style: { marginTop: -10 }, children: _jsx("ul", { className: "flex flex-col max-h-40 bg-black m-2 text-white overflow-y-scroll ", children: properties?.map((item, index) => (_jsxs("li", { className: "flex flex-col gap-4 p-2", children: [_jsx("span", { className: "underline", children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: "flex -mt-2 px-2 h-8 bg-slate-800 rounded-md items-center cursor-pointer", onClick: () => {
67
+ } }), isListOpen && (_jsx("div", { style: { marginTop: -10 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['max-h-40'], s['bg-black'], s['m-2'], s['text-white'], s['overflow-y-scroll']), children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['flex-col'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['-mt-2'], s['px-2'], s['h-8'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
67
68
  let existsString = value.current?.split(',');
68
69
  if (value.current.includes(',')) {
69
70
  existsString = existsString.map((item) => {
package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAGA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,4EAQtB,iBAAiB,4CAuEnB,CAAC"}
1
+ {"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,4EAQtB,iBAAiB,4CAkLnB,CAAC"}
package/lib/src/core-components/molecules/modal-confirm/modal-confirm.component.js CHANGED
@@ -1,19 +1,21 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useEffect, useState } from 'react';
3
3
  import { Container } from 'reactstrap';
4
+ import s from '../../../tc.module.css';
5
+ import { cn } from '../../../core-utils';
4
6
  export const ModalConfirm = ({ visible = false, title = 'Confirm', message = '', submitTitle = 'Send', closeTitle = 'Close', onClick, onClose, }) => {
5
7
  const [showModal, setShowModal] = useState(visible);
6
8
  useEffect(() => {
7
9
  setShowModal(visible);
8
10
  // eslint-disable-next-line react-hooks/exhaustive-deps
9
11
  }, [visible]);
10
- return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative my-6 mx-auto ", children: _jsxs("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-fit min-w-80 bg-white outline-none focus:outline-none", children: [_jsxs("div", { className: "flex items-center justify-between p-2 border-b border-solid border-gray-300 rounded-t", children: [_jsx("h3", { className: "text-2xl font-semibold", children: title }), _jsx("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: () => {
12
+ return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none']), children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto']), children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t']), children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold']), children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none']), onClick: () => {
11
13
  setShowModal(false);
12
14
  onClose && onClose();
13
- }, children: _jsx("span", { className: " text-black h-6 w-6 text-2xl block outline-none focus:outline-none", children: "\u00D7" }) })] }), _jsx("div", { className: "flex p-2", children: _jsx("div", { className: "flex", children: _jsx("span", { className: "text-md", children: message }) }) }), _jsxs("div", { className: "flex items-center justify-end p-2 border-t border-solid border-gray-300 rounded-b", children: [_jsx("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: () => {
15
+ }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2']), children: _jsx("div", { className: cn(s['flex']), children: _jsx("span", { className: cn(s['text-md']), children: message }) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b']), children: [_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
14
16
  setShowModal(false);
15
17
  onClose && onClose();
16
- }, children: closeTitle }), _jsx("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: () => {
18
+ }, children: closeTitle }), _jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
17
19
  onClick();
18
- }, children: submitTitle })] })] }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] })) }) }));
20
+ }, children: submitTitle })] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] })) }) }));
19
21
  };
package/lib/src/core-components/molecules/multi-select/multi-select.component.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import '../../../tc.module.css';
2
1
  interface MultiSelectProps {
3
2
  options: Array<string>;
4
3
  selectedItems?: Array<string>;
package/lib/src/core-components/molecules/multi-select/multi-select.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAChC,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAKrB,gBAAgB,4CAqFlB,CAAC"}
1
+ {"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAKrB,gBAAgB,4CAuHlB,CAAC"}
package/lib/src/core-components/molecules/multi-select/multi-select.component.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useState, useEffect, useRef } from 'react';
3
- import '../../../tc.module.css';
3
+ import s from '../../../tc.module.css';
4
+ import { cn } from '../../../core-utils';
4
5
  export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
5
6
  const [selectedOptions, setSelectedOptions] = useState([]);
6
7
  const [isListOpen, setIsListOpen] = useState(false);
@@ -22,10 +23,13 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
22
23
  }, [selectedItems]);
23
24
  const wrapperRef = useRef(null);
24
25
  useOutsideAlerter(wrapperRef);
25
- return (_jsx(_Fragment, { children: _jsxs("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, children: [_jsx("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
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'], {
27
+ [s['border-red']]: hasError,
28
+ [s['border-gray-300']]: !hasError,
29
+ }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {
26
30
  setIsListOpen(!isListOpen);
27
- }, children: selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select' }), _jsx("div", { className: `flex ${isListOpen ? `show` : `hidden`} relative`, children: options
28
- ? options?.length > 0 && (_jsx("div", { className: "flex absolute rounded-sm w-full", style: { zIndex: 999 }, children: _jsx("ul", { className: "flex flex-col gap-1 bg-gray-200 w-full", children: options?.map((item, index) => (_jsx("li", { className: "flex gap-2 p-2", children: _jsxs("label", { className: "flex gap-2", children: [_jsx("input", { className: "flex h-4 w-4", type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
31
+ }, children: selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select' }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
32
+ ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2']), children: _jsxs("label", { className: cn(s['flex'], s['gap-2']), children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
29
33
  if (selectedOptions?.includes(item)) {
30
34
  setSelectedOptions(selectedOptions?.filter((e) => e != item));
31
35
  }
@@ -40,6 +44,6 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
40
44
  }, onBlur: () => {
41
45
  if (!isListOpen)
42
46
  onSelect(selectedOptions);
43
- } }), _jsx("span", { className: "flex h-4", children: item })] }) }, index))) }) }))
47
+ } }), _jsx("span", { className: cn(s['flex'], s['h-4']), children: item })] }) }, index))) }) }))
44
48
  : null })] }) }));
45
49
  };
package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select-with-field.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,kEAM9B,yBAAyB,4CAyG3B,CAAC"}
1
+ {"version":3,"file":"multi-select-with-field.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.tsx"],"names":[],"mappings":"AAMA,UAAU,yBAAyB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,kEAM9B,yBAAyB,4CAkI3B,CAAC"}
package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js CHANGED
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  /* eslint-disable */
3
3
  import { useState, useEffect, useRef } from 'react';
4
4
  import _ from 'lodash';
5
+ import s from '../../../tc.module.css';
6
+ import { cn } from '../../../core-utils';
5
7
  export const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
6
8
  const [selectedOptions, setSelectedOptions] = useState([]);
7
9
  const [isListOpen, setIsListOpen] = useState(false);
@@ -23,12 +25,12 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
23
25
  }, [selectedItems]);
24
26
  const wrapperRef = useRef(null);
25
27
  useOutsideAlerter(wrapperRef);
26
- return (_jsx(_Fragment, { children: _jsxs("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, children: [_jsx("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
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'], hasError ? s['border-red'] : s['border-gray-300']), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {
27
29
  setIsListOpen(!isListOpen);
28
30
  }, children: selectedOptions?.length > 0
29
31
  ? `${selectedOptions?.length} Items`
30
- : 'Select' }), _jsx("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}`, children: options
31
- ? options?.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1 p-2", children: options?.map((item, index) => (_jsxs("li", { className: "flex items-center", children: [_jsx("input", { className: "flex bg-black", type: "checkbox", checked: !_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
32
+ : 'Select' }), _jsx("div", { className: cn(s['flex'], s['mx-2'], isListOpen ? s['show'] : s['hidden']), children: options
33
+ ? options?.length > 0 && (_jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['p-2']), children: options?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['items-center']), children: [_jsx("input", { className: cn(s['flex'], s['bg-black']), type: "checkbox", checked: !_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
32
34
  item[displayField]?.toUpperCase()))
33
35
  ? true
34
36
  : false, onChange: () => {
@@ -48,6 +50,6 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
48
50
  }, onBlur: () => {
49
51
  if (!isListOpen)
50
52
  onSelect(selectedOptions);
51
- } }), ' ', _jsx("span", { className: "flex ml-2 dark:text-white text-center", children: item[displayField] })] }, index))) }))
53
+ } }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2'], s['dark:text-white'], s['text-center']), children: item[displayField] })] }, index))) }))
52
54
  : null })] }) }));
53
55
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.48",
3
+ "version": "0.2.49",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {