@graphty/compact-mantine 0.9.7 → 0.9.9

package/dist/index.d.cts

@@ -460,7 +460,7 @@ export declare type ColorPickerPaintType = "solid" | "gradient";
  * @param props - Component props
  * @param props.value - the value
  * @param props.onChange - called on every change
- * @param props.onChangeEnd - called when a drag or step settles
+ * @param props.onChangeEnd - called once per finished edit: a settled drag, a step, a commit or a pick
  * @param props.withAlpha - offer opacity
  * @param props.swatches - the swatch set
  * @param props.defaultFormat - the value row's first format
@@ -511,7 +511,10 @@ export declare interface ColorPickerPanelProps {
      * Reports `#RRGGBBAA` (upper case) when `withAlpha`, `#RRGGBB` otherwise.
      */
     onChange: (value: string) => void;
-    /** Called once when a drag in the field or a slider settles, with the settled color. */
+    /**
+     * Called once per finished edit, with the settled color: when a drag in the field or a slider
+     * settles, and once for each arrow key, typed commit, swatch or eyedropper pick.
+     */
     onChangeEnd?: (value: string) => void;
     /**
      * Offer opacity: the opacity slider and box.
@@ -4761,7 +4764,7 @@ export declare interface PopoutRegionProps {
  * @param props.onOpenChange - Called when the panel opens or closes, with the new state first
  * @returns The Popout compound component
  */
-declare function PopoutRoot({ children, opened, defaultOpened, onOpenChange, }: PopoutProps): JSX.Element;
+declare function PopoutRoot({ children, opened, defaultOpened, onOpenChange }: PopoutProps): JSX.Element;
 
 /**
  * One tab of a pop-out panel's tab strip.
@@ -6198,6 +6201,8 @@ export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "va
  * @param props.boundDescription - What a screen reader says about a bound row, defaulting to `fieldBound`
  * @param props.onFocus - Called when the control takes focus
  * @param props.onBlur - Called when the control loses focus
+ * @param props."aria-expanded" - Whether the content this toggle shows is on screen
+ * @param props."aria-controls" - The id of the element this toggle shows or hides
  * @returns The toggle row
  * @example
  * ```tsx
@@ -6207,7 +6212,7 @@ export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "va
  * </ToggleRowGroup>
  * ```
  */
-export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, }: ToggleRowProps): default_2.JSX.Element;
+export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, }: ToggleRowProps): default_2.JSX.Element;
 
 /**
  * The column two or more toggle rows are packed into.
@@ -6376,6 +6381,23 @@ export declare interface ToggleRowProps {
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /** Called when the control loses focus. */
     onBlur?: default_2.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Whether the content this toggle shows is on screen, for a toggle that
+     * shows or hides something elsewhere in the panel.
+     *
+     * Set it together with `aria-controls` and a screen reader announces the
+     * toggle as one that opens something, rather than leaving the reader to
+     * notice new controls appearing. Leave both unset on a toggle that only
+     * records a setting.
+     */
+    "aria-expanded"?: boolean;
+    /**
+     * The `id` of the element this toggle shows or hides.
+     *
+     * Set it only while that element is in the document: a reference to an id
+     * that is not on the page is worse than no reference at all.
+     */
+    "aria-controls"?: string;
 }
 
 /**
@@ -6583,6 +6605,7 @@ declare function ToolbarRoot({ floating, children, className, onKeyDown, onFocus
  * @param props.shortcut - The keyboard shortcut shown in the tooltip
  * @param props.selected - Whether this is the current tool
  * @param props.tooltipPosition - Where the tooltip opens
+ * @param props.disabledReason - Why the tool cannot be used now; set, the tool is disabled
  * @returns The tool button
  */
 export declare const ToolButton: default_2.ForwardRefExoticComponent<ToolButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
@@ -6604,6 +6627,13 @@ export declare interface ToolButtonProps extends Omit<UnstyledButtonProps, "chil
     selected?: boolean;
     /** Where the tooltip opens. Defaults to above, as on Figma's bottom toolbar. */
     tooltipPosition?: TooltipProps["position"];
+    /**
+     * Why the tool cannot be used now, as one sentence ("Nothing is drawn"). Set, the button is
+     * drawn in the disabled ink, ignores clicks and is `aria-disabled` -- it stays focusable, so the
+     * arrows still reach it -- and the reason follows the name in the tooltip and is read out as
+     * the button's description.
+     */
+    disabledReason?: string;
 }
 
 /**
@@ -6782,6 +6812,8 @@ export declare const TreeItem: default_2.ForwardRefExoticComponent<TreeItemProps
 export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> {
     /** The visible name. */
     name: string;
+    /** The accessible name; defaults to `name`. */
+    label?: string;
     /** The 16 x 16 type glyph. */
     icon?: default_2.ReactNode;
     /** Depth, 1 for a top-level row. Each level indents 24px. */
@@ -6837,8 +6869,13 @@ export declare interface TreeMove {
 export declare interface TreeNodeData {
     /** Stable, unique across the whole tree. */
     id: string;
-    /** The visible name; also the item's accessible name and its type-ahead key. */
+    /** The visible name; also the item's type-ahead key, and its accessible name unless `label` is given. */
     name: string;
+    /**
+     * The accessible name, when the visible name alone is not enough: "value, edge attribute"
+     * where two rows read "value". Start it with the visible name. Defaults to `name`.
+     */
+    label?: string;
     /** The 16 x 16 type glyph drawn before the name. */
     icon?: default_2.ReactNode;
     /**
@@ -6858,7 +6895,8 @@ export declare interface TreeNodeData {
     /**
      * The row's trailing toggles (lock, eye): the caller's own controls. They stay hidden until
      * the row is hovered or focused; a control with `aria-pressed="true"`, `aria-checked="true"`
-     * or `data-pinned` stays visible.
+     * or `data-pinned` stays visible. A click on passive text here (nothing focusable) counts as a
+     * click on the row.
      */
     actions?: default_2.ReactNode;
     /**
@@ -6880,7 +6918,7 @@ export declare interface TreeNodeData {
     /**
      * The row's state in words -- "Running", "Failed: the graph has no edges" -- read by a
      * screen reader after the name (the row's `aria-describedby`) and never drawn. A row's
-     * accessible name is only its `name`, so anything a glyph or a tooltip says belongs here
+     * accessible name is only its `name` (or `label`), so anything a glyph or a tooltip says belongs here
      * too.
      */
     description?: string;

package/dist/index.d.ts

@@ -460,7 +460,7 @@ export declare type ColorPickerPaintType = "solid" | "gradient";
  * @param props - Component props
  * @param props.value - the value
  * @param props.onChange - called on every change
- * @param props.onChangeEnd - called when a drag or step settles
+ * @param props.onChangeEnd - called once per finished edit: a settled drag, a step, a commit or a pick
  * @param props.withAlpha - offer opacity
  * @param props.swatches - the swatch set
  * @param props.defaultFormat - the value row's first format
@@ -511,7 +511,10 @@ export declare interface ColorPickerPanelProps {
      * Reports `#RRGGBBAA` (upper case) when `withAlpha`, `#RRGGBB` otherwise.
      */
     onChange: (value: string) => void;
-    /** Called once when a drag in the field or a slider settles, with the settled color. */
+    /**
+     * Called once per finished edit, with the settled color: when a drag in the field or a slider
+     * settles, and once for each arrow key, typed commit, swatch or eyedropper pick.
+     */
     onChangeEnd?: (value: string) => void;
     /**
      * Offer opacity: the opacity slider and box.
@@ -4761,7 +4764,7 @@ export declare interface PopoutRegionProps {
  * @param props.onOpenChange - Called when the panel opens or closes, with the new state first
  * @returns The Popout compound component
  */
-declare function PopoutRoot({ children, opened, defaultOpened, onOpenChange, }: PopoutProps): JSX.Element;
+declare function PopoutRoot({ children, opened, defaultOpened, onOpenChange }: PopoutProps): JSX.Element;
 
 /**
  * One tab of a pop-out panel's tab strip.
@@ -6198,6 +6201,8 @@ export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "va
  * @param props.boundDescription - What a screen reader says about a bound row, defaulting to `fieldBound`
  * @param props.onFocus - Called when the control takes focus
  * @param props.onBlur - Called when the control loses focus
+ * @param props."aria-expanded" - Whether the content this toggle shows is on screen
+ * @param props."aria-controls" - The id of the element this toggle shows or hides
  * @returns The toggle row
  * @example
  * ```tsx
@@ -6207,7 +6212,7 @@ export declare interface ToggleIconButtonProps extends Omit<ActionIconProps, "va
  * </ToggleRowGroup>
  * ```
  */
-export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, }: ToggleRowProps): default_2.JSX.Element;
+export declare function ToggleRow({ label, checked, defaultChecked, onChange, control, trailing, disabled, disabledReason, bound, boundDescription, onFocus, onBlur, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, }: ToggleRowProps): default_2.JSX.Element;
 
 /**
  * The column two or more toggle rows are packed into.
@@ -6376,6 +6381,23 @@ export declare interface ToggleRowProps {
     onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
     /** Called when the control loses focus. */
     onBlur?: default_2.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Whether the content this toggle shows is on screen, for a toggle that
+     * shows or hides something elsewhere in the panel.
+     *
+     * Set it together with `aria-controls` and a screen reader announces the
+     * toggle as one that opens something, rather than leaving the reader to
+     * notice new controls appearing. Leave both unset on a toggle that only
+     * records a setting.
+     */
+    "aria-expanded"?: boolean;
+    /**
+     * The `id` of the element this toggle shows or hides.
+     *
+     * Set it only while that element is in the document: a reference to an id
+     * that is not on the page is worse than no reference at all.
+     */
+    "aria-controls"?: string;
 }
 
 /**
@@ -6583,6 +6605,7 @@ declare function ToolbarRoot({ floating, children, className, onKeyDown, onFocus
  * @param props.shortcut - The keyboard shortcut shown in the tooltip
  * @param props.selected - Whether this is the current tool
  * @param props.tooltipPosition - Where the tooltip opens
+ * @param props.disabledReason - Why the tool cannot be used now; set, the tool is disabled
  * @returns The tool button
  */
 export declare const ToolButton: default_2.ForwardRefExoticComponent<ToolButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
