[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Source view] [Print] [Project Stats]
(no description)
File Size: | 71712 lines (2328 kb) |
Included or required: | 0 times |
Referenced: | 0 times |
Includes or requires: | 0 files |
Queue:: (54 methods):
createRenderStep()
createRenderBatcher()
useVisualElement()
isRefObject()
useMotionRef()
isVariantLabel()
isAnimationControls()
isControllingVariants()
isVariantNode()
getCurrentTreeVariants()
useCreateMotionContext()
variantLabelsAsDependency()
loadFeatures()
motion_createMotionComponent()
MotionComponent()
useLayoutId()
createMotionProxy()
custom()
isSVGComponent()
addScaleCorrector()
isForcedMotionValue()
buildTransform()
isString()
buildHTMLStyles()
copyRawValuesOnly()
useInitialMotionValues()
useStyle()
useHTMLProps()
isValidMotionProp()
loadExternalIsValidProp()
filterProps()
calcOrigin()
calcSVGTransformOrigin()
buildSVGPath()
buildSVGAttrs()
useSVGProps()
createUseRender()
renderHTML()
renderSVG()
scrapeMotionValuesFromProps()
scrape_motion_values_scrapeMotionValuesFromProps()
getValueState()
resolveVariantFromProps()
useConstant()
resolveMotionValue()
makeState()
makeLatestValues()
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:: (14 methods):
hasViewportOptionChanged()
shallowCompare()
resolveVariant()
isTransitionDefined()
getValueTransition()
getFinalKeyframe()
clearTime()
isNone()
parseCSSVariable()
getVariableValue()
removeNonTranslationalTransform()
measureAllKeyframes()
readAllKeyframes()
flushKeyframeResolvers()
KeyframeResolver:: (9 methods):
parseHex()
test()
analyseComplexValue()
parseComplexValue()
createTransformer()
getAnimatableNone()
applyDefaultFilter()
animatable_none_getAnimatableNone()
makeNoneKeyframesAnimatable()
DOMKeyframesResolver:: (3 methods):
memo()
hasKeyframesChanged()
canAnimate()
BaseAnimation:: (30 methods):
velocityPerSecond()
calcGeneratorVelocity()
findSpring()
approximateRoot()
calcAngularFreq()
isSpringType()
getSpringOptions()
spring()
inertia()
binarySubdivide()
cubicBezier()
hueToRgb()
hslaToRgba()
asRGBA()
mixVisibility()
mixImmediate()
complex_mixNumber()
getMixer()
mixArray()
mixObject()
matchOrder()
mix()
createMixers()
interpolate()
fillOffset()
defaultOffset()
convertOffsetToTimes()
defaultEasing()
keyframes_keyframes()
calcGeneratorDuration()
MainThreadAnimation:: (7 methods):
animateValue()
isWaapiSupportedEasing()
mapEasingToNativeEasingWithDefault()
mapEasingToNativeEasing()
animateStyle()
requiresPregeneratedKeyframes()
pregenerateKeyframes()
AcceleratedAnimation:: (4 methods):
isWillChangeMotionValue()
addUniqueItem()
removeItem()
moveItem()
SubscriptionManager:: (0 methods):
MotionValue:: (17 methods):
motionValue()
setMotionValue()
setTarget()
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()
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:: (29 methods):
delay()
record()
isSVGElement()
animateSingleValue()
resetDistortingTransform()
createProjectionNode()
updateLayout()
notifyLayoutUpdate()
propagateDirtyNodes()
cleanDirtyNodes()
clearSnapshot()
clearMeasurements()
clearIsLayoutDirty()
resetTransformStyle()
finishAnimation()
resolveTargetDelta()
calcProjection()
resetSkewAndRotation()
removeLeadSnapshots()
mixAxisDelta()
mixAxis()
mixBox()
hasOpacityCrossfade()
roundAxis()
roundBox()
shouldAnimatePositionOnly()
initPrefersReducedMotion()
updateMotionValuesFromProps()
getClosestProjectingNode()
VisualElement:: (0 methods):
DOMVisualElement:: (1 method):
HTMLVisualElement_getComputedStyle()
HTMLVisualElement:: (0 methods):
SVGVisualElement:: (3 methods):
createDomMotionComponent()
useIsMounted()
use_force_update_useForceUpdate()
PopChildMeasure:: (79 methods):
PopChild()
newChildrenMap()
useUnmountEffect()
updateChildLookup()
onlyElements()
useResponsiveValue()
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_fe213e88_esm_noop()
actions_fe213e88_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_fe213e88_esm_registerAction()
_objectWithoutPropertiesLoose()
_objectWithoutProperties()
resolveWith()
use_gesture_core_esm_parse()
EventStore:: (0 methods):
TimeoutStore:: (0 methods):
Controller:: (62 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()
withIgnoreIMEEvents()
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()
setLocked()
ScrollLock()
useSlot()
Fill()
isFunction()
SlotComponent:: (209 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()
ListBox()
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()
useRadioGroup2()
useComputeControlledOrUncontrolledValue()
UnforwardedToggleGroupControlAsRadioGroup()
useControlledValue()
UnforwardedToggleGroupControlAsButtonGroup()
UnconnectedToggleGroupControl()
getIsChecked()
isNativeRadio()
toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
ToggleGroupControlOptionBase()
UnforwardedToggleGroupControlOptionIcon()
UnconnectedBorderControlStylePicker()
UnforwardedColorIndicator()
closeIfFocusOutside()
close()
UnconnectedInputControlSuffixWrapper()
select_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
icon_Icon()
select_control_useUniqueId()
SelectOptions()
UnforwardedSelectControl()
useControlledState()
floatClamp()
useControlledRangeValue()
range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
input_range_InputRange()
RangeMark()
RangeRail()
Marks()
useMarks()
SimpleTooltip()
useTooltipPosition()
computeResetValue()
UnforwardedRangeControl()
UnconnectedInputControlPrefixWrapper()
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()
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()
useSeparator2()
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()
Component()
GradientPicker()
cycleValue()
NavigableContainer:: (371 methods):
UnforwardedNavigableMenu()
dropdown_menu_mergeProps()
dropdown_menu_isFunction()
UnconnectedDropdownMenu()
palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
NameInput()
deduplicateElementSlugs()
getNameAndSlugForPosition()
ColorPickerPopover()
palette_edit_Option()
PaletteEditListView()
PaletteEdit()
UnForwardedTokenInput()
SuggestionsList()
ComboboxControl()
mapLegacyStatePropsToComponentProps()
proxyComposite()
useCompositeState()
modalize()
elementShouldBeHidden()
unmodalize()
useModalExitAnimation()
UnforwardedModal()
handleEscapeKeyDown()
confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
createSelectStore()
useSelectStoreProps()
useSelectStore()
useSelectLabel2()
useButton2()
useDisclosure2()
useDialogDisclosure2()
usePopoverAnchor2()
PopoverDisclosureArrow2()
useSelectArrow2()
clearChars()
isValidTypeaheadEvent()
isSelfTargetOrItem()
DS36B3MQ_getEnabledItems()
itemTextStartsWith()
getSameInitialItems()
getSelectedValues()
nextWithValue()
useSelectList2()
useSelectPopover2()
getMouseDestination()
hoveringInside()
movingToAnotherItem()
useCompositeHover2()
isSelected()
useSelectItem2()
getChildren()
useCheckboxCheck2()
useSelectItemCheck2()
custom_select_control_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
defaultRenderSelectedValue()
_CustomSelect()
CustomSelectItem()
custom_select_control_useDeprecatedProps()
applyOptionDeprecations()
getDescribedBy()
CustomSelectControl()
toDate()
startOfDay()
constructFrom()
addMonths()
subMonths()
buildFormatLongFn()
buildLocalizeFn()
buildMatchFn()
findKey()
findIndex()
buildMatchPatternFn()
getDefaultOptions()
setDefaultOptions()
getTimezoneOffsetInMilliseconds()
differenceInCalendarDays()
startOfYear()
getDayOfYear()
startOfWeek()
startOfISOWeek()
getISOWeekYear()
startOfISOWeekYear()
getISOWeek()
getWeekYear()
startOfWeekYear()
getWeek()
addLeadingZeros()
formatTimezoneShort()
formatTimezoneWithOptionalMinutes()
formatTimezone()
isProtectedDayOfYearToken()
isProtectedWeekYearToken()
warnOrThrowProtectedError()
message()
isDate()
isValid()
format()
cleanEscapedString()
isSameMonth()
isEqual()
isSameDay()
addDays()
addWeeks()
subWeeks()
endOfWeek()
isAfter()
isBefore()
getDaysInMonth()
setMonth()
set()
startOfToday()
setYear()
addYears()
subYears()
eachDayOfInterval()
eachMonthOfInterval()
startOfMonth()
endOfMonth()
eachWeekOfInterval()
inputToDate()
from12hTo24h()
from24hTo12h()
buildPadInputStateReducer()
validateInputElementTarget()
DatePicker()
date_Day()
getDayLabel()
startOfMinute()
time_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnforwardedToggleGroupControlOption()
TimeInput()
parseDayPeriod()
TimePicker()
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()
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_()
FormFileUpload()
UnforwardedFormToggle()
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()
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_()
addScreen()
removeScreen()
goTo()
getFocusSelectorsCopy()
goToParent()
routerReducer()
UnconnectedNavigatorProvider()
UnconnectedNavigatorScreen()
useNavigator()
useNavigatorButton()
UnconnectedNavigatorButton()
useNavigatorBackButton()
UnconnectedNavigatorBackButton()
UnconnectedNavigatorToParentButton()
useSpokenMessage()
getDefaultPoliteness()
getStatusLabel()
Notice()
NoticeList()
PanelHeader()
UnforwardedPanel()
UnforwardedPanelBody()
UnforwardedPanelRow()
Placeholder()
progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
animateProgressBar()
UnforwardedProgressBar()
buildTermsTree()
getSelectOptions()
TreeSelect()
AuthorSelect()
CategorySelect()
isSingleCategorySelection()
isMultipleCategorySelection()
QueryControls()
UnforwardedRadio()
UnforwardedRadioGroup()
generateOptionDescriptionId()
generateOptionId()
generateHelpId()
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()
useTabList2()
useTabPanel2()
UnforwardedTextControl()
UnforwardedTextareaControl()
Tip()
UnforwardedToggleControl()
onChangeToggle()
useToolbarItem2()
toolbar_item_ToolbarItem()
toolbar_button_useDeprecatedProps()
UnforwardedToolbarButton()
ToolbarGroupCollapsed()
isNestedArray()
ToolbarGroup()
createToolbarStore()
useToolbarStoreProps()
useToolbarStore()
useToolbar2()
UnforwardedToolbarContainer()
UnforwardedToolbar()
ToolbarDropdownMenu()
tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useToolsPanelHeader()
emptyMenuItems()
emptyState()
panelItemsReducer()
menuItemOrderReducer()
menuItemsReducer()
panelReducer()
resetAllFiltersReducer()
useToolsPanel()
useToolsPanelItem()
RovingTabIndex()
getRowFocusables()
UnforwardedTreeGrid()
UnforwardedTreeGridRow()
UnforwardedTreeGridItem()
UnforwardedTreeGridCell()
stopPropagation()
useSlotFills()
z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
UnconnectedZStack()
useNavigateRegions()
focusRegion()
onClick()
withFilters()
ensureFilteredComponent()
FilteredComponentRenderer:: (46 methods):
onHooksUpdated()
isComponentLike()
Component()
createMenuStore()
useMenuStoreProps()
useMenuStore()
getInitialFocus()
hasActiveItem()
useMenuButton2()
useAriaLabelledBy()
useMenuList2()
menuHasFocus()
useMenuItem2()
setMixed()
isNativeCheckbox()
getPrimitiveValue()
useCheckbox2()
createCheckboxStore()
useCheckboxStoreProps()
useCheckboxStore()
menu_item_checkbox_getPrimitiveValue()
getValue()
useMenuItemCheckbox2()
menu_item_radio_getValue()
useMenuItemRadio2()
useMenuGroup2()
useMenuGroupLabel2()
useMenuSeparator2()
dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
useTemporaryFocusVisibleFix()
useMenuItemCheck2()
theme_styles_EMOTION_STRINGIFIED_CSS_ERROR_()
generateThemeVariables()
validateInputs()
checkContrasts()
warnContrastIssues()
generateAccentDependentColors()
generateBackgroundDependentColors()
getForegroundForColor()
generateShades()
Theme()
use_event_useEvent()
getElementOffsetRect()
useTrackElementOffsetRect()
useOnValueUpdate()
Tabs()
createRenderStep(runNextFrame) X-Ref |
No description |
createRenderBatcher(scheduleNextBatch, allowKeepAlive) X-Ref |
No description |
useVisualElement(Component, visualState, props, createVisualElement) X-Ref |
No description |
isRefObject(ref) X-Ref |
No description |
useMotionRef(visualState, visualElement, externalRef) X-Ref |
Creates a ref function that, when called, hydrates the provided external ref and VisualElement. |
isVariantLabel(v) X-Ref |
Decides if the supplied variable is variant label |
isAnimationControls(v) X-Ref |
No description |
isControllingVariants(props) X-Ref |
No description |
isVariantNode(props) X-Ref |
No description |
getCurrentTreeVariants(props, context) X-Ref |
No description |
useCreateMotionContext(props) X-Ref |
No description |
variantLabelsAsDependency(prop) X-Ref |
No description |
loadFeatures(features) X-Ref |
No description |
motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) X-Ref |
Create a `motion` component. This function accepts a Component argument, which can be either a string (ie "div" for `motion.div`), or an actual React component. Alongside this is a config option which provides a way of rendering the provided component "offline", or outside the React render cycle. |
MotionComponent(props, externalRef) X-Ref |
No description |
useLayoutId({ layoutId }) X-Ref |
No description |
createMotionProxy(createConfig) X-Ref |
Convert any React component into a `motion` component. The provided component **must** use `React.forwardRef` to the underlying DOM component you want to animate. ```jsx const Component = React.forwardRef((props, ref) => { return <div ref={ref} /> }) const MotionComponent = motion(Component) ``` |
custom(Component, customMotionComponentConfig = {}) X-Ref |
No description |
isSVGComponent(Component) X-Ref |
No description |
addScaleCorrector(correctors) X-Ref |
No description |
isForcedMotionValue(key, { layout, layoutId }) X-Ref |
No description |
buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) X-Ref |
Build a CSS transform style from individual x/y/scale etc properties. This outputs with a default order of transforms/scales/rotations, this can be customised by providing a transformTemplate function. |
isString(v) X-Ref |
No description |
buildHTMLStyles(state, latestValues, options, transformTemplate) X-Ref |
No description |
copyRawValuesOnly(target, source, props) X-Ref |
No description |
useInitialMotionValues({ transformTemplate }, visualState, isStatic) X-Ref |
No description |
useStyle(props, visualState, isStatic) X-Ref |
No description |
useHTMLProps(props, visualState, isStatic) X-Ref |
No description |
isValidMotionProp(key) X-Ref |
Check whether a prop name is a valid `MotionProp` key. param: key - Name of the property to check returns: `true` is key is a valid `MotionProp`. |
loadExternalIsValidProp(isValidProp) X-Ref |
No description |
filterProps(props, isDom, forwardMotionProps) X-Ref |
No description |
calcOrigin(origin, offset, size) X-Ref |
No description |
calcSVGTransformOrigin(dimensions, originX, originY) X-Ref |
The SVG transform origin defaults are different to CSS and is less intuitive, so we use the measured dimensions of the SVG to reconcile these. |
buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) X-Ref |
Build SVG path properties. Uses the path's measured length to convert our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset and stroke-dasharray attributes. This function is mutative to reduce per-frame GC. |
buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, ...latest }, options, isSVGTag, transformTemplate) X-Ref |
Build SVG visual attrbutes, like cx and style.transform |
useSVGProps(props, visualState, _isStatic, Component) X-Ref |
No description |
createUseRender(forwardMotionProps = false) X-Ref |
No description |
renderHTML(element, { style, vars }, styleProp, projection) X-Ref |
No description |
renderSVG(element, renderState, _styleProp, projection) X-Ref |
No description |
scrapeMotionValuesFromProps(props, prevProps, visualElement) X-Ref |
No description |
scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement) X-Ref |
No description |
getValueState(visualElement) X-Ref |
No description |
resolveVariantFromProps(props, definition, custom, visualElement) 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 |
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 |
resolveVariant(visualElement, definition, custom) 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 |
getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) X-Ref |
No description |
clearTime() X-Ref |
No description |
isNone(value) X-Ref |
No description |
parseCSSVariable(current) X-Ref |
No description |
getVariableValue(current, element, depth = 1) X-Ref |
No description |
removeNonTranslationalTransform(visualElement) X-Ref |
No description |
measureAllKeyframes() X-Ref |
No description |
readAllKeyframes() X-Ref |
No description |
flushKeyframeResolvers() X-Ref |
No description |
Class: KeyframeResolver - X-Ref
parseHex(v) X-Ref |
No description |
test(v) 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 |
applyDefaultFilter(v) X-Ref |
Properties that should default to 1 or 100% |
animatable_none_getAnimatableNone(key, value) X-Ref |
No description |
makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) X-Ref |
If we encounter keyframes like "none" or "0" and we also have keyframes like "#fff" or "200px 200px" we want to find a keyframe to serve as a template for the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into zero equivalents, i.e. "#fff0" or "0px 0px". |
Class: DOMKeyframesResolver - X-Ref
memo(callback) X-Ref |
No description |
hasKeyframesChanged(keyframes) X-Ref |
No description |
canAnimate(keyframes, name, type, velocity) X-Ref |
No description |
Class: BaseAnimation - X-Ref
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 |
binarySubdivide(x, lowerBound, upperBound, mX1, mX2) X-Ref |
No description |
cubicBezier(mX1, mY1, mX2, mY2) 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 |
mixVisibility(origin, target) X-Ref |
Returns a function that, when provided a progress value between 0 and 1, will return the "none" or "hidden" string only when the progress is that of the origin or target. |
mixImmediate(a, b) X-Ref |
No description |
complex_mixNumber(a, b) X-Ref |
No description |
getMixer(a) X-Ref |
No description |
mixArray(a, b) X-Ref |
No description |
mixObject(a, b) X-Ref |
No description |
matchOrder(origin, target) X-Ref |
No description |
mix(from, to, p) 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 |
calcGeneratorDuration(generator) X-Ref |
Implement a practical max duration for keyframe generation to prevent infinite loops |
Class: MainThreadAnimation - X-Ref
Animation that runs on the main thread. Designed to be WAAPI-spec in the subset ofanimateValue(options) X-Ref |
No description |
isWaapiSupportedEasing(easing) X-Ref |
No description |
mapEasingToNativeEasingWithDefault(easing) X-Ref |
No description |
mapEasingToNativeEasing(easing) X-Ref |
No description |
animateStyle(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) X-Ref |
No description |
requiresPregeneratedKeyframes(options) X-Ref |
Check if an animation can run natively via WAAPI or requires pregenerated keyframes. WAAPI doesn't support spring or function easings so we run these as JS animation before handing off. |
pregenerateKeyframes(keyframes, options) X-Ref |
No description |
Class: AcceleratedAnimation - X-Ref
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 |
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, targetAndTransition, { 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(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) 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 |
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 |
resetDistortingTransform(key, visualElement, values, sharedAnimationValues) 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 |
resetSkewAndRotation(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 |
initPrefersReducedMotion() X-Ref |
No description |
updateMotionValuesFromProps(element, next, prev) X-Ref |
No description |
getClosestProjectingNode(visualElement) 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 |
styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
useDeprecatedProps(props) X-Ref |
No description |
useFlex(props) X-Ref |
No description |
UnconnectedFlex(props, forwardedRef) X-Ref |
No description |
useFlexItem(props) X-Ref |
No description |
useFlexBlock(props) X-Ref |
No description |
UnconnectedFlexBlock(props, forwardedRef) X-Ref |
No description |
getConvertedKey(key) X-Ref |
Flips a CSS property from left <-> right. return: {string} The flipped CSS property name, if applicable. param: {string} key The CSS property name. |
rtl(ltrStyles = {}, rtlStyles) X-Ref |
A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. return: {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer param: {import('react').CSSProperties} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable. param: {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided. |
useSpacer(props) X-Ref |
No description |
UnconnectedSpacer(props, forwardedRef) X-Ref |
No description |
UnconnectedFlexItem(props, forwardedRef) X-Ref |
No description |
truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
isValueDefined(value) X-Ref |
Determines if a value is null or undefined. return: {value is Exclude<T, null | undefined>} Whether value is not null or undefined. param: {T} value The value to check. |
isValueEmpty(value) X-Ref |
Determines if a value is empty, null, or undefined. return: {value is ("" | null | undefined)} Whether value is empty. param: {string | number | null | undefined} value The value to check. |
getDefinedValue(values = [], fallbackValue) X-Ref |
Get the first defined/non-null value from an array. return: {T} A defined value or the fallback value. param: {Array<T | null | undefined>} values Values to derive from. param: {T} fallbackValue Fallback value if there are no defined values. |
truncateMiddle(word, headLength, tailLength, ellipsis) X-Ref |
No description |
truncateContent(words = '', props) X-Ref |
No description |
useTruncate(props) X-Ref |
No description |
names(e,f) X-Ref |
No description |
colors_rgba(hexValue = '', alpha = 1) X-Ref |
Generating a CSS compliant rgba() color value. return: {string} The converted rgba() color value. param: {string} hexValue The hex value to convert to rgba(). param: {number} alpha The alpha value for opacity. |
getColorComputationNode() X-Ref |
return: {HTMLDivElement | undefined} The HTML element for color computation. |
isColor(value) X-Ref |
return: {boolean} Whether the value is a valid color. param: {string | unknown} value |
_getComputedBackgroundColor(backgroundColor) X-Ref |
Retrieves the computed background color. This is useful for getting the value of a CSS variable color. return: {string} The computed background color. param: {string | unknown} backgroundColor The background color to compute. |
getOptimalTextColor(backgroundColor) X-Ref |
Get the text shade optimized for readability, based on a background color. return: {string} The optimized text color (black or white). param: {string | unknown} backgroundColor The background color. |
getOptimalTextShade(backgroundColor) X-Ref |
Get the text shade optimized for readability, based on a background color. return: {string} The optimized text shade (dark or light). param: {string | unknown} backgroundColor The background color. |
text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
createHighlighterText({activeClassName = '',activeIndex = -1,activeStyle,autoEscape,caseSensitive = false,children,findChunks,highlightClassName = '',highlightStyle = {},highlightTag = 'mark',sanitize,searchWords = [],unhighlightClassName = '',unhighlightStyle}) X-Ref |
param: options param: options.activeClassName param: options.activeIndex param: options.activeStyle param: options.autoEscape param: options.caseSensitive param: options.children param: options.findChunks param: options.highlightClassName param: options.highlightStyle param: options.highlightTag param: options.sanitize param: options.searchWords param: options.unhighlightClassName param: options.unhighlightStyle |
getFontSize(size = BASE_FONT_SIZE) X-Ref |
No description |
getHeadingFontSize(size = 3) X-Ref |
No description |
getLineHeight(adjustLineHeightForInnerControls, lineHeight) X-Ref |
No description |
hook_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
useText(props) X-Ref |
param: {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props |
UnconnectedText(props, forwardedRef) X-Ref |
param: props param: forwardedRef |
base_label_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
Backdrop({disabled = false,isBorderless = false}) X-Ref |
Internal dependencies |
label_Label({children,hideLabelFromVision,htmlFor,...props}) X-Ref |
No description |
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(e, r) X-Ref |
No description |
_objectSpread2(e) 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_fe213e88_esm_noop() X-Ref |
No description |
actions_fe213e88_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_fe213e88_esm_registerAction(action) X-Ref |
No description |
_objectWithoutPropertiesLoose(source, excluded) X-Ref |
No description |
_objectWithoutProperties(source, excluded) X-Ref |
No description |
resolveWith(config = {}, resolvers) X-Ref |
No description |
use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) X-Ref |
No description |
Class: EventStore - X-Ref
Class: TimeoutStore - X-Ref
Class: Controller - X-Ref
setupGesture(ctrl, gestureKey) X-Ref |
No description |
resolveGestures(ctrl, internalHandlers) X-Ref |
No description |
sortHandlers(_handlers) X-Ref |
No description |
registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) X-Ref |
No description |
use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) X-Ref |
No description |
useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) X-Ref |
No description |
useDrag(handler, config) X-Ref |
No description |
usePinch(handler, config) X-Ref |
No description |
useWheel(handler, config) X-Ref |
No description |
useScroll(handler, config) X-Ref |
No description |
useMove(handler, config) X-Ref |
No description |
useHover(handler, config) X-Ref |
No description |
createUseGesture(actions) X-Ref |
No description |
useGesture(handlers, config) X-Ref |
No description |
getDragCursor(dragDirection) X-Ref |
Gets a CSS cursor value based on a drag direction. return: The CSS cursor value. param: dragDirection The drag direction. |
useDragCursor(isDragging, dragDirection) X-Ref |
Custom hook that renders a drag cursor when dragging. return: {string} The CSS cursor value. param: {boolean} isDragging The dragging state. param: {string} dragDirection The drag direction. |
useDraft(props) X-Ref |
No description |
mergeInitialState(initialState = initialInputControlState) X-Ref |
Prepares initialState for the reducer. return: Prepared initialState for the reducer param: initialState The initial state. |
inputControlStateReducer(composedStateReducers) X-Ref |
Creates the base reducer which may be coupled to a specializing reducer. As its final step, for all actions other than CONTROL, the base reducer passes the state and action on through the specializing reducer. The exception for CONTROL actions is because they represent controlled updates from props and no case has yet presented for their specialization. return: The reducer. param: composedStateReducers A reducer to specialize state changes. |
useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) X-Ref |
A custom hook that connects and external stateReducer with an internal reducer. This hook manages the internal state of InputControl. However, by connecting an external stateReducer function, other components can react to actions as well as modify state before it is applied. This technique uses the "stateReducer" design pattern: https://kentcdodds.com/blog/the-state-reducer-pattern/ return: State, dispatch, and a collection of actions. param: stateReducer An external state reducer. param: initialState The initial state for the reducer. param: onChangeHandler A handler for the onChange event. |
withIgnoreIMEEvents(keydownHandler) X-Ref |
A higher-order function that wraps a keydown event handler to ensure it is not an IME event. In CJK languages, an IME (Input Method Editor) is used to input complex characters. During an IME composition, keydown events (e.g. Enter or Escape) can be fired which are intended to control the IME and not the application. These events should be ignored by any application logic. return: A wrapped version of the given event handler that ignores IME events. param: keydownHandler The keydown event handler to execute after ensuring it was not an IME event. |
InputField({disabled = false,dragDirection = 'n',dragThreshold = 10,id,isDragEnabled = false,isPressEnterToChange = false,onBlur = input_field_noop,onChange = input_field_noop,onDrag = input_field_noop,onDragEnd = input_field_noop,onDragStart = input_field_noop,onKeyDown = input_field_noop,onValidate = input_field_noop,size = 'default',stateReducer = state => state,value: valueProp,type,...props}, ref) X-Ref |
No description |
font(value) X-Ref |
return: {string} Font rule value param: {keyof FONT} value Path of value from `FONT` |
box_sizing_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
input_control_useUniqueId(idProp) X-Ref |
No description |
UnforwardedInputControl(props, ref) X-Ref |
No description |
Dashicon({icon,className,size = 20,style = {},...extraProps}) X-Ref |
Internal dependencies |
Icon({icon = null,size = 'string' === typeof icon ? 20 : 24,...additionalProps}) X-Ref |
Internal dependencies |
button_useDeprecatedProps({__experimentalIsFocusable,isDefault,isPrimary,isSecondary,isTertiary,isLink,isPressed,isSmall,size,variant,describedBy,...otherProps}) X-Ref |
No description |
UnforwardedButton(props, ref) X-Ref |
No description |
number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
getNumber(value) X-Ref |
Parses and retrieves a number value. return: {number} The parsed number value. param: {unknown} value The incoming value. |
add(...args) X-Ref |
Safely adds 2 values. return: {number} The sum of values. param: {Array<number|string>} args Values to add together. |
subtract(...args) X-Ref |
Safely subtracts 2 values. return: {number} The difference of the values. param: {Array<number|string>} args Values to subtract together. |
getPrecision(value) X-Ref |
Determines the decimal position of a number value. return: {number} The number of decimal places. param: {number} value The number to evaluate. |
math_clamp(value, min, max) X-Ref |
Clamps a value based on a min/max range. return: {number} The clamped value. param: {number} value The value. param: {number} min The minimum range. param: {number} max The maximum range. |
roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) X-Ref |
Clamps a value based on a min/max range with rounding return: {number} The rounded and clamped value. param: {number | string} value The value. param: {number} min The minimum range. param: {number} max The maximum range. param: {number} step A multiplier for the value. |
getAlignmentProps(alignment, direction = 'row') X-Ref |
No description |
getValidChildren(children) X-Ref |
Gets a collection of available children elements from a React component's children prop. return: An array of available children. param: children |
useHStack(props) X-Ref |
No description |
UnconnectedHStack(props, forwardedRef) X-Ref |
No description |
UnforwardedNumberControl(props, forwardedRef) X-Ref |
No description |
angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
AngleCircle({value,onChange,...props}) X-Ref |
Internal dependencies |
getAngle(centerX, centerY, pointX, pointY) X-Ref |
No description |
UnforwardedAnglePickerControl(props, ref) X-Ref |
No description |
kebabCase(str) X-Ref |
Converts any string to kebab case. Backwards compatible with Lodash's `_.kebabCase()`. Backwards compatible with `_wp_to_kebab_case()`. return: Kebab-cased string param: str String to convert. |
escapeRegExp(string) X-Ref |
Escapes the RegExp special characters. return: Regex-escaped string. param: string Input string. |
filterOptions(search, options = [], maxResults = 10) X-Ref |
Internal dependencies |
getDefaultUseItems(autocompleter) X-Ref |
No description |
isRef(value) X-Ref |
Provides data to position an inner element of the floating element so that it appears centered to the reference element. This wraps the core `arrow` middleware to allow React refs as the element. |
deepEqual(a, b) X-Ref |
No description |
getDPR(element) X-Ref |
No description |
floating_ui_react_dom_roundByDPR(element, value) X-Ref |
No description |
useLatestRef(value) X-Ref |
No description |
useFloating(options) X-Ref |
Provides data to position a floating element. |
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> ); }; ``` |
useSlot(name) X-Ref |
Internal dependencies |
Fill({name,children}) X-Ref |
Internal dependencies |
isFunction(maybeFunc) X-Ref |
Whether the argument is a function. return: True if the argument is a function, false otherwise. param: maybeFunc The argument to check. |
Class: SlotComponent - X-Ref
rng() X-Ref |
No description |
unsafeStringify(arr, offset = 0) X-Ref |
No description |
stringify_stringify(arr, offset = 0) X-Ref |
No description |
v4(options, buf, offset) X-Ref |
No description |
StyleProvider(props) X-Ref |
No description |
fill_useForceUpdate() X-Ref |
No description |
fill_Fill(props) X-Ref |
No description |
slot_Slot(props, forwardedRef) X-Ref |
No description |
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> ); }; ``` |
ListBox({items,onSelect,selectedIndex,instanceId,listBoxId,className,Component = 'div'}) X-Ref |
No description |
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 |
useRadioGroup2(_a) X-Ref |
No description |
useComputeControlledOrUncontrolledValue(valueProp) X-Ref |
Used to determine, via an internal heuristics, whether an `undefined` value received for the `value` prop should be interpreted as the component being used in uncontrolled mode, or as an "empty" value for controlled mode. param: valueProp The received `value` |
UnforwardedToggleGroupControlAsRadioGroup({children,isAdaptiveWidth,label,onChange: onChangeProp,size,value: valueProp,id: idProp,...otherProps}, forwardedRef) X-Ref |
No description |
useControlledValue({defaultValue,onChange,value: valueProp}) X-Ref |
Simplified and improved implementation of useControlledState. return: The controlled value and the value setter. param: props param: props.defaultValue param: props.value param: props.onChange |
UnforwardedToggleGroupControlAsButtonGroup({children,isAdaptiveWidth,label,onChange,size,value: valueProp,id: idProp,...otherProps}, forwardedRef) X-Ref |
No description |
UnconnectedToggleGroupControl(props, forwardedRef) X-Ref |
No description |
getIsChecked(value, storeValue) X-Ref |
No description |
isNativeRadio(tagName, type) X-Ref |
No description |
toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
ToggleGroupControlOptionBase(props, forwardedRef) X-Ref |
No description |
UnforwardedToggleGroupControlOptionIcon(props, ref) X-Ref |
No description |
UnconnectedBorderControlStylePicker({onChange,...restProps}, forwardedRef) X-Ref |
No description |
UnforwardedColorIndicator(props, forwardedRef) X-Ref |
Internal dependencies |
closeIfFocusOutside() X-Ref |
Closes the popover when focus leaves it unless the toggle was pressed or focus has moved to a separate dialog. The former is to let the toggle handle closing the popover and the latter is to preserve presence in case a dialog has opened, allowing focus to return when it's dismissed. |
close() X-Ref |
No description |
UnconnectedInputControlSuffixWrapper(props, forwardedRef) X-Ref |
No description |
select_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
icon_Icon({icon,size = 24,...props}, ref) X-Ref |
Return an SVG icon. return: {JSX.Element} Icon component param: {IconProps} props icon is the SVG component to render param: {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element. |
select_control_useUniqueId(idProp) X-Ref |
No description |
SelectOptions({options}) X-Ref |
No description |
UnforwardedSelectControl(props, ref) X-Ref |
No description |
useControlledState(currentState, options = defaultOptions) X-Ref |
Custom hooks for "controlled" components to track and consolidate internal state and incoming values. This is useful for components that render `input`, `textarea`, or `select` HTML elements. https://reactjs.org/docs/forms.html#controlled-components At first, a component using useControlledState receives an initial prop value, which is used as initial internal state. This internal state can be maintained and updated without relying on new incoming prop values. Unlike the basic useState hook, useControlledState's state can be updated if a new incoming prop value is changed. return: {[T | "", (nextState: T) => void]} The controlled value and the value setter. param: {T | undefined} currentState The current value. param: {Options<T>} [options=defaultOptions] Additional options for the hook. |
floatClamp(value, min, max) X-Ref |
A float supported clamp function for a specific value. return: A (float) number param: value The value to clamp. param: min The minimum value. param: max The maximum value. |
useControlledRangeValue(settings) X-Ref |
Hook to store a clamped value, derived from props. return: The controlled value and the value setter. param: settings |
range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
input_range_InputRange(props, ref) X-Ref |
Internal dependencies |
RangeMark(props) X-Ref |
No description |
RangeRail(props) X-Ref |
No description |
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 |
computeResetValue({resetFallbackValue,initialPosition}) X-Ref |
Computes the value that `RangeControl` should reset to when pressing the reset button. |
UnforwardedRangeControl(props, forwardedRef) X-Ref |
No description |
UnconnectedInputControlPrefixWrapper(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 |
No description |
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 |
getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) X-Ref |
Handles legacy value + unit handling. This component use to manage both incoming value and units separately. Moving forward, ideally the value should be a string that contains both the value and unit, example: '10px' return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value param: rawValue The raw value as a string (may or may not contain the unit) param: fallbackUnit The unit used as a fallback, if not unit is detected in the `value` param: allowedUnits Units to derive from. |
hasUnits(units) X-Ref |
Checks if units are defined. return: Whether the list actually contains any units. param: units List of units. |
parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) X-Ref |
Parses a quantity and unit from a raw string value, given a list of allowed units and otherwise falling back to the default unit. return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value param: rawValue The raw value as a string (may or may not contain the unit) param: allowedUnits Units to derive from. |
getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) X-Ref |
Parses quantity and unit from a raw value. Validates parsed value, using fallback value if invalid. return: The extracted quantity and unit. The quantity can be `undefined` in case the raw value param: rawValue The next value. param: allowedUnits Units to derive from. param: fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value. param: fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value. |
getAccessibleLabelForUnit(unit) X-Ref |
Takes a unit value and finds the matching accessibility label for the unit abbreviation. return: a11y label for the unit abbreviation param: unit Unit value (example: `px`) |
filterUnitsWithSettings(allowedUnitValues = [], availableUnits) X-Ref |
Filters available units based on values defined a list of allowed unit values. return: Filtered units. param: allowedUnitValues Collection of allowed unit value strings. param: availableUnits Collection of available unit objects. |
getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) X-Ref |
Get available units with the unit for the currently selected value prepended if it is not available in the list of units. This is useful to ensure that the current value's unit is always accurately displayed in the UI, even if the intention is to hide the availability of that unit. return: A collection of units containing the unit for the current value. param: rawValue Selected value to parse. param: legacyUnit Legacy unit value, if rawValue needs it appended. param: units List of available units. |
useBorderControlDropdown(props) X-Ref |
No description |
UnitSelectControl({className,isUnitSelectTabbable: isTabbable = true,onChange,size = 'default',unit = 'px',units = CSS_UNITS,...props}, ref) X-Ref |
No description |
UnforwardedUnitControl(unitControlProps, forwardedRef) X-Ref |
No description |
useBorderControl(props) X-Ref |
No description |
utils_getAlignmentProps(alignment) X-Ref |
No description |
useGrid(props) X-Ref |
No description |
UnconnectedGrid(props, forwardedRef) X-Ref |
No description |
useBorderBoxControlSplitControls(props) X-Ref |
No description |
parseCSSUnitValue(toParse) X-Ref |
Parses a number and unit from a value. return: The extracted number and unit. param: toParse Value to parse |
createCSSUnitValue(value, unit) X-Ref |
Combines a value and a unit into a unit value. return: The unit value. param: value param: unit |
mode(values) X-Ref |
Finds the mode value out of the array passed favouring the first value as a tiebreaker. return: The mode value. param: values Values to determine the mode from. |
useBorderBoxControl(props) X-Ref |
No description |
box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
BoxControlIcon({size = 24,side = 'all',sides,...props}) X-Ref |
No description |
box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
utils_mode(arr) X-Ref |
Gets an items with the most occurrence within an array https://stackoverflow.com/a/20762713 return: The item with the most occurrences. param: arr Array of items to check. |
getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) X-Ref |
Gets the 'all' input value and unit from values data. return: A value + unit for the 'all' input. param: values Box values. param: selectedUnits Box units. param: availableSides Available box sides to evaluate. |
getAllUnitFallback(selectedUnits) X-Ref |
Determine the most common unit selection to use as a fallback option. return: Most common unit selection. param: selectedUnits Current unit selections for individual sides. |
isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) X-Ref |
Checks to determine if values are mixed. return: Whether values are mixed. param: values Box values. param: selectedUnits Box units. param: sides Available box sides to evaluate. |
isValuesDefined(values) X-Ref |
Checks to determine if values are defined. return: Whether values are mixed. param: values Box values. |
getInitialSide(isLinked, splitOnAxis) X-Ref |
Get initial selected side, factoring in whether the sides are linked, and whether the vertical / horizontal directions are grouped via splitOnAxis. return: The initial side. param: isLinked Whether the box control's fields are linked. param: splitOnAxis Whether splitting by horizontal or vertical axis. |
normalizeSides(sides) X-Ref |
Normalizes provided sides configuration to an array containing only top, right, bottom and left. This essentially just maps `horizontal` or `vertical` to their appropriate sides to facilitate correctly determining value for all input control. return: Normalized sides configuration. param: sides Available sides for box control. |
applyValueToSides(currentValues, newValue, sides) X-Ref |
Applies a value to an object representing top, right, bottom and left sides while taking into account any custom side configuration. return: Object containing the updated values for each side. param: currentValues The current values for each side. param: newValue The value to apply to the sides object. param: sides Array defining valid sides. |
AllInputControl({__next40pxDefaultSize,onChange = all_input_control_noop,onFocus = all_input_control_noop,values,sides,selectedUnits,setSelectedUnits,...props}) X-Ref |
No description |
BoxInputControls({__next40pxDefaultSize,onChange = input_controls_noop,onFocus = input_controls_noop,values,selectedUnits,setSelectedUnits,sides,...props}) X-Ref |
No description |
AxialInputControls({__next40pxDefaultSize,onChange,onFocus,values,selectedUnits,setSelectedUnits,sides,...props}) X-Ref |
No description |
LinkedButton({isLinked,...props}) X-Ref |
No description |
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 |
useSeparator2(_a) 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 __nextHasNoMarginBottom label="Is author" help="Is the user a author or not?" checked={ isChecked } onChange={ setChecked } /> ); }; ``` |
ClipboardButton({className,children,onCopy,onFinishCopy,text,...buttonProps}) X-Ref |
No description |
item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
useItemGroup(props) X-Ref |
Internal dependencies |
UnconnectedItemGroup(props, forwardedRef) X-Ref |
No description |
clampPercent(value) X-Ref |
Clamps a number between 0 and 100. return: Value clamped between 0 and 100. param: value Value to clamp. |
isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) X-Ref |
Check if a control point is overlapping with another. return: True if the point is overlapping. param: value Array of control points. param: initialIndex Index of the position to test. param: newPosition New position of the control point. param: minDistance Distance considered to be overlapping. |
addControlPoint(points, position, color) X-Ref |
Adds a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: position Position to insert the new point. param: color Color to update the control point at index. |
removeControlPoint(points, index) X-Ref |
Removes a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: index Index to remove. |
updateControlPoint(points, index, newPoint) X-Ref |
Updates a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: index Index to update. param: newPoint New control point to replace the index. |
updateControlPointPosition(points, index, newPosition) X-Ref |
Updates the position of a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: index Index to update. param: newPosition Position to move the control point at index. |
updateControlPointColor(points, index, newColor) X-Ref |
Updates the position of a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: index Index to update. param: newColor Color to update the control point at index. |
updateControlPointColorByPosition(points, position, newColor) X-Ref |
Updates the position of a control point from an array and returns the new array. return: New array of control points. param: points Array of control points. param: position Position of the color stop. param: newColor Color to update the control point at index. |
getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) X-Ref |
Gets the horizontal coordinate when dragging a control point with the mouse. return: Whole number percentage from the left. param: mouseXcoordinate Horizontal coordinate of the mouse position. param: containerElement Container for the gradient picker. |
ControlPointButton({isOpen,position,color,...additionalProps}) X-Ref |
No description |
GradientColorPickerDropdown({isRenderedInSidebar,className,...props}) X-Ref |
No description |
ControlPoints({disableRemove,disableAlpha,gradientPickerDomRef,ignoreMarkerPosition,value: controlPoints,onChange,onStartControlPointChange,onStopControlPointChange,__experimentalIsRenderedInSidebar}) X-Ref |
No description |
InsertPoint({value: controlPoints,onChange,onOpenInserter,onCloseInserter,insertPosition,disableAlpha,__experimentalIsRenderedInSidebar}) X-Ref |
No description |
CustomGradientBar({background,hasGradient,value: controlPoints,onChange,disableInserter = false,disableAlpha = false,__experimentalIsRenderedInSidebar = false}) X-Ref |
No description |
serializeGradientColor({type,value}) X-Ref |
External dependencies |
serializeGradientPosition(position) X-Ref |
No description |
serializeGradientColorStop({type,value,length}) X-Ref |
No description |
serializeGradientOrientation(orientation) X-Ref |
No description |
serializeGradient({type,orientation,colorStops}) X-Ref |
No description |
getLinearGradientRepresentation(gradientAST) X-Ref |
No description |
hasUnsupportedLength(item) X-Ref |
No description |
getGradientAstWithDefault(value) X-Ref |
No description |
getGradientAstWithControlPoints(gradientAST, newControlPoints) X-Ref |
No description |
getStopCssColor(colorStop) X-Ref |
No description |
custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
CustomGradientPicker({value,onChange,__experimentalIsRenderedInSidebar = false}) X-Ref |
CustomGradientPicker is a React component that renders a UI for specifying linear or radial gradients. Radial gradients are displayed in the picker as a slice of the gradient from the center to the outside. ```jsx import { CustomGradientPicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyCustomGradientPicker = () => { const [ gradient, setGradient ] = useState(); return ( <CustomGradientPicker value={ gradient } onChange={ setGradient } /> ); }; ``` |
SingleOrigin({className,clearGradient,gradients,onChange,value,...additionalProps}) X-Ref |
No description |
MultipleOrigin({className,clearGradient,gradients,onChange,value,headingLevel}) X-Ref |
No description |
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 |
deduplicateElementSlugs(elements) X-Ref |
No description |
getNameAndSlugForPosition(elements, slugPrefix) X-Ref |
Returns a name and slug for a palette item. The name takes the format "Color + id". To ensure there are no duplicate ids, this function checks all slugs. It expects slugs to be in the format: slugPrefix + color- + number. It then sets the id component of the new name based on the incremented id of the highest existing slug id. return: A name and slug for the new palette item. param: elements An array of color palette items. param: slugPrefix The slug prefix used to match the element slug. |
ColorPickerPopover({isGradient,element,onChange,popoverProps: receivedPopoverProps,onClose = () X-Ref |
No description |
palette_edit_Option({canOnlyChangeValues,element,onChange,onRemove,popoverProps: receivedPopoverProps,slugPrefix,isGradient}) X-Ref |
No description |
PaletteEditListView({elements,onChange,canOnlyChangeValues,slugPrefix,isGradient,popoverProps,addColorRef}) 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', disabled: true, }, { value: 'large', label: 'Large', disabled: false, }, ]; function MyComboboxControl() { const [ fontSize, setFontSize ] = useState(); const [ filteredOptions, setFilteredOptions ] = useState( options ); return ( <ComboboxControl __nextHasNoMarginBottom 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 |
No description |
proxyComposite(ProxiedComponent, propMap = {}) X-Ref |
No description |
useCompositeState(legacyStateOptions = {}) X-Ref |
_Note: please use the `Composite` component instead._ |
modalize(modalElement) X-Ref |
Hides all elements in the body element from screen-readers except the provided element and elements that should not be hidden from screen-readers. The reason we do this is because `aria-modal="true"` currently is bugged in Safari, and support is spotty in other browsers overall. In the future we should consider removing these helper functions in favor of `aria-modal="true"`. param: modalElement The element that should not be hidden. |
elementShouldBeHidden(element) X-Ref |
Determines if the passed element should not be hidden from screen readers. return: Whether the element should not be hidden from screen-readers. param: element The element that should be checked. |
unmodalize() X-Ref |
Accessibly reveals the elements hidden by the latest modal. |
useModalExitAnimation() X-Ref |
No description |
UnforwardedModal(props, forwardedRef) X-Ref |
No description |
handleEscapeKeyDown(event) X-Ref |
No description |
confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
createSelectStore(_a = {}) X-Ref |
No description |
useSelectStoreProps(store, update, props) X-Ref |
No description |
useSelectStore(props = {}) X-Ref |
No description |
useSelectLabel2(_a) X-Ref |
No description |
useButton2(props) X-Ref |
No description |
useDisclosure2(_a) X-Ref |
No description |
useDialogDisclosure2(_a) X-Ref |
No description |
usePopoverAnchor2(_a) X-Ref |
No description |
PopoverDisclosureArrow2(props) X-Ref |
No description |
useSelectArrow2(_a) X-Ref |
No description |
clearChars() X-Ref |
No description |
isValidTypeaheadEvent(event) X-Ref |
No description |
isSelfTargetOrItem(event, items) X-Ref |
No description |
DS36B3MQ_getEnabledItems(items) X-Ref |
No description |
itemTextStartsWith(item, text) X-Ref |
No description |
getSameInitialItems(items, char, activeId) X-Ref |
No description |
getSelectedValues(select) X-Ref |
No description |
nextWithValue(store, next) X-Ref |
No description |
useSelectList2(_a) X-Ref |
No description |
useSelectPopover2(_a) X-Ref |
No description |
getMouseDestination(event) X-Ref |
No description |
hoveringInside(event) X-Ref |
No description |
movingToAnotherItem(event) X-Ref |
No description |
useCompositeHover2(_a) X-Ref |
No description |
isSelected(storeValue, itemValue) X-Ref |
No description |
useSelectItem2(_a) X-Ref |
No description |
getChildren(props) X-Ref |
No description |
useCheckboxCheck2(_a) X-Ref |
No description |
useSelectItemCheck2(_a) X-Ref |
No description |
custom_select_control_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
defaultRenderSelectedValue(value) X-Ref |
No description |
_CustomSelect(props) X-Ref |
No description |
CustomSelectItem({children,...props}) X-Ref |
No description |
custom_select_control_useDeprecatedProps({__experimentalShowSelectedHint,...otherProps}) X-Ref |
No description |
applyOptionDeprecations({__experimentalHint,...rest}) X-Ref |
No description |
getDescribedBy(currentValue, describedBy) X-Ref |
No description |
CustomSelectControl(props) X-Ref |
No description |
toDate(argument) X-Ref |
param: argument - The value to convert returns: The parsed date in the local time zone |
startOfDay(date) X-Ref |
param: date - The original date returns: The start of a day |
constructFrom(date, value) X-Ref |
param: date - The reference date to take constructor from param: value - The value to create the date returns: Date initialized using the given date and value |
addMonths(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of months to be added. returns: The new date with the months added |
subMonths(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of months to be subtracted. returns: The new date with the months subtracted |
buildFormatLongFn(args) X-Ref |
No description |
buildLocalizeFn(args) X-Ref |
The tuple of localized month values. The first element represents January. |
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 |
getDefaultOptions() X-Ref |
author: Sasha Koss [@kossnocorp](https://github.com/kossnocorp) author: Lesha Koss [@leshakoss](https://github.com/leshakoss) |
setDefaultOptions(newOptions) 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. |
differenceInCalendarDays(dateLeft, dateRight) X-Ref |
param: dateLeft - The later date param: dateRight - The earlier date returns: The number of calendar days |
startOfYear(date) X-Ref |
param: date - The original date returns: The start of a year |
getDayOfYear(date) X-Ref |
param: date - The given date returns: The day of year |
startOfWeek(date, options) X-Ref |
param: date - The original date param: options - An object with options returns: The start of a week |
startOfISOWeek(date) X-Ref |
param: date - The original date returns: The start of an ISO week |
getISOWeekYear(date) X-Ref |
param: date - The given date returns: The ISO week-numbering year |
startOfISOWeekYear(date) X-Ref |
param: date - The original date returns: The start of an ISO week-numbering year |
getISOWeek(date) X-Ref |
param: date - The given date returns: The ISO week |
getWeekYear(date, options) X-Ref |
param: date - The given date param: options - An object with options. returns: The local week-numbering year |
startOfWeekYear(date, options) X-Ref |
param: date - The original date param: options - An object with options returns: The start of a week-numbering year |
getWeek(date, options) X-Ref |
param: date - The given date param: options - An object with options returns: The week |
addLeadingZeros(number, targetLength) X-Ref |
No description |
formatTimezoneShort(offset, delimiter = "") X-Ref |
No description |
formatTimezoneWithOptionalMinutes(offset, delimiter) X-Ref |
No description |
formatTimezone(offset, delimiter = "") X-Ref |
No description |
isProtectedDayOfYearToken(token) X-Ref |
No description |
isProtectedWeekYearToken(token) X-Ref |
No description |
warnOrThrowProtectedError(token, format, input) X-Ref |
No description |
message(token, format, input) X-Ref |
No description |
isDate(value) X-Ref |
param: value - The value to check returns: True if the given value is a date |
isValid(date) X-Ref |
param: date - The date to check returns: The date is valid |
format(date, formatStr, options) X-Ref |
param: date - The original date param: format - The string of tokens param: options - An object with options returns: The formatted date string |
cleanEscapedString(input) X-Ref |
No description |
isSameMonth(dateLeft, dateRight) X-Ref |
param: dateLeft - The first date to check param: dateRight - The second date to check returns: The dates are in the same month (and year) |
isEqual(leftDate, rightDate) X-Ref |
param: dateLeft - The first date to compare param: dateRight - The second date to compare returns: The dates are equal |
isSameDay(dateLeft, dateRight) X-Ref |
param: dateLeft - The first date to check param: dateRight - The second date to check returns: The dates are in the same day (and year and month) |
addDays(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of days to be added. returns: The new date with the days added |
addWeeks(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of weeks to be added. returns: The new date with the weeks added |
subWeeks(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of weeks to be subtracted. returns: The new date with the weeks subtracted |
endOfWeek(date, options) X-Ref |
param: date - The original date param: options - An object with options returns: The end of a week |
isAfter(date, dateToCompare) X-Ref |
param: date - The date that should be after the other one to return true param: dateToCompare - The date to compare with returns: The first date is after the second date |
isBefore(date, dateToCompare) X-Ref |
param: date - The date that should be before the other one to return true param: dateToCompare - The date to compare with returns: The first date is before the second date |
getDaysInMonth(date) X-Ref |
param: date - The given date returns: The number of days in a month |
setMonth(date, month) X-Ref |
param: date - The date to be changed param: month - The month index to set (0-11) returns: The new date with the month set |
set(date, values) X-Ref |
param: date - The date to be changed param: values - The date values to be set returns: The new date with options set |
startOfToday() X-Ref |
returns: The start of today |
setYear(date, year) X-Ref |
param: date - The date to be changed param: year - The year of the new date returns: The new date with the year set |
addYears(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of years to be added. returns: The new date with the years added |
subYears(date, amount) X-Ref |
param: date - The date to be changed param: amount - The amount of years to be subtracted. returns: The new date with the years subtracted |
eachDayOfInterval(interval, options) X-Ref |
param: interval - The interval. param: options - An object with options. returns: The array with starts of days from the day of the interval start to the day of the interval end |
eachMonthOfInterval(interval, options) X-Ref |
param: interval - The interval returns: The array with starts of months from the month of the interval start to the month of the interval end |
startOfMonth(date) X-Ref |
param: date - The original date returns: The start of a month |
endOfMonth(date) X-Ref |
param: date - The original date returns: The end of a month |
eachWeekOfInterval(interval, options) X-Ref |
param: interval - The interval. param: options - An object with options. returns: The array with starts of weeks from the week of the interval start to the week of the interval end |
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. |
from12hTo24h(hours, isPm) X-Ref |
Converts a 12-hour time to a 24-hour time. param: hours param: isPm |
from24hTo12h(hours) X-Ref |
Converts a 24-hour time to a 12-hour time. param: hours |
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. |
validateInputElementTarget(event) X-Ref |
Validates the target of a React event to ensure it is an input element and that the input is valid. param: event |
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(date) X-Ref |
param: date - The original date returns: The start of a minute |
time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
UnforwardedToggleGroupControlOption(props, ref) X-Ref |
No description |
TimeInput({value: valueProp,defaultValue,is12Hour,label,minutesProps,onChange}) X-Ref |
No description |
parseDayPeriod(_hours) X-Ref |
No description |
TimePicker({is12Hour,currentTime,onChange,dateOrder: dateOrderProp,hideLabelFromVision = false}) 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 /> ); }; ``` |
date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
UnforwardedDateTimePicker({currentDate,is12Hour,dateOrder,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. |
disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
Disabled({className,children,isDisabled = true,...props}) X-Ref |
`Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction. _Note: this component may not behave as expected in browsers that don't support the `inert` HTML attribute. We recommend adding the official WICG polyfill when using this component in your project._ |
Draggable({children,onDragStart,onDragOver,onDragEnd,appendToOwnerDocument = false,cloneClassname,elementId,transferData,__experimentalTransferDataType: transferDataType = 'text',__experimentalDragComponent: dragComponent}) X-Ref |
`Draggable` is a Component that provides a way to set up a cross-browser (including IE) customizable drag image and the transfer data for the drag event. It decouples the drag handle and the element to drag: use it by wrapping the component that will become the drag handle and providing the DOM ID of the element to drag. Note that the drag handle needs to declare the `draggable="true"` property and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable` takes care of the logic to setup the drag image and the transfer data, but is not concerned with creating an actual DOM element that is draggable. ```jsx import { Draggable, Panel, PanelBody } from '@wordpress/components'; import { Icon, more } from '@wordpress/icons'; const MyDraggable = () => ( <div id="draggable-panel"> <Panel header="Draggable panel"> <PanelBody> <Draggable elementId="draggable-panel" transferData={ {} }> { ( { onDraggableStart, onDraggableEnd } ) => ( <div className="example-drag-handle" draggable onDragStart={ onDraggableStart } onDragEnd={ onDraggableEnd } > <Icon icon={ more } /> </div> ) } </Draggable> </PanelBody> </Panel> </div> ); ``` |
end(event) X-Ref |
Removes the element clone, resets cursor, and removes drag listener. param: event The non-custom DragEvent. |
start(event) X-Ref |
This method does a couple of things: - Clones the current element and spawns clone over original element. - Adds a fake temporary drag image to avoid browser defaults. - Sets transfer data. - Adds dragover listener. param: event The non-custom DragEvent. |
over(e) X-Ref |
No description |
DropZoneComponent({className,label,onFilesDrop,onHTMLDrop,onDrop,...restProps}) X-Ref |
`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. ```jsx import { DropZone } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDropZone = () => { const [ hasDropped, setHasDropped ] = useState( false ); return ( <div> { hasDropped ? 'Dropped!' : 'Drop something here' } <DropZone onFilesDrop={ () => setHasDropped( true ) } onHTMLDrop={ () => setHasDropped( true ) } onDrop={ () => setHasDropped( true ) } /> </div> ); } ``` |
DropZoneProvider({children}) X-Ref |
WordPress dependencies |
getDefaultColors(palette) X-Ref |
Calculate the brightest and darkest values from a color palette. return: Tuple of the darkest color and brightest color. param: palette Color palette for the theme. |
getGradientFromCSSColors(colors = [], angle = '90deg') X-Ref |
Generate a duotone gradient from a list of colors. return: CSS gradient string for the duotone swatch. param: colors CSS color strings. param: angle CSS gradient angle. |
getColorStopsFromColors(colors) X-Ref |
Convert a color array to an array of color stops. return: Color stop information. param: colors CSS colors array |
getColorsFromColorStops(colorStops = []) X-Ref |
Convert a color stop array to an array colors. return: CSS colors array. param: colorStops Color stop information. |
DuotoneSwatch({values}) X-Ref |
No description |
ColorOption({label,value,colors,disableCustomColors,enableAlpha,onChange}) X-Ref |
No description |
ColorListPicker({colors,labels,value = [],disableCustomColors,enableAlpha,onChange}) X-Ref |
No description |
CustomDuotoneBar({value,onChange}) X-Ref |
No description |
DuotonePicker({asButtons,loop,clearable = true,unsetable = true,colorPalette,duotonePalette,disableCustomColors,disableCustomDuotone,value,onChange,'aria-label': ariaLabel,'aria-labelledby': ariaLabelledby,...otherProps}) X-Ref |
```jsx import { DuotonePicker, DuotoneSwatch } from '@wordpress/components'; import { useState } from '@wordpress/element'; const DUOTONE_PALETTE = [ { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' }, { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' }, ]; const COLOR_PALETTE = [ { color: '#ff4747', name: 'Red', slug: 'red' }, { color: '#fcff41', name: 'Yellow', slug: 'yellow' }, { color: '#000097', name: 'Blue', slug: 'blue' }, { color: '#8c00b7', name: 'Purple', slug: 'purple' }, ]; const Example = () => { const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] ); return ( <> <DuotonePicker duotonePalette={ DUOTONE_PALETTE } colorPalette={ COLOR_PALETTE } value={ duotone } onChange={ setDuotone } /> <DuotoneSwatch values={ duotone } /> </> ); }; ``` |
UnforwardedExternalLink(props, ref) X-Ref |
Internal dependencies |
getExtension(filename = '') X-Ref |
Gets the extension of a file name. return: The extension of the file name. param: filename The file name. |
isVideoType(filename = '') X-Ref |
Checks if a file is a video. return: Whether the file is a video. param: filename The file name. |
fractionToPercentage(fraction) X-Ref |
Transforms a fraction value to a percentage value. return: A percentage value. param: fraction The fraction value. |
focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
FocalPointPickerControls({__nextHasNoMarginBottom,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 |
No description |
media_Media({alt,autoPlay,src,onLoad,mediaRef,muted = true,...props}) X-Ref |
No description |
FocalPointPicker({__nextHasNoMarginBottom,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 __nextHasNoMarginBottom url={ url } value={ focalPoint } onDragStart={ setFocalPoint } onDrag={ setFocalPoint } onChange={ setFocalPoint } /> <div style={ style } /> </> ); }; ``` |
FocusableIframe({iframeRef,...props}) X-Ref |
Internal dependencies |
isSimpleCssValue(value) X-Ref |
Some themes use css vars for their font sizes, so until we have the way of calculating them don't display them. return: Whether the value is a simple css value. param: value The value that is checked. |
getCommonSizeUnit(fontSizes) X-Ref |
If all of the given font sizes have the same unit (e.g. 'px'), return that unit. Otherwise return null. return: The common unit, or null. param: fontSizes List of font sizes. |
font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
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> ); ``` |
UnforwardedFormToggle(props, ref) X-Ref |
No description |
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](https://react.dev/reference/react-dom/components#form-components) 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 |
No description |
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 |
KeyboardShortcut({target,callback,shortcut,bindGlobal,eventName}) X-Ref |
No description |
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. |
UnforwardedNavigationBackButton({backButtonLabel,className,href,onClick,parentMenu}, ref) X-Ref |
No description |
NavigationGroup({children,className,title}) X-Ref |
NavigationItemBaseContent(props) X-Ref |
No description |
NavigationItemBase(props) X-Ref |
No description |
NavigationItem(props) X-Ref |
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 |
No description |
NavigationMenu(props) X-Ref |
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 |
addScreen({screens}, screen) X-Ref |
No description |
removeScreen({screens}, screen) X-Ref |
No description |
goTo(state, path, options = {}) X-Ref |
No description |
getFocusSelectorsCopy() X-Ref |
No description |
goToParent(state, options = {}) X-Ref |
No description |
routerReducer(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 |
No description |
UnforwardedPanelBody(props, ref) X-Ref |
No description |
UnforwardedPanelRow({className,children}, ref) X-Ref |
Internal 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" />; ``` |
progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
animateProgressBar(isRtl = false) X-Ref |
Internal dependencies |
UnforwardedProgressBar(props, ref) X-Ref |
No description |
buildTermsTree(flatTerms) X-Ref |
Returns terms in a tree form. return: Terms in tree format. param: flatTerms Array of terms in flat format. |
getSelectOptions(tree, level = 0) X-Ref |
No description |
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 __nextHasNoMarginBottom 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 |
No description |
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({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 |
No description |
UnforwardedRadioGroup({label,checked,defaultChecked,disabled,onChange,children,...props}, ref) X-Ref |
No description |
generateOptionDescriptionId(radioGroupId, index) X-Ref |
No description |
generateOptionId(radioGroupId, index) X-Ref |
No description |
generateHelpId(radioGroupId) X-Ref |
No description |
RadioControl(props) X-Ref |
Render a user interface to select the user type using radio inputs. ```jsx import { RadioControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyRadioControl = () => { const [ option, setOption ] = useState( 'a' ); return ( <RadioControl label="User type" help="The type of the current user" selected={ option } options={ [ { label: 'Author', value: 'a' }, { label: 'Editor', value: 'e' }, ] } onChange={ ( value ) => setOption( value ) } /> ); }; ``` |
__() X-Ref |
No description |
Resizer() X-Ref |
No description |
__() X-Ref |
No description |
Resizable(props) X-Ref |
No description |
useResizeLabel({axis,fadeTimeout = 180,onResize = utils_noop,position = POSITIONS.bottom,showPx = false}) X-Ref |
Custom hook that manages resize listener events. It also provides a label based on current resize width x height values. return: Properties for hook. param: props param: props.axis Only shows the label corresponding to the axis. param: props.fadeTimeout Duration (ms) before deactivating the resize label. param: props.onResize Callback when a resize occurs. Provides { width, height } callback. param: props.position Adjusts label value. param: props.showPx Whether to add `PX` to the label. |
getSizeLabel({axis,height,moveX = false,moveY = false,position = POSITIONS.bottom,showPx = false,width}) X-Ref |
Gets the resize label based on width and height values (as well as recent changes). return: The rendered label. param: props param: props.axis Only shows the label corresponding to the axis. param: props.height Height value. param: props.moveX Recent width (x axis) changes. param: props.moveY Recent width (y axis) changes. param: props.position Adjusts label value. param: props.showPx Whether to add `PX` to the label. param: props.width Width value. |
resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
resize_tooltip_label_Label({label,position = POSITIONS.corner,zIndex = 1000,...props}, ref) X-Ref |
No description |
ResizeTooltip({axis,className,fadeTimeout = 180,isVisible = true,labelRef,onResize = resize_tooltip_noop,position = POSITIONS.bottom,showPx = true,zIndex = 1000,...props}, ref) X-Ref |
No description |
UnforwardedResizableBox({className,children,showHandle = true,__experimentalShowTooltip: showTooltip = false,__experimentalTooltipProps: tooltipProps = {},...props}, ref) X-Ref |
No description |
ResponsiveWrapper({naturalWidth,naturalHeight,children,isInline = false}) X-Ref |
A wrapper component that maintains its aspect ratio when resized. ```jsx import { ResponsiveWrapper } from '@wordpress/components'; const MyResponsiveWrapper = () => ( <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }> <img src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" alt="WordPress" /> </ResponsiveWrapper> ); ``` |
sendResize() X-Ref |
No description |
removeViewportStyles(ruleOrNode) X-Ref |
No description |
SandBox({html = '',title = '',type,styles = [],scripts = [],onFocus,tabIndex}) X-Ref |
This component provides an isolated environment for arbitrary HTML via iframes. ```jsx import { SandBox } from '@wordpress/components'; const MySandBox = () => ( <SandBox html="<p>Content</p>" title="SandBox" type="embed" /> ); ``` |
isFrameAccessible() X-Ref |
No description |
trySandBox(forceRerender = false) X-Ref |
No description |
tryNoForceSandBox() X-Ref |
No description |
checkMessageForResize(event) X-Ref |
No description |
snackbar_useSpokenMessage(message, politeness) X-Ref |
Custom hook which announces the message with the given politeness, if a valid message is provided. param: message Message to announce. param: politeness Politeness to announce. |
UnforwardedSnackbar({className,children,spokenMessage = children,politeness = 'polite',actions = [],onRemove,icon = null,explicitDismiss = false,onDismiss,listRef}, ref) X-Ref |
No description |
dismissMe(event) X-Ref |
No description |
onActionClick(event, onClick) X-Ref |
No description |
SnackbarList({notices,className,children,onRemove}) X-Ref |
Renders a list of notices. ```jsx const MySnackbarListNotice = () => ( <SnackbarList notices={ notices } onRemove={ removeNotice } /> ); ``` |
spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
UnforwardedSpinner({className,...props}, forwardedRef) X-Ref |
No description |
UnconnectedSurface(props, forwardedRef) X-Ref |
No description |
createTabStore(_a = {}) X-Ref |
No description |
useTabStoreProps(store, update, props) X-Ref |
No description |
useTabStore(props = {}) X-Ref |
No description |
useTabList2(_a) X-Ref |
No description |
useTabPanel2(_a) X-Ref |
No description |
UnforwardedTextControl(props, ref) X-Ref |
Internal dependencies |
UnforwardedTextareaControl(props, ref) X-Ref |
No description |
Tip(props) X-Ref |
Internal dependencies |
UnforwardedToggleControl({__nextHasNoMarginBottom,label,checked,help,className,onChange,disabled}, ref) X-Ref |
No description |
onChangeToggle(event) X-Ref |
No description |
useToolbarItem2(_a) X-Ref |
No description |
toolbar_item_ToolbarItem({children,as: Component,...props}, ref) X-Ref |
Internal dependencies |
toolbar_button_useDeprecatedProps({isDisabled,...otherProps}) X-Ref |
No description |
UnforwardedToolbarButton(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 |
useToolbar2(_a) 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 |
emptyMenuItems() X-Ref |
No description |
emptyState() X-Ref |
No description |
panelItemsReducer(panelItems, action) X-Ref |
No description |
menuItemOrderReducer(menuItemOrder, action) X-Ref |
No description |
menuItemsReducer(state, action) X-Ref |
No description |
panelReducer(state, action) X-Ref |
No description |
resetAllFiltersReducer(filters, action) X-Ref |
No description |
useToolsPanel(props) X-Ref |
No description |
useToolsPanelItem(props) X-Ref |
No description |
RovingTabIndex({children}) X-Ref |
Provider for adding roving tab index behaviors to tree grid structures. |
getRowFocusables(rowElement) X-Ref |
Return focusables in a row element, excluding those from other branches nested within the row. return: The array of focusables in the row. param: rowElement The DOM element representing the row. |
UnforwardedTreeGrid({children,onExpandRow = () X-Ref |
Renders both a table and tbody element, used to create a tree hierarchy. |
UnforwardedTreeGridRow({children,level,positionInSet,setSize,isExpanded,...props}, ref) X-Ref |
Internal dependencies |
UnforwardedTreeGridItem({children,...props}, ref) X-Ref |
Internal dependencies |
UnforwardedTreeGridCell({children,withoutGridItem = false,...props}, ref) X-Ref |
No description |
stopPropagation(event) X-Ref |
No description |
useSlotFills(name) X-Ref |
Internal dependencies |
z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
UnconnectedZStack(props, forwardedRef) X-Ref |
No description |
useNavigateRegions(shortcuts = defaultShortcuts) X-Ref |
No description |
focusRegion(offset) X-Ref |
No description |
onClick() X-Ref |
No description |
withFilters(hookName) X-Ref |
Creates a higher-order component which adds filtering capability to the wrapped component. Filters get applied when the original component is about to be mounted. When a filter is added or removed that matches the hook name, the wrapped component re-renders. return: Higher-order component factory. param: hookName Hook name exposed to be used by filters. |
ensureFilteredComponent() X-Ref |
Initializes the FilteredComponent variable once, if not already assigned. Subsequent calls are effectively a noop. |
Class: FilteredComponentRenderer - X-Ref
onHooksUpdated(updatedHookName) X-Ref |
When a filter is added or removed for the matching hook name, each mounted instance should re-render with the new filters having been applied to the original component. param: updatedHookName Name of the hook that was updated. |
isComponentLike(object) X-Ref |
Returns true if the given object is component-like. An object is component- like if it is an instance of wp.element.Component, or is a function. return: Whether object is component-like. param: object Object to test. |
Component(props, ref) X-Ref |
Override the default edit UI to include notices if supported. Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations` and `noticeUI`. ```jsx import { withNotices, Button } from '@wordpress/components'; const MyComponentWithNotices = withNotices( ( { noticeOperations, noticeUI } ) => { const addError = () => noticeOperations.createErrorNotice( 'Error message' ); return ( <div> { noticeUI } <Button variant="secondary" onClick={ addError }> Add error </Button> </div> ); } ); ``` return: Wrapped component. param: OriginalComponent Original component. |
createMenuStore(_a = {}) X-Ref |
No description |
useMenuStoreProps(store, update, props) X-Ref |
No description |
useMenuStore(props = {}) X-Ref |
No description |
getInitialFocus(event, dir) X-Ref |
No description |
hasActiveItem(items, excludeElement) X-Ref |
No description |
useMenuButton2(_a) X-Ref |
No description |
useAriaLabelledBy(_a) X-Ref |
No description |
useMenuList2(_a) X-Ref |
No description |
menuHasFocus(baseElement, items, currentTarget) X-Ref |
No description |
useMenuItem2(_a) X-Ref |
No description |
setMixed(element, mixed) X-Ref |
No description |
isNativeCheckbox(tagName, type) X-Ref |
No description |
getPrimitiveValue(value) X-Ref |
No description |
useCheckbox2(_a) X-Ref |
No description |
createCheckboxStore(props = {}) X-Ref |
No description |
useCheckboxStoreProps(store, update, props) X-Ref |
No description |
useCheckboxStore(props = {}) X-Ref |
No description |
menu_item_checkbox_getPrimitiveValue(value) X-Ref |
No description |
getValue(storeValue, value, checked) X-Ref |
No description |
useMenuItemCheckbox2(_a) X-Ref |
No description |
menu_item_radio_getValue(prevValue, value, checked) X-Ref |
No description |
useMenuItemRadio2(_a) X-Ref |
No description |
useMenuGroup2(props) X-Ref |
No description |
useMenuGroupLabel2(props) X-Ref |
No description |
useMenuSeparator2(_a) X-Ref |
No description |
dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() X-Ref |
No description |
useTemporaryFocusVisibleFix({onBlur: onBlurProp}) X-Ref |
WordPress dependencies |
useMenuItemCheck2(_a) 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> ); }; ``` |
use_event_useEvent(callback) X-Ref |
Creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks. Throws when used in the render phase. |
getElementOffsetRect(element) X-Ref |
Returns the position and dimensions of an element, relative to its offset parent, with subpixel precision. Values reflect the real measures before any potential scaling distortions along the X and Y axes. Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver` entries are not suitable, such as when the element is transformed, and when `element.offset<Top|Left|Width|Height>` methods are not precise enough. **Note:** in some contexts, like when the scale is 0, this method will fail because it's impossible to calculate a scaling ratio. When that happens, it will return `undefined`. |
useTrackElementOffsetRect(targetElement) X-Ref |
Tracks the position and dimensions of an element, relative to its offset parent. The element can be changed dynamically. **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s documentation for more details). When that happens, this hook will attempt to measure again after a frame, and if that fails, it will poll every 100 milliseconds until it succeeds. |
useOnValueUpdate(/*** The value to watch for changes.*/value,/*** Callback to fire when the value changes.*/onUpdate) X-Ref |
Calls the `onUpdate` callback when the `value` changes. |
Tabs({selectOnMove = true,defaultTabId,orientation = 'horizontal',onSelect,children,selectedTabId}) 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 |
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 |
matcher(match) X-Ref |
No description |
r(a) X-Ref |
__webpack_require__(moduleId) X-Ref |
No description |
r(e) X-Ref |
No description |
noop(..._) X-Ref |
No description |
shallowEqual(a, b) X-Ref |
No description |
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 |
PBFD2E7P_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 |
removeUndefinedValues(obj) 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 |
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 |
isVisible(element) X-Ref |
No description |
isTextField(element) X-Ref |
No description |
isTextbox(element) X-Ref |
No description |
getTextboxValue(element) X-Ref |
No description |
getTextboxSelection(element) X-Ref |
No description |
getPopupRole(element, fallback) X-Ref |
No description |
getPopupItemRole(element, fallback) 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 |
getInputType(event) X-Ref |
No description |
queueBeforeEvent(element, type, callback, timeout) 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 |
useTransactionState(callback) X-Ref |
No description |
useMergeRefs(...refs) 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 |
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 |
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 |
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 |
_2GXGCHW6_useStore(createStore, props) X-Ref |
No description |
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 |
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 |
flipItems(items, activeId, shouldInsertNullItem = false) X-Ref |
No description |
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 |
_5VQZOHHZ_flipItems(items, activeId, shouldInsertNullItem = false) X-Ref |
No description |
_5VQZOHHZ_findFirstEnabledItem(items, excludeId) X-Ref |
No description |
getEnabledItem(store, id) X-Ref |
No description |
_5VQZOHHZ_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 |
forwardRef2(render) X-Ref |
No description |
memo2(Component, propsAreEqual) X-Ref |
No description |
HKOOKEDE_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 |
isSafariFocusAncestor(element) X-Ref |
No description |
markSafariFocusAncestor(element, value) X-Ref |
No description |
isAlwaysFocusVisible(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 |
useFocusable2(_a) 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 |
useComposite2(_a) X-Ref |
No description |
useGroup2(props) X-Ref |
No description |
useCompositeGroup2(_a) X-Ref |
No description |
useGroupLabel2(props) X-Ref |
No description |
useCollectionItem2(_a) X-Ref |
No description |
isNativeClick(event) X-Ref |
No description |
useCommand2(_a) 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 |
useCompositeItem2(_a) X-Ref |
No description |
useCompositeRow2(_a) 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 |
useRole2(props) X-Ref |
No description |
Role2(props) X-Ref |
No description |
useHovercardAnchor2(_a) X-Ref |
No description |
createRemoveStoreCallback(store) X-Ref |
No description |
useTooltipAnchor2(_a) 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 |
_63XF7ACK_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 |
AOUGVQZ3_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 |
BSEL4YAF_afterPaint(cb) X-Ref |
No description |
parseCSSTime(...times) X-Ref |
No description |
isHidden(mounted, hidden, alwaysVisible) X-Ref |
No description |
DialogBackdrop({store,backdrop,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 |
useVisuallyHidden2(props) X-Ref |
No description |
useFocusTrap2(props) 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 |
hasWindow() 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 |
isTopLayer(element) X-Ref |
No description |
isContainingBlock(elementOrCss) 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 |
getFrameElement(win) 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 |
floating_ui_dom_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 |
usePopover2(_a) X-Ref |
No description |
isMovingOnHovercard(target, card, anchor, nested) X-Ref |
No description |
useAutoFocusOnHide(_a) X-Ref |
No description |
useHovercard2(_a) X-Ref |
No description |
useTooltip2(_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 |
addDescribedById(element) 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/main/packages/ariakit-react-core/src/utils/hooks.ts param: {import('react').EffectCallback} effect param: {import('react').DependencyList} deps |
useContextSystemBridge({value}) X-Ref |
Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value. Note: This function will warn if it detects an un-memoized `value` return: {Record<string, any>} The consolidated value. param: {Object} props param: {Record<string, any>} props.value |
getNamespace(componentName) X-Ref |
Creates a dedicated context namespace HTML attribute for components. ns is short for "namespace" return: {Record<string, any>} A props object with the namespaced HTML attribute. param: {string} componentName The name for the component. |
getConnectedNamespace() X-Ref |
Creates a dedicated connected context namespace HTML attribute for components. ns is short for "namespace" return: {Record<string, any>} A props object with the namespaced HTML attribute. |
__extends(d, b) X-Ref |
No description |
__() X-Ref |
No description |
__rest(s, e) X-Ref |
No description |
__decorate(decorators, target, key, desc) X-Ref |
No description |
__param(paramIndex, decorator) X-Ref |
No description |
__esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) X-Ref |
No description |
accept(f) X-Ref |
No description |
__runInitializers(thisArg, initializers, value) X-Ref |
No description |
__propKey(x) X-Ref |
No description |
__setFunctionName(f, name, prefix) X-Ref |
No description |
__metadata(metadataKey, metadataValue) X-Ref |
No description |
__awaiter(thisArg, _arguments, P, generator) X-Ref |
No description |
adopt(value) X-Ref |
No description |
fulfilled(value) X-Ref |
No description |
rejected(value) X-Ref |
No description |
step(result) X-Ref |
No description |
__generator(thisArg, body) X-Ref |
No description |
verb(n) X-Ref |
No description |
step(op) X-Ref |
No description |
__exportStar(m, o) X-Ref |
No description |
__values(o) X-Ref |
No description |
__read(o, n) X-Ref |
No description |
__spread() X-Ref |
No description |
__spreadArrays() X-Ref |
No description |
__spreadArray(to, from, pack) X-Ref |
No description |
__await(v) X-Ref |
No description |
__asyncGenerator(thisArg, _arguments, generator) X-Ref |
No description |
awaitReturn(f) X-Ref |
No description |
verb(n, f) X-Ref |
No description |
resume(n, v) X-Ref |
No description |
step(r) X-Ref |
No description |
fulfill(value) X-Ref |
No description |
reject(value) X-Ref |
No description |
settle(f, v) X-Ref |
No description |
__asyncDelegator(o) X-Ref |
No description |
verb(n, f) X-Ref |
No description |
__asyncValues(o) X-Ref |
No description |
verb(n) X-Ref |
No description |
settle(resolve, reject, d, v) X-Ref |
No description |
__makeTemplateObject(cooked, raw) X-Ref |
No description |
__importStar(mod) X-Ref |
No description |
__importDefault(mod) X-Ref |
No description |
__classPrivateFieldGet(receiver, state, kind, f) X-Ref |
No description |
__classPrivateFieldSet(receiver, state, value, kind, f) X-Ref |
No description |
__classPrivateFieldIn(state, receiver) X-Ref |
No description |
__addDisposableResource(env, value, async) X-Ref |
No description |
__disposeResources(env) X-Ref |
No description |
fail(e) X-Ref |
No description |
next() X-Ref |
No description |
localeLowerCase(str, locale) X-Ref |
Localized lower case. |
lowerCase(str) X-Ref |
Lower case as a function. |
noCase(input, options) X-Ref |
Normalize the string into something other libraries can manipulate easier. |
dist_es2015_replace(input, re, value) X-Ref |
Replace `re` in the input string with the replacement value. |
dotCase(input, options) X-Ref |
No description |
paramCase(input, options) X-Ref |
No description |
memize(fn, options) X-Ref |
Accepts a function to be memoized, and returns a new memoized function, with optional options. return: {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function. param: {F} fn Function to memoize. param: {MemizeOptions} [options] Options object. |
memoized() X-Ref |
No description |
getStyledClassName(namespace) X-Ref |
Generates the connected component CSS className based on the namespace. return: The generated CSS className. param: namespace The name of the connected component. |
sheetForTag(tag) X-Ref |
No description |
createStyleElement(options) X-Ref |
No description |
StyleSheet(options) X-Ref |
No description |
hash(value, length) X-Ref |
return: {number} param: {string} value param: {number} length |
trim(value) X-Ref |
return: {string} param: {string} value |
Utility_match(value, pattern) X-Ref |
return: {string?} param: {string} value param: {RegExp} pattern |
Utility_replace(value, pattern, replacement) X-Ref |
return: {string} param: {string} value param: {(string|RegExp)} pattern param: {string} replacement |
indexof(value, search) X-Ref |
return: {number} param: {string} value param: {string} search |
Utility_charat(value, index) X-Ref |
return: {number} param: {string} value param: {number} index |
Utility_substr(value, begin, end) X-Ref |
return: {string} param: {string} value param: {number} begin param: {number} end |
Utility_strlen(value) X-Ref |
return: {number} param: {string} value |
Utility_sizeof(value) X-Ref |
return: {number} param: {any[]} value |
Utility_append(value, array) X-Ref |
return: {any} param: {any} value param: {any[]} array |
Utility_combine(array, callback) X-Ref |
return: {string} param: {string[]} array param: {function} callback |
node(value, root, parent, type, props, children, length) X-Ref |
param: {string} value param: {object | null} root param: {object | null} parent param: {string} type param: {string[] | string} props param: {object[] | string} children param: {number} length |
Tokenizer_copy(root, props) X-Ref |
return: {object} param: {object} root param: {object} props |
Tokenizer_char() X-Ref |
return: {number} |
prev() X-Ref |
return: {number} |
next() X-Ref |
return: {number} |
peek() X-Ref |
return: {number} |
caret() X-Ref |
return: {number} |
slice(begin, end) X-Ref |
return: {string} param: {number} begin param: {number} end |
token(type) X-Ref |
return: {number} param: {number} type |
alloc(value) X-Ref |
return: {any[]} param: {string} value |
dealloc(value) X-Ref |
return: {any} param: {any} value |
delimit(type) X-Ref |
return: {string} param: {number} type |
Tokenizer_tokenize(value) X-Ref |
return: {string[]} param: {string} value |
whitespace(type) X-Ref |
return: {string} param: {number} type |
tokenizer(children) X-Ref |
return: {string[]} param: {string[]} children |
escaping(index, count) X-Ref |
return: {string} param: {number} index param: {number} count |
delimiter(type) X-Ref |
return: {number} param: {number} type |
commenter(type, index) X-Ref |
return: {number} param: {number} type param: {number} index |
identifier(index) X-Ref |
No description |
Serializer_serialize(children, callback) X-Ref |
return: {string} param: {object[]} children param: {function} callback |
stringify(element, index, children, callback) X-Ref |
return: {string} param: {object} element param: {number} index param: {object[]} children param: {function} callback |
middleware(collection) X-Ref |
return: {function} param: {function[]} collection |
rulesheet(callback) X-Ref |
return: {function} param: {function} callback |
prefixer(element, index, children, callback) X-Ref |
param: {object} element param: {number} index param: {object[]} children param: {function} callback |
namespace(element) X-Ref |
param: {object} element param: {number} index param: {object[]} children |
compile(value) X-Ref |
return: {object[]} param: {string} value |
parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) X-Ref |
return: {object} param: {string} value param: {object} root param: {object?} parent param: {string[]} rule param: {string[]} rules param: {string[]} rulesets param: {number[]} pseudo param: {number[]} points param: {string[]} declarations |
ruleset(value, root, parent, index, offset, rules, points, type, props, children, length) X-Ref |
return: {object} param: {string} value param: {object} root param: {object?} parent param: {number} index param: {number} offset param: {string[]} rules param: {number[]} points param: {string} type param: {string[]} props param: {string[]} children param: {number} length |
comment(value, root, parent) X-Ref |
return: {object} param: {number} value param: {object} root param: {object?} parent |
declaration(value, root, parent, length) X-Ref |
return: {object} param: {string} value param: {object} root param: {object?} parent param: {number} length |
emotion_cache_browser_esm_prefix(value, length) X-Ref |
No description |
murmur2(str) X-Ref |
No description |
memoize(fn) X-Ref |
No description |
handleInterpolation(mergedProps, registered, interpolation) X-Ref |
No description |
createStringFromObject(mergedProps, registered, obj) X-Ref |
No description |
withTheme(Component) X-Ref |
No description |
emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) X-Ref |
No description |
insertWithoutScoping(cache, serialized) X-Ref |
No description |
merge(registered, css, className) X-Ref |
No description |
useContextSystem(props, namespace) X-Ref |
Custom hook that derives registered props from the Context system. These derived props are then consolidated with incoming component props. return: {ConnectedProps<P>} The connected props. param: {P} props Incoming props from the component. param: {string} namespace The namespace to register and to derive context props from. |
contextConnect(Component, namespace) X-Ref |
Forwards ref (React.ForwardRef) and "Connects" (or registers) a component within the Context system under a specified namespace. return: The connected WordPressComponent param: Component The component to register into the Context system. param: namespace The namespace to register the component under. |
contextConnectWithoutRef(Component, namespace) X-Ref |
"Connects" (or registers) a component within the Context system under a specified namespace. Does not forward a ref. return: The connected WordPressComponent param: Component The component to register into the Context system. param: namespace The namespace to register the component under. |
_contextConnect(Component, namespace, options) X-Ref |
No description |
getConnectNamespace(Component) X-Ref |
Attempts to retrieve the connected namespace from a component. return: The connected namespaces. param: Component The component to retrieve a namespace from. |
hasConnectNamespace(Component, match) X-Ref |
Checks to see if a component is connected within the Context system. param: Component The component to retrieve a namespace from. param: match The namespace to check. |
extends_extends() X-Ref |
No description |
UnforwardedView({as,...restProps}, ref) X-Ref |
No description |
UnconnectedVisuallyHidden(props, forwardedRef) X-Ref |
No description |
normalize(value) X-Ref |
Normalizes and transforms an incoming value to better match the alignment values return: The parsed value. param: value An alignment value to parse. |
getItemId(prefixId, value) X-Ref |
Creates an item ID based on a prefix ID and an alignment value. return: The item id. param: prefixId An ID to prefix. param: value An alignment value. |
getItemValue(prefixId, id) X-Ref |
Extracts an item value from its ID return: The item value param: prefixId An ID prefix to remove param: id An item ID |
getAlignmentIndex(alignment = 'center') X-Ref |
Retrieves the alignment index from a value. return: The index of a matching alignment. param: alignment Value to check. |
emotion_react_browser_esm_css() X-Ref |
No description |
emotion_react_browser_esm_merge(registered, css, className) X-Ref |
No description |
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. |
_EMOTION_STRINGIFIED_CSS_ERROR__() X-Ref |
No description |
cell_Cell({id,value,...props}) X-Ref |
No description |
AlignmentMatrixControlIcon({className,disablePointerEvents = true,size,width,height,style = {},value = 'center',...props}) X-Ref |
No description |
UnforwardedAlignmentMatrixControl({className,id,label = (0,external_wp_i18n_namespaceObject.__) X-Ref |
No description |
getDefaultOrigin(type) X-Ref |
return: Default origin param: type The animation type |
getAnimateClassName(options) X-Ref |
return: ClassName that applies the animations param: options |
Animate({type,options = {},children}) X-Ref |
Simple interface to introduce animations to components. ```jsx import { Animate, Notice } from '@wordpress/components'; const MyAnimatedNotice = () => ( <Animate type="slide-in" options={ { origin: 'top' } }> { ( { className } ) => ( <Notice className={ className } status="success"> <p>Animation finished.</p> </Notice> ) } </Animate> ); ``` |
Generated : Sat Dec 21 08:20:01 2024 | Cross-referenced by PHPXref |