@wordpress/components 17.0.0 → 19.0.2

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import type { SelectSize } from '../types';
+declare type SelectProps = {
+    selectSize: SelectSize;
+};
+declare type InputProps = {
+    disableUnits?: boolean;
+};
+export declare const Root: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ValueInput: import("@emotion/styled").StyledComponent<Pick<{
+    [x: string]: any;
+    __unstableStateReducer?: ((state: any) => any) | undefined;
+    className: any;
+    dragDirection?: string | undefined;
+    hideHTMLArrows?: boolean | undefined;
+    isDragEnabled?: boolean | undefined;
+    isShiftStepEnabled?: boolean | undefined;
+    label: any;
+    max?: number | undefined;
+    min?: number | undefined;
+    required?: boolean | undefined;
+    shiftStep?: number | undefined;
+    step?: number | undefined;
+    type?: string | undefined;
+    value: any;
+}, string | number> & import("react").RefAttributes<any> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & InputProps, {}, {}>;
+export declare const UnitLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SelectProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnitSelect: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SelectProps, import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {}>;
+export {};
+//# sourceMappingURL=unit-control-styles.d.ts.map

package/build-types/unit-control/styles/unit-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,aAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,aAAK,UAAU,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAGhB,CAAC;AAyBF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;uBAYtB,CAAC;AA8CF,eAAO,MAAM,SAAS;;;uHAMrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mIAwBtB,CAAC"}

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

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import type { SyntheticEvent } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { StateReducer } from '../input-control/reducer/state';
+import type { InputChangeCallback } from '../input-control/types';
+export declare type Value = number | string;
+export declare type SelectSize = 'default' | 'small';
+export declare type WPUnitControlUnit = {
+    /**
+     * The value for the unit, used in a CSS value (e.g `px`).
+     */
+    value: string;
+    /**
+     * The label used in a dropdown selector for the unit.
+     */
+    label: string;
+    /**
+     * Default value for the unit, used when switching units.
+     */
+    default?: Value;
+    /**
+     * An accessible label used by screen readers.
+     */
+    a11yLabel?: string;
+    /**
+     * A step value used when incrementing/decrementing the value.
+     */
+    step?: number;
+};
+export declare type WPUnitControlUnitList = Array<WPUnitControlUnit> | false;
+export declare type UnitControlOnChangeCallback = InputChangeCallback<SyntheticEvent<HTMLSelectElement | HTMLInputElement>, {
+    data?: WPUnitControlUnit;
+}>;
+export declare type UnitSelectControlProps = {
+    /**
+     * Whether the control can be focused via keyboard navigation.
+     *
+     * @default true
+     */
+    isUnitSelectTabbable?: boolean;
+    /**
+     * A callback function invoked when the value is changed.
+     *
+     * @default noop
+     */
+    onChange?: UnitControlOnChangeCallback;
+    /**
+     * Size of the control option. Supports "default" and "small".
+     *
+     * @default 'default'
+     */
+    size?: SelectSize;
+    /**
+     * Current unit.
+     */
+    unit?: string;
+    /**
+     * Available units to select from.
+     *
+     * @default CSS_UNITS
+     */
+    units?: WPUnitControlUnitList;
+};
+export declare type UnitControlProps = UnitSelectControlProps & {
+    __unstableStateReducer?: StateReducer;
+    /**
+     * If `true`, the unit `<select>` is hidden.
+     *
+     * @default false
+     */
+    disableUnits?: boolean;
+    /**
+     * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
+     * If enabled, a change is also triggered when tabbing away (`onBlur`).
+     *
+     * @default false
+     */
+    isPressEnterToChange?: boolean;
+    /**
+     * If `true`, and the selected unit provides a `default` value, this value is set
+     * when changing units.
+     *
+     * @default false
+     */
+    isResetValueOnUnitChange?: boolean;
+    /**
+     * If this property is added, a label will be generated using label property as the content.
+     */
+    label?: string;
+    /**
+     * Callback when the `unit` changes.
+     *
+     * @default noop
+     */
+    onUnitChange?: UnitControlOnChangeCallback;
+    /**
+     * Current value. If passed as a string, the current unit will be inferred from this value.
+     * For example, a `value` of "50%" will set the current unit to `%`.
+     */
+    value: Value;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,oBAAY,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,oBAAY,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7C,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,qBAAqB,GAAG,KAAK,CAAE,iBAAiB,CAAE,GAAG,KAAK,CAAC;AAEvE,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;CACb,CAAC"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { UnitSelectControlProps } from './types';
+export default function UnitSelectControl({ className, isUnitSelectTabbable: isTabbable, onChange, size, unit, units, ...props }: WordPressComponentProps<UnitSelectControlProps, 'select', false>): JSX.Element;
+//# sourceMappingURL=unit-select-control.d.ts.map

package/build-types/unit-control/unit-select-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";AAQA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,SAAS,EACT,oBAAoB,EAAE,UAAiB,EACvC,QAAe,EACf,IAAgB,EAChB,IAAW,EACX,KAAiB,EACjB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAE,eAqCpE"}

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

