@wordpress/components 19.8.1 → 19.9.0

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

@@ -1,52 +1,122 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ReactNode, ChangeEvent, SyntheticEvent, PointerEvent } from 'react';
+import type { CSSProperties, ReactNode, ChangeEvent, SyntheticEvent, PointerEvent, HTMLInputTypeAttribute } from 'react';
 import type { useDrag } from '@use-gesture/react';
 /**
  * Internal dependencies
  */
 import type { StateReducer } from './reducer/state';
-import type { FlexProps } from '../flex/types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { FlexProps } from '../flex/types';
 export declare type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 export declare type DragDirection = 'n' | 's' | 'e' | 'w';
 export declare type DragProps = Parameters<Parameters<typeof useDrag>[0]>[0];
 export declare type Size = 'default' | 'small' | '__unstable-large';
 interface BaseProps {
     __unstableInputWidth?: CSSProperties['width'];
+    /**
+     * If true, the label will only be visible to screen readers.
+     *
+     * @default false
+     */
     hideLabelFromVision?: boolean;
+    /**
+     * Whether the component should be in a focused state.
+     * Used to coordinate focus states when the actual focused element and the component handling
+     * visual focus are separate.
+     *
+     * @default false
+     */
     isFocused: boolean;
+    /**
+     * The position of the label.
+     *
+     * @default 'top'
+     */
     labelPosition?: LabelPosition;
+    /**
+     * Adjusts the size of the input.
+     *
+     * @default 'default'
+     */
     size?: Size;
 }
 export declare type InputChangeCallback<E = ChangeEvent<HTMLInputElement> | PointerEvent<HTMLInputElement>, P = {}> = (nextValue: string | undefined, extra: {
     event: E;
 } & P) => void;
 export interface InputFieldProps extends BaseProps {
+    /**
+     * Determines the drag axis.
+     *
+     * @default 'n'
+     */
     dragDirection?: DragDirection;
+    /**
+     * If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before
+     * the drag gesture is actually triggered.
+     *
+     * @default 10
+     */
     dragThreshold?: number;
+    /**
+     * If true, enables mouse drag gestures.
+     *
+     * @default false
+     */
     isDragEnabled?: 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;
+    /**
+     * A function that receives the value of the input.
+     */
     onChange?: InputChangeCallback;
     onValidate?: (nextValue: string, event?: SyntheticEvent<HTMLInputElement>) => void;
     setIsFocused: (isFocused: boolean) => void;
     stateReducer?: StateReducer;
+    /**
+     * The current value of the input.
+     */
     value?: string;
     onDragEnd?: (dragProps: DragProps) => void;
     onDragStart?: (dragProps: DragProps) => void;
     onDrag?: (dragProps: DragProps) => void;
+    /**
+     * Type of the input element to render.
+     *
+     * @default 'text'
+     */
+    type?: HTMLInputTypeAttribute;
 }
 export interface InputBaseProps extends BaseProps, FlexProps {
     children: ReactNode;
+    /**
+     * Renders an element on the left side of the input.
+     */
     prefix?: ReactNode;
+    /**
+     * Renders an element on the right side of the input.
+     */
     suffix?: ReactNode;
+    /**
+     * If true, the `input` will be disabled.
+     *
+     * @default false
+     */
     disabled?: boolean;
     className?: string;
     id?: string;
+    /**
+     * If this property is added, a label will be generated using label property as the content.
+     */
     label?: ReactNode;
 }
