@dbcdk/react-components 0.0.146 → 0.0.147

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -11,14 +11,16 @@ function AttributeChip({
   label,
   value,
   size = "md",
-  loading
+  loading,
+  severity = "neutral"
 }) {
+  const valueClassName = [styles__default.default.value, styles__default.default[severity], !label && styles__default.default.valueStandalone].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" })
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -1,9 +1,11 @@
 import type { JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface AttributeChipProps {
     label?: string;
     value: string | number | boolean;
     loading?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    severity?: Severity;
 }
-export declare function AttributeChip({ label, value, size, loading, }: AttributeChipProps): JSX.Element;
+export declare function AttributeChip({ label, value, size, loading, severity, }: AttributeChipProps): JSX.Element;
 export {};

package/dist/components/attribute-chip/AttributeChip.js

@@ -5,14 +5,16 @@ function AttributeChip({
   label,
   value,
   size = "md",
-  loading
+  loading,
+  severity = "neutral"
 }) {
+  const valueClassName = [styles.value, styles[severity], !label && styles.valueStandalone].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
       /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" })
     ] }) : null,
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    /* @__PURE__ */ jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -9,7 +9,11 @@
   font-family: var(--font-family);
   font-weight: var(--font-weight-default);
   line-height: var(--line-height-tight);
-  padding-inline: var(--spacing-sm);
+  --attribute-chip-padding-inline: var(--spacing-xxs);
+  --attribute-chip-value-bleed: calc(
+    (var(--attribute-chip-padding-inline) - var(--spacing-2xs)) * -1
+  );
+  padding-inline: var(--attribute-chip-padding-inline);
 }
 
 .label,
@@ -24,29 +28,74 @@
 }
 
 .value {
+  height: calc(100% - 2 * var(--spacing-2xs));
+  margin-block: var(--spacing-2xs);
   font-weight: var(--font-weight-medium);
+  padding-inline: var(--attribute-chip-padding-inline);
+  margin-inline-end: var(--attribute-chip-value-bleed);
+  border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
+  background: var(--value-bg, transparent);
+  color: var(--value-fg, inherit);
+}
+
+/* When there's no label/separator before it, the value is the only content,
+   so it bleeds into the left padding too and becomes a full pill. A thin
+   sliver of the container's own background stays visible around it. */
+.valueStandalone {
+  margin-inline-start: var(--attribute-chip-value-bleed);
+  border-radius: var(--border-radius-default);
 }
 
 .separator {
   color: var(--color-border-default);
-  margin-inline: var(--spacing-xxs);
+  margin-inline-start: var(--spacing-xxs);
+  margin-inline-end: var(--spacing-2xs);
 }
 
 /* Sizes */
 .sm {
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);
-  padding-inline: var(--spacing-xs);
 }
 
 .md {
   height: var(--component-size-sm);
   font-size: var(--font-size-sm);
-  padding-inline: var(--spacing-sm);
 }
 
 .lg {
   height: var(--component-size-md);
   font-size: var(--font-size-md);
-  padding-inline: var(--spacing-md);
+}
+
+/* Severity colors for the value */
+
+.neutral {
+  --value-bg: transparent;
+  --value-fg: inherit;
+}
+
+.success {
+  --value-bg: var(--color-status-success-bg);
+  --value-fg: var(--color-status-success-fg);
+}
+
+.warning {
+  --value-bg: var(--color-status-warning-bg);
+  --value-fg: var(--color-status-warning-fg);
+}
+
+.error {
+  --value-bg: var(--color-status-error-bg);
+  --value-fg: var(--color-status-error-fg);
+}
+
+.info {
+  --value-bg: var(--color-status-info-bg);
+  --value-fg: var(--color-status-info-fg);
+}
+
+.brand {
+  --value-bg: var(--color-brand);
+  --value-fg: var(--color-fg-on-brand);
 }

package/dist/components/forms/select/Select.cjs

@@ -38,7 +38,8 @@ function Select({
   datakey,
   dataCy,
   disabled,
-  minWidth
+  minWidth,
+  menuHeader
 }) {
   const generatedId = react.useId();
   const controlId = id != null ? id : `select-${generatedId}`;
@@ -109,18 +110,14 @@ function Select({
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.max(i - 1, 0));
         break;
       }
       case "Enter":
@@ -241,40 +238,44 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Menu.Menu.Item,
-                {
-                  active: isActive,
-                  itemRole: "option",
-                  "aria-selected": isSelected,
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      ref: (el) => {
-                        optionRefs.current[index] = el;
-                      },
-                      type: "button",
-                      tabIndex: isActive ? 0 : -1,
-                      onClick: () => {
-                        var _a;
-                        onChange(opt.value);
-                        (_a = popoverRef.current) == null ? void 0 : _a.close();
-                      },
-                      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
-                      ]
-                    }
-                  )
-                },
-                String(opt.value)
-              );
-            }) })
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
+              options.map((opt, index) => {
+                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  Menu.Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles__default.default.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          optionRefs.current[index] = el;
+                        },
+                        type: "button",
+                        tabIndex: isActive ? 0 : -1,
+                        onClick: () => {
+                          var _a;
+                          onChange(opt.value);
+                          (_a = popoverRef.current) == null ? void 0 : _a.close();
+                        },
+                        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
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
           }
         ),
         (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })

package/dist/components/forms/select/Select.d.ts

@@ -16,8 +16,9 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     dataCy?: string;
     disabled?: boolean;
     minWidth?: string | number;
+    menuHeader?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -32,7 +32,8 @@ function Select({
   datakey,
   dataCy,
   disabled,
-  minWidth
+  minWidth,
+  menuHeader
 }) {
   const generatedId = useId();
   const controlId = id != null ? id : `select-${generatedId}`;
@@ -103,18 +104,14 @@ function Select({
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
         if (!open) {
           setOpen(true);
-          return;
         }
-        setActiveIndex((i) => Math.max(i - 1, 0));
         break;
       }
       case "Enter":
@@ -235,40 +232,44 @@ function Select({
                 )
               }
             ),
-            children: /* @__PURE__ */ jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsx(
-                Menu.Item,
-                {
-                  active: isActive,
-                  itemRole: "option",
-                  "aria-selected": isSelected,
-                  children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      ref: (el) => {
-                        optionRefs.current[index] = el;
-                      },
-                      type: "button",
-                      tabIndex: isActive ? 0 : -1,
-                      onClick: () => {
-                        var _a;
-                        onChange(opt.value);
-                        (_a = popoverRef.current) == null ? void 0 : _a.close();
-                      },
-                      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
-                      ]
-                    }
-                  )
-                },
-                String(opt.value)
-              );
-            }) })
+            children: /* @__PURE__ */ jsxs(Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
+              options.map((opt, index) => {
+                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          optionRefs.current[index] = el;
+                        },
+                        type: "button",
+                        tabIndex: isActive ? 0 : -1,
+                        onClick: () => {
+                          var _a;
+                          onChange(opt.value);
+                          (_a = popoverRef.current) == null ? void 0 : _a.close();
+                        },
+                        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
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
           }
         ),
         (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })

package/dist/components/forms/select/Select.module.css

@@ -30,3 +30,12 @@
   box-shadow: inset 0 0 0 1px
     color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }
+
+.selectedOption > button {
+  background-color: var(--color-bg-toolbar-hover);
+}
+
+.selectedOption > button:hover,
+.selectedOption > button:focus-visible {
+  background-color: var(--color-bg-toolbar-hover);
+}

package/package.json

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