@@ -0,0 +1,102 @@
+/**
+ * Internal dependencies
+ */
+import type { Value, WPUnitControlUnit, WPUnitControlUnitList } from './types';
+/**
+ * An array of all available CSS length units.
+ */
+export declare const ALL_CSS_UNITS: WPUnitControlUnit[];
+/**
+ * Units of measurements. `a11yLabel` is used by screenreaders.
+ */
+export declare const CSS_UNITS: WPUnitControlUnit[];
+export declare const DEFAULT_UNIT: WPUnitControlUnit;
+/**
+ * Handles legacy value + unit handling.
+ * This component use to manage both incoming value and units separately.
+ *
+ * Moving forward, ideally the value should be a string that contains both
+ * the value and unit, example: '10px'
+ *
+ * @param  value Value
+ * @param  unit  Unit value
+ * @param  units Units to derive from.
+ * @return The extracted number and unit.
+ */
+export declare function getParsedValue(value: Value, unit?: string, units?: WPUnitControlUnitList): [Value, string | undefined];
+/**
+ * Checks if units are defined.
+ *
+ * @param  units Units to check.
+ * @return Whether units are defined.
+ */
+export declare function hasUnits(units: WPUnitControlUnitList): boolean;
+/**
+ * Parses a number and unit from a value.
+ *
+ * @param  initialValue Value to parse
+ * @param  units        Units to derive from.
+ * @return The extracted number and unit.
+ */
+export declare function parseUnit(initialValue: Value | undefined, units?: WPUnitControlUnitList): [Value, string | undefined];
+/**
+ * Parses a number and unit from a value. Validates parsed value, using fallback
+ * value if invalid.
+ *
+ * @param  next          The next value.
+ * @param  units         Units to derive from.
+ * @param  fallbackValue The fallback value.
+ * @param  fallbackUnit  The fallback value.
+ * @return The extracted value and unit.
+ */
+export declare function getValidParsedUnit(next: Value | undefined, units: WPUnitControlUnitList, fallbackValue: Value, fallbackUnit: string | undefined): [Value, string | undefined];
+/**
+ * Takes a unit value and finds the matching accessibility label for the
+ * unit abbreviation.
+ *
+ * @param  unit Unit value (example: px)
+ * @return a11y label for the unit abbreviation
+ */
+export declare function parseA11yLabelForUnit(unit: string): string | undefined;
+/**
+ * Filters available units based on values defined by the unit setting/property.
+ *
+ * @param  unitSetting Collection of preferred unit value strings.
+ * @param  units       Collection of available unit objects.
+ *
+ * @return Filtered units based on settings.
+ */
+export declare function filterUnitsWithSettings(unitSetting: string[] | undefined, units: WPUnitControlUnitList): Array<WPUnitControlUnit>;
+/**
+ * Custom hook to retrieve and consolidate units setting from add_theme_support().
+ * 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' }.
+ *
+ * @return Filtered units based on settings.
+ */
+export declare const useCustomUnits: ({ units, availableUnits, defaultValues, }: {
+    units?: WPUnitControlUnitList | undefined;
+    availableUnits?: string[] | undefined;
+    defaultValues: Record<string, Value>;
+}) => WPUnitControlUnitList;
+/**
+ * Get available units with the unit for the currently selected value
+ * prepended if it is not available in the list of units.
+ *
+ * This is useful to ensure that the current value's unit is always
+ * accurately displayed in the UI, even if the intention is to hide
+ * the availability of that unit.
+ *
+ * @param  currentValue Selected value to parse.
+ * @param  legacyUnit   Legacy unit value, if currentValue needs it appended.
+ * @param  units        List of available units.
+ *
+ * @return A collection of units containing the unit for the current value.
+ */
+export declare function getUnitsWithCurrentUnit(currentValue: Value, legacyUnit: string | undefined, units?: WPUnitControlUnitList): WPUnitControlUnitList;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAgH/E;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC7B,KAAK,EAAE,KAAK,EACZ,IAAI,CAAC,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,qBAAqB,GAC3B,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAI/B;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAE,KAAK,EAAE,qBAAqB,GAAI,OAAO,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CACxB,YAAY,EAAE,KAAK,GAAG,SAAS,EAC/B,KAAK,GAAE,qBAAqC,GAC1C,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAoB/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CACjC,IAAI,EAAE,KAAK,GAAG,SAAS,EACvB,KAAK,EAAE,qBAAqB,EAC5B,aAAa,EAAE,KAAK,EACpB,YAAY,EAAE,MAAM,GAAG,SAAS,GAC9B,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAsB/B;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAGxE;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACtC,WAAW,sBAAsB,EACjC,KAAK,EAAE,qBAAqB,GAC1B,KAAK,CAAE,iBAAiB,CAAE,CAM5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc;;;mBAOX,OAAQ,MAAM,EAAE,KAAK,CAAE;MAClC,qBAgBJ,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,KAAK,GAAE,qBAAqC,GAC1C,qBAAqB,CAsBvB"}

