@flytedan/flytebot-design-system 0.49.1 → 0.50.0

package/dist/index.d.cts

@@ -158,27 +158,6 @@ declare function usePopoverPosition(open: boolean, anchorRef: React.RefObject<HT
     /** The rendered layer, so its real size replaces the estimates once it exists. */
     layerRef?: React.RefObject<HTMLElement>;
 }): PopoverPosition | null;
-/**
- * MP-268: a portalled overlay's z-index is no longer decided here. It used to be a second,
- * independently-timed mechanism (MP-142) — a value passed down through its own React context,
- * separate from the layer stack's ownership context (`kits/layerStack.tsx`) that already
- * decides Escape and Tab order. The two could disagree: a child overlay opened in the very
- * same commit as its parent could read the parent's not-yet-registered placeholder z-index
- * and mistake itself for a root overlay, racing its own parent for a root slot instead of
- * always outranking it (the reported bug — a Modal opened in the same commit as its Drawer
- * painted under it, though focus was correctly inside the Modal).
- *
- * Every overlay that escapes the DOM via `portal()` or `createPortal` directly — Popover
- * (and everything built on it), Drawer, Modal, Tooltip — now reads its z-index from
- * `useLayerZIndex(layer)` (`kits/layerStack.tsx`), passing the SAME `layer` object
- * `useStackedLayer` gave it. That function derives the number purely from `layer.parent` —
- * the same ownership fact already used for focus — so the two can never disagree again:
- * one fact, one mechanism. See `useLayerZIndex`'s own comment for the exact rule (child
- * always LAYER_STEP+ above its resolved parent; a root layer ranks by position among the
- * other currently-open root layers). Import `useLayerZIndex`/`LAYER_STEP`/`ROOT_STEP`/
- * `OVERLAY_CEILING`/`__resetLayerStackForTests` from `kits/layerStack` directly — this file
- * no longer re-exports them; there is exactly one place they live now.
- */
 /**
  * An anchored floating surface: menus, pickers, disclosure panels, meters.
  * Owns placement, dismissal, focus return — and its own layout, which is the one rule
@@ -725,9 +704,10 @@ interface AppShellProps {
     trailingPanel?: (ctx: {
         overlay: boolean;
     }) => React.ReactNode;
-    /** Max width (px) of the centered content column. Default 1440 — every current
-     *  flytedesk app shell's own value. */
-    contentMaxWidth?: number;
+    /** Max width of the centered content column: a px number, or `"none"` for a
+     *  full-width app whose pages fill the space beside the sidebar (SMS-50). Default
+     *  1440 — the value most flytedesk app shells use. */
+    contentMaxWidth?: number | "none";
     /** The shell's own height. Default `"100vh"`, correct for the real, top-level use
      *  every app mounts this at. A demo or preview embedding AppShell inside a bounded
      *  container (this package's own docs site) passes e.g. `"100%"` instead. */
@@ -898,6 +878,17 @@ interface TagProps {
     tone?: "neutral" | "info" | "success" | "warning" | "danger";
     onRemove?: () => void;
     onClick?: () => void;
+    /** MP-282: a native tooltip for the chip's full text — the same full text that is
+     *  already the button's accessible name (its text content), so this only helps a
+     *  sighted mouse user whose chip a caller (FilterBar, scoped to `.fd-filterbar .fd-tag`
+     *  in components.css) has visually truncated with an ellipsis. Harmless, and invisible,
+     *  on a chip nobody truncates. */
+    title?: string;
+    /** The chip's accessible name, when its painted text is not a faithful name for it. FilterBar
+     *  sets it to the chip's whole text: the painted text is split into a shrinkable head and a
+     *  fixed tail (MiddleEllipsis), and a browser computing a name from content puts a space between
+     *  two block-level flex items, reading "Pol itical" — an explicit name is the whole value. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
@@ -967,7 +958,8 @@ interface TrendChartProps {
     label: string;
     /** Value formatter for axis ticks, point tooltips and the data table. */
     valueFormat?: (n: number) => string;
-    /** Height in px. Width is always fluid (100% of the container). */
+    /** Plot height in px. Width is always fluid (100% of the container); the SVG is drawn in
+     *  real pixels at the container's measured width, so text never scales with the card. */
     height?: number;
     /** Number of horizontal gridlines (excluding the zero baseline). */
     yTicks?: number;
@@ -1339,8 +1331,14 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  clearFilter(id). Apply it synchronously, exactly like onFilterChange. */
     onFilterRemove: (key: string) => void;
     /** Which edge the "add filter" popover aligns to. Default "left" — the trigger sits
-     *  at the end of a left-to-right chip row, so its menu opens under its left edge. */
+     *  in the leading column, left of the chips, so its menu opens under its left edge. */
     align?: "left" | "right";
+    /** Controls that sit at the bar's right edge, in a column of their own: a date range, an
+     *  export button. They are laid out beside the Filter button and the chips and stay put
+     *  however many chips wrap (they top-align to the Filter button, never to the chips), and
+     *  drop below the chips on a row of their own, still right-aligned, when the bar is too
+     *  narrow to hold them all on one line. */
+    actions?: React.ReactNode;
     className?: string;
 }
 type FilterValidation = {
@@ -1392,7 +1390,7 @@ declare function validateFilterValue(field: FilterField, value: unknown): Filter
  * string value; multiSelect/range/date each read/write a small typed object of their own
  * (see FilterValue).
  */
-declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, actions, className, ...rest }: FilterBarProps): React.JSX.Element;
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
@@ -2452,6 +2450,8 @@ interface SelectProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <selected option>"). */
+    "aria-label"?: string;
     options: Array<string | SelectOption>;
     placeholder?: string;
     required?: boolean;
