@gustavo-valsechi/client 1.4.103 → 1.4.105

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/dist/components/types/form/types/select/index.js +13 -6
  2. package/dist/components/types/form/types/select/index.mjs +13 -6
  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 +11 -2
  5. package/dist/components/types/form/types/select/options/index.mjs +11 -2
  6. package/dist/components/types/form/types/select/options/styles.js +15 -0
  7. package/dist/components/types/form/types/select/options/styles.mjs +15 -0
  8. package/dist/contexts/target/index.js +7 -8
  9. package/dist/contexts/target/index.mjs +7 -8
  10. package/dist/interfaces/components/form/select/index.d.ts +1 -1
  11. 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 labelValue = ((_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) => {
@@ -74,7 +79,8 @@ function InputSelect(props) {
74
79
  const onChange = (event) => {
75
80
  const value = event.target.value || "";
76
81
  event.target.value = props.mask ? props.mask(value) : value;
77
- if (props.onChange) props.onChange(value);
82
+ setFilter(value);
83
+ if (props.onFilter) props.onFilter(value);
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: [
@@ -86,13 +92,14 @@ function InputSelect(props) {
86
92
  "input",
87
93
  {
88
94
  ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
89
- type: "text",
90
- maxLength: props.maxLength || 255,
91
95
  ...register,
92
96
  ref: inputRef,
97
+ type: "text",
98
+ maxLength: props.maxLength || 255,
93
99
  onChange,
94
100
  onFocus,
95
- onBlur
101
+ onBlur,
102
+ value: focus ? filter : labelValue
96
103
  }
97
104
  ),
98
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" }) })
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 labelValue = ((_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) => {
@@ -41,7 +46,8 @@ function InputSelect(props) {
41
46
  const onChange = (event) => {
42
47
  const value = event.target.value || "";
43
48
  event.target.value = props.mask ? props.mask(value) : value;
44
- if (props.onChange) props.onChange(value);
49
+ setFilter(value);
50
+ if (props.onFilter) props.onFilter(value);
45
51
  };
46
52
  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
47
53
  !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
@@ -53,13 +59,14 @@ function InputSelect(props) {
53
59
  "input",
54
60
  {
55
61
  ..._.omit(props, ["className", "register", "mask", "setValue"]),
56
- type: "text",
57
- maxLength: props.maxLength || 255,
58
62
  ...register,
59
63
  ref: inputRef,
64
+ type: "text",
65
+ maxLength: props.maxLength || 255,
60
66
  onChange,
61
67
  onFocus,
62
- onBlur
68
+ onBlur,
69
+ value: focus ? filter : labelValue
63
70
  }
64
71
  ),
65
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" }) })
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,10 +38,19 @@ 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
+ 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();
53
+ }, [props.filter]);
45
54
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
46
55
  props.options,
47
56
  (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -49,7 +58,7 @@ function InputSelectOption(props) {
49
58
  {
50
59
  className: "input-option",
51
60
  onClick: () => set(Object.keys(data)[index]),
52
- children: Object.values(data)[index] || ""
61
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
53
62
  },
54
63
  index
55
64
  )
package/dist/components/types/form/types/select/options/index.mjs CHANGED
@@ -5,10 +5,19 @@ 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
+ 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();
20
+ }, [props.filter]);
12
21
  return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
13
22
  props.options,
14
23
  (data, index) => /* @__PURE__ */ jsx(
@@ -16,7 +25,7 @@ function InputSelectOption(props) {
16
25
  {
17
26
  className: "input-option",
18
27
  onClick: () => set(Object.keys(data)[index]),
19
- children: Object.values(data)[index] || ""
28
+ children: /* @__PURE__ */ jsx("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
20
29
  },
21
30
  index
22
31
  )
package/dist/components/types/form/types/select/options/styles.js CHANGED
@@ -38,15 +38,30 @@ 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
47
  padding: .5rem .8rem;
44
48
  border-radius: 5px;
45
49
  cursor: pointer;
50
+ width: ${({ width }) => width}px;
51
+ position: relative;
46
52
 
47
53
  &:hover {
48
54
  background-color: ${({ theme }) => theme.t05};
49
55
  }
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
+ }
50
65
  }
51
66
  `;
52
67
  // Annotate the CommonJS export names for ESM import in node:
package/dist/components/types/form/types/select/options/styles.mjs CHANGED
@@ -5,15 +5,30 @@ 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
14
  padding: .5rem .8rem;
11
15
  border-radius: 5px;
12
16
  cursor: pointer;
17
+ width: ${({ width }) => width}px;
18
+ position: relative;
13
19
 
14
20
  &:hover {
15
21
  background-color: ${({ theme }) => theme.t05};
16
22
  }
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
+ }
17
32
  }
18
33
  `;
19
34
  export {
package/dist/contexts/target/index.js CHANGED
@@ -39,11 +39,11 @@ var import_styles = require("./styles");
39
39
  var import_lodash = __toESM(require("lodash"));
40
40
  const TargetContext = (0, import_react.createContext)({});
41
41
  const memory = [];
42
+ const insideMemory = [];
42
43
  const TargetProviderContainer = ({ children }) => {
43
44
  const inputRef = (0, import_react.useRef)([]);
44
45
  const containerRef = (0, import_react.useRef)([]);
45
46
  const [targets, setTargets] = (0, import_react.useState)([]);
46
- const [inside, setInside] = (0, import_react.useState)([]);
47
47
  const elementFocusable = (target, index) => {
48
48
  const focusableTags = ["input", "select", "textarea", "button"];
49
49
  const isFocusable = import_lodash.default.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -63,7 +63,7 @@ const TargetProviderContainer = ({ children }) => {
63
63
  (0, import_react.useEffect)(() => {
64
64
  const handleScroll = () => {
65
65
  import_lodash.default.forEach(containerRef.current, (element, index) => {
66
- if (import_lodash.default.some(inside, (i) => i === index)) return;
66
+ if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
67
67
  close(element);
68
68
  });
69
69
  };
@@ -97,7 +97,7 @@ const TargetProviderContainer = ({ children }) => {
97
97
  });
98
98
  observer.disconnect();
99
99
  };
100
- }, [inside]);
100
+ }, []);
101
101
  (0, import_react.useEffect)(() => {
102
102
  import_lodash.default.forEach(targets, (target, index) => {
103
103
  var _a;
@@ -120,12 +120,11 @@ const TargetProviderContainer = ({ children }) => {
120
120
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
121
121
  });
122
122
  focusable.addEventListener("blur", () => {
123
- console.log(inside);
124
- if (import_lodash.default.some(inside, (i) => i === index)) return;
123
+ if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
125
124
  close(containerRef.current[index]);
126
125
  });
127
126
  });
128
- }, [targets, inputRef, containerRef, inside]);
127
+ }, [targets, inputRef, containerRef]);
129
128
  const getCoords = (target) => {
130
129
  const rect = target.getBoundingClientRect();
131
130
  const targetTop = rect.top + window.scrollY;
@@ -167,11 +166,11 @@ const TargetProviderContainer = ({ children }) => {
167
166
  {
168
167
  ref: (element) => containerRef.current[index] = element,
169
168
  onMouseEnter: () => {
170
- setInside(import_lodash.default.concat(inside, index));
169
+ insideMemory.push(index);
171
170
  elementFocusable(target, index).focus();
172
171
  },
173
172
  onMouseLeave: () => {
174
- setInside(import_lodash.default.filter(inside, (i) => i !== index));
173
+ insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
175
174
  elementFocusable(target, index).focus();
176
175
  },
177
176
  children: target.component
package/dist/contexts/target/index.mjs CHANGED
@@ -5,11 +5,11 @@ import { Container } from "./styles";
5
5
  import _ from "lodash";
6
6
  const TargetContext = createContext({});
7
7
  const memory = [];
8
+ const insideMemory = [];
8
9
  const TargetProviderContainer = ({ children }) => {
9
10
  const inputRef = useRef([]);
10
11
  const containerRef = useRef([]);
11
12
  const [targets, setTargets] = useState([]);
12
- const [inside, setInside] = useState([]);
13
13
  const elementFocusable = (target, index) => {
14
14
  const focusableTags = ["input", "select", "textarea", "button"];
15
15
  const isFocusable = _.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -29,7 +29,7 @@ const TargetProviderContainer = ({ children }) => {
29
29
  useEffect(() => {
30
30
  const handleScroll = () => {
31
31
  _.forEach(containerRef.current, (element, index) => {
32
- if (_.some(inside, (i) => i === index)) return;
32
+ if (_.some(insideMemory, (i) => i === index)) return;
33
33
  close(element);
34
34
  });
35
35
  };
@@ -63,7 +63,7 @@ const TargetProviderContainer = ({ children }) => {
63
63
  });
64
64
  observer.disconnect();
65
65
  };
66
- }, [inside]);
66
+ }, []);
67
67
  useEffect(() => {
68
68
  _.forEach(targets, (target, index) => {
69
69
  var _a;
@@ -86,12 +86,11 @@ const TargetProviderContainer = ({ children }) => {
86
86
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
87
87
  });
88
88
  focusable.addEventListener("blur", () => {
89
- console.log(inside);
90
- if (_.some(inside, (i) => i === index)) return;
89
+ if (_.some(insideMemory, (i) => i === index)) return;
91
90
  close(containerRef.current[index]);
92
91
  });
93
92
  });
94
- }, [targets, inputRef, containerRef, inside]);
93
+ }, [targets, inputRef, containerRef]);
95
94
  const getCoords = (target) => {
96
95
  const rect = target.getBoundingClientRect();
97
96
  const targetTop = rect.top + window.scrollY;
@@ -133,11 +132,11 @@ const TargetProviderContainer = ({ children }) => {
133
132
  {
134
133
  ref: (element) => containerRef.current[index] = element,
135
134
  onMouseEnter: () => {
136
- setInside(_.concat(inside, index));
135
+ insideMemory.push(index);
137
136
  elementFocusable(target, index).focus();
138
137
  },
139
138
  onMouseLeave: () => {
140
- setInside(_.filter(inside, (i) => i !== index));
139
+ insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
141
140
  elementFocusable(target, index).focus();
142
141
  },
143
142
  children: target.component
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.103",
3
+ "version": "1.4.105",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",