@gustavo-valsechi/client 1.4.104 → 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 +0 -1
  9. package/dist/contexts/target/index.mjs +0 -1
  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
@@ -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.105",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",