@@ -2477,13 +2477,15 @@ interface SelectProps {
      *  from it. Generated when omitted, so `label` names the trigger either way. */
     id?: string;
 }
-declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style, "aria-label": hiddenLabel }: SelectProps): React.JSX.Element;
 
 /** Calendar popover date field. Click the title to drill month -> year; range mode picks start then end with live hover preview. Values are ISO strings ("2026-03-01"). */
 interface DatePickerProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <what it displays>"). */
+    "aria-label"?: string;
     required?: boolean;
     disabled?: boolean;
     /** false: value is "YYYY-MM-DD". true: value is {start, end}. */
@@ -2507,7 +2509,7 @@ interface CalendarProps {
     months?: number;
 }
 declare function Calendar({ value, range, onPick, initialMonth, months }: CalendarProps): React.JSX.Element;
-declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, "aria-label": hiddenLabel, ...rest }: DatePickerProps): React.JSX.Element;
 
 /** Analog clock-face time field: tap or drag the hand to set the hour, auto-advances to minutes; AM/PM chips; "Now" shortcut. Value is 24h "HH:MM". */
 interface TimePickerProps {
@@ -4899,8 +4901,8 @@ declare const LAYER_STEP = 10;
  *  page chrome (a sticky header, the off-canvas rail's own resting z-index) must stay under
  *  this, so no page z-index can ever outrank an overlay. */
 declare const ROOT_STEP = 100;
-/** Guaranteed to sit above any z-index this mechanism can ever compute — see Popover.tsx's
- *  TransferList drag-ghost use. Not part of the layer tree; nothing derives from it. */
+/** Guaranteed to sit above any z-index this mechanism can ever compute — see
+ *  TransferList.tsx's drag-ghost use. Not part of the layer tree; nothing derives from it. */
 declare const OVERLAY_CEILING = 10000;
 /** The z-index `layer` should render at right now — 0 while it is closed (nothing should be
  *  positioning off it then). Re-renders whenever any layer anywhere opens or closes, since

package/dist/index.d.ts

@@ -158,27 +158,6 @@ declare function usePopoverPosition(open: boolean, anchorRef: React.RefObject<HT
     /** The rendered layer, so its real size replaces the estimates once it exists. */
     layerRef?: React.RefObject<HTMLElement>;
 }): PopoverPosition | null;
-/**
- * MP-268: a portalled overlay's z-index is no longer decided here. It used to be a second,
- * independently-timed mechanism (MP-142) — a value passed down through its own React context,
- * separate from the layer stack's ownership context (`kits/layerStack.tsx`) that already
- * decides Escape and Tab order. The two could disagree: a child overlay opened in the very
- * same commit as its parent could read the parent's not-yet-registered placeholder z-index
- * and mistake itself for a root overlay, racing its own parent for a root slot instead of
- * always outranking it (the reported bug — a Modal opened in the same commit as its Drawer
- * painted under it, though focus was correctly inside the Modal).
- *
- * Every overlay that escapes the DOM via `portal()` or `createPortal` directly — Popover
- * (and everything built on it), Drawer, Modal, Tooltip — now reads its z-index from
- * `useLayerZIndex(layer)` (`kits/layerStack.tsx`), passing the SAME `layer` object
- * `useStackedLayer` gave it. That function derives the number purely from `layer.parent` —
- * the same ownership fact already used for focus — so the two can never disagree again:
- * one fact, one mechanism. See `useLayerZIndex`'s own comment for the exact rule (child
- * always LAYER_STEP+ above its resolved parent; a root layer ranks by position among the
- * other currently-open root layers). Import `useLayerZIndex`/`LAYER_STEP`/`ROOT_STEP`/
- * `OVERLAY_CEILING`/`__resetLayerStackForTests` from `kits/layerStack` directly — this file
- * no longer re-exports them; there is exactly one place they live now.
- */
 /**
  * An anchored floating surface: menus, pickers, disclosure panels, meters.
  * Owns placement, dismissal, focus return — and its own layout, which is the one rule
@@ -725,9 +704,10 @@ interface AppShellProps {
     trailingPanel?: (ctx: {
         overlay: boolean;
     }) => React.ReactNode;
-    /** Max width (px) of the centered content column. Default 1440 — every current
-     *  flytedesk app shell's own value. */
-    contentMaxWidth?: number;
+    /** Max width of the centered content column: a px number, or `"none"` for a
+     *  full-width app whose pages fill the space beside the sidebar (SMS-50). Default
+     *  1440 — the value most flytedesk app shells use. */
+    contentMaxWidth?: number | "none";
     /** The shell's own height. Default `"100vh"`, correct for the real, top-level use
      *  every app mounts this at. A demo or preview embedding AppShell inside a bounded
      *  container (this package's own docs site) passes e.g. `"100%"` instead. */
