@rebasepro/ui 0.23.0 → 0.24.0

package/dist/components/BooleanSwitch.d.ts

@@ -4,6 +4,11 @@ export type BooleanSwitchProps = {
     className?: string;
     disabled?: boolean;
     size?: "smallest" | "small" | "medium" | "large";
+    /** Names the switch when no visible label is tied to it. */
+    "aria-label"?: string;
+    /** The id of the element whose text names the switch. */
+    "aria-labelledby"?: string;
+    id?: string;
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -14,4 +14,4 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => React.JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: BooleanSwitchWithLabelProps) => React.JSX.Element;

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type ButtonSize } from "../styles.js";
-export type ButtonProps<C extends React.ElementType = "button"> = {
+type ButtonOwnProps<C extends React.ElementType> = {
     children?: React.ReactNode;
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
@@ -11,5 +11,13 @@ export type ButtonProps<C extends React.ElementType = "button"> = {
     className?: string;
     component?: C;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & React.ComponentPropsWithoutRef<C>;
-export declare const Button: React.FC<ButtonProps<React.ElementType>>;
+};
+/**
+ * The kit's own props, plus those of the element it renders (`button`, or
+ * `component`). It used to intersect with `ComponentPropsWithoutRef` of a bare
+ * `ElementType`, which is as good as `any`: any misspelt or invented prop on
+ * the most-used control in the product compiled, and landed on the DOM.
+ */
+export type ButtonProps<C extends React.ElementType = "button"> = ButtonOwnProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof ButtonOwnProps<C>>;
+export declare const Button: <C extends React.ElementType = "button">(props: ButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export {};

package/dist/components/Dialog.d.ts

@@ -12,11 +12,32 @@ export type DialogProps = {
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
     onOpenAutoFocus?: (e: Event) => void;
+    /**
+     * Called when focus is about to return after the dialog closes. By default
+     * it goes back to the element that had it when the dialog opened; call
+     * `preventDefault()` to put it somewhere else.
+     */
+    onCloseAutoFocus?: (e: Event) => void;
     onEscapeKeyDown?: (e: KeyboardEvent) => void;
     onPointerDownOutside?: (e: Event) => void;
     onInteractOutside?: (e: Event) => void;
     /**
-     * If `true`, the dialog will not focus the first focusable element when opened.
+     * Whether a click on the dimmed backdrop closes the dialog. Off by default:
+     * a record or a form dialog holds work that one stray click must not throw
+     * away. Turn it on for a picker, where closing loses nothing. Escape closes
+     * either kind.
+     */
+    dismissOnBackdrop?: boolean;
+    /**
+     * The element to focus when the dialog opens, for a dialog whose purpose is
+     * one field. Without it the dialog focuses itself, so a screen reader
+     * announces it by its title and a phone does not raise its keyboard.
+     */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /**
+     * If `true` (the default), the dialog will not focus the first focusable
+     * element when opened: it focuses its own container instead. `false` lets
+     * the first focusable element take focus.
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
@@ -36,5 +57,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus, portalContainer, "aria-describedby": ariaDescribedby }: DialogProps) => React.JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, dismissOnBackdrop, initialFocus, disableInitialFocus, portalContainer, "aria-describedby": ariaDescribedby }: DialogProps) => React.JSX.Element;
 export {};

package/dist/components/IconButton.d.ts

@@ -1,12 +1,23 @@
 import React from "react";
-export type IconButtonProps<C extends React.ElementType> = Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick"> & {
+type IconButtonOwnProps<C extends React.ElementType> = {
     size?: "medium" | "small" | "smallest" | "large";
     variant?: "ghost" | "filled";
     shape?: "circular" | "square";
     disabled?: boolean;
     toggled?: boolean;
     component?: C;
-    onClick?: React.MouseEventHandler<any>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    className?: string;
+    children?: React.ReactNode;
     "aria-label"?: string;
 };
-export declare const IconButton: React.ComponentType<IconButtonProps<any>>;
+/**
+ * The kit's own props, plus those of the element it renders (`button`, or
+ * `component`). Typed against that element rather than `any`: a misspelt or
+ * invented prop is a compile error, not an attribute on the DOM. `color` is
+ * left out — it is an obsolete HTML attribute that does nothing, and callers
+ * wrote `color="primary"` expecting the accent icon `Button`'s `color` gives.
+ */
+export type IconButtonProps<C extends React.ElementType = "button"> = IconButtonOwnProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps<C> | "color">;
+export declare const IconButton: <C extends React.ElementType = "button">(props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export {};

package/dist/components/LoadingButton.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonProps } from "./Button.js";
-export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
+export type LoadingButtonProps<P extends React.ElementType = "button"> = ButtonProps<P> & {
     startIcon?: React.ReactNode;
     loading?: boolean;
 };
-export declare function LoadingButton<P extends React.ElementType = "button">({ children, loading, disabled, onClick, startIcon, ...props }: LoadingButtonProps<P>): React.JSX.Element;
+export declare function LoadingButton<P extends React.ElementType = "button">({ children, loading, startIcon, ...props }: LoadingButtonProps<P>): React.JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -45,6 +45,13 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
      * the cell that clips it, and the list belongs under what can be seen.
      */
     anchorRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Replaces everything the trigger draws — the values, the box, its
+     * padding, its height and the chevron — with this node. For a caller that
+     * frames the select itself: a table cell passes the preview it shows at
+     * rest, so selecting the cell moves nothing.
+     */
+    triggerContent?: React.ReactNode;
     children: React.ReactNode;
     renderValues?: (values: T[]) => React.ReactNode;
     portalContainer?: HTMLElement | null;

package/dist/components/Select.d.ts

@@ -28,6 +28,13 @@ export type SelectProps<T extends SelectValue = string> = {
      * the cell draws one opener for every kind of editor, in the same place.
      */
     chevron?: boolean;
+    /**
+     * Replaces everything the trigger draws — the value, the box, its padding,
+     * its height and the chevron — with this node. For a caller that frames
+     * the select itself: a table cell passes the preview it shows at rest, so
+     * selecting the cell moves nothing.
+     */
+    triggerContent?: React.ReactNode;
     children?: React.ReactNode;
     dataType?: "string" | "number" | "boolean";
     portalContainer?: HTMLElement | null;

package/dist/components/Sheet.d.ts

@@ -11,6 +11,19 @@ interface SheetProps {
     onOpenChange?: (open: boolean) => void;
     onPointerDownOutside?: (e: Event) => void;
     onInteractOutside?: (e: Event) => void;
+    /**
+     * The element to focus when the sheet opens. Without it the sheet focuses
+     * itself, so a screen reader announces it by its title and a phone does
+     * not raise its keyboard.
+     */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /** Called as the sheet opens, before focus moves into it. `preventDefault()` keeps focus where it is. */
+    onOpenAutoFocus?: (e: Event) => void;
+    /**
+     * Called when focus is about to return after the sheet closes. By default
+     * it goes back to the element that had it when the sheet opened.
+     */
+    onCloseAutoFocus?: (e: Event) => void;
     className?: string;
     style?: React.CSSProperties;
     overlayClassName?: string;

package/dist/hooks/useModalFocus.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+export type ModalFocusOptions = {
+    /** Whether the modal is open. Focus is recorded on the closed → open edge. */
+    open: boolean;
+    /**
+     * The element to focus when the modal opens. Without it the modal focuses
+     * itself (see {@link useModalFocus}).
+     */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /**
+     * `false` hands the choice back to Radix: the first focusable element
+     * inside the modal takes focus. `true` (the default) focuses the modal's
+     * own container.
+     */
+    focusContainer?: boolean;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+};
+/**
+ * Where focus goes when a kit modal (`Dialog`, `Sheet`) opens and closes.
+ *
+ * Both used to cancel Radix's open-focus and do nothing else, so focus stayed
+ * on the trigger behind the modal — which Radix had just hidden from assistive
+ * technology with `aria-hidden`. A screen reader announced nothing, and Enter
+ * pressed again fired the trigger a second time underneath the open modal.
+ *
+ * On open, focus moves into the modal: to `initialFocus` when the caller names
+ * an element, otherwise to the modal's own container (it carries
+ * `tabIndex=-1`). The container rather than the first field, because the first
+ * field on a phone raises the keyboard over a form the user has not started,
+ * and because the container is what a screen reader announces by its title.
+ * The first Tab then lands on the first control.
+ *
+ * On close, focus goes back to whatever had it when the modal opened. Radix
+ * only returns it to a `Dialog.Trigger`, and the kit's modals are controlled —
+ * there is no trigger — so focus used to fall to `<body>` and the next Tab
+ * started from the top of the page.
+ *
+ * The origin is read while rendering the open edge, not from the open-focus
+ * event: a field with `autoFocus` inside the modal has taken focus by the time
+ * any effect runs, and Radix then skips the event altogether. When the origin
+ * is an item in a menu, the menu's trigger is recorded instead: the item is
+ * gone a moment later, and the menu does not take focus back to its trigger
+ * once the modal has it.
+ *
+ * Internal to the kit's modals — not exported.
+ */
+export declare function useModalFocus({ open, initialFocus, focusContainer, onOpenAutoFocus, onCloseAutoFocus }: ModalFocusOptions): {
+    onOpenAutoFocus: (event: Event) => void;
+    onCloseAutoFocus: (event: Event) => void;
+};

package/dist/index.d.ts

@@ -15,4 +15,5 @@ export { useInjectStyles } from "./hooks/useInjectStyles.js";
 export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext.js";
 export type { PortalContainerContextType, PortalContainerProviderProps } from "./hooks/PortalContainerContext.js";
 export { debounce } from "./util/debounce.js";
+export { isKeyHandled } from "./util/keys.js";
 export type { Cancelable } from "./util/debounce.js";