@gustavo-valsechi/client 1.4.105 → 1.4.106

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 (9) hide show
  1. package/dist/components/types/form/types/select/index.js +32 -22
  2. package/dist/components/types/form/types/select/index.mjs +32 -22
  3. package/dist/components/types/form/types/select/options/index.js +10 -6
  4. package/dist/components/types/form/types/select/options/index.mjs +10 -6
  5. package/dist/components/types/form/types/select/options/styles.js +2 -12
  6. package/dist/components/types/form/types/select/options/styles.mjs +2 -12
  7. package/dist/components/types/form/types/select/styles.js +16 -0
  8. package/dist/components/types/form/types/select/styles.mjs +16 -0
  9. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -48,7 +48,7 @@ function InputSelect(props) {
48
48
  const [focus, setFocus] = (0, import_react.useState)(false);
49
49
  const [filter, setFilter] = (0, import_react.useState)("");
50
50
  const register = (props.register || ((name) => ({})))(props.name || "");
51
- const labelValue = ((_a = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
51
+ const value = ((_a = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
52
52
  (0, import_react.useEffect)(() => {
53
53
  var _a2;
54
54
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
@@ -77,33 +77,43 @@ function InputSelect(props) {
77
77
  if (register.onFocus) register.onFocus(event);
78
78
  };
79
79
  const onChange = (event) => {
80
- const value = event.target.value || "";
81
- event.target.value = props.mask ? props.mask(value) : value;
82
- setFilter(value);
83
- if (props.onFilter) props.onFilter(value);
80
+ const value2 = event.target.value || "";
81
+ event.target.value = props.mask ? props.mask(value2) : value2;
82
+ setFilter(value2);
83
+ if (props.onFilter) props.onFilter(value2);
84
84
  };
85
85
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { className: props.className, error: props.error, children: [
86
86
  !!props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_label.InputLabel, { children: [
87
87
  props.label,
88
88
  props.required ? "*" : ""
89
89
  ] }),
90
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "input-content", children: [
91
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
- "input",
93
- {
94
- ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
95
- ...register,
96
- ref: inputRef,
97
- type: "text",
98
- maxLength: props.maxLength || 255,
99
- onChange,
100
- onFocus,
101
- onBlur,
102
- value: focus ? filter : labelValue
103
- }
104
- ),
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: focus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
106
- ] }),
90
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
91
+ "div",
92
+ {
93
+ ref: containerRef,
94
+ className: "input-content",
95
+ onClick: () => inputRef.current.click(),
96
+ children: [
97
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
98
+ "input",
99
+ {
100
+ ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
101
+ ...register,
102
+ ref: inputRef,
103
+ type: "text",
104
+ maxLength: props.maxLength || 255,
105
+ onChange,
106
+ onFocus,
107
+ onBlur,
108
+ value: filter,
109
+ placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
110
+ }
111
+ ),
112
+ !focus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-label-value", children: value }),
113
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", children: focus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
114
+ ]
115
+ }
116
+ ),
107
117
  !!props.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error.InputError, { children: props.error })
108
118
  ] });
109
119
  }
package/dist/components/types/form/types/select/index.mjs CHANGED
@@ -15,7 +15,7 @@ function InputSelect(props) {
15
15
  const [focus, setFocus] = useState(false);
16
16
  const [filter, setFilter] = useState("");
17
17
  const register = (props.register || ((name) => ({})))(props.name || "");
18
- const labelValue = ((_a = _.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
18
+ const value = ((_a = _.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
19
19
  useEffect(() => {
20
20
  var _a2;
21
21
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
@@ -44,33 +44,43 @@ function InputSelect(props) {
44
44
  if (register.onFocus) register.onFocus(event);
45
45
  };
46
46
  const onChange = (event) => {
47
- const value = event.target.value || "";
48
- event.target.value = props.mask ? props.mask(value) : value;
49
- setFilter(value);
50
- if (props.onFilter) props.onFilter(value);
47
+ const value2 = event.target.value || "";
48
+ event.target.value = props.mask ? props.mask(value2) : value2;
49
+ setFilter(value2);
50
+ if (props.onFilter) props.onFilter(value2);
51
51
  };
52
52
  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
53
53
  !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
54
54
  props.label,
55
55
  props.required ? "*" : ""
56
56
  ] }),
57
- /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "input-content", children: [
58
- /* @__PURE__ */ jsx(
59
- "input",
60
- {
61
- ..._.omit(props, ["className", "register", "mask", "setValue"]),
62
- ...register,
63
- ref: inputRef,
64
- type: "text",
65
- maxLength: props.maxLength || 255,
66
- onChange,
67
- onFocus,
68
- onBlur,
69
- value: focus ? filter : labelValue
70
- }
71
- ),
72
- /* @__PURE__ */ jsx("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: focus ? /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
73
- ] }),
57
+ /* @__PURE__ */ jsxs(
58
+ "div",
59
+ {
60
+ ref: containerRef,
61
+ className: "input-content",
62
+ onClick: () => inputRef.current.click(),
63
+ children: [
64
+ /* @__PURE__ */ jsx(
65
+ "input",
66
+ {
67
+ ..._.omit(props, ["className", "register", "mask", "setValue"]),
68
+ ...register,
69
+ ref: inputRef,
70
+ type: "text",
71
+ maxLength: props.maxLength || 255,
72
+ onChange,
73
+ onFocus,
74
+ onBlur,
75
+ value: filter,
76
+ placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
77
+ }
78
+ ),
79
+ !focus && /* @__PURE__ */ jsx("div", { className: "input-label-value", children: value }),
80
+ /* @__PURE__ */ jsx("div", { className: "input-icon", children: focus ? /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
81
+ ]
82
+ }
83
+ ),
74
84
  !!props.error && /* @__PURE__ */ jsx(InputError, { children: props.error })
75
85
  ] });
76
86
  }
package/dist/components/types/form/types/select/options/index.js CHANGED
@@ -46,19 +46,23 @@ function InputSelectOption(props) {
46
46
  props.inputRef.current.click();
47
47
  }, [value, props.inputRef]);
48
48
  (0, import_react.useEffect)(() => {
49
- var _a, _b;
50
- (_a = props.setValue) == null ? void 0 : _a.call(props, value);
51
- if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
52
- props.inputRef.current.click();
49
+ if (!props.filter) return setOptions(props.options);
50
+ const filtredOptions = import_lodash.default.filter(props.options, (data) => {
51
+ var _a;
52
+ const value2 = ((_a = Object.values(data || {})) == null ? void 0 : _a[0]) || "";
53
+ if (import_lodash.default.isString(value2)) return import_lodash.default.includes(value2, props.filter);
54
+ return import_lodash.default.includes(value2 == null ? void 0 : value2.textContent, props.filter);
55
+ });
56
+ setOptions(filtredOptions);
53
57
  }, [props.filter]);
54
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
55
- props.options,
59
+ options,
56
60
  (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
57
61
  "div",
58
62
  {
59
63
  className: "input-option",
60
64
  onClick: () => set(Object.keys(data)[index]),
61
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
65
+ children: Object.values(data)[index] || ""
62
66
  },
63
67
  index
64
68
  )
package/dist/components/types/form/types/select/options/index.mjs CHANGED
@@ -13,19 +13,23 @@ function InputSelectOption(props) {
13
13
  props.inputRef.current.click();
14
14
  }, [value, props.inputRef]);
15
15
  useEffect(() => {
16
- var _a, _b;
17
- (_a = props.setValue) == null ? void 0 : _a.call(props, value);
18
- if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
19
- props.inputRef.current.click();
16
+ if (!props.filter) return setOptions(props.options);
17
+ const filtredOptions = _.filter(props.options, (data) => {
18
+ var _a;
19
+ const value2 = ((_a = Object.values(data || {})) == null ? void 0 : _a[0]) || "";
20
+ if (_.isString(value2)) return _.includes(value2, props.filter);
21
+ return _.includes(value2 == null ? void 0 : value2.textContent, props.filter);
22
+ });
23
+ setOptions(filtredOptions);
20
24
  }, [props.filter]);
21
25
  return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
