@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,39 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,33 +0,0 @@
-'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

@@ -1,98 +0,0 @@
-.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

@@ -1,203 +0,0 @@
-'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

@@ -1,37 +0,0 @@
-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

@@ -1,201 +0,0 @@
-'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 };