@wordpress/components 23.3.2 → 23.4.0

package/build-types/tree-grid/types.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+export declare type TreeGridRowProps = {
+    /**
+     * The children to be rendered in the row.
+     */
+    children: React.ReactNode;
+    /**
+     * An integer value designating the level in the hierarchical tree structure.
+     * Counting starts at 1. A value of `1` indicates the root level of the structure.
+     */
+    level: NonNullable<React.AriaAttributes['aria-level']>;
+    /**
+     * An integer value that represents the position in the set.
+     * A set is the count of elements at a specific level. Counting starts at 1.
+     */
+    positionInSet: NonNullable<React.AriaAttributes['aria-posinset']>;
+    /**
+     * An integer value that represents the total number of items in the set,
+     * at this specific level of the hierarchy.
+     */
+    setSize: NonNullable<React.AriaAttributes['aria-setsize']>;
+    /**
+     * An optional value that designates whether a row is expanded or collapsed.
+     * Currently this value only sets the correct aria-expanded property on a row,
+     * it has no other built-in behavior.
+     */
+    isExpanded?: boolean;
+};
+declare type RovingTabIndexItemPassThruProps = {
+    ref: React.ForwardedRef<any>;
+    tabIndex?: number;
+    onFocus: React.FocusEventHandler<any>;
+    [key: string]: any;
+};
+export declare type RovingTabIndexItemProps = {
+    /**
+     * A render function that receives the props necessary to make it participate in the
+     * roving tabindex. Any extra props will also be passed through to this function.
+     *
+     * Props passed as an argument to the render prop must be passed to the child
+     * focusable component/element within the cell. If a component is used, it must
+     * correctly handle the `onFocus`, `tabIndex`, and `ref` props, passing these to the
+     * element it renders. These props are used to handle the roving tabindex functionality
+     * of the tree grid.
+     *
+     * ```jsx
+     * <TreeGridCell>
+     * 	{ ( props ) => (
+     * 		<Button onClick={ doSomething } { ...props }>
+     * 			Do something
+     * 		</Button>
+     * 	) }
+     * </TreeGridCell>
+     * ```
+     */
+    children?: (props: RovingTabIndexItemPassThruProps) => JSX.Element;
+    /**
+     * If `children` is not a function, this component will be used instead.
+     */
+    as?: React.ComponentType<RovingTabIndexItemPassThruProps>;
+    [key: string]: any;
+};
+export declare type TreeGridCellProps = ({
+    /**
+     * Render `children` without wrapping it in a `TreeGridItem` component.
+     * This means that `children` will not participate in the roving tabindex.
+     *
+     * @default false
+     */
+    withoutGridItem?: false;
+} & NonNullable<Pick<RovingTabIndexItemProps, 'children'>>) | {
+    children: React.ReactNode;
+    withoutGridItem: true;
+};
+export declare type TreeGridProps = {
+    /**
+     * Label to use for the element with the `application` role.
+     */
+    applicationAriaLabel?: string;
+    /**
+     * The children to be rendered in the tree grid.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback to fire when row is expanded.
+     *
+     * @default noop
+     */
+    onExpandRow?: (row: HTMLElement) => void;
+    /**
+     * Callback to fire when row is collapsed.
+     *
+     * @default noop
+     */
+    onCollapseRow?: (row: HTMLElement) => void;
+    /**
+     * Callback that fires when focus is shifted from one row to another via
+     * the Up and Down keys. Callback is also fired on Home and End keys which
+     * move focus from the beginning row to the end row.
+     *
+     * The callback is passed the event, the start row element that the focus was on
+     * originally, and the destination row element after the focus has moved.
+     *
+     * @default noop
+     */
+    onFocusRow?: (event: React.KeyboardEvent<HTMLTableElement>, startRow: HTMLElement, destinationRow: HTMLElement) => void;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/tree-grid/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tree-grid/types.ts"],"names":[],"mappings":";AAAA,oBAAY,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,WAAW,CAAE,KAAK,CAAC,cAAc,CAAE,YAAY,CAAE,CAAE,CAAC;IAC3D;;;OAGG;IACH,aAAa,EAAE,WAAW,CAAE,KAAK,CAAC,cAAc,CAAE,eAAe,CAAE,CAAE,CAAC;IACtE;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAE,KAAK,CAAC,cAAc,CAAE,cAAc,CAAE,CAAE,CAAC;IAC/D;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,aAAK,+BAA+B,GAAG;IACtC,GAAG,EAAE,KAAK,CAAC,YAAY,CAAE,GAAG,CAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAE,GAAG,CAAE,CAAC;IACxC,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IACrC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,+BAA+B,KAAM,GAAG,CAAC,OAAO,CAAC;IACrE;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,+BAA+B,CAAE,CAAC;IAC5D,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,oBAAY,iBAAiB,GAC1B,CAAE;IACF;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC;CACvB,GAAG,WAAW,CAAE,IAAI,CAAE,uBAAuB,EAAE,UAAU,CAAE,CAAE,CAAE,GAChE;IACA,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,EAAE,IAAI,CAAC;CACrB,CAAC;AAEL,oBAAY,aAAa,GAAG;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAE,GAAG,EAAE,WAAW,KAAM,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAE,GAAG,EAAE,WAAW,KAAM,IAAI,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,aAAa,CAAE,gBAAgB,CAAE,EAC9C,QAAQ,EAAE,WAAW,EACrB,cAAc,EAAE,WAAW,KACvB,IAAI,CAAC;CACV,CAAC"}

package/build-types/ui/context/context-connect.d.ts

@@ -8,8 +8,8 @@ declare type AcceptsTwoArgs<F extends (...args: any) => any, ErrorMessage = neve
  * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
  * within the Context system under a specified namespace.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 export declare function contextConnect<C extends (props: any, ref: ForwardedRef<any>) => JSX.Element | null>(Component: C & AcceptsTwoArgs<C, 'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'>, namespace: string): WordPressComponentFromProps<Parameters<C & AcceptsTwoArgs<C, "Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?">>[0], true>;
@@ -17,23 +17,23 @@ export declare function contextConnect<C extends (props: any, ref: ForwardedRef<
  * "Connects" (or registers) a component within the Context system under a specified namespace.
  * Does not forward a ref.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 export declare function contextConnectWithoutRef<P>(Component: (props: P) => JSX.Element | null, namespace: string): WordPressComponentFromProps<P, false>;
 /**
  * Attempts to retrieve the connected namespace from a component.
  *
- * @param  Component The component to retrieve a namespace from.
+ * @param Component The component to retrieve a namespace from.
  * @return The connected namespaces.
  */
 export declare function getConnectNamespace(Component: ReactChild | undefined | {}): string[];
 /**
  * Checks to see if a component is connected within the Context system.
  *
- * @param  Component The component to retrieve a namespace from.
- * @param  match     The namespace to check.
+ * @param Component The component to retrieve a namespace from.
+ * @param match     The namespace to check.
  */
 export declare function hasConnectNamespace(Component: ReactNode, match: string[] | string): boolean;
 export {};

package/build-types/ui/context/get-styled-class-name-from-key.d.ts

@@ -2,7 +2,7 @@ import memoize from 'memize';
 /**
  * Generates the connected component CSS className based on the namespace.
  *
- * @param  namespace The name of the connected component.
+ * @param namespace The name of the connected component.
  * @return The generated CSS className.
  */
 declare function getStyledClassName(namespace: string): string;

package/build-types/ui/utils/get-valid-children.d.ts

@@ -5,7 +5,7 @@ import type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
 /**
  * Gets a collection of available children elements from a React component's children prop.
  *
- * @param  children
+ * @param children
  *
  * @return An array of available children.
  */

package/build-types/ui/utils/space.d.ts

@@ -17,7 +17,7 @@ export declare type SpaceInput = number | string;
  * When given a unit value or one of the named CSS values like `auto`,
  * it will simply return the value back.
  *
- * @param  value A number, numeric string, or a unit value.
+ * @param value A number, numeric string, or a unit value.
  */
 export declare function space(value?: SpaceInput): string | undefined;
 //# sourceMappingURL=space.d.ts.map

package/build-types/unit-control/index.d.ts

@@ -27,7 +27,7 @@ export declare const UnitControl: import("react").ForwardRefExoticComponent<Omit
     value?: string | number | undefined;
     onBlur?: FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
     onFocus?: FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "onChange" | "value" | "name" | "color" | "height" | "translate" | "width" | "hidden" | "size" | "style" | "help" | "multiple" | "disabled" | "key" | "children" | "form" | "label" | "slot" | "title" | "pattern" | "as" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "__next36pxDefaultSize" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "step" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer" | "disableUnits" | "hideHTMLArrows" | "isShiftStepEnabled" | "shiftStep" | "unit" | "isUnitSelectTabbable" | "units" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "onChange" | "value" | "name" | "color" | "height" | "translate" | "width" | "hidden" | "size" | "style" | "help" | "multiple" | "disabled" | "key" | "children" | "form" | "label" | "slot" | "title" | "pattern" | "as" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "__next36pxDefaultSize" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "step" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer" | "hideHTMLArrows" | "isShiftStepEnabled" | "shiftStep" | "disableUnits" | "unit" | "isUnitSelectTabbable" | "units" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
 export { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';
 export default UnitControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/unit-control/utils.d.ts

@@ -18,9 +18,9 @@ export declare const DEFAULT_UNIT: WPUnitControlUnit;
  * Moving forward, ideally the value should be a string that contains both
  * the value and unit, example: '10px'
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
  * from the raw value could not be matched against the list of allowed units.
@@ -29,7 +29,7 @@ export declare function getParsedQuantityAndUnit(rawValue?: string | number, fal
 /**
  * Checks if units are defined.
  *
- * @param  units List of units.
+ * @param units List of units.
  * @return Whether the list actually contains any units.
  */
 export declare function hasUnits(units?: WPUnitControlUnit[]): units is WPUnitControlUnit[];
@@ -37,8 +37,8 @@ export declare function hasUnits(units?: WPUnitControlUnit[]): units is WPUnitCo
  * Parses a quantity and unit from a raw string value, given a list of allowed
  * units and otherwise falling back to the default unit.
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
  * from the raw value could not be matched against the list of allowed units.
@@ -48,10 +48,10 @@ export declare function parseQuantityAndUnitFromRawValue(rawValue?: string | num
  * Parses quantity and unit from a raw value. Validates parsed value, using fallback
  * value if invalid.
  *
- * @param  rawValue         The next value.
- * @param  allowedUnits     Units to derive from.
- * @param  fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
- * @param  fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
+ * @param rawValue         The next value.
+ * @param allowedUnits     Units to derive from.
+ * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
+ * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
  * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
@@ -63,15 +63,15 @@ export declare function getValidParsedQuantityAndUnit(rawValue: string | number,
  * Takes a unit value and finds the matching accessibility label for the
  * unit abbreviation.
  *
- * @param  unit Unit value (example: `px`)
+ * @param unit Unit value (example: `px`)
  * @return a11y label for the unit abbreviation
  */
 export declare function getAccessibleLabelForUnit(unit: string): string | undefined;
 /**
  * Filters available units based on values defined a list of allowed unit values.
  *
- * @param  allowedUnitValues Collection of allowed unit value strings.
- * @param  availableUnits    Collection of available unit objects.
+ * @param allowedUnitValues Collection of allowed unit value strings.
+ * @param availableUnits    Collection of available unit objects.
  * @return Filtered units.
  */
 export declare function filterUnitsWithSettings(allowedUnitValues: string[] | undefined, availableUnits: WPUnitControlUnit[]): WPUnitControlUnit[];
@@ -80,10 +80,10 @@ export declare function filterUnitsWithSettings(allowedUnitValues: string[] | un
  * TODO: ideally this hook shouldn't be needed
  * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
  *
- * @param  args                An object containing units, settingPath & defaultUnits.
- * @param  args.units          Collection of all potentially available units.
- * @param  args.availableUnits Collection of unit value strings for filtering available units.
- * @param  args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
+ * @param args                An object containing units, settingPath & defaultUnits.
+ * @param args.units          Collection of all potentially available units.
+ * @param args.availableUnits Collection of unit value strings for filtering available units.
+ * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
  *
  * @return Filtered list of units, with their default values updated following the `defaultValues`
  * argument's property.
@@ -101,9 +101,9 @@ export declare const useCustomUnits: ({ units, availableUnits, defaultValues, }:
  * accurately displayed in the UI, even if the intention is to hide
  * the availability of that unit.
  *
- * @param  rawValue   Selected value to parse.
- * @param  legacyUnit Legacy unit value, if rawValue needs it appended.
- * @param  units      List of available units.
+ * @param rawValue   Selected value to parse.
+ * @param legacyUnit Legacy unit value, if rawValue needs it appended.
+ * @param units      List of available units.
  *
  * @return A collection of units containing the unit for the current value.
  */

package/build-types/utils/events.d.ts

@@ -3,8 +3,8 @@ declare type EventHandler<T extends Event> = (event: T) => void;
  * Merges two sets of event handlers together.
  *
  * @template TEvent
- * @param  handlers
- * @param  extraHandlers
+ * @param    handlers
+ * @param    extraHandlers
  */
 export declare function mergeEventHandlers<TEvent extends Event, TLeft extends Record<string, EventHandler<TEvent>>, TRight extends Record<string, EventHandler<TEvent>>>(handlers: TLeft, extraHandlers: TRight): TLeft & TRight;
 export {};

package/build-types/utils/hooks/use-controlled-state.d.ts

@@ -3,7 +3,7 @@ export type Options<T> = {
     /**
      * Initial value
      */
-    initial: T | undefined;
+    initial?: T | undefined;
     /**
      * Fallback value
      */

package/build-types/utils/hooks/use-controlled-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-controlled-state.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-state.js"],"names":[],"mappings":";;;;;aAac,CAAC,GAAG,SAAS;;;;cACb,CAAC,GAAG,EAAE;;AAapB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,kIAFuC,IAAI,EAmC1C"}
+{"version":3,"file":"use-controlled-state.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-state.js"],"names":[],"mappings":";;;;;;;;;cAcc,CAAC,GAAG,EAAE;;AAapB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,kIAFuC,IAAI,EAmC1C"}

package/build-types/utils/hooks/use-controlled-value.d.ts

@@ -7,10 +7,10 @@ declare type Props<T> = {
 /**
  * Simplified and improved implementation of useControlledState.
  *
- * @param  props
- * @param  props.defaultValue
- * @param  props.value
- * @param  props.onChange
+ * @param props
+ * @param props.defaultValue
+ * @param props.value
+ * @param props.onChange
  * @return The controlled value and the value setter.
  */
 export declare function useControlledValue<T>({ defaultValue, onChange, value: valueProp, }: Props<T>): readonly [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>];

package/build-types/utils/hooks/use-latest-ref.d.ts

@@ -8,7 +8,7 @@ import type { RefObject } from 'react';
  *
  * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
  *
- * @param  value The value to reference
+ * @param value The value to reference
  * @return The prop reference.
  */
 export declare function useLatestRef<T>(value: T): RefObject<T>;

package/build-types/utils/unit-values.d.ts

@@ -1,7 +1,7 @@
 /**
  * Parses a number and unit from a value.
  *
- * @param  toParse Value to parse
+ * @param toParse Value to parse
  *
  * @return  The extracted number and unit.
  */
@@ -9,8 +9,8 @@ export declare function parseCSSUnitValue(toParse: string): [number | undefined,
 /**
  * Combines a value and a unit into a unit value.
  *
- * @param  value
- * @param  unit
+ * @param value
+ * @param unit
  *
  * @return The unit value.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "23.3.2",
+	"version": "23.4.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,23 +38,23 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.26.1",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/date": "^4.26.2",
-		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/dom": "^3.26.1",
-		"@wordpress/element": "^5.3.1",
-		"@wordpress/escape-html": "^2.26.1",
-		"@wordpress/hooks": "^3.26.1",
-		"@wordpress/html-entities": "^3.26.1",
-		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/is-shallow-equal": "^4.26.1",
-		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/primitives": "^3.24.1",
-		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/rich-text": "^6.3.2",
-		"@wordpress/warning": "^2.26.1",
+		"@wordpress/a11y": "^3.27.0",
+		"@wordpress/compose": "^6.4.0",
+		"@wordpress/date": "^4.27.0",
+		"@wordpress/deprecated": "^3.27.0",
+		"@wordpress/dom": "^3.27.0",
+		"@wordpress/element": "^5.4.0",
+		"@wordpress/escape-html": "^2.27.0",
+		"@wordpress/hooks": "^3.27.0",
+		"@wordpress/html-entities": "^3.27.0",
+		"@wordpress/i18n": "^4.27.0",
+		"@wordpress/icons": "^9.18.0",
+		"@wordpress/is-shallow-equal": "^4.27.0",
+		"@wordpress/keycodes": "^3.27.0",
+		"@wordpress/primitives": "^3.25.0",
+		"@wordpress/private-apis": "^0.9.0",
+		"@wordpress/rich-text": "^6.4.0",
+		"@wordpress/warning": "^2.27.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
 }

package/src/alignment-matrix-control/utils.tsx

@@ -33,7 +33,7 @@ export const ALIGNMENTS = GRID.flat();
 /**
  * Parses and transforms an incoming value to better match the alignment values
  *
- * @param  value An alignment value to parse.
+ * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
@@ -46,8 +46,8 @@ export function transformValue( value: AlignmentMatrixControlValue ) {
 /**
  * Creates an item ID based on a prefix ID and an alignment value.
  *
- * @param  prefixId An ID to prefix.
- * @param  value    An alignment value.
+ * @param prefixId An ID to prefix.
+ * @param value    An alignment value.
  *
  * @return The item id.
  */
@@ -63,7 +63,7 @@ export function getItemId(
 /**
  * Retrieves the alignment index from a value.
  *
- * @param  alignment Value to check.
+ * @param alignment Value to check.
  *
  * @return The index of a matching alignment.
  */

package/src/angle-picker-control/README.md

@@ -1,6 +1,6 @@
 # AnglePickerControl
 
-AnglePickerControl is a React component to render a UI that allows users to pick an angle.
+`AnglePickerControl` is a React component to render a UI that allows users to pick an angle.
 Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
 
 ## Usage
@@ -9,9 +9,15 @@ Users can choose an angle in a visual UI with the mouse by dragging an angle ind
 import { useState } from '@wordpress/element';
 import { AnglePickerControl } from '@wordpress/components';
 
-const MyAnglePicker = () => {
-	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } __nextHasNoMarginBottom />;
+function Example() {
+	const [ angle, setAngle ] = useState( 0 );
+	return (
+		<AnglePickerControl
+			value={ angle }
+			onChange={ setAngle }
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 ```
 
@@ -19,31 +25,28 @@ const MyAnglePicker = () => {
 
 The component accepts the following props.
 
-### label
+### `label`: `string`
 
-Label to use for the angle picker. If not set the a translated label "Angle" is used.
+Label to use for the angle picker.
 
--   Type: `String`
 -   Required: No
+-   Default: `__( 'Angle' )`
 
-### value
+### `value`: `number | string`
 
 The current value of the input. The value represents an angle in degrees and should be a value between 0 and 360.
 
--   Type: `Number`
 -   Required: Yes
 
-### onChange
+### `onChange`: `( value: number ) => void`
 
 A function that receives the new value of the input.
 
--   Type: `function`
 -   Required: Yes
 
-### __nextHasNoMarginBottom
+### `__nextHasNoMarginBottom`: `boolean`
 
 Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
 
--   Type: `boolean`
 -   Required: No
--   Default: `false`
+-   Default: `false`

package/src/angle-picker-control/{angle-circle.js → angle-circle.tsx}

@@ -13,12 +13,29 @@ import {
 	CircleIndicator,
 } from './styles/angle-picker-control-styles';
 
-function AngleCircle( { value, onChange, ...props } ) {
-	const angleCircleRef = useRef();
-	const angleCircleCenter = useRef();
-	const previousCursorValue = useRef();
+import type { WordPressComponentProps } from '../ui/context';
+import type { AngleCircleProps } from './types';
+
+type UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];
+type UseDraggingCallbackEvent =
+	| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]
+	| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]
+	| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];
+
+function AngleCircle( {
+	value,
+	onChange,
+	...props
+}: WordPressComponentProps< AngleCircleProps, 'div' > ) {
+	const angleCircleRef = useRef< HTMLDivElement | null >( null );
+	const angleCircleCenter = useRef< { x: number; y: number } | undefined >();
+	const previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();
 
 	const setAngleCircleCenter = () => {
+		if ( angleCircleRef.current === null ) {
+			return;
+		}
+
 		const rect = angleCircleRef.current.getBoundingClientRect();
 		angleCircleCenter.current = {
 			x: rect.x + rect.width / 2,
@@ -26,14 +43,26 @@ function AngleCircle( { value, onChange, ...props } ) {
 		};
 	};
 
-	const changeAngleToPosition = ( event ) => {
-		const { x: centerX, y: centerY } = angleCircleCenter.current;
+	const changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {
+		if ( event === undefined ) {
+			return;
+		}
+
 		// Prevent (drag) mouse events from selecting and accidentally
 		// triggering actions from other elements.
 		event.preventDefault();
 		// Input control needs to lose focus and by preventDefault above, it doesn't.
-		event.target.focus();
-		onChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );
+		( event.target as HTMLDivElement | null )?.focus();
+
+		if (
+			angleCircleCenter.current !== undefined &&
+			onChange !== undefined
+		) {
+			const { x: centerX, y: centerY } = angleCircleCenter.current;
+			onChange(
+				getAngle( centerX, centerY, event.clientX, event.clientY )
+			);
+		}
 	};
 
 	const { startDrag, isDragging } = useDragging( {
@@ -52,13 +81,12 @@ function AngleCircle( { value, onChange, ...props } ) {
 			}
 			document.body.style.cursor = 'grabbing';
 		} else {
-			document.body.style.cursor = previousCursorValue.current || null;
+			document.body.style.cursor = previousCursorValue.current || '';
 			previousCursorValue.current = undefined;
 		}
 	}, [ isDragging ] );
 
 	return (
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		<CircleRoot
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
@@ -76,11 +104,15 @@ function AngleCircle( { value, onChange, ...props } ) {
 				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
 			</CircleIndicatorWrapper>
 		</CircleRoot>
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	);
 }
 
-function getAngle( centerX, centerY, pointX, pointY ) {
+function getAngle(
+	centerX: number,
+	centerY: number,
+	pointX: number,
+	pointY: number
+) {
 	const y = pointY - centerY;
 	const x = pointX - centerX;