armtek-uikit-react 1.0.277 → 1.0.278

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/lib/cjs/ui/Form/Select/Select.cjs +12 -7
  2. package/lib/cjs/ui/Form/Select/Select.d.ts +1 -0
  3. package/lib/esm/ui/Form/Select/Select.d.ts +1 -0
  4. package/lib/esm/ui/Form/Select/Select.js +12 -7
  5. package/package.json +1 -1
package/lib/cjs/ui/Form/Select/Select.cjs CHANGED
@@ -38,6 +38,7 @@ function Select(props, ref) {
38
38
  afterList,
39
39
  beforeList,
40
40
  query,
41
+ onQueryChange,
41
42
  optionClassName,
42
43
  onBlur: inputOnBlur,
43
44
  onFocus: inputOnFocus,
@@ -46,13 +47,18 @@ function Select(props, ref) {
46
47
  let [active, setActive] = React.useState(!!defaultOpen);
47
48
  let [selected, setSelected] = React.useState(defaultValue || (multiple ? [] : ""));
48
49
  let [focused, setFocused] = React.useState(false);
49
- let [q, setQ] = React.useState("");
50
+ let [q, setQ] = React.useState(defaultQuery || "");
50
51
  const anchorEl = React.useRef(null);
51
52
  const inlineOptRef = lib_hooks_useClickOutside.default(handleClose);
52
53
  const inputRef = React.useRef(null);
54
+ const realQuery = query !== void 0 ? query : q;
53
55
  React.useImperativeHandle(ref, () => {
54
56
  return inputRef.current;
55
57
  }, []);
58
+ const setSearchQuery = (nextQuery) => {
59
+ if (query === void 0) setQ(nextQuery);
60
+ if (onQueryChange) onQueryChange(nextQuery);
61
+ };
56
62
  React.useLayoutEffect(() => {
57
63
  var _a2;
58
64
  if (value !== void 0 || multiple || search) return;
@@ -123,12 +129,12 @@ function Select(props, ref) {
123
129
  onChange(e);
124
130
  }
125
131
  if (search && !multiple) {
126
- setQ(options.find((item) => getOptionValue(item) === newValueS).text);
132
+ setSearchQuery(options.find((item) => getOptionValue(item) === newValueS).text);
127
133
  }
128
134
  if (!multiple) handleClose();
129
135
  };
130
136
  const handleSearch = (e) => {
131
- setQ(e.target.value);
137
+ setSearchQuery(e.target.value);
132
138
  };
133
139
  const handleFocus = search ? (e) => {
134
140
  setFocused(true);
@@ -159,7 +165,7 @@ function Select(props, ref) {
159
165
  if (props.disabled) return;
160
166
  setSelected(multiple ? [] : "");
161
167
  if (search) {
162
- setQ("");
168
+ setSearchQuery("");
163
169
  setFocused(false);
164
170
  if (inputRef.current) inputRef.current.value = "";
165
171
  }
@@ -183,7 +189,7 @@ function Select(props, ref) {
183
189
  let realValue = value !== void 0 ? value : selected;
184
190
  let realActive = open !== void 0 ? open : active;
185
191
  let selectedText = multiple ? options.filter((item) => realValue == null ? void 0 : realValue.includes(getOptionValue(item))).map((item) => item.text).join(", ") : ((_a = options.find((item) => getOptionValue(item) === realValue)) == null ? void 0 : _a.text) || "";
186
- if (!!search) options = options.filter((item) => item.text.toLowerCase().includes(q.toLowerCase()));
192
+ if (!!search) options = options.filter((item) => item.text.toLowerCase().includes(realQuery.toLowerCase()));
187
193
  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
188
194
  let selectedOptions = options.filter((item) => valueArr.includes(getOptionValue(item)));
189
195
  let displayClear = clear && (multiple ? realValue && realValue.length > 0 : !!realValue);
@@ -206,8 +212,7 @@ function Select(props, ref) {
206
212
  const cachedStyles = React.useMemo(() => ({
207
213
  pointerEvents: "none"
208
214
  }), []);
209
- const realQuery = query !== void 0 ? query : q;
210
- let textInputValue = !search ? selectedText : value !== void 0 && !q ? selectedText : realQuery;
215
+ let textInputValue = !search ? selectedText : value !== void 0 && !realQuery ? selectedText : realQuery;
211
216
  if (search && multiple) textInputValue = realQuery;
212
217
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-testid": "select", children: [
213
218
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-select", children: [
package/lib/cjs/ui/Form/Select/Select.d.ts CHANGED
@@ -18,6 +18,7 @@ type SelectBaseProps = {
18
18
  onSubmit?: () => void;
19
19
  defaultQuery?: string;
20
20
  query?: string;
21
+ onQueryChange?: (query: string) => void;
21
22
  optionControls?: boolean;
22
23
  afterList?: string | ReactNode;
23
24
  beforeList?: string | ReactNode;
package/lib/esm/ui/Form/Select/Select.d.ts CHANGED
@@ -18,6 +18,7 @@ type SelectBaseProps = {
18
18
  onSubmit?: () => void;
19
19
  defaultQuery?: string;
20
20
  query?: string;
21
+ onQueryChange?: (query: string) => void;
21
22
  optionControls?: boolean;
22
23
  afterList?: string | ReactNode;
23
24
  beforeList?: string | ReactNode;
package/lib/esm/ui/Form/Select/Select.js CHANGED
@@ -36,6 +36,7 @@ function Select(props, ref) {
36
36
  afterList,
37
37
  beforeList,
38
38
  query,
39
+ onQueryChange,
39
40
  optionClassName,
40
41
  onBlur: inputOnBlur,
41
42
  onFocus: inputOnFocus,
@@ -44,13 +45,18 @@ function Select(props, ref) {
44
45
  let [active, setActive] = useState(!!defaultOpen);
45
46
  let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ""));
46
47
  let [focused, setFocused] = useState(false);
47
- let [q, setQ] = useState("");
48
+ let [q, setQ] = useState(defaultQuery || "");
48
49
  const anchorEl = useRef(null);
49
50
  const inlineOptRef = useClickOutside(handleClose);
50
51
  const inputRef = useRef(null);
52
+ const realQuery = query !== void 0 ? query : q;
51
53
  useImperativeHandle(ref, () => {
52
54
  return inputRef.current;
53
55
  }, []);
56
+ const setSearchQuery = (nextQuery) => {
57
+ if (query === void 0) setQ(nextQuery);
58
+ if (onQueryChange) onQueryChange(nextQuery);
59
+ };
54
60
  useLayoutEffect(() => {
55
61
  var _a2;
56
62
  if (value !== void 0 || multiple || search) return;
@@ -121,12 +127,12 @@ function Select(props, ref) {
121
127
  onChange(e);
122
128
  }
123
129
  if (search && !multiple) {
124
- setQ(options.find((item) => getOptionValue(item) === newValueS).text);
130
+ setSearchQuery(options.find((item) => getOptionValue(item) === newValueS).text);
125
131
  }
126
132
  if (!multiple) handleClose();
127
133
  };
128
134
  const handleSearch = (e) => {
129
- setQ(e.target.value);
135
+ setSearchQuery(e.target.value);
130
136
  };
131
137
  const handleFocus = search ? (e) => {
132
138
  setFocused(true);
@@ -157,7 +163,7 @@ function Select(props, ref) {
157
163
  if (props.disabled) return;
158
164
  setSelected(multiple ? [] : "");
159
165
  if (search) {
160
- setQ("");
166
+ setSearchQuery("");
161
167
  setFocused(false);
162
168
  if (inputRef.current) inputRef.current.value = "";
163
169
  }
@@ -181,7 +187,7 @@ function Select(props, ref) {
181
187
  let realValue = value !== void 0 ? value : selected;
182
188
  let realActive = open !== void 0 ? open : active;
183
189
  let selectedText = multiple ? options.filter((item) => realValue == null ? void 0 : realValue.includes(getOptionValue(item))).map((item) => item.text).join(", ") : ((_a = options.find((item) => getOptionValue(item) === realValue)) == null ? void 0 : _a.text) || "";
184
- if (!!search) options = options.filter((item) => item.text.toLowerCase().includes(q.toLowerCase()));
190
+ if (!!search) options = options.filter((item) => item.text.toLowerCase().includes(realQuery.toLowerCase()));
185
191
  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
186
192
  let selectedOptions = options.filter((item) => valueArr.includes(getOptionValue(item)));
187
193
  let displayClear = clear && (multiple ? realValue && realValue.length > 0 : !!realValue);
@@ -204,8 +210,7 @@ function Select(props, ref) {
204
210
  const cachedStyles = useMemo(() => ({
205
211
  pointerEvents: "none"
206
212
  }), []);
207
- const realQuery = query !== void 0 ? query : q;
208
- let textInputValue = !search ? selectedText : value !== void 0 && !q ? selectedText : realQuery;
213
+ let textInputValue = !search ? selectedText : value !== void 0 && !realQuery ? selectedText : realQuery;
209
214
  if (search && multiple) textInputValue = realQuery;
210
215
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className, "data-testid": "select", children: [
211
216
  /* @__PURE__ */ jsxs("div", { className: "arm-select", children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "armtek-uikit-react",
3
- "version": "1.0.277",
3
+ "version": "1.0.278",
4
4
  "description": "Armtek UIKit for React",
5
5
  "main": "lib/cjs/index.cjs",
6
6
  "module": "lib/esm/index.js",