@stackone/malachite 2.57.1 → 2.58.0

package/COMPONENTS.md

@@ -70,7 +70,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`CommandPalette`** — Chrome for a command palette, over a headless library that keeps its own elements. `FieldRow`/`Field` take the query input, `List` the scrolling viewport (with a bottom fade for `hasMoreBelow`), `Group` + `Heading` a titled section, and `Row` one result — composing leading/label/tags/crumb/meta/status/hint so names start and statuses end on the same x down the list. `Message` covers empty and loading, `Legend` documents the scope sigils, `Footer` the key hints. Everything the library owns is taken through `asChild`, so its role, id, state and handlers are untouched.
 - **`Keycap`** — One key on a keyboard, drawn as a cap — `esc`, `⌘`, a caret, or a sigil a user types to scope a search. Renders a `<kbd>`, or a button as soon as either `onClick` or `disabled` is passed — `disabled={false}` included, since naming the prop at all is the statement that the cap is a control. `SidePanelNavFooter` is built on it.
 - **`CollapsibleSection`** — Collapsible sunken-card section (title - subtitle header, disclosure arrow right) for stacked detail sections in side panels and detail pages. A preset over `Accordion`’s `sunken` variant.
-- **`KeyValueList`** — Bordered card of label/value rows (`KeyValueList.Row`) for entity details: fixed-width secondary labels, free-form values, row dividers.
+- **`KeyValueList`** — Bordered card of label/value rows (`KeyValueList.Row`) for entity details: fixed-width secondary labels, free-form values, row dividers. `truncate` keeps a long value (an ID) to one line with an ellipsis at the cell width and a tooltip only when it is actually cut off — the value itself when it is text, else the row’s `tooltip` (`null` turns it off). For inline content only: a Tag or AppLogo is clipped without an ellipsis, so use its own truncate, as with `CodeText truncate`. _Key props:_ `label`, `truncate`, `tooltip`.
 
 ## Forms & inputs
 

package/dist/components/KeyValueList.js

