@dbcdk/react-components 0.0.23 → 0.0.24

package/dist/components/datetime-picker/DateTimePicker.d.ts

@@ -43,6 +43,7 @@ type BaseProps = {
         locale: string;
         enableTime: boolean;
     }) => string;
+    onOpenChange?: (open: boolean) => void;
 };
 export type DateTimePickerProps = (BaseProps & {
     mode?: 'single';

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

@@ -52,7 +52,7 @@ function defaultFormatRange(s, e, opts) {
     return '';
 }
 const cx = (...classes) => classes.filter(Boolean).join(' ');
-export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, }, _ref) {
+export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, onOpenChange, }, _ref) {
     void formatDate;
     void formatRange;
     const popRef = useRef(null);
@@ -314,6 +314,19 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             setDirty(false);
         }
     }, [text, mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
+    const emitTimeChange = useCallback((nextHH, nextMM) => {
+        if (mode !== 'single' || !enableTime)
+            return;
+        if (typeof value !== 'string')
+            return;
+        const current = localDateFromIso(value);
+        if (!current)
+            return;
+        const iso = isoFromLocalParts(current.getFullYear(), current.getMonth(), current.getDate(), nextHH, nextMM);
+        if (!iso)
+            return;
+        onChangeIso(iso);
+    }, [mode, enableTime, value, onChangeIso]);
     const clear = useCallback(() => {
         if (mode === 'single') {
             if (enableTime)
@@ -328,7 +341,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         setText('');
     }, [mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
     const fallbackPlaceholder = mode === 'single' ? 'Vælg dato' : 'Vælg interval';
-    return (_jsx(Popover, { matchTriggerWidth: false, ref: popRef, trigger: toggle => {
+    return (_jsx(Popover, { matchTriggerWidth: false, ref: popRef, onOpenChange: onOpenChange, trigger: toggle => {
             var _a, _b;
             return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, 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 => {
                         setDirty(true);
@@ -374,6 +387,14 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
                                 }
                                 const dayNum = utcDay.getUTCDate();
                                 return (_jsx("button", { role: "gridcell", "aria-selected": selected, "aria-disabled": disabledDay, onMouseEnter: () => setHoverUTC(utcDay), onClick: () => selectDay(utcDay), disabled: disabledDay, className: cx(styles.dayCell, inThisMonth ? styles.dayInMonth : styles.dayOutside, selected && styles.daySelected, inRange && styles.dayInRange, isToday && !selected && styles.dayToday, disabledDay && styles.dayDisabled), title: new Date(utcDay).toLocaleDateString(locale), children: dayNum }, idx));
-                            }) }), enableTime && mode === 'single' && (_jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { className: styles.timeLabel, children: [_jsx(Clock, { size: 14 }), " Tid"] }), _jsx("select", { value: timeHH, onChange: e => setTimeHH(parseInt(e.target.value, 10)), className: styles.timeSelect, children: hours.map(h => (_jsx("option", { value: h, children: String(h).padStart(2, '0') }, h))) }), _jsx("select", { value: timeMM, onChange: e => setTimeMM(parseInt(e.target.value, 10)), className: styles.timeSelect, children: minutes.map(m => (_jsx("option", { value: m, children: String(m).padStart(2, '0') }, m))) })] })), mode === 'range' && (_jsxs("div", { className: styles.footer, children: [_jsx(Button, { variant: "outlined", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { var _a; return (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: "OK" })] }))] })] }) }));
+                            }) }), enableTime && mode === 'single' && (_jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { className: styles.timeLabel, children: [_jsx(Clock, { size: 14 }), " Tid"] }), _jsx("select", { value: timeHH, onChange: e => {
+                                        const nextHH = parseInt(e.target.value, 10);
+                                        setTimeHH(nextHH);
+                                        emitTimeChange(nextHH, timeMM);
+                                    }, className: styles.timeSelect, children: hours.map(h => (_jsx("option", { value: h, children: String(h).padStart(2, '0') }, h))) }), _jsx("select", { value: timeMM, onChange: e => {
+                                        const nextMM = parseInt(e.target.value, 10);
+                                        setTimeMM(nextMM);
+                                        emitTimeChange(timeHH, nextMM);
+                                    }, className: styles.timeSelect, children: minutes.map(m => (_jsx("option", { value: m, children: String(m).padStart(2, '0') }, m))) })] })), mode === 'range' && (_jsxs("div", { className: styles.footer, children: [_jsx(Button, { variant: "outlined", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { var _a; return (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: "OK" })] }))] })] }) }));
 });
 DateTimePicker.displayName = 'DateTimePicker';

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

@@ -56,7 +56,7 @@ function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }
         setActiveIndex(operators.indexOf(op));
         (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return (_jsx(Popover, { ref: popRef, minWidth: "220px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Change operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
+    return (_jsx(Popover, { ref: popRef, minWidth: "220px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Skift operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
                 const selected = op === value;
                 return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
             }) }) }));

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

@@ -15,6 +15,7 @@
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
+  line-height: 20px;
 }
 
 /* =========================
@@ -264,6 +265,10 @@
   );
 }
 
+.operatorTrigger svg {
+  height: var(--component-size-xxs);
+  width: var(--component-size-xxs);
+}
 /* =========================
    VALUE WRAPPER
    ========================= */
@@ -302,6 +307,8 @@
 
 .filterField .operatorText {
   white-space: nowrap;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
 }
 
 .filterField input::placeholder {

package/package.json

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