package/build-types/utils/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,gCARW,MAAM,UACN,MAAM,GACL,MAAM,CASjB"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.js"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,gCARW,MAAM,UACN,MAAM,GACL,MAAM,CAQjB"}

package/build-types/utils/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { default as useControlledState } from "./use-controlled-state";
-export { default as useJumpStep } from "./use-jump-step";
 export { default as useUpdateEffect } from "./use-update-effect";
+export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

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

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject, RefCallback } from 'react';
+declare type Ref<T> = MutableRefObject<T | null> | RefCallback<T | null>;
+export declare function useCombinedRef<T extends HTMLElement>(...refs: Ref<T>[]): MutableRefObject<null>;
+export {};
+//# sourceMappingURL=use-combined-ref.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}

package/build-types/v-stack/component.d.ts

@@ -1,4 +1,4 @@
-export default VStack;
+export default ConnectedVStack;
 /**
  * `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line.
  *
@@ -22,5 +22,5 @@ export default VStack;
  * }
  * ```
  */
-declare const VStack: import("../ui/context").WordPressComponent<"div", import("./types").Props, true>;
+declare const ConnectedVStack: import("../ui/context").WordPressComponent<"div", import("./types").Props, true>;
 //# sourceMappingURL=component.d.ts.map

package/build-types/v-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/v-stack/component.js"],"names":[],"mappings":";AAMA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,uGAII"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/v-stack/component.js"],"names":[],"mappings":";AAiBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,gHAA2D"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "17.0.0",
+	"version": "19.0.2",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,27 +29,28 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
+		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.4.0",
 		"@emotion/css": "^11.1.3",
 		"@emotion/react": "^11.4.1",
 		"@emotion/styled": "^11.3.0",
 		"@emotion/utils": "1.0.0",
-		"@wordpress/a11y": "^3.2.2",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/date": "^4.2.1",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/dom": "^3.2.3",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/primitives": "^3.0.1",
-		"@wordpress/rich-text": "^5.0.2",
-		"@wordpress/warning": "^2.2.1",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/date": "^4.2.3",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/dom": "^3.2.7",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/is-shallow-equal": "^4.2.1",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/primitives": "^3.0.4",
+		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
+		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"framer-motion": "^4.1.17",
@@ -59,13 +60,12 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
-		"react-colorful": "^5.3.0",
+		"react-colorful": "^5.3.1",
 		"react-dates": "^17.1.1",
 		"react-resize-aware": "^3.1.0",
 		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "9a1dd3474d937468e4cf9caf9886ad61ef0a8f50"
 }

package/src/alignment-matrix-control/README.md

@@ -9,12 +9,12 @@ import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '
 import { useState } from '@wordpress/element';
 
 const Example = () => {
-	const [alignment, setAlignment] = useState('center center');
+	const [ alignment, setAlignment ] = useState( 'center center' );
 
 	return (
 		<AlignmentMatrixControl
-			value={alignment}
-			onChange={(newAlignment) => setAlignment(newAlignment)}
+			value={ alignment }
+			onChange={ ( newAlignment ) => setAlignment( newAlignment ) }
 		/>
 	);
 };
