react-restyle-components 0.2.61 → 0.2.63

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 (11) hide show
  1. package/lib/package.json +1 -1
  2. package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +2 -2
  3. package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.d.ts +7 -2
  4. package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.d.ts.map +1 -1
  5. package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.js +33 -8
  6. package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.css +22 -1
  7. package/lib/src/helpers/constants.d.ts +4 -0
  8. package/lib/src/helpers/constants.d.ts.map +1 -0
  9. package/lib/src/helpers/constants.js +11 -0
  10. package/lib/src/tc.module.css +6 -0
  11. 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.61",
3
+ "version": "0.2.62",
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-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js CHANGED
@@ -63,10 +63,10 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
63
63
  const calculateMaxHeight = () => {
64
64
  if (inputRef.current) {
65
65
  const inputRect = inputRef.current.getBoundingClientRect();
66
- const availableHeight = window.innerHeight - inputRect.bottom - 10; // 10px padding
66
+ const availableHeight = window.innerHeight - inputRect.bottom - 20; // 10px padding
67
67
  return availableHeight;
68
68
  }
69
- return 'calc(100vh - 100px)';
69
+ return 'calc(100vh - 140px)';
70
70
  };
71
71
  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'], {
72
72
  [s['border-red']]: hasError,
package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.d.ts CHANGED
@@ -2,9 +2,14 @@ import './color-picker-modal.css';
2
2
  import '../../../tc.module.css';
3
3
  interface ColorPickerModalProps {
4
4
  color: string;
5
+ isVisible?: boolean;
6
+ testId?: string;
7
+ tooltip?: string;
8
+ tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
5
9
  onChange: (color: string) => void;
6
- onClose?: () => void;
10
+ onNoFill?: (bgColor: string, textColor: string) => void;
11
+ onClose?: (color?: string) => void;
7
12
  }
8
- export declare const ColorPickerModal: ({ color, onChange, onClose, }: ColorPickerModalProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const ColorPickerModal: ({ color, isVisible, testId, tooltip, tooltipSide, onChange, onNoFill, onClose, }: ColorPickerModalProps) => import("react/jsx-runtime").JSX.Element;
9
14
  export {};
10
15
  //# sourceMappingURL=color-picker-modal.component.d.ts.map
package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color-picker-modal.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/color-picker-modal/color-picker-modal.component.tsx"],"names":[],"mappings":"AAGA,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,kCAI1B,qBAAqB,4CAiCvB,CAAC"}
1
+ {"version":3,"file":"color-picker-modal.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/color-picker-modal/color-picker-modal.component.tsx"],"names":[],"mappings":"AASA,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,qFAS1B,qBAAqB,4CAwGvB,CAAC"}
package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.js CHANGED
@@ -1,16 +1,41 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useRef, useState } from 'react';
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useCallback, useRef, useState, useEffect } from 'react';
3
3
  import { HexColorPicker } from 'react-colorful';
4
4
  import { useClickOutside } from '../../../hooks';
5
+ import { TooltipProvider, Tooltip } from '../..';
6
+ import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../../helpers/constants';
5
7
  import './color-picker-modal.css';
6
8
  import '../../../tc.module.css';
7
- export const ColorPickerModal = ({ color, onChange, onClose, }) => {
9
+ export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
8
10
  const popover = useRef();
9
- const [isOpen, toggle] = useState(false);
11
+ const [currentColor, setCurrentColor] = useState(color);
12
+ const [isOpen, toggle] = useState(isVisible);
10
13
  const close = useCallback(() => {
11
- toggle(false);
12
- onClose && onClose();
13
- }, []);
14
+ if (isOpen) {
15
+ toggle(false);
16
+ onClose && onClose(currentColor);
17
+ }
18
+ }, [isOpen, onClose, currentColor]);
14
19
  useClickOutside(popover, close);
