@dbcdk/react-components 0.0.51 → 0.0.52

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/forms/input/Input.module.css +1 -1
  2. package/dist/components/forms/typeahead/Typeahead.js +11 -4
  3. package/dist/components/forms/typeahead/Typeahead.module.css +3 -0
  4. package/package.json +1 -1
package/dist/components/forms/input/Input.module.css CHANGED
@@ -389,7 +389,7 @@
389
389
  display: flex;
390
390
  align-items: center;
391
391
  gap: 4px;
392
- margin-left: 4px;
392
+ margin-left: var(--spacing-xs);
393
393
  }
394
394
 
395
395
  .endAdornment {
package/dist/components/forms/typeahead/Typeahead.js CHANGED
@@ -6,6 +6,7 @@ import { Chip } from '../../../components/chip/Chip';
6
6
  import { Input } from '../../../components/forms/input/Input';
7
7
  import { Menu } from '../../../components/menu/Menu';
8
8
  import { Popover } from '../../../components/popover/Popover';
9
+ import styles from './Typeahead.module.css';
9
10
  export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
10
11
  var _a;
11
12
  const inputRef = useRef(null);
@@ -43,7 +44,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
43
44
  const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: {
44
45
  whiteSpace: 'nowrap',
45
46
  flexShrink: 0,
46
- marginRight: 6,
47
+ marginRight: 'var(--spacing-xxs)',
47
48
  }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
48
49
  const MAX_CHIPS = 2;
49
50
  const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
@@ -56,6 +57,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
56
57
  overflow: 'hidden',
57
58
  }, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
58
59
  })())) : undefined;
60
+ const usesCountAdornment = mode === 'multi' && multiValueDisplayMode === 'count' && selectedOptions.length > 0;
59
61
  useEffect(() => {
60
62
  var _a;
61
63
  if (mode === 'multi') {
@@ -329,7 +331,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
329
331
  if (e.defaultPrevented)
330
332
  return;
331
333
  handleKeyDown(e);
332
- }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, onClear: () => {
334
+ }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, inputClassName: [
335
+ inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClassName,
336
+ usesCountAdornment ? styles.inputWithoutStartPadding : '',
337
+ ]
338
+ .filter(Boolean)
339
+ .join(' '), onClear: () => {
333
340
  setInputValue('');
334
341
  setQuery('');
335
342
  setActiveIndex(-1);
@@ -346,7 +353,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
346
353
  ? Array.isArray(selectedValue) && selectedValue.includes(option.value)
347
354
  : option.value === selectedValue;
348
355
  const optionId = `${listboxId}-option-${index}`;
349
- return (mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
356
+ return mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
350
357
  optionRefs.current[index] = node;
351
358
  }, interactiveProps: {
352
359
  id: optionId,
@@ -360,7 +367,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
360
367
  optionRefs.current[index] = node;
361
368
  }, id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
362
369
  e.preventDefault();
363
- }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value)));
370
+ }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
364
371
  })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
365
372
  multiSelectedValuesDisplayMode === 'below-input' &&
366
373
  selectedOptions.length > 0 && (_jsx("div", { style: {
package/dist/components/forms/typeahead/Typeahead.module.css ADDED
@@ -0,0 +1,3 @@
1
+ .inputWithoutStartPadding {
2
+ padding-inline-start: 0;
3
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.51",
3
+ "version": "0.0.52",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",