PHPXRef 0.7.1 : WordPress Trunk (Updated Daily) : Detail view of components.js

No description

createRenderBatcher(scheduleNextBatch, allowKeepAlive) X-Ref

No description

create_config_createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) X-Ref

No description

addDomEvent(target, eventName, handler, options = { passive: true }) X-Ref

No description

extractEventInfo(event, pointType = "page") X-Ref

No description

addPointerEvent(target, eventName, handler, options) X-Ref

No description

createLock(name) X-Ref

No description

getGlobalLock(drag) X-Ref

No description

isDragActive() X-Ref

No description

Class: Feature - X-Ref

addHoverEvent(node, isActive) X-Ref

No description

Class: HoverGesture - X-Ref

Class: FocusGesture - X-Ref

fireSyntheticPointerEvent(name, handler) X-Ref

No description

Class: PressGesture - X-Ref

initIntersectionObserver({ root, ...options }) X-Ref

No description

observeIntersection(element, options, callback) X-Ref

No description

Class: InViewFeature - X-Ref

hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) X-Ref

No description

shallowCompare(next, prev) X-Ref

No description

getCurrent(visualElement) X-Ref

Creates an object containing the latest state of every MotionValue on a VisualElement

getVelocity(visualElement) X-Ref

Creates an object containing the latest velocity of every MotionValue on a VisualElement

resolveVariant(visualElement, definition, custom) X-Ref

No description

isWaapiSupportedEasing(easing) X-Ref

No description

mapEasingToNativeEasing(easing) X-Ref

No description

animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) X-Ref

No description

getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) X-Ref

No description

binarySubdivide(x, lowerBound, upperBound, mX1, mX2) X-Ref

No description

cubicBezier(mX1, mY1, mX2, mY2) X-Ref

No description

parseHex(v) X-Ref

No description

hueToRgb(p, q, t) X-Ref

No description

hslaToRgba({ hue, saturation, lightness, alpha }) X-Ref

No description

asRGBA(color) X-Ref

No description

test(v) X-Ref

No description

tokenise(info, { regex, countKey, token, parse }) X-Ref

No description

analyseComplexValue(value) X-Ref

No description

parseComplexValue(v) X-Ref

No description

createTransformer(source) X-Ref

No description

getAnimatableNone(v) X-Ref

No description

getMixer(origin, target) X-Ref

No description

detectMixerFactory(v) X-Ref

No description

createMixers(output, ease, customMixer) X-Ref

No description

interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) X-Ref

Create a function that maps from a numerical input array to a generic output array.

Accepts:
- Numbers
- Colors (hex, hsl, hsla, rgb, rgba)
- Complex (combinations of one or more numbers or strings)

```jsx
const mixColor = interpolate([0, 1], ['#fff', '#000'])

mixColor(0.5) // 'rgba(128, 128, 128, 1)'
```

TODO Revist this approach once we've moved to data models for values,
probably not needed to pregenerate mixer functions.

fillOffset(offset, remaining) X-Ref

No description

defaultOffset(arr) X-Ref

No description

convertOffsetToTimes(offset, duration) X-Ref

No description

defaultEasing(values, easing) X-Ref

No description

keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) X-Ref

No description

velocityPerSecond(velocity, frameDuration) X-Ref

No description

calcGeneratorVelocity(resolveValue, t, current) X-Ref

No description

findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) X-Ref

No description

approximateRoot(envelope, derivative, initialGuess) X-Ref

No description

calcAngularFreq(undampedFreq, dampingRatio) X-Ref

No description

isSpringType(options, keys) X-Ref

No description

getSpringOptions(options) X-Ref

No description

spring({ keyframes, restDelta, restSpeed, ...options }) X-Ref

No description

inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) X-Ref

No description

calcGeneratorDuration(generator) X-Ref

Implement a practical max duration for keyframe generation
to prevent infinite loops

animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) X-Ref

Animate a single value on the main thread.

This function is written, where functionality overlaps,
to be largely spec-compliant with WAAPI to allow fungibility
between the two.

memo(callback) X-Ref

No description

createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) X-Ref

No description

createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) X-Ref

No description

applyDefaultFilter(v) X-Ref

Properties that should default to 1 or 100%

animatable_none_getAnimatableNone(key, value) X-Ref

No description

isNone(value) X-Ref

No description

getKeyframes(value, valueName, target, transition) X-Ref

No description

isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) X-Ref

Decide whether a transition is defined on a given Transition.
This filters out orchestration options and returns true
if any options are left.

getValueTransition(transition, key) X-Ref

No description

isWillChangeMotionValue(value) X-Ref

No description

addUniqueItem(arr, item) X-Ref

No description

removeItem(arr, item) X-Ref

No description

moveItem([...arr], fromIndex, toIndex) X-Ref

No description

Class: SubscriptionManager - X-Ref

Class: MotionValue - X-Ref

`MotionValue` is used to track the state and velocity of motion values.

motionValue(init, options) X-Ref

No description

setMotionValue(visualElement, key, value) X-Ref

Set VisualElement's MotionValue, creating a new MotionValue for it if
it doesn't exist.

setTarget(visualElement, definition) X-Ref

No description

setVariants(visualElement, variantLabels) X-Ref

No description

setValues(visualElement, definition) X-Ref

No description

checkTargetForNewValues(visualElement, target, origin) X-Ref

No description

getOriginFromTransition(key, transition) X-Ref

No description

getOrigin(target, transition, visualElement) X-Ref

No description

shouldBlockAnimation({ protectedKeys, needsAnimating }, key) X-Ref

Decide whether we should block this animation. Previously, we achieved this
just by checking whether the key was listed in protectedKeys, but this
posed problems if an animation was triggered by afterChildren and protectedKeys
had been set to true in the meantime.

animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) X-Ref

No description

animateVariant(visualElement, variant, options = {}) X-Ref

No description

animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) X-Ref

No description

sortByTreeOrder(a, b) X-Ref

No description

animateVisualElement(visualElement, definition, options = {}) X-Ref

No description

animateList(visualElement) X-Ref

No description

createAnimationState(visualElement) X-Ref

No description

setAnimateFunction(makeAnimator) X-Ref

This just allows us to inject mocked animation functions

animateChanges(options, changedActiveType) X-Ref

When we receive new props, we need to:
1. Create a list of protected keys for each type. This is a directory of
value keys that are currently being "handled" by types of a higher priority
so that whenever an animation is played of a given type, these values are
protected from being animated.
2. Determine if an animation type needs animating.
3. Determine if any values have been removed from a type and figure out
what to animate those to.

setActive(type, isActive, options) X-Ref

Change whether a certain animation type is active.

checkVariantsDidChange(prev, next) X-Ref

No description

createTypeState(isActive = false) X-Ref

No description

createState() X-Ref

No description

Class: AnimationFeature - X-Ref

Class: ExitAnimationFeature - X-Ref

distance2D(a, b) X-Ref

No description

Class: PanSession - X-Ref

transformPoint(info, transformPagePoint) X-Ref

subtractPoint(a, b) X-Ref

No description

getPanInfo({ point }, history) X-Ref

No description

startDevicePoint(history) X-Ref

No description

lastDevicePoint(history) X-Ref

No description

PanSession_getVelocity(history, timeDelta) X-Ref

No description

calcLength(axis) X-Ref

No description

isNear(value, target = 0, maxDistance = 0.01) X-Ref

No description

calcAxisDelta(delta, source, target, origin = 0.5) X-Ref

No description

calcBoxDelta(delta, source, target, origin) X-Ref

No description

calcRelativeAxis(target, relative, parent) X-Ref

No description

calcRelativeBox(target, relative, parent) X-Ref

No description

calcRelativeAxisPosition(target, layout, parent) X-Ref

No description

calcRelativePosition(target, layout, parent) X-Ref

No description

applyConstraints(point, { min, max }, elastic) X-Ref

Apply constraints to a point. These constraints are both physical along an
axis, and an elastic factor that determines how much to constrain the point
by if it does lie outside the defined parameters.

calcRelativeAxisConstraints(axis, min, max) X-Ref

Calculate constraints in terms of the viewport when defined relatively to the
measured axis. This is measured from the nearest edge, so a max constraint of 200
on an axis with a max value of 300 would return a constraint of 500 - axis length

calcRelativeConstraints(layoutBox, { top, left, bottom, right }) X-Ref

Calculate constraints in terms of the viewport when
defined relatively to the measured bounding box.

calcViewportAxisConstraints(layoutAxis, constraintsAxis) X-Ref

Calculate viewport constraints when defined as another viewport-relative axis

calcViewportConstraints(layoutBox, constraintsBox) X-Ref

Calculate viewport constraints when defined as another viewport-relative box

constraints_calcOrigin(source, target) X-Ref

Calculate a transform origin relative to the source axis, between 0-1, that results
in an asthetically pleasing scale/transform needed to project from source to target.

rebaseAxisConstraints(layout, constraints) X-Ref

Rebase the calculated viewport constraints relative to the layout.min point.

resolveDragElastic(dragElastic = defaultElastic) X-Ref

Accepts a dragElastic prop and returns resolved elastic values for each axis.

resolveAxisElastic(dragElastic, minLabel, maxLabel) X-Ref

No description

resolvePointElastic(dragElastic, label) X-Ref

No description

eachAxis(callback) X-Ref

No description

convertBoundingBoxToBox({ top, left, right, bottom, }) X-Ref

Bounding boxes tend to be defined as top, left, right, bottom. For various operations
it's easier to consider each axis individually. This function returns a bounding box
as a map of single-axis min/max values.

convertBoxToBoundingBox({ x, y }) X-Ref

No description

transformBoxPoints(point, transformPoint) X-Ref

Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
provided by Framer to allow measured points to be corrected for device scaling. This is used
when measuring DOM elements and DOM event points.

isIdentityScale(scale) X-Ref

No description

hasScale({ scale, scaleX, scaleY }) X-Ref

No description

hasTransform(values) X-Ref

No description

has2DTranslate(values) X-Ref

No description

is2DTranslate(value) X-Ref

No description

scalePoint(point, scale, originPoint) X-Ref

Scales a point based on a factor and an originPoint

applyPointDelta(point, translate, scale, originPoint, boxScale) X-Ref

Applies a translate/scale delta to a point

applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) X-Ref

Applies a translate/scale delta to an axis

applyBoxDelta(box, { x, y }) X-Ref

Applies a translate/scale delta to a box

applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) X-Ref

Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
in a tree upon our box before then calculating how to project it into our desired viewport-relative box

This is the final nested loop within updateLayoutDelta for future refactoring

snapToDefault(scale) X-Ref

No description

translateAxis(axis, distance) X-Ref

No description

transformAxis(axis, transforms, [key, scaleKey, originKey]) X-Ref

Apply a transform to an axis from the latest resolved motion values.
This function basically acts as a bridge between a flat motion value map
and applyAxisDelta

transformBox(box, transform) X-Ref

Apply a transform to a box from the latest resolved motion values.

measureViewportBox(instance, transformPoint) X-Ref

No description

measurePageBox(element, rootProjectionNode, transformPagePoint) X-Ref

No description

Class: VisualElementDragControls - X-Ref

shouldDrag(direction, drag, currentDirection) X-Ref

No description

getCurrentDirection(offset, lockThreshold = 10) X-Ref

Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
than the provided threshold, return `null`.

param: offset - The x/y offset from origin.
param: lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.

Class: DragGesture - X-Ref

Class: PanGesture - X-Ref

usePresence() X-Ref

When a component is the child of `AnimatePresence`, it can use `usePresence`
to access information about whether it's still present in the React tree.

```jsx
import { usePresence } from "framer-motion"

export const Component = () => {
const [isPresent, safeToRemove] = usePresence()

useEffect(() => {
!isPresent && setTimeout(safeToRemove, 1000)
}, [isPresent])

return <div />
}
```

If `isPresent` is `false`, it means that a component has been removed the tree, but
`AnimatePresence` won't really remove it until `safeToRemove` has been called.

useIsPresent() X-Ref

Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
There is no `safeToRemove` function.

```jsx
import { useIsPresent } from "framer-motion"

export const Component = () => {
const isPresent = useIsPresent()

useEffect(() => {
!isPresent && console.log("I've been removed!")
}, [isPresent])

return <div />
}
```

isPresent(context) X-Ref

No description

pixelsToPercent(pixels, axis) X-Ref

No description

Class: MeasureLayoutWithContext - X-Ref

MeasureLayout(props) X-Ref

No description

mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) X-Ref

No description

getRadius(values, radiusName) X-Ref

No description

compress(min, max, easing) X-Ref

No description

copyAxisInto(axis, originAxis) X-Ref

Reset an axis to the provided origin box.

This is a mutative operation.

copyBoxInto(box, originBox) X-Ref

Reset a box to the provided origin box.

This is a mutative operation.

removePointDelta(point, translate, scale, originPoint, boxScale) X-Ref

Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse

removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) X-Ref

Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse

removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) X-Ref

Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
and acts as a bridge between motion values and removeAxisDelta

removeBoxTransforms(box, transforms, originBox, sourceBox) X-Ref

Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
and acts as a bridge between motion values and removeAxisDelta

isAxisDeltaZero(delta) X-Ref

No description

isDeltaZero(delta) X-Ref

No description

boxEquals(a, b) X-Ref

No description

boxEqualsRounded(a, b) X-Ref

No description

aspectRatio(box) X-Ref

No description

Class: NodeStack - X-Ref

buildProjectionTransform(delta, treeScale, latestTransform) X-Ref

No description

Class: FlatTree - X-Ref

delay(callback, timeout) X-Ref

Timeout defined in ms

record(data) X-Ref

No description

isSVGElement(element) X-Ref

No description

animateSingleValue(value, keyframes, options) X-Ref

No description

createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) X-Ref

No description

updateLayout(node) X-Ref

No description

notifyLayoutUpdate(node) X-Ref

No description

propagateDirtyNodes(node) X-Ref

Clearing transition
TODO: Investigate why this transition is being passed in as {type: false } from Framer
and why we need it at all

cleanDirtyNodes(node) X-Ref

No description

clearSnapshot(node) X-Ref

No description

clearMeasurements(node) X-Ref

No description

clearIsLayoutDirty(node) X-Ref

No description

resetTransformStyle(node) X-Ref

No description

finishAnimation(node) X-Ref

No description

resolveTargetDelta(node) X-Ref

No description

calcProjection(node) X-Ref

No description

resetRotation(node) X-Ref

No description

removeLeadSnapshots(stack) X-Ref

No description

mixAxisDelta(output, delta, p) X-Ref

No description

mixAxis(output, from, to, p) X-Ref

No description

mixBox(output, from, to, p) X-Ref

No description

hasOpacityCrossfade(node) X-Ref

No description

roundAxis(axis) X-Ref

No description

roundBox(box) X-Ref

No description

shouldAnimatePositionOnly(animationType, snapshot, layout) X-Ref

No description

parseCSSVariable(current) X-Ref

Parse Framer's special CSS variable format into a CSS token and a fallback.

