karsten-design-system 1.1.81 → 1.1.83

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 (3) hide show
  1. package/dist/index.js +42 -38
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4165,30 +4165,44 @@ function Select(props) {
4165
4165
  .normalize('NFD')
4166
4166
  .replace(/[\u0300-\u036f]/g, '')
4167
4167
  .toLowerCase();
4168
- // const filteredOptions = (() => {
4169
- // if (!hasOnInputChange || (isOpen && searchText.length > 0)) {
4170
- // return options.filter((option) =>
4171
- // normalize(option.label).includes(normalize(searchText))
4172
- // )
4173
- // }
4174
- // if (isOpen && props.value) {
4175
- // return [props.value]
4176
- // }
4177
- // return []
4178
- // })()
4168
+ const ensureValueInOptions = (optionsList, currentValue) => {
4169
+ if (!currentValue)
4170
+ return optionsList;
4171
+ const allOptions = [...optionsList];
4172
+ if (!allOptions.find((opt) => opt.value === currentValue.value)) {
4173
+ allOptions.unshift(currentValue);
4174
+ }
4175
+ return allOptions;
4176
+ };
4179
4177
  const filteredOptions = (() => {
4178
+ const allOptions = ensureValueInOptions(options, props.value);
4180
4179
  const hasSearch = searchText.length > 0;
4181
4180
  if (hasOnInputChange) {
4182
4181
  if (isOpen) {
4183
4182
  if (hasSearch) {
4184
- return options.filter((option) => normalize(option.label).includes(normalize(searchText)));
4183
+ return allOptions;
4185
4184
  }
4186
- return props.value ? [props.value] : [];
4185
+ return allOptions;
4187
4186
  }
4188
- return props.value ? [props.value] : [];
4187
+ return allOptions;
4189
4188
  }
4190
- return options.filter((option) => normalize(option.label).includes(normalize(searchText)));
4189
+ return allOptions.filter((option) => normalize(option.label).includes(normalize(searchText)));
4191
4190
  })();
4191
+ const handleSelect = (option) => {
4192
+ if (!option)
4193
+ return;
4194
+ if (props.value?.value === option.value) {
4195
+ props.onChange(null);
4196
+ setSearchText('');
4197
+ }
4198
+ else {
4199
+ props.onChange(option);
4200
+ if (!hasOnInputChange) {
4201
+ setSearchText(option.label);
4202
+ }
4203
+ }
4204
+ handleClose();
4205
+ };
4192
4206
  const toggleDropdown = () => {
4193
4207
  if (!disabled && !isLoading) {
4194
4208
  const newState = !isOpen;
@@ -4200,23 +4214,13 @@ function Select(props) {
4200
4214
  }, 0);
4201
4215
  }
4202
4216
  else {
4203
- setSearchText(props.value?.label ?? '');
4217
+ handleClose();
4204
4218
  }
4205
4219
  }
4206
4220
  };
4207
- const handleSelect = (option) => {
4208
- if (props.value?.value === option.value) {
4209
- props.onChange(null);
4210
- setSearchText('');
4211
- }
4212
- else {
4213
- props.onChange(option);
4214
- if (!hasOnInputChange) {
4215
- setSearchText(option.label);
4216
- }
4217
- }
4221
+ const handleClose = () => {
4218
4222
  setIsOpen(false);
4219
- setHighlightedIndex(-1);
4223
+ setSearchText('');
4220
4224
  };
4221
4225
  const hasError = !!error && !disabled;
4222
4226
  const isInputDisabled = disabled || isLoading;
@@ -4229,9 +4233,7 @@ function Select(props) {
4229
4233
  const handleClickOutside = (event) => {
4230
4234
  if (containerRef.current &&
4231
4235
  !containerRef.current.contains(event.target)) {
4232
- setIsOpen(false);
4233
- setSearchText(props.value?.label ?? '');
4234
- setHighlightedIndex(-1);
4236
+ handleClose();
4235
4237
  }
4236
4238
  };
4237
4239
  document.addEventListener('mousedown', handleClickOutside);
@@ -4244,10 +4246,14 @@ function Select(props) {
4244
4246
  : isOpen
4245
4247
  ? searchText
4246
4248
  : (props.value?.label ?? ''), onClick: toggleDropdown, onChange: (e) => {
4247
- if (isOpen) {
4248
- setSearchText(e.target.value);
4249
- setHighlightedIndex(0);
4250
- props.onInputChange?.(e.target.value);
4249
+ const inputValue = e.target.value;
4250
+ setSearchText(inputValue);
4251
+ setHighlightedIndex(0);
4252
+ if (hasOnInputChange) {
4253
+ props.onInputChange?.(inputValue);
4254
+ }
4255
+ if (!isOpen) {
4256
+ setIsOpen(true);
4251
4257
  }
4252
4258
  }, onKeyDown: (e) => {
4253
4259
  if (!isOpen)
@@ -4269,9 +4275,7 @@ function Select(props) {
4269
4275
  }
4270
4276
  if (e.key === 'Escape') {
4271
4277
  e.preventDefault();
4272
- setIsOpen(false);
4273
- setSearchText('');
4274
- setHighlightedIndex(-1);
4278
+ handleClose();
4275
4279
  }
4276
4280
  }, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md', hasError
4277
4281
  ? 'border-redError placeholder:text-redError'