@pk-design/react-tailwind 1.8.1 → 1.9.0

package/dist/types/components/Button/Button.types.d.ts

@@ -85,23 +85,27 @@ export interface ButtonBaseProps {
      */
     loadingText?: string;
     /**
-     * Applies 50% border radius, producing a pill-shaped button.
+     * Applies a fully rounded border radius, producing a pill-shaped button
+     * (or a circle when combined with `iconOnly`).
      * @default false
      */
     rounded?: boolean;
     /**
-     * Indicates that the button only contains an icon.
+     * Indicates that the button only contains an icon. Requires `aria-label`
+     * or `aria-labelledby` so the button has an accessible name.
      * @default false
      */
     iconOnly?: boolean;
     /**
-     * Prevents outline styles on keyboard focus.
+     * Removes the focus ring shown on keyboard focus. Only use this when the
+     * button gets another visible focus indicator, e.g. via `className`.
      * @default false
      */
     noOutlineOnFocus?: boolean;
     /**
-     * Indicates active toggle state (applies aria-pressed).
-     * @default false
+     * Turns the button into a toggle: when set to `true` or `false`,
+     * `aria-pressed` reflects it and `true` shows a ring. Leave unset for a
+     * regular (non-toggle) button.
      */
     active?: boolean;
     /**
@@ -113,7 +117,9 @@ export interface ButtonBaseProps {
      */
     type?: 'button' | 'submit' | 'reset';
     /**
-     * Standard disabled attribute. Only applies when as="button".
+     * Disables the button. Rendered as the native `disabled` attribute on
+     * `<button>`, or as `aria-disabled` (with `tabIndex={-1}` and clicks
+     * blocked) for any other element passed via `as`.
      */
     disabled?: boolean;
 }

package/dist/types/components/SelectBox/SelectBox.types.d.ts

@@ -22,11 +22,21 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     /** List of option groups to display in the dropdown (alternative to options) */
     groups?: OptionGroup<T>[];
     /**
-     * Currently selected option(s).
+     * Currently selected option(s). Passing this makes the SelectBox controlled:
+     * it shows exactly this value, so update it from `onChange`.
      * - For single select: a single T or null
      * - For multi-select: T[]
+     *
+     * Leave it undefined to let the SelectBox manage its own selection
+     * (optionally seeded with `defaultSelected`).
      */
     selected?: T | T[] | null;
+    /**
+     * Initial selection when the SelectBox is uncontrolled (`selected` not passed).
+     * Only read on mount; later changes are ignored. `onChange` still fires on
+     * every change.
+     */
+    defaultSelected?: T | T[] | null;
     /** Size scale of the SelectBox component (`"sm"` | `"md"` | `"lg"`). Defaults to `"md"`. */
     size?: SelectBoxSize;
     /** Name of the field inside option objects to use as the label (defaults to "label") */
@@ -59,6 +69,13 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     placeholder?: string;
     /** CSS classes applied to the dropdown options container */
     dropdownContainerClass?: string;
+    /**
+     * Minimum width of the dropdown panel. By default the panel matches the
+     * input width; set this so it can grow wider than a narrow input. Numbers
+     * are treated as pixels, strings accept any CSS length (e.g. `"16rem"`).
+     * The panel stays left-aligned with the input.
+     */
+    dropdownMinWidth?: number | string;
     /**
      * Whether the open dropdown traps focus and makes the rest of the page inert.
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",