[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Source view] [Print] [Project Stats]
(no description)
File Size: | 73708 lines (2391 kb) |
Included or required: | 0 times |
Referenced: | 0 times |
Includes or requires: | 0 files |
Queue:: (9 methods):
createRenderStep()
createRenderBatcher()
create_config_createDomMotionConfig()
addDomEvent()
extractEventInfo()
addPointerEvent()
createLock()
getGlobalLock()
isDragActive()
Feature:: (1 method):
addHoverEvent()
HoverGesture:: (0 methods):
FocusGesture:: (1 method):
fireSyntheticPointerEvent()
PressGesture:: (2 methods):
initIntersectionObserver()
observeIntersection()
InViewFeature:: (54 methods):
hasViewportOptionChanged()
shallowCompare()
getCurrent()
getVelocity()
resolveVariant()
isWaapiSupportedEasing()
mapEasingToNativeEasing()
animateStyle()
getFinalKeyframe()
binarySubdivide()
cubicBezier()
parseHex()
hueToRgb()
hslaToRgba()
asRGBA()
test()
tokenise()
analyseComplexValue()
parseComplexValue()
createTransformer()
getAnimatableNone()
getMixer()
detectMixerFactory()
createMixers()
interpolate()
fillOffset()
defaultOffset()
convertOffsetToTimes()
defaultEasing()
keyframes_keyframes()
velocityPerSecond()
calcGeneratorVelocity()
findSpring()
approximateRoot()
calcAngularFreq()
isSpringType()
getSpringOptions()
spring()
inertia()
calcGeneratorDuration()
animateValue()
memo()
createAcceleratedAnimation()
createInstantAnimation()
applyDefaultFilter()
animatable_none_getAnimatableNone()
isNone()
getKeyframes()
isTransitionDefined()
getValueTransition()
isWillChangeMotionValue()
addUniqueItem()
removeItem()
moveItem()
SubscriptionManager:: (0 methods):
MotionValue:: (22 methods):
motionValue()
setMotionValue()
setTarget()
setVariants()
setValues()
checkTargetForNewValues()
getOriginFromTransition()
getOrigin()
shouldBlockAnimation()
animateTarget()
animateVariant()
animateChildren()
sortByTreeOrder()
animateVisualElement()
animateList()
createAnimationState()
setAnimateFunction()
animateChanges()
setActive()
checkVariantsDidChange()
createTypeState()
createState()
AnimationFeature:: (0 methods):
ExitAnimationFeature:: (1 method):
distance2D()
PanSession:: (44 methods):
transformPoint()
subtractPoint()
getPanInfo()
startDevicePoint()
lastDevicePoint()
PanSession_getVelocity()
calcLength()
isNear()
calcAxisDelta()
calcBoxDelta()
calcRelativeAxis()
calcRelativeBox()
calcRelativeAxisPosition()
calcRelativePosition()
applyConstraints()
calcRelativeAxisConstraints()
calcRelativeConstraints()
calcViewportAxisConstraints()
calcViewportConstraints()
constraints_calcOrigin()
rebaseAxisConstraints()
resolveDragElastic()
resolveAxisElastic()
resolvePointElastic()
eachAxis()
convertBoundingBoxToBox()
convertBoxToBoundingBox()
transformBoxPoints()
isIdentityScale()
hasScale()
hasTransform()
has2DTranslate()
is2DTranslate()
scalePoint()
applyPointDelta()
applyAxisDelta()
applyBoxDelta()
applyTreeDeltas()
snapToDefault()
translateAxis()
transformAxis()
transformBox()
measureViewportBox()
measurePageBox()
VisualElementDragControls:: (2 methods):
shouldDrag()
getCurrentDirection()
DragGesture:: (0 methods):
PanGesture:: (4 methods):
usePresence()
useIsPresent()
isPresent()
pixelsToPercent()
MeasureLayoutWithContext:: (15 methods):
MeasureLayout()
mixValues()
getRadius()
compress()
copyAxisInto()
copyBoxInto()
removePointDelta()
removeAxisDelta()
removeAxisTransforms()
removeBoxTransforms()
isAxisDeltaZero()
isDeltaZero()
boxEquals()
boxEqualsRounded()
aspectRatio()
NodeStack:: (1 method):
buildProjectionTransform()
FlatTree:: (32 methods):
delay()
record()
isSVGElement()
animateSingleValue()
createProjectionNode()
updateLayout()
notifyLayoutUpdate()
propagateDirtyNodes()
cleanDirtyNodes()
clearSnapshot()
clearMeasurements()
clearIsLayoutDirty()
resetTransformStyle()
finishAnimation()
resolveTargetDelta()
calcProjection()
resetRotation()
removeLeadSnapshots()
mixAxisDelta()
mixAxis()
mixBox()
hasOpacityCrossfade()
roundAxis()
roundBox()
shouldAnimatePositionOnly()
parseCSSVariable()
getVariableValue()
resolveCSSVariables()
removeNonTranslationalTransform()
unitConversion()
initPrefersReducedMotion()
updateMotionValuesFromProps()
VisualElement:: (0 methods):
DOMVisualElement:: (1 method):
HTMLVisualElement_getComputedStyle()
HTMLVisualElement:: (0 methods):
SVGVisualElement:: (3 methods):
createDomMotionComponent()
useIsMounted()
use_force_update_useForceUpdate()
PopChildMeasure:: (80 methods):
PopChild()
newChildrenMap()
useUnmountEffect()
updateChildLookup()
onlyElements()
useResponsiveValue()
space()
styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useDeprecatedProps()
useFlex()
UnconnectedFlex()
useFlexItem()
useFlexBlock()
UnconnectedFlexBlock()
getConvertedKey()
rtl()
useSpacer()
UnconnectedSpacer()
UnconnectedFlexItem()
truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
isValueDefined()
isValueEmpty()
getDefinedValue()
truncateMiddle()
truncateContent()
useTruncate()
names()
colors_rgba()
getColorComputationNode()
isColor()
_getComputedBackgroundColor()
getOptimalTextColor()
getOptimalTextShade()
text_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
createHighlighterText()
getFontSize()
getHeadingFontSize()
getLineHeight()
hook_EMOTION_STRINGIFIED_CSS_ERROR_()
useText()
UnconnectedText()
base_label_EMOTION_STRINGIFIED_CSS_ERROR_()
input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
Backdrop()
label_Label()
useDeprecated36pxDefaultSizeProp()
useUniqueId()
getUIFlexProps()
InputBase()
maths_0ab39ae9_esm_clamp()
rubberband()
rubberbandIfOutOfBounds()
computeRubberband()
_toPrimitive()
_toPropertyKey()
_defineProperty()
ownKeys()
_objectSpread2()
capitalize()
hasCapture()
toHandlerProp()
parseProp()
toDomEventType()
isTouch()
getPointerType()
getCurrentTargetTouchList()
getTouchList()
getValueEvent()
distanceAngle()
touchIds()
touchDistanceAngle()
pointerId()
pointerValues()
wheelValues()
scrollValues()
getEventDetails()
call()
actions_b1cc53c2_esm_noop()
actions_b1cc53c2_esm_chain()
assignDefault()
Engine:: (1 method):
selectAxis()
CoordinatesEngine:: (0 methods):
DragEngine:: (7 methods):
persistEvent()
supportsTouchEvents()
isTouchScreen()
supportsPointerEvents()
supportsPointerLock()
supportsGestureEvents()
clampStateInternalMovementToBounds()
PinchEngine:: (0 methods):
MoveEngine:: (0 methods):
ScrollEngine:: (0 methods):
WheelEngine:: (0 methods):
HoverEngine:: (5 methods):
actions_b1cc53c2_esm_registerAction()
_objectWithoutPropertiesLoose()
_objectWithoutProperties()
resolveWith()
use_gesture_core_esm_parse()
EventStore:: (0 methods):
TimeoutStore:: (0 methods):
Controller:: (78 methods):
setupGesture()
resolveGestures()
sortHandlers()
registerGesture()
use_gesture_core_esm_parseMergedHandlers()
useRecognizers()
useDrag()
usePinch()
useWheel()
useScroll()
useMove()
useHover()
createUseGesture()
useGesture()
getDragCursor()
useDragCursor()
useDraft()
mergeInitialState()
inputControlStateReducer()
useInputControlStateReducer()
InputField()
font()
box_sizing_EMOTION_STRINGIFIED_CSS_ERROR_()
base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
input_control_useUniqueId()
UnforwardedInputControl()
Dashicon()
Icon()
button_useDeprecatedProps()
UnforwardedButton()
number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
getNumber()
add()
subtract()
getPrecision()
math_clamp()
roundClamp()
getAlignmentProps()
getValidChildren()
useHStack()
UnconnectedHStack()
UnforwardedNumberControl()
angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
AngleCircle()
getAngle()
UnforwardedAnglePickerControl()
kebabCase()
escapeRegExp()
filterOptions()
getDefaultUseItems()
isRef()
deepEqual()
getDPR()
floating_ui_react_dom_roundByDPR()
useLatestRef()
useFloating()
useReducedMotion()
setLocked()
ScrollLock()
vanilla_proxy()
vanilla_getVersion()
vanilla_subscribe()
vanilla_snapshot()
vanilla_ref()
useSnapshot()
subscribeKey()
watch()
devtools()
derive()
underive()
addComputed_DEPRECATED()
proxyWithComputed()
proxyWithHistory()
proxySet()
proxyMap()
useSlot()
Fill()
isFunction()
SlotComponent:: (203 methods):
rng()
unsafeStringify()
stringify_stringify()
v4()
StyleProvider()
fill_useForceUpdate()
fill_Fill()
slot_Slot()
createSlotRegistry()
SlotFillProvider()
provider_createSlotRegistry()
registerSlot()
registerFill()
unregisterSlot()
unregisterFill()
getSlot()
getFills()
forceUpdateSlot()
triggerListeners()
subscribe()
provider_SlotFillProvider()
slot_fill_Fill()
UnforwardedSlot()
Provider()
createSlotFill()
overlayMiddlewares()
PopoverSlot()
getAutoCompleterUI()
AutocompleterUI()
announce()
useOnClickOutside()
useAutocomplete()
insertCompletion()
select()
reset()
onChangeOptions()
handleKeyDown()
useLastDifferentValue()
useAutocompleteProps()
_onKeyDown()
Autocomplete()
useBaseControlProps()
border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useBorderBoxControlLinkedButton()
useBorderBoxControlVisualizer()
nodeGroup()
toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
createRadioStore()
useRadioStoreProps()
useRadioStore()
useComputeControlledOrUncontrolledValue()
UnforwardedToggleGroupControlAsRadioGroup()
useControlledValue()
UnforwardedToggleGroupControlAsButtonGroup()
UnconnectedToggleGroupControl()
getIsChecked()
isNativeRadio()
toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
ToggleGroupControlOptionBase()
UnforwardedToggleGroupControlOptionIcon()
UnconnectedBorderControlStylePicker()
UnforwardedColorIndicator()
closeIfFocusOutside()
close()
UnconnectedInputControlSuffixWrapper()
icon_Icon()
select_control_useUniqueId()
UnforwardedSelectControl()
use_controlled_state_useControlledState()
floatClamp()
useControlledRangeValue()
range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
input_range_InputRange()
RangeMark()
RangeRail()
Marks()
useMarks()
SimpleTooltip()
useTooltipPosition()
UnforwardedRangeControl()
dist_u()
isLegacyProps()
getColorFromLegacyProps()
use_deprecated_props_useDeprecatedProps()
UnforwardedOptionAsButton()
UnforwardedOptionAsOption()
Option()
OptionGroup()
DropdownLinkAction()
ButtonAction()
ListboxCircularOptionPicker()
ButtonsCircularOptionPicker()
CircularOptionPicker()
useVStack()
UnconnectedVStack()
UnconnectedTruncate()
useHeading()
UnconnectedHeading()
color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnconnectedDropdownContentWrapper()
SinglePalette()
MultiplePalettes()
CustomColorPickerDropdown()
UnforwardedColorPalette()
border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
getParsedQuantityAndUnit()
hasUnits()
parseQuantityAndUnitFromRawValue()
getValidParsedQuantityAndUnit()
getAccessibleLabelForUnit()
filterUnitsWithSettings()
getUnitsWithCurrentUnit()
useBorderControlDropdown()
UnitSelectControl()
UnforwardedUnitControl()
useBorderControl()
utils_getAlignmentProps()
useGrid()
UnconnectedGrid()
useBorderBoxControlSplitControls()
parseCSSUnitValue()
createCSSUnitValue()
mode()
useBorderBoxControl()
box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
BoxControlIcon()
box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
utils_mode()
getAllValue()
getAllUnitFallback()
isValuesMixed()
isValuesDefined()
getInitialSide()
normalizeSides()
applyValueToSides()
AllInputControl()
BoxInputControls()
AxialInputControls()
LinkedButton()
box_control_useUniqueId()
BoxControl()
UnforwardedButtonGroup()
elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
getBoxShadow()
useElevation()
UnconnectedElevation()
card_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
getBorders()
useSurface()
hook_useDeprecatedProps()
useCard()
UnconnectedCard()
scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useScrollable()
UnconnectedScrollable()
useCardBody()
UnconnectedCardBody()
divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnconnectedDivider()
useCardDivider()
UnconnectedCardDivider()
useCardFooter()
UnconnectedCardFooter()
useCardHeader()
UnconnectedCardHeader()
useCardMedia()
UnconnectedCardMedia()
CheckboxControl()
ClipboardButton()
item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useItemGroup()
UnconnectedItemGroup()
clampPercent()
isOverlapping()
addControlPoint()
removeControlPoint()
updateControlPoint()
updateControlPointPosition()
updateControlPointColor()
updateControlPointColorByPosition()
getHorizontalRelativeGradientPosition()
ControlPointButton()
GradientColorPickerDropdown()
ControlPoints()
InsertPoint()
CustomGradientBar()
serializeGradientColor()
serializeGradientPosition()
serializeGradientColorStop()
serializeGradientOrientation()
serializeGradient()
getLinearGradientRepresentation()
hasUnsupportedLength()
getGradientAstWithDefault()
getGradientAstWithControlPoints()
getStopCssColor()
custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
CustomGradientPicker()
SingleOrigin()
MultipleOrigin()
gradient_picker_Component()
GradientPicker()
cycleValue()
NavigableContainer:: (50 methods):
UnforwardedNavigableMenu()
dropdown_menu_mergeProps()
dropdown_menu_isFunction()
UnconnectedDropdownMenu()
palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
NameInput()
getNameForPosition()
ColorPickerPopover()
palette_edit_Option()
PaletteEditListView()
PaletteEdit()
UnForwardedTokenInput()
SuggestionsList()
ComboboxControl()
mapLegacyStatePropsToComponentProps()
proxyComposite()
useCompositeState()
modalize()
elementShouldBeHidden()
unmodalize()
UnforwardedModal()
handleEscapeKeyDown()
confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
dist_t()
cbToCb()
downshift_esm_noop()
scrollIntoView()
isOrContainsNode()
debounce()
cancel()
wrapper()
callAllEventHandlers()
handleRefs()
generateId()
resetIdCounter()
getA11yStatusMessage()
unwrapArray()
isDOMElement()
getElementProps()
requiredProp()
pickState()
getState()
isControlledProp()
normalizeArrowKey()
downshift_esm_isPlainObject()
getNextWrappingIndex()
getNextNonDisabledIndex()
targetWithinDownshift()
setStatus()
getStatusDiv()
Downshift:: (348 methods):
validateGetMenuPropsCalledCorrectly()
validateGetRootPropsCalledCorrectly()
callOnChangeProps()
invokeOnChangeHandler()
stateReducer()
getA11ySelectionMessage()
useElementIds()
getItemIndex()
itemToString()
isAcceptedCharacterKey()
capitalizeString()
downshift_esm_useLatestRef()
useEnhancedReducer()
useControlledReducer()
getDefaultValue()
getInitialValue()
getInitialState()
getHighlightedIndexOnOpen()
useMouseAndTouchTracker()
useA11yMessageSetter()
useScrollIntoView()
downshiftCommonReducer()
getItemIndexByCharacterKey()
getA11yStatusMessage()
downshiftSelectReducer()
useSelect()
getInitialState()
useControlledReducer()
downshiftUseComboboxReducer()
useCombobox()
getInitialValue()
getDefaultValue()
getInitialState()
isKeyDownOperationPermitted()
getA11yRemovalMessage()
downshiftMultipleSelectionReducer()
useMultipleSelection()
CustomSelectControl()
handleOnFocus()
handleOnBlur()
getDescribedBy()
StableCustomSelectControl()
toInteger()
requiredArgs()
toDate()
addDays()
addMonths()
getDefaultOptions()
startOfWeek()
startOfDay()
addWeeks()
addYears()
endOfMonth()
eachDayOfInterval()
eachMonthOfInterval()
eachWeekOfInterval()
startOfMonth()
endOfWeek()
getDaysInMonth()
isAfter()
isBefore()
isEqual()
setMonth()
set()
setYear()
startOfToday()
subMonths()
subYears()
requiredArgs_requiredArgs()
_typeof()
toDate_toDate()
startOfDay_startOfDay()
toInteger_toInteger()
addMonths_addMonths()
subMonths_subMonths()
isDate_typeof()
isDate()
isValid()
addMilliseconds()
subMilliseconds()
getUTCDayOfYear()
startOfUTCISOWeek()
getUTCISOWeekYear()
startOfUTCISOWeekYear()
getUTCISOWeek()
defaultOptions_getDefaultOptions()
setDefaultOptions()
startOfUTCWeek()
getUTCWeekYear()
startOfUTCWeekYear()
getUTCWeek()
addLeadingZeros()
formatTimezoneShort()
formatTimezoneWithOptionalMinutes()
formatTimezone()
getTimezoneOffsetInMilliseconds()
isProtectedDayOfYearToken()
isProtectedWeekYearToken()
throwProtectedError()
buildFormatLongFn()
buildLocalizeFn()
buildMatchFn()
findKey()
findIndex()
buildMatchPatternFn()
format()
cleanEscapedString()
isSameMonth()
isEqual_isEqual()
isSameDay()
addDays_addDays()
addWeeks_addWeeks()
subWeeks()
startOfWeek_startOfWeek()
endOfWeek_endOfWeek()
date_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
inputToDate()
DatePicker()
date_Day()
getDayLabel()
startOfMinute()
getDaysInMonth_getDaysInMonth()
setMonth_setMonth()
set_typeof()
set_set()
setHours()
time_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
from12hTo24h()
buildPadInputStateReducer()
TimePicker()
buildAmPmChangeCallback()
date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedDateTimePicker()
DimensionControl()
disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
Disabled()
Draggable()
end()
start()
over()
DropZoneComponent()
DropZoneProvider()
getDefaultColors()
getGradientFromCSSColors()
getColorStopsFromColors()
getColorsFromColorStops()
DuotoneSwatch()
ColorOption()
ColorListPicker()
CustomDuotoneBar()
DuotonePicker()
external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedExternalLink()
getExtension()
isVideoType()
fractionToPercentage()
focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_()
FocalPointPickerControls()
FocalPointUnitControl()
FocalPoint()
FocalPointPickerGrid()
media_Media()
FocalPointPicker()
FocusableIframe()
isSimpleCssValue()
getCommonSizeUnit()
font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedToggleGroupControlOption()
FormFileUpload()
FormToggle()
Token()
FormTokenField()
focus()
hasFocus()
onFocusHandler()
onBlur()
onKeyDown()
onKeyPress()
onContainerTouched()
onTokenClickRemove()
onSuggestionHovered()
onSuggestionSelected()
onInputChangeHandler()
handleDeleteKey()
handleLeftArrowKey()
handleRightArrowKey()
handleUpArrowKey()
handleDownArrowKey()
handleEscapeKey()
handleCommaKey()
moveInputToIndex()
moveInputBeforePreviousToken()
moveInputAfterNextToken()
deleteTokenBeforeInput()
deleteTokenAfterInput()
addCurrentToken()
addNewTokens()
addNewToken()
deleteToken()
getTokenValue()
getMatchingSuggestions()
getSelectedSuggestion()
valueContainsToken()
getIndexOfInput()
isInputEmpty()
inputHasValidValue()
updateSuggestions()
renderTokensAndInput()
renderToken()
renderInput()
PageControl()
Guide()
GuidePage()
UnforwardedIconButton()
useItem()
UnconnectedItem()
UnconnectedInputControlPrefixWrapper()
KeyboardShortcut()
KeyboardShortcuts()
MenuGroup()
UnforwardedMenuItem()
MenuItemsChoice()
UnforwardedTabbableContainer()
navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useNavigationTreeNodes()
Navigation()
UnforwardedNavigationBackButton()
NavigationGroup()
NavigationItemBaseContent()
NavigationItemBase()
NavigationItem()
SuffixItem()
UnforwardedSearchControl()
MenuTitleSearch()
NavigationMenuTitle()
NavigationSearchNoResultsFound()
NavigationMenu()
lexer()
dist_es2015_parse()
dist_es2015_compile()
tokensToFunction()
dist_es2015_match()
regexpToFunction()
escapeString()
flags()
regexpToRegexp()
arrayToRegexp()
stringToRegexp()
tokensToRegexp()
pathToRegexp()
matchPath()
patternMatch()
findParent()
navigator_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
screensReducer()
UnconnectedNavigatorProvider()
UnconnectedNavigatorScreen()
useNavigator()
useNavigatorButton()
UnconnectedNavigatorButton()
useNavigatorBackButton()
UnconnectedNavigatorBackButton()
UnconnectedNavigatorToParentButton()
useSpokenMessage()
getDefaultPoliteness()
getStatusLabel()
Notice()
NoticeList()
PanelHeader()
UnforwardedPanel()
UnforwardedPanelBody()
UnforwardedPanelRow()
Placeholder()
buildTermsTree()
getSelectOptions()
TreeSelect()
AuthorSelect()
CategorySelect()
isSingleCategorySelection()
isMultipleCategorySelection()
QueryControls()
UnforwardedRadio()
UnforwardedRadioGroup()
RadioControl()
__()
Resizer()
__()
Resizable()
useResizeLabel()
getSizeLabel()
resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
resize_tooltip_label_Label()
ResizeTooltip()
UnforwardedResizableBox()
ResponsiveWrapper()
sendResize()
removeViewportStyles()
SandBox()
isFrameAccessible()
trySandBox()
tryNoForceSandBox()
checkMessageForResize()
snackbar_useSpokenMessage()
UnforwardedSnackbar()
dismissMe()
onActionClick()
SnackbarList()
spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedSpinner()
UnconnectedSurface()
createTabStore()
useTabStoreProps()
useTabStore()
UnforwardedTextControl()
UnforwardedTextareaControl()
Tip()
ToggleControl()
onChangeToggle()
toolbar_item_ToolbarItem()
UnforwardedToolbarButton()
ToolbarGroupCollapsed()
isNestedArray()
ToolbarGroup()
createToolbarStore()
useToolbarStoreProps()
useToolbarStore()
UnforwardedToolbarContainer()
UnforwardedToolbar()
ToolbarDropdownMenu()
tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useToolsPanelHeader()
useToolsPanel()
useToolsPanelItem()
RovingTabIndex()
getRowFocusables()
UnforwardedTreeGrid()
UnforwardedTreeGridRow()
UnforwardedTreeGridItem()
UnforwardedTreeGridCell()
stopPropagation()
useSlotFills()
z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnconnectedZStack()
useNavigateRegions()
focusRegion()
onClick()
withFilters()
ensureFilteredComponent()
FilteredComponentRenderer:: (44 methods):
onHooksUpdated()
isComponentLike()
Component()
progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedProgressBar()
getChildren()
createMenuStore()
useMenuStoreProps()
useMenuStore()
clearChars()
isValidTypeaheadEvent()
isSelfTargetOrItem()
_346FK57L_getEnabledItems()
itemTextStartsWith()
getSameInitialItems()
getInitialFocus()
hasActiveItem()
useAriaLabelledBy()
getMouseDestination()
hoveringInside()
movingToAnotherItem()
menuHasFocus()
createCheckboxStore()
useCheckboxStoreProps()
useCheckboxStore()
setMixed()
isNativeCheckbox()
getPrimitiveValue()
menu_item_checkbox_getPrimitiveValue()
getValue()
menu_item_radio_getValue()
dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
theme_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
generateThemeVariables()
validateInputs()
checkContrasts()
warnContrastIssues()
generateAccentDependentColors()
generateBackgroundDependentColors()
getForegroundForColor()
generateShades()
Theme()
tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
Tabs()
createRenderStep(runNextFrame) X-Ref |
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 |
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 |
buildProjectionTransform(delta, treeScale, latestTransform) X-Ref |
No description |
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 asClass: 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 componentPopChild({ 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. param: {string} key The CSS property name. return: {string} The flipped CSS property name, if applicable. |
rtl(ltrStyles = {}, rtlStyles) X-Ref |
A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. 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. return: {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer |
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. param: {T} value The value to check. return: {value is Exclude<T, null | undefined>} Whether value is not null or undefined. |
isValueEmpty(value) X-Ref |
Determines if a value is empty, null, or undefined. param: {string | number | null | undefined} value The value to check. return: {value is ("" | null | undefined)} Whether value is empty. |
getDefinedValue(values = [], fallbackValue) X-Ref |
Get the first defined/non-null value from an array. param: {Array<T | null | undefined>} values Values to derive from. param: {T} fallbackValue Fallback value if there are no defined values. return: {T} A defined value or the fallback value. |
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. param: {string} hexValue The hex value to convert to rgba(). param: {number} alpha The alpha value for opacity. return: {string} The converted rgba() color value. |
getColorComputationNode() X-Ref |
return: {HTMLDivElement | undefined} The HTML element for color computation. |
isColor(value) X-Ref |
param: {string | unknown} value return: {boolean} Whether the value is a valid color. |
_getComputedBackgroundColor(backgroundColor) X-Ref |
Retrieves the computed background color. This is useful for getting the value of a CSS variable color. param: {string | unknown} backgroundColor The background color to compute. return: {string} The computed background color. |
getOptimalTextColor(backgroundColor) X-Ref |
Get the text shade optimized for readability, based on a background color. param: {string | unknown} backgroundColor The background color. return: {string} The optimized text color (black or white). |
getOptimalTextShade(backgroundColor) X-Ref |
Get the text shade optimized for readability, based on a background color. param: {string | unknown} backgroundColor The background color. return: {string} The optimized text shade (dark or light). |
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 |
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. param: dragDirection The drag direction. return: The CSS cursor value. |
useDragCursor(isDragging, dragDirection) X-Ref |
Custom hook that renders a drag cursor when dragging. param: {boolean} isDragging The dragging state. param: {string} dragDirection The drag direction. return: {string} The CSS cursor value. |
useDraft(props) X-Ref |
No description |
mergeInitialState(initialState = initialInputControlState) X-Ref |
Prepares initialState for the reducer. param: initialState The initial state. return: Prepared initialState for the reducer |
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. param: composedStateReducers A reducer to specialize state changes. return: The reducer. |
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/ param: stateReducer An external state reducer. param: initialState The initial state for the reducer. param: onChangeHandler A handler for the onChange event. return: State, dispatch, and a collection of actions. |
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 |
param: {keyof FONT} value Path of value from `FONT` return: {string} Font rule value |
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. param: {unknown} value The incoming value. return: {number} The parsed number value. |
add(...args) X-Ref |
Safely adds 2 values. param: {Array<number|string>} args Values to add together. return: {number} The sum of values. |
subtract(...args) X-Ref |
Safely subtracts 2 values. param: {Array<number|string>} args Values to subtract together. return: {number} The difference of the values. |
getPrecision(value) X-Ref |
Determines the decimal position of a number value. param: {number} value The number to evaluate. return: {number} The number of decimal places. |
math_clamp(value, min, max) X-Ref |
Clamps a value based on a min/max range. param: {number} value The value. param: {number} min The minimum range. param: {number} max The maximum range. return: {number} The clamped value. |
roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) X-Ref |
Clamps a value based on a min/max range with rounding 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. return: {number} The rounded and clamped 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. param: children return: An array of available 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()`. param: str String to convert. return: Kebab-cased string |
escapeRegExp(string) X-Ref |
Escapes the RegExp special characters. param: string Input string. return: Regex-escaped 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. param: maybeFunc The argument to check. return: True if the argument is a function, false otherwise. |
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. param: props param: props.defaultValue param: props.value param: props.onChange return: The controlled value and the value setter. |
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. param: {IconProps} props icon is the SVG component to render param: {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element. return: {JSX.Element} Icon component |
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. param: {T | undefined} currentState The current value. param: {Options<T>} [options=defaultOptions] Additional options for the hook. return: {[T | "", (nextState: T) => void]} The controlled value and the value setter. |
floatClamp(value, min, max) X-Ref |
A float supported clamp function for a specific value. param: value The value to clamp. param: min The minimum value. param: max The maximum value. return: A (float) number |
useControlledRangeValue(settings) X-Ref |
Hook to store a clamped value, derived from props. param: settings return: The controlled value and the value setter. |
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' param: rawValue The raw value as a string (may or may not contain the unit) param: fallbackUnit The unit used as a fallback, if not unit is detected in the `value` param: allowedUnits Units to derive from. return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value |
hasUnits(units) X-Ref |
Checks if units are defined. param: units List of units. return: Whether the list actually contains any 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. param: rawValue The raw value as a string (may or may not contain the unit) param: allowedUnits Units to derive from. return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value |
getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) X-Ref |
Parses quantity and unit from a raw value. Validates parsed value, using fallback value if invalid. param: rawValue The next value. param: allowedUnits Units to derive from. param: fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value. param: fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value. return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value |
getAccessibleLabelForUnit(unit) X-Ref |
Takes a unit value and finds the matching accessibility label for the unit abbreviation. param: unit Unit value (example: `px`) return: a11y label for the unit abbreviation |
filterUnitsWithSettings(allowedUnitValues = [], availableUnits) X-Ref |
Filters available units based on values defined a list of allowed unit values. param: allowedUnitValues Collection of allowed unit value strings. param: availableUnits Collection of available unit objects. return: Filtered units. |
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. param: rawValue Selected value to parse. param: legacyUnit Legacy unit value, if rawValue needs it appended. param: units List of available units. return: A collection of units containing the unit for the current value. |
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. param: toParse Value to parse return: The extracted number and unit. |
createCSSUnitValue(value, unit) X-Ref |
Combines a value and a unit into a unit value. param: value param: unit return: The unit value. |
mode(values) X-Ref |
Finds the mode value out of the array passed favouring the first value as a tiebreaker. param: values Values to determine the mode from. return: The mode value. |
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 param: arr Array of items to check. return: The item with the most occurrences. |
getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) X-Ref |
Gets the 'all' input value and unit from values data. param: values Box values. param: selectedUnits Box units. param: availableSides Available box sides to evaluate. return: A value + unit for the 'all' input. |
getAllUnitFallback(selectedUnits) X-Ref |
Determine the most common unit selection to use as a fallback option. param: selectedUnits Current unit selections for individual sides. return: Most common unit selection. |
isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) X-Ref |
Checks to determine if values are mixed. param: values Box values. param: selectedUnits Box units. param: sides Available box sides to evaluate. return: Whether values are mixed. |
isValuesDefined(values) X-Ref |
Checks to determine if values are defined. param: values Box values. return: Whether values are mixed. |
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. param: isLinked Whether the box control's fields are linked. param: splitOnAxis Whether splitting by horizontal or vertical axis. return: The initial side. |
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. param: sides Available sides for box control. return: Normalized sides configuration. |
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. param: currentValues The current values for each side. param: newValue The value to apply to the sides object. param: sides Array defining valid sides. return: Object containing the updated values for each side. |
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. param: value Value to clamp. return: Value clamped between 0 and 100. |
isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) X-Ref |
Check if a control point is overlapping with another. 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. return: True if the point is overlapping. |
addControlPoint(points, position, color) X-Ref |
Adds a control point from an array and returns the new array. param: points Array of control points. param: position Position to insert the new point. param: color Color to update the control point at index. return: New array of control points. |
removeControlPoint(points, index) X-Ref |
Removes a control point from an array and returns the new array. param: points Array of control points. param: index Index to remove. return: New array of control points. |
updateControlPoint(points, index, newPoint) X-Ref |
Updates a control point from an array and returns the new array. param: points Array of control points. param: index Index to update. param: newPoint New control point to replace the index. return: New array of control points. |
updateControlPointPosition(points, index, newPosition) X-Ref |
Updates the position of a control point from an array and returns the new array. param: points Array of control points. param: index Index to update. param: newPosition Position to move the control point at index. return: New array of control points. |
updateControlPointColor(points, index, newColor) X-Ref |
Updates the position of a control point from an array and returns the new array. param: points Array of control points. param: index Index to update. param: newColor Color to update the control point at index. return: New array of control points. |
updateControlPointColorByPosition(points, position, newColor) X-Ref |
Updates the position of a control point from an array and returns the new array. param: points Array of control points. param: position Position of the color stop. param: newColor Color to update the control point at index. return: New array of control points. |
getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) X-Ref |
Gets the horizontal coordinate when dragging a control point with the mouse. param: mouseXcoordinate Horizontal coordinate of the mouse position. param: containerElement Container for the gradient picker. return: Whole number percentage from the left. |
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. param: elements An array of color palette items. param: slugPrefix The slug prefix used to match the element slug. return: A unique name for a palette item. |
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. param: element The element that should be checked. return: Whether the element should not be hidden from screen-readers. |
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. param: {Function} cb the callback return: {Function} a function |
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 |
param: {HTMLElement} parent the parent node param: {HTMLElement} child the child node param: {Window} environment The window context where downshift renders. return: {Boolean} whether the parent is the child or the child is in the parent |
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. param: {Function} fn the function to call after the time param: {Number} time the time to wait return: {Function} the debounced function |
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`. param: {...Function} fns the event handler functions return: {Function} the event handler to add to an element |
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. param: {Object} param the downshift state and other relevant properties return: {String} the a11y status message |
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 param: {*} arg the maybe-array param: {*} defaultValue the value if arg is falsey not defined return: {*} the arg or it's first item |
isDOMElement(element) X-Ref |
param: {Object} element (P)react element return: {Boolean} whether it's a DOM element |
getElementProps(element) X-Ref |
param: {Object} element (P)react element return: {Object} the props |
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 |
param: {Object} state the state object return: {Object} state that is relevant to downshift |
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. returns: {Object} The merged controlled state. param: {Object} state The state of the component/hook. param: {Object} props The props that may contain controlled values. |
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. param: {Object} props The props that may contain controlled values. param: {String} key the key to check return: {Boolean} whether it is a controlled controlled prop |
normalizeArrowKey(event) X-Ref |
Normalizes the 'key' property of a KeyboardEvent in IE/Edge param: {Object} event a keyboardEvent object return: {String} keyboard key |
downshift_esm_isPlainObject(obj) X-Ref |
Simple check if the value passed is object literal param: {*} obj any things return: {Boolean} whether it's object literal |
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. returns: {number} The new index after the move. 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. |
getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) X-Ref |
Returns the next index in the list of an item that is not disabled. 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. 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. |
targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) X-Ref |
Checks if event target is within the downshift elements. returns: {boolean} Whether or not the target is within 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. |
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. param: {Object} documentProp document passed by the user. return: {HTMLElement} the status node. |
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. returns: {Object} changes. param: {Object} s state. param: {Object} a action with changes. |
getA11ySelectionMessage(selectionParameters) X-Ref |
Returns a message to be added to aria-live region when item is selected. returns: {string} The a11y message. param: {Object} selectionParameters Parameters required to build the 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. returns: {Array} An array with the state and an action dispatcher. param: {Function} reducer Reducer function from downshift. param: {Object} initialState Initial state of the hook. param: {Object} props The hook props. |
useControlledReducer(const [state, dispatch] = useEnhancedReducer(reducer, initialState, props) X-Ref |
Wraps the useEnhancedReducer and applies the controlled prop values before returning the new state. returns: {Array} An array with the state and an action dispatcher. param: {Function} reducer Reducer function from downshift. param: {Object} initialState Initial state of the hook. param: {Object} props The hook props. |
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. returns: {Object} Ref containing whether mouseDown or touchMove event is happening 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. |
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. param: {Object} param the downshift state and other relevant properties return: {String} the a11y status message |
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. returns: {Array} An array with the state and an action dispatcher. param: {Function} reducer Reducer function from downshift. param: {Object} initialState Initial state of the hook. param: {Object} props The hook props. |
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. returns: {any} The initial value for that prop. param: {Object} props Props passed to the hook. param: {string} propKey Props key to generate the value for. |
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. returns: {any} The initial value for that prop. param: {Object} props Props passed to the hook. param: {string} propKey Props key to generate the value for. |
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. returns: {Object} The initial state. param: {Object} props Props passed to the hook. |
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. returns: {boolean} Whether the operation is allowed. param: {KeyboardEvent} event The event from keydown. |
getA11yRemovalMessage(selectionParameters) X-Ref |
Returns a message to be added to aria-live region when item is removed. returns: {string} The a11y message. param: {Object} selectionParameters Parameters required to build the 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 |
returns: {Date} the parsed date in the local time zone param: {Date|Number} argument - the value to convert |
addDays(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} - the new date with the days added 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`. |
addMonths(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the months added 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`. |
getDefaultOptions() X-Ref |
No description |
startOfWeek(dirtyDate, options) X-Ref |
returns: {Date} the start of a week 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) |
startOfDay(dirtyDate) X-Ref |
returns: {Date} the start of a day param: {Date|Number} date - the original date |
addWeeks(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the weeks added 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`. |
addYears(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the years added 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`. |
endOfMonth(dirtyDate) X-Ref |
returns: {Date} the end of a month param: {Date|Number} date - the original date |
eachDayOfInterval(dirtyInterval, options) X-Ref |
returns: {Date[]} the array with starts of days from the day of the interval start to the day of the interval end 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. |
eachMonthOfInterval(dirtyInterval) X-Ref |
returns: {Date[]} the array with starts of months from the month of the interval start to the month of the interval end param: {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} |
eachWeekOfInterval(dirtyInterval, options) X-Ref |
returns: {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end 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) |
startOfMonth(dirtyDate) X-Ref |
returns: {Date} the start of a month param: {Date|Number} date - the original date |
endOfWeek(dirtyDate, options) X-Ref |
returns: {Date} the end of a week 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) |
getDaysInMonth(dirtyDate) X-Ref |
returns: {Number} the number of days in a month param: {Date|Number} date - the given date |
isAfter(dirtyDate, dirtyDateToCompare) X-Ref |
returns: {Boolean} the first date is after the second date 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 |
isBefore(dirtyDate, dirtyDateToCompare) X-Ref |
returns: {Boolean} the first date is before the second date 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 |
isEqual(dirtyLeftDate, dirtyRightDate) X-Ref |
returns: {Boolean} the dates are equal param: {Date|Number} dateLeft - the first date to compare param: {Date|Number} dateRight - the second date to compare |
setMonth(dirtyDate, dirtyMonth) X-Ref |
returns: {Date} the new date with the month set param: {Date|Number} date - the date to be changed param: {Number} month - the month of the new date |
set(dirtyDate, values) X-Ref |
returns: {Date} the new date with options set 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 |
setYear(dirtyDate, dirtyYear) X-Ref |
returns: {Date} the new date with the year set param: {Date|Number} date - the date to be changed param: {Number} year - the year of the new date |
startOfToday() X-Ref |
returns: {Date} the start of today |
subMonths(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the months subtracted 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`. |
subYears(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the years subtracted 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`. |
requiredArgs_requiredArgs(required, args) X-Ref |
No description |
_typeof(obj) X-Ref |
No description |
toDate_toDate(argument) X-Ref |
returns: {Date} the parsed date in the local time zone param: {Date|Number} argument - the value to convert |
startOfDay_startOfDay(dirtyDate) X-Ref |
returns: {Date} the start of a day param: {Date|Number} date - the original date |
toInteger_toInteger(dirtyNumber) X-Ref |
No description |
addMonths_addMonths(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the months added 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`. |
subMonths_subMonths(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the months subtracted 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`. |
isDate_typeof(obj) X-Ref |
No description |
isDate(value) X-Ref |
returns: {boolean} true if the given value is a date param: {*} value - the value to check |
isValid(dirtyDate) X-Ref |
returns: {Boolean} the date is valid param: {*} date - the date to check |
addMilliseconds(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the milliseconds added 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`. |
subMilliseconds(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the milliseconds subtracted 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`. |
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 |
returns: {String} the formatted date string 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`; |
cleanEscapedString(input) X-Ref |
No description |
isSameMonth(dirtyDateLeft, dirtyDateRight) X-Ref |
returns: {Boolean} the dates are in the same month (and year) param: {Date|Number} dateLeft - the first date to check param: {Date|Number} dateRight - the second date to check |
isEqual_isEqual(dirtyLeftDate, dirtyRightDate) X-Ref |
returns: {Boolean} the dates are equal param: {Date|Number} dateLeft - the first date to compare param: {Date|Number} dateRight - the second date to compare |
isSameDay(dirtyDateLeft, dirtyDateRight) X-Ref |
returns: {Boolean} the dates are in the same day (and year and month) param: {Date|Number} dateLeft - the first date to check param: {Date|Number} dateRight - the second date to check |
addDays_addDays(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} - the new date with the days added 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`. |
addWeeks_addWeeks(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the weeks added 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`. |
subWeeks(dirtyDate, dirtyAmount) X-Ref |
returns: {Date} the new date with the weeks subtracted 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`. |
startOfWeek_startOfWeek(dirtyDate, options) X-Ref |
returns: {Date} the start of a week 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) |
endOfWeek_endOfWeek(dirtyDate, options) X-Ref |
returns: {Date} the end of a week 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) |
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 |
returns: {Date} the start of a minute param: {Date|Number} date - the original date |
getDaysInMonth_getDaysInMonth(dirtyDate) X-Ref |
returns: {Number} the number of days in a month param: {Date|Number} date - the given date |
setMonth_setMonth(dirtyDate, dirtyMonth) X-Ref |
returns: {Date} the new date with the month set param: {Date|Number} date - the date to be changed param: {Number} month - the month of the new date |
set_typeof(obj) X-Ref |
No description |
set_set(dirtyDate, values) X-Ref |
returns: {Date} the new date with options set 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 |
setHours(dirtyDate, dirtyHours) X-Ref |
returns: {Date} the new date with the hours set param: {Date|Number} date - the date to be changed param: {Number} hours - the hours of the new date |
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. param: palette Color palette for the theme. return: Tuple of the darkest color and brightest color. |
getGradientFromCSSColors(colors = [], angle = '90deg') X-Ref |
Generate a duotone gradient from a list of colors. param: colors CSS color strings. param: angle CSS gradient angle. return: CSS gradient string for the duotone swatch. |
getColorStopsFromColors(colors) X-Ref |
Convert a color array to an array of color stops. param: colors CSS colors array return: Color stop information. |
getColorsFromColorStops(colorStops = []) X-Ref |
Convert a color stop array to an array colors. param: colorStops Color stop information. return: CSS colors array. |
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. param: filename The file name. return: The extension of the file name. |
isVideoType(filename = '') X-Ref |
Checks if a file is a video. param: filename The file name. return: Whether the file is a video. |
fractionToPercentage(fraction) X-Ref |
Transforms a fraction value to a percentage value. param: fraction The fraction value. return: A percentage 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. param: value The value that is checked. return: Whether the value is a simple css value. |
getCommonSizeUnit(fontSizes) X-Ref |
If all of the given font sizes have the same unit (e.g. 'px'), return that unit. Otherwise return null. param: fontSizes List of font sizes. return: The common unit, or null. |
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. param: flatTerms Array of terms in flat format. return: Terms in tree 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. 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. return: Properties for hook. |
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). 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. return: The rendered label. |
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. param: rowElement The DOM element representing the row. return: The array of focusables in 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. param: hookName Hook name exposed to be used by filters. return: Higher-order component factory. |
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. param: object Object to test. return: Whether object is component-like. |
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> ); } ); ``` param: OriginalComponent Original component. return: Wrapped 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 |
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` param: {Object} props param: {Record<string, any>} props.value return: {Record<string, any>} The consolidated value. |
getNamespace(componentName) X-Ref |
Creates a dedicated context namespace HTML attribute for components. ns is short for "namespace" param: {string} componentName The name for the component. return: {Record<string, any>} A props object with the namespaced HTML attribute. |
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. param: {F} fn Function to memoize. param: {MemizeOptions} [options] Options object. return: {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function. |
memoized() X-Ref |
No description |
getStyledClassName(namespace) X-Ref |
Generates the connected component CSS className based on the namespace. param: namespace The name of the connected component. return: The generated CSS className. |
sheetForTag(tag) X-Ref |
No description |
createStyleElement(options) X-Ref |
No description |
StyleSheet(options) X-Ref |
No description |
hash(value, length) X-Ref |
param: {string} value param: {number} length return: {number} |
trim(value) X-Ref |
param: {string} value return: {string} |
Utility_match(value, pattern) X-Ref |
param: {string} value param: {RegExp} pattern return: {string?} |
Utility_replace(value, pattern, replacement) X-Ref |
param: {string} value param: {(string|RegExp)} pattern param: {string} replacement return: {string} |
indexof(value, search) X-Ref |
param: {string} value param: {string} search return: {number} |
Utility_charat(value, index) X-Ref |
param: {string} value param: {number} index return: {number} |
Utility_substr(value, begin, end) X-Ref |
param: {string} value param: {number} begin param: {number} end return: {string} |
Utility_strlen(value) X-Ref |
param: {string} value return: {number} |
Utility_sizeof(value) X-Ref |
param: {any[]} value return: {number} |
Utility_append(value, array) X-Ref |
param: {any} value param: {any[]} array return: {any} |
Utility_combine(array, callback) X-Ref |
param: {string[]} array param: {function} callback return: {string} |
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 |
param: {object} root param: {object} props return: {object} |
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 |
param: {number} begin param: {number} end return: {string} |
token(type) X-Ref |
param: {number} type return: {number} |
alloc(value) X-Ref |
param: {string} value return: {any[]} |
dealloc(value) X-Ref |
param: {any} value return: {any} |
delimit(type) X-Ref |
param: {number} type return: {string} |
Tokenizer_tokenize(value) X-Ref |
param: {string} value return: {string[]} |
whitespace(type) X-Ref |
param: {number} type return: {string} |
tokenizer(children) X-Ref |
param: {string[]} children return: {string[]} |
escaping(index, count) X-Ref |
param: {number} index param: {number} count return: {string} |
delimiter(type) X-Ref |
param: {number} type return: {number} |
commenter(type, index) X-Ref |
param: {number} type param: {number} index return: {number} |
identifier(index) X-Ref |
No description |
Serializer_serialize(children, callback) X-Ref |
param: {object[]} children param: {function} callback return: {string} |
stringify(element, index, children, callback) X-Ref |
param: {object} element param: {number} index param: {object[]} children param: {function} callback return: {string} |
middleware(collection) X-Ref |
param: {function[]} collection return: {function} |
rulesheet(callback) X-Ref |
param: {function} callback return: {function} |
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 |
param: {string} value return: {object[]} |
parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) X-Ref |
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 return: {object} |
ruleset(value, root, parent, index, offset, rules, points, type, props, children, length) X-Ref |
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 return: {object} |
comment(value, root, parent) X-Ref |
param: {number} value param: {object} root param: {object?} parent return: {object} |
declaration(value, root, parent, length) X-Ref |
param: {string} value param: {object} root param: {object?} parent param: {number} length return: {object} |
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. param: {P} props Incoming props from the component. param: {string} namespace The namespace to register and to derive context props from. return: {ConnectedProps<P>} The connected props. |
contextConnect(Component, namespace) X-Ref |
Forwards ref (React.ForwardRef) and "Connects" (or registers) a component within the Context system under a specified namespace. param: Component The component to register into the Context system. param: namespace The namespace to register the component under. return: The connected WordPressComponent |
contextConnectWithoutRef(Component, namespace) X-Ref |
"Connects" (or registers) a component within the Context system under a specified namespace. Does not forward a ref. param: Component The component to register into the Context system. param: namespace The namespace to register the component under. return: The connected WordPressComponent |
_contextConnect(Component, namespace, options) X-Ref |
No description |
getConnectNamespace(Component) X-Ref |
Attempts to retrieve the connected namespace from a component. param: Component The component to retrieve a namespace from. return: The connected namespaces. |
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 param: value An alignment value to parse. return: The parsed value. |
getItemId(prefixId, value) X-Ref |
Creates an item ID based on a prefix ID and an alignment value. param: prefixId An ID to prefix. param: value An alignment value. return: The item id. |
getItemValue(prefixId, id) X-Ref |
Extracts an item value from its ID param: prefixId An ID prefix to remove param: id An item ID return: The item value |
getAlignmentIndex(alignment = 'center') X-Ref |
Retrieves the alignment index from a value. param: alignment Value to check. return: The index of a matching alignment. |
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. param: {'transition' | 'animation' | string} [prop='transition'] CSS Property name return: {string} Generated CSS code for the reduced style |
_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 |
param: type The animation type return: Default origin |
getAnimateClassName(options) X-Ref |
param: options return: ClassName that applies the animations |
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. returns: `true` is key is a valid `MotionProp`. param: key - Name of the property to check |
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 |
Generated : Tue Mar 19 08:20:01 2024 | Cross-referenced by PHPXref |