@gusnips/react 0.9.24 → 0.9.26

package/src/ui/select.tsx

@@ -32,7 +32,7 @@ export type SelectProps<T extends string = string> = Omit<
   "children" | "items" | "defaultValue" | "multiple"
 > & {
   options?: readonly SelectOption<T>[];
-  /** Shown while nothing is selected. No default — a default would be English. */
+  /** Shown while nothing is selected. No default because a default would be English. */
   placeholder?: ReactNode;
   /**
    * Shown instead of the list when `options` is empty. Required, because a popup that opens
@@ -40,9 +40,9 @@ export type SelectProps<T extends string = string> = Omit<
    */
   emptyLabel: ReactNode;
   /**
-   * Label of an entry that puts the field back to nothing selected — for an optional
-   * question, where "I'd rather not say" has to stay reachable after the first answer.
-   * Rendered only once there is a value to take back; picking it calls `onValueChange(null)`.
+   * Label of an entry that puts the field back to nothing selected, for an optional question where
+   * "I'd rather not say" has to stay reachable after the first answer. Rendered only once there is
+   * a value to take back; picking it calls `onValueChange(null)`.
    */
   clearLabel?: string;
   /** Accessible name for the trigger, when no visible label points at it. */
@@ -51,15 +51,15 @@ export type SelectProps<T extends string = string> = Omit<
   chevron?: ReactNode;
   /** Mark next to the selected option. */
   indicator?: ReactNode;
-  /** Classes for the trigger — the button you see when the popup is closed. */
+  /** Classes for the trigger button, which you see when the popup is closed. */
   className?: StateClassName<Primitive.Trigger.State>;
   popupClassName?: StateClassName<Primitive.Popup.State>;
   triggerProps?: Primitive.Trigger.Props;
   /**
-   * Positioner props — `align`, `side`, `sideOffset`, `collisionPadding`, and the stacking
-   * order. The default `z-[60]` puts the list above the overlay layer (z-50: dialog, drawer);
-   * raise it with `positionerProps={{ className: "z-[80]" }}` if the app stacks something
-   * higher than a dialog above it.
+   * Positioner props: `align`, `side`, `sideOffset`, `collisionPadding` and the stacking order. The
+   * default `z-[60]` puts the list above the overlay layer (z-50: dialog, drawer); raise it with
+   * `positionerProps={{ className: "z-[80]" }}` if the app stacks something higher than a dialog
+   * above it.
    */
   positionerProps?: Primitive.Positioner.Props;
 };
@@ -71,9 +71,9 @@ export type SelectProps<T extends string = string> = Omit<
  *
  * Controlled only, and that is the point of `value ?? null`: React and Base UI both read
  * `value={undefined}` as "uncontrolled", so a caller holding `T | undefined` in state would
- * silently hand the field back to the primitive the moment the value cleared, and every
- * later render would be ignored. `null` says "nothing selected" out loud. `defaultValue` is
- * not accepted here for the same reason — use the parts for an uncontrolled select.
+ * silently hand the field back to the primitive the moment the value cleared, and every later
+ * render would be ignored. `null` says "nothing selected" out loud. `defaultValue` is not accepted
+ * here for the same reason. Use the parts for an uncontrolled select.
  */
 export function Select<T extends string = string>({
   value,

package/src/ui/tabs.tsx

@@ -14,20 +14,19 @@ type TabListLabel =
 
 export type TabListProps = Omit<Primitive.List.Props, "aria-labelledby"> &
   TabListLabel & {
-    /** Classes for the scroll wrapper — the element that owns the sideways scroll. */
+    /** Classes for the wrapper that owns the sideways scroll. */
     wrapperClassName?: string;
   };
 
 /**
  * The rail, and the reason this file exists.
  *
- * It scrolls sideways rather than wrapping, because a second row of tabs pushes the panel
- * below the fold on a phone. But the scroll cannot live on the rail itself: `overflow-x: auto`
- * makes the element a scroll container, a scroll container clips everything its children paint
- * outside the padding box, and a computed `overflow-x` of `auto` forces `overflow-y` from
- * `visible` to `auto` as well. A self-scrolling rail therefore crops the focus ring on all
- * FOUR sides of whichever tab the keyboard is on — top and bottom always, the left of the
- * first tab and the right of the last.
+ * It scrolls sideways rather than wrapping, because a second row of tabs pushes the panel below the
+ * fold on a phone. But the scroll cannot live on the rail itself: `overflow-x: auto` makes the
+ * element a scroll container, a scroll container clips everything its children paint outside the
+ * padding box, and a computed `overflow-x` of `auto` forces `overflow-y` from `visible` to `auto`
+ * as well. A self-scrolling rail therefore crops the focus ring on all FOUR sides of whichever tab
+ * the keyboard is on: top and bottom always, the left of the first tab and the right of the last.
  *
  * So the scroll goes on a wrapper, and the wrapper's padding is the room the ring needs. The
  * number is derived, not inherited: `@gusnips/tokens` draws `outline: 2px solid` at
@@ -68,17 +67,17 @@ export function Tab({ className, ...rest }: Primitive.Tab.Props) {
 }
 
 /**
- * The travelling marker under the active tab — a SEPARATE part, because the two donors
- * disagreed about whether to have one at all and both were right about their own app. Render
- * it or do not; the rail works either way.
+ * The travelling marker under the active tab. A SEPARATE part, because the two donors disagreed
+ * about whether to have one at all and both were right about their own app. Render it or do not;
+ * the rail works either way.
  *
  * It must be a child of `TabList`: Base UI measures the active tab against the enclosing
  * `[role="tablist"]` and writes `--active-tab-left` / `--active-tab-width` onto this element.
  *
- * `renderBeforeHydration` is on by default because this package's apps are prerendered — with
- * it off, every prerendered page shows the rail with no marker until React arrives. It writes
- * one inline script to do that; under a strict CSP without Base UI's `CspProvider` the script
- * is blocked and the behaviour falls back to exactly what `false` would have done.
+ * `renderBeforeHydration` is on by default because this package's apps are prerendered. With it
+ * off, every prerendered page shows the rail with no marker until React arrives. It writes one
+ * inline script to do that; under a strict CSP without Base UI's `CspProvider` the script is
+ * blocked and the behaviour falls back to exactly what `false` would have done.
  */
 export function TabIndicator({ className, ...rest }: Primitive.Indicator.Props) {
   return (