@@ -1,26 +1,45 @@
-import { jsx as a, jsxs as t } from "react/jsx-runtime";
-const d = ({ label: e, className: r = "", children: l }) => /* @__PURE__ */ t(
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { Children as i } from "react";
+import s from "./Typography/EllipsisText.js";
+const x = (e) => typeof e == "string" || typeof e == "number", c = (e) => {
+  const r = i.toArray(e);
+  return r.length > 0 && r.every(x) ? r.join("") : void 0;
+}, m = ({
+  label: e,
+  className: r = "",
+  children: a,
+  truncate: l = !1,
+  tooltip: o
+}) => /* @__PURE__ */ d(
   "div",
   {
     className: `flex min-h-[52px] w-full items-start border-0 border-b border-solid border-[var(--malachite-card-border)] last:border-b-0 ${r}`,
     children: [
-      /* @__PURE__ */ a("dt", { className: "m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]", children: e }),
-      /* @__PURE__ */ a("dd", { className: "m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: l })
+      /* @__PURE__ */ t("dt", { className: "m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]", children: e }),
+      /* @__PURE__ */ t("dd", { className: "m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: l ? /* @__PURE__ */ t(
+        s,
+        {
+          maxWidth: "100%",
+          tooltip: o !== void 0 ? o : c(a),
+          tooltipWhenTruncated: !0,
+          children: a
+        }
+      ) : a })
     ]
   }
-), o = ({
+), n = ({
   className: e = "",
   children: r
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ t(
   "dl",
   {
     className: `m-0 flex w-full flex-col overflow-hidden rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] ${e}`,
     children: r
   }
 );
-o.Row = d;
+n.Row = m;
 export {
-  o as KeyValueList,
-  o as default
+  n as KeyValueList,
+  n as default
 };
 //# sourceMappingURL=KeyValueList.js.map

package/dist/components/KeyValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueList.js","sources":["../../src/components/KeyValueList.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface KeyValueListProps {\n    className?: string;\n    children: React.ReactNode;\n}\n\nexport interface KeyValueListRowProps {\n    label: React.ReactNode;\n    className?: string;\n    children: React.ReactNode;\n}\n\nconst Row: React.FC<KeyValueListRowProps> = ({ label, className = '', children }) => (\n    <div\n        className={`flex min-h-[52px] w-full items-start border-0 border-b border-solid border-[var(--malachite-card-border)] last:border-b-0 ${className}`}\n    >\n        <dt className=\"m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]\">\n            {label}\n        </dt>\n        <dd className=\"m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n            {children}\n        </dd>\n    </div>\n);\n\nconst KeyValueList: React.FC<KeyValueListProps> & { Row: typeof Row } = ({\n    className = '',\n    children,\n}) => (\n    <dl\n        className={`m-0 flex w-full flex-col overflow-hidden rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] ${className}`}\n    >\n        {children}\n    </dl>\n);\n\nKeyValueList.Row = Row;\n\nexport default KeyValueList;\nexport { KeyValueList };\n"],"names":["Row","label","className","children","jsxs","jsx","KeyValueList"],"mappings":";AAaA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAI,UAAAC,QAClE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,6HAA6HF,CAAS;AAAA,IAEjJ,UAAA;AAAA,MAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,sHACT,UAAAJ,GACL;AAAA,MACA,gBAAAI,EAAC,MAAA,EAAG,WAAU,iKACT,UAAAF,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AACJ,GAGEG,IAAkE,CAAC;AAAA,EACrE,WAAAJ,IAAY;AAAA,EACZ,UAAAC;AACJ,MACI,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,uJAAuJH,CAAS;AAAA,IAE1K,UAAAC;AAAA,EAAA;AACL;AAGJG,EAAa,MAAMN;"}
+{"version":3,"file":"KeyValueList.js","sources":["../../src/components/KeyValueList.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport EllipsisText from './Typography/EllipsisText';\n\nexport interface KeyValueListProps {\n    className?: string;\n    children: React.ReactNode;\n}\n\nexport interface KeyValueListRowProps {\n    label: React.ReactNode;\n    className?: string;\n    children: React.ReactNode;\n    /**\n     * Keep the value to one line, cut with an ellipsis at the cell's width. For inline content:\n     * block/flex children (Tag, AppLogo) are clipped without an ellipsis, so use their own truncate.\n     */\n    truncate?: boolean;\n    /**\n     * Shown on hover/focus when a `truncate` value is actually cut off. Defaults to the value\n     * itself when it is text (strings/numbers); give one for any other value, or none is shown.\n     * Pass `null` to turn the tooltip off.\n     */\n    tooltip?: React.ReactNode;\n}\n\nconst isText = (node: React.ReactNode): node is string | number =>\n    typeof node === 'string' || typeof node === 'number';\n\nconst textOf = (children: React.ReactNode): string | undefined => {\n    const parts = Children.toArray(children);\n    return parts.length > 0 && parts.every(isText) ? parts.join('') : undefined;\n};\n\nconst Row: React.FC<KeyValueListRowProps> = ({\n    label,\n    className = '',\n    children,\n    truncate = false,\n    tooltip,\n}) => (\n    <div\n        className={`flex min-h-[52px] w-full items-start border-0 border-b border-solid border-[var(--malachite-card-border)] last:border-b-0 ${className}`}\n    >\n        <dt className=\"m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]\">\n            {label}\n        </dt>\n        <dd className=\"m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n            {truncate ? (\n                <EllipsisText\n                    maxWidth=\"100%\"\n                    tooltip={tooltip !== undefined ? tooltip : textOf(children)}\n                    tooltipWhenTruncated\n                >\n                    {children}\n                </EllipsisText>\n            ) : (\n                children\n            )}\n        </dd>\n    </div>\n);\n\nconst KeyValueList: React.FC<KeyValueListProps> & { Row: typeof Row } = ({\n    className = '',\n    children,\n}) => (\n    <dl\n        className={`m-0 flex w-full flex-col overflow-hidden rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] ${className}`}\n    >\n        {children}\n    </dl>\n);\n\nKeyValueList.Row = Row;\n\nexport default KeyValueList;\nexport { KeyValueList };\n"],"names":["isText","node","textOf","children","parts","Children","Row","label","className","truncate","tooltip","jsxs","jsx","EllipsisText","KeyValueList"],"mappings":";;;AAyBA,MAAMA,IAAS,CAACC,MACZ,OAAOA,KAAS,YAAY,OAAOA,KAAS,UAE1CC,IAAS,CAACC,MAAkD;AAC9D,QAAMC,IAAQC,EAAS,QAAQF,CAAQ;AACvC,SAAOC,EAAM,SAAS,KAAKA,EAAM,MAAMJ,CAAM,IAAII,EAAM,KAAK,EAAE,IAAI;AACtE,GAEME,IAAsC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAL;AAAA,EACA,UAAAM,IAAW;AAAA,EACX,SAAAC;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,6HAA6HH,CAAS;AAAA,IAEjJ,UAAA;AAAA,MAAA,gBAAAI,EAAC,MAAA,EAAG,WAAU,sHACT,UAAAL,GACL;AAAA,MACA,gBAAAK,EAAC,MAAA,EAAG,WAAU,iKACT,UAAAH,IACG,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,UAAS;AAAA,UACT,SAASH,MAAY,SAAYA,IAAUR,EAAOC,CAAQ;AAAA,UAC1D,sBAAoB;AAAA,UAEnB,UAAAA;AAAA,QAAA;AAAA,MAAA,IAGLA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AACJ,GAGEW,IAAkE,CAAC;AAAA,EACrE,WAAAN,IAAY;AAAA,EACZ,UAAAL;AACJ,MACI,gBAAAS;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,uJAAuJJ,CAAS;AAAA,IAE1K,UAAAL;AAAA,EAAA;AACL;AAGJW,EAAa,MAAMR;"}

package/dist/index.d.ts

@@ -2751,6 +2751,17 @@ export declare interface KeyValueListRowProps {
     label: default_2.ReactNode;
     className?: string;
     children: default_2.ReactNode;
+    /**
+     * Keep the value to one line, cut with an ellipsis at the cell's width. For inline content:
+     * block/flex children (Tag, AppLogo) are clipped without an ellipsis, so use their own truncate.
+     */
+    truncate?: boolean;
+    /**
+     * Shown on hover/focus when a `truncate` value is actually cut off. Defaults to the value
+     * itself when it is text (strings/numbers); give one for any other value, or none is shown.
+     * Pass `null` to turn the tooltip off.
+     */
+    tooltip?: default_2.ReactNode;
 }
 
 export declare const LayoutIcon: React.FC<IconProps_63>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "2.57.1",
+  "version": "2.58.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",