```
`var(--foo, #fff)` => [`--foo`, '#fff']
```

param: current

getVariableValue(current, element, depth = 1) X-Ref

No description

resolveCSSVariables(visualElement, { ...target }, transitionEnd) X-Ref

Resolve CSS variables from

removeNonTranslationalTransform(visualElement) X-Ref

No description

unitConversion(visualElement, target, origin, transitionEnd) X-Ref

Convert value types for x/y/width/height/top/left/bottom/right

Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`

initPrefersReducedMotion() X-Ref

No description

updateMotionValuesFromProps(element, next, prev) X-Ref

No description

Class: VisualElement - X-Ref

A VisualElement is an imperative abstraction around UI elements such as
HTMLElement, SVGElement, Three.Object3D etc.

Class: DOMVisualElement - X-Ref

HTMLVisualElement_getComputedStyle(element) X-Ref

No description

Class: HTMLVisualElement - X-Ref

Class: SVGVisualElement - X-Ref

createDomMotionComponent(key) X-Ref

Create a DOM `motion` component with the provided string. This is primarily intended
as a full alternative to `motion` for consumers who have to support environments that don't
support `Proxy`.

```javascript
import { createDomMotionComponent } from "framer-motion"

const motion = {
div: createDomMotionComponent('div')
}
```

useIsMounted() X-Ref

No description

use_force_update_useForceUpdate() X-Ref

No description

Class: PopChildMeasure - X-Ref

Measurement functionality has to be within a separate component
to leverage snapshot lifecycle.

PopChild({ children, isPresent }) X-Ref

No description

newChildrenMap() X-Ref

No description

useUnmountEffect(callback) X-Ref

No description

updateChildLookup(children, allChildren) X-Ref

No description

onlyElements(children) X-Ref

No description

useResponsiveValue(values, options = {}) X-Ref

No description

space(value) X-Ref

A function that handles numbers, numeric strings, and unit values.

When given a number or a numeric string, it will return the grid-based
value as a factor of GRID_BASE, defined above.

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.

styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useDeprecatedProps(props) X-Ref

No description

useFlex(props) X-Ref

No description

UnconnectedFlex(props, forwardedRef) X-Ref

No description

useFlexItem(props) X-Ref

No description

useFlexBlock(props) X-Ref

No description

UnconnectedFlexBlock(props, forwardedRef) X-Ref

No description

getConvertedKey(key) X-Ref

Flips a CSS property from left <-> right.

return: {string} The flipped CSS property name, if applicable.
param: {string} key The CSS property name.

rtl(ltrStyles = {}, rtlStyles) X-Ref

A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects.

return: {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
param: {import('react').CSSProperties} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
param: {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided.

useSpacer(props) X-Ref

No description

UnconnectedSpacer(props, forwardedRef) X-Ref

No description

UnconnectedFlexItem(props, forwardedRef) X-Ref

No description

truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

isValueDefined(value) X-Ref

Determines if a value is null or undefined.

return: {value is Exclude<T, null | undefined>} Whether value is not null or undefined.
param: {T} value The value to check.

isValueEmpty(value) X-Ref

Determines if a value is empty, null, or undefined.

return: {value is ("" | null | undefined)} Whether value is empty.
param: {string | number | null | undefined} value The value to check.

getDefinedValue(values = [], fallbackValue) X-Ref

Get the first defined/non-null value from an array.

return: {T} A defined value or the fallback value.
param: {Array<T | null | undefined>} values Values to derive from.
param: {T} fallbackValue Fallback value if there are no defined values.

truncateMiddle(word, headLength, tailLength, ellipsis) X-Ref

No description

truncateContent(words = '', props) X-Ref

No description

useTruncate(props) X-Ref

No description

names(e,f) X-Ref

No description

colors_rgba(hexValue = '', alpha = 1) X-Ref

Generating a CSS compliant rgba() color value.

return: {string} The converted rgba() color value.
param: {string} hexValue The hex value to convert to rgba().
param: {number} alpha The alpha value for opacity.

getColorComputationNode() X-Ref

return: {HTMLDivElement | undefined} The HTML element for color computation.

isColor(value) X-Ref

return: {boolean} Whether the value is a valid color.
param: {string | unknown} value

_getComputedBackgroundColor(backgroundColor) X-Ref

Retrieves the computed background color. This is useful for getting the
value of a CSS variable color.

return: {string} The computed background color.
param: {string | unknown} backgroundColor The background color to compute.

getOptimalTextColor(backgroundColor) X-Ref

Get the text shade optimized for readability, based on a background color.

return: {string} The optimized text color (black or white).
param: {string | unknown} backgroundColor The background color.

getOptimalTextShade(backgroundColor) X-Ref

Get the text shade optimized for readability, based on a background color.

return: {string} The optimized text shade (dark or light).
param: {string | unknown} backgroundColor The background color.

text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

createHighlighterText({activeClassName = '',activeIndex = -1,activeStyle,autoEscape,caseSensitive = false,children,findChunks,highlightClassName = '',highlightStyle = {},highlightTag = 'mark',sanitize,searchWords = [],unhighlightClassName = '',unhighlightStyle}) X-Ref

param: options
param: options.activeClassName
param: options.activeIndex
param: options.activeStyle
param: options.autoEscape
param: options.caseSensitive
param: options.children
param: options.findChunks
param: options.highlightClassName
param: options.highlightStyle
param: options.highlightTag
param: options.sanitize
param: options.searchWords
param: options.unhighlightClassName
param: options.unhighlightStyle

getFontSize(size = BASE_FONT_SIZE) X-Ref

No description

getHeadingFontSize(size = 3) X-Ref

No description

getLineHeight(adjustLineHeightForInnerControls, lineHeight) X-Ref

No description

hook_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useText(props) X-Ref

param: {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props

UnconnectedText(props, forwardedRef) X-Ref

param: props
param: forwardedRef

base_label_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

Backdrop({disabled = false,isBorderless = false,isFocused = false}) X-Ref

Internal dependencies

label_Label({children,hideLabelFromVision,htmlFor,...props}) X-Ref

Internal dependencies

useDeprecated36pxDefaultSizeProp(props) X-Ref

No description

useUniqueId(idProp) X-Ref

No description

getUIFlexProps(labelPosition) X-Ref

No description

InputBase(props, ref) X-Ref

No description

maths_0ab39ae9_esm_clamp(v, min, max) X-Ref

No description

rubberband(distance, dimension, constant) X-Ref

No description

rubberbandIfOutOfBounds(position, min, max, constant = 0.15) X-Ref

No description

computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) X-Ref

No description

_toPrimitive(input, hint) X-Ref

No description

_toPropertyKey(arg) X-Ref

No description

_defineProperty(obj, key, value) X-Ref

No description

ownKeys(object, enumerableOnly) X-Ref

No description

_objectSpread2(target) X-Ref

No description

capitalize(string) X-Ref

No description

hasCapture(capture = false, actionKey) X-Ref

No description

toHandlerProp(device, action = '', capture = false) X-Ref

No description

parseProp(prop) X-Ref

No description

toDomEventType(device, action = '') X-Ref

No description

isTouch(event) X-Ref

No description

getPointerType(event) X-Ref

No description

getCurrentTargetTouchList(event) X-Ref

No description

getTouchList(event) X-Ref

No description

getValueEvent(event) X-Ref

No description

distanceAngle(P1, P2) X-Ref

No description

touchIds(event) X-Ref

No description

touchDistanceAngle(event, ids) X-Ref

No description

pointerId(event) X-Ref

No description

pointerValues(event) X-Ref

No description

wheelValues(event) X-Ref

No description

scrollValues(event) X-Ref

No description

getEventDetails(event) X-Ref

No description

call(v, ...args) X-Ref

No description

actions_b1cc53c2_esm_noop() X-Ref

No description

actions_b1cc53c2_esm_chain(...fns) X-Ref

No description

assignDefault(value, fallback) X-Ref

No description

Class: Engine - X-Ref

selectAxis([dx, dy], threshold) X-Ref

No description

Class: CoordinatesEngine - X-Ref

Class: DragEngine - X-Ref

persistEvent(event) X-Ref

No description

supportsTouchEvents() X-Ref

No description

isTouchScreen() X-Ref

No description

supportsPointerEvents() X-Ref

No description

supportsPointerLock() X-Ref

No description

supportsGestureEvents() X-Ref

No description

clampStateInternalMovementToBounds(state) X-Ref

No description

Class: PinchEngine - X-Ref

Class: MoveEngine - X-Ref

Class: ScrollEngine - X-Ref

Class: WheelEngine - X-Ref

Class: HoverEngine - X-Ref

actions_b1cc53c2_esm_registerAction(action) X-Ref

No description

_objectWithoutPropertiesLoose(source, excluded) X-Ref

No description

_objectWithoutProperties(source, excluded) X-Ref

No description

resolveWith(config = {}, resolvers) X-Ref

No description

use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) X-Ref

No description

Class: EventStore - X-Ref

Class: TimeoutStore - X-Ref

Class: Controller - X-Ref

setupGesture(ctrl, gestureKey) X-Ref

No description

resolveGestures(ctrl, internalHandlers) X-Ref

No description

sortHandlers(_handlers) X-Ref

No description

registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) X-Ref

No description

use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) X-Ref

No description

useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) X-Ref

No description

useDrag(handler, config) X-Ref

No description

usePinch(handler, config) X-Ref

No description

useWheel(handler, config) X-Ref

No description

useScroll(handler, config) X-Ref

No description

useMove(handler, config) X-Ref

No description

useHover(handler, config) X-Ref

No description

createUseGesture(actions) X-Ref

No description

useGesture(handlers, config) X-Ref

No description

getDragCursor(dragDirection) X-Ref

Gets a CSS cursor value based on a drag direction.

return: The CSS cursor value.
param: dragDirection The drag direction.

useDragCursor(isDragging, dragDirection) X-Ref

Custom hook that renders a drag cursor when dragging.

return: {string} The CSS cursor value.
param: {boolean} isDragging The dragging state.
param: {string} dragDirection The drag direction.

useDraft(props) X-Ref

No description

mergeInitialState(initialState = initialInputControlState) X-Ref

Prepares initialState for the reducer.

return: Prepared initialState for the reducer
param: initialState The initial state.

inputControlStateReducer(composedStateReducers) X-Ref

Creates the base reducer which may be coupled to a specializing reducer.
As its final step, for all actions other than CONTROL, the base reducer
passes the state and action on through the specializing reducer. The
exception for CONTROL actions is because they represent controlled updates
from props and no case has yet presented for their specialization.

return: The reducer.
param: composedStateReducers A reducer to specialize state changes.

useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) X-Ref

A custom hook that connects and external stateReducer with an internal
reducer. This hook manages the internal state of InputControl.
However, by connecting an external stateReducer function, other
components can react to actions as well as modify state before it is
applied.

This technique uses the "stateReducer" design pattern:
https://kentcdodds.com/blog/the-state-reducer-pattern/

return: State, dispatch, and a collection of actions.
param: stateReducer An external state reducer.
param: initialState The initial state for the reducer.
param: onChangeHandler A handler for the onChange event.

InputField({disabled = false,dragDirection = 'n',dragThreshold = 10,id,isDragEnabled = false,isFocused,isPressEnterToChange = false,onBlur = input_field_noop,onChange = input_field_noop,onDrag = input_field_noop,onDragEnd = input_field_noop,onDragStart = input_field_noop,onFocus = input_field_noop,onKeyDown = input_field_noop,onValidate = input_field_noop,size = 'default',setIsFocused,stateReducer = state => state,value: valueProp,type,...props}, ref) X-Ref

No description

font(value) X-Ref

return: {string} Font rule value
param: {keyof FONT} value Path of value from `FONT`

box_sizing_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

input_control_useUniqueId(idProp) X-Ref

No description

UnforwardedInputControl(props, ref) X-Ref

No description

Dashicon({icon,className,size = 20,style = {},...extraProps}) X-Ref

Internal dependencies

Icon({icon = null,size = 'string' === typeof icon ? 20 : 24,...additionalProps}) X-Ref

Internal dependencies

button_useDeprecatedProps({isDefault,isPrimary,isSecondary,isTertiary,isLink,isPressed,isSmall,size,variant,...otherProps}) X-Ref

No description

UnforwardedButton(props, ref) X-Ref

No description

number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

getNumber(value) X-Ref

Parses and retrieves a number value.

return: {number} The parsed number value.
param: {unknown} value The incoming value.

add(...args) X-Ref

Safely adds 2 values.

return: {number} The sum of values.
param: {Array<number|string>} args Values to add together.

subtract(...args) X-Ref

Safely subtracts 2 values.

return: {number} The difference of the values.
param: {Array<number|string>} args Values to subtract together.

getPrecision(value) X-Ref

Determines the decimal position of a number value.

return: {number} The number of decimal places.
param: {number} value The number to evaluate.

math_clamp(value, min, max) X-Ref

Clamps a value based on a min/max range.

return: {number} The clamped value.
param: {number} value The value.
param: {number} min The minimum range.
param: {number} max The maximum range.

roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) X-Ref

Clamps a value based on a min/max range with rounding

return: {number} The rounded and clamped value.
param: {number | string} value The value.
param: {number}          min   The minimum range.
param: {number}          max   The maximum range.
param: {number}          step  A multiplier for the value.

getAlignmentProps(alignment, direction = 'row') X-Ref

No description

getValidChildren(children) X-Ref

Gets a collection of available children elements from a React component's children prop.

return: An array of available children.
param: children

useHStack(props) X-Ref

No description

UnconnectedHStack(props, forwardedRef) X-Ref

No description

UnforwardedNumberControl(props, forwardedRef) X-Ref

No description

angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

AngleCircle({value,onChange,...props}) X-Ref

Internal dependencies

getAngle(centerX, centerY, pointX, pointY) X-Ref

No description

UnforwardedAnglePickerControl(props, ref) X-Ref

No description

kebabCase(str) X-Ref

Converts any string to kebab case.
Backwards compatible with Lodash's `_.kebabCase()`.
Backwards compatible with `_wp_to_kebab_case()`.

return: Kebab-cased string
param: str String to convert.

escapeRegExp(string) X-Ref

Escapes the RegExp special characters.

return: Regex-escaped string.
param: string Input string.

filterOptions(search, options = [], maxResults = 10) X-Ref

Internal dependencies

getDefaultUseItems(autocompleter) X-Ref

No description

isRef(value) X-Ref

Provides data to position an inner element of the floating element so that it
appears centered to the reference element.
This wraps the core `arrow` middleware to allow React refs as the element.

deepEqual(a, b) X-Ref

No description

getDPR(element) X-Ref

No description

floating_ui_react_dom_roundByDPR(element, value) X-Ref

No description

useLatestRef(value) X-Ref

No description

useFloating(options) X-Ref

Provides data to position a floating element.

useReducedMotion() X-Ref

A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
`x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

```jsx
export function Sidebar({ isOpen }) {
const shouldReduceMotion = useReducedMotion()
const closedX = shouldReduceMotion ? 0 : "-100%"

return (
<motion.div animate={{
opacity: isOpen ? 1 : 0,
x: isOpen ? 0 : closedX
}} />
)
}
```

return: boolean

setLocked(locked) X-Ref

No description

ScrollLock() X-Ref

ScrollLock is a content-free React component for declaratively preventing
scroll bleed from modal UI to the page body. This component applies a
`lockscroll` class to the `document.documentElement` and
`document.scrollingElement` elements to stop the body from scrolling. When it
is present, the lock is applied.

```jsx
import { ScrollLock, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyScrollLock = () => {
const [ isScrollLocked, setIsScrollLocked ] = useState( false );

const toggleLock = () => {
setIsScrollLocked( ( locked ) => ! locked ) );
};

return (
<div>
<Button variant="secondary" onClick={ toggleLock }>
Toggle scroll lock
</Button>
{ isScrollLocked && <ScrollLock /> }
<p>
Scroll locked:
<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
</p>
</div>
);
};
```

vanilla_proxy(initialObject = {}) X-Ref

No description

vanilla_getVersion(proxyObject) X-Ref

No description

vanilla_subscribe(proxyObject, callback, notifyInSync) X-Ref

No description

vanilla_snapshot(proxyObject) X-Ref

No description

vanilla_ref(obj) X-Ref

No description

useSnapshot(proxyObject, options) X-Ref

No description

subscribeKey(proxyObject, key, callback, notifyInSync) X-Ref

No description

watch(callback, options) X-Ref

No description

devtools(proxyObject, options) X-Ref

No description

derive(derivedFns, options) X-Ref

No description

underive(proxyObject, options) X-Ref

No description

addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject = proxyObject) X-Ref

No description

proxyWithComputed(initialObject, computedFns) X-Ref

No description

proxyWithHistory(initialValue, skipSubscribe = false) X-Ref

No description

proxySet(initialValues) X-Ref

No description

proxyMap(entries) X-Ref

No description

useSlot(name) X-Ref

Internal dependencies

Fill({name,children}) X-Ref

Internal dependencies

isFunction(maybeFunc) X-Ref

Whether the argument is a function.

return: True if the argument is a function, false otherwise.
param: maybeFunc The argument to check.

Class: SlotComponent - X-Ref

rng() X-Ref

No description

unsafeStringify(arr, offset = 0) X-Ref

No description

stringify_stringify(arr, offset = 0) X-Ref

No description

v4(options, buf, offset) X-Ref

No description

StyleProvider(props) X-Ref

No description

fill_useForceUpdate() X-Ref

Internal dependencies

fill_Fill(props) X-Ref

No description

slot_Slot(props, forwardedRef) X-Ref

Internal dependencies

createSlotRegistry() X-Ref

Internal dependencies

SlotFillProvider({children}) X-Ref

No description

provider_createSlotRegistry() X-Ref

Internal dependencies

registerSlot(name, slot) X-Ref

No description

registerFill(name, instance) X-Ref

No description

unregisterSlot(name, instance) X-Ref

No description

unregisterFill(name, instance) X-Ref

No description

getSlot(name) X-Ref

No description

getFills(name, slotInstance) X-Ref

No description

forceUpdateSlot(name) X-Ref

No description

triggerListeners() X-Ref

No description

subscribe(listener) X-Ref

No description

provider_SlotFillProvider({children}) X-Ref

No description

slot_fill_Fill(props) X-Ref

No description

UnforwardedSlot(props, ref) X-Ref

No description

Provider({children,passthrough = false}) X-Ref

No description

createSlotFill(key) X-Ref

No description

overlayMiddlewares() X-Ref

External dependencies

PopoverSlot({name = SLOT_NAME}, ref) X-Ref

`Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.

```jsx
import { Button, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyPopover = () => {
const [ isVisible, setIsVisible ] = useState( false );
const toggleVisible = () => {
setIsVisible( ( state ) => ! state );
};

return (
<Button variant="secondary" onClick={ toggleVisible }>
Toggle Popover!
{ isVisible && <Popover>Popover is toggled!</Popover> }
</Button>
);
};
```

getAutoCompleterUI(autocompleter) X-Ref

No description

AutocompleterUI({filterValue,instanceId,listBoxId,className,selectedIndex,onChangeOptions,onSelect,onReset,reset,contentRef}) X-Ref

No description

announce(options) X-Ref

No description

useOnClickOutside(ref, handler) X-Ref

No description

useAutocomplete({record,onChange,onReplace,completers,contentRef}) X-Ref

No description

insertCompletion(replacement) X-Ref

No description

select(option) X-Ref

No description

reset() X-Ref

No description

onChangeOptions(options) X-Ref

Load options for an autocompleter.

param: {Array} options

handleKeyDown(event) X-Ref

No description

useLastDifferentValue(value) X-Ref

No description

useAutocompleteProps(options) X-Ref

No description

_onKeyDown(event) X-Ref

No description

Autocomplete({children,isSelected,...options}) X-Ref

No description

useBaseControlProps(props) X-Ref

Generate props for the `BaseControl` and the inner control itself.

Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.

param: props

border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useBorderBoxControlLinkedButton(props) X-Ref

No description

useBorderBoxControlVisualizer(props) X-Ref

No description

nodeGroup() X-Ref

No description

toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

createRadioStore(_a = {}) X-Ref

No description

useRadioStoreProps(store, update, props) X-Ref

No description

useRadioStore(props = {}) X-Ref

No description

useComputeControlledOrUncontrolledValue(valueProp) X-Ref

Used to determine, via an internal heuristics, whether an `undefined` value
received for the `value` prop should be interpreted as the component being
used in uncontrolled mode, or as an "empty" value for controlled mode.

param: valueProp The received `value`

UnforwardedToggleGroupControlAsRadioGroup({children,isAdaptiveWidth,label,onChange: onChangeProp,size,value: valueProp,id: idProp,...otherProps}, forwardedRef) X-Ref

No description

useControlledValue({defaultValue,onChange,value: valueProp}) X-Ref

Simplified and improved implementation of useControlledState.

return: The controlled value and the value setter.
param: props
param: props.defaultValue
param: props.value
param: props.onChange

UnforwardedToggleGroupControlAsButtonGroup({children,isAdaptiveWidth,label,onChange,size,value: valueProp,id: idProp,...otherProps}, forwardedRef) X-Ref

No description

UnconnectedToggleGroupControl(props, forwardedRef) X-Ref

No description

getIsChecked(value, storeValue) X-Ref

No description

isNativeRadio(tagName, type) X-Ref

No description

toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

ToggleGroupControlOptionBase(props, forwardedRef) X-Ref

No description

UnforwardedToggleGroupControlOptionIcon(props, ref) X-Ref

No description

UnconnectedBorderControlStylePicker({onChange,...restProps}, forwardedRef) X-Ref

No description

UnforwardedColorIndicator(props, forwardedRef) X-Ref

Internal dependencies

closeIfFocusOutside() X-Ref

Closes the popover when focus leaves it unless the toggle was pressed or
focus has moved to a separate dialog. The former is to let the toggle
handle closing the popover and the latter is to preserve presence in
case a dialog has opened, allowing focus to return when it's dismissed.

close() X-Ref

No description

UnconnectedInputControlSuffixWrapper(props, forwardedRef) X-Ref

Internal dependencies

icon_Icon({icon,size = 24,...props}, ref) X-Ref

Return an SVG icon.

