@dbcdk/react-components 0.0.46 → 0.0.48

package/dist/components/circle/Circle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
 export function Circle({ severity, children, glow, muted, pulse, size = 'sm', }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
+    return (_jsxs("span", { className: styles.container, "data-size": size, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

package/dist/components/circle/Circle.module.css

@@ -5,10 +5,15 @@
   gap: var(--spacing-xs);
   white-space: nowrap;
   font-family: var(--font-family);
-  color: var(--color-fg-default);
+  color: inherit;
   line-height: 1;
 }
 
+.container[data-size='2xs'] {
+  gap: var(--spacing-xxs);
+  font-size: var(--font-size-xs);
+}
+
 .circle {
   position: relative;
   display: inline-block;

package/dist/components/datetime-picker/DateTimePicker.js

@@ -346,7 +346,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             var _a, _b;
             return (_jsx("div", { onClick: toggle, className: [styles.triggerWrap, fullWidth ? styles.triggerWrapFullWidth : '']
                     .filter(Boolean)
-                    .join(' '), children: _jsx(Input, { ...inputProps, fieldClassName: styles.compactTriggerField, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
+                    .join(' '), children: _jsx(Input, { ...inputProps, fieldClassName: styles.compactTriggerField, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
                         setDirty(true);
                         const raw = e.target.value;
                         const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, false);

package/dist/components/datetime-picker/DateTimePicker.module.css

@@ -9,11 +9,6 @@
 
 .compactTriggerField {
   padding-block: 2px;
-  padding-inline-end: calc(var(--spacing-xs) + 24px);
-}
-
-.compactTriggerField.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-sm));
 }
 
 .panel {

package/dist/components/filter-field/FilterField.js

@@ -160,16 +160,20 @@ export function FilterField({ field, control, operator, value, onChange, operato
             .filter(Boolean)
             .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: [styles.valueWrapper, control === 'input' ? 'dbc-flex dbc-flex-grow' : '']
                     .filter(Boolean)
-                    .join(' '), style: { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, value: localValue, onChange: e => {
+                    .join(' '), style: { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, fieldClassName: styles.embeddedInputField, inputClassName: styles.embeddedInputElement, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         setLocalValue(next);
                         scheduleEmitValue(next);
                     }, onBlur: () => {
                         flushPendingValue();
-                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'off', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
                         clearDebounce();
                         pendingValueRef.current = '';
                         setLocalValue('');
                         emit({ value: '' });
-                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), placeholder: placeholder, variant: "embedded", inputProps: { inputSize: size }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: true })) })] }));
+                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), placeholder: placeholder, variant: "embedded", inputProps: {
+                        inputSize: size,
+                        fieldClassName: styles.embeddedInputField,
+                        inputClassName: styles.embeddedInputElement,
+                    }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: true })) })] }));
 }

package/dist/components/filter-field/FilterField.module.css

@@ -291,7 +291,6 @@
   min-width: 0;
 }
 
-/* Embedded typeahead tweaks */
 .filterField .valueWrapper .field {
   min-height: unset;
   height: 100%;
@@ -299,16 +298,22 @@
   box-shadow: none;
   border: none;
   background: transparent;
+}
+
+.embeddedInputField {
   padding: 0;
 }
-.filterField .valueWrapper .input {
+
+.embeddedInputElement {
   height: 100%;
   block-size: 100%;
   min-height: unset;
   background: transparent;
   border: none;
   box-shadow: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  padding-inline-start: 0;
   margin: 0;
 }
 .filterField .valueWrapper .startAdornment {

package/dist/components/forms/input/Input.d.ts

@@ -26,6 +26,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
      */
     endAdornment?: React.ReactNode;
     fieldClassName?: string;
+    inputClassName?: string;
     'data-cy'?: string;
 };
 export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/input/Input.js

@@ -18,7 +18,7 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, style, className, fieldClassName, startAdornment, endAdornment, ...inputProps }, ref) {
+export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -57,6 +57,8 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                         fieldClassName !== null && fieldClassName !== void 0 ? fieldClassName : '',
                     ]
                         .filter(Boolean)