@@ -6604,6 +6627,13 @@ export declare interface ToolButtonProps extends Omit<UnstyledButtonProps, "chil
     selected?: boolean;
     /** Where the tooltip opens. Defaults to above, as on Figma's bottom toolbar. */
     tooltipPosition?: TooltipProps["position"];
+    /**
+     * Why the tool cannot be used now, as one sentence ("Nothing is drawn"). Set, the button is
+     * drawn in the disabled ink, ignores clicks and is `aria-disabled` -- it stays focusable, so the
+     * arrows still reach it -- and the reason follows the name in the tooltip and is read out as
+     * the button's description.
+     */
+    disabledReason?: string;
 }
 
 /**
@@ -6782,6 +6812,8 @@ export declare const TreeItem: default_2.ForwardRefExoticComponent<TreeItemProps
 export declare interface TreeItemProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> {
     /** The visible name. */
     name: string;
+    /** The accessible name; defaults to `name`. */
+    label?: string;
     /** The 16 x 16 type glyph. */
     icon?: default_2.ReactNode;
     /** Depth, 1 for a top-level row. Each level indents 24px. */
@@ -6837,8 +6869,13 @@ export declare interface TreeMove {
 export declare interface TreeNodeData {
     /** Stable, unique across the whole tree. */
     id: string;
-    /** The visible name; also the item's accessible name and its type-ahead key. */
+    /** The visible name; also the item's type-ahead key, and its accessible name unless `label` is given. */
     name: string;
+    /**
+     * The accessible name, when the visible name alone is not enough: "value, edge attribute"
+     * where two rows read "value". Start it with the visible name. Defaults to `name`.
+     */
+    label?: string;
     /** The 16 x 16 type glyph drawn before the name. */
     icon?: default_2.ReactNode;
     /**
@@ -6858,7 +6895,8 @@ export declare interface TreeNodeData {
     /**
      * The row's trailing toggles (lock, eye): the caller's own controls. They stay hidden until
      * the row is hovered or focused; a control with `aria-pressed="true"`, `aria-checked="true"`
-     * or `data-pinned` stays visible.
+     * or `data-pinned` stays visible. A click on passive text here (nothing focusable) counts as a
+     * click on the row.
      */
     actions?: default_2.ReactNode;
     /**
@@ -6880,7 +6918,7 @@ export declare interface TreeNodeData {
     /**
      * The row's state in words -- "Running", "Failed: the graph has no edges" -- read by a
      * screen reader after the name (the row's `aria-describedby`) and never drawn. A row's
-     * accessible name is only its `name`, so anything a glyph or a tooltip says belongs here
+     * accessible name is only its `name` (or `label`), so anything a glyph or a tooltip says belongs here
      * too.
      */
     description?: string;