return: {JSX.Element}  Icon component
param: {IconProps}                                 props icon is the SVG component to render
param: {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.

select_control_useUniqueId(idProp) X-Ref

No description

UnforwardedSelectControl(props, ref) X-Ref

No description

use_controlled_state_useControlledState(currentState, options = defaultOptions) X-Ref

Custom hooks for "controlled" components to track and consolidate internal
state and incoming values. This is useful for components that render
`input`, `textarea`, or `select` HTML elements.

https://reactjs.org/docs/forms.html#controlled-components

At first, a component using useControlledState receives an initial prop
value, which is used as initial internal state.

This internal state can be maintained and updated without
relying on new incoming prop values.

Unlike the basic useState hook, useControlledState's state can
be updated if a new incoming prop value is changed.

return: {[T | "", (nextState: T) => void]} The controlled value and the value setter.
param: {T | undefined} currentState The current value.
param: {Options<T>} [options=defaultOptions] Additional options for the hook.

floatClamp(value, min, max) X-Ref

A float supported clamp function for a specific value.

return: A (float) number
param: value The value to clamp.
param: min The minimum value.
param: max The maximum value.

useControlledRangeValue(settings) X-Ref

Hook to store a clamped value, derived from props.

return: The controlled value and the value setter.
param: settings

range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

input_range_InputRange(props, ref) X-Ref

Internal dependencies

RangeMark(props) X-Ref

Internal dependencies

RangeRail(props) X-Ref

Internal dependencies

Marks(props) X-Ref

No description

useMarks({marks,min = 0,max = 100,step = 1,value = 0}) X-Ref

No description

SimpleTooltip(props) X-Ref

Internal dependencies

useTooltipPosition({inputRef,tooltipPosition}) X-Ref

No description

UnforwardedRangeControl(props, forwardedRef) X-Ref

No description

dist_u() X-Ref

No description

isLegacyProps(props) X-Ref

Internal dependencies

getColorFromLegacyProps(color) X-Ref

No description

use_deprecated_props_useDeprecatedProps(props) X-Ref

No description

UnforwardedOptionAsButton(props, forwardedRef) X-Ref

No description

UnforwardedOptionAsOption(props, forwardedRef) X-Ref

No description

Option({className,isSelected,selectedIconProps = {},tooltipText,...additionalProps}) X-Ref

No description

OptionGroup({className,options,...additionalProps}) X-Ref

Internal dependencies

DropdownLinkAction({buttonProps,className,dropdownProps,linkText}) X-Ref

Internal dependencies

ButtonAction({className,children,...additionalProps}) X-Ref

No description

ListboxCircularOptionPicker(props) X-Ref

`CircularOptionPicker` is a component that displays a set of options as circular buttons.

```jsx
import { CircularOptionPicker } from '../circular-option-picker';
import { useState } from '@wordpress/element';

const Example = () => {
const [ currentColor, setCurrentColor ] = useState();
const colors = [
{ color: '#f00', name: 'Red' },
{ color: '#0f0', name: 'Green' },
{ color: '#00f', name: 'Blue' },
];
const colorOptions = (
<>
{ colors.map( ( { color, name }, index ) => {
return (
<CircularOptionPicker.Option
key={ `${ color }-${ index }` }
tooltipText={ name }
style={ { backgroundColor: color, color } }
isSelected={ index === currentColor }
onClick={ () => setCurrentColor( index ) }
aria-label={ name }
/>
);
} ) }
</>
);
return (
<CircularOptionPicker
options={ colorOptions }
actions={
<CircularOptionPicker.ButtonAction
onClick={ () => setCurrentColor( undefined ) }
>
{ 'Clear' }
</CircularOptionPicker.ButtonAction>
}
/>
);
};
```

ButtonsCircularOptionPicker(props) X-Ref

No description

CircularOptionPicker(props) X-Ref

No description

useVStack(props) X-Ref

No description

UnconnectedVStack(props, forwardedRef) X-Ref

No description

UnconnectedTruncate(props, forwardedRef) X-Ref

No description

useHeading(props) X-Ref

No description

UnconnectedHeading(props, forwardedRef) X-Ref

No description

color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnconnectedDropdownContentWrapper(props, forwardedRef) X-Ref

No description

SinglePalette({className,clearColor,colors,onChange,value,...additionalProps}) X-Ref

No description

MultiplePalettes({className,clearColor,colors,onChange,value,headingLevel}) X-Ref

No description

CustomColorPickerDropdown({isRenderedInSidebar,popoverProps: receivedPopoverProps,...props}) X-Ref

No description

UnforwardedColorPalette(props, forwardedRef) X-Ref

No description

border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) X-Ref

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'

return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value
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.

hasUnits(units) X-Ref

Checks if units are defined.

return: Whether the list actually contains any units.
param: units List of units.

parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) X-Ref

Parses a quantity and unit from a raw string value, given a list of allowed
units and otherwise falling back to the default unit.

return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value
param: rawValue The raw value as a string (may or may not contain the unit)
param: allowedUnits Units to derive from.

getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) X-Ref

Parses quantity and unit from a raw value. Validates parsed value, using fallback
value if invalid.

return: The extracted quantity and unit. The quantity can be `undefined` in case 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.

getAccessibleLabelForUnit(unit) X-Ref

Takes a unit value and finds the matching accessibility label for the
unit abbreviation.

return: a11y label for the unit abbreviation
param: unit Unit value (example: `px`)

filterUnitsWithSettings(allowedUnitValues = [], availableUnits) X-Ref

Filters available units based on values defined a list of allowed unit values.

return: Filtered units.
param: allowedUnitValues Collection of allowed unit value strings.
param: availableUnits Collection of available unit objects.

getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) X-Ref

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.

return: A collection of units containing the unit for the current value.
param: rawValue Selected value to parse.
param: legacyUnit Legacy unit value, if rawValue needs it appended.
param: units List of available units.

useBorderControlDropdown(props) X-Ref

No description

UnitSelectControl({className,isUnitSelectTabbable: isTabbable = true,onChange,size = 'default',unit = 'px',units = CSS_UNITS,...props}, ref) X-Ref

No description

UnforwardedUnitControl(unitControlProps, forwardedRef) X-Ref

No description

useBorderControl(props) X-Ref

No description

utils_getAlignmentProps(alignment) X-Ref

No description

useGrid(props) X-Ref

No description

UnconnectedGrid(props, forwardedRef) X-Ref

No description

useBorderBoxControlSplitControls(props) X-Ref

No description

parseCSSUnitValue(toParse) X-Ref

Parses a number and unit from a value.

return: The extracted number and unit.
param: toParse Value to parse

createCSSUnitValue(value, unit) X-Ref

Combines a value and a unit into a unit value.

return: The unit value.
param: value
param: unit

mode(values) X-Ref

Finds the mode value out of the array passed favouring the first value
as a tiebreaker.

return: The mode value.
param: values Values to determine the mode from.

useBorderBoxControl(props) X-Ref

No description

box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

BoxControlIcon({size = 24,side = 'all',sides,...props}) X-Ref

No description

box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

utils_mode(arr) X-Ref

Gets an items with the most occurrence within an array
https://stackoverflow.com/a/20762713

return: The item with the most occurrences.
param: arr Array of items to check.

getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) X-Ref

Gets the 'all' input value and unit from values data.

return: A value + unit for the 'all' input.
param: values Box values.
param: selectedUnits Box units.
param: availableSides Available box sides to evaluate.

getAllUnitFallback(selectedUnits) X-Ref

Determine the most common unit selection to use as a fallback option.

return: Most common unit selection.
param: selectedUnits Current unit selections for individual sides.

isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) X-Ref

Checks to determine if values are mixed.

return: Whether values are mixed.
param: values Box values.
param: selectedUnits Box units.
param: sides Available box sides to evaluate.

isValuesDefined(values) X-Ref

Checks to determine if values are defined.

return: Whether values are mixed.
param: values Box values.

getInitialSide(isLinked, splitOnAxis) X-Ref

Get initial selected side, factoring in whether the sides are linked,
and whether the vertical / horizontal directions are grouped via splitOnAxis.

return: The initial side.
param: isLinked Whether the box control's fields are linked.
param: splitOnAxis Whether splitting by horizontal or vertical axis.

normalizeSides(sides) X-Ref

Normalizes provided sides configuration to an array containing only top,
right, bottom and left. This essentially just maps `horizontal` or `vertical`
to their appropriate sides to facilitate correctly determining value for
all input control.

return: Normalized sides configuration.
param: sides Available sides for box control.

applyValueToSides(currentValues, newValue, sides) X-Ref

Applies a value to an object representing top, right, bottom and left sides
while taking into account any custom side configuration.

return: Object containing the updated values for each side.
param: currentValues The current values for each side.
param: newValue The value to apply to the sides object.
param: sides Array defining valid sides.

AllInputControl({__next40pxDefaultSize,onChange = all_input_control_noop,onFocus = all_input_control_noop,values,sides,selectedUnits,setSelectedUnits,...props}) X-Ref

No description

BoxInputControls({__next40pxDefaultSize,onChange = input_controls_noop,onFocus = input_controls_noop,values,selectedUnits,setSelectedUnits,sides,...props}) X-Ref

No description

AxialInputControls({__next40pxDefaultSize,onChange,onFocus,values,selectedUnits,setSelectedUnits,sides,...props}) X-Ref

No description

LinkedButton({isLinked,...props}) X-Ref

Internal dependencies

box_control_useUniqueId(idProp) X-Ref

No description

BoxControl({__next40pxDefaultSize = false,id: idProp,inputProps = defaultInputProps,onChange = box_control_noop,label = (0,external_wp_i18n_namespaceObject.__) X-Ref

BoxControl components let users set values for Top, Right, Bottom, and Left.
This can be used as an input control for values like `padding` or `margin`.

```jsx
import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
const [ values, setValues ] = useState( {
top: '50px',
left: '10%',
right: '10%',
bottom: '50px',
} );

return (
<BoxControl
values={ values }
onChange={ ( nextValues ) => setValues( nextValues ) }
/>
);
};
```

UnforwardedButtonGroup(props, ref) X-Ref

Internal dependencies

elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

getBoxShadow(value) X-Ref

No description

useElevation(props) X-Ref

No description

UnconnectedElevation(props, forwardedRef) X-Ref

No description

card_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

getBorders({borderBottom,borderLeft,borderRight,borderTop}) X-Ref

No description

useSurface(props) X-Ref

No description

hook_useDeprecatedProps({elevation,isElevated,...otherProps}) X-Ref

No description

useCard(props) X-Ref

No description

UnconnectedCard(props, forwardedRef) X-Ref

No description

scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useScrollable(props) X-Ref

No description

UnconnectedScrollable(props, forwardedRef) X-Ref

No description

useCardBody(props) X-Ref

No description

UnconnectedCardBody(props, forwardedRef) X-Ref

No description

divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnconnectedDivider(props, forwardedRef) X-Ref

No description

useCardDivider(props) X-Ref

No description

UnconnectedCardDivider(props, forwardedRef) X-Ref

No description

useCardFooter(props) X-Ref

No description

UnconnectedCardFooter(props, forwardedRef) X-Ref

No description

useCardHeader(props) X-Ref

No description

UnconnectedCardHeader(props, forwardedRef) X-Ref

No description

useCardMedia(props) X-Ref

No description

UnconnectedCardMedia(props, forwardedRef) X-Ref

No description

CheckboxControl(props) X-Ref

Checkboxes allow the user to select one or more items from a set.

```jsx
import { CheckboxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyCheckboxControl = () => {
const [ isChecked, setChecked ] = useState( true );
return (
<CheckboxControl
label="Is author"
help="Is the user a author or not?"
checked={ isChecked }
onChange={ setChecked }
/>
);
};
```

ClipboardButton({className,children,onCopy,onFinishCopy,text,...buttonProps}) X-Ref

Internal dependencies

item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useItemGroup(props) X-Ref

Internal dependencies

UnconnectedItemGroup(props, forwardedRef) X-Ref

No description

clampPercent(value) X-Ref

Clamps a number between 0 and 100.

return: Value clamped between 0 and 100.
param: value Value to clamp.

isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) X-Ref

Check if a control point is overlapping with another.

return: True if the point is overlapping.
param: value        Array of control points.
param: initialIndex Index of the position to test.
param: newPosition  New position of the control point.
param: minDistance  Distance considered to be overlapping.

addControlPoint(points, position, color) X-Ref

Adds a control point from an array and returns the new array.

return: New array of control points.
param: points Array of control points.
param: position Position to insert the new point.
param: color Color to update the control point at index.

removeControlPoint(points, index) X-Ref

Removes a control point from an array and returns the new array.

return: New array of control points.
param: points Array of control points.
param: index Index to remove.

updateControlPoint(points, index, newPoint) X-Ref

Updates a control point from an array and returns the new array.

return: New array of control points.
param: points Array of control points.
param: index Index to update.
param: newPoint New control point to replace the index.

updateControlPointPosition(points, index, newPosition) X-Ref

Updates the position of a control point from an array and returns the new array.

return: New array of control points.
param: points Array of control points.
param: index Index to update.
param: newPosition Position to move the control point at index.

updateControlPointColor(points, index, newColor) X-Ref

updateControlPointColorByPosition(points, position, newColor) X-Ref

Updates the position of a control point from an array and returns the new array.

return: New array of control points.
param: points Array of control points.
param: position Position of the color stop.
param: newColor Color to update the control point at index.

getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) X-Ref

Gets the horizontal coordinate when dragging a control point with the mouse.

return: Whole number percentage from the left.
param: mouseXcoordinate Horizontal coordinate of the mouse position.
param: containerElement Container for the gradient picker.

ControlPointButton({isOpen,position,color,...additionalProps}) X-Ref

No description

GradientColorPickerDropdown({isRenderedInSidebar,className,...props}) X-Ref

No description

ControlPoints({disableRemove,disableAlpha,gradientPickerDomRef,ignoreMarkerPosition,value: controlPoints,onChange,onStartControlPointChange,onStopControlPointChange,__experimentalIsRenderedInSidebar}) X-Ref

No description

InsertPoint({value: controlPoints,onChange,onOpenInserter,onCloseInserter,insertPosition,disableAlpha,__experimentalIsRenderedInSidebar}) X-Ref

No description

CustomGradientBar({background,hasGradient,value: controlPoints,onChange,disableInserter = false,disableAlpha = false,__experimentalIsRenderedInSidebar = false}) X-Ref

No description

serializeGradientColor({type,value}) X-Ref

External dependencies

serializeGradientPosition(position) X-Ref

No description

serializeGradientColorStop({type,value,length}) X-Ref

No description

serializeGradientOrientation(orientation) X-Ref

No description

serializeGradient({type,orientation,colorStops}) X-Ref

No description

getLinearGradientRepresentation(gradientAST) X-Ref

No description

hasUnsupportedLength(item) X-Ref

No description

getGradientAstWithDefault(value) X-Ref

No description

getGradientAstWithControlPoints(gradientAST, newControlPoints) X-Ref

No description

getStopCssColor(colorStop) X-Ref

No description

custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

CustomGradientPicker({value,onChange,__experimentalIsRenderedInSidebar = false}) X-Ref

CustomGradientPicker is a React component that renders a UI for specifying
linear or radial gradients. Radial gradients are displayed in the picker as
a slice of the gradient from the center to the outside.

```jsx
import { CustomGradientPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyCustomGradientPicker = () => {
const [ gradient, setGradient ] = useState();

return (
<CustomGradientPicker
value={ gradient }
onChange={ setGradient }
/>
);
};
```

SingleOrigin({className,clearGradient,gradients,onChange,value,...additionalProps}) X-Ref

No description

MultipleOrigin({className,clearGradient,gradients,onChange,value,headingLevel}) X-Ref

No description

gradient_picker_Component(props) X-Ref

No description

GradientPicker({className,gradients = [],onChange,value,clearable = true,disableCustomGradients = false,__experimentalIsRenderedInSidebar,headingLevel = 2,...additionalProps}) X-Ref

GradientPicker is a React component that renders a color gradient picker to
define a multi step gradient. There's either a _linear_ or a _radial_ type
available.

```jsx
import { GradientPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const myGradientPicker = () => {
const [ gradient, setGradient ] = useState( null );

return (
<GradientPicker
value={ gradient }
onChange={ ( currentGradient ) => setGradient( currentGradient ) }
gradients={ [
{
name: 'JShine',
gradient:
'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
slug: 'jshine',
},
{
name: 'Moonlit Asteroid',
gradient:
'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
slug: 'moonlit-asteroid',
},
{
name: 'Rastafarie',
gradient:
'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
slug: 'rastafari',
},
] }
/>
);
};
```

cycleValue(value, total, offset) X-Ref

No description

Class: NavigableContainer - X-Ref

UnforwardedNavigableMenu({role = 'menu',orientation = 'vertical',...rest}, ref) X-Ref

Internal dependencies

dropdown_menu_mergeProps(defaultProps = {}, props = {}) X-Ref

No description

dropdown_menu_isFunction(maybeFunc) X-Ref

No description

UnconnectedDropdownMenu(dropdownMenuProps) X-Ref

No description

palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

NameInput({value,onChange,label}) X-Ref

No description

getNameForPosition(elements, slugPrefix) X-Ref

Returns a name for a palette item in the format "Color + id".
To ensure there are no duplicate ids, this function checks all slugs.
It expects slugs to be in the format: slugPrefix + color- + number.
It then sets the id component of the new name based on the incremented id of the highest existing slug id.

return: A unique name for a palette item.
param: elements An array of color palette items.
param: slugPrefix The slug prefix used to match the element slug.

