@dbcdk/react-components 0.0.60 → 0.0.62

package/dist/components/filter-field/FilterField.d.ts

@@ -27,10 +27,11 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     minWidth?: string;
     width?: string;
     maxWidth?: string;
+    popoverWidth?: string;
     debounceTime?: number;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, popoverWidth, debounceTime, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

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

@@ -69,7 +69,7 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, minWidth, width, maxWidth, popoverWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
     var _a, _b, _c, _d, _e, _f;
     const filterFieldRef = useRef(null);
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
@@ -183,7 +183,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                         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 }), minWidth: minWidth, popoverAnchorRef: filterFieldRef, placeholder: placeholder, variant: "embedded", inputProps: {
+                    } })) : (_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 }), minWidth: minWidth, popoverWidth: popoverWidth, popoverAnchorRef: filterFieldRef, placeholder: placeholder, variant: "embedded", inputProps: {
                         inputSize: size,
                         fieldClassName: styles.embeddedInputField,
                         inputClassName: styles.embeddedInputElement,

package/dist/components/forms/text-area/Textarea.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useId, useMemo } from 'react';
+import { useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Textarea.module.css';
 import { InputContainer } from '../input-container/InputContainer';
@@ -9,17 +9,28 @@ export const Textarea = function Textarea({ value, inputChanged, disabled, rows
 label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, 
 // Native textarea props
 className, ...rest }) {
+    const HEIGHT_BUFFER_PX = 2;
     const generatedId = useId();
     const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const textareaRef = useRef(null);
+    const syncHeight = useCallback((textarea) => {
+        if (!adjustHeight)
+            return;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
+    }, [adjustHeight]);
+    useLayoutEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        syncHeight(textarea);
+    }, [syncHeight, value, rows]);
     const onInput = useCallback((e) => {
         const textarea = e.currentTarget;
-        if (adjustHeight) {
-            textarea.style.height = 'auto';
-            textarea.style.height = `${textarea.scrollHeight}px`;
-        }
+        syncHeight(textarea);
         inputChanged(e);
-    }, [inputChanged, adjustHeight]);
-    const inputField = useMemo(() => (_jsx("textarea", { ...rest, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
+    }, [inputChanged, syncHeight]);
+    const inputField = useMemo(() => (_jsx("textarea", { ...rest, ref: textareaRef, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
     // Enable tooltip if tooltip exists, and if showTooltip is either true or undefined.
     // (So you can deprecate showTooltip later without breaking callers.)
     const tooltipEnabled = Boolean(tooltip) && (showTooltip !== null && showTooltip !== void 0 ? showTooltip : true);

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -26,6 +26,7 @@ interface TypeaheadProps<T> {
     inputSize?: InputProps['inputSize'];
     width?: InputProps['width'];
     minWidth?: string;
+    popoverWidth?: string;
     autoComplete?: InputProps['autoComplete'];
     autoCorrect?: InputProps['autoCorrect'];
     autoCapitalize?: InputProps['autoCapitalize'];
@@ -33,5 +34,5 @@ interface TypeaheadProps<T> {
     popoverAnchorRef?: React.RefObject<HTMLElement | null>;
     fitContent?: boolean;
 }
-export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, }: TypeaheadProps<T>): React.ReactElement;
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, }: TypeaheadProps<T>): React.ReactElement;
 export {};

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

@@ -86,7 +86,7 @@ function measureFitContentWidth(input, text, minWidth) {
         endAdornmentWidth);
     return Math.max(parseLengthToPx(minWidth, inputFontSize) || 120, nextWidth);
 }
-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, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent = false, }) {
+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, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent = false, }) {
     var _a, _b;
     const rootRef = useRef(null);
     const inputRef = useRef(null);
@@ -528,7 +528,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
             flex: fullWidth || shouldFitContent ? '1 1 auto' : undefined,
             minWidth: 0,
             maxWidth: shouldFitContent ? '100%' : undefined,
-        }, children: [_jsx(Popover, { open: open, minWidth: minWidth, matchTriggerWidth: true, fillTrigger: true, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
+        }, children: [_jsx(Popover, { open: open, minWidth: popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : minWidth, matchTriggerWidth: true, fillTrigger: true, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
                     setOpen(nextOpen);
                     if (nextOpen) {
                         if (mode === 'single' && selectedOption) {

package/package.json

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