@graphty/compact-mantine 0.8.17 → 0.8.19

package/dist/index.d.cts

@@ -12,6 +12,7 @@ import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
 import { SyntheticEvent } from 'react';
 import { VariantColorsResolver } from '@mantine/core';
 
@@ -492,6 +493,8 @@ export declare interface CompactColorInputProps {
      * The colour comes first, as `#RRGGBB` in upper case; the event that caused
      * the change is second and is absent for a change made from the picker,
      * which reports none.
+     *
+     * Not called when `onChange` is supplied.
      */
     onColorChange?: ChangeHandler<string | undefined>;
     /**
@@ -499,6 +502,8 @@ export declare interface CompactColorInputProps {
      * reset to its default.
      *
      * The percentage comes first; the event that caused the change is second.
+     *
+     * Not called when `onChange` is supplied.
      */
     onOpacityChange?: ChangeHandler<number | undefined>;
     /**
@@ -527,8 +532,9 @@ export declare interface CompactColorInputProps {
      * and its direction. `undefined` keeps its meaning from the props: the
      * reader has chosen nothing for that half and the default is showing.
      *
-     * Supplying this ALONGSIDE `onColorChange` or `onOpacityChange` makes every
-     * gesture write twice. Pick one route.
+     * When this is supplied, `onColorChange` and `onOpacityChange` are not
+     * called: one gesture makes one write. Passing both routes logs a
+     * development warning naming the conflict.
      * @example
      * ```tsx
      * <CompactColorInput
@@ -1996,6 +2002,28 @@ export declare interface DataTableProps<TRow extends object> {
      * set of rows and costs a re-sort.
      */
     data: readonly TRow[];
+    /**
+     * How many rows there are in all, when `data` holds only a window of them.
+     *
+     * Set it to show a list too large to hand over whole -- the records of a
+     * large graph, a server-side query. The table then scrolls the length of
+     * `rowCount` rows, draws `data[0]` at position `rowOffset`, and calls
+     * `onRangeChange` as rows come into view so the caller can hand over the
+     * window that holds them. Sorting and searching become the caller's: the
+     * table reports `onSortingChange` and `onFilterChange` and draws `data` in
+     * the order given, and Control+A and Shift ranges select within `data`.
+     *
+     * Left out, `data` is every row and the table sorts and searches it itself.
+     */
+    rowCount?: number;
+    /** Where `data[0]` sits among all `rowCount` rows. Defaults to `0`. */
+    rowOffset?: number;
+    /**
+     * Called with the rows the table is drawing, as positions among all of
+     * them: `start` inclusive, `end` exclusive. With `rowCount`, hand over a
+     * window that covers them.
+     */
+    onRangeChange?: (start: number, end: number) => void;
     /**
      * The columns, in their natural order.
      *
@@ -3343,14 +3371,12 @@ export declare const PANEL_INK: {
      * token to serve a selected item is what made a chip's label and a bar's
      * fill unreadable, so the two roles are two tokens.
      *
-     * Two pairings on this token are still short of WCAG AA, and neither can
-     * be fixed by moving it. A chip labelled in the secondary text colour
+     * One pairing on this token is still short of WCAG AA, and it cannot be
+     * fixed by moving it. A chip labelled in the secondary text colour
      * measures 4.43:1 in the dark scheme against the 4.5:1 for text; the same
-     * chip labelled in the primary text colour measures 7.33:1. An accent fill
-     * on this track measures 2.11:1 (dark) and 2.73:1 (light) against the 3:1
-     * for a shape that carries meaning; the same fill on the panel measures
-     * 3.12:1 and 3.56:1. Both are settled where they are drawn, by choosing
-     * the ink or the ground, not by another value here.
+     * chip labelled in the primary text colour measures 7.33:1, which is what
+     * the row draws. An accent fill on this track measures 3.53:1 (dark) and
+     * 3.86:1 (light), past the 3:1 for a shape that carries meaning.
      */
     readonly RAISED: "light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5))";
     /**
@@ -3397,16 +3423,24 @@ export declare const PANEL_INK: {
     readonly DIVIDER: "light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2))";
     /**
      * accent: a checked box, the highlighted bin, a filled micro-bar, the Run
-     * button (#1971c2 in the dark scheme, #228be6 in the light one).
+     * button (#1971c2, blue-8, in the light scheme; #339af0, blue-5, in the
+     * dark one).
+     *
+     * The theme sets `primaryShade` so the fill stands at least 3:1 off the
+     * panel, a field and the raised surface in both schemes (WCAG 1.4.11):
+     * 3.86:1 or more in the light scheme, 3.53:1 or more in the dark one.
      *
      * This token and `ON_ACCENT` follow a consumer's own `primaryColor`;
      * `WARNING`, `SUCCESS` and `DANGER` are stock Mantine yellow, green and
-     * red. The theme replaces only the `dark` ramp and sets no `primaryColor`,
-     * so none of the five is overridden here, and a consumer who sets one gets
+     * red. The theme sets no `primaryColor`, so a consumer who sets one gets
      * it throughout.
      */
     readonly ACCENT: "var(--mantine-primary-color-filled)";
-    /** text and glyphs drawn on the accent (#ffffff) */
+    /**
+     * text and glyphs drawn on the accent: white in the light scheme (5.02:1)
+     * and black in the dark one (7.02:1), chosen by the theme's `autoContrast`
+     * from the fill's luminance, so both pass WCAG 1.4.3's 4.5:1.
+     */
     readonly ON_ACCENT: "var(--mantine-primary-color-contrast)";
     /** the warning glyph on a departure line (#fab005) */
     readonly WARNING: "var(--mantine-color-yellow-6)";
@@ -4740,6 +4774,33 @@ export declare interface RankChipProps {
     children: default_2.ReactNode;
 }
 
+/**
+ * Mantine's SegmentedControl, named by the `Input.Wrapper` around it.
+ *
+ * `Input.Wrapper` names its child with `<label for={id}>`, and only a control
+ * that reads the wrapper's context takes that id. Mantine's SegmentedControl
+ * does not, so inside a wrapper its radiogroup is announced with no name and
+ * no description. This drop-in reads the wrapper's label and description ids
+ * and puts them on the radiogroup as `aria-labelledby` and `aria-describedby`.
+ * Either attribute passed by the caller wins. Outside a wrapper it is exactly
+ * Mantine's control. A theme extension cannot do this, because a component's
+ * theme defaults cannot read React context.
+ *
+ * Mantine's wrapper publishes a label id even when it renders no label, so a
+ * wrapper with only a description or an error leaves `aria-labelledby`
+ * pointing at no element. Browsers skip a missing id and fall back to any
+ * `aria-label`, so give the control one in that case.
+ * @param props - Mantine's SegmentedControl props
+ * @returns The segmented control
+ * @example
+ * ```tsx
+ * <Input.Wrapper label="Mode" description="How the graph is drawn">
+ *     <SegmentedControl data={["2D", "3D"]} />
+ * </Input.Wrapper>
+ * ```
+ */
+export declare function SegmentedControl(props: default_2.ComponentProps<typeof SegmentedControl_2>): default_2.JSX.Element;
+
 /**
  * The same chart at half the height, for a series rather than a distribution.
  *

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
 import { SyntheticEvent } from 'react';
 import { VariantColorsResolver } from '@mantine/core';
 
@@ -492,6 +493,8 @@ export declare interface CompactColorInputProps {
      * The colour comes first, as `#RRGGBB` in upper case; the event that caused
      * the change is second and is absent for a change made from the picker,
      * which reports none.
+     *
+     * Not called when `onChange` is supplied.
      */
     onColorChange?: ChangeHandler<string | undefined>;
     /**
@@ -499,6 +502,8 @@ export declare interface CompactColorInputProps {
      * reset to its default.
      *
      * The percentage comes first; the event that caused the change is second.
+     *
+     * Not called when `onChange` is supplied.
      */
     onOpacityChange?: ChangeHandler<number | undefined>;
     /**
@@ -527,8 +532,9 @@ export declare interface CompactColorInputProps {
      * and its direction. `undefined` keeps its meaning from the props: the
      * reader has chosen nothing for that half and the default is showing.
      *
-     * Supplying this ALONGSIDE `onColorChange` or `onOpacityChange` makes every
-     * gesture write twice. Pick one route.
+     * When this is supplied, `onColorChange` and `onOpacityChange` are not
+     * called: one gesture makes one write. Passing both routes logs a
+     * development warning naming the conflict.
      * @example
      * ```tsx
      * <CompactColorInput
@@ -1996,6 +2002,28 @@ export declare interface DataTableProps<TRow extends object> {
      * set of rows and costs a re-sort.
      */
     data: readonly TRow[];
+    /**
+     * How many rows there are in all, when `data` holds only a window of them.
+     *
+     * Set it to show a list too large to hand over whole -- the records of a
+     * large graph, a server-side query. The table then scrolls the length of
+     * `rowCount` rows, draws `data[0]` at position `rowOffset`, and calls
+     * `onRangeChange` as rows come into view so the caller can hand over the
+     * window that holds them. Sorting and searching become the caller's: the
+     * table reports `onSortingChange` and `onFilterChange` and draws `data` in
+     * the order given, and Control+A and Shift ranges select within `data`.
+     *
+     * Left out, `data` is every row and the table sorts and searches it itself.
+     */
+    rowCount?: number;
+    /** Where `data[0]` sits among all `rowCount` rows. Defaults to `0`. */
+    rowOffset?: number;
+    /**
+     * Called with the rows the table is drawing, as positions among all of
+     * them: `start` inclusive, `end` exclusive. With `rowCount`, hand over a
+     * window that covers them.
+     */
+    onRangeChange?: (start: number, end: number) => void;
     /**
      * The columns, in their natural order.
      *
@@ -3343,14 +3371,12 @@ export declare const PANEL_INK: {
      * token to serve a selected item is what made a chip's label and a bar's
      * fill unreadable, so the two roles are two tokens.
      *
-     * Two pairings on this token are still short of WCAG AA, and neither can
-     * be fixed by moving it. A chip labelled in the secondary text colour
+     * One pairing on this token is still short of WCAG AA, and it cannot be
+     * fixed by moving it. A chip labelled in the secondary text colour
      * measures 4.43:1 in the dark scheme against the 4.5:1 for text; the same
-     * chip labelled in the primary text colour measures 7.33:1. An accent fill
-     * on this track measures 2.11:1 (dark) and 2.73:1 (light) against the 3:1
-     * for a shape that carries meaning; the same fill on the panel measures
-     * 3.12:1 and 3.56:1. Both are settled where they are drawn, by choosing
-     * the ink or the ground, not by another value here.
+     * chip labelled in the primary text colour measures 7.33:1, which is what
+     * the row draws. An accent fill on this track measures 3.53:1 (dark) and
+     * 3.86:1 (light), past the 3:1 for a shape that carries meaning.
      */
     readonly RAISED: "light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5))";
     /**
@@ -3397,16 +3423,24 @@ export declare const PANEL_INK: {
     readonly DIVIDER: "light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2))";
     /**
      * accent: a checked box, the highlighted bin, a filled micro-bar, the Run
-     * button (#1971c2 in the dark scheme, #228be6 in the light one).
+     * button (#1971c2, blue-8, in the light scheme; #339af0, blue-5, in the
+     * dark one).
+     *
+     * The theme sets `primaryShade` so the fill stands at least 3:1 off the
+     * panel, a field and the raised surface in both schemes (WCAG 1.4.11):
+     * 3.86:1 or more in the light scheme, 3.53:1 or more in the dark one.
      *
      * This token and `ON_ACCENT` follow a consumer's own `primaryColor`;
      * `WARNING`, `SUCCESS` and `DANGER` are stock Mantine yellow, green and
-     * red. The theme replaces only the `dark` ramp and sets no `primaryColor`,
-     * so none of the five is overridden here, and a consumer who sets one gets
+     * red. The theme sets no `primaryColor`, so a consumer who sets one gets
      * it throughout.
      */
     readonly ACCENT: "var(--mantine-primary-color-filled)";
-    /** text and glyphs drawn on the accent (#ffffff) */
+    /**
+     * text and glyphs drawn on the accent: white in the light scheme (5.02:1)
+     * and black in the dark one (7.02:1), chosen by the theme's `autoContrast`
+     * from the fill's luminance, so both pass WCAG 1.4.3's 4.5:1.
+     */
     readonly ON_ACCENT: "var(--mantine-primary-color-contrast)";
     /** the warning glyph on a departure line (#fab005) */
     readonly WARNING: "var(--mantine-color-yellow-6)";
@@ -4740,6 +4774,33 @@ export declare interface RankChipProps {
     children: default_2.ReactNode;
 }
 
+/**
+ * Mantine's SegmentedControl, named by the `Input.Wrapper` around it.
+ *
+ * `Input.Wrapper` names its child with `<label for={id}>`, and only a control
+ * that reads the wrapper's context takes that id. Mantine's SegmentedControl
+ * does not, so inside a wrapper its radiogroup is announced with no name and
+ * no description. This drop-in reads the wrapper's label and description ids
+ * and puts them on the radiogroup as `aria-labelledby` and `aria-describedby`.
+ * Either attribute passed by the caller wins. Outside a wrapper it is exactly
+ * Mantine's control. A theme extension cannot do this, because a component's
+ * theme defaults cannot read React context.
+ *
+ * Mantine's wrapper publishes a label id even when it renders no label, so a
+ * wrapper with only a description or an error leaves `aria-labelledby`
+ * pointing at no element. Browsers skip a missing id and fall back to any
+ * `aria-label`, so give the control one in that case.
+ * @param props - Mantine's SegmentedControl props
+ * @returns The segmented control
+ * @example
+ * ```tsx
+ * <Input.Wrapper label="Mode" description="How the graph is drawn">
+ *     <SegmentedControl data={["2D", "3D"]} />
+ * </Input.Wrapper>
+ * ```
+ */
+export declare function SegmentedControl(props: default_2.ComponentProps<typeof SegmentedControl_2>): default_2.JSX.Element;
+
 /**
  * The same chart at half the height, for a series rather than a distribution.
  *