15
- return (_jsxs("div", { className: "picker-modal", children: [_jsx("div", { className: "swatch-modal", style: { backgroundColor: color }, onClick: () => toggle(true) }), isOpen && (_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 w-auto h-auto mx-auto my-auto", children: _jsx("div", { className: "border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none", children: _jsx("div", { className: "flex flex-col p-2 w-full ", ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
20
+ useEffect(() => {
21
+ if (!isOpen) {
22
+ setCurrentColor(color || DEFAULT_BG_COLOR);
23
+ }
24
+ }, [color, isOpen]);
25
+ const handleColorChange = useCallback((color) => {
26
+ setCurrentColor(color);
27
+ onChange(color);
28
+ }, [onChange]);
29
+ const handleStandardColorClick = useCallback((color) => {
30
+ setCurrentColor(color);
31
+ onChange(color);
32
+ close();
33
+ }, [onChange, close]);
34
+ const handleNoFillClick = useCallback(() => {
35
+ onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
36
+ setCurrentColor(DEFAULT_BG_COLOR);
37
+ onChange(DEFAULT_BG_COLOR);
38
+ close();
39
+ }, [onNoFill, onChange, close]);
40
+ return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_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 w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
16
41
  };
package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .picker-modal {
2
2
  position: relative;
3
- z-index: 999;
4
3
  }
5
4
 
6
5
  .swatch-modal {
@@ -14,6 +13,28 @@
14
13
  cursor: pointer;
15
14
  }
16
15
 
16
+ .diagonal-line {
17
+ background-color: transparent;
18
+ background-image: gradient(
19
+ linear,
20
+ 19.1% -7.9%,
21
+ 81% 107.9%,
22
+ color-stop(0, transparent),
23
+ color-stop(0.48, transparent),
24
+ color-stop(0.5, #000),
25
+ color-stop(0.52, transparent),
26
+ color-stop(1, transparent)
27
+ );
28
+ background-image: repeating-linear-gradient(
29
+ 130deg,
30
+ transparent 0%,
31
+ transparent 48%,
32
+ #000 50%,
33
+ transparent 52%,
34
+ transparent 100%
35
+ );
36
+ }
37
+
17
38
  .popover-modal {
18
39
  position: absolute;
19
40
  top: calc(100% + 2px);
package/lib/src/helpers/constants.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const STANDARD_COLORS: string[];
2
+ export declare const DEFAULT_BG_COLOR = "";
3
+ export declare const DEFAULT_TEXT_COLOR = "";
4
+ //# sourceMappingURL=constants.d.ts.map
package/lib/src/helpers/constants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/helpers/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,UAQ3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,kBAAkB,KAAK,CAAC"}
package/lib/src/helpers/constants.js ADDED
@@ -0,0 +1,11 @@
1
+ export const STANDARD_COLORS = [
2
+ '#000000',
3
+ '#0000ff',
4
+ '#808080',
5
+ '#008000',
6
+ '#800080',
7
+ '#ff0000',
8
+ '#ffffff',
9
+ ];
10
+ export const DEFAULT_BG_COLOR = '';
11
+ export const DEFAULT_TEXT_COLOR = '';
package/lib/src/tc.module.css CHANGED
@@ -15,10 +15,12 @@
15
15
  } .z-20 { z-index: 20;
16
16
  } .z-40 { z-index: 40;
17
17
  } .z-50 { z-index: 50;
18
+ } .z-99 { z-index: 99;
18
19
  } .float-right { float: right;
19
20
  } .m-10 { margin: 2.5rem;
20
21
  } .m-2 { margin: 0.5rem;
21
22
  } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem;
23
+ } .mx-8 { margin-left: 2rem; margin-right: 2rem;
22
24
  } .mx-auto { margin-left: auto; margin-right: auto;
23
25
  } .my-4 { margin-top: 1rem; margin-bottom: 1rem;
24
26
  } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem;
@@ -33,6 +35,7 @@
33
35
  } .mr-3 { margin-right: 0.75rem;
34
36
  } .mt-0 { margin-top: 0px;
35
37
  } .mt-1 { margin-top: 0.25rem;
38
+ } .mt-2 { margin-top: 0.5rem;
36
39
  } .mt-4 { margin-top: 1rem;
37
40
  } .block { display: block;
38
41
  } .inline-block { display: inline-block;
@@ -109,6 +112,7 @@
109
112
  } .bg-\[\#007BFF\] { --tw-bg-opacity: 1; background-color: rgb(0 123 255 / var(--tw-bg-opacity));
110
113
  } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity));
111
114
  } .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity));
115
+ } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity));
112
116
  } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
113
117
  } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity));
114
118
  } .bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -133,6 +137,7 @@
133
137
  } .pt-3 { padding-top: 0.75rem;
134
138
  } .text-center { text-align: center;
135
139
  } .font-arimaRegular { font-family: ArimaRegular;
140
+ } .font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
136
141
  } .text-2xl { font-size: 1.5rem; line-height: 2rem;
137
142
  } .text-3xl { font-size: 1.875rem; line-height: 2.25rem;
138
143
  } .text-5xl { font-size: 3rem; line-height: 1;
@@ -186,6 +191,7 @@
186
191
  } @media (min-width: 1536px) { .container { max-width: 1536px;
187
192
  }
188
193
  } .hover\:bg-\[\#007BFF\]:hover { --tw-bg-opacity: 1; background-color: rgb(0 123 255 / var(--tw-bg-opacity));
194
+ } .hover\:bg-blue-800:hover { --tw-bg-opacity: 1; background-color: rgb(30 64 175 / var(--tw-bg-opacity));
189
195
  } .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
190
196
  } .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity));
191
197
  } .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.61",
3
+ "version": "0.2.63",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {