@gustavo-valsechi/client 1.4.104 → 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 (13) hide show
  1. package/dist/components/types/form/types/select/index.js +38 -21
  2. package/dist/components/types/form/types/select/index.mjs +38 -21
  3. package/dist/components/types/form/types/select/options/index.d.ts +1 -0
  4. package/dist/components/types/form/types/select/options/index.js +15 -2
  5. package/dist/components/types/form/types/select/options/index.mjs +15 -2
  6. package/dist/components/types/form/types/select/options/styles.js +6 -1
  7. package/dist/components/types/form/types/select/options/styles.mjs +6 -1
  8. package/dist/components/types/form/types/select/styles.js +16 -0
  9. package/dist/components/types/form/types/select/styles.mjs +16 -0
  10. package/dist/contexts/target/index.js +0 -1
  11. package/dist/contexts/target/index.mjs +0 -1
  12. package/dist/interfaces/components/form/select/index.d.ts +1 -1
  13. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -41,13 +41,16 @@ var import_contexts = require("../../../../../contexts");
41
41
  var import_lodash = __toESM(require("lodash"));
42
42
  var import_options = __toESM(require("./options"));
43
43
  function InputSelect(props) {
44
+ var _a;
44
45
  const containerRef = (0, import_react.useRef)(null);
45
46
  const inputRef = (0, import_react.useRef)(null);
46
47
  const target = (0, import_contexts.useTarget)();
47
48
  const [focus, setFocus] = (0, import_react.useState)(false);
49
+ const [filter, setFilter] = (0, import_react.useState)("");
48
50
  const register = (props.register || ((name) => ({})))(props.name || "");
51
+ const value = ((_a = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
49
52
  (0, import_react.useEffect)(() => {
50
- var _a;
53
+ var _a2;
51
54
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
52
55
  target.add({
53
56
  ref: inputRef,
@@ -57,7 +60,8 @@ function InputSelect(props) {
57
60
  ...props,
58
61
  inputRef,
59
62
  register,
60
- width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
63
+ width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0,
64
+ filter
61
65
  }
62
66
  )
63
67
  });
@@ -65,6 +69,7 @@ function InputSelect(props) {
65
69
  }, [inputRef, containerRef]);
66
70
  const onBlur = (event) => {
67
71
  setFocus(false);
72
+ setFilter("");
68
73
  if (register.onBlur) register.onBlur(event);
69
74
  };
70
75
  const onFocus = (event) => {
@@ -72,31 +77,43 @@ function InputSelect(props) {
72
77
  if (register.onFocus) register.onFocus(event);
73
78
  };
74
79
  const onChange = (event) => {
75
- const value = event.target.value || "";
76
- event.target.value = props.mask ? props.mask(value) : value;
77
- if (props.onChange) props.onChange(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);
78
84
  };
79
85
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { className: props.className, error: props.error, children: [
80
86
  !!props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_label.InputLabel, { children: [
81
87
  props.label,
82
88
  props.required ? "*" : ""
83
89
  ] }),
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "input-content", children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
- "input",
87
- {
88
- ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
89
- type: "text",
90
- maxLength: props.maxLength || 255,
91
- ...register,
92
- ref: inputRef,
93
- onChange,
94
- onFocus,
95
- onBlur
96
- }
97
- ),
98
- /* @__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" }) })
99
- ] }),
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
+ ),
100
117
  !!props.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error.InputError, { children: props.error })
101
118
  ] });
102
119
  }
package/dist/components/types/form/types/select/index.mjs CHANGED
@@ -8,13 +8,16 @@ import { useTarget } from "../../../../../contexts";
8
8
  import _ from "lodash";
9
9
  import InputSelectOption from "./options";
10
10
  function InputSelect(props) {
11
+ var _a;
11
12
  const containerRef = useRef(null);
12
13
  const inputRef = useRef(null);
13
14
  const target = useTarget();
14
15
  const [focus, setFocus] = useState(false);
16
+ const [filter, setFilter] = useState("");
15
17
  const register = (props.register || ((name) => ({})))(props.name || "");
18
+ const value = ((_a = _.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
16
19
  useEffect(() => {
17
- var _a;
20
+ var _a2;
18
21
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
19
22
  target.add({
20
23
  ref: inputRef,
@@ -24,7 +27,8 @@ function InputSelect(props) {
24
27
  ...props,
25
28
  inputRef,
26
29
  register,
27
- width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
30
+ width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0,
31
+ filter
28
32
  }
29
33
  )
30
34
  });
@@ -32,6 +36,7 @@ function InputSelect(props) {
32
36
  }, [inputRef, containerRef]);
33
37
  const onBlur = (event) => {
34
38
  setFocus(false);
39
+ setFilter("");
35
40
  if (register.onBlur) register.onBlur(event);
36
41
  };
37
42
  const onFocus = (event) => {
@@ -39,31 +44,43 @@ function InputSelect(props) {
39
44
  if (register.onFocus) register.onFocus(event);
40
45
  };
41
46
  const onChange = (event) => {
42
- const value = event.target.value || "";
43
- event.target.value = props.mask ? props.mask(value) : value;
44
- if (props.onChange) props.onChange(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);
45
51
  };
46
52
  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
47
53
  !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
48
54
  props.label,
49
55
  props.required ? "*" : ""
50
56
  ] }),
51
- /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "input-content", children: [
52
- /* @__PURE__ */ jsx(
53
- "input",
54
- {
55
- ..._.omit(props, ["className", "register", "mask", "setValue"]),
56
- type: "text",
57
- maxLength: props.maxLength || 255,
58
- ...register,
59
- ref: inputRef,
60
- onChange,
61
- onFocus,
62
- onBlur
63
- }
64
- ),
65
- /* @__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" }) })
66
- ] }),
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
+ ),
67
84
  !!props.error && /* @__PURE__ */ jsx(InputError, { children: props.error })
68
85
  ] });
69
86
  }
package/dist/components/types/form/types/select/options/index.d.ts CHANGED
@@ -2,4 +2,5 @@ import { IInputSelect } from "@interfaces";
2
2
  export default function InputSelectOption(props: IInputSelect & {
3
3
  inputRef: any;
4
4
  width: number;
5
+ filter: string;
5
6
  }): import("react/jsx-runtime").JSX.Element;
package/dist/components/types/form/types/select/options/index.js CHANGED
@@ -38,12 +38,25 @@ var import_styles = require("./styles");
38
38
  var import_lodash = __toESM(require("lodash"));
39
39
  function InputSelectOption(props) {
40
40
  const [value, set] = (0, import_react.useState)("");
41
+ const [options, setOptions] = (0, import_react.useState)(props.options);
41
42
  (0, import_react.useEffect)(() => {
42
- var _a;
43
+ var _a, _b;
43
44
  (_a = props.setValue) == null ? void 0 : _a.call(props, value);
45
+ if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
46
+ props.inputRef.current.click();
44
47
  }, [value, props.inputRef]);
48
+ (0, import_react.useEffect)(() => {
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);
57
+ }, [props.filter]);
45
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
46
- props.options,
59
+ options,
47
60
  (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
48
61
  "div",
49
62
  {
package/dist/components/types/form/types/select/options/index.mjs CHANGED
@@ -5,12 +5,25 @@ import { Container } from "./styles";
5
5
  import _ from "lodash";
6
6
  function InputSelectOption(props) {
7
7
  const [value, set] = useState("");
8
+ const [options, setOptions] = useState(props.options);
8
9
  useEffect(() => {
9
- var _a;
10
+ var _a, _b;
10
11
  (_a = props.setValue) == null ? void 0 : _a.call(props, value);
12
+ if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
13
+ props.inputRef.current.click();
11
14
  }, [value, props.inputRef]);
15
+ useEffect(() => {
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);
24
+ }, [props.filter]);
12
25
  return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
13
- props.options,
26
+ options,
14
27
  (data, index) => /* @__PURE__ */ jsx(
15
28
  "div",
16
29
  {
package/dist/components/types/form/types/select/options/styles.js CHANGED
@@ -38,11 +38,16 @@ const Container = import_styled_components.default.div`
38
38
  background-color: ${({ theme }) => theme.primary};
39
39
  border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
40
40
  border-radius: 5px;
41
+ max-height: 10rem;
42
+ position: relative;
43
+ overflow-x: hidden;
44
+ overflow-y: scroll;
41
45
 
42
46
  .input-option {
43
- padding: .5rem .8rem;
47
+ padding: .5rem 1rem;
44
48
  border-radius: 5px;
45
49
  cursor: pointer;
50
+ max-height: 36px;
46
51
 
47
52
  &:hover {
48
53
  background-color: ${({ theme }) => theme.t05};
package/dist/components/types/form/types/select/options/styles.mjs CHANGED
@@ -5,11 +5,16 @@ const Container = styled.div`
5
5
  background-color: ${({ theme }) => theme.primary};
6
6
  border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
7
7
  border-radius: 5px;
8
+ max-height: 10rem;
9
+ position: relative;
10
+ overflow-x: hidden;
11
+ overflow-y: scroll;
8
12
 
9
13
  .input-option {
10
- padding: .5rem .8rem;
14
+ padding: .5rem 1rem;
11
15
  border-radius: 5px;
12
16
  cursor: pointer;
17
+ max-height: 36px;
13
18
 
14
19
  &:hover {
15
20
  background-color: ${({ theme }) => theme.t05};
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/dist/contexts/target/index.js CHANGED
@@ -120,7 +120,6 @@ const TargetProviderContainer = ({ children }) => {
120
120
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
121
121
  });
122
122
  focusable.addEventListener("blur", () => {
123
- console.log(insideMemory);
124
123
  if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
125
124
  close(containerRef.current[index]);
126
125
  });
package/dist/contexts/target/index.mjs CHANGED
@@ -86,7 +86,6 @@ const TargetProviderContainer = ({ children }) => {
86
86
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
87
87
  });
88
88
  focusable.addEventListener("blur", () => {
89
- console.log(insideMemory);
90
89
  if (_.some(insideMemory, (i) => i === index)) return;
91
90
  close(containerRef.current[index]);
92
91
  });
package/dist/interfaces/components/form/select/index.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface IInputSelect {
7
7
  label?: string;
8
8
  name: string;
9
9
  value?: string;
10
- onChange?: (event: any) => void;
10
+ onFilter?: (event: any) => void;
11
11
  options: Array<any>;
12
12
  error?: string;
13
13
  disabled?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.104",
3
+ "version": "1.4.106",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",