ColorPickerPopover({isGradient,element,onChange,popoverProps: receivedPopoverProps,onClose = () X-Ref

No description

palette_edit_Option({canOnlyChangeValues,element,onChange,isEditing,onStartEditing,onRemove,onStopEditing,popoverProps: receivedPopoverProps,slugPrefix,isGradient}) X-Ref

No description

PaletteEditListView({elements,onChange,editingElement,setEditingElement,canOnlyChangeValues,slugPrefix,isGradient,popoverProps}) X-Ref

No description

PaletteEdit({gradients,colors = EMPTY_ARRAY,onChange,paletteLabel,paletteLabelHeadingLevel = 2,emptyMessage,canOnlyChangeValues,canReset,slugPrefix = '',popoverProps}) X-Ref

Allows editing a palette of colors or gradients.

```jsx
import { PaletteEdit } from '@wordpress/components';
const MyPaletteEdit = () => {
const [ controlledColors, setControlledColors ] = useState( colors );

return (
<PaletteEdit
colors={ controlledColors }
onChange={ ( newColors?: Color[] ) => {
setControlledColors( newColors );
} }
paletteLabel="Here is a label"
/>
);
};
```

UnForwardedTokenInput(props, ref) X-Ref

Internal dependencies

SuggestionsList({selectedIndex,scrollIntoView,match,onHover,onSelect,suggestions = [],displayTransform,instanceId,__experimentalRenderItem}) X-Ref

No description

ComboboxControl(props) X-Ref

`ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of
being able to search for options using a search input.

```jsx
import { ComboboxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const options = [
{
value: 'small',
label: 'Small',
},
{
value: 'normal',
label: 'Normal',
},
{
value: 'large',
label: 'Large',
},
];

function MyComboboxControl() {
const [ fontSize, setFontSize ] = useState();
const [ filteredOptions, setFilteredOptions ] = useState( options );
return (
<ComboboxControl
label="Font Size"
value={ fontSize }
onChange={ setFontSize }
options={ filteredOptions }
onFilterValueChange={ ( inputValue ) =>
setFilteredOptions(
options.filter( ( option ) =>
option.label
.toLowerCase()
.startsWith( inputValue.toLowerCase() )
)
)
}
/>
);
}
```

mapLegacyStatePropsToComponentProps(legacyProps) X-Ref

Internal dependencies

proxyComposite(ProxiedComponent, propMap = {}) X-Ref

No description

useCompositeState(legacyStateOptions = {}) X-Ref

No description

modalize(modalElement) X-Ref

Hides all elements in the body element from screen-readers except
the provided element and elements that should not be hidden from
screen-readers.

The reason we do this is because `aria-modal="true"` currently is bugged
in Safari, and support is spotty in other browsers overall. In the future
we should consider removing these helper functions in favor of
`aria-modal="true"`.

param: modalElement The element that should not be hidden.

elementShouldBeHidden(element) X-Ref

Determines if the passed element should not be hidden from screen readers.

return: Whether the element should not be hidden from screen-readers.
param: element The element that should be checked.

unmodalize() X-Ref

Accessibly reveals the elements hidden by the latest modal.

UnforwardedModal(props, forwardedRef) X-Ref

No description

handleEscapeKeyDown(event) X-Ref

No description

confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

dist_t(t) X-Ref

No description

cbToCb(cb) X-Ref

Accepts a parameter and returns it if it's a function
or a noop function if it's not. This allows us to
accept a callback, but not worry about it if it's not
passed.

return: {Function} a function
param: {Function} cb the callback

downshift_esm_noop() X-Ref

No description

scrollIntoView(node, menuNode) X-Ref

Scroll node into view if necessary

param: {HTMLElement} node the element that should scroll into view
param: {HTMLElement} menuNode the menu element of the component

isOrContainsNode(parent, child, environment) X-Ref

return: {Boolean} whether the parent is the child or the child is in the parent
param: {HTMLElement} parent the parent node
param: {HTMLElement} child the child node
param: {Window} environment The window context where downshift renders.

debounce(fn, time) X-Ref

Simple debounce implementation. Will call the given
function once after the time given has passed since
it was last called.

return: {Function} the debounced function
param: {Function} fn the function to call after the time
param: {Number} time the time to wait

cancel() X-Ref

No description

wrapper() X-Ref

No description

callAllEventHandlers() X-Ref

This is intended to be used to compose event handlers.
They are executed in order until one of them sets
`event.preventDownshiftDefault = true`.

return: {Function} the event handler to add to an element
param: {...Function} fns the event handler functions

handleRefs() X-Ref

No description

generateId() X-Ref

This generates a unique ID for an instance of Downshift

return: {String} the unique ID

resetIdCounter() X-Ref

Resets idCounter to 0. Used for SSR.

getA11yStatusMessage(let {isOpen,resultCount,previousResultCount} = _ref2;if (!isOpen) X-Ref

Default implementation for status message. Only added when menu is open.
Will specify if there are results in the list, and if so, how many,
and what keys are relevant.

return: {String} the a11y status message
param: {Object} param the downshift state and other relevant properties

unwrapArray(arg, defaultValue) X-Ref

Takes an argument and if it's an array, returns the first item in the array
otherwise returns the argument

return: {*} the arg or it's first item
param: {*} arg the maybe-array
param: {*} defaultValue the value if arg is falsey not defined

isDOMElement(element) X-Ref

return: {Boolean} whether it's a DOM element
param: {Object} element (P)react element

getElementProps(element) X-Ref

return: {Object} the props
param: {Object} element (P)react element

requiredProp(fnName, propName) X-Ref

Throws a helpful error message for required properties. Useful
to be used as a default in destructuring or object params.

param: {String} fnName the function name
param: {String} propName the prop name

pickState(state) X-Ref

return: {Object} state that is relevant to downshift
param: {Object} state the state object

getState(state, props) X-Ref

This will perform a shallow merge of the given state object
with the state coming from props
(for the controlled component scenario)
This is used in state updater functions so they're referencing
the right state regardless of where it comes from.

param: {Object} state The state of the component/hook.
param: {Object} props The props that may contain controlled values.
returns: {Object} The merged controlled state.

isControlledProp(props, key) X-Ref

This determines whether a prop is a "controlled prop" meaning it is
state which is controlled by the outside of this component rather
than within this component.

return: {Boolean} whether it is a controlled controlled prop
param: {Object} props The props that may contain controlled values.
param: {String} key the key to check

normalizeArrowKey(event) X-Ref

Normalizes the 'key' property of a KeyboardEvent in IE/Edge

return: {String} keyboard key
param: {Object} event a keyboardEvent object

downshift_esm_isPlainObject(obj) X-Ref

Simple check if the value passed is object literal

return: {Boolean} whether it's object literal
param: {*} obj any things

getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) X-Ref

Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
it will wrap to either 0 or itemCount - 1.

param: {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
param: {number} baseIndex The initial position to move from.
param: {number} itemCount The total number of items.
param: {Function} getItemNodeFromIndex Used to check if item is disabled.
param: {boolean} circular Specify if navigation is circular. Default is true.
returns: {number} The new index after the move.

getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) X-Ref

Returns the next index in the list of an item that is not disabled.

param: {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
param: {number} baseIndex The initial position to move from.
param: {number} itemCount The total number of items.
param: {Function} getItemNodeFromIndex Used to check if item is disabled.
param: {boolean} circular Specify if navigation is circular. Default is true.
returns: {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.

targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) X-Ref

Checks if event target is within the downshift elements.

param: {EventTarget} target Target to check.
param: {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
param: {Window} environment The window context where downshift renders.
param: {boolean} checkActiveElement Whether to also check activeElement.
returns: {boolean} Whether or not the target is within downshift elements.

setStatus(status, documentProp) X-Ref

param: {String} status the status message
param: {Object} documentProp document passed by the user.

getStatusDiv(documentProp) X-Ref

Get the status node or create it if it does not already exist.

return: {HTMLElement} the status node.
param: {Object} documentProp document passed by the user.

Class: Downshift - X-Ref

validateGetMenuPropsCalledCorrectly(node, _ref3) X-Ref

No description

validateGetRootPropsCalledCorrectly(element, _ref4) X-Ref

No description

callOnChangeProps(action, state, newState) X-Ref

No description

invokeOnChangeHandler(key, action, state, newState) X-Ref

No description

stateReducer(s, a) X-Ref

Default state reducer that returns the changes.

param: {Object} s state.
param: {Object} a action with changes.
returns: {Object} changes.

getA11ySelectionMessage(selectionParameters) X-Ref

Returns a message to be added to aria-live region when item is selected.

param: {Object} selectionParameters Parameters required to build the message.
returns: {string} The a11y message.

useElementIds(_ref) X-Ref

No description

getItemIndex(index, item, items) X-Ref

No description

itemToString(item) X-Ref

No description

isAcceptedCharacterKey(key) X-Ref

No description

capitalizeString(string) X-Ref

No description

downshift_esm_useLatestRef(val) X-Ref

No description

useEnhancedReducer(reducer, initialState, props) X-Ref

Computes the controlled state using a the previous state, props,
two reducers, one from downshift and an optional one from the user.
Also calls the onChange handlers for state values that have changed.

param: {Function} reducer Reducer function from downshift.
param: {Object} initialState Initial state of the hook.
param: {Object} props The hook props.
returns: {Array} An array with the state and an action dispatcher.

useControlledReducer(const [state, dispatch] = useEnhancedReducer(reducer, initialState, props) X-Ref

Wraps the useEnhancedReducer and applies the controlled prop values before
returning the new state.

param: {Function} reducer Reducer function from downshift.
param: {Object} initialState Initial state of the hook.
param: {Object} props The hook props.
returns: {Array} An array with the state and an action dispatcher.

getDefaultValue(if (defaultStateValues === void 0) X-Ref

No description

getInitialValue(if (defaultStateValues === void 0) X-Ref

No description

getInitialState(const selectedItem = getInitialValue$1(props, 'selectedItem') X-Ref

No description

getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) X-Ref

No description

useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) X-Ref

Reuse the movement tracking of mouse and touch events.

param: {boolean} isOpen Whether the dropdown is open or not.
param: {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
param: {Object} environment Environment where component/hook exists.
param: {Function} handleBlur Handler on blur from mouse or touch.
returns: {Object} Ref containing whether mouseDown or touchMove event is happening

useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) X-Ref

No description

useScrollIntoView(_ref3) X-Ref

No description

downshiftCommonReducer(state, action, stateChangeTypes) X-Ref

No description

getItemIndexByCharacterKey(_a) X-Ref

No description

getA11yStatusMessage(_a) X-Ref

Default implementation for status message. Only added when menu is open.
Will specift if there are results in the list, and if so, how many,
and what keys are relevant.

return: {String} the a11y status message
param: {Object} param the downshift state and other relevant properties

downshiftSelectReducer(state, action) X-Ref

No description

useSelect(userProps) X-Ref

No description

getInitialState(const initialState = getInitialState$2(props) X-Ref

No description

useControlledReducer(reducer, initialState, props) X-Ref

The useCombobox version of useControlledReducer, which also
checks if the controlled prop selectedItem changed between
renders. If so, it will also update inputValue with its
string equivalent. It uses the common useEnhancedReducer to
compute the rest of the state.

param: {Function} reducer Reducer function from downshift.
param: {Object} initialState Initial state of the hook.
param: {Object} props The hook props.
returns: {Array} An array with the state and an action dispatcher.

downshiftUseComboboxReducer(state, action) X-Ref

No description

useCombobox(userProps) X-Ref

No description

getInitialValue(props, propKey) X-Ref

Returns the initial value for a state key in the following order:
1. controlled prop, 2. initial prop, 3. default prop, 4. default
value from Downshift.

param: {Object} props Props passed to the hook.
param: {string} propKey Props key to generate the value for.
returns: {any} The initial value for that prop.

getDefaultValue(props, propKey) X-Ref

Returns the default value for a state key in the following order:
1. controlled prop, 2. default prop, 3. default value from Downshift.

param: {Object} props Props passed to the hook.
param: {string} propKey Props key to generate the value for.
returns: {any} The initial value for that prop.

getInitialState(props) X-Ref

Gets the initial state based on the provided props. It uses initial, default
and controlled props related to state in order to compute the initial value.

param: {Object} props Props passed to the hook.
returns: {Object} The initial state.

isKeyDownOperationPermitted(event) X-Ref

Returns true if dropdown keydown operation is permitted. Should not be
allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
input element with text content that is either highlighted or selection
cursor is not at the starting position.

param: {KeyboardEvent} event The event from keydown.
returns: {boolean} Whether the operation is allowed.

getA11yRemovalMessage(selectionParameters) X-Ref

Returns a message to be added to aria-live region when item is removed.

param: {Object} selectionParameters Parameters required to build the message.
returns: {string} The a11y message.

downshiftMultipleSelectionReducer(state, action) X-Ref

No description

useMultipleSelection(userProps) X-Ref

No description

CustomSelectControl(props) X-Ref

No description

handleOnFocus(e) X-Ref

No description

handleOnBlur(e) X-Ref

No description

getDescribedBy() X-Ref

No description

StableCustomSelectControl(props) X-Ref

No description

toInteger(dirtyNumber) X-Ref

No description

requiredArgs(required, args) X-Ref

No description

toDate(argument) X-Ref

param: {Date|Number} argument - the value to convert
returns: {Date} the parsed date in the local time zone

addDays(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} - the new date with the days added

addMonths(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the months added

getDefaultOptions() X-Ref

No description

startOfWeek(dirtyDate, options) X-Ref

param: {Date|Number} date - the original date
param: {Object} [options] - an object with options.
param: {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
param: {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
returns: {Date} the start of a week

startOfDay(dirtyDate) X-Ref

param: {Date|Number} date - the original date
returns: {Date} the start of a day

addWeeks(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the weeks added

addYears(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of years to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the years added

endOfMonth(dirtyDate) X-Ref

param: {Date|Number} date - the original date
returns: {Date} the end of a month

eachDayOfInterval(dirtyInterval, options) X-Ref

param: {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
param: {Object} [options] - an object with options.
param: {Number} [options.step=1] - the step to increment by. The value should be more than 1.
returns: {Date[]} the array with starts of days from the day of the interval start to the day of the interval end

eachMonthOfInterval(dirtyInterval) X-Ref

param: {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
returns: {Date[]} the array with starts of months from the month of the interval start to the month of the interval end

eachWeekOfInterval(dirtyInterval, options) X-Ref

param: {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
param: {Object} [options] - an object with options.
param: {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
param: {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
returns: {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end

startOfMonth(dirtyDate) X-Ref

param: {Date|Number} date - the original date
returns: {Date} the start of a month

endOfWeek(dirtyDate, options) X-Ref

getDaysInMonth(dirtyDate) X-Ref

param: {Date|Number} date - the given date
returns: {Number} the number of days in a month

isAfter(dirtyDate, dirtyDateToCompare) X-Ref

param: {Date|Number} date - the date that should be after the other one to return true
param: {Date|Number} dateToCompare - the date to compare with
returns: {Boolean} the first date is after the second date

isBefore(dirtyDate, dirtyDateToCompare) X-Ref

param: {Date|Number} date - the date that should be before the other one to return true
param: {Date|Number} dateToCompare - the date to compare with
returns: {Boolean} the first date is before the second date

isEqual(dirtyLeftDate, dirtyRightDate) X-Ref

param: {Date|Number} dateLeft - the first date to compare
param: {Date|Number} dateRight - the second date to compare
returns: {Boolean} the dates are equal

setMonth(dirtyDate, dirtyMonth) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} month - the month of the new date
returns: {Date} the new date with the month set

set(dirtyDate, values) X-Ref

param: {Date|Number} date - the date to be changed
param: {Object} values - an object with options
param: {Number} [values.year] - the number of years to be set
param: {Number} [values.month] - the number of months to be set
param: {Number} [values.date] - the number of days to be set
param: {Number} [values.hours] - the number of hours to be set
param: {Number} [values.minutes] - the number of minutes to be set
param: {Number} [values.seconds] - the number of seconds to be set
param: {Number} [values.milliseconds] - the number of milliseconds to be set
returns: {Date} the new date with options set

setYear(dirtyDate, dirtyYear) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} year - the year of the new date
returns: {Date} the new date with the year set

startOfToday() X-Ref

returns: {Date} the start of today

subMonths(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the months subtracted

subYears(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of years to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the years subtracted

requiredArgs_requiredArgs(required, args) X-Ref

No description

_typeof(obj) X-Ref

No description

toDate_toDate(argument) X-Ref

param: {Date|Number} argument - the value to convert
returns: {Date} the parsed date in the local time zone

startOfDay_startOfDay(dirtyDate) X-Ref

param: {Date|Number} date - the original date
returns: {Date} the start of a day

toInteger_toInteger(dirtyNumber) X-Ref

No description

addMonths_addMonths(dirtyDate, dirtyAmount) X-Ref

subMonths_subMonths(dirtyDate, dirtyAmount) X-Ref

isDate_typeof(obj) X-Ref

No description

isDate(value) X-Ref

param: {*} value - the value to check
returns: {boolean} true if the given value is a date

isValid(dirtyDate) X-Ref

param: {*} date - the date to check
returns: {Boolean} the date is valid

addMilliseconds(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the milliseconds added

subMilliseconds(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the milliseconds subtracted

getUTCDayOfYear(dirtyDate) X-Ref

No description

startOfUTCISOWeek(dirtyDate) X-Ref

No description

getUTCISOWeekYear(dirtyDate) X-Ref

No description

startOfUTCISOWeekYear(dirtyDate) X-Ref

No description

getUTCISOWeek(dirtyDate) X-Ref

No description

defaultOptions_getDefaultOptions() X-Ref

No description

setDefaultOptions(newOptions) X-Ref

No description

startOfUTCWeek(dirtyDate, options) X-Ref

No description

getUTCWeekYear(dirtyDate, options) X-Ref

No description

startOfUTCWeekYear(dirtyDate, options) X-Ref

No description

getUTCWeek(dirtyDate, options) X-Ref

No description

addLeadingZeros(number, targetLength) X-Ref

No description

formatTimezoneShort(offset, dirtyDelimiter) X-Ref

No description

formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) X-Ref

No description

formatTimezone(offset, dirtyDelimiter) X-Ref

No description

getTimezoneOffsetInMilliseconds(date) X-Ref

Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
They usually appear for dates that denote time before the timezones were introduced
(e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
and GMT+01:00:00 after that date)

Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
which would lead to incorrect calculations.

This function returns the timezone offset in milliseconds that takes seconds in account.

isProtectedDayOfYearToken(token) X-Ref

No description

isProtectedWeekYearToken(token) X-Ref

No description

throwProtectedError(token, format, input) X-Ref

No description

buildFormatLongFn(args) X-Ref

No description

buildLocalizeFn(args) X-Ref

No description

buildMatchFn(args) X-Ref

No description

findKey(object, predicate) X-Ref

No description

findIndex(array, predicate) X-Ref

No description

buildMatchPatternFn(args) X-Ref

No description

format(dirtyDate, dirtyFormatStr, options) X-Ref

param: {Date|Number} date - the original date
param: {String} format - the string of tokens
param: {Object} [options] - an object with options.
param: {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
param: {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
param: {Number} [options.firstWeekContainsDate=1] - the day of January, which is
param: {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
param: {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
returns: {String} the formatted date string

cleanEscapedString(input) X-Ref

No description

isSameMonth(dirtyDateLeft, dirtyDateRight) X-Ref

param: {Date|Number} dateLeft - the first date to check
param: {Date|Number} dateRight - the second date to check
returns: {Boolean} the dates are in the same month (and year)

isEqual_isEqual(dirtyLeftDate, dirtyRightDate) X-Ref

param: {Date|Number} dateLeft - the first date to compare
param: {Date|Number} dateRight - the second date to compare
returns: {Boolean} the dates are equal

isSameDay(dirtyDateLeft, dirtyDateRight) X-Ref

param: {Date|Number} dateLeft - the first date to check
param: {Date|Number} dateRight - the second date to check
returns: {Boolean} the dates are in the same day (and year and month)

addDays_addDays(dirtyDate, dirtyAmount) X-Ref

addWeeks_addWeeks(dirtyDate, dirtyAmount) X-Ref

subWeeks(dirtyDate, dirtyAmount) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} amount - the amount of weeks to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
returns: {Date} the new date with the weeks subtracted

startOfWeek_startOfWeek(dirtyDate, options) X-Ref

endOfWeek_endOfWeek(dirtyDate, options) X-Ref

date_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

inputToDate(input) X-Ref

Like date-fn's toDate, but tries to guess the format when a string is
given.

param: input Value to turn into a date.

DatePicker({currentDate,onChange,events = [],isInvalidDate,onMonthPreviewed,startOfWeek: weekStartsOn = 0}) X-Ref

DatePicker is a React component that renders a calendar for date selection.

```jsx
import { DatePicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyDatePicker = () => {
const [ date, setDate ] = useState( new Date() );

return (
<DatePicker
currentDate={ date }
onChange={ ( newDate ) => setDate( newDate ) }
/>
);
};
```

date_Day({day,column,isSelected,isFocusable,isFocusAllowed,isToday,isInvalid,numEvents,onClick,onKeyDown}) X-Ref

No description

getDayLabel(date, isSelected, numEvents) X-Ref

No description

startOfMinute(dirtyDate) X-Ref

param: {Date|Number} date - the original date
returns: {Date} the start of a minute

getDaysInMonth_getDaysInMonth(dirtyDate) X-Ref

param: {Date|Number} date - the given date
returns: {Number} the number of days in a month

setMonth_setMonth(dirtyDate, dirtyMonth) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} month - the month of the new date
returns: {Date} the new date with the month set

set_typeof(obj) X-Ref

No description

set_set(dirtyDate, values) X-Ref

setHours(dirtyDate, dirtyHours) X-Ref

param: {Date|Number} date - the date to be changed
param: {Number} hours - the hours of the new date
returns: {Date} the new date with the hours set

time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

from12hTo24h(hours, isPm) X-Ref

No description

buildPadInputStateReducer(pad) X-Ref

Creates an InputControl reducer used to pad an input so that it is always a
given width. For example, the hours and minutes inputs are padded to 2 so
that '4' appears as '04'.

param: pad How many digits the value should be.

TimePicker({is12Hour,currentTime,onChange}) X-Ref

TimePicker is a React component that renders a clock for time selection.

```jsx
import { TimePicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyTimePicker = () => {
const [ time, setTime ] = useState( new Date() );

return (
<TimePicker
currentTime={ date }
onChange={ ( newTime ) => setTime( newTime ) }
is12Hour
/>
);
};
```

buildAmPmChangeCallback(value) X-Ref

No description

date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnforwardedDateTimePicker({currentDate,is12Hour,isInvalidDate,onMonthPreviewed = date_time_noop,onChange,events,startOfWeek}, ref) X-Ref

No description

DimensionControl(props) X-Ref

`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

```jsx
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

export default function MyCustomDimensionControl() {
const [ paddingSize, setPaddingSize ] = useState( '' );

return (
<DimensionControl
label={ 'Padding' }
icon={ 'desktop' }
onChange={ ( value ) => setPaddingSize( value ) }
value={ paddingSize }
/>
);
}
```

disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

Disabled({className,children,isDisabled = true,...props}) X-Ref

`Disabled` is a component which disables descendant tabbable elements and
prevents pointer interaction.

_Note: this component may not behave as expected in browsers that don't
support the `inert` HTML attribute. We recommend adding the official WICG
polyfill when using this component in your project._

Draggable({children,onDragStart,onDragOver,onDragEnd,appendToOwnerDocument = false,cloneClassname,elementId,transferData,__experimentalTransferDataType: transferDataType = 'text',__experimentalDragComponent: dragComponent}) X-Ref

`Draggable` is a Component that provides a way to set up a cross-browser
(including IE) customizable drag image and the transfer data for the drag
event. It decouples the drag handle and the element to drag: use it by
wrapping the component that will become the drag handle and providing the DOM
ID of the element to drag.

Note that the drag handle needs to declare the `draggable="true"` property
and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event
handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`
takes care of the logic to setup the drag image and the transfer data, but is
not concerned with creating an actual DOM element that is draggable.

```jsx
import { Draggable, Panel, PanelBody } from '@wordpress/components';
import { Icon, more } from '@wordpress/icons';

const MyDraggable = () => (
<div id="draggable-panel">
<Panel header="Draggable panel">
<PanelBody>
<Draggable elementId="draggable-panel" transferData={ {} }>
{ ( { onDraggableStart, onDraggableEnd } ) => (
<div
className="example-drag-handle"
draggable
onDragStart={ onDraggableStart }
onDragEnd={ onDraggableEnd }
>
<Icon icon={ more } />
</div>
) }
</Draggable>
</PanelBody>
</Panel>
</div>
);
```

end(event) X-Ref

Removes the element clone, resets cursor, and removes drag listener.

param: event The non-custom DragEvent.

start(event) X-Ref

This method does a couple of things:

- Clones the current element and spawns clone over original element.
- Adds a fake temporary drag image to avoid browser defaults.
- Sets transfer data.
- Adds dragover listener.

param: event The non-custom DragEvent.

over(e) X-Ref

No description

DropZoneComponent({className,label,onFilesDrop,onHTMLDrop,onDrop,...restProps}) X-Ref

`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

```jsx
import { DropZone } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyDropZone = () => {
const [ hasDropped, setHasDropped ] = useState( false );

return (
<div>
{ hasDropped ? 'Dropped!' : 'Drop something here' }
<DropZone
onFilesDrop={ () => setHasDropped( true ) }
onHTMLDrop={ () => setHasDropped( true ) }
onDrop={ () => setHasDropped( true ) }
/>
</div>
);
}
```

DropZoneProvider({children}) X-Ref

WordPress dependencies

getDefaultColors(palette) X-Ref

Calculate the brightest and darkest values from a color palette.

return: Tuple of the darkest color and brightest color.
param: palette Color palette for the theme.

getGradientFromCSSColors(colors = [], angle = '90deg') X-Ref

Generate a duotone gradient from a list of colors.

return: CSS gradient string for the duotone swatch.
param: colors CSS color strings.
param: angle CSS gradient angle.

getColorStopsFromColors(colors) X-Ref

Convert a color array to an array of color stops.

return: Color stop information.
param: colors CSS colors array

getColorsFromColorStops(colorStops = []) X-Ref

Convert a color stop array to an array colors.

return: CSS colors array.
param: colorStops Color stop information.

DuotoneSwatch({values}) X-Ref

No description

ColorOption({label,value,colors,disableCustomColors,enableAlpha,onChange}) X-Ref

No description

ColorListPicker({colors,labels,value = [],disableCustomColors,enableAlpha,onChange}) X-Ref

No description

CustomDuotoneBar({value,onChange}) X-Ref

No description

DuotonePicker({asButtons,loop,clearable = true,unsetable = true,colorPalette,duotonePalette,disableCustomColors,disableCustomDuotone,value,onChange,'aria-label': ariaLabel,'aria-labelledby': ariaLabelledby,...otherProps}) X-Ref

```jsx
import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
import { useState } from '@wordpress/element';

const DUOTONE_PALETTE = [
{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
];

const COLOR_PALETTE = [
{ color: '#ff4747', name: 'Red', slug: 'red' },
{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
{ color: '#000097', name: 'Blue', slug: 'blue' },
{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
];

const Example = () => {
const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
return (
<>
<DuotonePicker
duotonePalette={ DUOTONE_PALETTE }
colorPalette={ COLOR_PALETTE }
value={ duotone }
onChange={ setDuotone }
/>
<DuotoneSwatch values={ duotone } />
</>
);
};
```

external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnforwardedExternalLink(props, ref) X-Ref

Internal dependencies

getExtension(filename = '') X-Ref

Gets the extension of a file name.

return: The extension of the file name.
param: filename The file name.

isVideoType(filename = '') X-Ref

Checks if a file is a video.

return: Whether the file is a video.
param: filename The file name.

fractionToPercentage(fraction) X-Ref

Transforms a fraction value to a percentage value.

return: A percentage value.
param: fraction The fraction value.

focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

FocalPointPickerControls({__nextHasNoMarginBottom,__next40pxDefaultSize,hasHelpText,onChange = controls_noop,point = {x: 0.5,y: 0.5}}) X-Ref

No description

FocalPointUnitControl(props) X-Ref

No description

FocalPoint({left = '50%',top = '50%',...props}) X-Ref

External dependencies

FocalPointPickerGrid({bounds,...props}) X-Ref

Internal dependencies

media_Media({alt,autoPlay,src,onLoad,mediaRef,muted = true,...props}) X-Ref

Internal dependencies

FocalPointPicker({__nextHasNoMarginBottom,__next40pxDefaultSize = false,autoPlay = true,className,help,label,onChange,onDrag,onDragEnd,onDragStart,resolvePoint,url,value: valueProp = {x: 0.5,y: 0.5},...restProps}) X-Ref

Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.

This component addresses a specific problem: with large background images it is common to see undesirable crops,
especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
focal point is never cropped out, regardless of viewport.

- Example focal point picker value: `{ x: 0.5, y: 0.1 }`
- Corresponding CSS: `background-position: 50% 10%;`

```jsx
import { FocalPointPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
const [ focalPoint, setFocalPoint ] = useState( {
x: 0.5,
y: 0.5,
} );

const url = '/path/to/image';

// Example function to render the CSS styles based on Focal Point Picker value
const style = {
backgroundImage: `url(${ url })`,
backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
};

return (
<>
<FocalPointPicker
url={ url }
value={ focalPoint }
onDragStart={ setFocalPoint }
onDrag={ setFocalPoint }
onChange={ setFocalPoint }
/>
<div style={ style } />
</>
);
};
```

FocusableIframe({iframeRef,...props}) X-Ref

Internal dependencies

isSimpleCssValue(value) X-Ref

Some themes use css vars for their font sizes, so until we
have the way of calculating them don't display them.

return: Whether the value is a simple css value.
param: value The value that is checked.

getCommonSizeUnit(fontSizes) X-Ref

If all of the given font sizes have the same unit (e.g. 'px'), return that
unit. Otherwise return null.

return: The common unit, or null.
param: fontSizes List of font sizes.

font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnforwardedToggleGroupControlOption(props, ref) X-Ref

Internal dependencies

FormFileUpload({accept,children,multiple = false,onChange,onClick,render,...props}) X-Ref

FormFileUpload is a component that allows users to select files from their local device.

```jsx
import { FormFileUpload } from '@wordpress/components';

const MyFormFileUpload = () => (
<FormFileUpload
accept="image/*"
onChange={ ( event ) => console.log( event.currentTarget.files ) }
>
Upload
</FormFileUpload>
);
```

FormToggle(props) X-Ref

FormToggle switches a single setting on or off.

```jsx
import { FormToggle } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyFormToggle = () => {
const [ isChecked, setChecked ] = useState( true );

return (
<FormToggle
checked={ isChecked }
onChange={ () => setChecked( ( state ) => ! state ) }
/>
);
};
```

Token({value,status,title,displayTransform,isBorderless = false,disabled = false,onClickRemove = token_noop,onMouseEnter,onMouseLeave,messages,termPosition,termsCount}) X-Ref

No description

FormTokenField(props) X-Ref

A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.

Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).
Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.

The `value` property is handled in a manner similar to controlled form components.
See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.

focus() X-Ref

No description

hasFocus() X-Ref

No description

onFocusHandler(event) X-Ref

No description

onBlur(event) X-Ref

No description

onKeyDown(event) X-Ref

No description

onKeyPress(event) X-Ref

No description

onContainerTouched(event) X-Ref

No description

onTokenClickRemove(event) X-Ref

No description

onSuggestionHovered(suggestion) X-Ref

No description

onSuggestionSelected(suggestion) X-Ref

No description

onInputChangeHandler(event) X-Ref

No description

handleDeleteKey(_deleteToken) X-Ref

No description

handleLeftArrowKey() X-Ref

No description

handleRightArrowKey() X-Ref

No description

handleUpArrowKey() X-Ref

No description

handleDownArrowKey() X-Ref

No description

handleEscapeKey(event) X-Ref

No description

handleCommaKey() X-Ref

No description

moveInputToIndex(index) X-Ref

No description

moveInputBeforePreviousToken() X-Ref

No description

moveInputAfterNextToken() X-Ref

No description

deleteTokenBeforeInput() X-Ref

No description

deleteTokenAfterInput() X-Ref

No description

addCurrentToken() X-Ref

No description

addNewTokens(tokens) X-Ref

No description

addNewToken(token) X-Ref

No description

deleteToken(token) X-Ref

No description

getTokenValue(token) X-Ref

No description

getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) X-Ref

No description

getSelectedSuggestion() X-Ref

No description

valueContainsToken(token) X-Ref

No description

getIndexOfInput() X-Ref

No description

isInputEmpty() X-Ref

No description

inputHasValidValue() X-Ref

No description

updateSuggestions(resetSelectedSuggestion = true) X-Ref

No description

renderTokensAndInput() X-Ref

No description

renderToken(token, index, tokens) X-Ref

No description

renderInput() X-Ref

No description

PageControl({currentPage,numberOfPages,setCurrentPage}) X-Ref

Internal dependencies

Guide({children,className,contentLabel,finishButtonText = (0,external_wp_i18n_namespaceObject.__) X-Ref

`Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.

```jsx
function MyTutorial() {
const [ isOpen, setIsOpen ] = useState( true );

if ( ! isOpen ) {
return null;
}

return (
<Guide
onFinish={ () => setIsOpen( false ) }
pages={ [
{
content: <p>Welcome to the ACME Store!</p>,
},
{
image: <img src="https://acmestore.com/add-to-cart.png" />,
content: (
<p>
Click <i>Add to Cart</i> to buy a product.
</p>
),
},
] }
/>
);
}
```

GuidePage(props) X-Ref

Internal dependencies

UnforwardedIconButton({label,labelPosition,size,tooltip,...props}, ref) X-Ref

Internal dependencies

useItem(props) X-Ref

No description

UnconnectedItem(props, forwardedRef) X-Ref

No description

UnconnectedInputControlPrefixWrapper(props, forwardedRef) X-Ref

Internal dependencies

KeyboardShortcut({target,callback,shortcut,bindGlobal,eventName}) X-Ref

Internal dependencies

KeyboardShortcuts({children,shortcuts,bindGlobal,eventName}) X-Ref

`KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.

When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.

It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.

```jsx
import { KeyboardShortcuts } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyKeyboardShortcuts = () => {
const [ isAllSelected, setIsAllSelected ] = useState( false );
const selectAll = () => {
setIsAllSelected( true );
};

return (
<div>
<KeyboardShortcuts
shortcuts={ {
'mod+a': selectAll,
} }
/>
[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
</div>
);
};
```

MenuGroup(props) X-Ref

`MenuGroup` wraps a series of related `MenuItem` components into a common
section.

```jsx
import { MenuGroup, MenuItem } from '@wordpress/components';

const MyMenuGroup = () => (
<MenuGroup label="Settings">
<MenuItem>Setting 1</MenuItem>
<MenuItem>Setting 2</MenuItem>
</MenuGroup>
);
```

UnforwardedMenuItem(props, ref) X-Ref

No description

MenuItemsChoice({choices = [],onHover = menu_items_choice_noop,onSelect,value}) X-Ref

`MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.

```jsx
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyMenuItemsChoice = () => {
const [ mode, setMode ] = useState( 'visual' );
const choices = [
{
value: 'visual',
label: 'Visual editor',
},
{
value: 'text',
label: 'Code editor',
},
];

return (
<MenuGroup label="Editor">
<MenuItemsChoice
choices={ choices }
value={ mode }
onSelect={ ( newMode ) => setMode( newMode ) }
/>
</MenuGroup>
);
};
```

UnforwardedTabbableContainer({eventToOffset,...props}, ref) X-Ref

Internal dependencies

navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useNavigationTreeNodes() X-Ref

WordPress dependencies

Navigation({activeItem,activeMenu = ROOT_MENU,children,className,onActivateMenu = navigation_noop}) X-Ref

Render a navigation list with optional groupings and hierarchy.

```jsx
import {
__experimentalNavigation as Navigation,
__experimentalNavigationGroup as NavigationGroup,
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationMenu as NavigationMenu,
} from '@wordpress/components';

const MyNavigation = () => (
<Navigation>
<NavigationMenu title="Home">
<NavigationGroup title="Group 1">
<NavigationItem item="item-1" title="Item 1" />
<NavigationItem item="item-2" title="Item 2" />
</NavigationGroup>
<NavigationGroup title="Group 2">
<NavigationItem
item="item-3"
navigateToMenu="category"
title="Category"
/>
</NavigationGroup>
</NavigationMenu>

<NavigationMenu
backButtonLabel="Home"
menu="category"
parentMenu="root"
title="Category"
>
<NavigationItem badge="1" item="child-1" title="Child 1" />
<NavigationItem item="child-2" title="Child 2" />
</NavigationMenu>
</Navigation>
);
```

UnforwardedNavigationBackButton({backButtonLabel,className,href,onClick,parentMenu}, ref) X-Ref

Internal dependencies

NavigationGroup({children,className,title}) X-Ref

No description

NavigationItemBaseContent(props) X-Ref

Internal dependencies

NavigationItemBase(props) X-Ref

No description

NavigationItem(props) X-Ref

No description

SuffixItem({searchRef,value,onChange,onClose}) X-Ref

No description

UnforwardedSearchControl({__nextHasNoMarginBottom = false,className,onChange,value,label = (0,external_wp_i18n_namespaceObject.__) X-Ref

No description

MenuTitleSearch({debouncedSpeak,onCloseSearch,onSearch,search,title}) X-Ref

No description

NavigationMenuTitle({hasSearch,onSearch,search,title,titleAction}) X-Ref

No description

NavigationSearchNoResultsFound({search}) X-Ref

Internal dependencies

NavigationMenu(props) X-Ref

No description

lexer(str) X-Ref

Tokenize input string.

dist_es2015_parse(str, options) X-Ref

Parse a string for the raw tokens.

dist_es2015_compile(str, options) X-Ref

Compile a string to a template function for the path.

tokensToFunction(tokens, options) X-Ref

Expose a method for transforming tokens into the path function.

dist_es2015_match(str, options) X-Ref

Create path match function from `path-to-regexp` spec.

regexpToFunction(re, keys, options) X-Ref

Create a path match function from `path-to-regexp` output.

escapeString(str) X-Ref

Escape a regular expression string.

flags(options) X-Ref

Get the flags for a regexp from the options.

regexpToRegexp(path, keys) X-Ref

Pull out keys from a regexp.

arrayToRegexp(paths, keys, options) X-Ref

Transform an array into a regexp.

stringToRegexp(path, keys, options) X-Ref

Create a path regexp from string input.

tokensToRegexp(tokens, keys, options) X-Ref

Expose a function for taking tokens and returning a RegExp.

pathToRegexp(path, keys, options) X-Ref

Normalize the given path string, returning a regular expression.

An empty array can be passed in for the keys, which will hold the
placeholder key descriptions. For example, using `/user/:id`, `keys` will
contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.

matchPath(path, pattern) X-Ref

Internal dependencies

patternMatch(path, screens) X-Ref

No description

findParent(path, screens) X-Ref

No description

navigator_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

screensReducer(state = [], action) X-Ref

No description

UnconnectedNavigatorProvider(props, forwardedRef) X-Ref

No description

UnconnectedNavigatorScreen(props, forwardedRef) X-Ref

No description

useNavigator() X-Ref

Retrieves a `navigator` instance.

useNavigatorButton(props) X-Ref

No description

UnconnectedNavigatorButton(props, forwardedRef) X-Ref

No description

useNavigatorBackButton(props) X-Ref

No description

UnconnectedNavigatorBackButton(props, forwardedRef) X-Ref

No description

UnconnectedNavigatorToParentButton(props, forwardedRef) X-Ref

No description

useSpokenMessage(message, politeness) X-Ref

Custom hook which announces the message with the given politeness, if a
valid message is provided.

getDefaultPoliteness(status) X-Ref

No description

getStatusLabel(status) X-Ref

No description

Notice({className,status = 'info',children,spokenMessage = children,onRemove = notice_noop,isDismissible = true,actions = [],politeness = getDefaultPoliteness(status) X-Ref

`Notice` is a component used to communicate feedback to the user.

```jsx
import { Notice } from `@wordpress/components`;

const MyNotice = () => (
<Notice status="error">An unknown error occurred.</Notice>
);
```

NoticeList({notices,onRemove = list_noop,className,children}) X-Ref

`NoticeList` is a component used to render a collection of notices.

```jsx
import { Notice, NoticeList } from `@wordpress/components`;

const MyNoticeList = () => {
const [ notices, setNotices ] = useState( [
{
id: 'second-notice',
content: 'second notice content',
},
{
id: 'fist-notice',
content: 'first notice content',
},
] );

const removeNotice = ( id ) => {
setNotices( notices.filter( ( notice ) => notice.id !== id ) );
};

return <NoticeList notices={ notices } onRemove={ removeNotice } />;
};
```

PanelHeader({label,children}) X-Ref

`PanelHeader` renders the header for the `Panel`.
This is used by the `Panel` component under the hood,
so it does not typically need to be used.

UnforwardedPanel({header,className,children}, ref) X-Ref

Internal dependencies

UnforwardedPanelBody(props, ref) X-Ref

No description

UnforwardedPanelRow({className,children}, ref) X-Ref

WordPress dependencies

Placeholder(props) X-Ref

Renders a placeholder. Normally used by blocks to render their empty state.

```jsx
import { Placeholder } from '@wordpress/components';
import { more } from '@wordpress/icons';

const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
```

buildTermsTree(flatTerms) X-Ref

Returns terms in a tree form.

return: Terms in tree format.
param: flatTerms Array of terms in flat format.

getSelectOptions(tree, level = 0) X-Ref

Internal dependencies

TreeSelect(props) X-Ref

TreeSelect component is used to generate select input fields.

```jsx
import { TreeSelect } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyTreeSelect = () => {
const [ page, setPage ] = useState( 'p21' );

return (
<TreeSelect
label="Parent page"
noOptionLabel="No parent page"
onChange={ ( newPage ) => setPage( newPage ) }
selectedId={ page }
tree={ [
{
name: 'Page 1',
id: 'p1',
children: [
{ name: 'Descend 1 of page 1', id: 'p11' },
{ name: 'Descend 2 of page 1', id: 'p12' },
],
},
{
name: 'Page 2',
id: 'p2',
children: [
{
name: 'Descend 1 of page 2',
id: 'p21',
children: [
{
name: 'Descend 1 of Descend 1 of page 2',
id: 'p211',
},
],
},
],
},
] }
/>
);
}
```

AuthorSelect({__next40pxDefaultSize,label,noOptionLabel,authorList,selectedAuthorId,onChange: onChangeProp}) X-Ref

Internal dependencies

CategorySelect({__next40pxDefaultSize,label,noOptionLabel,categoriesList,selectedCategoryId,onChange: onChangeProp,...props}) X-Ref

WordPress dependencies

isSingleCategorySelection(props) X-Ref

No description

isMultipleCategorySelection(props) X-Ref

No description

QueryControls({__next40pxDefaultSize = false,authorList,selectedAuthorId,numberOfItems,order,orderBy,maxItems = DEFAULT_MAX_ITEMS,minItems = DEFAULT_MIN_ITEMS,onAuthorChange,onNumberOfItemsChange,onOrderChange,onOrderByChange,...props}) X-Ref

Controls to query for posts.

```jsx
const MyQueryControls = () => (
<QueryControls
{ ...{ maxItems, minItems, numberOfItems, order, orderBy } }
onOrderByChange={ ( newOrderBy ) => {
updateQuery( { orderBy: newOrderBy } )
}
onOrderChange={ ( newOrder ) => {
updateQuery( { order: newOrder } )
}
categoriesList={ categories }
selectedCategoryId={ category }
onCategoryChange={ ( newCategory ) => {
updateQuery( { category: newCategory } )
}
onNumberOfItemsChange={ ( newNumberOfItems ) => {
updateQuery( { numberOfItems: newNumberOfItems } )
} }
/>
);
```

UnforwardedRadio({value,children,...props}, ref) X-Ref

Internal dependencies

UnforwardedRadioGroup({label,checked,defaultChecked,disabled,onChange,children,...props}, ref) X-Ref

Internal dependencies

RadioControl(props) X-Ref

Render a user interface to select the user type using radio inputs.

```jsx
import { RadioControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyRadioControl = () => {
const [ option, setOption ] = useState( 'a' );

return (
<RadioControl
label="User type"
help="The type of the current user"
selected={ option }
options={ [
{ label: 'Author', value: 'a' },
{ label: 'Editor', value: 'e' },
] }
onChange={ ( value ) => setOption( value ) }
/>
);
};
```

__() X-Ref

No description

Resizer() X-Ref

No description

__() X-Ref

No description

Resizable(props) X-Ref

No description

useResizeLabel({axis,fadeTimeout = 180,onResize = utils_noop,position = POSITIONS.bottom,showPx = false}) X-Ref

Custom hook that manages resize listener events. It also provides a label
based on current resize width x height values.

return: Properties for hook.
param: props
param: props.axis        Only shows the label corresponding to the axis.
param: props.fadeTimeout Duration (ms) before deactivating the resize label.
param: props.onResize    Callback when a resize occurs. Provides { width, height } callback.
param: props.position    Adjusts label value.
param: props.showPx      Whether to add `PX` to the label.

getSizeLabel({axis,height,moveX = false,moveY = false,position = POSITIONS.bottom,showPx = false,width}) X-Ref

Gets the resize label based on width and height values (as well as recent changes).

return: The rendered label.
param: props
param: props.axis     Only shows the label corresponding to the axis.
param: props.height   Height value.
param: props.moveX    Recent width (x axis) changes.
param: props.moveY    Recent width (y axis) changes.
param: props.position Adjusts label value.
param: props.showPx   Whether to add `PX` to the label.
param: props.width    Width value.

resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

resize_tooltip_label_Label({label,position = POSITIONS.corner,zIndex = 1000,...props}, ref) X-Ref

No description

ResizeTooltip({axis,className,fadeTimeout = 180,isVisible = true,labelRef,onResize = resize_tooltip_noop,position = POSITIONS.bottom,showPx = true,zIndex = 1000,...props}, ref) X-Ref

No description

UnforwardedResizableBox({className,children,showHandle = true,__experimentalShowTooltip: showTooltip = false,__experimentalTooltipProps: tooltipProps = {},...props}, ref) X-Ref

No description

ResponsiveWrapper({naturalWidth,naturalHeight,children,isInline = false}) X-Ref

A wrapper component that maintains its aspect ratio when resized.

```jsx
import { ResponsiveWrapper } from '@wordpress/components';

const MyResponsiveWrapper = () => (
<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
<img
src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
alt="WordPress"
/>
</ResponsiveWrapper>
);
```

sendResize() X-Ref

No description

removeViewportStyles(ruleOrNode) X-Ref

No description

SandBox({html = '',title = '',type,styles = [],scripts = [],onFocus,tabIndex}) X-Ref

This component provides an isolated environment for arbitrary HTML via iframes.

```jsx
import { SandBox } from '@wordpress/components';

const MySandBox = () => (
<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
);
```

isFrameAccessible() X-Ref

No description

trySandBox(forceRerender = false) X-Ref

No description

tryNoForceSandBox() X-Ref

No description

checkMessageForResize(event) X-Ref

No description

snackbar_useSpokenMessage(message, politeness) X-Ref

Custom hook which announces the message with the given politeness, if a
valid message is provided.

param: message Message to announce.
param: politeness Politeness to announce.

UnforwardedSnackbar({className,children,spokenMessage = children,politeness = 'polite',actions = [],onRemove,icon = null,explicitDismiss = false,onDismiss,listRef}, ref) X-Ref

No description

dismissMe(event) X-Ref

No description

onActionClick(event, onClick) X-Ref

No description

SnackbarList({notices,className,children,onRemove}) X-Ref

Renders a list of notices.

```jsx
const MySnackbarListNotice = () => (
<SnackbarList
notices={ notices }
onRemove={ removeNotice }
/>
);
```

spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnforwardedSpinner({className,...props}, forwardedRef) X-Ref

WordPress dependencies

UnconnectedSurface(props, forwardedRef) X-Ref

No description

createTabStore(props = {}) X-Ref

No description

useTabStoreProps(store, update, props) X-Ref

No description

useTabStore(props = {}) X-Ref

No description

UnforwardedTextControl(props, ref) X-Ref

Internal dependencies

UnforwardedTextareaControl(props, ref) X-Ref

Internal dependencies

Tip(props) X-Ref

Internal dependencies

ToggleControl({__nextHasNoMarginBottom,label,checked,help,className,onChange,disabled}) X-Ref

ToggleControl is used to generate a toggle user interface.

```jsx
import { ToggleControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyToggleControl = () => {
const [ value, setValue ] = useState( false );

return (
<ToggleControl
label="Fixed Background"
checked={ value }
onChange={ () => setValue( ( state ) => ! state ) }
/>
);
};
```

onChangeToggle(event) X-Ref

No description

toolbar_item_ToolbarItem({children,as: Component,...props}, ref) X-Ref

Internal dependencies

UnforwardedToolbarButton({children,className,containerClassName,extraProps,isActive,isDisabled,title,...props}, ref) X-Ref

No description

ToolbarGroupCollapsed({controls = [],toggleProps,...props}) X-Ref

No description

isNestedArray(arr) X-Ref

No description

ToolbarGroup({controls = [],children,className,isCollapsed,title,...props}) X-Ref

Renders a collapsible group of controls

The `controls` prop accepts an array of sets. A set is an array of controls.
Controls have the following shape:

```
{
icon: string,
title: string,
subscript: string,
onClick: Function,
isActive: boolean,
isDisabled: boolean
}
```

For convenience it is also possible to pass only an array of controls. It is
then assumed this is the only set.

Either `controls` or `children` is required, otherwise this components
renders nothing.

param: props               Component props.
param: [props.controls]    The controls to render in this toolbar.
param: [props.children]    Any other things to render inside the toolbar besides the controls.
param: [props.className]   Class to set on the container div.
param: [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
param: [props.title]       ARIA label for dropdown menu if is collapsed.

createToolbarStore(props = {}) X-Ref

No description

useToolbarStoreProps(store, update, props) X-Ref

No description

useToolbarStore(props = {}) X-Ref

No description

UnforwardedToolbarContainer({label,...props}, ref) X-Ref

Internal dependencies

UnforwardedToolbar({className,label,variant,...props}, ref) X-Ref

No description

ToolbarDropdownMenu(props, ref) X-Ref

No description

tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

useToolsPanelHeader(props) X-Ref

No description

useToolsPanel(props) X-Ref

No description

useToolsPanelItem(props) X-Ref

No description

RovingTabIndex({children}) X-Ref

Provider for adding roving tab index behaviors to tree grid structures.

getRowFocusables(rowElement) X-Ref

Return focusables in a row element, excluding those from other branches
nested within the row.

return: The array of focusables in the row.
param: rowElement The DOM element representing the row.

UnforwardedTreeGrid({children,onExpandRow = () X-Ref

Renders both a table and tbody element, used to create a tree hierarchy.

UnforwardedTreeGridRow({children,level,positionInSet,setSize,isExpanded,...props}, ref) X-Ref

Internal dependencies

UnforwardedTreeGridItem({children,...props}, ref) X-Ref

Internal dependencies

UnforwardedTreeGridCell({children,withoutGridItem = false,...props}, ref) X-Ref

Internal dependencies

stopPropagation(event) X-Ref

WordPress dependencies

useSlotFills(name) X-Ref

Internal dependencies

z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnconnectedZStack(props, forwardedRef) X-Ref

No description

useNavigateRegions(shortcuts = defaultShortcuts) X-Ref

No description

focusRegion(offset) X-Ref

No description

onClick() X-Ref

No description

withFilters(hookName) X-Ref

Creates a higher-order component which adds filtering capability to the
wrapped component. Filters get applied when the original component is about
to be mounted. When a filter is added or removed that matches the hook name,
the wrapped component re-renders.

return: Higher-order component factory.
param: hookName Hook name exposed to be used by filters.

ensureFilteredComponent() X-Ref

Initializes the FilteredComponent variable once, if not already
assigned. Subsequent calls are effectively a noop.

Class: FilteredComponentRenderer - X-Ref

onHooksUpdated(updatedHookName) X-Ref

When a filter is added or removed for the matching hook name, each
mounted instance should re-render with the new filters having been
applied to the original component.

param: updatedHookName Name of the hook that was updated.

isComponentLike(object) X-Ref

Returns true if the given object is component-like. An object is component-
like if it is an instance of wp.element.Component, or is a function.

return: Whether object is component-like.
param: object Object to test.

Component(props, ref) X-Ref

Override the default edit UI to include notices if supported.

Wrapping the original component with `withNotices` encapsulates the component
with the additional props `noticeOperations` and `noticeUI`.

```jsx
import { withNotices, Button } from '@wordpress/components';

const MyComponentWithNotices = withNotices(
( { noticeOperations, noticeUI } ) => {
const addError = () =>
noticeOperations.createErrorNotice( 'Error message' );
return (
<div>
{ noticeUI }
<Button variant="secondary" onClick={ addError }>
Add error
</Button>
</div>
);
}
);
```

return: Wrapped component.
param: OriginalComponent Original component.

progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

UnforwardedProgressBar(props, ref) X-Ref

Internal dependencies

getChildren(props) X-Ref

No description

createMenuStore(_a = {}) X-Ref

No description

useMenuStoreProps(store, update, props) X-Ref

No description

useMenuStore(props = {}) X-Ref

No description

clearChars() X-Ref

No description

isValidTypeaheadEvent(event) X-Ref

No description

isSelfTargetOrItem(event, items) X-Ref

No description

_346FK57L_getEnabledItems(items) X-Ref

No description

itemTextStartsWith(item, text) X-Ref

No description

getSameInitialItems(items, char, activeId) X-Ref

No description

getInitialFocus(event, dir) X-Ref

No description

hasActiveItem(items, excludeElement) X-Ref

No description

useAriaLabelledBy(_a) X-Ref

No description

getMouseDestination(event) X-Ref

No description

hoveringInside(event) X-Ref

No description

movingToAnotherItem(event) X-Ref

No description

menuHasFocus(baseElement, items, currentTarget) X-Ref

No description

createCheckboxStore(props = {}) X-Ref

No description

useCheckboxStoreProps(store, update, props) X-Ref

No description

useCheckboxStore(props = {}) X-Ref

No description

setMixed(element, mixed) X-Ref

No description

isNativeCheckbox(tagName, type) X-Ref

No description

getPrimitiveValue(value) X-Ref

No description

menu_item_checkbox_getPrimitiveValue(value) X-Ref

No description

getValue(storeValue, value, checked) X-Ref

No description

menu_item_radio_getValue(prevValue, value, checked) X-Ref

No description

dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

theme_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

generateThemeVariables(inputs) X-Ref

No description

validateInputs(inputs) X-Ref

No description

checkContrasts(inputs, outputs) X-Ref

No description

warnContrastIssues(issues) X-Ref

No description

generateAccentDependentColors(accent) X-Ref

No description

generateBackgroundDependentColors(background) X-Ref

No description

getForegroundForColor(color) X-Ref

No description

generateShades(background, foreground) X-Ref

No description

Theme({accent,background,className,...props}) X-Ref

`Theme` allows defining theme variables for components in the `@wordpress/components` package.

Multiple `Theme` components can be nested in order to override specific theme variables.

```jsx
const Example = () => {
return (
<Theme accent="red">
<Button variant="primary">I'm red</Button>
<Theme accent="blue">
<Button variant="primary">I'm blue</Button>
</Theme>
</Theme>
);
};
```

tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

Tabs({selectOnMove = true,initialTabId,orientation = 'horizontal',onSelect,children,selectedTabId}) X-Ref

No description

Functions

Functions that are not part of a class:

classNames() X-Ref

No description

isNonNullObject(value) X-Ref

No description

isSpecial(value) X-Ref

No description

isReactElement(value) X-Ref

No description

emptyTarget(val) X-Ref

No description

cloneUnlessOtherwiseSpecified(value, options) X-Ref

No description

defaultArrayMerge(target, source, options) X-Ref

No description

getMergeFunction(key, options) X-Ref

No description

getEnumerableOwnPropertySymbols(target) X-Ref

No description

getKeys(target) X-Ref

No description

propertyIsOnObject(object, property) X-Ref

No description

propertyIsUnsafe(target, key) X-Ref

No description

mergeObject(target, source, options) X-Ref

No description

deepmerge(target, source, options) X-Ref

No description

scrollIntoView(elem, container, config) X-Ref

No description

getClientPosition(elem) X-Ref

No description

getScroll(w, top) X-Ref

No description

getScrollLeft(w) X-Ref

No description

getScrollTop(w) X-Ref

No description

getOffset(el) X-Ref

No description

_getComputedStyle(elem, name, computedStyle_) X-Ref

No description

_getComputedStyleIE(elem, name) X-Ref

No description

each(arr, fn) X-Ref

No description

isBorderBoxFn(elem) X-Ref

No description

swap(elem, options, callback) X-Ref

No description

getPBMWidth(elem, props, which) X-Ref

No description

isWindow(obj) X-Ref

A crude way of determining if an object is a window

getWH(elem, name, extra) X-Ref

No description

getWHIgnoreDisplay(elem) X-Ref

No description

css(el, name, v) X-Ref

No description

setOffset(elem, offset) X-Ref

No description

y(a) X-Ref

No description

error(msg) X-Ref

No description

getAST() X-Ref

No description

matchListDefinitions() X-Ref

No description

matchDefinition() X-Ref

No description

matchGradient(gradientType, pattern, orientationMatcher) X-Ref

No description

matchCall(pattern, callback) X-Ref

No description

matchLinearOrientation() X-Ref

No description

matchSideOrCorner() X-Ref

No description

matchAngle() X-Ref

No description

matchListRadialOrientations() X-Ref

No description

matchRadialOrientation() X-Ref

No description

matchCircle() X-Ref

No description

matchEllipse() X-Ref

No description

matchExtentKeyword() X-Ref

No description

matchAtPosition() X-Ref

No description

matchPositioning() X-Ref

No description

matchCoordinates() X-Ref

No description

matchListing(matcher) X-Ref

No description

matchColorStop() X-Ref

No description

matchColor() X-Ref

No description

matchLiteralColor() X-Ref

No description

matchHexColor() X-Ref

No description

matchRGBColor() X-Ref

No description

matchRGBAColor() X-Ref

No description

matchNumber() X-Ref

No description

matchDistance() X-Ref

No description

matchPositionKeyword() X-Ref

No description

matchLength() X-Ref

No description

match(type, pattern, captureIndex) X-Ref

No description

scan(regexp) X-Ref

No description

consume(size) X-Ref

No description

__nested_webpack_require_187__(moduleId) X-Ref

No description

defaultSanitize(string) X-Ref

No description

escapeRegExpFn(string) X-Ref

No description

getStatics(component) X-Ref

No description

hoistNonReactStatics(targetComponent, sourceComponent, blacklist) X-Ref

No description

z(a) X-Ref

No description

emptyFunction() X-Ref

No description

emptyFunctionWithReset() X-Ref

No description

shim(props, propName, componentName, location, propFullName, secret) X-Ref

No description

getShim() X-Ref

No description

q(c,a,g) X-Ref

matcher(match) X-Ref

No description

r(a) X-Ref

__webpack_require__(moduleId) X-Ref

No description

noop(..._) X-Ref

No description

shallowEqual(a, b) X-Ref

No description

Y3OOHFCN_applyState(argument, currentValue) X-Ref

No description

isUpdater(argument) X-Ref

No description

isLazyValue(value) X-Ref

No description

isObject(arg) X-Ref

No description

isEmpty(arg) X-Ref

No description

isInteger(arg) X-Ref

No description

Y3OOHFCN_hasOwnProperty(object, prop) X-Ref

No description

chain(...fns) X-Ref

No description

cx(...args) X-Ref

No description

normalizeString(str) X-Ref

No description

omit(object, keys) X-Ref

No description

pick(object, paths) X-Ref

No description

identity(value) X-Ref

No description

beforePaint(cb = noop) X-Ref

No description

afterPaint(cb = noop) X-Ref

No description

invariant(condition, message) X-Ref

No description

getKeys(obj) X-Ref

No description

isFalsyBooleanCallback(booleanOrCallback, ...args) X-Ref

No description

disabledFromProps(props) X-Ref

No description

defaultValue(...values) X-Ref

No description

setRef(ref, value) X-Ref

No description

isValidElementWithRef(element) X-Ref

No description

getRefProperty(element) X-Ref

No description

mergeProps(base, overrides) X-Ref

No description

checkIsBrowser() X-Ref

No description

DLOEKDPY_getDocument(node) X-Ref

No description

getWindow(node) X-Ref

No description

getActiveElement(node, activeDescendant = false) X-Ref

No description

contains(parent, child) X-Ref

No description

isFrame(element) X-Ref

No description

isButton(element) X-Ref

No description

matches(element, selectors) X-Ref

No description

isVisible(element) X-Ref

No description

DLOEKDPY_closest(element, selectors) X-Ref

No description

DLOEKDPY_isTextField(element) X-Ref

No description

getPopupRole(element, fallback) X-Ref

No description

getPopupItemRole(element, fallback) X-Ref

No description

getTextboxSelection(element) X-Ref

No description

scrollIntoViewIfNeeded(element, arg) X-Ref

No description

getScrollingElement(element) X-Ref

No description

isPartiallyHidden(element) X-Ref

No description

setSelectionRange(element, ...args) X-Ref

No description

isTouchDevice() X-Ref

No description

isApple() X-Ref

No description

isSafari() X-Ref

No description

isFirefox() X-Ref

No description

isMac() X-Ref

No description

isPortalEvent(event) X-Ref

No description

isSelfTarget(event) X-Ref

No description

isOpeningInNewTab(event) X-Ref

No description

isDownloading(event) X-Ref

No description

fireEvent(element, type, eventInit) X-Ref

No description

fireBlurEvent(element, eventInit) X-Ref

No description

fireFocusEvent(element, eventInit) X-Ref

No description

fireKeyboardEvent(element, type, eventInit) X-Ref

No description

fireClickEvent(element, eventInit) X-Ref

No description

isFocusEventOutside(event, container) X-Ref

No description

queueBeforeEvent(element, type, callback) X-Ref

No description

addGlobalEventListener(type, listener, options, scope = window) X-Ref

No description

useInitialValue(value) X-Ref

No description

useLazyValue(init) X-Ref

No description

useLiveRef(value) X-Ref

No description

usePreviousValue(value) X-Ref

No description

useEvent(callback) X-Ref

No description

useMergeRefs(...refs) X-Ref

No description

useRefId(ref, deps) X-Ref

No description

useId(defaultId) X-Ref

No description

useDeferredValue(value) X-Ref

No description

useTagName(refOrElement, type) X-Ref

No description

useAttribute(refOrElement, attributeName, defaultValue) X-Ref

No description

useUpdateEffect(effect, deps) X-Ref

No description

useUpdateLayoutEffect(effect, deps) X-Ref

No description

useControlledState(defaultState, state, setState) X-Ref

No description

isSetNextState(arg) X-Ref

No description

defineSetNextState(arg) X-Ref

No description

useForceUpdate() X-Ref

No description

useBooleanEvent(booleanOrCallback) X-Ref

No description

useWrapElement(props, callback, deps = []) X-Ref

No description

usePortalRef(portalProp = false, portalRefProp) X-Ref

No description

useMetadataProps(props, key, value) X-Ref

No description

useIsMouseMoving() X-Ref

No description

hasMouseMovement(event) X-Ref

No description

setMouseMoving(event) X-Ref

No description

resetMouseMoving() X-Ref

No description

isRenderProp(children) X-Ref

No description

forwardRef2(render) X-Ref

No description

memo2(Component, propsAreEqual) X-Ref

No description

createComponent(render) X-Ref

No description

createMemoComponent(render) X-Ref

No description

_3ORBWXWF_createElement(Type, props) X-Ref

No description

createHook(useProps) X-Ref

No description

createStoreContext(providers = [], scopedProviders = []) X-Ref

No description

hasNegativeTabIndex(element) X-Ref

No description

isFocusable(element) X-Ref

No description

isTabbable(element) X-Ref

No description

getAllFocusableIn(container, includeContainer) X-Ref

No description

getAllFocusable(includeBody) X-Ref

No description

getFirstFocusableIn(container, includeContainer) X-Ref

No description

getFirstFocusable(includeBody) X-Ref

No description

getAllTabbableIn(container, includeContainer, fallbackToFocusable) X-Ref

No description

getAllTabbable(fallbackToFocusable) X-Ref

No description

getFirstTabbableIn(container, includeContainer, fallbackToFocusable) X-Ref

No description

getFirstTabbable(fallbackToFocusable) X-Ref

No description

getLastTabbableIn(container, includeContainer, fallbackToFocusable) X-Ref

No description

getLastTabbable(fallbackToFocusable) X-Ref

No description

getNextTabbableIn(container, includeContainer, fallbackToFirst, fallbackToFocusable) X-Ref

No description

getNextTabbable(fallbackToFirst, fallbackToFocusable) X-Ref

No description

getPreviousTabbableIn(container, includeContainer, fallbackToLast, fallbackToFocusable) X-Ref

No description

getPreviousTabbable(fallbackToFirst, fallbackToFocusable) X-Ref

No description

getClosestFocusable(element) X-Ref

No description

hasFocus(element) X-Ref

No description

hasFocusWithin(element) X-Ref

No description

focusIfNeeded(element) X-Ref

No description

disableFocus(element) X-Ref

No description

disableFocusIn(container, includeContainer) X-Ref

No description

restoreFocusIn(container) X-Ref

No description

focusIntoView(element, options) X-Ref

No description

isAlwaysFocusVisible(element) X-Ref

No description

isAlwaysFocusVisibleDelayed(element) X-Ref

No description

getLabels(element) X-Ref

No description

isNativeCheckboxOrRadio(element) X-Ref

No description

isNativeTabbable(tagName) X-Ref

No description

supportsDisabledAttribute(tagName) X-Ref

No description

getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) X-Ref

No description

useDisableEvent(onEvent, disabled) X-Ref

No description

onGlobalMouseDown(event) X-Ref

No description

onGlobalKeyDown(event) X-Ref

No description

isNativeClick(event) X-Ref

No description

flipItems(items, activeId, shouldInsertNullItem = false) X-Ref

No description

findFirstEnabledItem(items, excludeId) X-Ref

No description

getEnabledItem(store, id) X-Ref

No description

groupItemsByRows(items) X-Ref

No description

selectTextField(element, collapseToEnd = false) X-Ref

No description

focusSilently(element) X-Ref

No description

silentlyFocused(element) X-Ref

No description

isItem(store, element, exclude) X-Ref

No description

getInternal(store, key) X-Ref

No description

createStore(initialState, ...stores) X-Ref

No description

setup(store, ...args) X-Ref

No description

init(store, ...args) X-Ref

No description

EAHJFCU4_subscribe(store, ...args) X-Ref

No description

sync(store, ...args) X-Ref

No description

batch(store, ...args) X-Ref

No description

omit2(store, ...args) X-Ref

No description

pick2(store, ...args) X-Ref

No description

mergeStore(...stores) X-Ref

No description

throwOnConflictingProps(props, store) X-Ref

No description

useStoreState(store, keyOrSelector = identity) X-Ref

No description

useStoreProps(store, props, key, setKey) X-Ref

No description

EKQEJRUF_useStore(createStore, props) X-Ref

No description

isEditableElement(element) X-Ref

No description

getNextPageOffset(scrollingElement, pageUp = false) X-Ref

No description

getItemOffset(itemElement, pageUp = false) X-Ref

No description

findNextPageItemId(element, store, next, pageUp = false) X-Ref

No description

targetIsAnotherItem(event, store) X-Ref

No description

useRole(ref, props) X-Ref

No description

requiresAriaSelected(role) X-Ref

No description

supportsAriaSelected(role) X-Ref

No description

createDisclosureStore(props = {}) X-Ref

No description

useDisclosureStoreProps(store, update, props) X-Ref

No description

useDisclosureStore(props = {}) X-Ref

No description

createDialogStore(props = {}) X-Ref

No description

useDialogStoreProps(store, update, props) X-Ref

No description

useDialogStore(props = {}) X-Ref

No description

usePopoverStoreProps(store, update, props) X-Ref

No description

usePopoverStore(props = {}) X-Ref

No description

useHovercardStoreProps(store, update, props) X-Ref

No description

useHovercardStore(props = {}) X-Ref

No description

createPopoverStore(_a = {}) X-Ref

No description

createHovercardStore(props = {}) X-Ref

No description

createTooltipStore(props = {}) X-Ref

No description

useTooltipStoreProps(store, update, props) X-Ref

No description

useTooltipStore(props = {}) X-Ref

No description

getEventPoint(event) X-Ref

No description

isPointInPolygon(point, polygon) X-Ref

No description

getEnterPointPlacement(enterPoint, rect) X-Ref

No description

getElementPolygon(element, enterPoint) X-Ref

No description

MKDDWKFK_isBackdrop(element, ...ids) X-Ref

No description

orchestrate(element, key, setup) X-Ref

No description

setAttribute(element, attr, value) X-Ref

No description

setProperty(element, property, value) X-Ref

No description

assignStyle(element, style) X-Ref

No description

setCSSProperty(element, property, value) X-Ref

No description

getSnapshotPropertyName(id) X-Ref

No description

inSnapshot(id, element) X-Ref

No description

isValidElement(id, element, ignoredElements) X-Ref

No description

_72E5EPFF_walkTreeOutside(id, elements, callback, ancestorCallback) X-Ref

No description

createWalkTreeSnapshot(id, elements) X-Ref

No description

getPropertyName(id = "", ancestor = false) X-Ref

No description

markElement(element, id = "") X-Ref

No description

markAncestor(element, id = "") X-Ref

No description

isElementMarked(element, id) X-Ref

No description

markTreeOutside(id, elements) X-Ref

No description

afterTimeout(timeoutMs, cb) X-Ref

No description

CLE7NTOY_afterPaint(cb) X-Ref

No description

parseCSSTime(...times) X-Ref

No description

isHidden(mounted, hidden, alwaysVisible) X-Ref

No description

DialogBackdrop({store,backdrop,backdropProps,alwaysVisible,hidden}) X-Ref

No description

hideElementFromAccessibilityTree(element) X-Ref

No description

disableAccessibilityTreeOutside(id, elements) X-Ref

No description

supportsInert() X-Ref

No description

disableTree(element, ignoredElements) X-Ref

No description

disableTreeOutside(id, elements) X-Ref

No description

useRootDialog({attribute,contentId,contentElement,enabled}) X-Ref

No description

getPaddingProperty(documentElement) X-Ref

No description

usePreventBodyScroll(contentElement, contentId, enabled) X-Ref

No description

useNestedDialogs(store) X-Ref

No description

usePreviousMouseDownRef(enabled) X-Ref

No description

isInDocument(target) X-Ref

No description

isDisclosure(disclosure, target) X-Ref

No description

isMouseEventOnDialog(event, dialog) X-Ref

No description

useEventOutside({store,type,listener,capture,domReady}) X-Ref

No description

shouldHideOnInteractOutside(hideOnInteractOutside, event) X-Ref

No description

useHideOnInteractOutside(store, hideOnInteractOutside, domReady) X-Ref

No description

prependHiddenDismiss(container, onClick) X-Ref

No description

HeadingLevel({ level, children }) X-Ref

No description

getRootElement(element) X-Ref

No description

getPortalElement(element, portalElement) X-Ref

No description

getRandomId(prefix = "id") X-Ref

No description

queueFocus(element) X-Ref

No description

isAlreadyFocusingAnotherElement(dialog) X-Ref

No description

getElementFromProp(prop, focusable = false) X-Ref

No description

createDialogComponent(Component, useProviderContext = useDialogProviderContext) X-Ref

No description

clamp(start, value, end) X-Ref

No description

floating_ui_utils_evaluate(value, param) X-Ref

No description

floating_ui_utils_getSide(placement) X-Ref

No description

floating_ui_utils_getAlignment(placement) X-Ref

No description

getOppositeAxis(axis) X-Ref

No description

getAxisLength(axis) X-Ref

No description

floating_ui_utils_getSideAxis(placement) X-Ref

No description

getAlignmentAxis(placement) X-Ref

No description

floating_ui_utils_getAlignmentSides(placement, rects, rtl) X-Ref

No description

getExpandedPlacements(placement) X-Ref

No description

floating_ui_utils_getOppositeAlignmentPlacement(placement) X-Ref

No description

getSideList(side, isStart, rtl) X-Ref

No description

getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) X-Ref

No description

getOppositePlacement(placement) X-Ref

No description

expandPaddingObject(padding) X-Ref

No description

floating_ui_utils_getPaddingObject(padding) X-Ref

No description

floating_ui_utils_rectToClientRect(rect) X-Ref

No description

computeCoordsFromPlacement(_ref, placement, rtl) X-Ref

No description

getPlacementList(alignment, autoAlignment, allowedPlacements) X-Ref

No description

getSideOffsets(overflow, rect) X-Ref

No description

isAnySideFullyClipped(overflow) X-Ref

No description

getBoundingRect(rects) X-Ref

No description

getRectsByLine(rects) X-Ref

No description

getBoundingClientRect() X-Ref

No description

floating_ui_utils_clamp(start, value, end) X-Ref

No description

dist_floating_ui_utils_evaluate(value, param) X-Ref

No description

dist_floating_ui_utils_getSide(placement) X-Ref

No description

dist_floating_ui_utils_getAlignment(placement) X-Ref

No description

floating_ui_utils_getOppositeAxis(axis) X-Ref

No description

floating_ui_utils_getAxisLength(axis) X-Ref

No description

dist_floating_ui_utils_getSideAxis(placement) X-Ref

No description

floating_ui_utils_getAlignmentAxis(placement) X-Ref

No description

dist_floating_ui_utils_getAlignmentSides(placement, rects, rtl) X-Ref

No description

floating_ui_utils_getExpandedPlacements(placement) X-Ref

No description

dist_floating_ui_utils_getOppositeAlignmentPlacement(placement) X-Ref

No description

floating_ui_utils_getSideList(side, isStart, rtl) X-Ref

No description

floating_ui_utils_getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) X-Ref

No description

floating_ui_utils_getOppositePlacement(placement) X-Ref

No description

floating_ui_utils_expandPaddingObject(padding) X-Ref

No description

dist_floating_ui_utils_getPaddingObject(padding) X-Ref

No description

dist_floating_ui_utils_rectToClientRect(rect) X-Ref

No description

getNodeName(node) X-Ref

No description

floating_ui_utils_dom_getWindow(node) X-Ref

No description

getDocumentElement(node) X-Ref

No description

isNode(value) X-Ref

No description

isElement(value) X-Ref

No description

isHTMLElement(value) X-Ref

No description

isShadowRoot(value) X-Ref

No description

isOverflowElement(element) X-Ref

No description

isTableElement(element) X-Ref

No description

isContainingBlock(element) X-Ref

No description

getContainingBlock(element) X-Ref

No description

isWebKit() X-Ref

No description

isLastTraversableNode(node) X-Ref

No description

floating_ui_utils_dom_getComputedStyle(element) X-Ref

No description

getNodeScroll(element) X-Ref

No description

getParentNode(node) X-Ref

No description

getNearestOverflowAncestor(node) X-Ref

No description

getOverflowAncestors(node, list, traverseIframes) X-Ref

No description

getCssDimensions(element) X-Ref

No description

unwrapElement(element) X-Ref

No description

getScale(element) X-Ref

No description

getVisualOffsets(element) X-Ref

No description

shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) X-Ref

No description

getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) X-Ref

No description

isTopLayer(floating) X-Ref

No description

convertOffsetParentRelativeRectToViewportRelativeRect(_ref) X-Ref

No description

getClientRects(element) X-Ref

No description

getWindowScrollBarX(element) X-Ref

No description

getDocumentRect(element) X-Ref

No description

getViewportRect(element, strategy) X-Ref

No description

getInnerBoundingClientRect(element, strategy) X-Ref

No description

getClientRectFromClippingAncestor(element, clippingAncestor, strategy) X-Ref

No description

hasFixedPositionAncestor(element, stopNode) X-Ref

No description

getClippingElementAncestors(element, cache) X-Ref

No description

getClippingRect(_ref) X-Ref

No description

getDimensions(element) X-Ref

No description

getRectRelativeToOffsetParent(element, offsetParent, strategy) X-Ref

No description

getTrueOffsetParent(element, polyfill) X-Ref

No description

getOffsetParent(element, polyfill) X-Ref

No description

isRTL(element) X-Ref

No description

observeMove(element, onMove) X-Ref

No description

cleanup() X-Ref

No description

refresh(skip, threshold) X-Ref

No description

handleObserve(entries) X-Ref

No description

autoUpdate(reference, floating, update, options) X-Ref

Automatically updates the position of the floating element when necessary.
Should only be called when the floating element is mounted on the DOM or
visible on the screen.

returns: cleanup function that should be invoked when the floating element is

frameLoop() X-Ref

No description

createDOMRect(x = 0, y = 0, width = 0, height = 0) X-Ref

No description

getDOMRect(anchorRect) X-Ref

No description

getAnchorElement(anchorElement, getAnchorRect) X-Ref

No description

isValidPlacement(flip2) X-Ref

No description

roundByDPR(value) X-Ref

No description

getOffsetMiddleware(arrowElement, props) X-Ref

No description

getFlipMiddleware(props) X-Ref

No description

getShiftMiddleware(props) X-Ref

No description

getSizeMiddleware(props) X-Ref

No description

getArrowMiddleware(arrowElement, props) X-Ref

No description

isMovingOnHovercard(target, card, anchor, nested) X-Ref

No description

useAutoFocusOnHide(_a) X-Ref

No description

Shortcut(props) X-Ref

Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.

```jsx
import { Shortcut } from '@wordpress/components';

const MyShortcut = () => {
return (
<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
);
};
```

isTopBottom(anchorRef) X-Ref

No description

isRef(anchorRef) X-Ref

No description

UnforwardedTooltip(props, ref) X-Ref

No description

is_plain_object_isObject(o) X-Ref

No description

isPlainObject(o) X-Ref

No description

use_update_effect_useUpdateEffect(effect, deps) X-Ref

A `React.useEffect` that will not run on the first render.
Source:
https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts

param: {import('react').EffectCallback} effect
param: {import('react').DependencyList} deps

useContextSystemBridge({value}) X-Ref

Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.

Note: This function will warn if it detects an un-memoized `value`

return: {Record<string, any>} The consolidated value.
param: {Object} props
param: {Record<string, any>} props.value

getNamespace(componentName) X-Ref

Creates a dedicated context namespace HTML attribute for components.
ns is short for "namespace"

return: {Record<string, any>} A props object with the namespaced HTML attribute.
param: {string} componentName The name for the component.

getConnectedNamespace() X-Ref

Creates a dedicated connected context namespace HTML attribute for components.
ns is short for "namespace"

return: {Record<string, any>} A props object with the namespaced HTML attribute.

__extends(d, b) X-Ref

No description

__() X-Ref

No description

__rest(s, e) X-Ref

No description

__decorate(decorators, target, key, desc) X-Ref

No description

__param(paramIndex, decorator) X-Ref

No description

__esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) X-Ref

No description

accept(f) X-Ref

No description

__runInitializers(thisArg, initializers, value) X-Ref

No description

__propKey(x) X-Ref

No description

__setFunctionName(f, name, prefix) X-Ref

No description

__metadata(metadataKey, metadataValue) X-Ref

No description

__awaiter(thisArg, _arguments, P, generator) X-Ref

No description

adopt(value) X-Ref

No description

fulfilled(value) X-Ref

No description

rejected(value) X-Ref

No description

step(result) X-Ref

No description

__generator(thisArg, body) X-Ref

No description

verb(n) X-Ref

No description

step(op) X-Ref

No description

__exportStar(m, o) X-Ref

No description

__values(o) X-Ref

No description

__read(o, n) X-Ref

No description

__spread() X-Ref

No description

__spreadArrays() X-Ref

No description

__spreadArray(to, from, pack) X-Ref

No description

__await(v) X-Ref

No description

__asyncGenerator(thisArg, _arguments, generator) X-Ref

No description

verb(n) X-Ref

No description

resume(n, v) X-Ref

No description

step(r) X-Ref

No description

fulfill(value) X-Ref

No description

reject(value) X-Ref

No description

settle(f, v) X-Ref

No description

__asyncDelegator(o) X-Ref

No description

verb(n, f) X-Ref

No description

__asyncValues(o) X-Ref

No description

verb(n) X-Ref

No description

settle(resolve, reject, d, v) X-Ref

No description

__makeTemplateObject(cooked, raw) X-Ref

No description

__importStar(mod) X-Ref

No description

__importDefault(mod) X-Ref

No description

__classPrivateFieldGet(receiver, state, kind, f) X-Ref

No description

__classPrivateFieldSet(receiver, state, value, kind, f) X-Ref

No description

__classPrivateFieldIn(state, receiver) X-Ref

No description

__addDisposableResource(env, value, async) X-Ref

No description

__disposeResources(env) X-Ref

No description

fail(e) X-Ref

No description

next() X-Ref

No description

localeLowerCase(str, locale) X-Ref

Localized lower case.

lowerCase(str) X-Ref

Lower case as a function.

noCase(input, options) X-Ref

Normalize the string into something other libraries can manipulate easier.

dist_es2015_replace(input, re, value) X-Ref

Replace `re` in the input string with the replacement value.

dotCase(input, options) X-Ref

No description

paramCase(input, options) X-Ref

No description

memize(fn, options) X-Ref

Accepts a function to be memoized, and returns a new memoized function, with
optional options.

return: {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function.
param: {F} fn Function to memoize.
param: {MemizeOptions} [options] Options object.

memoized() X-Ref

No description

getStyledClassName(namespace) X-Ref

Generates the connected component CSS className based on the namespace.

return: The generated CSS className.
param: namespace The name of the connected component.

sheetForTag(tag) X-Ref

No description

createStyleElement(options) X-Ref

No description

StyleSheet(options) X-Ref

No description

hash(value, length) X-Ref

return: {number}
param: {string} value
param: {number} length

trim(value) X-Ref

return: {string}
param: {string} value

Utility_match(value, pattern) X-Ref

return: {string?}
param: {string} value
param: {RegExp} pattern

Utility_replace(value, pattern, replacement) X-Ref

return: {string}
param: {string} value
param: {(string|RegExp)} pattern
param: {string} replacement

indexof(value, search) X-Ref

return: {number}
param: {string} value
param: {string} search

Utility_charat(value, index) X-Ref

return: {number}
param: {string} value
param: {number} index

Utility_substr(value, begin, end) X-Ref

return: {string}
param: {string} value
param: {number} begin
param: {number} end

Utility_strlen(value) X-Ref

return: {number}
param: {string} value

Utility_sizeof(value) X-Ref

return: {number}
param: {any[]} value

Utility_append(value, array) X-Ref

return: {any}
param: {any} value
param: {any[]} array

Utility_combine(array, callback) X-Ref

return: {string}
param: {string[]} array
param: {function} callback

node(value, root, parent, type, props, children, length) X-Ref

param: {string} value
param: {object | null} root
param: {object | null} parent
param: {string} type
param: {string[] | string} props
param: {object[] | string} children
param: {number} length

Tokenizer_copy(root, props) X-Ref

return: {object}
param: {object} root
param: {object} props

Tokenizer_char() X-Ref

return: {number}

prev() X-Ref

return: {number}

next() X-Ref

return: {number}

peek() X-Ref

return: {number}

caret() X-Ref

return: {number}

slice(begin, end) X-Ref

return: {string}
param: {number} begin
param: {number} end

token(type) X-Ref

return: {number}
param: {number} type

alloc(value) X-Ref

return: {any[]}
param: {string} value

dealloc(value) X-Ref

return: {any}
param: {any} value

delimit(type) X-Ref

return: {string}
param: {number} type

Tokenizer_tokenize(value) X-Ref

return: {string[]}
param: {string} value

whitespace(type) X-Ref

return: {string}
param: {number} type

tokenizer(children) X-Ref

return: {string[]}
param: {string[]} children

escaping(index, count) X-Ref

return: {string}
param: {number} index
param: {number} count

delimiter(type) X-Ref

return: {number}
param: {number} type

commenter(type, index) X-Ref

return: {number}
param: {number} type
param: {number} index

identifier(index) X-Ref

No description

Serializer_serialize(children, callback) X-Ref

return: {string}
param: {object[]} children
param: {function} callback

stringify(element, index, children, callback) X-Ref

return: {string}
param: {object} element
param: {number} index
param: {object[]} children
param: {function} callback

middleware(collection) X-Ref

return: {function}
param: {function[]} collection

rulesheet(callback) X-Ref

return: {function}
param: {function} callback

prefixer(element, index, children, callback) X-Ref

param: {object} element
param: {number} index
param: {object[]} children
param: {function} callback

namespace(element) X-Ref

param: {object} element
param: {number} index
param: {object[]} children

compile(value) X-Ref

return: {object[]}
param: {string} value

parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) X-Ref

return: {object}
param: {string} value
param: {object} root
param: {object?} parent
param: {string[]} rule
param: {string[]} rules
param: {string[]} rulesets
param: {number[]} pseudo
param: {number[]} points
param: {string[]} declarations

ruleset(value, root, parent, index, offset, rules, points, type, props, children, length) X-Ref

return: {object}
param: {string} value
param: {object} root
param: {object?} parent
param: {number} index
param: {number} offset
param: {string[]} rules
param: {number[]} points
param: {string} type
param: {string[]} props
param: {string[]} children
param: {number} length

comment(value, root, parent) X-Ref

return: {object}
param: {number} value
param: {object} root
param: {object?} parent

declaration(value, root, parent, length) X-Ref

return: {object}
param: {string} value
param: {object} root
param: {object?} parent
param: {number} length

emotion_cache_browser_esm_prefix(value, length) X-Ref

No description

murmur2(str) X-Ref

No description

memoize(fn) X-Ref

No description

handleInterpolation(mergedProps, registered, interpolation) X-Ref

No description

createStringFromObject(mergedProps, registered, obj) X-Ref

No description

withTheme(Component) X-Ref

No description

emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) X-Ref

No description

insertWithoutScoping(cache, serialized) X-Ref

No description

merge(registered, css, className) X-Ref

No description

useContextSystem(props, namespace) X-Ref

Custom hook that derives registered props from the Context system.
These derived props are then consolidated with incoming component props.

return: {ConnectedProps<P>} The connected props.
param: {P} props Incoming props from the component.
param: {string} namespace The namespace to register and to derive context props from.

contextConnect(Component, namespace) X-Ref

Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
within the Context system under a specified namespace.

return: The connected WordPressComponent
param: Component The component to register into the Context system.
param: namespace The namespace to register the component under.

contextConnectWithoutRef(Component, namespace) X-Ref

"Connects" (or registers) a component within the Context system under a specified namespace.
Does not forward a ref.

return: The connected WordPressComponent
param: Component The component to register into the Context system.
param: namespace The namespace to register the component under.

_contextConnect(Component, namespace, options) X-Ref

No description

getConnectNamespace(Component) X-Ref

Attempts to retrieve the connected namespace from a component.

return: The connected namespaces.
param: Component The component to retrieve a namespace from.

hasConnectNamespace(Component, match) X-Ref

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.

extends_extends() X-Ref

No description

emotion_memoize_esm_memoize(fn) X-Ref

No description

UnconnectedVisuallyHidden(props, forwardedRef) X-Ref

No description

normalize(value) X-Ref

Normalizes and transforms an incoming value to better match the alignment values

return: The parsed value.
param: value An alignment value to parse.

getItemId(prefixId, value) X-Ref

Creates an item ID based on a prefix ID and an alignment value.

return: The item id.
param: prefixId An ID to prefix.
param: value An alignment value.

getItemValue(prefixId, id) X-Ref

Extracts an item value from its ID

return: The item value
param: prefixId An ID prefix to remove
param: id An item ID

getAlignmentIndex(alignment = 'center') X-Ref

Retrieves the alignment index from a value.

return: The index of a matching alignment.
param: alignment Value to check.

emotion_react_browser_esm_css() X-Ref

No description

emotion_react_browser_esm_merge(registered, css, className) X-Ref

No description

reduceMotion(prop = 'transition') X-Ref

Allows users to opt-out of animations via OS-level preferences.

return: {string} Generated CSS code for the reduced style
param: {'transition' | 'animation' | string} [prop='transition'] CSS Property name

_EMOTION_STRINGIFIED_CSS_ERROR__() X-Ref

No description

cell_Cell({id,isActive = false,value,...props}) X-Ref

Internal dependencies

useCollectionStoreProps(store, update, props) X-Ref

No description

useCollectionStore(props = {}) X-Ref

No description

isElementPreceding(a, b) X-Ref

No description

sortBasedOnDOMPosition(items) X-Ref

No description

getCommonParent(items) X-Ref

No description

getPrivateStore(store) X-Ref

No description

createCollectionStore(props = {}) X-Ref

No description

toArray(arg) X-Ref

No description

addItemToArray(array, item, index = -1) X-Ref

No description

flatten2DArray(array) X-Ref

No description

reverseArray(array) X-Ref

No description

IERTEJ3A_findFirstEnabledItem(items, excludeId) X-Ref

No description

getEnabledItems(items, excludeId) X-Ref

No description

getOppositeOrientation(orientation) X-Ref

No description

getItemsInRow(items, rowId) X-Ref

No description

IERTEJ3A_flipItems(items, activeId, shouldInsertNullItem = false) X-Ref

No description

IERTEJ3A_groupItemsByRows(items) X-Ref

No description

getMaxRowLength(array) X-Ref

No description

createEmptyItem(rowId) X-Ref

No description

normalizeRows(rows, activeId, focusShift) X-Ref

No description

verticalizeItems(items) X-Ref

No description

createCompositeStore(props = {}) X-Ref

No description

useCompositeStoreProps(store, update, props) X-Ref

No description

useCompositeStore(props = {}) X-Ref

No description

isGrid(items) X-Ref

No description

isPrintableKey(event) X-Ref

No description

isModifierKey(event) X-Ref

No description

useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) X-Ref

No description

findFirstEnabledItemInTheLastRow(items) X-Ref

No description

useScheduleFocus(store) X-Ref

No description

alignment_matrix_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref

No description

AlignmentMatrixControlIcon({className,disablePointerEvents = true,size = BASE_SIZE,style = {},value = 'center',...props}) X-Ref

No description

AlignmentMatrixControl({className,id,label = (0,external_wp_i18n_namespaceObject.__) X-Ref

AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.

```jsx
import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
const [ alignment, setAlignment ] = useState( 'center center' );

return (
<AlignmentMatrixControl
value={ alignment }
onChange={ setAlignment }
/>
);
};
```

getDefaultOrigin(type) X-Ref

return: Default origin
param: type The animation type

getAnimateClassName(options) X-Ref

return: ClassName that applies the animations
param: options

Animate({type,options = {},children}) X-Ref

Simple interface to introduce animations to components.

```jsx
import { Animate, Notice } from '@wordpress/components';

const MyAnimatedNotice = () => (
<Animate type="slide-in" options={ { origin: 'top' } }>
{ ( { className } ) => (
<Notice className={ className } status="success">
<p>Animation finished.</p>
</Notice>
) }
</Animate>
);
```

useVisualElement(Component, visualState, props, createVisualElement) X-Ref

isRefObject(ref) X-Ref

No description

useMotionRef(visualState, visualElement, externalRef) X-Ref

Creates a ref function that, when called, hydrates the provided
external ref and VisualElement.

isVariantLabel(v) X-Ref

Decides if the supplied variable is variant label

isAnimationControls(v) X-Ref

No description

isControllingVariants(props) X-Ref

No description

isVariantNode(props) X-Ref

No description

getCurrentTreeVariants(props, context) X-Ref

No description

useCreateMotionContext(props) X-Ref

No description

variantLabelsAsDependency(prop) X-Ref

No description

loadFeatures(features) X-Ref

No description

motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) X-Ref

Create a `motion` component.

This function accepts a Component argument, which can be either a string (ie "div"
for `motion.div`), or an actual React component.

Alongside this is a config option which provides a way of rendering the provided
component "offline", or outside the React render cycle.

MotionComponent(props, externalRef) X-Ref

No description

useLayoutId({ layoutId }) X-Ref

No description

createMotionProxy(createConfig) X-Ref

Convert any React component into a `motion` component. The provided component
**must** use `React.forwardRef` to the underlying DOM component you want to animate.

```jsx
const Component = React.forwardRef((props, ref) => {
return <div ref={ref} />
})

const MotionComponent = motion(Component)
```

custom(Component, customMotionComponentConfig = {}) X-Ref

No description

isSVGComponent(Component) X-Ref

No description

addScaleCorrector(correctors) X-Ref

No description

isForcedMotionValue(key, { layout, layoutId }) X-Ref

No description

buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) X-Ref

Build a CSS transform style from individual x/y/scale etc properties.

This outputs with a default order of transforms/scales/rotations, this can be customised by
providing a transformTemplate function.

isString(v) X-Ref

No description

buildHTMLStyles(state, latestValues, options, transformTemplate) X-Ref

No description

copyRawValuesOnly(target, source, props) X-Ref

No description

useInitialMotionValues({ transformTemplate }, visualState, isStatic) X-Ref

No description

useStyle(props, visualState, isStatic) X-Ref

No description

useHTMLProps(props, visualState, isStatic) X-Ref

No description

isValidMotionProp(key) X-Ref

Check whether a prop name is a valid `MotionProp` key.

param: key - Name of the property to check
returns: `true` is key is a valid `MotionProp`.

loadExternalIsValidProp(isValidProp) X-Ref

No description

filterProps(props, isDom, forwardMotionProps) X-Ref

No description

calcOrigin(origin, offset, size) X-Ref

No description

calcSVGTransformOrigin(dimensions, originX, originY) X-Ref

The SVG transform origin defaults are different to CSS and is less intuitive,
so we use the measured dimensions of the SVG to reconcile these.

buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) X-Ref

Build SVG path properties. Uses the path's measured length to convert
our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
and stroke-dasharray attributes.

This function is mutative to reduce per-frame GC.

buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, ...latest }, options, isSVGTag, transformTemplate) X-Ref

Build SVG visual attrbutes, like cx and style.transform

useSVGProps(props, visualState, _isStatic, Component) X-Ref

No description

createUseRender(forwardMotionProps = false) X-Ref

No description

renderHTML(element, { style, vars }, styleProp, projection) X-Ref

No description

renderSVG(element, renderState, _styleProp, projection) X-Ref

No description

scrapeMotionValuesFromProps(props, prevProps) X-Ref

No description

scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) X-Ref

No description

resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) X-Ref

No description

useConstant(init) X-Ref

Creates a constant value over the lifecycle of a component.

Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
you can ensure that initialisers don't execute twice or more.

resolveMotionValue(value) X-Ref

If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself

TODO: Remove and move to library

makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) X-Ref

No description

makeLatestValues(props, context, presenceContext, scrapeMotionValues) X-Ref

No description

File Size:	73708 lines (2391 kb)
Included or required:	0 times
Referenced:	0 times
Includes or requires:	0 files

PHP Cross Reference of WordPress Trunk (Updated Daily)

/wp-includes/js/dist/ -> components.js (summary)

Defines 37 classes

Defines 44 functions