22
- props.options,
26
+ options,
23
27
  (data, index) => /* @__PURE__ */ jsx(
24
28
  "div",
25
29
  {
26
30
  className: "input-option",
27
31
  onClick: () => set(Object.keys(data)[index]),
28
- children: /* @__PURE__ */ jsx("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
32
+ children: Object.values(data)[index] || ""
29
33
  },
30
34
  index
31
35
  )
package/dist/components/types/form/types/select/options/styles.js CHANGED
@@ -44,24 +44,14 @@ const Container = import_styled_components.default.div`
44
44
  overflow-y: scroll;
45
45
 
46
46
  .input-option {
47
- padding: .5rem .8rem;
47
+ padding: .5rem 1rem;
48
48
  border-radius: 5px;
49
49
  cursor: pointer;
50
- width: ${({ width }) => width}px;
51
- position: relative;
50
+ max-height: 36px;
52
51
 
53
52
  &:hover {
54
53
  background-color: ${({ theme }) => theme.t05};
55
54
  }
56
-
57
- .input-option-elipse {
58
- position: absolute;
59
- left: 0;
60
- right: 0;
61
- white-space: nowrap;
62
- overflow: hidden;
63
- text-overflow: ellipsis;
64
- }
65
55
  }
66
56
  `;
67
57
  // Annotate the CommonJS export names for ESM import in node:
package/dist/components/types/form/types/select/options/styles.mjs CHANGED
@@ -11,24 +11,14 @@ const Container = styled.div`
11
11
  overflow-y: scroll;
12
12
 
13
13
  .input-option {
14
- padding: .5rem .8rem;
14
+ padding: .5rem 1rem;
15
15
  border-radius: 5px;
16
16
  cursor: pointer;
17
- width: ${({ width }) => width}px;
18
- position: relative;
17
+ max-height: 36px;
19
18
 
20
19
  &:hover {
21
20
  background-color: ${({ theme }) => theme.t05};
22
21
  }
23
-
24
- .input-option-elipse {
25
- position: absolute;
26
- left: 0;
27
- right: 0;
28
- white-space: nowrap;
29
- overflow: hidden;
30
- text-overflow: ellipsis;
31
- }
32
22
  }
33
23
  `;
34
24
  export {
package/dist/components/types/form/types/select/styles.js CHANGED
@@ -45,6 +45,7 @@ const Container = import_styled_components.default.div`
45
45
  overflow: hidden;
46
46
  padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
47
47
  background-color: ${({ theme }) => theme.primary};
48
+ position: relative;
48
49
 
49
50
  input {
50
51
  border: 0;
@@ -54,6 +55,8 @@ const Container = import_styled_components.default.div`
54
55
  background-color: ${({ theme }) => theme.primary};
55
56
  color: ${({ theme }) => theme.t6};
56
57
  cursor: pointer;
58
+ position: relative;
59
+ z-index: 0;
57
60
 
58
61
  &:focus {
59
62
  cursor: text;
@@ -69,6 +72,19 @@ const Container = import_styled_components.default.div`
69
72
  outline: none;
70
73
  }
71
74
  }
75
+
76
+ .input-label-value {
77
+ position: absolute;
78
+ top: 0;
79
+ left: 0;
80
+ height: 100%;
81
+ width: 100%;
82
+ cursor: pointer;
83
+ z-index: 1;
84
+ padding: 0 1rem;
85
+ display: flex;
86
+ align-items: center;
87
+ }
72
88
 
73
89
  .input-icon {
74
90
  color: ${({ theme }) => theme.t3};
package/dist/components/types/form/types/select/styles.mjs CHANGED
@@ -12,6 +12,7 @@ const Container = styled.div`
12
12
  overflow: hidden;
13
13
  padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
14
14
  background-color: ${({ theme }) => theme.primary};
15
+ position: relative;
15
16
 
16
17
  input {
17
18
  border: 0;
@@ -21,6 +22,8 @@ const Container = styled.div`
21
22
  background-color: ${({ theme }) => theme.primary};
22
23
  color: ${({ theme }) => theme.t6};
23
24
  cursor: pointer;
25
+ position: relative;
26
+ z-index: 0;
24
27
 
25
28
  &:focus {
26
29
  cursor: text;
@@ -36,6 +39,19 @@ const Container = styled.div`
36
39
  outline: none;
37
40
  }
38
41
  }
42
+
43
+ .input-label-value {
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ height: 100%;
48
+ width: 100%;
49
+ cursor: pointer;
50
+ z-index: 1;
51
+ padding: 0 1rem;
52
+ display: flex;
53
+ align-items: center;
54
+ }
39
55
 
40
56
  .input-icon {
41
57
  color: ${({ theme }) => theme.t3};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.105",
3
+ "version": "1.4.106",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",