@@ -23,43 +23,54 @@ const Example = () => {
 ## Props
 
 The component accepts the following props:
+
 ### className
 
-The class that will be added with "component-alignment-matrix-control" to the classes of the wrapper <Composite/> component.
-If no className is passed only "component-alignment-matrix-control" is used.
+The class that will be added to the classes of the wrapper <Composite/> component.
 
--   Type: `String`
+-   Type: `string`
 -   Required: No
 
 ### id
 
 Unique ID for the component.
--  Type: `String`
+
+-  Type: `string`
 -  Required: No
+
 ### label
 
-If provided, sets the aria-label attribute of the wrapper <Composite/> component.
+Accessible label. If provided, sets the `aria-label` attribute of the underlying <Composite/> component.
 
--   Type: `String`
+-   Type: `string`
 -   Required: No
 -   Default: `Alignment Matrix Control`
+
 ### defaultValue
 
 If provided, sets the default alignment value.
-- Type: `String`
+
+- Type: `string`
 - Required: No
 - Default: `center center`
 
+### value
+
+The current alignment value.
+- Type: `string`
+- Required: No
+
 ### onChange
 
 A function that receives the updated alignment value.
 
--   Type: `function`
+-   Type: `( nextValue: string ) => void`
 -   Required: No
--   Default: `noop`
+
 ### width
 
 If provided, sets the width of the wrapper <Composite/> component.
- - Type: `Number`
+
+ - Type: `number`
  - Required: No
  - Default: `92`

package/src/alignment-matrix-control/stories/index.js

@@ -19,6 +19,9 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
 export default {
 	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/angle-picker-control/index.js

@@ -6,33 +6,25 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import { FlexBlock, FlexItem } from '../flex';
-import NumberControl from '../number-control';
+import NumberControl from '../input-control';
 import AngleCircle from './angle-circle';
 import { Root } from './styles/angle-picker-control-styles';
+import { space } from '../ui/utils/space';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
 	className,
-	hideLabelFromVision,
-	id: idProp,
 	label = __( 'Angle' ),
 	onChange,
 	value,
-	...props
 } ) {
-	const instanceId = useInstanceId(
-		AnglePickerControl,
-		'components-angle-picker-control__input'
-	);
-	const id = idProp || instanceId;
-
 	const handleOnNumberChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;
@@ -42,33 +34,43 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<BaseControl
-			className={ classes }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			label={ label }
-			{ ...props }
-		>
-			<Root>
-				<FlexBlock>
-					<NumberControl
-						className="components-angle-picker-control__input-field"
-						id={ id }
-						max={ 360 }
-						min={ 0 }
-						onChange={ handleOnNumberChange }
-						step="1"
-						value={ value }
-					/>
-				</FlexBlock>
-				<FlexItem>
-					<AngleCircle
-						aria-hidden="true"
-						value={ value }
-						onChange={ onChange }
-					/>
-				</FlexItem>
-			</Root>
-		</BaseControl>
+		<Root className={ classes }>
+			<FlexBlock>
+				<NumberControl
+					label={ label }
+					className="components-angle-picker-control__input-field"
+					max={ 360 }
+					min={ 0 }
+					onChange={ handleOnNumberChange }
+					step="1"
+					value={ value }
+					hideHTMLArrows
+					suffix={
+						<Spacer
+							as={ Text }
+							marginRight={ space( 3 ) }
+							style={ {
+								color: 'var( --wp-admin-theme-color )',
+							} }
+						>
+							°
+						</Spacer>
+					}
+				/>
+			</FlexBlock>
+			<FlexItem
+				style={ {
+					marginLeft: space( 4 ),
+					marginBottom: space( 1 ),
+					marginTop: 'auto',
+				} }
+			>
+				<AngleCircle
+					aria-hidden="true"
+					value={ value }
+					onChange={ onChange }
+				/>
+			</FlexItem>
+		</Root>
 	);
 }

package/src/angle-picker-control/styles/angle-picker-control-styles.js

@@ -8,16 +8,19 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
+import { space } from '../../ui/utils/space';
+import CONFIG from '../../utils/config-values';
 
-const CIRCLE_SIZE = 30;
+const CIRCLE_SIZE = 32;
+const INNER_CIRCLE_SIZE = 3;
 
 export const Root = styled( Flex )`
-	max-width: 200px;
+	margin-bottom: ${ space( 2 ) };
 `;
 
 export const CircleRoot = styled.div`
 	border-radius: 50%;
-	border: 1px solid ${ COLORS.ui.borderLight };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
 	height: ${ CIRCLE_SIZE }px;
@@ -33,17 +36,17 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.ui.border };
+	background: ${ COLORS.admin.theme };
 	border-radius: 50%;
-	border: 3px solid ${ COLORS.ui.border };
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;
-	height: 1px;
+	height: 0px;
 	left: 0;
 	margin: auto;
 	position: absolute;
 	right: 0;
 	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 1px;
+	width: 0px;
 `;

package/src/animate/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * @typedef {'left' | 'right'} SlideInOrigin
  * @typedef {{ type: 'appear'; origin?: AppearOrigin }} AppearOptions
  * @typedef {{ type: 'slide-in'; origin?: SlideInOrigin }} SlideInOptions
- * @typedef {{ type: 'loading'; }} LoadingOptions
+ * @typedef {{ type: 'loading' }} LoadingOptions
  * @typedef {AppearOptions | SlideInOptions | LoadingOptions} GetAnimateOptions
  */