-export interface InputControlProps extends Omit<InputBaseProps, 'children' | 'isFocused'>, 
+export interface InputControlProps extends Omit<InputBaseProps, 'children' | 'isFocused' | keyof FlexProps>, 
 /**
  * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
  * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/input-control/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/input-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,aAAa,EACb,SAAS,EACT,WAAW,EACX,cAAc,EACd,YAAY,EACZ,sBAAsB,EACtB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,oBAAY,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/D,oBAAY,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,oBAAY,SAAS,GAAG,UAAU,CAAE,UAAU,CAAE,OAAO,OAAO,CAAE,CAAE,CAAC,CAAE,CAAE,CAAE,CAAC,CAAE,CAAC;AAE7E,oBAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,kBAAkB,CAAC;AAE5D,UAAU,SAAS;IAClB,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ;AAED,oBAAY,mBAAmB,CAC9B,CAAC,GAAG,WAAW,CAAE,gBAAgB,CAAE,GAAG,YAAY,CAAE,gBAAgB,CAAE,EACtE,CAAC,GAAG,EAAE,IACH,CAAE,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,GAAG,CAAC,KAAM,IAAI,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IACjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,cAAc,CAAE,gBAAgB,CAAE,KACtC,IAAI,CAAC;IACV,YAAY,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAE,SAAS,EAAE,SAAS,KAAM,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAE,SAAS,EAAE,SAAS,KAAM,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,CAAE,SAAS,EAAE,SAAS,KAAM,IAAI,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,SAAS;IAC3D,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAE,cAAc,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,SAAS,CAAE;AACzE;;;;;;;;;GASG;AACH,IAAI,CACH,uBAAuB,CAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAE,EAC1D,cAAc,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CACxD;IACF,sBAAsB,CAAC,EAAE,eAAe,CAAE,cAAc,CAAE,CAAC;CAC3D;AAED,MAAM,WAAW,sBAAsB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,mBAAmB,CAAC,EAAE,SAAS,CAAE,qBAAqB,CAAE,CAAC;IACzD,aAAa,CAAC,EAAE,SAAS,CAAE,eAAe,CAAE,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAE,MAAM,CAAE,CAAC;CAC3B"}

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

@@ -1,4 +1,4 @@
-export const Input: import("@emotion/styled").StyledComponent<Pick<import("../../input-control/types").InputControlProps, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "direction" | "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" | "onChange" | "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" | "css" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "step" | "align" | "justify" | "wrap" | "gap" | "expanded" | "hideLabelFromVision" | "isReversed" | "suffix" | "__unstableInputWidth" | "labelPosition" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement> & {
+export const Input: import("@emotion/styled").StyledComponent<Pick<import("../../input-control/types").InputControlProps, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "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" | "onChange" | "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" | "css" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "step" | "hideLabelFromVision" | "suffix" | "__unstableInputWidth" | "labelPosition" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     hideHTMLArrows: any;

package/build-types/text/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/text/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/text/test/index.tsx"],"names":[],"mappings":""}

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

@@ -1,146 +1,3 @@
-export namespace BASE {
-    const black: string;
-    const white: string;
-}
-export namespace G2 {
-    namespace blue {
-        namespace medium {
-            const focus: string;
-            const focusDark: string;
-        }
-    }
-    const gray: {
-        900: string;
-        700: string;
-        600: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-    };
-    namespace darkGray {
-        const primary: string;
-        const heading: string;
-    }
-    namespace mediumGray {
-        const text: string;
-    }
-    namespace lightGray {
-        const ui: string;
-        const secondary: string;
-        const tertiary: string;
-    }
-}
-export const DARK_GRAY: {
-    900: string;
-    800: string;
-    700: string;
-    600: string;
-    500: string;
-    400: string;
-    300: string;
-    200: string;
-    150: string;
-    100: string;
-    placeholder: string;
-};
-export const DARK_OPACITY: {
-    900: string;
-    800: string;
-    700: string;
-    600: string;
-    500: string;
-    400: string;
-    300: string;
-    200: string;
-    100: string;
-    backgroundFill: string;
-};
-export const DARK_OPACITY_LIGHT: {
-    900: string;
-    800: string;
-    700: string;
-    600: string;
-    500: string;
-    400: string;
-    300: string;
-    200: string;
-    100: string;
-};
-export const LIGHT_GRAY: {
-    900: string;
-    800: string;
-    700: string;
-    600: string;
-    500: string;
-    400: string;
-    300: string;
-    200: string;
-    100: string;
-    placeholder: string;
-};
-export const LIGHT_OPACITY_LIGHT: {
-    900: string;
-    800: string;
-    700: string;
-    600: string;
-    500: string;
-    400: string;
-    300: string;
-    200: string;
-    100: string;
-    backgroundFill: string;
-};
-export namespace BLUE {
-    export const wordpress: {
-        700: string;
-    };
-    export const dark: {
-        900: string;
-    };
-    const medium_1: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
-        500: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-        highlight: string;
-        focus: string;
-    };
-    export { medium_1 as medium };
-}
-export namespace ALERT {
-    const yellow: string;
-    const red: string;
-    const green: string;
-}
-export namespace ADMIN {
-    const theme: string;
-    const themeDark10: string;
-}
-export namespace UI {
-    import theme_1 = ADMIN.theme;
-    export { theme_1 as theme };
-    import background = BASE.white;
-    export { background };
-    export const backgroundDisabled: string;
-    export const border: string;
-    export const borderHover: string;
-    import borderFocus = ADMIN.themeDark10;
-    export { borderFocus };
-    export const borderDisabled: string;
-    export const borderLight: string;
-    export const label: string;
-    export const textDisabled: string;
-    import textDark = BASE.white;
-    export { textDark };
-    import textLight = BASE.black;
-    export { textLight };
-}
 export const COLORS: {
     black: string;
     white: string;
@@ -157,9 +14,6 @@ export const COLORS: {
         150: string;
         100: string;
         placeholder: string;
-    } & {
-        primary: string;
-        heading: string;
     };
     darkOpacity: {
         900: string;
@@ -187,6 +41,12 @@ export const COLORS: {
     mediumGray: {
         text: string;
     };
+    /**
+     * The main gray color object (since Apr 16, 2022).
+     *
+     * We are in the process of simplifying the colors in this file,
+     * please prefer this `gray` object in the meantime.
+     */
     gray: {
         900: string;
         700: string;

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

@@ -1 +1 @@
-{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA;;;;;;;;;;;;EAYE;AAEF;;;;;;;;;;;EAWE;AAEF;;;;;;;;;;EAUE;AAEF;;;;;;;;;;;EAWE;AAEF;;;;;;;;;;;EAWE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYI"}
+{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAgKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKC;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.8.1",
+	"version": "19.9.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,21 +37,21 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/date": "^4.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/dom": "^3.6.1",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/escape-html": "^2.6.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.1",
-		"@wordpress/is-shallow-equal": "^4.6.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/primitives": "^3.4.1",
-		"@wordpress/rich-text": "^5.4.1",
-		"@wordpress/warning": "^2.6.1",
+		"@wordpress/a11y": "^3.7.0",
+		"@wordpress/compose": "^5.5.0",
+		"@wordpress/date": "^4.7.0",
+		"@wordpress/deprecated": "^3.7.0",
+		"@wordpress/dom": "^3.7.0",
+		"@wordpress/element": "^4.5.0",
+		"@wordpress/escape-html": "^2.7.0",
+		"@wordpress/hooks": "^3.7.0",
+		"@wordpress/i18n": "^4.7.0",
+		"@wordpress/icons": "^8.3.0",
+		"@wordpress/is-shallow-equal": "^4.7.0",
+		"@wordpress/keycodes": "^3.7.0",
+		"@wordpress/primitives": "^3.5.0",
+		"@wordpress/rich-text": "^5.5.0",
+		"@wordpress/warning": "^2.7.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -43,9 +43,11 @@ export const Row = styled.div`
 `;
 
 const pointActive = ( { isActive } ) => {
-	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.black }` : null;
-	const pointColor = isActive ? COLORS.black : COLORS.lightGray[ 800 ];
-	const pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus;
+	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
+	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
+	const pointColorHover = isActive
+		? COLORS.gray[ 900 ]
+		: COLORS.blue.medium.focus;
 
 	return css`
 		box-shadow: ${ boxShadow };

package/src/heading/hook.ts

@@ -70,7 +70,7 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.darkGray.heading,
+		color: COLORS.gray[ 900 ],
 		size: getHeadingFontSize( level ),
 		isBlock: true,
 		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],

package/src/heading/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -27,7 +27,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -45,7 +45,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

package/src/input-control/README.md

@@ -105,5 +105,5 @@ Type of the input element to render. Defaults to "text".
 
 The current value of the input.
 
--   Type: `String | Number`
--   Required: Yes
+-   Type: `String`
+-   Required: No

package/src/input-control/index.tsx

@@ -25,7 +25,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-export function InputControl(
+export function UnforwardedInputControl(
 	{
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
@@ -88,6 +88,25 @@ export function InputControl(
 	);
 }
 
-const ForwardedComponent = forwardRef( InputControl );
+/**
+ * InputControl components let users enter and edit text. This is an experimental component
+ * intended to (in time) merge with or replace `TextControl`.
+ *
+ * @example
+ * import { __experimentalInputControl as InputControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/compose';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '' );
+ *
+ *   return (
+ *  	<InputControl
+ *  		value={ value }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ) }
+ *  	/>
+ *   );
+ * };
+ */
+export const InputControl = forwardRef( UnforwardedInputControl );
 
-export default ForwardedComponent;
+export default InputControl;

package/src/input-control/stories/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '..';
+
+const meta: ComponentMeta< typeof InputControl > = {
+	title: 'Components (Experimental)/InputControl',
+	component: InputControl,
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: { type: null } },
+		onChange: { control: { type: null } },
+		prefix: { control: { type: null } },
+		suffix: { control: { type: null } },
+		type: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof InputControl > = ( args ) => (
+	<InputControl { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Value',
+	placeholder: 'Placeholder',
+	value: '',
+};
+
+export const WithPrefix = Template.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+};
+
+export const WithSideLabel = Template.bind( {} );
+WithSideLabel.args = {
+	...Default.args,
+	labelPosition: 'side',
+};
+
+export const WithEdgeLabel = Template.bind( {} );
+WithEdgeLabel.args = {
+	...Default.args,
+	__unstableInputWidth: '20em',
+	labelPosition: 'edge',
+};

package/src/input-control/styles/input-control-styles.tsx

@@ -210,7 +210,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;
@@ -245,7 +245,6 @@ const labelMargin = ( {
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
 		box-sizing: border-box;
-		color: currentColor;
 		display: block;
 		padding-top: 0;
 		padding-bottom: 0;