@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/inline-status/InlineStatus.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./InlineStatus.module.css');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        styles__default.default.container,
+        styles__default.default[severity],
+        styles__default.default[size],
+        fullWidth ? styles__default.default.fullWidth : "",
+        hasLeading ? styles__default.default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.body, children })
+      ]
+    }
+  );
+}
+
+exports.InlineStatus = InlineStatus;

package/dist/components/inline-status/InlineStatus.d.ts

@@ -0,0 +1,11 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface InlineStatusProps {
+    children: ReactNode;
+    severity?: Severity;
+    customIcon?: ReactNode;
+    disableIcon?: boolean;
+    fullWidth?: boolean;
+    size?: 'sm' | 'md';
+}
+export declare function InlineStatus({ children, severity, customIcon, disableIcon, fullWidth, size, }: InlineStatusProps): JSX.Element;

package/dist/components/inline-status/InlineStatus.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './InlineStatus.module.css';
+import { Icon } from '../icon/Icon';
+
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        styles.container,
+        styles[severity],
+        styles[size],
+        fullWidth ? styles.fullWidth : "",
+        hasLeading ? styles.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsx("span", { className: styles.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsx("span", { className: styles.body, children })
+      ]
+    }
+  );
+}
+
+export { InlineStatus };

package/dist/components/inline-status/InlineStatus.module.css

@@ -0,0 +1,98 @@
+.container {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+}
+
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+
+.leading svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+
+.body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.sm {
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+}
+
+.neutral {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+
+.success {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+
+.warning {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+
+.error {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+
+.info {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+
+.brand {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
+.accent {
+  --inline-status-bg: var(--color-accent-bg);
+  --inline-status-fg: var(--color-accent-fg);
+  --inline-status-border: var(--color-accent-border);
+}

package/dist/components/interval-select/IntervalSelect.cjs

@@ -0,0 +1,203 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Button = require('../../components/button/Button');
+var ClearButton = require('../../components/clear-button/ClearButton');
+var InputContainer = require('../../components/forms/input-container/InputContainer');
+var Menu = require('../../components/menu/Menu');
+var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
+var Popover = require('../../components/popover/Popover');
+var dateTimeHelpers = require('../datetime-picker/dateTimeHelpers');
+
+function IntervalSelect({
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  // tooltip
+  tooltip,
+  tooltipPlacement = "right",
+  // IntervalSelect props
+  id,
+  options,
+  selectedValue,
+  onChange,
+  baseDate,
+  placeholder = "V\xE6lg interval",
+  size,
+  variant = "outlined",
+  onClear,
+  dataCy,
+  disabled
+}) {
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `interval-select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = react.useRef(null);
+  const optionRefs = react.useRef([]);
+  const selectedIndex = react.useMemo(
+    () => options.findIndex((o) => o.minutesAgo === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = react.useState(selectedIndex >= 0 ? selectedIndex : 0);
+  react.useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const selected = react.useMemo(
+    () => {
+      var _a;
+      return (_a = options.find((o) => o.minutesAgo === selectedValue)) != null ? _a : null;
+    },
+    [options, selectedValue]
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const handleCommit = (opt) => {
+    var _a;
+    const base = baseDate != null ? baseDate : /* @__PURE__ */ new Date();
+    const dateLocal = new Date(base.getTime() - opt.minutesAgo * 6e4);
+    const isoUtc = dateTimeHelpers.isoFromLocalDate(dateLocal);
+    onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (options[activeIndex]) handleCommit(options[activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        (_a = popoverRef.current) == null ? void 0 : _a.close();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Popover.Popover,
+          {
+            ref: popoverRef,
+            contentId: listboxId,
+            trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "interval-select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                  onClick(e);
+                },
+                size,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }),
+                      onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+                      icon
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+              const isSelected = opt.minutesAgo === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Menu.Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-selected": isSelected,
+                      onClick: () => handleCommit(opt),
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+                        opt.label
+                      ]
+                    }
+                  )
+                },
+                opt.minutesAgo
+              );
+            }) })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+exports.IntervalSelect = IntervalSelect;

package/dist/components/interval-select/IntervalSelect.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ButtonVariant } from '../../components/button/Button';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { UtcIsoString } from '../datetime-picker/dateTimeHelpers';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type IntervalOption = {
+    label: string;
+    /** How many minutes back from baseDate (default: now). */
+    minutesAgo: number;
+};
+export type IntervalSelectValue = number | null;
+export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    options: IntervalOption[];
+    selectedValue: IntervalSelectValue;
+    /**
+     * Emits a UTC instant as ISO string (Z), consistent with DateTimePicker when enableTime=true.
+     * Also includes the computed local Date for convenience.
+     */
+    onChange: (isoUtc: UtcIsoString, meta: {
+        minutesAgo: number;
+        option: IntervalOption;
+        dateLocal: Date;
+    }) => void;
+    /** Base date for the calculation; defaults to "now". */
+    baseDate?: Date;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+    dataCy?: string;
+    disabled?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, disabled, }: IntervalSelectProps): React.ReactNode;
+export {};

package/dist/components/interval-select/IntervalSelect.js

@@ -0,0 +1,201 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { Button } from '../../components/button/Button';
+import { ClearButton } from '../../components/clear-button/ClearButton';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { Menu } from '../../components/menu/Menu';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import { Popover } from '../../components/popover/Popover';
+import { isoFromLocalDate } from '../datetime-picker/dateTimeHelpers';
+
+function IntervalSelect({
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  // tooltip
+  tooltip,
+  tooltipPlacement = "right",
+  // IntervalSelect props
+  id,
+  options,
+  selectedValue,
+  onChange,
+  baseDate,
+  placeholder = "V\xE6lg interval",
+  size,
+  variant = "outlined",
+  onClear,
+  dataCy,
+  disabled
+}) {
+  const generatedId = useId();
+  const controlId = id != null ? id : `interval-select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = useRef(null);
+  const optionRefs = useRef([]);
+  const selectedIndex = useMemo(
+    () => options.findIndex((o) => o.minutesAgo === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+  useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const selected = useMemo(
+    () => {
+      var _a;
+      return (_a = options.find((o) => o.minutesAgo === selectedValue)) != null ? _a : null;
+    },
+    [options, selectedValue]
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const handleCommit = (opt) => {
+    var _a;
+    const base = baseDate != null ? baseDate : /* @__PURE__ */ new Date();
+    const dateLocal = new Date(base.getTime() - opt.minutesAgo * 6e4);
+    const isoUtc = isoFromLocalDate(dateLocal);
+    onChange(isoUtc, { minutesAgo: opt.minutesAgo, option: opt, dateLocal });
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (options[activeIndex]) handleCommit(options[activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        (_a = popoverRef.current) == null ? void 0 : _a.close();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            ref: popoverRef,
+            contentId: listboxId,
+            trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "interval-select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                  onClick(e);
+                },
+                size,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }),
+                      onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                      icon
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+              const isSelected = opt.minutesAgo === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsx(
+                Menu.Item,
+                {
+                  active: isActive,
+                  selected: isSelected,
+                  itemRole: "option",
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-selected": isSelected,
+                      onClick: () => handleCommit(opt),
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                        opt.label
+                      ]
+                    }
+                  )
+                },
+                opt.minutesAgo
+              );
+            }) })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+export { IntervalSelect };