@sanity/ui 2.16.22 → 2.16.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks-cjs/_visual-editing.js +115 -1040
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-cjs/refractor.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +115 -1040
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_chunks-es/refractor.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +411 -351
- package/dist/_visual-editing.d.ts +411 -351
- package/dist/index.d.mts +1107 -930
- package/dist/index.d.ts +1107 -930
- package/dist/index.js +64 -155
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +64 -155
- package/dist/index.mjs.map +1 -1
- package/dist/theme.d.mts +769 -681
- package/dist/theme.d.ts +769 -681
- package/dist/theme.js +47 -0
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +47 -0
- package/dist/theme.mjs.map +1 -1
- package/exports/_visual-editing.ts +1 -0
- package/package.json +50 -163
- package/src/core/_compat.ts +30 -0
- package/src/core/components/autocomplete/autocomplete.tsx +11 -4
- package/src/core/components/autocomplete/autocompleteOption.tsx +1 -0
- package/src/core/components/breadcrumbs/breadcrumbs.tsx +1 -0
- package/src/core/components/dialog/dialog.tsx +3 -0
- package/src/core/components/hotkeys/hotkeys.tsx +1 -0
- package/src/core/components/menu/menu.test.tsx +6 -4
- package/src/core/components/menu/menu.tsx +3 -2
- package/src/core/components/menu/menuButton.tsx +8 -0
- package/src/core/components/menu/menuGroup.tsx +5 -2
- package/src/core/components/menu/menuItem.tsx +4 -0
- package/src/core/components/menu/useMenuController.ts +6 -4
- package/src/core/components/skeleton/skeleton.tsx +2 -1
- package/src/core/components/tab/tab.tsx +1 -0
- package/src/core/components/tab/tabList.tsx +1 -0
- package/src/core/components/toast/toast.test.tsx +9 -4
- package/src/core/components/tree/tree.tsx +1 -0
- package/src/core/components/tree/treeGroup.tsx +1 -0
- package/src/core/components/tree/treeItem.tsx +2 -2
- package/src/core/hooks/useClickOutside.test.tsx +43 -15
- package/src/core/hooks/useClickOutside.ts +1 -1
- package/src/core/hooks/useClickOutsideEvent.test.tsx +8 -4
- package/src/core/hooks/useDelayed.test.ts +7 -6
- package/src/core/hooks/useElementRect/useElementRect.ts +1 -0
- package/src/core/hooks/useForwardedRef.ts +1 -0
- package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +2 -1
- package/src/core/hooks/usePrefersDark.hydration.test.tsx +7 -5
- package/src/core/hooks/usePrefersDark.test.tsx +3 -1
- package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +7 -5
- package/src/core/hooks/usePrefersReducedMotion.test.tsx +3 -1
- package/src/core/lib/createGlobalScopedContext.ts +1 -0
- package/src/core/lib/globalScope.ts +1 -0
- package/src/core/observers/elementSizeObserver.ts +1 -0
- package/src/core/primitives/avatar/avatar.tsx +1 -2
- package/src/core/primitives/avatar/avatarStack.tsx +1 -0
- package/src/core/primitives/badge/badge.test.tsx +3 -2
- package/src/core/primitives/badge/badge.tsx +2 -1
- package/src/core/primitives/box/box.tsx +2 -1
- package/src/core/primitives/button/button.test.tsx +3 -2
- package/src/core/primitives/button/button.tsx +2 -0
- package/src/core/primitives/button/styles.ts +1 -0
- package/src/core/primitives/card/card.tsx +1 -5
- package/src/core/primitives/card/types.ts +1 -0
- package/src/core/primitives/code/refractor.tsx +2 -0
- package/src/core/primitives/flex/flex.tsx +1 -3
- package/src/core/primitives/inline/inline.tsx +1 -0
- package/src/core/primitives/popover/popover.tsx +12 -3
- package/src/core/primitives/popover/popoverCard.tsx +1 -0
- package/src/core/primitives/popover/types.ts +0 -1
- package/src/core/primitives/stack/styles.ts +1 -0
- package/src/core/primitives/textInput/textInput.tsx +2 -0
- package/src/core/primitives/tooltip/tooltip.test.tsx +82 -49
- package/src/core/primitives/tooltip/tooltip.tsx +5 -0
- package/src/core/primitives/tooltip/tooltipCard.tsx +1 -0
- package/src/core/primitives/tooltip/tooltipDelayGroup/types.ts +2 -0
- package/src/core/styles/flex/types.ts +0 -1
- package/src/core/styles/font/responsiveFont.ts +0 -3
- package/src/core/styles/font/types.ts +1 -3
- package/src/core/styles/grid/gridStyle.ts +1 -0
- package/src/core/styles/margin/marginStyle.ts +1 -0
- package/src/core/styles/margin/marginsStyle.test.ts +2 -1
- package/src/core/styles/padding/paddingStyle.test.ts +2 -1
- package/src/core/styles/padding/paddingStyle.ts +1 -0
- package/src/core/theme/theme.test.tsx +7 -3
- package/src/core/theme/useRootTheme.ts +1 -0
- package/src/core/theme/useTheme.ts +2 -0
- package/src/core/utils/arrow/arrow.tsx +1 -0
- package/src/core/utils/boundaryElement/boundaryElement.test.tsx +9 -4
- package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx +1 -0
- package/src/core/utils/getElementRef.ts +5 -0
- package/src/core/utils/layer/getLayerContext.test.ts +2 -0
- package/src/core/utils/layer/layer.test.tsx +9 -4
- package/src/core/utils/layer/layer.tsx +1 -0
- package/src/core/utils/layer/useLayer.ts +2 -0
- package/src/core/utils/portal/portal.test.tsx +9 -4
- package/src/core/utils/portal/portalProvider.tsx +4 -3
- package/src/core/utils/virtualList/virtualList.tsx +2 -1
- package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts +10 -0
- package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts +4 -0
- package/src/theme/build/_deprecated/color/button/createButtonModes.ts +5 -0
- package/src/theme/build/_deprecated/color/button/createButtonTones.ts +5 -0
- package/src/theme/build/_deprecated/color/card/createCardStates.ts +6 -0
- package/src/theme/build/_deprecated/color/color.test.ts +5 -1
- package/src/theme/build/_deprecated/color/defaults.ts +1 -0
- package/src/theme/build/_deprecated/color/factory.ts +36 -0
- package/src/theme/build/_deprecated/color/input/createInputModes.ts +5 -0
- package/src/theme/build/_deprecated/color/muted/createMuted.ts +4 -0
- package/src/theme/build/_deprecated/color/spot/createSpot.ts +3 -0
- package/src/theme/build/buildColorTheme.test.ts +2 -0
- package/src/theme/build/buildColorTheme.ts +7 -0
- package/src/theme/build/buildTheme.test.ts +2 -0
- package/src/theme/build/lib/color-fns/color-fns.test.ts +3 -1
- package/src/theme/build/merge.ts +5 -0
- package/src/theme/build/mixThemeColor.test.ts +2 -0
- package/src/theme/build/renderColorTheme.ts +6 -0
- package/src/theme/build/renderColorValue.ts +0 -2
- package/src/theme/build/resolveColorTokens.ts +6 -0
- package/src/theme/build/theme.test.ts +2 -0
- package/src/theme/config/helpers.ts +5 -0
- package/src/theme/config/system.ts +2 -0
- package/src/theme/config/tokens/color/types.ts +6 -4
- package/src/theme/config/tokens/parseTokenKey.test.ts +2 -0
- package/src/theme/config/tokens/parseTokenValue.test.ts +2 -0
- package/src/theme/config/tokens/parseTokenValue.ts +1 -0
- package/src/theme/getScopedTheme.ts +5 -0
- package/src/theme/system/color/_helpers.ts +4 -0
- package/src/theme/system/theme.ts +4 -0
- package/src/theme/system/v0/color/_system.ts +1 -0
- package/src/theme/system/v0/color/button.ts +14 -0
- package/src/theme/system/v0/color/card.ts +6 -0
- package/src/theme/system/v0/color/color.ts +11 -0
- package/src/theme/system/v0/color/input.ts +6 -0
- package/src/theme/system/v0/color/muted.ts +11 -0
- package/src/theme/system/v0/color/selectable.ts +11 -0
- package/src/theme/system/v0/color/solid.ts +11 -0
- package/src/theme/system/v0/color/spot.ts +1 -0
- package/src/theme/versioning/getTheme_v2.ts +15 -0
- package/src/theme/versioning/themeColor_v0_v2.ts +7 -0
- package/src/theme/versioning/themeColor_v2_v2_9.ts +1 -0
- package/src/theme/versioning/v0_v2.ts +13 -1
- package/src/theme/versioning/v2_v0.ts +15 -0
- package/src/core/__workshop__/constants.ts +0 -293
- package/src/core/components/autocomplete/__mocks__/apiStore.ts +0 -49
- package/src/core/components/autocomplete/__mocks__/countries.ts +0 -245
- package/src/core/components/autocomplete/__workshop__/async.tsx +0 -156
- package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +0 -137
- package/src/core/components/autocomplete/__workshop__/custom.tsx +0 -89
- package/src/core/components/autocomplete/__workshop__/example.tsx +0 -79
- package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +0 -36
- package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +0 -294
- package/src/core/components/autocomplete/__workshop__/index.ts +0 -39
- package/src/core/components/autocomplete/__workshop__/types.ts +0 -4
- package/src/core/components/breadcrumbs/__workshop__/example.tsx +0 -62
- package/src/core/components/breadcrumbs/__workshop__/index.ts +0 -14
- package/src/core/components/dialog/__workshop__/activate.tsx +0 -134
- package/src/core/components/dialog/__workshop__/autoFocus.tsx +0 -29
- package/src/core/components/dialog/__workshop__/index.ts +0 -19
- package/src/core/components/dialog/__workshop__/layering.tsx +0 -41
- package/src/core/components/dialog/__workshop__/nested.tsx +0 -72
- package/src/core/components/dialog/__workshop__/onScroll.tsx +0 -39
- package/src/core/components/dialog/__workshop__/panes.tsx +0 -82
- package/src/core/components/dialog/__workshop__/position.tsx +0 -30
- package/src/core/components/dialog/__workshop__/props.tsx +0 -75
- package/src/core/components/dialog/__workshop__/provider.tsx +0 -11
- package/src/core/components/dialog/__workshop__/wrapped.tsx +0 -76
- package/src/core/components/hotkeys/__workshop__/index.ts +0 -14
- package/src/core/components/hotkeys/__workshop__/plain.tsx +0 -9
- package/src/core/components/menu/__workshop__/asComponent.tsx +0 -45
- package/src/core/components/menu/__workshop__/avatarMenu.tsx +0 -51
- package/src/core/components/menu/__workshop__/closableMenuButton.tsx +0 -46
- package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +0 -134
- package/src/core/components/menu/__workshop__/customMenuItem.tsx +0 -45
- package/src/core/components/menu/__workshop__/customSelectedState.tsx +0 -39
- package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +0 -40
- package/src/core/components/menu/__workshop__/groups.tsx +0 -156
- package/src/core/components/menu/__workshop__/index.ts +0 -89
- package/src/core/components/menu/__workshop__/menuButton.tsx +0 -80
- package/src/core/components/menu/__workshop__/menuGroupRight.tsx +0 -65
- package/src/core/components/menu/__workshop__/nestedMenu.tsx +0 -22
- package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +0 -41
- package/src/core/components/menu/__workshop__/selectedItem.tsx +0 -69
- package/src/core/components/menu/__workshop__/shouldFocus.tsx +0 -47
- package/src/core/components/menu/__workshop__/tones.tsx +0 -25
- package/src/core/components/menu/__workshop__/withoutArrow.tsx +0 -32
- package/src/core/components/skeleton/__workshop__/delay.tsx +0 -70
- package/src/core/components/skeleton/__workshop__/index.ts +0 -11
- package/src/core/components/skeleton/__workshop__/skeleton.tsx +0 -64
- package/src/core/components/tab/__workshop__/example.tsx +0 -79
- package/src/core/components/tab/__workshop__/index.ts +0 -14
- package/src/core/components/toast/__workshop__/hook.tsx +0 -71
- package/src/core/components/toast/__workshop__/index.ts +0 -19
- package/src/core/components/toast/__workshop__/toast.tsx +0 -26
- package/src/core/components/tree/__workshop__/basic.perf.ts +0 -19
- package/src/core/components/tree/__workshop__/basic.tsx +0 -105
- package/src/core/components/tree/__workshop__/index.ts +0 -21
- package/src/core/components/tree/__workshop__/tabFromElement.tsx +0 -84
- package/src/core/hooks/useElementRect/__workshop__/example.tsx +0 -32
- package/src/core/hooks/useElementRect/__workshop__/index.ts +0 -14
- package/src/core/hooks/useMediaIndex/__workshop__/index.ts +0 -14
- package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +0 -14
- package/src/core/primitives/avatar/__workshop__/asButton.tsx +0 -14
- package/src/core/primitives/avatar/__workshop__/index.ts +0 -29
- package/src/core/primitives/avatar/__workshop__/stack.tsx +0 -25
- package/src/core/primitives/avatar/__workshop__/withinButton.tsx +0 -63
- package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +0 -70
- package/src/core/primitives/badge/__workshop__/index.ts +0 -19
- package/src/core/primitives/badge/__workshop__/props.tsx +0 -30
- package/src/core/primitives/badge/__workshop__/tones.tsx +0 -21
- package/src/core/primitives/box/__workshop__/index.ts +0 -19
- package/src/core/primitives/box/__workshop__/props.tsx +0 -20
- package/src/core/primitives/box/__workshop__/responsive.tsx +0 -20
- package/src/core/primitives/button/__workshop__/custom.tsx +0 -51
- package/src/core/primitives/button/__workshop__/customIcons.tsx +0 -30
- package/src/core/primitives/button/__workshop__/disabled.tsx +0 -74
- package/src/core/primitives/button/__workshop__/index.ts +0 -59
- package/src/core/primitives/button/__workshop__/mixedChildren.tsx +0 -12
- package/src/core/primitives/button/__workshop__/props.tsx +0 -55
- package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +0 -36
- package/src/core/primitives/button/__workshop__/stacked.tsx +0 -58
- package/src/core/primitives/button/__workshop__/styled1.tsx +0 -17
- package/src/core/primitives/button/__workshop__/styled2.tsx +0 -19
- package/src/core/primitives/button/__workshop__/uploadButton.tsx +0 -28
- package/src/core/primitives/card/__workshop__/allTones.tsx +0 -25
- package/src/core/primitives/card/__workshop__/asButton.tsx +0 -107
- package/src/core/primitives/card/__workshop__/asComponent.tsx +0 -27
- package/src/core/primitives/card/__workshop__/checkered.tsx +0 -26
- package/src/core/primitives/card/__workshop__/index.ts +0 -18
- package/src/core/primitives/card/__workshop__/interactive.tsx +0 -30
- package/src/core/primitives/card/__workshop__/listNavigation.tsx +0 -80
- package/src/core/primitives/card/__workshop__/props.tsx +0 -53
- package/src/core/primitives/card/__workshop__/selected.tsx +0 -94
- package/src/core/primitives/card/__workshop__/styled.tsx +0 -14
- package/src/core/primitives/checkbox/__workshop__/example.tsx +0 -25
- package/src/core/primitives/checkbox/__workshop__/index.ts +0 -13
- package/src/core/primitives/checkbox/__workshop__/props.tsx +0 -33
- package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +0 -16
- package/src/core/primitives/checkbox/__workshop__/tones.tsx +0 -28
- package/src/core/primitives/code/__workshop__/index.ts +0 -19
- package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +0 -48
- package/src/core/primitives/code/__workshop__/props.tsx +0 -21
- package/src/core/primitives/container/__workshop__/example.tsx +0 -20
- package/src/core/primitives/container/__workshop__/index.ts +0 -8
- package/src/core/primitives/flex/__workshop__/example.tsx +0 -34
- package/src/core/primitives/flex/__workshop__/gap.tsx +0 -25
- package/src/core/primitives/flex/__workshop__/index.ts +0 -11
- package/src/core/primitives/grid/__workshop__/index.ts +0 -10
- package/src/core/primitives/grid/__workshop__/responsive.tsx +0 -54
- package/src/core/primitives/heading/__workshop__/index.ts +0 -19
- package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +0 -54
- package/src/core/primitives/heading/__workshop__/plain.tsx +0 -32
- package/src/core/primitives/inline/__workshop__/index.ts +0 -8
- package/src/core/primitives/inline/__workshop__/plain.tsx +0 -27
- package/src/core/primitives/kbd/__workshop__/index.ts +0 -8
- package/src/core/primitives/kbd/__workshop__/plain.tsx +0 -9
- package/src/core/primitives/label/__workshop__/index.ts +0 -19
- package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +0 -48
- package/src/core/primitives/label/__workshop__/plain.tsx +0 -24
- package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +0 -77
- package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +0 -31
- package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +0 -32
- package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +0 -11
- package/src/core/primitives/popover/__workshop__/PlainStory.tsx +0 -71
- package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +0 -71
- package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +0 -89
- package/src/core/primitives/popover/__workshop__/TestStory.tsx +0 -97
- package/src/core/primitives/popover/__workshop__/index.ts +0 -49
- package/src/core/primitives/radio/__workshop__/example.tsx +0 -63
- package/src/core/primitives/radio/__workshop__/index.ts +0 -11
- package/src/core/primitives/radio/__workshop__/plain.tsx +0 -28
- package/src/core/primitives/select/__workshop__/index.ts +0 -11
- package/src/core/primitives/select/__workshop__/plain.tsx +0 -27
- package/src/core/primitives/select/__workshop__/readOnly.tsx +0 -23
- package/src/core/primitives/spinner/__workshop__/Props.tsx +0 -15
- package/src/core/primitives/spinner/__workshop__/index.ts +0 -14
- package/src/core/primitives/stack/__workshop__/index.ts +0 -14
- package/src/core/primitives/stack/__workshop__/plain.tsx +0 -32
- package/src/core/primitives/switch/__workshop__/example.tsx +0 -23
- package/src/core/primitives/switch/__workshop__/index.ts +0 -11
- package/src/core/primitives/switch/__workshop__/props.tsx +0 -21
- package/src/core/primitives/text/__workshop__/colored.tsx +0 -30
- package/src/core/primitives/text/__workshop__/example.tsx +0 -39
- package/src/core/primitives/text/__workshop__/index.ts +0 -24
- package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +0 -48
- package/src/core/primitives/textArea/__workshop__/index.ts +0 -14
- package/src/core/primitives/textArea/__workshop__/plain.tsx +0 -50
- package/src/core/primitives/textInput/__workshop__/clearButton.tsx +0 -30
- package/src/core/primitives/textInput/__workshop__/customValidity.tsx +0 -17
- package/src/core/primitives/textInput/__workshop__/index.ts +0 -44
- package/src/core/primitives/textInput/__workshop__/plain.tsx +0 -98
- package/src/core/primitives/textInput/__workshop__/readOnly.tsx +0 -9
- package/src/core/primitives/textInput/__workshop__/states.tsx +0 -53
- package/src/core/primitives/textInput/__workshop__/tones.tsx +0 -277
- package/src/core/primitives/textInput/__workshop__/typed.tsx +0 -23
- package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +0 -102
- package/src/core/primitives/tooltip/__workshop__/index.ts +0 -29
- package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -74
- package/src/core/primitives/tooltip/__workshop__/props.tsx +0 -107
- package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -86
- package/src/core/theme/__workshop__/build/Root.tsx +0 -367
- package/src/core/theme/__workshop__/build/helpers.ts +0 -46
- package/src/core/theme/__workshop__/build/story.tsx +0 -465
- package/src/core/theme/__workshop__/canvas.tsx +0 -352
- package/src/core/theme/__workshop__/color.tsx +0 -62
- package/src/core/theme/__workshop__/debug/story.tsx +0 -408
- package/src/core/theme/__workshop__/index.ts +0 -39
- package/src/core/theme/__workshop__/layer.tsx +0 -78
- package/src/core/theme/__workshop__/nestedProvider.tsx +0 -15
- package/src/core/utils/boundaryElement/__workshop__/index.ts +0 -14
- package/src/core/utils/boundaryElement/__workshop__/plain.tsx +0 -19
- package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +0 -30
- package/src/core/utils/elementQuery/__workshop__/index.ts +0 -14
- package/src/core/utils/layer/__workshop__/_debug.tsx +0 -17
- package/src/core/utils/layer/__workshop__/index.ts +0 -24
- package/src/core/utils/layer/__workshop__/multipleRoots.tsx +0 -49
- package/src/core/utils/layer/__workshop__/nested.tsx +0 -98
- package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx +0 -13
- package/src/core/utils/portal/__workshop__/index.ts +0 -14
- package/src/core/utils/portal/__workshop__/named.tsx +0 -63
- package/src/core/utils/virtualList/__workshop__/changingProps.tsx +0 -36
- package/src/core/utils/virtualList/__workshop__/elementScroll.tsx +0 -24
- package/src/core/utils/virtualList/__workshop__/index.ts +0 -29
- package/src/core/utils/virtualList/__workshop__/infiniteList.tsx +0 -48
- package/src/core/utils/virtualList/__workshop__/windowScrolll.tsx +0 -22
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import {BaseTheme} from
|
|
2
|
-
import {DetailedHTMLProps} from
|
|
3
|
-
import {FastOmit} from
|
|
4
|
-
import {ForwardRefExoticComponent} from
|
|
5
|
-
import {HTMLAttributes} from
|
|
6
|
-
import {HTMLProps} from
|
|
7
|
-
import {IStyledComponentBase} from
|
|
8
|
-
import {MutableRefObject} from
|
|
9
|
-
import {NamedExoticComponent} from
|
|
10
|
-
import {RefAttributes} from
|
|
11
|
-
import {RefCallback} from
|
|
12
|
-
import {RootTheme} from
|
|
13
|
-
import {Theme_v2} from
|
|
14
|
-
import {ThemeColorButtonModeKey} from
|
|
15
|
-
import {ThemeColorCardToneKey} from
|
|
16
|
-
import {ThemeColorSchemeKey} from
|
|
17
|
-
import {ThemeColorStateToneKey} from
|
|
18
|
-
import {ThemeFontWeightKey} from
|
|
1
|
+
import { BaseTheme } from "@sanity/ui/theme";
|
|
2
|
+
import { DetailedHTMLProps } from "react";
|
|
3
|
+
import { FastOmit } from "styled-components";
|
|
4
|
+
import { ForwardRefExoticComponent } from "react";
|
|
5
|
+
import { HTMLAttributes } from "react";
|
|
6
|
+
import { HTMLProps } from "react";
|
|
7
|
+
import { IStyledComponentBase } from "styled-components/dist/types";
|
|
8
|
+
import { MutableRefObject } from "react";
|
|
9
|
+
import { NamedExoticComponent } from "react";
|
|
10
|
+
import { RefAttributes } from "react";
|
|
11
|
+
import { RefCallback } from "react";
|
|
12
|
+
import { RootTheme } from "@sanity/ui/theme";
|
|
13
|
+
import { Theme_v2 } from "@sanity/ui/theme";
|
|
14
|
+
import { ThemeColorButtonModeKey } from "@sanity/ui/theme";
|
|
15
|
+
import { ThemeColorCardToneKey } from "@sanity/ui/theme";
|
|
16
|
+
import { ThemeColorSchemeKey } from "@sanity/ui/theme";
|
|
17
|
+
import { ThemeColorStateToneKey } from "@sanity/ui/theme";
|
|
18
|
+
import { ThemeFontWeightKey } from "@sanity/ui/theme";
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* The `Box` component is a basic layout wrapper component which provides utility properties
|
|
@@ -24,24 +24,24 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
|
|
|
24
24
|
* @public
|
|
25
25
|
*/
|
|
26
26
|
export declare const Box: ForwardRefExoticComponent<
|
|
27
|
-
Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>,
|
|
27
|
+
Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, "height" | "as">, "ref"> &
|
|
28
28
|
RefAttributes<HTMLDivElement>
|
|
29
|
-
|
|
29
|
+
>;
|
|
30
30
|
|
|
31
31
|
/**
|
|
32
32
|
* @public
|
|
33
33
|
*/
|
|
34
|
-
declare type BoxDisplay =
|
|
34
|
+
declare type BoxDisplay = "none" | "block" | "grid" | "flex" | "inline-block";
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
37
|
* @public
|
|
38
38
|
*/
|
|
39
|
-
declare type BoxHeight =
|
|
39
|
+
declare type BoxHeight = "stretch" | "fill";
|
|
40
40
|
|
|
41
41
|
/**
|
|
42
42
|
* @public
|
|
43
43
|
*/
|
|
44
|
-
declare type BoxOverflow =
|
|
44
|
+
declare type BoxOverflow = "visible" | "hidden" | "auto";
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* @public
|
|
@@ -52,67 +52,72 @@ declare interface BoxProps
|
|
|
52
52
|
ResponsiveGridItemProps,
|
|
53
53
|
ResponsiveMarginProps,
|
|
54
54
|
ResponsivePaddingProps {
|
|
55
|
-
as?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
56
|
-
forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
55
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
56
|
+
forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
/**
|
|
60
60
|
* @public
|
|
61
61
|
*/
|
|
62
|
-
declare type BoxSizing =
|
|
62
|
+
declare type BoxSizing = "content" | "border";
|
|
63
63
|
|
|
64
64
|
/**
|
|
65
65
|
* @public
|
|
66
66
|
*/
|
|
67
67
|
export declare const Button: ForwardRefExoticComponent<
|
|
68
|
-
Omit<
|
|
68
|
+
Omit<
|
|
69
|
+
ButtonProps & Omit<HTMLProps<HTMLButtonElement>, "width" | "as">,
|
|
70
|
+
"ref"
|
|
71
|
+
> &
|
|
69
72
|
RefAttributes<HTMLButtonElement>
|
|
70
|
-
|
|
73
|
+
>;
|
|
71
74
|
|
|
72
75
|
/**
|
|
73
76
|
* @public
|
|
74
77
|
*/
|
|
75
|
-
declare type ButtonMode = ThemeColorButtonModeKey
|
|
78
|
+
declare type ButtonMode = ThemeColorButtonModeKey;
|
|
76
79
|
|
|
77
80
|
/**
|
|
78
81
|
* @public
|
|
79
82
|
*/
|
|
80
|
-
declare interface ButtonProps
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
declare interface ButtonProps
|
|
84
|
+
extends ResponsivePaddingProps,
|
|
85
|
+
ResponsiveRadiusProps {
|
|
86
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
87
|
+
fontSize?: number | number[];
|
|
88
|
+
mode?: ButtonMode;
|
|
89
|
+
icon?: React.ElementType | React.ReactNode;
|
|
90
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
91
|
+
justify?: FlexJustify | FlexJustify[];
|
|
87
92
|
/**
|
|
88
93
|
* @beta Do not use in production, as this might change.
|
|
89
94
|
*/
|
|
90
|
-
loading?: boolean
|
|
91
|
-
selected?: boolean
|
|
92
|
-
space?: number | number[]
|
|
93
|
-
muted?: boolean
|
|
94
|
-
text?: React.ReactNode
|
|
95
|
-
textAlign?: ButtonTextAlign
|
|
96
|
-
textWeight?: ThemeFontWeightKey
|
|
97
|
-
tone?: ButtonTone
|
|
98
|
-
type?:
|
|
99
|
-
width?: ButtonWidth
|
|
95
|
+
loading?: boolean;
|
|
96
|
+
selected?: boolean;
|
|
97
|
+
space?: number | number[];
|
|
98
|
+
muted?: boolean;
|
|
99
|
+
text?: React.ReactNode;
|
|
100
|
+
textAlign?: ButtonTextAlign;
|
|
101
|
+
textWeight?: ThemeFontWeightKey;
|
|
102
|
+
tone?: ButtonTone;
|
|
103
|
+
type?: "button" | "reset" | "submit";
|
|
104
|
+
width?: ButtonWidth;
|
|
100
105
|
}
|
|
101
106
|
|
|
102
107
|
/**
|
|
103
108
|
* @public
|
|
104
109
|
*/
|
|
105
|
-
declare type ButtonTextAlign =
|
|
110
|
+
declare type ButtonTextAlign = "left" | "right" | "center";
|
|
106
111
|
|
|
107
112
|
/**
|
|
108
113
|
* @public
|
|
109
114
|
*/
|
|
110
|
-
declare type ButtonTone = ThemeColorStateToneKey
|
|
115
|
+
declare type ButtonTone = ThemeColorStateToneKey;
|
|
111
116
|
|
|
112
117
|
/**
|
|
113
118
|
* @public
|
|
114
119
|
*/
|
|
115
|
-
declare type ButtonWidth =
|
|
120
|
+
declare type ButtonWidth = "fill";
|
|
116
121
|
|
|
117
122
|
/**
|
|
118
123
|
* The `Card` component acts much like a `Box`, but with a background and foreground color.
|
|
@@ -121,9 +126,9 @@ declare type ButtonWidth = 'fill'
|
|
|
121
126
|
* @public
|
|
122
127
|
*/
|
|
123
128
|
export declare const Card: ForwardRefExoticComponent<
|
|
124
|
-
Omit<CardProps & Omit<HTMLProps<HTMLDivElement>,
|
|
129
|
+
Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, "height" | "as">, "ref"> &
|
|
125
130
|
RefAttributes<HTMLDivElement>
|
|
126
|
-
|
|
131
|
+
>;
|
|
127
132
|
|
|
128
133
|
/**
|
|
129
134
|
* @public
|
|
@@ -137,22 +142,22 @@ declare interface CardProps
|
|
|
137
142
|
* Do not use in production.
|
|
138
143
|
* @beta
|
|
139
144
|
*/
|
|
140
|
-
__unstable_checkered?: boolean
|
|
145
|
+
__unstable_checkered?: boolean;
|
|
141
146
|
/**
|
|
142
147
|
* Do not use in production.
|
|
143
148
|
* @beta
|
|
144
149
|
*/
|
|
145
|
-
__unstable_focusRing?: boolean
|
|
146
|
-
muted?: boolean
|
|
147
|
-
pressed?: boolean
|
|
148
|
-
scheme?: ThemeColorSchemeKey
|
|
149
|
-
tone?: CardTone
|
|
150
|
+
__unstable_focusRing?: boolean;
|
|
151
|
+
muted?: boolean;
|
|
152
|
+
pressed?: boolean;
|
|
153
|
+
scheme?: ThemeColorSchemeKey;
|
|
154
|
+
tone?: CardTone;
|
|
150
155
|
}
|
|
151
156
|
|
|
152
157
|
/**
|
|
153
158
|
* @public
|
|
154
159
|
*/
|
|
155
|
-
declare type CardTone = ThemeColorCardToneKey |
|
|
160
|
+
declare type CardTone = ThemeColorCardToneKey | "inherit";
|
|
156
161
|
|
|
157
162
|
/**
|
|
158
163
|
* @public
|
|
@@ -160,9 +165,9 @@ declare type CardTone = ThemeColorCardToneKey | 'inherit'
|
|
|
160
165
|
declare type Delay =
|
|
161
166
|
| number
|
|
162
167
|
| Partial<{
|
|
163
|
-
open: number
|
|
164
|
-
close: number
|
|
165
|
-
}
|
|
168
|
+
open: number;
|
|
169
|
+
close: number;
|
|
170
|
+
}>;
|
|
166
171
|
|
|
167
172
|
/**
|
|
168
173
|
* The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
|
|
@@ -170,50 +175,59 @@ declare type Delay =
|
|
|
170
175
|
* @public
|
|
171
176
|
*/
|
|
172
177
|
export declare const Flex: ForwardRefExoticComponent<
|
|
173
|
-
Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>,
|
|
178
|
+
Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, "wrap" | "as">, "ref"> &
|
|
174
179
|
RefAttributes<HTMLDivElement>
|
|
175
|
-
|
|
180
|
+
>;
|
|
176
181
|
|
|
177
182
|
/**
|
|
178
183
|
* @public
|
|
179
184
|
*/
|
|
180
|
-
declare type FlexAlign =
|
|
185
|
+
declare type FlexAlign =
|
|
186
|
+
| "flex-start"
|
|
187
|
+
| "flex-end"
|
|
188
|
+
| "center"
|
|
189
|
+
| "baseline"
|
|
190
|
+
| "stretch";
|
|
181
191
|
|
|
182
192
|
/**
|
|
183
193
|
* @public
|
|
184
194
|
*/
|
|
185
|
-
declare type FlexDirection =
|
|
195
|
+
declare type FlexDirection =
|
|
196
|
+
| "row"
|
|
197
|
+
| "row-reverse"
|
|
198
|
+
| "column"
|
|
199
|
+
| "column-reverse";
|
|
186
200
|
|
|
187
201
|
/**
|
|
188
202
|
* @public
|
|
189
203
|
*/
|
|
190
204
|
declare type FlexJustify =
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
205
|
+
| "flex-start"
|
|
206
|
+
| "flex-end"
|
|
207
|
+
| "center"
|
|
208
|
+
| "space-between"
|
|
209
|
+
| "space-around"
|
|
210
|
+
| "space-evenly";
|
|
197
211
|
|
|
198
212
|
/**
|
|
199
213
|
* @public
|
|
200
214
|
*/
|
|
201
215
|
declare interface FlexProps
|
|
202
|
-
extends Omit<BoxProps,
|
|
216
|
+
extends Omit<BoxProps, "display">,
|
|
203
217
|
ResponsiveFlexProps,
|
|
204
218
|
ResponsiveFlexItemProps {
|
|
205
|
-
gap?: number | number[]
|
|
219
|
+
gap?: number | number[];
|
|
206
220
|
}
|
|
207
221
|
|
|
208
222
|
/**
|
|
209
223
|
* @public
|
|
210
224
|
*/
|
|
211
|
-
declare type FlexValue = number |
|
|
225
|
+
declare type FlexValue = number | "none" | "auto" | "initial";
|
|
212
226
|
|
|
213
227
|
/**
|
|
214
228
|
* @public
|
|
215
229
|
*/
|
|
216
|
-
declare type FlexWrap =
|
|
230
|
+
declare type FlexWrap = "wrap" | "wrap-reverse" | "nowrap";
|
|
217
231
|
|
|
218
232
|
/**
|
|
219
233
|
* The `Grid` component is for building 2-dimensional layers (based on CSS grid).
|
|
@@ -221,59 +235,64 @@ declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
|
|
|
221
235
|
* @public
|
|
222
236
|
*/
|
|
223
237
|
export declare const Grid: ForwardRefExoticComponent<
|
|
224
|
-
Omit<
|
|
238
|
+
Omit<
|
|
239
|
+
GridProps & Omit<HTMLProps<HTMLDivElement>, "height" | "as" | "rows">,
|
|
240
|
+
"ref"
|
|
241
|
+
> &
|
|
225
242
|
RefAttributes<HTMLDivElement>
|
|
226
|
-
|
|
243
|
+
>;
|
|
227
244
|
|
|
228
245
|
/**
|
|
229
246
|
* @public
|
|
230
247
|
*/
|
|
231
|
-
declare type GridAutoCols =
|
|
248
|
+
declare type GridAutoCols = "auto" | "min" | "max" | "fr";
|
|
232
249
|
|
|
233
250
|
/**
|
|
234
251
|
* @public
|
|
235
252
|
*/
|
|
236
|
-
declare type GridAutoFlow =
|
|
253
|
+
declare type GridAutoFlow = "row" | "column" | "row dense" | "column dense";
|
|
237
254
|
|
|
238
255
|
/**
|
|
239
256
|
* @public
|
|
240
257
|
*/
|
|
241
|
-
declare type GridAutoRows =
|
|
258
|
+
declare type GridAutoRows = "auto" | "min" | "max" | "fr";
|
|
242
259
|
|
|
243
260
|
/**
|
|
244
261
|
* @public
|
|
245
262
|
*/
|
|
246
|
-
declare type GridItemColumn =
|
|
263
|
+
declare type GridItemColumn = "auto" | "full" | number;
|
|
247
264
|
|
|
248
265
|
/**
|
|
249
266
|
* @public
|
|
250
267
|
*/
|
|
251
|
-
declare type GridItemColumnEnd =
|
|
268
|
+
declare type GridItemColumnEnd = "auto" | number;
|
|
252
269
|
|
|
253
270
|
/**
|
|
254
271
|
* @public
|
|
255
272
|
*/
|
|
256
|
-
declare type GridItemColumnStart =
|
|
273
|
+
declare type GridItemColumnStart = "auto" | number;
|
|
257
274
|
|
|
258
275
|
/**
|
|
259
276
|
* @public
|
|
260
277
|
*/
|
|
261
|
-
declare type GridItemRow =
|
|
278
|
+
declare type GridItemRow = "auto" | "full" | number;
|
|
262
279
|
|
|
263
280
|
/**
|
|
264
281
|
* @public
|
|
265
282
|
*/
|
|
266
|
-
declare type GridItemRowEnd =
|
|
283
|
+
declare type GridItemRowEnd = "auto" | number;
|
|
267
284
|
|
|
268
285
|
/**
|
|
269
286
|
* @public
|
|
270
287
|
*/
|
|
271
|
-
declare type GridItemRowStart =
|
|
288
|
+
declare type GridItemRowStart = "auto" | number;
|
|
272
289
|
|
|
273
290
|
/**
|
|
274
291
|
* @public
|
|
275
292
|
*/
|
|
276
|
-
declare interface GridProps
|
|
293
|
+
declare interface GridProps
|
|
294
|
+
extends Omit<BoxProps, "display">,
|
|
295
|
+
ResponsiveGridProps {}
|
|
277
296
|
|
|
278
297
|
/**
|
|
279
298
|
* Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
|
|
@@ -281,63 +300,69 @@ declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridPro
|
|
|
281
300
|
* @public
|
|
282
301
|
*/
|
|
283
302
|
export declare const Hotkeys: ForwardRefExoticComponent<
|
|
284
|
-
HotkeysProps &
|
|
285
|
-
>
|
|
303
|
+
HotkeysProps &
|
|
304
|
+
Omit<HTMLProps<HTMLElement>, "size" | "ref" | "as"> &
|
|
305
|
+
RefAttributes<HTMLElement>
|
|
306
|
+
>;
|
|
286
307
|
|
|
287
308
|
/**
|
|
288
309
|
* @public
|
|
289
310
|
*/
|
|
290
311
|
declare interface HotkeysProps {
|
|
291
|
-
fontSize?: number | number[]
|
|
292
|
-
padding?: number | number[]
|
|
293
|
-
radius?: Radius | Radius[]
|
|
294
|
-
space?: number | number[]
|
|
295
|
-
keys?: string[]
|
|
312
|
+
fontSize?: number | number[];
|
|
313
|
+
padding?: number | number[];
|
|
314
|
+
radius?: Radius | Radius[];
|
|
315
|
+
space?: number | number[];
|
|
316
|
+
keys?: string[];
|
|
296
317
|
}
|
|
297
318
|
|
|
298
319
|
/**
|
|
299
320
|
* @public
|
|
300
321
|
*/
|
|
301
|
-
declare interface InlineProps extends Omit<BoxProps,
|
|
322
|
+
declare interface InlineProps extends Omit<BoxProps, "display"> {
|
|
302
323
|
/** The spacing between children. */
|
|
303
|
-
space?: number | number[]
|
|
324
|
+
space?: number | number[];
|
|
304
325
|
}
|
|
305
326
|
|
|
306
327
|
/**
|
|
307
328
|
* @internal
|
|
308
329
|
*/
|
|
309
|
-
export declare function isHTMLAnchorElement(
|
|
330
|
+
export declare function isHTMLAnchorElement(
|
|
331
|
+
element: unknown,
|
|
332
|
+
): element is HTMLAnchorElement;
|
|
310
333
|
|
|
311
334
|
/**
|
|
312
335
|
* @internal
|
|
313
336
|
*/
|
|
314
|
-
export declare function isHTMLElement(node: unknown): node is HTMLElement
|
|
337
|
+
export declare function isHTMLElement(node: unknown): node is HTMLElement;
|
|
315
338
|
|
|
316
339
|
/**
|
|
317
340
|
* @public
|
|
318
341
|
*/
|
|
319
342
|
declare interface LayerProps {
|
|
320
|
-
as?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
343
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
321
344
|
/** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
|
|
322
|
-
onActivate?: (props: {activeElement: HTMLElement | null}) => void
|
|
323
|
-
zOffset?: number | number[]
|
|
345
|
+
onActivate?: (props: { activeElement: HTMLElement | null }) => void;
|
|
346
|
+
zOffset?: number | number[];
|
|
324
347
|
}
|
|
325
348
|
|
|
326
349
|
/**
|
|
327
350
|
* @public
|
|
328
351
|
*/
|
|
329
|
-
export declare function LayerProvider(
|
|
352
|
+
export declare function LayerProvider(
|
|
353
|
+
props: LayerProviderProps,
|
|
354
|
+
): React.JSX.Element;
|
|
330
355
|
|
|
331
356
|
export declare namespace LayerProvider {
|
|
332
|
-
var displayName: string
|
|
357
|
+
var displayName: string;
|
|
333
358
|
}
|
|
334
359
|
|
|
335
360
|
/**
|
|
336
361
|
* @public
|
|
337
362
|
*/
|
|
338
363
|
declare interface LayerProviderProps {
|
|
339
|
-
children?: React.ReactNode
|
|
340
|
-
zOffset?: number | number[]
|
|
364
|
+
children?: React.ReactNode;
|
|
365
|
+
zOffset?: number | number[];
|
|
341
366
|
}
|
|
342
367
|
|
|
343
368
|
/**
|
|
@@ -346,55 +371,65 @@ declare interface LayerProviderProps {
|
|
|
346
371
|
* @public
|
|
347
372
|
*/
|
|
348
373
|
export declare const Menu: ForwardRefExoticComponent<
|
|
349
|
-
Omit<
|
|
374
|
+
Omit<
|
|
375
|
+
MenuProps &
|
|
376
|
+
Omit<HTMLProps<HTMLDivElement>, "height" | "tabIndex" | "role" | "as">,
|
|
377
|
+
"ref"
|
|
378
|
+
> &
|
|
350
379
|
RefAttributes<HTMLDivElement>
|
|
351
|
-
|
|
380
|
+
>;
|
|
352
381
|
|
|
353
382
|
/**
|
|
354
383
|
* @public
|
|
355
384
|
*/
|
|
356
385
|
export declare const MenuDivider: IStyledComponentBase<
|
|
357
|
-
|
|
358
|
-
FastOmit<
|
|
386
|
+
"web",
|
|
387
|
+
FastOmit<
|
|
388
|
+
DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
|
|
389
|
+
never
|
|
390
|
+
>
|
|
359
391
|
> &
|
|
360
|
-
string
|
|
392
|
+
string;
|
|
361
393
|
|
|
362
394
|
/**
|
|
363
395
|
* @public
|
|
364
396
|
*/
|
|
365
397
|
export declare function MenuGroup(
|
|
366
|
-
props: Omit<
|
|
398
|
+
props: Omit<
|
|
399
|
+
React.HTMLProps<HTMLDivElement>,
|
|
400
|
+
"as" | "height" | "popover" | "ref" | "tabIndex"
|
|
401
|
+
> &
|
|
367
402
|
MenuGroupProps,
|
|
368
|
-
): React.JSX.Element
|
|
403
|
+
): React.JSX.Element;
|
|
369
404
|
|
|
370
405
|
export declare namespace MenuGroup {
|
|
371
|
-
var displayName: string
|
|
406
|
+
var displayName: string;
|
|
372
407
|
}
|
|
373
408
|
|
|
374
409
|
/**
|
|
375
410
|
* @public
|
|
376
411
|
*/
|
|
377
412
|
declare interface MenuGroupProps {
|
|
378
|
-
as?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
379
|
-
fontSize?: number | number[]
|
|
380
|
-
icon?: React.ElementType | React.ReactNode
|
|
413
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
414
|
+
fontSize?: number | number[];
|
|
415
|
+
icon?: React.ElementType | React.ReactNode;
|
|
381
416
|
menu?: Omit<
|
|
382
417
|
MenuProps,
|
|
383
|
-
|
|
|
384
|
-
|
|
|
385
|
-
|
|
|
386
|
-
|
|
|
387
|
-
|
|
|
388
|
-
|
|
|
389
|
-
|
|
|
390
|
-
|
|
|
391
|
-
|
|
392
|
-
padding?: number | number[]
|
|
393
|
-
popover?: Omit<PopoverProps,
|
|
394
|
-
radius?: Radius | Radius[]
|
|
395
|
-
space?: number | number[]
|
|
396
|
-
text: React.ReactNode
|
|
397
|
-
tone?: SelectableTone
|
|
418
|
+
| "onClickOutside"
|
|
419
|
+
| "onEscape"
|
|
420
|
+
| "onItemClick"
|
|
421
|
+
| "onKeyDown"
|
|
422
|
+
| "onMouseEnter"
|
|
423
|
+
| "registerElement"
|
|
424
|
+
| "shouldFocus"
|
|
425
|
+
| "onBlurCapture"
|
|
426
|
+
>;
|
|
427
|
+
padding?: number | number[];
|
|
428
|
+
popover?: Omit<PopoverProps, "content" | "open">;
|
|
429
|
+
radius?: Radius | Radius[];
|
|
430
|
+
space?: number | number[];
|
|
431
|
+
text: React.ReactNode;
|
|
432
|
+
tone?: SelectableTone;
|
|
398
433
|
}
|
|
399
434
|
|
|
400
435
|
/**
|
|
@@ -402,24 +437,29 @@ declare interface MenuGroupProps {
|
|
|
402
437
|
*/
|
|
403
438
|
export declare const MenuItem: ForwardRefExoticComponent<
|
|
404
439
|
MenuItemProps &
|
|
405
|
-
Omit<
|
|
440
|
+
Omit<
|
|
441
|
+
HTMLProps<HTMLDivElement>,
|
|
442
|
+
"selected" | "height" | "ref" | "tabIndex" | "as"
|
|
443
|
+
> &
|
|
406
444
|
RefAttributes<HTMLDivElement>
|
|
407
|
-
|
|
445
|
+
>;
|
|
408
446
|
|
|
409
447
|
/**
|
|
410
448
|
* @public
|
|
411
449
|
*/
|
|
412
|
-
export declare interface MenuItemProps
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
450
|
+
export declare interface MenuItemProps
|
|
451
|
+
extends ResponsivePaddingProps,
|
|
452
|
+
ResponsiveRadiusProps {
|
|
453
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
454
|
+
fontSize?: number | number[];
|
|
455
|
+
hotkeys?: string[];
|
|
456
|
+
icon?: React.ElementType | React.ReactNode;
|
|
457
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
458
|
+
pressed?: boolean;
|
|
459
|
+
selected?: boolean;
|
|
460
|
+
space?: number | number[];
|
|
461
|
+
text?: React.ReactNode;
|
|
462
|
+
tone?: SelectableTone;
|
|
423
463
|
}
|
|
424
464
|
|
|
425
465
|
/**
|
|
@@ -429,21 +469,21 @@ declare interface MenuProps extends ResponsivePaddingProps {
|
|
|
429
469
|
/**
|
|
430
470
|
* @deprecated Use `shouldFocus="first"` instead.
|
|
431
471
|
*/
|
|
432
|
-
|
|
472
|
+
focusFirst?: boolean;
|
|
433
473
|
/**
|
|
434
474
|
* @deprecated Use `shouldFocus="last"` instead.
|
|
435
475
|
*/
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
476
|
+
focusLast?: boolean;
|
|
477
|
+
onClickOutside?: (event: MouseEvent) => void;
|
|
478
|
+
onEscape?: () => void;
|
|
479
|
+
onItemClick?: () => void;
|
|
480
|
+
onItemSelect?: (index: number) => void;
|
|
481
|
+
originElement?: HTMLElement | null;
|
|
482
|
+
registerElement?: (el: HTMLElement) => () => void;
|
|
483
|
+
shouldFocus?: "first" | "last" | null;
|
|
484
|
+
space?: number | number[];
|
|
485
|
+
"aria-labelledby"?: string;
|
|
486
|
+
onBlurCapture?: (event: FocusEvent) => void;
|
|
447
487
|
}
|
|
448
488
|
|
|
449
489
|
/**
|
|
@@ -452,18 +492,18 @@ declare interface MenuProps extends ResponsivePaddingProps {
|
|
|
452
492
|
* @public
|
|
453
493
|
*/
|
|
454
494
|
declare type Placement =
|
|
455
|
-
|
|
|
456
|
-
|
|
|
457
|
-
|
|
|
458
|
-
|
|
|
459
|
-
|
|
|
460
|
-
|
|
|
461
|
-
|
|
|
462
|
-
|
|
|
463
|
-
|
|
|
464
|
-
|
|
|
465
|
-
|
|
|
466
|
-
|
|
|
495
|
+
| "top"
|
|
496
|
+
| "top-start"
|
|
497
|
+
| "top-end"
|
|
498
|
+
| "right"
|
|
499
|
+
| "right-start"
|
|
500
|
+
| "right-end"
|
|
501
|
+
| "bottom"
|
|
502
|
+
| "bottom-start"
|
|
503
|
+
| "bottom-end"
|
|
504
|
+
| "left"
|
|
505
|
+
| "left-start"
|
|
506
|
+
| "left-end";
|
|
467
507
|
|
|
468
508
|
/**
|
|
469
509
|
* The `Popover` component is used to display some content on top of another.
|
|
@@ -472,35 +512,36 @@ declare type Placement =
|
|
|
472
512
|
*/
|
|
473
513
|
export declare const Popover: NamedExoticComponent<
|
|
474
514
|
Omit<
|
|
475
|
-
PopoverProps &
|
|
476
|
-
|
|
515
|
+
PopoverProps &
|
|
516
|
+
Omit<HTMLProps<HTMLDivElement>, "content" | "width" | "children" | "as">,
|
|
517
|
+
"ref"
|
|
477
518
|
> &
|
|
478
519
|
RefAttributes<HTMLDivElement>
|
|
479
|
-
|
|
520
|
+
>;
|
|
480
521
|
|
|
481
522
|
/**
|
|
482
523
|
* @beta
|
|
483
524
|
*/
|
|
484
|
-
export declare type PopoverMargins = [number, number, number, number]
|
|
525
|
+
export declare type PopoverMargins = [number, number, number, number];
|
|
485
526
|
|
|
486
527
|
/** @public */
|
|
487
528
|
declare interface PopoverProps
|
|
488
|
-
extends Omit<LayerProps,
|
|
529
|
+
extends Omit<LayerProps, "as">,
|
|
489
530
|
ResponsiveRadiusProps,
|
|
490
531
|
ResponsiveShadowProps {
|
|
491
532
|
/** @beta */
|
|
492
|
-
__unstable_margins?: PopoverMargins
|
|
533
|
+
__unstable_margins?: PopoverMargins;
|
|
493
534
|
/**
|
|
494
535
|
* Whether the popover should animate in and out.
|
|
495
536
|
*
|
|
496
537
|
* @beta
|
|
497
538
|
* @defaultValue false
|
|
498
539
|
*/
|
|
499
|
-
animate?: boolean
|
|
500
|
-
arrow?: boolean
|
|
540
|
+
animate?: boolean;
|
|
541
|
+
arrow?: boolean;
|
|
501
542
|
/** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
|
|
502
|
-
boundaryElement?: HTMLElement | null
|
|
503
|
-
children?: React.JSX.Element
|
|
543
|
+
boundaryElement?: HTMLElement | null;
|
|
544
|
+
children?: React.JSX.Element;
|
|
504
545
|
/**
|
|
505
546
|
* When `true`, prevent overflow within the current boundary:
|
|
506
547
|
* - by flipping on its side axis
|
|
@@ -512,11 +553,11 @@ declare interface PopoverProps
|
|
|
512
553
|
*
|
|
513
554
|
* @defaultValue false
|
|
514
555
|
*/
|
|
515
|
-
constrainSize?: boolean
|
|
516
|
-
content?: React.ReactNode
|
|
517
|
-
disabled?: boolean
|
|
518
|
-
fallbackPlacements?: Placement[]
|
|
519
|
-
floatingBoundary?: HTMLElement | null
|
|
556
|
+
constrainSize?: boolean;
|
|
557
|
+
content?: React.ReactNode;
|
|
558
|
+
disabled?: boolean;
|
|
559
|
+
fallbackPlacements?: Placement[];
|
|
560
|
+
floatingBoundary?: HTMLElement | null;
|
|
520
561
|
/**
|
|
521
562
|
* When `true`, set the maximum width to match the reference element, and also prevent overflow within
|
|
522
563
|
* the current boundary by resizing.
|
|
@@ -525,18 +566,18 @@ declare interface PopoverProps
|
|
|
525
566
|
*
|
|
526
567
|
* @defaultValue false
|
|
527
568
|
*/
|
|
528
|
-
matchReferenceWidth?: boolean
|
|
569
|
+
matchReferenceWidth?: boolean;
|
|
529
570
|
/**
|
|
530
571
|
* When true, blocks all pointer interaction with elements beneath the popover until closed.
|
|
531
572
|
*
|
|
532
573
|
* @beta
|
|
533
574
|
* @defaultValue false
|
|
534
575
|
*/
|
|
535
|
-
modal?: boolean
|
|
536
|
-
open?: boolean
|
|
537
|
-
overflow?: BoxOverflow
|
|
538
|
-
padding?: number | number[]
|
|
539
|
-
placement?: Placement
|
|
576
|
+
modal?: boolean;
|
|
577
|
+
open?: boolean;
|
|
578
|
+
overflow?: BoxOverflow;
|
|
579
|
+
padding?: number | number[];
|
|
580
|
+
placement?: Placement;
|
|
540
581
|
/**
|
|
541
582
|
* When 'flip' (default), the placement is determined from the initial placement and the
|
|
542
583
|
* fallback placements in order. Whichever fits in the viewport first.
|
|
@@ -546,58 +587,60 @@ declare interface PopoverProps
|
|
|
546
587
|
*
|
|
547
588
|
* Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
|
|
548
589
|
*/
|
|
549
|
-
placementStrategy?:
|
|
590
|
+
placementStrategy?: "flip" | "autoPlacement";
|
|
550
591
|
/** Whether or not to render the popover in a portal element. */
|
|
551
|
-
portal?: boolean | string
|
|
552
|
-
preventOverflow?: boolean
|
|
553
|
-
referenceBoundary?: HTMLElement | null
|
|
592
|
+
portal?: boolean | string;
|
|
593
|
+
preventOverflow?: boolean;
|
|
594
|
+
referenceBoundary?: HTMLElement | null;
|
|
554
595
|
/**
|
|
555
596
|
* When defined, the popover will be positioned relative to this element.
|
|
556
597
|
* The children of the popover won't be rendered.
|
|
557
598
|
*/
|
|
558
|
-
referenceElement?: HTMLElement | null
|
|
559
|
-
scheme?: ThemeColorSchemeKey
|
|
560
|
-
tone?: CardTone
|
|
599
|
+
referenceElement?: HTMLElement | null;
|
|
600
|
+
scheme?: ThemeColorSchemeKey;
|
|
601
|
+
tone?: CardTone;
|
|
561
602
|
/** @beta */
|
|
562
603
|
updateRef?:
|
|
563
604
|
| MutableRefObject<PopoverUpdateCallback | undefined>
|
|
564
|
-
| RefCallback<PopoverUpdateCallback | undefined
|
|
565
|
-
width?: PopoverWidth | PopoverWidth[]
|
|
605
|
+
| RefCallback<PopoverUpdateCallback | undefined>;
|
|
606
|
+
width?: PopoverWidth | PopoverWidth[];
|
|
566
607
|
}
|
|
567
608
|
|
|
568
609
|
/** @beta */
|
|
569
|
-
declare type PopoverUpdateCallback = () => void
|
|
610
|
+
declare type PopoverUpdateCallback = () => void;
|
|
570
611
|
|
|
571
612
|
/** @public */
|
|
572
|
-
declare type PopoverWidth = number |
|
|
613
|
+
declare type PopoverWidth = number | "auto";
|
|
573
614
|
|
|
574
615
|
/**
|
|
575
616
|
* @public
|
|
576
617
|
*/
|
|
577
|
-
export declare function Portal(props: PortalProps): React.ReactPortal | null
|
|
618
|
+
export declare function Portal(props: PortalProps): React.ReactPortal | null;
|
|
578
619
|
|
|
579
620
|
export declare namespace Portal {
|
|
580
|
-
var displayName: string
|
|
621
|
+
var displayName: string;
|
|
581
622
|
}
|
|
582
623
|
|
|
583
624
|
/**
|
|
584
625
|
* @public
|
|
585
626
|
*/
|
|
586
627
|
declare interface PortalProps {
|
|
587
|
-
children: React.ReactNode
|
|
628
|
+
children: React.ReactNode;
|
|
588
629
|
/**
|
|
589
630
|
* @beta This API might change. DO NOT USE IN PRODUCTION.
|
|
590
631
|
*/
|
|
591
|
-
__unstable_name?: string
|
|
632
|
+
__unstable_name?: string;
|
|
592
633
|
}
|
|
593
634
|
|
|
594
635
|
/**
|
|
595
636
|
* @public
|
|
596
637
|
*/
|
|
597
|
-
export declare function PortalProvider(
|
|
638
|
+
export declare function PortalProvider(
|
|
639
|
+
props: PortalProviderProps,
|
|
640
|
+
): React.JSX.Element;
|
|
598
641
|
|
|
599
642
|
export declare namespace PortalProvider {
|
|
600
|
-
var displayName: string
|
|
643
|
+
var displayName: string;
|
|
601
644
|
}
|
|
602
645
|
|
|
603
646
|
/**
|
|
@@ -607,39 +650,39 @@ declare interface PortalProviderProps {
|
|
|
607
650
|
/**
|
|
608
651
|
* @deprecated Use `<BoundaryElementProvider element={...} />` instead
|
|
609
652
|
*/
|
|
610
|
-
boundaryElement?: HTMLElement | null
|
|
611
|
-
children: React.ReactNode
|
|
612
|
-
element?: HTMLElement | null
|
|
653
|
+
boundaryElement?: HTMLElement | null;
|
|
654
|
+
children: React.ReactNode;
|
|
655
|
+
element?: HTMLElement | null;
|
|
613
656
|
/**
|
|
614
657
|
* @beta
|
|
615
658
|
*/
|
|
616
|
-
__unstable_elements?: Record<string, HTMLElement | null | undefined
|
|
659
|
+
__unstable_elements?: Record<string, HTMLElement | null | undefined>;
|
|
617
660
|
}
|
|
618
661
|
|
|
619
662
|
/**
|
|
620
663
|
* @public
|
|
621
664
|
*/
|
|
622
|
-
declare type Radius = number |
|
|
665
|
+
declare type Radius = number | "full";
|
|
623
666
|
|
|
624
667
|
/**
|
|
625
668
|
* @public
|
|
626
669
|
*/
|
|
627
670
|
declare interface ResponsiveBorderProps {
|
|
628
|
-
border?: boolean | boolean[]
|
|
629
|
-
borderTop?: boolean | boolean[]
|
|
630
|
-
borderRight?: boolean | boolean[]
|
|
631
|
-
borderBottom?: boolean | boolean[]
|
|
632
|
-
borderLeft?: boolean | boolean[]
|
|
671
|
+
border?: boolean | boolean[];
|
|
672
|
+
borderTop?: boolean | boolean[];
|
|
673
|
+
borderRight?: boolean | boolean[];
|
|
674
|
+
borderBottom?: boolean | boolean[];
|
|
675
|
+
borderLeft?: boolean | boolean[];
|
|
633
676
|
}
|
|
634
677
|
|
|
635
678
|
/**
|
|
636
679
|
* @public
|
|
637
680
|
*/
|
|
638
681
|
declare interface ResponsiveBoxProps {
|
|
639
|
-
display?: BoxDisplay | BoxDisplay[]
|
|
640
|
-
height?: BoxHeight | BoxHeight[]
|
|
641
|
-
overflow?: BoxOverflow | BoxOverflow[]
|
|
642
|
-
sizing?: BoxSizing | BoxSizing[]
|
|
682
|
+
display?: BoxDisplay | BoxDisplay[];
|
|
683
|
+
height?: BoxHeight | BoxHeight[];
|
|
684
|
+
overflow?: BoxOverflow | BoxOverflow[];
|
|
685
|
+
sizing?: BoxSizing | BoxSizing[];
|
|
643
686
|
}
|
|
644
687
|
|
|
645
688
|
/**
|
|
@@ -647,43 +690,43 @@ declare interface ResponsiveBoxProps {
|
|
|
647
690
|
*/
|
|
648
691
|
declare interface ResponsiveFlexItemProps {
|
|
649
692
|
/** Sets the flex CSS attribute. The property is responsive. */
|
|
650
|
-
flex?: FlexValue | FlexValue[]
|
|
693
|
+
flex?: FlexValue | FlexValue[];
|
|
651
694
|
}
|
|
652
695
|
|
|
653
696
|
/**
|
|
654
697
|
* @public
|
|
655
698
|
*/
|
|
656
699
|
declare interface ResponsiveFlexProps {
|
|
657
|
-
align?: FlexAlign | FlexAlign[]
|
|
658
|
-
direction?: FlexDirection | FlexDirection[]
|
|
659
|
-
justify?: FlexJustify | FlexJustify[]
|
|
660
|
-
wrap?: FlexWrap | FlexWrap[]
|
|
700
|
+
align?: FlexAlign | FlexAlign[];
|
|
701
|
+
direction?: FlexDirection | FlexDirection[];
|
|
702
|
+
justify?: FlexJustify | FlexJustify[];
|
|
703
|
+
wrap?: FlexWrap | FlexWrap[];
|
|
661
704
|
}
|
|
662
705
|
|
|
663
706
|
/**
|
|
664
707
|
* @public
|
|
665
708
|
*/
|
|
666
709
|
declare interface ResponsiveGridItemProps {
|
|
667
|
-
column?: GridItemColumn | GridItemColumn[]
|
|
668
|
-
columnStart?: GridItemColumnStart | GridItemColumnStart[]
|
|
669
|
-
columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
|
|
670
|
-
row?: GridItemRow | GridItemRow[]
|
|
671
|
-
rowStart?: GridItemRowStart | GridItemRowStart[]
|
|
672
|
-
rowEnd?: GridItemRowEnd | GridItemRowEnd[]
|
|
710
|
+
column?: GridItemColumn | GridItemColumn[];
|
|
711
|
+
columnStart?: GridItemColumnStart | GridItemColumnStart[];
|
|
712
|
+
columnEnd?: GridItemColumnEnd | GridItemColumnEnd[];
|
|
713
|
+
row?: GridItemRow | GridItemRow[];
|
|
714
|
+
rowStart?: GridItemRowStart | GridItemRowStart[];
|
|
715
|
+
rowEnd?: GridItemRowEnd | GridItemRowEnd[];
|
|
673
716
|
}
|
|
674
717
|
|
|
675
718
|
/**
|
|
676
719
|
* @public
|
|
677
720
|
*/
|
|
678
721
|
declare interface ResponsiveGridProps {
|
|
679
|
-
autoRows?: GridAutoRows | GridAutoRows[]
|
|
680
|
-
autoCols?: GridAutoCols | GridAutoCols[]
|
|
681
|
-
autoFlow?: GridAutoFlow | GridAutoFlow[]
|
|
682
|
-
columns?: number | number[]
|
|
683
|
-
gap?: number | number[]
|
|
684
|
-
gapX?: number | number[]
|
|
685
|
-
gapY?: number | number[]
|
|
686
|
-
rows?: number | number[]
|
|
722
|
+
autoRows?: GridAutoRows | GridAutoRows[];
|
|
723
|
+
autoCols?: GridAutoCols | GridAutoCols[];
|
|
724
|
+
autoFlow?: GridAutoFlow | GridAutoFlow[];
|
|
725
|
+
columns?: number | number[];
|
|
726
|
+
gap?: number | number[];
|
|
727
|
+
gapX?: number | number[];
|
|
728
|
+
gapY?: number | number[];
|
|
729
|
+
rows?: number | number[];
|
|
687
730
|
}
|
|
688
731
|
|
|
689
732
|
/**
|
|
@@ -691,48 +734,48 @@ declare interface ResponsiveGridProps {
|
|
|
691
734
|
*/
|
|
692
735
|
declare interface ResponsiveMarginProps {
|
|
693
736
|
/** Applies margins to all sides. The property is responsive. */
|
|
694
|
-
margin?: number | number[]
|
|
737
|
+
margin?: number | number[];
|
|
695
738
|
/** Applies margins to the left and right sides. The property is responsive. */
|
|
696
|
-
marginX?: number | number[]
|
|
739
|
+
marginX?: number | number[];
|
|
697
740
|
/** Applies margins to the top and bottom sides. The property is responsive. */
|
|
698
|
-
marginY?: number | number[]
|
|
699
|
-
marginTop?: number | number[]
|
|
700
|
-
marginRight?: number | number[]
|
|
701
|
-
marginBottom?: number | number[]
|
|
702
|
-
marginLeft?: number | number[]
|
|
741
|
+
marginY?: number | number[];
|
|
742
|
+
marginTop?: number | number[];
|
|
743
|
+
marginRight?: number | number[];
|
|
744
|
+
marginBottom?: number | number[];
|
|
745
|
+
marginLeft?: number | number[];
|
|
703
746
|
}
|
|
704
747
|
|
|
705
748
|
/**
|
|
706
749
|
* @public
|
|
707
750
|
*/
|
|
708
751
|
declare interface ResponsivePaddingProps {
|
|
709
|
-
padding?: number | number[]
|
|
710
|
-
paddingX?: number | number[]
|
|
711
|
-
paddingY?: number | number[]
|
|
712
|
-
paddingTop?: number | number[]
|
|
713
|
-
paddingRight?: number | number[]
|
|
714
|
-
paddingBottom?: number | number[]
|
|
715
|
-
paddingLeft?: number | number[]
|
|
752
|
+
padding?: number | number[];
|
|
753
|
+
paddingX?: number | number[];
|
|
754
|
+
paddingY?: number | number[];
|
|
755
|
+
paddingTop?: number | number[];
|
|
756
|
+
paddingRight?: number | number[];
|
|
757
|
+
paddingBottom?: number | number[];
|
|
758
|
+
paddingLeft?: number | number[];
|
|
716
759
|
}
|
|
717
760
|
|
|
718
761
|
/**
|
|
719
762
|
* @public
|
|
720
763
|
*/
|
|
721
764
|
declare interface ResponsiveRadiusProps {
|
|
722
|
-
radius?: Radius | Radius[]
|
|
765
|
+
radius?: Radius | Radius[];
|
|
723
766
|
}
|
|
724
767
|
|
|
725
768
|
/**
|
|
726
769
|
* @public
|
|
727
770
|
*/
|
|
728
771
|
declare interface ResponsiveShadowProps {
|
|
729
|
-
shadow?: number | number[]
|
|
772
|
+
shadow?: number | number[];
|
|
730
773
|
}
|
|
731
774
|
|
|
732
775
|
/**
|
|
733
776
|
* @public
|
|
734
777
|
*/
|
|
735
|
-
declare type SelectableTone = ThemeColorStateToneKey
|
|
778
|
+
declare type SelectableTone = ThemeColorStateToneKey;
|
|
736
779
|
|
|
737
780
|
/**
|
|
738
781
|
* Indicate that something is loading for an indeterminate amount of time.
|
|
@@ -740,16 +783,16 @@ declare type SelectableTone = ThemeColorStateToneKey
|
|
|
740
783
|
* @public
|
|
741
784
|
*/
|
|
742
785
|
export declare const Spinner: ForwardRefExoticComponent<
|
|
743
|
-
Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>,
|
|
786
|
+
Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, "size" | "as">, "ref"> &
|
|
744
787
|
RefAttributes<HTMLDivElement>
|
|
745
|
-
|
|
788
|
+
>;
|
|
746
789
|
|
|
747
790
|
/**
|
|
748
791
|
* @public
|
|
749
792
|
*/
|
|
750
793
|
declare interface SpinnerProps {
|
|
751
|
-
muted?: boolean
|
|
752
|
-
size?: number | number[]
|
|
794
|
+
muted?: boolean;
|
|
795
|
+
size?: number | number[];
|
|
753
796
|
}
|
|
754
797
|
|
|
755
798
|
/**
|
|
@@ -758,22 +801,24 @@ declare interface SpinnerProps {
|
|
|
758
801
|
* @public
|
|
759
802
|
*/
|
|
760
803
|
export declare const Stack: ForwardRefExoticComponent<
|
|
761
|
-
StackProps &
|
|
762
|
-
>
|
|
804
|
+
StackProps &
|
|
805
|
+
Omit<HTMLProps<HTMLDivElement>, "ref" | "as"> &
|
|
806
|
+
RefAttributes<HTMLDivElement>
|
|
807
|
+
>;
|
|
763
808
|
|
|
764
809
|
/**
|
|
765
810
|
* @public
|
|
766
811
|
*/
|
|
767
812
|
declare interface StackProps extends BoxProps {
|
|
768
|
-
as?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
769
|
-
space?: number | number[]
|
|
813
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
814
|
+
space?: number | number[];
|
|
770
815
|
}
|
|
771
816
|
|
|
772
817
|
/**
|
|
773
818
|
* @public
|
|
774
819
|
* @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
|
|
775
820
|
*/
|
|
776
|
-
export declare const studioTheme: BaseTheme
|
|
821
|
+
export declare const studioTheme: BaseTheme;
|
|
777
822
|
|
|
778
823
|
/**
|
|
779
824
|
* @public
|
|
@@ -783,26 +828,26 @@ export declare const Tab: ForwardRefExoticComponent<
|
|
|
783
828
|
TabProps &
|
|
784
829
|
Omit<
|
|
785
830
|
HTMLProps<HTMLButtonElement>,
|
|
786
|
-
|
|
831
|
+
"label" | "id" | "type" | "width" | "aria-controls" | "as"
|
|
787
832
|
>,
|
|
788
|
-
|
|
833
|
+
"ref"
|
|
789
834
|
> &
|
|
790
835
|
RefAttributes<HTMLButtonElement>
|
|
791
|
-
|
|
836
|
+
>;
|
|
792
837
|
|
|
793
838
|
/**
|
|
794
839
|
* @public
|
|
795
840
|
*/
|
|
796
841
|
export declare const TabList: ForwardRefExoticComponent<
|
|
797
|
-
Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>,
|
|
842
|
+
Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, "height" | "as">, "ref"> &
|
|
798
843
|
RefAttributes<unknown>
|
|
799
|
-
|
|
844
|
+
>;
|
|
800
845
|
|
|
801
846
|
/**
|
|
802
847
|
* @public
|
|
803
848
|
*/
|
|
804
|
-
declare interface TabListProps extends Omit<InlineProps,
|
|
805
|
-
children: Array<React.JSX.Element | null | undefined | false
|
|
849
|
+
declare interface TabListProps extends Omit<InlineProps, "as" | "height"> {
|
|
850
|
+
children: Array<React.JSX.Element | null | undefined | false>;
|
|
806
851
|
}
|
|
807
852
|
|
|
808
853
|
/**
|
|
@@ -812,15 +857,15 @@ declare interface TabProps {
|
|
|
812
857
|
/**
|
|
813
858
|
* The `id` of the correlating `TabPanel` component.
|
|
814
859
|
*/
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
860
|
+
"aria-controls": string;
|
|
861
|
+
id: string;
|
|
862
|
+
icon?: React.ElementType | React.ReactNode;
|
|
863
|
+
focused?: boolean;
|
|
864
|
+
fontSize?: number | number[];
|
|
865
|
+
label?: React.ReactNode;
|
|
866
|
+
padding?: number | number[];
|
|
867
|
+
selected?: boolean;
|
|
868
|
+
tone?: ButtonTone;
|
|
824
869
|
}
|
|
825
870
|
|
|
826
871
|
/**
|
|
@@ -829,15 +874,15 @@ declare interface TabProps {
|
|
|
829
874
|
* @public
|
|
830
875
|
*/
|
|
831
876
|
declare const Text_2: ForwardRefExoticComponent<
|
|
832
|
-
Omit<TextProps & Omit<HTMLProps<HTMLDivElement>,
|
|
877
|
+
Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, "size" | "as">, "ref"> &
|
|
833
878
|
RefAttributes<HTMLDivElement>
|
|
834
|
-
|
|
835
|
-
export {Text_2 as Text}
|
|
879
|
+
>;
|
|
880
|
+
export { Text_2 as Text };
|
|
836
881
|
|
|
837
882
|
/**
|
|
838
883
|
* @public
|
|
839
884
|
*/
|
|
840
|
-
declare type TextAlign =
|
|
885
|
+
declare type TextAlign = "left" | "right" | "center" | "justify" | "initial";
|
|
841
886
|
|
|
842
887
|
/**
|
|
843
888
|
* Single line text input.
|
|
@@ -845,15 +890,22 @@ declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
|
|
|
845
890
|
* @public
|
|
846
891
|
*/
|
|
847
892
|
export declare const TextInput: ForwardRefExoticComponent<
|
|
848
|
-
Omit<
|
|
893
|
+
Omit<
|
|
894
|
+
TextInputProps &
|
|
895
|
+
Omit<HTMLProps<HTMLInputElement>, "type" | "prefix" | "as">,
|
|
896
|
+
"ref"
|
|
897
|
+
> &
|
|
849
898
|
RefAttributes<HTMLInputElement>
|
|
850
|
-
|
|
899
|
+
>;
|
|
851
900
|
|
|
852
901
|
/**
|
|
853
902
|
* @public
|
|
854
903
|
*/
|
|
855
|
-
declare type TextInputClearButtonProps = Omit<ButtonProps,
|
|
856
|
-
Omit<
|
|
904
|
+
declare type TextInputClearButtonProps = Omit<ButtonProps, "as"> &
|
|
905
|
+
Omit<
|
|
906
|
+
React.HTMLProps<HTMLButtonElement>,
|
|
907
|
+
"as" | "onClick" | "onMouseDown" | "ref"
|
|
908
|
+
>;
|
|
857
909
|
|
|
858
910
|
/**
|
|
859
911
|
* @public
|
|
@@ -862,83 +914,85 @@ declare interface TextInputProps {
|
|
|
862
914
|
/**
|
|
863
915
|
* @beta
|
|
864
916
|
*/
|
|
865
|
-
__unstable_disableFocusRing?: boolean
|
|
866
|
-
border?: boolean
|
|
917
|
+
__unstable_disableFocusRing?: boolean;
|
|
918
|
+
border?: boolean;
|
|
867
919
|
/**
|
|
868
920
|
* @beta
|
|
869
921
|
*/
|
|
870
|
-
clearButton?: boolean | TextInputClearButtonProps
|
|
871
|
-
customValidity?: string
|
|
872
|
-
fontSize?: number | number[]
|
|
873
|
-
icon?: React.ElementType | React.ReactNode
|
|
874
|
-
iconRight?: React.ElementType | React.ReactNode
|
|
922
|
+
clearButton?: boolean | TextInputClearButtonProps;
|
|
923
|
+
customValidity?: string;
|
|
924
|
+
fontSize?: number | number[];
|
|
925
|
+
icon?: React.ElementType | React.ReactNode;
|
|
926
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
875
927
|
/**
|
|
876
928
|
* @beta
|
|
877
929
|
*/
|
|
878
|
-
onClear?: () => void
|
|
879
|
-
padding?: number | number[]
|
|
880
|
-
prefix?: React.ReactNode
|
|
881
|
-
radius?: Radius | Radius[]
|
|
882
|
-
space?: number | number[]
|
|
883
|
-
suffix?: React.ReactNode
|
|
884
|
-
type?: TextInputType
|
|
885
|
-
weight?: ThemeFontWeightKey
|
|
930
|
+
onClear?: () => void;
|
|
931
|
+
padding?: number | number[];
|
|
932
|
+
prefix?: React.ReactNode;
|
|
933
|
+
radius?: Radius | Radius[];
|
|
934
|
+
space?: number | number[];
|
|
935
|
+
suffix?: React.ReactNode;
|
|
936
|
+
type?: TextInputType;
|
|
937
|
+
weight?: ThemeFontWeightKey;
|
|
886
938
|
}
|
|
887
939
|
|
|
888
940
|
/**
|
|
889
941
|
* @public
|
|
890
942
|
*/
|
|
891
943
|
declare type TextInputType =
|
|
892
|
-
|
|
|
893
|
-
|
|
|
894
|
-
|
|
|
895
|
-
|
|
|
896
|
-
|
|
|
897
|
-
|
|
|
898
|
-
|
|
|
899
|
-
|
|
|
900
|
-
|
|
|
901
|
-
|
|
|
902
|
-
|
|
|
903
|
-
|
|
|
904
|
-
|
|
|
944
|
+
| "search"
|
|
945
|
+
| "date"
|
|
946
|
+
| "datetime-local"
|
|
947
|
+
| "email"
|
|
948
|
+
| "url"
|
|
949
|
+
| "month"
|
|
950
|
+
| "number"
|
|
951
|
+
| "password"
|
|
952
|
+
| "tel"
|
|
953
|
+
| "time"
|
|
954
|
+
| "text"
|
|
955
|
+
| "week"
|
|
956
|
+
| "color";
|
|
905
957
|
|
|
906
958
|
/**
|
|
907
959
|
* @public
|
|
908
960
|
*/
|
|
909
961
|
declare interface TextProps {
|
|
910
|
-
accent?: boolean
|
|
911
|
-
align?: TextAlign | TextAlign[]
|
|
912
|
-
as?: React.ElementType | keyof React.JSX.IntrinsicElements
|
|
962
|
+
accent?: boolean;
|
|
963
|
+
align?: TextAlign | TextAlign[];
|
|
964
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
913
965
|
/** When `true` the text color will be muted. */
|
|
914
|
-
muted?: boolean
|
|
915
|
-
size?: number | number[]
|
|
966
|
+
muted?: boolean;
|
|
967
|
+
size?: number | number[];
|
|
916
968
|
/**
|
|
917
969
|
* Controls how overflowing text is treated.
|
|
918
970
|
* Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
|
|
919
971
|
* @beta
|
|
920
972
|
*/
|
|
921
|
-
textOverflow?:
|
|
922
|
-
weight?: ThemeFontWeightKey
|
|
973
|
+
textOverflow?: "ellipsis";
|
|
974
|
+
weight?: ThemeFontWeightKey;
|
|
923
975
|
}
|
|
924
976
|
|
|
925
977
|
/**
|
|
926
978
|
* @public
|
|
927
979
|
*/
|
|
928
|
-
export declare function ThemeProvider(
|
|
980
|
+
export declare function ThemeProvider(
|
|
981
|
+
props: ThemeProviderProps,
|
|
982
|
+
): React.JSX.Element;
|
|
929
983
|
|
|
930
984
|
export declare namespace ThemeProvider {
|
|
931
|
-
var displayName: string
|
|
985
|
+
var displayName: string;
|
|
932
986
|
}
|
|
933
987
|
|
|
934
988
|
/**
|
|
935
989
|
* @public
|
|
936
990
|
*/
|
|
937
991
|
declare interface ThemeProviderProps {
|
|
938
|
-
children?: React.ReactNode
|
|
939
|
-
scheme?: ThemeColorSchemeKey
|
|
940
|
-
theme?: RootTheme
|
|
941
|
-
tone?: ThemeColorCardToneKey
|
|
992
|
+
children?: React.ReactNode;
|
|
993
|
+
scheme?: ThemeColorSchemeKey;
|
|
994
|
+
theme?: RootTheme;
|
|
995
|
+
tone?: ThemeColorCardToneKey;
|
|
942
996
|
}
|
|
943
997
|
|
|
944
998
|
/**
|
|
@@ -947,29 +1001,33 @@ declare interface ThemeProviderProps {
|
|
|
947
1001
|
* @public
|
|
948
1002
|
*/
|
|
949
1003
|
export declare const Tooltip: ForwardRefExoticComponent<
|
|
950
|
-
Omit<
|
|
1004
|
+
Omit<
|
|
1005
|
+
TooltipProps &
|
|
1006
|
+
Omit<HTMLProps<HTMLDivElement>, "content" | "children" | "as">,
|
|
1007
|
+
"ref"
|
|
1008
|
+
> &
|
|
951
1009
|
RefAttributes<HTMLDivElement>
|
|
952
|
-
|
|
1010
|
+
>;
|
|
953
1011
|
|
|
954
1012
|
/**
|
|
955
1013
|
* @public
|
|
956
1014
|
*/
|
|
957
|
-
declare interface TooltipProps extends Omit<LayerProps,
|
|
1015
|
+
declare interface TooltipProps extends Omit<LayerProps, "as"> {
|
|
958
1016
|
/** @deprecated Use `fallbackPlacements` instead. */
|
|
959
|
-
allowedAutoPlacements?: Placement[]
|
|
960
|
-
arrow?: boolean
|
|
961
|
-
boundaryElement?: HTMLElement | null
|
|
962
|
-
children?: React.JSX.Element
|
|
963
|
-
content?: React.ReactNode
|
|
964
|
-
disabled?: boolean
|
|
965
|
-
fallbackPlacements?: Placement[]
|
|
966
|
-
padding?: number | number[]
|
|
967
|
-
placement?: Placement
|
|
1017
|
+
allowedAutoPlacements?: Placement[];
|
|
1018
|
+
arrow?: boolean;
|
|
1019
|
+
boundaryElement?: HTMLElement | null;
|
|
1020
|
+
children?: React.JSX.Element;
|
|
1021
|
+
content?: React.ReactNode;
|
|
1022
|
+
disabled?: boolean;
|
|
1023
|
+
fallbackPlacements?: Placement[];
|
|
1024
|
+
padding?: number | number[];
|
|
1025
|
+
placement?: Placement;
|
|
968
1026
|
/** Whether or not to render the tooltip in a portal element. */
|
|
969
|
-
portal?: boolean | string
|
|
970
|
-
radius?: number | number[]
|
|
971
|
-
scheme?: ThemeColorSchemeKey
|
|
972
|
-
shadow?: number | number[]
|
|
1027
|
+
portal?: boolean | string;
|
|
1028
|
+
radius?: number | number[];
|
|
1029
|
+
scheme?: ThemeColorSchemeKey;
|
|
1030
|
+
shadow?: number | number[];
|
|
973
1031
|
/**
|
|
974
1032
|
* Adds a delay to open or close the tooltip.
|
|
975
1033
|
*
|
|
@@ -980,14 +1038,14 @@ declare interface TooltipProps extends Omit<LayerProps, 'as'> {
|
|
|
980
1038
|
* @public
|
|
981
1039
|
* @defaultValue 0
|
|
982
1040
|
*/
|
|
983
|
-
delay?: Delay
|
|
1041
|
+
delay?: Delay;
|
|
984
1042
|
/**
|
|
985
1043
|
* Whether the tooltip should animate in and out.
|
|
986
1044
|
*
|
|
987
1045
|
* @beta
|
|
988
1046
|
* @defaultValue false
|
|
989
1047
|
*/
|
|
990
|
-
animate?: boolean
|
|
1048
|
+
animate?: boolean;
|
|
991
1049
|
}
|
|
992
1050
|
|
|
993
1051
|
/**
|
|
@@ -1001,11 +1059,13 @@ declare interface TooltipProps extends Omit<LayerProps, 'as'> {
|
|
|
1001
1059
|
*
|
|
1002
1060
|
* @public
|
|
1003
1061
|
*/
|
|
1004
|
-
export declare function usePrefersDark(
|
|
1062
|
+
export declare function usePrefersDark(
|
|
1063
|
+
getServerSnapshot?: () => boolean,
|
|
1064
|
+
): boolean;
|
|
1005
1065
|
|
|
1006
1066
|
/**
|
|
1007
1067
|
* @public
|
|
1008
1068
|
*/
|
|
1009
|
-
export declare function useTheme_v2(): Theme_v2
|
|
1069
|
+
export declare function useTheme_v2(): Theme_v2;
|
|
1010
1070
|
|
|
1011
|
-
export {}
|
|
1071
|
+
export {};
|