@@ -898,6 +878,17 @@ interface TagProps {
     tone?: "neutral" | "info" | "success" | "warning" | "danger";
     onRemove?: () => void;
     onClick?: () => void;
+    /** MP-282: a native tooltip for the chip's full text — the same full text that is
+     *  already the button's accessible name (its text content), so this only helps a
+     *  sighted mouse user whose chip a caller (FilterBar, scoped to `.fd-filterbar .fd-tag`
+     *  in components.css) has visually truncated with an ellipsis. Harmless, and invisible,
+     *  on a chip nobody truncates. */
+    title?: string;
+    /** The chip's accessible name, when its painted text is not a faithful name for it. FilterBar
+     *  sets it to the chip's whole text: the painted text is split into a shrinkable head and a
+     *  fixed tail (MiddleEllipsis), and a browser computing a name from content puts a space between
+     *  two block-level flex items, reading "Pol itical" — an explicit name is the whole value. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
@@ -967,7 +958,8 @@ interface TrendChartProps {
     label: string;
     /** Value formatter for axis ticks, point tooltips and the data table. */
     valueFormat?: (n: number) => string;
-    /** Height in px. Width is always fluid (100% of the container). */
+    /** Plot height in px. Width is always fluid (100% of the container); the SVG is drawn in
+     *  real pixels at the container's measured width, so text never scales with the card. */
     height?: number;
     /** Number of horizontal gridlines (excluding the zero baseline). */
     yTicks?: number;
@@ -1339,8 +1331,14 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  clearFilter(id). Apply it synchronously, exactly like onFilterChange. */
     onFilterRemove: (key: string) => void;
     /** Which edge the "add filter" popover aligns to. Default "left" — the trigger sits
-     *  at the end of a left-to-right chip row, so its menu opens under its left edge. */
+     *  in the leading column, left of the chips, so its menu opens under its left edge. */
     align?: "left" | "right";
+    /** Controls that sit at the bar's right edge, in a column of their own: a date range, an
+     *  export button. They are laid out beside the Filter button and the chips and stay put
+     *  however many chips wrap (they top-align to the Filter button, never to the chips), and
+     *  drop below the chips on a row of their own, still right-aligned, when the bar is too
+     *  narrow to hold them all on one line. */
+    actions?: React.ReactNode;
     className?: string;
 }
 type FilterValidation = {
@@ -1392,7 +1390,7 @@ declare function validateFilterValue(field: FilterField, value: unknown): Filter
  * string value; multiSelect/range/date each read/write a small typed object of their own
  * (see FilterValue).
  */
-declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, actions, className, ...rest }: FilterBarProps): React.JSX.Element;
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
@@ -2452,6 +2450,8 @@ interface SelectProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <selected option>"). */
+    "aria-label"?: string;
     options: Array<string | SelectOption>;
     placeholder?: string;
     required?: boolean;
@@ -2477,13 +2477,15 @@ interface SelectProps {
      *  from it. Generated when omitted, so `label` names the trigger either way. */
     id?: string;
 }
-declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style, "aria-label": hiddenLabel }: SelectProps): React.JSX.Element;
 
 /** Calendar popover date field. Click the title to drill month -> year; range mode picks start then end with live hover preview. Values are ISO strings ("2026-03-01"). */
 interface DatePickerProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <what it displays>"). */
+    "aria-label"?: string;
     required?: boolean;
     disabled?: boolean;
     /** false: value is "YYYY-MM-DD". true: value is {start, end}. */
@@ -2507,7 +2509,7 @@ interface CalendarProps {
     months?: number;
 }
 declare function Calendar({ value, range, onPick, initialMonth, months }: CalendarProps): React.JSX.Element;
-declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, "aria-label": hiddenLabel, ...rest }: DatePickerProps): React.JSX.Element;
 
 /** Analog clock-face time field: tap or drag the hand to set the hour, auto-advances to minutes; AM/PM chips; "Now" shortcut. Value is 24h "HH:MM". */
 interface TimePickerProps {
@@ -4899,8 +4901,8 @@ declare const LAYER_STEP = 10;
  *  page chrome (a sticky header, the off-canvas rail's own resting z-index) must stay under
  *  this, so no page z-index can ever outrank an overlay. */
 declare const ROOT_STEP = 100;
-/** Guaranteed to sit above any z-index this mechanism can ever compute — see Popover.tsx's
- *  TransferList drag-ghost use. Not part of the layer tree; nothing derives from it. */
+/** Guaranteed to sit above any z-index this mechanism can ever compute — see
+ *  TransferList.tsx's drag-ghost use. Not part of the layer tree; nothing derives from it. */
 declare const OVERLAY_CEILING = 10000;
 /** The z-index `layer` should render at right now — 0 while it is closed (nothing should be
  *  positioning off it then). Re-renders whenever any layer anywhere opens or closes, since