-                        .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), startAdornment && _jsx("span", { className: styles.startAdornment, children: startAdornment }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : ''].filter(Boolean).join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                        .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), startAdornment && _jsx("span", { className: styles.startAdornment, children: startAdornment }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
+                                .filter(Boolean)
+                                .join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';

package/dist/components/forms/input/Input.module.css

@@ -28,8 +28,6 @@
   background: var(--color-bg-surface);
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
   box-sizing: border-box;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -52,7 +50,8 @@
   line-height: var(--line-height-normal);
   border: none;
   outline: none;
-  padding: 0;
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
   margin: 0;
 }
 
@@ -69,13 +68,13 @@
 }
 
 /* Button group styling */
-.withButton .input {
+.withButton .field {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.withClear .field {
-  padding-inline-end: calc(var(--spacing-md) + 16px);
+.withClear .input {
+  padding-inline-end: calc(var(--spacing-xs) + 16px + var(--spacing-xs));
 }
 
 /* Global focus reset - variants own visible focus treatment */
@@ -139,7 +138,6 @@
   border-color: transparent;
   border-radius: 0;
   box-shadow: none;
-  padding-inline: var(--spacing-xs);
   padding-block: 0;
   block-size: 100%;
 }
@@ -331,17 +329,17 @@
 }
 
 /* Leading icon */
-.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
+.fieldWithIcon .input {
+  padding-inline-start: calc(var(--spacing-sm) + var(--icon-size-md) + var(--spacing-xs));
 }
 
-.embedded.fieldWithIcon {
-  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-xl));
+.embedded.fieldWithIcon .input {
+  padding-inline-start: calc(var(--spacing-xs) + var(--icon-size-md) + var(--spacing-xs));
 }
 
 .icon {
   position: absolute;
-  inset-inline-start: var(--spacing-md);
+  inset-inline-start: var(--spacing-sm);
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
@@ -354,6 +352,10 @@
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
+.embedded .icon {
+  inset-inline-start: var(--spacing-xs);
+}
+
 .field:focus-within .icon {
   color: var(--color-fg-muted);
 }

package/dist/components/forms/typeahead/Typeahead.js

@@ -6,7 +6,7 @@ import { Chip } from '../../../components/chip/Chip';
 import { Input } from '../../../components/forms/input/Input';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
-export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'No results', filterOptions, inputProps, inputSize, width, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
+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, }) {
     var _a;
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
@@ -308,7 +308,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             if (e.defaultPrevented)
                                 return;
                             handleKeyDown(e);
-                        }, 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 : 'off', 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: () => {
+                        }, 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: () => {
                             setInputValue('');
                             setQuery('');
                             setActiveIndex(-1);

package/dist/components/menu/Menu.module.css

@@ -91,7 +91,7 @@
 /* Hover: support both cases (interactive element, or wrapper child) */
 .interactive:hover:not(.selected),
 .row:hover > .interactiveChild:not(.selected) {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: var(--color-bg-toolbar-hover);
 }
 
 /* Focus ring: support both cases */
@@ -110,7 +110,7 @@
 .active,
 .interactive.active,
 .row > .interactiveChild.active {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: var(--color-bg-toolbar-hover);
 }
 
 /* Selected item */

package/dist/components/meta-bar/MetaBar.js

@@ -5,5 +5,5 @@ export function MetaBar({ items, separator = '•' }) {
     const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
     if (visibleItems.length === 0)
         return null;
-    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
+    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [item.label && _jsxs("span", { children: [item.label, ":\u00A0"] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
 }

package/dist/components/meta-bar/MetaBar.module.css

@@ -6,6 +6,14 @@
   font-size: var(--font-size-xs);
 }
 
+.itemMuted,
+.itemDefault {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  line-height: 1;
+}
+
 .itemMuted {
   color: var(--color-fg-subtle);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",