@zauru-sdk/components 1.0.108 → 1.0.110

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 (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/Form/SelectField/index.js +9 -2
  3. package/dist/esm/Form/SelectField/index.js +9 -2
  4. package/package.json +6 -6
  5. package/src/Form/SelectField/index.tsx +7 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.110](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.109...v1.0.110) (2024-09-18)
7
+
8
+ **Note:** Version bump only for package @zauru-sdk/components
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.0.109](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.108...v1.0.109) (2024-09-18)
15
+
16
+ **Note:** Version bump only for package @zauru-sdk/components
17
+
18
+
19
+
20
+
21
+
6
22
  ## [1.0.108](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.107...v1.0.108) (2024-09-18)
7
23
 
8
24
  **Note:** Version bump only for package @zauru-sdk/components
package/dist/cjs/Form/SelectField/index.js CHANGED
@@ -122,6 +122,13 @@ const SelectField = (props) => {
122
122
  setIsEnterPressed(true);
123
123
  handleOptionClick(filteredOptions[highlightedIndex]);
124
124
  }
125
+ else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
126
+ e.preventDefault();
127
+ handleClear();
128
+ setInputValue("");
129
+ setFilteredOptions(options);
130
+ setIsOpen(true);
131
+ }
125
132
  };
126
133
  const scrollToHighlightedOption = () => {
127
134
  if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
@@ -138,10 +145,10 @@ const SelectField = (props) => {
138
145
  }
139
146
  return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
140
147
  ? "text-red-700 dark:text-red-500"
141
- : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, autoComplete: "off", value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
148
+ : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
142
149
  field.onChange(e);
143
150
  handleInputChange(e);
144
- } })) }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
151
+ }, autoComplete: "off" })) }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
145
152
  ? valueMulti.some((v) => v.value === option.value)
146
153
  : value?.value === option.value)
147
154
  ? "text-white bg-indigo-600"
package/dist/esm/Form/SelectField/index.js CHANGED
@@ -119,6 +119,13 @@ export const SelectField = (props) => {
119
119
  setIsEnterPressed(true);
120
120
  handleOptionClick(filteredOptions[highlightedIndex]);
121
121
  }
122
+ else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
123
+ e.preventDefault();
124
+ handleClear();
125
+ setInputValue("");
126
+ setFilteredOptions(options);
127
+ setIsOpen(true);
128
+ }
122
129
  };
123
130
  const scrollToHighlightedOption = () => {
124
131
  if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
@@ -135,10 +142,10 @@ export const SelectField = (props) => {
135
142
  }
136
143
  return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
137
144
  ? "text-red-700 dark:text-red-500"
138
- : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, autoComplete: "off", value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
145
+ : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
139
146
  field.onChange(e);
140
147
  handleInputChange(e);
141
- } })) }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
148
+ }, autoComplete: "off" })) }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
142
149
  ? valueMulti.some((v) => v.value === option.value)
143
150
  : value?.value === option.value)
144
151
  ? "text-white bg-indigo-600"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zauru-sdk/components",
3
- "version": "1.0.108",
3
+ "version": "1.0.110",
4
4
  "description": "Componentes reutilizables en las WebApps de Zauru.",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -34,11 +34,11 @@
34
34
  "@hookform/resolvers": "^3.9.0",
35
35
  "@reduxjs/toolkit": "^2.2.1",
36
36
  "@remix-run/react": "^2.8.1",
37
- "@zauru-sdk/common": "^1.0.105",
38
- "@zauru-sdk/hooks": "^1.0.108",
37
+ "@zauru-sdk/common": "^1.0.110",
38
+ "@zauru-sdk/hooks": "^1.0.110",
39
39
  "@zauru-sdk/icons": "^1.0.60",
40
- "@zauru-sdk/types": "^1.0.98",
41
- "@zauru-sdk/utils": "^1.0.105",
40
+ "@zauru-sdk/types": "^1.0.109",
41
+ "@zauru-sdk/utils": "^1.0.110",
42
42
  "framer-motion": "^11.0.8",
43
43
  "jsonwebtoken": "^9.0.2",
44
44
  "react": "^18.2.0",
@@ -50,5 +50,5 @@
50
50
  "styled-components": "^5.3.5",
51
51
  "zod": "^3.23.8"
52
52
  },
53
- "gitHead": "96d72971cc9b17ae40b25c31328a257ba6b220ce"
53
+ "gitHead": "15d8ecf97b16b9c4bd50b8a5984435b451a846e5"
54
54
  }
package/src/Form/SelectField/index.tsx CHANGED
@@ -184,6 +184,12 @@ export const SelectField = (props: Props) => {
184
184
  e.preventDefault();
185
185
  setIsEnterPressed(true);
186
186
  handleOptionClick(filteredOptions[highlightedIndex]);
187
+ } else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
188
+ e.preventDefault();
189
+ handleClear();
190
+ setInputValue("");
191
+ setFilteredOptions(options);
192
+ setIsOpen(true);
187
193
  }
188
194
  };
189
195
 
@@ -249,7 +255,6 @@ export const SelectField = (props: Props) => {
249
255
  {...field}
250
256
  type="text"
251
257
  id={id}
252
- autoComplete="off"
253
258
  value={inputValue}
254
259
  onFocus={() => setIsOpen(true)}
255
260
  onBlur={handleBlur}
@@ -264,6 +269,7 @@ export const SelectField = (props: Props) => {
264
269
  field.onChange(e);
265
270
  handleInputChange(e);
266
271
  }}
272
+ autoComplete="off"
267
273
  />
268
274
  )}
269
275
  />