@dbcdk/react-components 0.0.113 → 0.0.114

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 (4) hide show
  1. package/dist/components/search-box/SearchBox.cjs +26 -8
  2. package/dist/components/search-box/SearchBox.d.ts +1 -1
  3. package/dist/components/search-box/SearchBox.js +26 -8
  4. package/package.json +1 -1
package/dist/components/search-box/SearchBox.cjs CHANGED
@@ -87,14 +87,23 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
87
87
  return () => window.removeEventListener("keydown", handleKeyDown);
88
88
  }
89
89
  }, [enableHotkey]);
90
+ const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
91
+ const hasQuery = draft.trim().length > 0;
92
+ const canShowPopover = hasQuery || hasInitialTemplate;
90
93
  const handleChange = react.useCallback(
91
94
  (e) => {
92
- var _a2, _b;
93
- setDraft(e.target.value);
94
- if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
95
+ var _a2, _b, _c;
96
+ const nextDraft = e.target.value;
97
+ const nextHasQuery = nextDraft.trim().length > 0;
98
+ setDraft(nextDraft);
99
+ if (nextHasQuery || hasInitialTemplate) {
100
+ if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
101
+ } else {
102
+ (_c = popoverRef.current) == null ? void 0 : _c.close();
103
+ }
95
104
  onChange == null ? void 0 : onChange(e);
96
105
  },
97
- [onChange]
106
+ [hasInitialTemplate, onChange]
98
107
  );
99
108
  const handleSelect = react.useCallback(
100
109
  (item) => {
@@ -119,6 +128,11 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
119
128
  react.useEffect(() => {
120
129
  setActiveIndex(null);
121
130
  }, [result]);
131
+ react.useEffect(() => {
132
+ var _a2;
133
+ if (canShowPopover) return;
134
+ (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
135
+ }, [canShowPopover]);
122
136
  const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
123
137
  const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : buttonIcon;
124
138
  const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
@@ -157,7 +171,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
157
171
  }
158
172
  );
159
173
  }
160
- const dropdownContent = resultTemplate ? resultTemplate : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
174
+ const dropdownContent = !canShowPopover ? null : !hasQuery && hasInitialTemplate ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: initialTemplate }) : resultTemplate ? resultTemplate : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
161
175
  /* @__PURE__ */ jsxRuntime.jsx(
162
176
  "ul",
163
177
  {
@@ -186,7 +200,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
186
200
  ))
187
201
  }
188
202
  ),
189
- !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: !searchQuery ? initialTemplate != null ? initialTemplate : "Indtast s\xF8geord" : noResultText })
203
+ !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
190
204
  ] });
191
205
  return /* @__PURE__ */ jsxRuntime.jsx(
192
206
  "div",
@@ -208,15 +222,19 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
208
222
  Input.Input,
209
223
  {
210
224
  ref: internalInputRef,
211
- onFocusCapture: event,
225
+ onFocusCapture: (e) => {
226
+ if (!canShowPopover) return;
227
+ event(e);
228
+ },
212
229
  onClick: () => {
213
230
  var _a3, _b;
231
+ if (!canShowPopover) return;
214
232
  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
215
233
  },
216
234
  role: "combobox",
217
235
  "aria-haspopup": "listbox",
218
236
  "aria-expanded": popoverOpen,
219
- "aria-controls": listboxId,
237
+ "aria-controls": canShowPopover ? listboxId : void 0,
220
238
  "aria-autocomplete": "list",
221
239
  "aria-activedescendant": activeOptionId,
222
240
  clearAriaLabel: "Ryd s\xF8gning",
package/dist/components/search-box/SearchBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { InputVariant } from '../../components/forms/input/Input';
3
3
  import { Size } from '../../types/sizes.types';
4
- type SearchBoxProps<T extends Record<string, unknown>> = {
4
+ export type SearchBoxProps<T extends Record<string, unknown>> = {
5
5
  inputWidth?: string | number;
6
6
  maxWidth?: string | number;
7
7
  inputSize?: Exclude<Size, 'xl'>;
package/dist/components/search-box/SearchBox.js CHANGED
@@ -81,14 +81,23 @@ const SearchBox = forwardRef(function SearchBoxInner({
81
81
  return () => window.removeEventListener("keydown", handleKeyDown);
82
82
  }
83
83
  }, [enableHotkey]);
84
+ const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
85
+ const hasQuery = draft.trim().length > 0;
86
+ const canShowPopover = hasQuery || hasInitialTemplate;
84
87
  const handleChange = useCallback(
85
88
  (e) => {
86
- var _a2, _b;
87
- setDraft(e.target.value);
88
- if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
89
+ var _a2, _b, _c;
90
+ const nextDraft = e.target.value;
91
+ const nextHasQuery = nextDraft.trim().length > 0;
92
+ setDraft(nextDraft);
93
+ if (nextHasQuery || hasInitialTemplate) {
94
+ if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
95
+ } else {
96
+ (_c = popoverRef.current) == null ? void 0 : _c.close();
97
+ }
89
98
  onChange == null ? void 0 : onChange(e);
90
99
  },
91
- [onChange]
100
+ [hasInitialTemplate, onChange]
92
101
  );
93
102
  const handleSelect = useCallback(
94
103
  (item) => {
@@ -113,6 +122,11 @@ const SearchBox = forwardRef(function SearchBoxInner({
113
122
  useEffect(() => {
114
123
  setActiveIndex(null);
115
124
  }, [result]);
125
+ useEffect(() => {
126
+ var _a2;
127
+ if (canShowPopover) return;
128
+ (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
129
+ }, [canShowPopover]);
116
130
  const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
117
131
  const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
118
132
  const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
@@ -151,7 +165,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
151
165
  }
152
166
  );
153
167
  }
154
- const dropdownContent = resultTemplate ? resultTemplate : /* @__PURE__ */ jsxs(Fragment, { children: [
168
+ const dropdownContent = !canShowPopover ? null : !hasQuery && hasInitialTemplate ? /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: initialTemplate }) : resultTemplate ? resultTemplate : /* @__PURE__ */ jsxs(Fragment, { children: [
155
169
  /* @__PURE__ */ jsx(
156
170
  "ul",
157
171
  {
@@ -180,7 +194,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
180
194
  ))
181
195
  }
182
196
  ),
183
- !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: !searchQuery ? initialTemplate != null ? initialTemplate : "Indtast s\xF8geord" : noResultText })
197
+ !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: noResultText })
184
198
  ] });
185
199
  return /* @__PURE__ */ jsx(
186
200
  "div",
@@ -202,15 +216,19 @@ const SearchBox = forwardRef(function SearchBoxInner({
202
216
  Input,
203
217
  {
204
218
  ref: internalInputRef,
205
- onFocusCapture: event,
219
+ onFocusCapture: (e) => {
220
+ if (!canShowPopover) return;
221
+ event(e);
222
+ },
206
223
  onClick: () => {
207
224
  var _a3, _b;
225
+ if (!canShowPopover) return;
208
226
  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
209
227
  },
210
228
  role: "combobox",
211
229
  "aria-haspopup": "listbox",
212
230
  "aria-expanded": popoverOpen,
213
- "aria-controls": listboxId,
231
+ "aria-controls": canShowPopover ? listboxId : void 0,
214
232
  "aria-autocomplete": "list",
215
233
  "aria-activedescendant": activeOptionId,
216
234
  clearAriaLabel: "Ryd s\xF8gning",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.113",
3
+ "version": "0.0.114",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",