@stackone/malachite 2.45.0 → 2.46.0

package/COMPONENTS.md

@@ -85,7 +85,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Radio`** — Single radio control with hover state; parent manages the group. Pass `presentational` to render a visual-only, non-focusable indicator for use inside a clickable row/card. _Key props:_ `checked`, `onChange`, `disabled`, `size`, `presentational`.
 - **`SegmentedControl`** — A rounded track of mutually-exclusive options — the segmented “one of these” control. Owns the track background, the selected-thumb chrome and the `radiogroup` semantics, so consumers never hand-roll a track around `PillButton` (whose `default` variant tokens are tuned for standalone filter pills, not a sunken track). Single tab stop with arrow-key move-and-select; selection is conveyed via `aria-checked` and a foreground change, not background colour alone. An option `icon` sits before the label in a fixed 16px slot, and an option `badge` follows the label at whatever width it needs, for a mark such as a compact `Tag` naming a saving; it renders inside the segment button, so it must not be interactive. Restyle via the `segmentedControl` theme tokens. _Key props:_ `options` (`value`, `label`, `icon`, `badge`, `disabled`), `value`, `onChange`, `SegmentedControlSize` (`small` | `medium` | `large`), `fullWidth`, `disabled`, `aria-label`, `aria-labelledby`, `className`.
 - **`Toggle`** — On/off switch. Add `label` for a visible caption, and `variant` to give it standalone toolbar-filter chrome — pick the family it sits beside: `pill` matches the filter-bar inputs (`Search`, `MultiSelect`), `button` renders the whole control as an outline `Button` with the switch as its trailing icon. `bordered` is shorthand for `variant="pill"`. `tone="pending"` paints the checked track amber, for a switch whose change has not been written yet — pair it with a `SelectionBar` reporting the same diff. The unchecked track never changes: nothing is pending about a switch that is off. Forwards a ref to its root element, so it can anchor an `InlineConfirm`. _Key props:_ `checked`, `onChange`, `disabled`, `ToggleSize` (`small` | `medium`), `ToggleTone` (`default` | `pending`), `label`, `ToggleVariant` (`pill` | `button`), `bordered`, `aria-label`, `aria-labelledby`, `aria-describedby`, `id`.
-- **`Dropdown`** — Single-select dropdown. `DropdownSize` is `small` (28px) | `medium` (32px) | `large` (42px), matching Button; `fullWidth` fills the container instead of sizing to content, which is what a table cell or a toolbar slot needs — without it the field column sizes to its content, so a consumer has to compute a width; `width` fixes that width outright, the way `MultiSelect` does, for a toolbar lining the two up rather than letting each hug its own label — a narrower container still wins, since the width clamps to it; Until this release a `search` trigger could not go below the intrinsic width of its bare `input`, so a `width` under roughly 200px was ignored; it now shrinks with the rest. The open menu fills the trigger and left-aligns under it, as Figma draws every tier of `Dropdown Component - Standard`, so `width` sizes both — the menu is the width of the control that opened it and does not widen for a long option, which ellipsises instead, so a row of controls and their open menus stay on one set of edges; below 160px the menu keeps that floor rather than shrinking to a chip nobody can read, and `minWidth` raises that floor without widening the trigger — for a picker a column pins narrow whose options carry a subtitle the trigger never shows; near a viewport edge it anchors to the trigger's other side before falling back to the viewport, so the two share an edge wherever one fits; `small` is the chip that sits beside a page title and rounds tighter (10px) than the taller sizes. These names each moved up a tier in 0.71 — the old `xsmall`/`small`/`medium` are now `small`/`medium`/`large`. Pass `value` for a controlled selection whose source of truth lives elsewhere (URL or app state): the trigger follows it without the consumer remounting via `key`, which used to discard focus mid-interaction. `defaultValue` keeps the uncontrolled behaviour. `clearable` adds a clear control to the trigger once something is selected and reports it as `onItemSelected(undefined)` — without it a selection cannot be undone, so filter bars had to invent a sentinel "any" item to carry that meaning. `requiredIndicator` switches the label between the library default of naming the optional fields, an `asterisk` on the required ones for designs drawn that way, and `none` for a field whose value is supplied rather than asked for — a locked control is still required, but a marker only sends the reader looking for something to fill in. Visual only: `aria-required` is set from `required` whichever is chosen. `showSubtitleInTrigger` promotes the selected item's `subtitle` into the closed trigger, on one line under the value, so the consequence of a choice stays on screen once the menu shuts — the trigger trades its fixed height for a floor and grows by that line, and either line too long for it ellipsises, with a single tooltip carrying whichever lines are cut off, value first. It does not combine with `search`, whose trigger is a single-line text input with nowhere to put a second line, so the type rejects the pair rather than letting a consumer ask for a subtitle and get none. `subtitleLayout` decides how a subtitle sits in the open menu: the default `inline` keeps it on the label's row after a divider, which suits a short qualifier, while `stacked` gives it its own line beneath the label — one line either way, ellipsised rather than wrapped, so inline a sentence-length subtitle is cut back to a few words. Every option row carries a tooltip for whatever it had to cut, across all three of label, subtitle and `rightSideText`, so nothing the row hides is unreadable. Passing `formControl` is enough to show validation on the same terms as `Input`, though only validation: the trigger still paints `value` or `defaultValue`, never the value the form holds. The resolver's message renders on its own line beneath the field in the destructive colour, politely announced, with `aria-invalid` and `aria-describedby` wired, while an explicit `helperText` keeps its own line above it and stays dimmed, and `error={false}` suppresses the resolver outright. An item's `subtitle` renders inline markdown in the option, trigger and tooltip, with links drawn but inert, since the option is itself the click target; a subtitle with no markdown syntax stays a plain text node. _Key props:_ `DropdownItem[]`, `DropdownSize`, `fullWidth`, `width`, `value`, `defaultValue`, `label`, `search`, `showSubtitleInTrigger`, `subtitleLayout`, `clearable`, `required`, `requiredIndicator`, `error`, `helperText`, `loading`, `formControl`, `aria-label`, `aria-labelledby`, `id`.
+- **`Dropdown`** — Single-select dropdown. `DropdownSize` is `small` (28px) | `medium` (32px) | `large` (42px), matching Button; `fullWidth` fills the container instead of sizing to content, which is what a table cell or a toolbar slot needs — without it the field column sizes to its content, so a consumer has to compute a width; `width` fixes that width outright, the way `MultiSelect` does, for a toolbar lining the two up rather than letting each hug its own label — a narrower container still wins, since the width clamps to it; Until this release a `search` trigger could not go below the intrinsic width of its bare `input`, so a `width` under roughly 200px was ignored; it now shrinks with the rest. The open menu fills the trigger and left-aligns under it, as Figma draws every tier of `Dropdown Component - Standard`, so `width` sizes both — the menu is the width of the control that opened it and does not widen for a long option, which ellipsises instead, so a row of controls and their open menus stay on one set of edges; below 160px the menu keeps that floor rather than shrinking to a chip nobody can read, and `minWidth` raises that floor without widening the trigger — for a picker a column pins narrow whose options carry a subtitle the trigger never shows; `menuAlign="end"` lines a menu wider than its trigger up with the trigger's right edge instead, so a control at the right of a card opens its menu inwards rather than past the card; near a viewport edge it anchors to the trigger's other side before falling back to the viewport, so the two share an edge wherever one fits; `small` is the chip that sits beside a page title and rounds tighter (10px) than the taller sizes. These names each moved up a tier in 0.71 — the old `xsmall`/`small`/`medium` are now `small`/`medium`/`large`. Pass `value` for a controlled selection whose source of truth lives elsewhere (URL or app state): the trigger follows it without the consumer remounting via `key`, which used to discard focus mid-interaction. `defaultValue` keeps the uncontrolled behaviour. `clearable` adds a clear control to the trigger once something is selected and reports it as `onItemSelected(undefined)` — without it a selection cannot be undone, so filter bars had to invent a sentinel "any" item to carry that meaning. `requiredIndicator` switches the label between the library default of naming the optional fields, an `asterisk` on the required ones for designs drawn that way, and `none` for a field whose value is supplied rather than asked for — a locked control is still required, but a marker only sends the reader looking for something to fill in. Visual only: `aria-required` is set from `required` whichever is chosen. `showSubtitleInTrigger` promotes the selected item's `subtitle` into the closed trigger, on one line under the value, so the consequence of a choice stays on screen once the menu shuts — the trigger trades its fixed height for a floor and grows by that line, and either line too long for it ellipsises, with a single tooltip carrying whichever lines are cut off, value first. It does not combine with `search`, whose trigger is a single-line text input with nowhere to put a second line, so the type rejects the pair rather than letting a consumer ask for a subtitle and get none. `subtitleLayout` decides how a subtitle sits in the open menu: the default `inline` keeps it on the label's row after a divider, which suits a short qualifier, while `stacked` gives it its own line beneath the label — one line either way, ellipsised rather than wrapped, so inline a sentence-length subtitle is cut back to a few words. Every option row carries a tooltip for whatever it had to cut, across all three of label, subtitle and `rightSideText`, so nothing the row hides is unreadable. Passing `formControl` is enough to show validation on the same terms as `Input`, though only validation: the trigger still paints `value` or `defaultValue`, never the value the form holds. The resolver's message renders on its own line beneath the field in the destructive colour, politely announced, with `aria-invalid` and `aria-describedby` wired, while an explicit `helperText` keeps its own line above it and stays dimmed, and `error={false}` suppresses the resolver outright. An item's `subtitle` renders inline markdown in the option, trigger and tooltip, with links drawn but inert, since the option is itself the click target; a subtitle with no markdown syntax stays a plain text node. An item's `badge` (e.g. a `Tag`) sits at the right end of its option in the open menu, after any `rightSideText`, and never shows in the closed trigger or the search input; it does not shrink, and the option is still named by its label alone. _Key props:_ `DropdownItem[]` (items take `badge`), `DropdownSize`, `fullWidth`, `width`, `minWidth`, `menuAlign` (`start` | `end`), `value`, `defaultValue`, `label`, `search`, `showSubtitleInTrigger`, `subtitleLayout`, `clearable`, `required`, `requiredIndicator`, `error`, `helperText`, `loading`, `formControl`, `aria-label`, `aria-labelledby`, `id`.
 - **`MultiSelect`** — Multi-select dropdown. `width` fixes the trigger, as `Dropdown` and `Search` take it, so a toolbar can put its controls on one width — and, as with those two, a container narrower than the value still wins; the menu fills the trigger and left-aligns under it, so that one prop sizes both; `minWidth` raises the 160px floor a narrow trigger falls back to. An option label too long for the menu ellipsises, and hovering it shows the full label — above the description in `hover` mode — as `Dropdown` does for its options. `requiredIndicator` follows the same three-way convention the single-select controls do, so a form choosing asterisks does not get "(Optional)" on one of its fields. _Key props:_ `MultiSelectOption[]`, `MultiSelectSize`, `width`, `minWidth`, `label`, `searchable`, `inlineSearch`, `chips`, `chipsRemovable`, `required`, `requiredIndicator`, `aria-label`, `aria-labelledby`, `id`.
 - **`QueryInput`** — A textbox with inline syntax colouring and a suggestion menu anchored to the caret. It carries no grammar of its own: the consumer parses the value, hands back `tokens` to colour and `suggestions` to offer, so the vocabulary lives in the consuming app rather than here. _Key props:_ `value`, `onChange`, `tokens`, `suggestions`, `activeRange`, `onAccept`, `onQueryContextChange`, `onSubmit`, `placeholder`, `size`, `disabled`, `loading`, `emptyMessage`, `className`, `style`, `aria-label`, `aria-labelledby`.
 - **`SettingRow`** — One setting: a labelled row with its control on the trailing edge, and the sentence that explains it underneath. `control` may be a render prop receiving the label’s id, so a control that no `<label htmlFor>` can reach — `Toggle` renders a `<button role="switch">` — still names itself via `aria-labelledby`. _Key props:_ `label`, `badge`, `description`, `control`, `className`.

package/dist/components/ActionMenuTagHost.js

@@ -1,17 +1,17 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useRef as f, useState as c, useLayoutEffect as m } from "react";
-import { createPortal as u } from "react-dom";
-import { adoptTailwindSheet as d } from "../tailwindSheet.js";
-import { TAG_HOST_PROPS as h, TAG_HOST_STYLE as i } from "./actionMenuStyles.js";
-const R = ({ children: s }) => {
-  const t = f(null), [e, a] = c(null);
-  return m(() => {
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as c, useState as f, useLayoutEffect as d } from "react";
+import { createPortal as i } from "react-dom";
+import { adoptTailwindSheet as l } from "../tailwindSheet.js";
+import { TAG_HOST_PROPS as m, TAG_HOST_STYLE as p } from "./actionMenuStyles.js";
+const R = ({ children: a }) => {
+  const t = c(null), [e, n] = f(null);
+  return d(() => {
     const o = t.current;
     if (!o)
       return;
-    const r = o.shadowRoot ?? o.attachShadow({ mode: "open" });
-    d(r), a(r);
-  }, []), /* @__PURE__ */ n("span", { ref: t, style: i, ...h, children: e && u(s, e) });
+    const s = o.shadowRoot ?? o.attachShadow({ mode: "open" });
+    l(s), n(s);
+  }, []), /* @__PURE__ */ r("span", { ref: t, style: p, ...m, children: e && i(/* @__PURE__ */ r("span", { style: { display: "contents" }, children: a }), e) });
 };
 export {
   R as default

package/dist/components/ActionMenuTagHost.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenuTagHost.js","sources":["../../src/components/ActionMenuTagHost.tsx"],"sourcesContent":["import type React from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { adoptTailwindSheet } from '../tailwindSheet';\nimport { TAG_HOST_PROPS, TAG_HOST_STYLE } from './actionMenuStyles';\n\n// Only the Tailwind sheet: fonts and theme variables already reach the menu from the document,\n// so ShadowRootWrapper's font and theme payload would be dead weight here.\nconst ActionMenuTagHost: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const hostRef = useRef<HTMLSpanElement>(null);\n    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n    useLayoutEffect(() => {\n        const host = hostRef.current;\n        if (!host) {\n            return;\n        }\n        const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' });\n        adoptTailwindSheet(shadow);\n        setShadowRoot(shadow);\n    }, []);\n\n    return (\n        <span ref={hostRef} style={TAG_HOST_STYLE} {...TAG_HOST_PROPS}>\n            {shadowRoot && createPortal(children, shadowRoot)}\n        </span>\n    );\n};\n\nexport default ActionMenuTagHost;\n"],"names":["ActionMenuTagHost","children","hostRef","useRef","shadowRoot","setShadowRoot","useState","useLayoutEffect","host","shadow","adoptTailwindSheet","jsx","TAG_HOST_STYLE","TAG_HOST_PROPS","createPortal"],"mappings":";;;;;AAQA,MAAMA,IAA6D,CAAC,EAAE,UAAAC,QAAe;AACjF,QAAMC,IAAUC,EAAwB,IAAI,GACtC,CAACC,GAAYC,CAAa,IAAIC,EAA4B,IAAI;AAEpE,SAAAC,EAAgB,MAAM;AAClB,UAAMC,IAAON,EAAQ;AACrB,QAAI,CAACM;AACD;AAEJ,UAAMC,IAASD,EAAK,cAAcA,EAAK,aAAa,EAAE,MAAM,QAAQ;AACpE,IAAAE,EAAmBD,CAAM,GACzBJ,EAAcI,CAAM;AAAA,EACxB,GAAG,CAAA,CAAE,GAGD,gBAAAE,EAAC,QAAA,EAAK,KAAKT,GAAS,OAAOU,GAAiB,GAAGC,GAC1C,UAAAT,KAAcU,EAAab,GAAUG,CAAU,EAAA,CACpD;AAER;"}
+{"version":3,"file":"ActionMenuTagHost.js","sources":["../../src/components/ActionMenuTagHost.tsx"],"sourcesContent":["import type React from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { adoptTailwindSheet } from '../tailwindSheet';\nimport { TAG_HOST_PROPS, TAG_HOST_STYLE } from './actionMenuStyles';\n\n// Only the Tailwind sheet: fonts and theme variables already reach the menu from the document,\n// so ShadowRootWrapper's font and theme payload would be dead weight here.\nconst ActionMenuTagHost: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const hostRef = useRef<HTMLSpanElement>(null);\n    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n    useLayoutEffect(() => {\n        const host = hostRef.current;\n        if (!host) {\n            return;\n        }\n        const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' });\n        adoptTailwindSheet(shadow);\n        setShadowRoot(shadow);\n    }, []);\n\n    return (\n        <span ref={hostRef} style={TAG_HOST_STYLE} {...TAG_HOST_PROPS}>\n            {/* A bare text child (a `0` badge, a string tag) went missing once the host was already\n                loaded; giving the portal an element to own keeps it rendered. */}\n            {shadowRoot &&\n                createPortal(<span style={{ display: 'contents' }}>{children}</span>, shadowRoot)}\n        </span>\n    );\n};\n\nexport default ActionMenuTagHost;\n"],"names":["ActionMenuTagHost","children","hostRef","useRef","shadowRoot","setShadowRoot","useState","useLayoutEffect","host","shadow","adoptTailwindSheet","jsx","TAG_HOST_STYLE","TAG_HOST_PROPS","createPortal"],"mappings":";;;;;AAQA,MAAMA,IAA6D,CAAC,EAAE,UAAAC,QAAe;AACjF,QAAMC,IAAUC,EAAwB,IAAI,GACtC,CAACC,GAAYC,CAAa,IAAIC,EAA4B,IAAI;AAEpE,SAAAC,EAAgB,MAAM;AAClB,UAAMC,IAAON,EAAQ;AACrB,QAAI,CAACM;AACD;AAEJ,UAAMC,IAASD,EAAK,cAAcA,EAAK,aAAa,EAAE,MAAM,QAAQ;AACpE,IAAAE,EAAmBD,CAAM,GACzBJ,EAAcI,CAAM;AAAA,EACxB,GAAG,CAAA,CAAE,GAGD,gBAAAE,EAAC,UAAK,KAAKT,GAAS,OAAOU,GAAiB,GAAGC,GAG1C,UAAAT,KACGU,oBAAc,QAAA,EAAK,OAAO,EAAE,SAAS,WAAA,GAAe,UAAAb,EAAA,CAAS,GAASG,CAAU,GACxF;AAER;"}