@sanity/ui 4.0.0-static.9 → 4.0.0
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/LICENSE +1 -1
- package/README.md +25 -7
- package/dist/_system-CTe2lb5l.d.ts +40 -0
- package/dist/_system-CTe2lb5l.d.ts.map +1 -0
- package/dist/arrow-CHE8-_G7.js +161 -0
- package/dist/arrow-CHE8-_G7.js.map +1 -0
- package/dist/autocomplete.d.ts +140 -0
- package/dist/autocomplete.d.ts.map +1 -0
- package/dist/autocomplete.js +475 -0
- package/dist/autocomplete.js.map +1 -0
- package/dist/breadcrumbs.d.ts +18 -0
- package/dist/breadcrumbs.d.ts.map +1 -0
- package/dist/breadcrumbs.js +116 -0
- package/dist/breadcrumbs.js.map +1 -0
- package/dist/button-dnqMFkWg.d.ts +76 -0
- package/dist/button-dnqMFkWg.d.ts.map +1 -0
- package/dist/button-mxfSqr0n.js +179 -0
- package/dist/button-mxfSqr0n.js.map +1 -0
- package/dist/card-C0a0wQTc.d.ts +7 -0
- package/dist/card-C0a0wQTc.d.ts.map +1 -0
- package/dist/code.d.ts +20 -0
- package/dist/code.d.ts.map +1 -0
- package/dist/code.js +90 -0
- package/dist/code.js.map +1 -0
- package/dist/codeFontStyle-DYUujk7K.js +11 -0
- package/dist/codeFontStyle-DYUujk7K.js.map +1 -0
- package/dist/component-DVlwaWB-.d.ts +25 -0
- package/dist/component-DVlwaWB-.d.ts.map +1 -0
- package/dist/element-BYgCE_iK.js +51 -0
- package/dist/element-BYgCE_iK.js.map +1 -0
- package/dist/factory-BA3gEfyI.js +3056 -0
- package/dist/factory-BA3gEfyI.js.map +1 -0
- package/dist/flex-C-5JHi1C.js +76 -0
- package/dist/flex-C-5JHi1C.js.map +1 -0
- package/dist/font-EtfxKPUz.d.ts +49 -0
- package/dist/font-EtfxKPUz.d.ts.map +1 -0
- package/dist/getElementRef-5HZQ-Owu.js +91 -0
- package/dist/getElementRef-5HZQ-Owu.js.map +1 -0
- package/dist/getScopedTheme-C-sZsyAz.js +267 -0
- package/dist/getScopedTheme-C-sZsyAz.js.map +1 -0
- package/dist/getTheme_v2-y09KqtEb.js +487 -0
- package/dist/getTheme_v2-y09KqtEb.js.map +1 -0
- package/dist/grid-BXHFJhf_.js +115 -0
- package/dist/grid-BXHFJhf_.js.map +1 -0
- package/dist/helpers-bwfx1e-Y.js +67 -0
- package/dist/helpers-bwfx1e-Y.js.map +1 -0
- package/dist/hotkeys-CmmTQZpn.js +165 -0
- package/dist/hotkeys-CmmTQZpn.js.map +1 -0
- package/dist/index.d.ts +1192 -2168
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2069 -4483
- package/dist/index.js.map +1 -1
- package/dist/layer-B98ynOf2.js +61 -0
- package/dist/layer-B98ynOf2.js.map +1 -0
- package/dist/layer-ChlP9Ik6.d.ts +242 -0
- package/dist/layer-ChlP9Ik6.d.ts.map +1 -0
- package/dist/menu.d.ts +146 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +614 -0
- package/dist/menu.js.map +1 -0
- package/dist/popover-CMlQeKn0.d.ts +96 -0
- package/dist/popover-CMlQeKn0.d.ts.map +1 -0
- package/dist/popover-PorX5Jv9.js +419 -0
- package/dist/popover-PorX5Jv9.js.map +1 -0
- package/dist/popover.d.ts +2 -0
- package/dist/popover.js +3 -0
- package/dist/refractor-CC48DwHi.js +20 -0
- package/dist/refractor-CC48DwHi.js.map +1 -0
- package/dist/responsiveFont-hN1mZFjm.js +55 -0
- package/dist/responsiveFont-hN1mZFjm.js.map +1 -0
- package/dist/rgba-BSYaEUW6.d.ts +846 -0
- package/dist/rgba-BSYaEUW6.d.ts.map +1 -0
- package/dist/selectable-B0GUIL74.d.ts +7 -0
- package/dist/selectable-B0GUIL74.d.ts.map +1 -0
- package/dist/stack-iW9HuGLg.js +112 -0
- package/dist/stack-iW9HuGLg.js.map +1 -0
- package/dist/styles-css.d.ts +2 -0
- package/dist/styles-css.js +4 -0
- package/dist/styles.css +28 -0
- package/dist/textInput-udxyGbm1.js +321 -0
- package/dist/textInput-udxyGbm1.js.map +1 -0
- package/dist/theme.d.ts +240 -459
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +55 -870
- package/dist/theme.js.map +1 -1
- package/dist/toast.d.ts +73 -0
- package/dist/toast.d.ts.map +1 -0
- package/dist/toast.js +297 -0
- package/dist/toast.js.map +1 -0
- package/dist/tooltip.d.ts +88 -0
- package/dist/tooltip.d.ts.map +1 -0
- package/dist/tooltip.js +447 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/useClickOutsideEvent-lEVhDFCQ.js +36 -0
- package/dist/useClickOutsideEvent-lEVhDFCQ.js.map +1 -0
- package/dist/useElementSize-BJvbGHq8.js +51 -0
- package/dist/useElementSize-BJvbGHq8.js.map +1 -0
- package/dist/useLayer-BAVfmbNN.js +712 -0
- package/dist/useLayer-BAVfmbNN.js.map +1 -0
- package/package.json +73 -208
- package/dist/_chunks-cjs/refractor.cjs +0 -22
- package/dist/_chunks-cjs/refractor.cjs.map +0 -1
- package/dist/_chunks-es/refractor.js +0 -25
- package/dist/_chunks-es/refractor.js.map +0 -1
- package/dist/css/index.cjs +0 -966
- package/dist/css/index.cjs.map +0 -1
- package/dist/css/index.css +0 -23387
- package/dist/css/index.css.map +0 -1
- package/dist/css/index.d.cts +0 -1394
- package/dist/css/index.d.ts +0 -1394
- package/dist/css/index.js +0 -967
- package/dist/css/index.js.map +0 -1
- package/dist/index.cjs +0 -4515
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -2521
- package/dist/theme.cjs +0 -870
- package/dist/theme.cjs.map +0 -1
- package/dist/theme.d.cts +0 -499
- package/exports/css.ts +0 -1
- package/exports/index.ts +0 -1
- package/exports/theme.ts +0 -1
- package/src/core/Root.tsx +0 -88
- package/src/core/RootProvider.tsx +0 -40
- package/src/core/__workshop__/boundary.tsx +0 -28
- package/src/core/__workshop__/index.ts +0 -16
- package/src/core/components/autocomplete/__workshop__/async.tsx +0 -156
- package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +0 -131
- package/src/core/components/autocomplete/__workshop__/custom.tsx +0 -91
- package/src/core/components/autocomplete/__workshop__/example.tsx +0 -80
- package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +0 -36
- package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +0 -292
- package/src/core/components/autocomplete/__workshop__/index.ts +0 -41
- package/src/core/components/autocomplete/__workshop__/mock/apiStore.ts +0 -49
- package/src/core/components/autocomplete/__workshop__/mock/countries.ts +0 -245
- package/src/core/components/autocomplete/__workshop__/types.ts +0 -4
- package/src/core/components/autocomplete/autocomplete.tsx +0 -690
- package/src/core/components/autocomplete/autocompleteOption.tsx +0 -45
- package/src/core/components/autocomplete/autocompleteReducer.ts +0 -47
- package/src/core/components/autocomplete/constants.ts +0 -28
- package/src/core/components/autocomplete/types.ts +0 -103
- package/src/core/components/breadcrumbs/__workshop__/example.tsx +0 -61
- package/src/core/components/breadcrumbs/__workshop__/index.ts +0 -16
- package/src/core/components/breadcrumbs/breadcrumbs.tsx +0 -131
- package/src/core/components/dialog/__workshop__/activate.tsx +0 -141
- package/src/core/components/dialog/__workshop__/autoFocus.tsx +0 -29
- package/src/core/components/dialog/__workshop__/index.ts +0 -21
- package/src/core/components/dialog/__workshop__/layering.tsx +0 -41
- package/src/core/components/dialog/__workshop__/nested.tsx +0 -71
- package/src/core/components/dialog/__workshop__/onScroll.tsx +0 -51
- package/src/core/components/dialog/__workshop__/panes.tsx +0 -89
- package/src/core/components/dialog/__workshop__/position.tsx +0 -30
- package/src/core/components/dialog/__workshop__/props.tsx +0 -77
- package/src/core/components/dialog/__workshop__/provider.tsx +0 -11
- package/src/core/components/dialog/__workshop__/wrapped.tsx +0 -76
- package/src/core/components/dialog/dialog.tsx +0 -232
- package/src/core/components/dialog/dialogCard.tsx +0 -233
- package/src/core/components/dialog/dialogContext.ts +0 -21
- package/src/core/components/dialog/dialogProvider.tsx +0 -34
- package/src/core/components/dialog/isTargetWithinScope.ts +0 -14
- package/src/core/components/dialog/types.ts +0 -2
- package/src/core/components/dialog/useDialog.ts +0 -11
- package/src/core/components/hotkeys/__workshop__/index.ts +0 -16
- package/src/core/components/hotkeys/__workshop__/plain.tsx +0 -9
- package/src/core/components/hotkeys/hotkeys.tsx +0 -60
- package/src/core/components/menu/__workshop__/asComponent.tsx +0 -45
- package/src/core/components/menu/__workshop__/avatarMenu.tsx +0 -57
- package/src/core/components/menu/__workshop__/closableMenuButton.tsx +0 -47
- package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +0 -133
- package/src/core/components/menu/__workshop__/customMenuItem.tsx +0 -45
- package/src/core/components/menu/__workshop__/customSelectedState.tsx +0 -35
- 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 -91
- 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 -50
- package/src/core/components/menu/__workshop__/selectedItem.tsx +0 -69
- package/src/core/components/menu/__workshop__/shouldFocus.tsx +0 -42
- package/src/core/components/menu/__workshop__/tones.tsx +0 -25
- package/src/core/components/menu/__workshop__/withoutArrow.tsx +0 -32
- package/src/core/components/menu/helpers.ts +0 -82
- package/src/core/components/menu/menu.test.tsx +0 -129
- package/src/core/components/menu/menu.tsx +0 -179
- package/src/core/components/menu/menuButton.tsx +0 -225
- package/src/core/components/menu/menuContext.ts +0 -19
- package/src/core/components/menu/menuDivider.tsx +0 -32
- package/src/core/components/menu/menuGroup.tsx +0 -233
- package/src/core/components/menu/menuItem.tsx +0 -184
- package/src/core/components/menu/useMenu.ts +0 -21
- package/src/core/components/menu/useMenuController.ts +0 -241
- package/src/core/components/tab/__workshop__/example.tsx +0 -79
- package/src/core/components/tab/__workshop__/index.ts +0 -16
- package/src/core/components/tab/tab.tsx +0 -109
- package/src/core/components/tab/tabList.tsx +0 -90
- package/src/core/components/tab/tabPanel.tsx +0 -47
- package/src/core/components/toast/__workshop__/hook.tsx +0 -71
- package/src/core/components/toast/__workshop__/index.ts +0 -21
- package/src/core/components/toast/__workshop__/toast.tsx +0 -26
- package/src/core/components/toast/toast.test.tsx +0 -103
- package/src/core/components/toast/toast.tsx +0 -191
- package/src/core/components/toast/toastContext.ts +0 -7
- package/src/core/components/toast/toastLayer.tsx +0 -54
- package/src/core/components/toast/toastProvider.tsx +0 -112
- package/src/core/components/toast/toastState.ts +0 -6
- package/src/core/components/toast/types.ts +0 -24
- package/src/core/components/toast/useToast.ts +0 -23
- 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 -23
- package/src/core/components/tree/__workshop__/tabFromElement.tsx +0 -84
- package/src/core/components/tree/helpers.ts +0 -105
- package/src/core/components/tree/tree.tsx +0 -248
- package/src/core/components/tree/treeContext.ts +0 -10
- package/src/core/components/tree/treeGroup.tsx +0 -46
- package/src/core/components/tree/treeItem.tsx +0 -237
- package/src/core/components/tree/types.ts +0 -24
- package/src/core/components/tree/useTree.ts +0 -17
- package/src/core/components/virtualList/__workshop__/changingProps.tsx +0 -36
- package/src/core/components/virtualList/__workshop__/elementScroll.tsx +0 -24
- package/src/core/components/virtualList/__workshop__/index.ts +0 -31
- package/src/core/components/virtualList/__workshop__/infiniteList.tsx +0 -48
- package/src/core/components/virtualList/__workshop__/windowScrolll.tsx +0 -22
- package/src/core/components/virtualList/virtualList.tsx +0 -209
- package/src/core/constants.ts +0 -67
- package/src/core/helpers/animation.ts +0 -27
- package/src/core/helpers/element.ts +0 -55
- package/src/core/helpers/focus.ts +0 -92
- package/src/core/helpers/props.ts +0 -28
- package/src/core/helpers/scroll.ts +0 -15
- package/src/core/hooks/useClickOutsideEvent.test.tsx +0 -114
- package/src/core/hooks/useClickOutsideEvent.ts +0 -67
- package/src/core/hooks/useCustomValidity.ts +0 -13
- package/src/core/hooks/useDelayed.test.ts +0 -67
- package/src/core/hooks/useDelayedState.ts +0 -28
- package/src/core/hooks/useElementSize.ts +0 -19
- package/src/core/hooks/useGlobalKeyDown.ts +0 -17
- package/src/core/hooks/useMatchMedia.ts +0 -28
- package/src/core/hooks/useMediaIndex/__workshop__/index.ts +0 -16
- package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +0 -14
- package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +0 -21
- package/src/core/hooks/useMediaIndex/useMediaIndex.ts +0 -107
- package/src/core/hooks/useMounted.ts +0 -15
- package/src/core/hooks/usePrefersDark.hydration.test.tsx +0 -56
- package/src/core/hooks/usePrefersDark.test.tsx +0 -20
- package/src/core/hooks/usePrefersDark.ts +0 -16
- package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +0 -56
- package/src/core/hooks/usePrefersReducedMotion.test.tsx +0 -20
- package/src/core/hooks/usePrefersReducedMotion.ts +0 -16
- package/src/core/hooks/useResponsiveProp.ts +0 -28
- package/src/core/index.ts +0 -115
- package/src/core/lib/createGlobalScopedContext.ts +0 -37
- package/src/core/lib/globalScope.ts +0 -19
- package/src/core/lib/isArray.ts +0 -3
- package/src/core/lib/isRecord.ts +0 -3
- package/src/core/middleware/origin.ts +0 -47
- package/src/core/observers/elementSize.ts +0 -116
- package/src/core/observers/resize.ts +0 -9
- package/src/core/primitives/arrow/arrow.tsx +0 -74
- package/src/core/primitives/arrow/cmds.ts +0 -91
- package/src/core/primitives/avatar/__workshop__/asButton.tsx +0 -14
- package/src/core/primitives/avatar/__workshop__/index.ts +0 -31
- package/src/core/primitives/avatar/__workshop__/stack.tsx +0 -25
- package/src/core/primitives/avatar/__workshop__/withinButton.tsx +0 -55
- package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +0 -72
- package/src/core/primitives/avatar/avatar.tsx +0 -147
- package/src/core/primitives/avatar/avatarCounter.tsx +0 -69
- package/src/core/primitives/avatar/avatarStack.tsx +0 -79
- package/src/core/primitives/avatar/types.ts +0 -2
- package/src/core/primitives/badge/__workshop__/index.ts +0 -21
- package/src/core/primitives/badge/__workshop__/props.tsx +0 -19
- package/src/core/primitives/badge/__workshop__/tones.tsx +0 -16
- package/src/core/primitives/badge/badge.test.tsx +0 -16
- package/src/core/primitives/badge/badge.tsx +0 -61
- package/src/core/primitives/box/__workshop__/index.ts +0 -21
- package/src/core/primitives/box/__workshop__/props.tsx +0 -20
- package/src/core/primitives/box/__workshop__/responsive.tsx +0 -20
- package/src/core/primitives/box/box.tsx +0 -222
- package/src/core/primitives/button/__workshop__/custom.tsx +0 -27
- package/src/core/primitives/button/__workshop__/customIcons.tsx +0 -30
- package/src/core/primitives/button/__workshop__/disabled.tsx +0 -54
- package/src/core/primitives/button/__workshop__/index.ts +0 -66
- 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__/textOverflow.tsx +0 -13
- package/src/core/primitives/button/__workshop__/uploadButton.tsx +0 -29
- package/src/core/primitives/button/button.test.tsx +0 -30
- package/src/core/primitives/button/button.tsx +0 -193
- package/src/core/primitives/button/types.ts +0 -2
- 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 -20
- package/src/core/primitives/card/__workshop__/interactive.tsx +0 -29
- package/src/core/primitives/card/__workshop__/listNavigation.tsx +0 -78
- package/src/core/primitives/card/__workshop__/props.tsx +0 -52
- package/src/core/primitives/card/__workshop__/selected.tsx +0 -62
- package/src/core/primitives/card/__workshop__/styled.tsx +0 -14
- package/src/core/primitives/card/__workshop__/tones.tsx +0 -27
- package/src/core/primitives/card/card.tsx +0 -109
- package/src/core/primitives/card/cardContext.ts +0 -10
- package/src/core/primitives/card/cardProvider.tsx +0 -27
- package/src/core/primitives/card/types.ts +0 -17
- package/src/core/primitives/card/useCard.ts +0 -15
- package/src/core/primitives/checkbox/__workshop__/example.tsx +0 -25
- package/src/core/primitives/checkbox/__workshop__/index.ts +0 -15
- package/src/core/primitives/checkbox/__workshop__/props.tsx +0 -35
- package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +0 -16
- package/src/core/primitives/checkbox/__workshop__/tones.tsx +0 -27
- package/src/core/primitives/checkbox/checkbox.tsx +0 -80
- package/src/core/primitives/code/__workshop__/index.ts +0 -21
- package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +0 -23
- package/src/core/primitives/code/__workshop__/props.tsx +0 -18
- package/src/core/primitives/code/code.tsx +0 -48
- package/src/core/primitives/code/refractor.tsx +0 -18
- package/src/core/primitives/container/__workshop__/example.tsx +0 -20
- package/src/core/primitives/container/__workshop__/index.ts +0 -10
- package/src/core/primitives/container/container.tsx +0 -37
- package/src/core/primitives/container/types.ts +0 -6
- 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 -13
- package/src/core/primitives/flex/flex.tsx +0 -58
- package/src/core/primitives/grid/__workshop__/index.ts +0 -12
- package/src/core/primitives/grid/__workshop__/responsive.tsx +0 -54
- package/src/core/primitives/grid/grid.tsx +0 -35
- package/src/core/primitives/heading/__workshop__/index.ts +0 -21
- package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +0 -54
- package/src/core/primitives/heading/__workshop__/plain.tsx +0 -29
- package/src/core/primitives/heading/heading.tsx +0 -78
- package/src/core/primitives/inline/__workshop__/index.ts +0 -10
- package/src/core/primitives/inline/__workshop__/plain.tsx +0 -24
- package/src/core/primitives/inline/inline.tsx +0 -62
- package/src/core/primitives/kbd/__workshop__/index.ts +0 -10
- package/src/core/primitives/kbd/__workshop__/plain.tsx +0 -9
- package/src/core/primitives/kbd/kbd.tsx +0 -57
- package/src/core/primitives/label/__workshop__/index.ts +0 -21
- package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +0 -54
- package/src/core/primitives/label/__workshop__/plain.tsx +0 -28
- package/src/core/primitives/label/label.tsx +0 -75
- package/src/core/primitives/layer/__workshop__/_debug.tsx +0 -17
- package/src/core/primitives/layer/__workshop__/index.ts +0 -26
- package/src/core/primitives/layer/__workshop__/multipleRoots.tsx +0 -49
- package/src/core/primitives/layer/__workshop__/nested.tsx +0 -98
- package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx +0 -17
- package/src/core/primitives/layer/getLayerContext.test.ts +0 -32
- package/src/core/primitives/layer/getLayerContext.ts +0 -21
- package/src/core/primitives/layer/layer.test.tsx +0 -110
- package/src/core/primitives/layer/layer.tsx +0 -42
- package/src/core/primitives/layer/layerCard.tsx +0 -90
- package/src/core/primitives/layer/layerContext.ts +0 -7
- package/src/core/primitives/layer/layerProvider.tsx +0 -106
- package/src/core/primitives/layer/types.ts +0 -9
- package/src/core/primitives/layer/useLayer.ts +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 -69
- package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +0 -96
- package/src/core/primitives/popover/__workshop__/TestStory.tsx +0 -100
- package/src/core/primitives/popover/__workshop__/index.ts +0 -51
- package/src/core/primitives/popover/constants.ts +0 -22
- package/src/core/primitives/popover/floating-ui/size.ts +0 -83
- package/src/core/primitives/popover/helpers.ts +0 -32
- package/src/core/primitives/popover/popover.tsx +0 -443
- package/src/core/primitives/popover/popoverLayer.tsx +0 -149
- package/src/core/primitives/popover/types.ts +0 -12
- package/src/core/primitives/radio/__workshop__/example.tsx +0 -63
- package/src/core/primitives/radio/__workshop__/index.ts +0 -13
- package/src/core/primitives/radio/__workshop__/plain.tsx +0 -28
- package/src/core/primitives/radio/radio.tsx +0 -64
- package/src/core/primitives/select/__workshop__/index.ts +0 -13
- package/src/core/primitives/select/__workshop__/plain.tsx +0 -39
- package/src/core/primitives/select/__workshop__/readOnly.tsx +0 -23
- package/src/core/primitives/select/select.tsx +0 -75
- package/src/core/primitives/selectable/selectable.tsx +0 -50
- package/src/core/primitives/skeleton/__workshop__/delay.tsx +0 -70
- package/src/core/primitives/skeleton/__workshop__/index.ts +0 -13
- package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +0 -64
- package/src/core/primitives/skeleton/codeSkeleton.tsx +0 -49
- package/src/core/primitives/skeleton/headingSkeleton.tsx +0 -48
- package/src/core/primitives/skeleton/labelSkeleton.tsx +0 -47
- package/src/core/primitives/skeleton/skeleton.tsx +0 -70
- package/src/core/primitives/skeleton/textSkeleton.tsx +0 -49
- package/src/core/primitives/spinner/__workshop__/Props.tsx +0 -15
- package/src/core/primitives/spinner/__workshop__/index.ts +0 -16
- package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +0 -14
- package/src/core/primitives/spinner/spinner.tsx +0 -45
- package/src/core/primitives/srOnly/srOnly.tsx +0 -33
- package/src/core/primitives/stack/__workshop__/index.ts +0 -16
- package/src/core/primitives/stack/__workshop__/plain.tsx +0 -32
- package/src/core/primitives/stack/stack.tsx +0 -60
- package/src/core/primitives/switch/__workshop__/example.tsx +0 -23
- package/src/core/primitives/switch/__workshop__/index.ts +0 -13
- package/src/core/primitives/switch/__workshop__/props.tsx +0 -21
- package/src/core/primitives/switch/switch.tsx +0 -84
- package/src/core/primitives/text/__workshop__/colored.tsx +0 -23
- package/src/core/primitives/text/__workshop__/example.tsx +0 -28
- package/src/core/primitives/text/__workshop__/index.ts +0 -26
- package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +0 -23
- package/src/core/primitives/text/text.tsx +0 -76
- package/src/core/primitives/textArea/__workshop__/index.ts +0 -16
- package/src/core/primitives/textArea/__workshop__/plain.tsx +0 -61
- package/src/core/primitives/textArea/textArea.tsx +0 -84
- 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 -46
- package/src/core/primitives/textInput/__workshop__/plain.tsx +0 -110
- 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/textInput/textInput.tsx +0 -258
- package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +0 -102
- package/src/core/primitives/tooltip/__workshop__/index.ts +0 -31
- package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -74
- package/src/core/primitives/tooltip/__workshop__/props.tsx +0 -112
- package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -86
- package/src/core/primitives/tooltip/constants.ts +0 -23
- package/src/core/primitives/tooltip/tooltip.test.tsx +0 -452
- package/src/core/primitives/tooltip/tooltip.tsx +0 -482
- package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
- package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +0 -13
- package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +0 -55
- package/src/core/primitives/tooltip/tooltipDelayGroup/types.ts +0 -10
- package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +0 -13
- package/src/core/primitives/tooltip/tooltipLayer.tsx +0 -106
- package/src/core/types.ts +0 -56
- package/src/core/utils/boundaryElement/__workshop__/index.ts +0 -16
- package/src/core/utils/boundaryElement/__workshop__/plain.tsx +0 -19
- package/src/core/utils/boundaryElement/boundaryElement.test.tsx +0 -102
- package/src/core/utils/boundaryElement/boundaryElementContext.ts +0 -10
- package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +0 -18
- package/src/core/utils/boundaryElement/types.ts +0 -5
- package/src/core/utils/boundaryElement/useBoundaryElement.ts +0 -24
- package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +0 -41
- package/src/core/utils/elementQuery/__workshop__/index.ts +0 -16
- package/src/core/utils/elementQuery/elementQuery.tsx +0 -75
- package/src/core/utils/elementQuery/helpers.ts +0 -27
- package/src/core/utils/errorBoundary.tsx +0 -50
- package/src/core/utils/getElementRef.ts +0 -29
- package/src/core/utils/portal/__workshop__/index.ts +0 -16
- package/src/core/utils/portal/__workshop__/named.tsx +0 -63
- package/src/core/utils/portal/portal.test.tsx +0 -105
- package/src/core/utils/portal/portal.tsx +0 -36
- package/src/core/utils/portal/portalContext.ts +0 -37
- package/src/core/utils/portal/portalProvider.tsx +0 -70
- package/src/core/utils/portal/types.ts +0 -7
- package/src/core/utils/portal/usePortal.ts +0 -23
- package/src/css/_assign.ts +0 -3
- package/src/css/_composeClassNames.ts +0 -12
- package/src/css/_fromEntries.ts +0 -3
- package/src/css/_getClassNames.ts +0 -9
- package/src/css/_responsiveClassName.ts +0 -45
- package/src/css/_responsiveStyle.css.ts +0 -34
- package/src/css/_style.css.ts +0 -9
- package/src/css/components/breadcrumbs/breadcrumbs.css.ts +0 -6
- package/src/css/components/breadcrumbs/breadcrumbs.ts +0 -7
- package/src/css/components/dialog/dialog.css.ts +0 -98
- package/src/css/components/dialog/dialog.ts +0 -58
- package/src/css/components/menu/menu.css.ts +0 -14
- package/src/css/components/menu/menu.ts +0 -12
- package/src/css/components/skeleton/skeleton.css.ts +0 -128
- package/src/css/components/skeleton/skeleton.ts +0 -38
- package/src/css/components/skeleton/types.ts +0 -36
- package/src/css/components/toast/toast.css.ts +0 -17
- package/src/css/components/toast/toast.ts +0 -11
- package/src/css/components/tree/tree.css.ts +0 -65
- package/src/css/components/tree/tree.ts +0 -7
- package/src/css/constants.ts +0 -10
- package/src/css/getVarName.ts +0 -27
- package/src/css/index.ts +0 -146
- package/src/css/layers.css.ts +0 -12
- package/src/css/primitives/_arrow/_arrow.css.ts +0 -68
- package/src/css/primitives/_arrow/_arrow.ts +0 -26
- package/src/css/primitives/_input/_input.css.ts +0 -261
- package/src/css/primitives/_input/input.ts +0 -29
- package/src/css/primitives/_input/types.ts +0 -13
- package/src/css/primitives/avatar/avatar.css.ts +0 -201
- package/src/css/primitives/avatar/avatar.ts +0 -68
- package/src/css/primitives/avatar/types.ts +0 -10
- package/src/css/primitives/badge/badge.css.ts +0 -27
- package/src/css/primitives/badge/badge.ts +0 -8
- package/src/css/primitives/badge/types.ts +0 -13
- package/src/css/primitives/box/box.css.ts +0 -19
- package/src/css/primitives/box/box.ts +0 -82
- package/src/css/primitives/box/types.ts +0 -75
- package/src/css/primitives/button/button.css.ts +0 -287
- package/src/css/primitives/button/button.ts +0 -26
- package/src/css/primitives/button/types.ts +0 -12
- package/src/css/primitives/card/__workshop__/color.tsx +0 -75
- package/src/css/primitives/card/__workshop__/index.ts +0 -16
- package/src/css/primitives/card/card.css.ts +0 -387
- package/src/css/primitives/card/card.ts +0 -13
- package/src/css/primitives/card/types.ts +0 -9
- package/src/css/primitives/checkbox/checkbox.css.ts +0 -193
- package/src/css/primitives/checkbox/checkbox.ts +0 -17
- package/src/css/primitives/code/code.css.ts +0 -272
- package/src/css/primitives/code/code.ts +0 -19
- package/src/css/primitives/code/types.ts +0 -11
- package/src/css/primitives/container/container.css.ts +0 -4
- package/src/css/primitives/container/container.ts +0 -17
- package/src/css/primitives/container/types.ts +0 -9
- package/src/css/primitives/heading/heading.css.ts +0 -86
- package/src/css/primitives/heading/heading.ts +0 -22
- package/src/css/primitives/heading/types.ts +0 -14
- package/src/css/primitives/kbd/kbd.css.ts +0 -16
- package/src/css/primitives/kbd/kbd.ts +0 -9
- package/src/css/primitives/kbd/types.ts +0 -6
- package/src/css/primitives/label/label.css.ts +0 -87
- package/src/css/primitives/label/label.ts +0 -22
- package/src/css/primitives/label/types.ts +0 -14
- package/src/css/primitives/popover/popover.css.ts +0 -6
- package/src/css/primitives/popover/popover.ts +0 -12
- package/src/css/primitives/radio/radio.css.ts +0 -78
- package/src/css/primitives/radio/radio.ts +0 -17
- package/src/css/primitives/root/root.css.ts +0 -19
- package/src/css/primitives/root/root.ts +0 -17
- package/src/css/primitives/root/types.ts +0 -10
- package/src/css/primitives/select/select.css.ts +0 -24
- package/src/css/primitives/select/select.ts +0 -14
- package/src/css/primitives/select/types.ts +0 -5
- package/src/css/primitives/selectable/selectable.css.ts +0 -131
- package/src/css/primitives/selectable/selectable.ts +0 -9
- package/src/css/primitives/selectable/types.ts +0 -9
- package/src/css/primitives/spinner/spinner.css.ts +0 -19
- package/src/css/primitives/spinner/spinner.ts +0 -13
- package/src/css/primitives/spinner/types.ts +0 -4
- package/src/css/primitives/srOnly/srOnly.css.ts +0 -10
- package/src/css/primitives/srOnly/srOnly.ts +0 -7
- package/src/css/primitives/stack/stack.css.ts +0 -6
- package/src/css/primitives/stack/stack.ts +0 -7
- package/src/css/primitives/switch/switch.css.ts +0 -98
- package/src/css/primitives/switch/switch.ts +0 -27
- package/src/css/primitives/text/text.css.ts +0 -86
- package/src/css/primitives/text/text.ts +0 -24
- package/src/css/primitives/text/types.ts +0 -18
- package/src/css/primitives/textArea/textArea.css.ts +0 -4
- package/src/css/primitives/textArea/textArea.ts +0 -9
- package/src/css/primitives/textArea/types.ts +0 -7
- package/src/css/primitives/textInput/textInput.css.ts +0 -43
- package/src/css/primitives/textInput/textInput.ts +0 -24
- package/src/css/primitives/textInput/types.ts +0 -7
- package/src/css/primitives/tooltip/tooltip.css.ts +0 -4
- package/src/css/primitives/tooltip/tooltip.ts +0 -8
- package/src/css/primitives/tooltip/types.ts +0 -4
- package/src/css/props/alignItems/alignItems.css.ts +0 -22
- package/src/css/props/alignItems/alignItems.ts +0 -8
- package/src/css/props/alignItems/types.ts +0 -9
- package/src/css/props/border/border.css.ts +0 -65
- package/src/css/props/border/border.ts +0 -21
- package/src/css/props/border/types.ts +0 -13
- package/src/css/props/boxSizing/boxSizing.css.ts +0 -12
- package/src/css/props/boxSizing/boxSizing.ts +0 -7
- package/src/css/props/boxSizing/types.ts +0 -7
- package/src/css/props/display/display.css.ts +0 -56
- package/src/css/props/display/display.ts +0 -8
- package/src/css/props/display/types.ts +0 -16
- package/src/css/props/flex/flex.css.ts +0 -52
- package/src/css/props/flex/flex.ts +0 -8
- package/src/css/props/flex/types.ts +0 -9
- package/src/css/props/flexDirection/flexDirection.css.ts +0 -19
- package/src/css/props/flexDirection/flexDirection.ts +0 -8
- package/src/css/props/flexDirection/types.ts +0 -9
- package/src/css/props/flexWrap/flexWrap.css.ts +0 -16
- package/src/css/props/flexWrap/flexWrap.ts +0 -8
- package/src/css/props/flexWrap/types.ts +0 -9
- package/src/css/props/font/font.css.ts +0 -94
- package/src/css/props/font/font.ts +0 -8
- package/src/css/props/font/types.ts +0 -6
- package/src/css/props/gap/gap.css.ts +0 -40
- package/src/css/props/gap/gap.ts +0 -13
- package/src/css/props/gap/types.ts +0 -10
- package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +0 -19
- package/src/css/props/gridAutoColumns/gridAutoColumns.ts +0 -8
- package/src/css/props/gridAutoColumns/types.ts +0 -9
- package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts +0 -19
- package/src/css/props/gridAutoFlow/gridAutoFlow.ts +0 -8
- package/src/css/props/gridAutoFlow/types.ts +0 -9
- package/src/css/props/gridAutoRows/gridAutoRows.css.ts +0 -19
- package/src/css/props/gridAutoRows/gridAutoRows.ts +0 -8
- package/src/css/props/gridAutoRows/types.ts +0 -9
- package/src/css/props/gridColumn/gridColumn.css.ts +0 -49
- package/src/css/props/gridColumn/gridColumn.ts +0 -8
- package/src/css/props/gridColumn/types.ts +0 -9
- package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts +0 -46
- package/src/css/props/gridColumnEnd/gridColumnEnd.ts +0 -8
- package/src/css/props/gridColumnEnd/types.ts +0 -9
- package/src/css/props/gridColumnStart/gridColumnStart.css.ts +0 -46
- package/src/css/props/gridColumnStart/gridColumnStart.ts +0 -8
- package/src/css/props/gridColumnStart/types.ts +0 -9
- package/src/css/props/gridRow/gridRow.css.ts +0 -49
- package/src/css/props/gridRow/gridRow.ts +0 -8
- package/src/css/props/gridRow/types.ts +0 -9
- package/src/css/props/gridRowEnd/gridRowEnd.css.ts +0 -46
- package/src/css/props/gridRowEnd/gridRowEnd.ts +0 -8
- package/src/css/props/gridRowEnd/types.ts +0 -9
- package/src/css/props/gridRowStart/gridRowStart.css.ts +0 -46
- package/src/css/props/gridRowStart/gridRowStart.ts +0 -8
- package/src/css/props/gridRowStart/types.ts +0 -9
- package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts +0 -43
- package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +0 -8
- package/src/css/props/gridTemplateColumns/types.ts +0 -9
- package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts +0 -43
- package/src/css/props/gridTemplateRows/gridTemplateRows.ts +0 -8
- package/src/css/props/gridTemplateRows/types.ts +0 -9
- package/src/css/props/height/height.css.ts +0 -25
- package/src/css/props/height/height.ts +0 -8
- package/src/css/props/height/types.ts +0 -9
- package/src/css/props/inset/inset.css.ts +0 -37
- package/src/css/props/inset/inset.ts +0 -21
- package/src/css/props/inset/types.ts +0 -13
- package/src/css/props/justifyContent/justifyContent.css.ts +0 -25
- package/src/css/props/justifyContent/justifyContent.ts +0 -8
- package/src/css/props/justifyContent/types.ts +0 -15
- package/src/css/props/margin/margin.css.ts +0 -117
- package/src/css/props/margin/margin.ts +0 -25
- package/src/css/props/margin/types.ts +0 -17
- package/src/css/props/maxWidth/maxWidth.css.ts +0 -32
- package/src/css/props/maxWidth/maxWidth.ts +0 -8
- package/src/css/props/maxWidth/types.ts +0 -11
- package/src/css/props/minHeight/minHeight.css.ts +0 -13
- package/src/css/props/minHeight/minHeight.ts +0 -8
- package/src/css/props/minHeight/types.ts +0 -9
- package/src/css/props/minWidth/minWidth.css.ts +0 -25
- package/src/css/props/minWidth/minWidth.ts +0 -8
- package/src/css/props/minWidth/types.ts +0 -9
- package/src/css/props/outline/outline.css.ts +0 -10
- package/src/css/props/outline/outline.ts +0 -8
- package/src/css/props/outline/types.ts +0 -7
- package/src/css/props/overflow/overflow.css.ts +0 -16
- package/src/css/props/overflow/overflow.ts +0 -8
- package/src/css/props/overflow/types.ts +0 -11
- package/src/css/props/padding/padding.css.ts +0 -87
- package/src/css/props/padding/padding.ts +0 -25
- package/src/css/props/padding/types.ts +0 -17
- package/src/css/props/pointerEvents/pointerEvents.css.ts +0 -13
- package/src/css/props/pointerEvents/pointerEvents.ts +0 -8
- package/src/css/props/pointerEvents/types.ts +0 -7
- package/src/css/props/position/position.css.ts +0 -22
- package/src/css/props/position/position.ts +0 -8
- package/src/css/props/position/types.ts +0 -9
- package/src/css/props/radius/radius.css.ts +0 -21
- package/src/css/props/radius/radius.ts +0 -8
- package/src/css/props/radius/types.ts +0 -8
- package/src/css/props/shadow/shadow.css.ts +0 -23
- package/src/css/props/shadow/shadow.ts +0 -8
- package/src/css/props/shadow/types.ts +0 -8
- package/src/css/props/textAlign/textAlign.css.ts +0 -22
- package/src/css/props/textAlign/textAlign.ts +0 -8
- package/src/css/props/textAlign/types.ts +0 -7
- package/src/css/props/textOverflow/textOverflow.css.ts +0 -19
- package/src/css/props/textOverflow/textOverflow.ts +0 -8
- package/src/css/props/textOverflow/types.ts +0 -12
- package/src/css/props/width/types.ts +0 -11
- package/src/css/props/width/width.css.ts +0 -31
- package/src/css/props/width/width.ts +0 -8
- package/src/css/theme/buildCSSTheme.ts +0 -488
- package/src/css/theme/defaultTheme.css.ts +0 -64
- package/src/css/types.ts +0 -427
- package/src/css/vars.css.ts +0 -676
- package/src/theme/_parseColorToken.ts +0 -180
- package/src/theme/buildTheme.ts +0 -32
- package/src/theme/constants.ts +0 -90
- package/src/theme/defaults/color.ts +0 -197
- package/src/theme/defaults/common.ts +0 -71
- package/src/theme/defaults/fonts.ts +0 -250
- package/src/theme/index.ts +0 -5
- package/src/theme/merge.ts +0 -24
- package/src/theme/resolveTokens.ts +0 -204
- package/src/theme/types.ts +0 -366
package/src/core/Root.tsx
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import {box, root, type RootStyleProps} from '@sanity/ui/css'
|
|
2
|
-
import {useCallback, useImperativeHandle, useRef, useState} from 'react'
|
|
3
|
-
|
|
4
|
-
import {Box, type BoxOwnProps} from './primitives/box/box'
|
|
5
|
-
import {RootProvider} from './RootProvider'
|
|
6
|
-
import type {Props} from './types'
|
|
7
|
-
|
|
8
|
-
/** @public */
|
|
9
|
-
export const DEFAULT_ROOT_ELEMENT = 'html'
|
|
10
|
-
|
|
11
|
-
/** @public */
|
|
12
|
-
export interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
|
|
13
|
-
|
|
14
|
-
/** @public */
|
|
15
|
-
export type RootElementType = 'html' | 'body' | 'div'
|
|
16
|
-
|
|
17
|
-
/** @public */
|
|
18
|
-
export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* The `Root` component.
|
|
22
|
-
*
|
|
23
|
-
* @public
|
|
24
|
-
*/
|
|
25
|
-
export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
|
|
26
|
-
props: RootProps<E>,
|
|
27
|
-
): React.JSX.Element {
|
|
28
|
-
const {
|
|
29
|
-
as: as = DEFAULT_ROOT_ELEMENT,
|
|
30
|
-
children,
|
|
31
|
-
className,
|
|
32
|
-
height,
|
|
33
|
-
overflow = 'hidden',
|
|
34
|
-
ref: forwardedRef,
|
|
35
|
-
scheme = 'light',
|
|
36
|
-
tone = 'default',
|
|
37
|
-
...rest
|
|
38
|
-
} = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
|
|
39
|
-
|
|
40
|
-
const ref = useRef<HTMLHtmlElement | null>(null)
|
|
41
|
-
|
|
42
|
-
useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
|
|
43
|
-
forwardedRef,
|
|
44
|
-
() => ref.current,
|
|
45
|
-
)
|
|
46
|
-
|
|
47
|
-
const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
|
|
48
|
-
const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
|
|
49
|
-
|
|
50
|
-
const handleRef = useCallback((el: HTMLHtmlElement | null) => {
|
|
51
|
-
setBoundaryElement(el)
|
|
52
|
-
ref.current = el
|
|
53
|
-
}, [])
|
|
54
|
-
|
|
55
|
-
let node = (
|
|
56
|
-
<RootProvider
|
|
57
|
-
boundaryElement={boundaryElement}
|
|
58
|
-
portalElement={portalElement}
|
|
59
|
-
scheme={scheme}
|
|
60
|
-
tone={tone}
|
|
61
|
-
>
|
|
62
|
-
{children}
|
|
63
|
-
<div data-portal="" ref={setPortalElement} />
|
|
64
|
-
</RootProvider>
|
|
65
|
-
)
|
|
66
|
-
|
|
67
|
-
if (as === 'html') {
|
|
68
|
-
node = <body className={box({height, margin: 0})}>{node}</body>
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<Box
|
|
73
|
-
as={as}
|
|
74
|
-
data-ui="Root"
|
|
75
|
-
{...rest}
|
|
76
|
-
className={root({
|
|
77
|
-
className,
|
|
78
|
-
height,
|
|
79
|
-
scheme,
|
|
80
|
-
tone,
|
|
81
|
-
})}
|
|
82
|
-
overflow={overflow}
|
|
83
|
-
ref={handleRef}
|
|
84
|
-
>
|
|
85
|
-
{node}
|
|
86
|
-
</Box>
|
|
87
|
-
)
|
|
88
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import type {CardTone, ColorScheme} from '@sanity/ui/theme'
|
|
2
|
-
import type {ReactNode} from 'react'
|
|
3
|
-
|
|
4
|
-
import {ToastProvider} from './components/toast/toastProvider'
|
|
5
|
-
import {CardProvider} from './primitives/card/cardProvider'
|
|
6
|
-
import {LayerProvider} from './primitives/layer/layerProvider'
|
|
7
|
-
import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
|
|
8
|
-
import {PortalProvider} from './utils/portal/portalProvider'
|
|
9
|
-
|
|
10
|
-
/** @public */
|
|
11
|
-
export interface RootProviderProps {
|
|
12
|
-
boundaryElement?: HTMLElement | null
|
|
13
|
-
children?: ReactNode
|
|
14
|
-
portalElement?: HTMLElement | null
|
|
15
|
-
scheme?: ColorScheme
|
|
16
|
-
tone?: CardTone
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/** @public */
|
|
20
|
-
export function RootProvider(props: RootProviderProps): React.JSX.Element {
|
|
21
|
-
const {
|
|
22
|
-
boundaryElement = null,
|
|
23
|
-
children,
|
|
24
|
-
portalElement = null,
|
|
25
|
-
scheme = 'light',
|
|
26
|
-
tone = 'transparent',
|
|
27
|
-
} = props
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<LayerProvider>
|
|
31
|
-
<CardProvider scheme={scheme} tone={tone}>
|
|
32
|
-
<ToastProvider>
|
|
33
|
-
<BoundaryElementProvider element={boundaryElement}>
|
|
34
|
-
<PortalProvider element={portalElement}>{children}</PortalProvider>
|
|
35
|
-
</BoundaryElementProvider>
|
|
36
|
-
</ToastProvider>
|
|
37
|
-
</CardProvider>
|
|
38
|
-
</LayerProvider>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
|
|
2
|
-
|
|
3
|
-
export default function BoundaryStory(): React.JSX.Element {
|
|
4
|
-
const {scheme} = useCard()
|
|
5
|
-
|
|
6
|
-
return (
|
|
7
|
-
<Box padding={5}>
|
|
8
|
-
<Root as="div" padding={5} radius={4} scheme={scheme}>
|
|
9
|
-
<Layout />
|
|
10
|
-
</Root>
|
|
11
|
-
</Box>
|
|
12
|
-
)
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function Layout() {
|
|
16
|
-
const toast = useToast()
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<Stack gap={4}>
|
|
20
|
-
<Text size={1}>
|
|
21
|
-
Testing the root component. Toast messages will be rendered here, and should be contained
|
|
22
|
-
within the root element.
|
|
23
|
-
</Text>
|
|
24
|
-
|
|
25
|
-
<Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
|
|
26
|
-
</Stack>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type {WorkshopScope} from '@sanity/ui-workshop'
|
|
2
|
-
import {lazy} from 'react'
|
|
3
|
-
|
|
4
|
-
const scope: WorkshopScope = {
|
|
5
|
-
name: 'root',
|
|
6
|
-
title: 'Root',
|
|
7
|
-
stories: [
|
|
8
|
-
{
|
|
9
|
-
name: 'boundary',
|
|
10
|
-
title: 'Boundary',
|
|
11
|
-
component: lazy(() => import('./boundary')),
|
|
12
|
-
},
|
|
13
|
-
],
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export default scope
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
|
|
2
|
-
import {
|
|
3
|
-
Autocomplete,
|
|
4
|
-
type BaseAutocompleteOption,
|
|
5
|
-
Box,
|
|
6
|
-
Card,
|
|
7
|
-
Code,
|
|
8
|
-
Flex,
|
|
9
|
-
LayerProvider,
|
|
10
|
-
Stack,
|
|
11
|
-
Text,
|
|
12
|
-
} from '@sanity/ui'
|
|
13
|
-
import {useCallback, useEffect, useRef, useState} from 'react'
|
|
14
|
-
|
|
15
|
-
import {countriesStore} from './mock/apiStore'
|
|
16
|
-
|
|
17
|
-
export default function AsyncStory(): React.JSX.Element {
|
|
18
|
-
const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
|
|
19
|
-
const [loading, setLoading] = useState(false)
|
|
20
|
-
const searchRef = useRef<{cancel: () => void} | null>(null)
|
|
21
|
-
const fetchRef = useRef<{cancel: () => void} | null>(null)
|
|
22
|
-
const [query, setQuery] = useState<string | null>(null)
|
|
23
|
-
const [value, setValue] = useState('')
|
|
24
|
-
const [optionTitle, setOptionTitle] = useState<string | null>(null)
|
|
25
|
-
const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
|
|
26
|
-
|
|
27
|
-
const doSearch = useCallback((query: string | null) => {
|
|
28
|
-
if (searchRef.current) searchRef.current.cancel()
|
|
29
|
-
searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
|
|
30
|
-
}, [])
|
|
31
|
-
|
|
32
|
-
const filterOption = useCallback(() => true, [])
|
|
33
|
-
|
|
34
|
-
const handleQueryChange = useCallback(
|
|
35
|
-
(query: string | null) => {
|
|
36
|
-
setQuery(query)
|
|
37
|
-
|
|
38
|
-
if (query !== null) {
|
|
39
|
-
doSearch(query)
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
[doSearch],
|
|
43
|
-
)
|
|
44
|
-
|
|
45
|
-
const handleOpenButtonClick = useCallback(() => {
|
|
46
|
-
if (!value) {
|
|
47
|
-
doSearch('')
|
|
48
|
-
}
|
|
49
|
-
}, [doSearch, value])
|
|
50
|
-
|
|
51
|
-
const renderValue = useCallback(() => {
|
|
52
|
-
if (loadingCurrentRef) {
|
|
53
|
-
return 'Loading…'
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return optionTitle || ''
|
|
57
|
-
}, [loadingCurrentRef, optionTitle])
|
|
58
|
-
|
|
59
|
-
const renderOption = useCallback((option: BaseAutocompleteOption) => {
|
|
60
|
-
return <AsyncOption documentId={option.value} />
|
|
61
|
-
}, [])
|
|
62
|
-
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
if (fetchRef.current) fetchRef.current.cancel()
|
|
65
|
-
|
|
66
|
-
if (value) {
|
|
67
|
-
fetchRef.current = countriesStore.fetchDocument(
|
|
68
|
-
value,
|
|
69
|
-
(data) => setOptionTitle(data?.title || null),
|
|
70
|
-
setLoadingCurrentRef,
|
|
71
|
-
)
|
|
72
|
-
} else {
|
|
73
|
-
setOptionTitle(null)
|
|
74
|
-
setLoadingCurrentRef(false)
|
|
75
|
-
}
|
|
76
|
-
}, [value])
|
|
77
|
-
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
if (optionTitle) doSearch(optionTitle)
|
|
80
|
-
}, [doSearch, optionTitle])
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
|
|
84
|
-
<Stack gap={[3, 3, 4]}>
|
|
85
|
-
<Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
|
|
86
|
-
Country
|
|
87
|
-
</Text>
|
|
88
|
-
<LayerProvider zOffset={100}>
|
|
89
|
-
<Autocomplete
|
|
90
|
-
disabled={loadingCurrentRef}
|
|
91
|
-
filterOption={filterOption}
|
|
92
|
-
icon={value ? EarthAmericasIcon : SearchIcon}
|
|
93
|
-
id="async"
|
|
94
|
-
loading={loading}
|
|
95
|
-
onChange={setValue}
|
|
96
|
-
onQueryChange={handleQueryChange}
|
|
97
|
-
openButton={{onClick: handleOpenButtonClick}}
|
|
98
|
-
options={options}
|
|
99
|
-
placeholder="Search"
|
|
100
|
-
renderOption={renderOption}
|
|
101
|
-
renderValue={renderValue}
|
|
102
|
-
value={value}
|
|
103
|
-
/>
|
|
104
|
-
</LayerProvider>
|
|
105
|
-
|
|
106
|
-
<Box muted overflow="auto" padding={3} radius={2}>
|
|
107
|
-
<Code language="json" size={1}>
|
|
108
|
-
{JSON.stringify({loading, options, query, value}, null, 2)}
|
|
109
|
-
</Code>
|
|
110
|
-
</Box>
|
|
111
|
-
</Stack>
|
|
112
|
-
</Box>
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function AsyncOption(props: {
|
|
117
|
-
documentId: string
|
|
118
|
-
disabled?: boolean
|
|
119
|
-
selected?: boolean
|
|
120
|
-
tabIndex?: number
|
|
121
|
-
}) {
|
|
122
|
-
const {documentId, disabled, selected, tabIndex} = props
|
|
123
|
-
const [data, setData] = useState<{title: string} | null>(null)
|
|
124
|
-
const [loading, setLoading] = useState(false)
|
|
125
|
-
const ref = useRef<{cancel: () => void} | null>(null)
|
|
126
|
-
|
|
127
|
-
useEffect(() => {
|
|
128
|
-
if (ref.current) ref.current.cancel()
|
|
129
|
-
ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
|
|
130
|
-
}, [documentId])
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<Card
|
|
134
|
-
as="button"
|
|
135
|
-
disabled={disabled}
|
|
136
|
-
padding={3}
|
|
137
|
-
radius={1}
|
|
138
|
-
selected={selected}
|
|
139
|
-
tabIndex={tabIndex}
|
|
140
|
-
>
|
|
141
|
-
<Flex gap={3}>
|
|
142
|
-
<Text>
|
|
143
|
-
<EarthAmericasIcon />
|
|
144
|
-
</Text>
|
|
145
|
-
|
|
146
|
-
{loading && (
|
|
147
|
-
<Text muted>
|
|
148
|
-
<>Loading…</>
|
|
149
|
-
</Text>
|
|
150
|
-
)}
|
|
151
|
-
|
|
152
|
-
{!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
|
|
153
|
-
</Flex>
|
|
154
|
-
</Card>
|
|
155
|
-
)
|
|
156
|
-
}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Autocomplete,
|
|
3
|
-
type AutocompleteProps,
|
|
4
|
-
BoundaryElementProvider,
|
|
5
|
-
Box,
|
|
6
|
-
Card,
|
|
7
|
-
Container,
|
|
8
|
-
LayerProvider,
|
|
9
|
-
Popover,
|
|
10
|
-
Stack,
|
|
11
|
-
Text,
|
|
12
|
-
} from '@sanity/ui'
|
|
13
|
-
import {useCallback, useState} from 'react'
|
|
14
|
-
|
|
15
|
-
import {countries} from './mock/countries'
|
|
16
|
-
import type {ExampleOption} from './types'
|
|
17
|
-
|
|
18
|
-
export default function ConstrainedHeightStory(): React.JSX.Element {
|
|
19
|
-
const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<Card height="fill" tone="transparent">
|
|
23
|
-
<Container height="fill" padding={3} sizing="border" width={1}>
|
|
24
|
-
<Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
|
|
25
|
-
<Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
|
|
26
|
-
<Stack gap={5}>
|
|
27
|
-
<BoundaryElementProvider element={boundaryElement}>
|
|
28
|
-
<ConstrainedHeightExampleField id="example-1" label="Example 1" />
|
|
29
|
-
<ConstrainedHeightExampleField id="example-2" label="Example 2" />
|
|
30
|
-
<ConstrainedHeightExampleField id="example-3" label="Example 3" />
|
|
31
|
-
<ConstrainedHeightExampleField id="example-4" label="Example 4" />
|
|
32
|
-
<ConstrainedHeightExampleField id="example-5" label="Example 5" />
|
|
33
|
-
<ConstrainedHeightExampleField id="example-6" label="Example 6" />
|
|
34
|
-
<ConstrainedHeightExampleField id="example-7" label="Example 7" />
|
|
35
|
-
<ConstrainedHeightExampleField id="example-8" label="Example 8" />
|
|
36
|
-
<ConstrainedHeightExampleField id="example-9" label="Example 9" />
|
|
37
|
-
</BoundaryElementProvider>
|
|
38
|
-
</Stack>
|
|
39
|
-
</Box>
|
|
40
|
-
</Card>
|
|
41
|
-
</Container>
|
|
42
|
-
</Card>
|
|
43
|
-
)
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
|
|
47
|
-
const [value, setValue] = useState('')
|
|
48
|
-
|
|
49
|
-
const renderOption = useCallback((option: ExampleOption) => {
|
|
50
|
-
return (
|
|
51
|
-
<Card
|
|
52
|
-
as="a"
|
|
53
|
-
data-qa={`option-${option.value}`}
|
|
54
|
-
href="#"
|
|
55
|
-
key={option.value}
|
|
56
|
-
onClick={(event) => event.preventDefault()}
|
|
57
|
-
padding={3}
|
|
58
|
-
radius={2}
|
|
59
|
-
>
|
|
60
|
-
<Text textOverflow="ellipsis">{option.title}</Text>
|
|
61
|
-
</Card>
|
|
62
|
-
)
|
|
63
|
-
}, [])
|
|
64
|
-
|
|
65
|
-
const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
|
|
66
|
-
return option ? option.title : currentValue
|
|
67
|
-
}, [])
|
|
68
|
-
|
|
69
|
-
const filterOption = useCallback((query: string, option: ExampleOption) => {
|
|
70
|
-
return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
|
|
71
|
-
}, [])
|
|
72
|
-
|
|
73
|
-
const options = countries.map((item) => ({value: item.code, title: item.name}))
|
|
74
|
-
|
|
75
|
-
const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
|
|
76
|
-
(
|
|
77
|
-
popoverProps: {
|
|
78
|
-
content: React.JSX.Element | null
|
|
79
|
-
hidden: boolean
|
|
80
|
-
inputElement: HTMLInputElement | null
|
|
81
|
-
onMouseEnter: () => void
|
|
82
|
-
onMouseLeave: () => void
|
|
83
|
-
},
|
|
84
|
-
popoverRef: React.Ref<HTMLDivElement>,
|
|
85
|
-
) => {
|
|
86
|
-
const {hidden, inputElement, ...rest} = popoverProps
|
|
87
|
-
|
|
88
|
-
if (hidden) return null
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<Popover
|
|
92
|
-
{...rest}
|
|
93
|
-
arrow={false}
|
|
94
|
-
constrainSize
|
|
95
|
-
matchReferenceWidth
|
|
96
|
-
open
|
|
97
|
-
overflow="auto"
|
|
98
|
-
placement="bottom-start"
|
|
99
|
-
portal
|
|
100
|
-
radius={3}
|
|
101
|
-
ref={popoverRef}
|
|
102
|
-
referenceElement={inputElement}
|
|
103
|
-
/>
|
|
104
|
-
)
|
|
105
|
-
},
|
|
106
|
-
[],
|
|
107
|
-
)
|
|
108
|
-
|
|
109
|
-
return (
|
|
110
|
-
<Stack gap={3}>
|
|
111
|
-
<Text size={1} weight="medium">
|
|
112
|
-
{label}
|
|
113
|
-
</Text>
|
|
114
|
-
<LayerProvider zOffset={100}>
|
|
115
|
-
<Autocomplete
|
|
116
|
-
filterOption={filterOption}
|
|
117
|
-
id={id}
|
|
118
|
-
onChange={setValue}
|
|
119
|
-
openButton
|
|
120
|
-
options={options}
|
|
121
|
-
placeholder="Search"
|
|
122
|
-
radius={2}
|
|
123
|
-
renderOption={renderOption}
|
|
124
|
-
renderPopover={renderPopover}
|
|
125
|
-
renderValue={renderValue}
|
|
126
|
-
value={value}
|
|
127
|
-
/>
|
|
128
|
-
</LayerProvider>
|
|
129
|
-
</Stack>
|
|
130
|
-
)
|
|
131
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
|
|
2
|
-
import type {Radius} from '@sanity/ui/theme'
|
|
3
|
-
import {useBoolean, useSelect} from '@sanity/ui-workshop'
|
|
4
|
-
import {useCallback, useState} from 'react'
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
WORKSHOP_RADIUS_OPTIONS,
|
|
8
|
-
WORKSHOP_SPACE_OPTIONS,
|
|
9
|
-
WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
|
|
10
|
-
} from '$workshop'
|
|
11
|
-
|
|
12
|
-
import {countries} from './mock/countries'
|
|
13
|
-
import type {ExampleOption} from './types'
|
|
14
|
-
|
|
15
|
-
export default function CustomStory(): React.JSX.Element {
|
|
16
|
-
const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
|
|
17
|
-
const border = useBoolean('Border', true)
|
|
18
|
-
const disabled = useBoolean('Disabled', false)
|
|
19
|
-
const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
|
|
20
|
-
const openButton = useBoolean('Open button', true)
|
|
21
|
-
const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
|
|
22
|
-
const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
|
|
23
|
-
const readOnly = useBoolean('Read only', false)
|
|
24
|
-
const [value, setValue] = useState('')
|
|
25
|
-
|
|
26
|
-
const renderOption = useCallback(
|
|
27
|
-
(option: ExampleOption) => (
|
|
28
|
-
<Card
|
|
29
|
-
as="a"
|
|
30
|
-
data-qa={`option-${option.value}`}
|
|
31
|
-
href="#"
|
|
32
|
-
key={option.value}
|
|
33
|
-
onClick={(event) => event.preventDefault()}
|
|
34
|
-
padding={padding}
|
|
35
|
-
radius={Math.max((radius ?? 0) - 1, 0) as Radius}
|
|
36
|
-
>
|
|
37
|
-
<Text size={fontSize}>{option.title}</Text>
|
|
38
|
-
</Card>
|
|
39
|
-
),
|
|
40
|
-
[fontSize, padding, radius],
|
|
41
|
-
)
|
|
42
|
-
|
|
43
|
-
const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
|
|
44
|
-
return option ? option.title : currentValue
|
|
45
|
-
}, [])
|
|
46
|
-
|
|
47
|
-
const filterOption = useCallback((query: string, option: ExampleOption) => {
|
|
48
|
-
return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
|
|
49
|
-
}, [])
|
|
50
|
-
|
|
51
|
-
const options = data.map((item) => ({value: item.value, title: item.title}))
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
|
|
55
|
-
<Container width={0}>
|
|
56
|
-
<Stack gap={5}>
|
|
57
|
-
<Stack gap={3}>
|
|
58
|
-
<Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
|
|
59
|
-
Country
|
|
60
|
-
</Text>
|
|
61
|
-
<Autocomplete
|
|
62
|
-
aria-describedby="custom-label"
|
|
63
|
-
border={border}
|
|
64
|
-
disabled={disabled}
|
|
65
|
-
filterOption={filterOption}
|
|
66
|
-
fontSize={fontSize}
|
|
67
|
-
id="custom"
|
|
68
|
-
onChange={setValue}
|
|
69
|
-
openButton={openButton}
|
|
70
|
-
options={options}
|
|
71
|
-
padding={padding}
|
|
72
|
-
placeholder="Search"
|
|
73
|
-
radius={radius}
|
|
74
|
-
readOnly={readOnly}
|
|
75
|
-
renderOption={renderOption}
|
|
76
|
-
renderValue={renderValue}
|
|
77
|
-
value={value}
|
|
78
|
-
/>
|
|
79
|
-
</Stack>
|
|
80
|
-
|
|
81
|
-
<Box muted padding={3} radius={2}>
|
|
82
|
-
<Code size={1}>{JSON.stringify(value)}</Code>
|
|
83
|
-
</Box>
|
|
84
|
-
<Box>
|
|
85
|
-
<Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
|
|
86
|
-
</Box>
|
|
87
|
-
</Stack>
|
|
88
|
-
</Container>
|
|
89
|
-
</Box>
|
|
90
|
-
)
|
|
91
|
-
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
|
|
2
|
-
import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
|
|
3
|
-
import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
|
|
4
|
-
import {fireEvent} from '@testing-library/dom'
|
|
5
|
-
import {useCallback, useMemo, useState} from 'react'
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
WORKSHOP_CARD_TONE_OPTIONS,
|
|
9
|
-
WORKSHOP_RADIUS_OPTIONS,
|
|
10
|
-
WORKSHOP_SPACE_OPTIONS,
|
|
11
|
-
WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
|
|
12
|
-
} from '$workshop'
|
|
13
|
-
|
|
14
|
-
import {countries} from './mock/countries'
|
|
15
|
-
|
|
16
|
-
const typingPerfTest: PerfTestProps<HTMLInputElement> = {
|
|
17
|
-
name: 'typing',
|
|
18
|
-
title: 'Typing',
|
|
19
|
-
description: 'This test types one character at a time',
|
|
20
|
-
run({target}) {
|
|
21
|
-
const text = 'Hello, world & Hello, world & Hello, world'
|
|
22
|
-
const len = text.length
|
|
23
|
-
|
|
24
|
-
for (let i = 0; i < len; i += 1) {
|
|
25
|
-
const value = text.slice(0, i + 1)
|
|
26
|
-
|
|
27
|
-
fireEvent.change(target, {target: {value}})
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export default function ExampleStory(): React.JSX.Element {
|
|
33
|
-
const {ref, Wrapper} = usePerfTest(typingPerfTest)
|
|
34
|
-
|
|
35
|
-
const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
|
|
36
|
-
const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
|
|
37
|
-
const border = useBoolean('Border', true)
|
|
38
|
-
const customValidity = useText('Custom validity')
|
|
39
|
-
const disabled = useBoolean('Disabled', false)
|
|
40
|
-
const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
|
|
41
|
-
const openButton = useBoolean('Open button', false)
|
|
42
|
-
const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
|
|
43
|
-
const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
|
|
44
|
-
const readOnly = useBoolean('Read only', false)
|
|
45
|
-
const [value, setValue] = useState('')
|
|
46
|
-
|
|
47
|
-
const handleChange = useCallback((value: string) => setValue(value), [])
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Card height="fill" tone={layoutTone}>
|
|
51
|
-
<Container width={1}>
|
|
52
|
-
<Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
|
|
53
|
-
<Stack gap={3}>
|
|
54
|
-
<Text as="label" htmlFor="default" size={1} weight="medium">
|
|
55
|
-
Country code
|
|
56
|
-
</Text>
|
|
57
|
-
<Wrapper>
|
|
58
|
-
<Autocomplete
|
|
59
|
-
border={border}
|
|
60
|
-
customValidity={customValidity}
|
|
61
|
-
disabled={disabled}
|
|
62
|
-
fontSize={fontSize}
|
|
63
|
-
onChange={handleChange}
|
|
64
|
-
id="default"
|
|
65
|
-
openButton={openButton}
|
|
66
|
-
options={options}
|
|
67
|
-
padding={padding}
|
|
68
|
-
placeholder="Search"
|
|
69
|
-
radius={radius}
|
|
70
|
-
readOnly={readOnly}
|
|
71
|
-
ref={ref}
|
|
72
|
-
value={value}
|
|
73
|
-
/>
|
|
74
|
-
</Wrapper>
|
|
75
|
-
</Stack>
|
|
76
|
-
</Box>
|
|
77
|
-
</Container>
|
|
78
|
-
</Card>
|
|
79
|
-
)
|
|
80
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
|
|
2
|
-
import {useCallback, useState} from 'react'
|
|
3
|
-
|
|
4
|
-
export default function FocusAndBlurStory(): React.JSX.Element {
|
|
5
|
-
const [value, setValue] = useState('')
|
|
6
|
-
const [log, setLog] = useState<string[]>([])
|
|
7
|
-
const handleBlur = useCallback(() => setLog((v) => v.concat(['blur'])), [])
|
|
8
|
-
const handleFocus = useCallback(() => setLog((v) => v.concat(['focus'])), [])
|
|
9
|
-
const handleClear = useCallback(() => setLog([]), [])
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<Box padding={[4, 5, 6]}>
|
|
13
|
-
<Stack gap={3}>
|
|
14
|
-
<Autocomplete
|
|
15
|
-
id="focus-and-blur"
|
|
16
|
-
onBlur={handleBlur}
|
|
17
|
-
onChange={setValue}
|
|
18
|
-
onFocus={handleFocus}
|
|
19
|
-
openButton
|
|
20
|
-
options={[{value: 'foo'}, {value: 'bar'}]}
|
|
21
|
-
placeholder="Search"
|
|
22
|
-
value={value}
|
|
23
|
-
/>
|
|
24
|
-
<Stack gap={3}>
|
|
25
|
-
<Box muted overflow="auto" padding={3} radius={2}>
|
|
26
|
-
<Code id="focus-and-blur-log" language="json" size={1}>
|
|
27
|
-
{JSON.stringify(log)}
|
|
28
|
-
</Code>
|
|
29
|
-
</Box>
|
|
30
|
-
|
|
31
|
-
<Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
|
|
32
|
-
</Stack>
|
|
33
|
-
</Stack>
|
|
34
|
-
</Box>
|
|
35
|
-
)
|
|
36
|
-
}
|