@sanity/ui 0.37.14-next.6 → 0.37.16
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/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts +1 -1
- package/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
- package/lib/dts/src/components/autocomplete/constants.d.ts.map +1 -1
- package/lib/dts/src/constants.d.ts +0 -10
- package/lib/dts/src/constants.d.ts.map +1 -1
- package/lib/dts/src/primitives/popover/{popoverArrow.d.ts → arrow.d.ts} +1 -1
- package/lib/dts/src/primitives/popover/arrow.d.ts.map +1 -0
- package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts +4 -0
- package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts.map +1 -0
- package/lib/dts/src/primitives/popover/modifiers/index.d.ts +2 -0
- package/lib/dts/src/primitives/popover/modifiers/index.d.ts.map +1 -0
- package/lib/dts/src/primitives/popover/modifiers/types.d.ts +18 -0
- package/lib/dts/src/primitives/popover/modifiers/types.d.ts.map +1 -0
- package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts +4 -0
- package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts.map +1 -0
- package/lib/dts/src/primitives/popover/popover.d.ts +5 -6
- package/lib/dts/src/primitives/popover/popover.d.ts.map +1 -1
- package/lib/dts/src/primitives/textArea/textArea.d.ts.map +1 -1
- package/lib/dts/src/primitives/textInput/textInput.d.ts.map +1 -1
- package/lib/dts/src/primitives/tooltip/tooltip.d.ts +0 -2
- package/lib/dts/src/primitives/tooltip/tooltip.d.ts.map +1 -1
- package/lib/dts/src/primitives/tooltip/tooltipArrow.d.ts.map +1 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts +3 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts.map +1 -1
- package/lib/sanity-ui.js +465 -490
- package/lib/sanity-ui.js.map +1 -1
- package/lib/sanity-ui.modern.mjs +584 -566
- package/lib/sanity-ui.modern.mjs.map +1 -1
- package/lib/sanity-ui.module.js +465 -491
- package/lib/sanity-ui.module.js.map +1 -1
- package/package.json +6 -5
- package/src/components/autocomplete/autocomplete.styles.tsx +5 -0
- package/src/components/autocomplete/constants.ts +3 -3
- package/src/constants.ts +0 -17
- package/src/primitives/popover/__workshop__/PlainStory.tsx +0 -1
- package/src/primitives/popover/__workshop__/RightAlignedStory.tsx +0 -1
- package/src/primitives/popover/__workshop__/TestStory.tsx +0 -1
- package/src/primitives/popover/{popoverArrow.tsx → arrow.tsx} +5 -5
- package/src/primitives/popover/modifiers/getPopoverModifiers.ts +137 -0
- package/src/primitives/popover/modifiers/index.ts +1 -0
- package/src/primitives/popover/modifiers/types.ts +18 -0
- package/src/primitives/popover/modifiers/usePopoverModifiers.ts +58 -0
- package/src/primitives/popover/popover.tsx +196 -229
- package/src/primitives/textArea/textArea.tsx +2 -0
- package/src/primitives/textInput/__workshop__/tones.tsx +222 -105
- package/src/primitives/textInput/textInput.tsx +5 -1
- package/src/primitives/tooltip/__workshop__/props.tsx +4 -5
- package/src/primitives/tooltip/tooltip.tsx +92 -159
- package/src/primitives/tooltip/tooltipArrow.tsx +10 -25
- package/src/styles/input/textInputStyle.ts +7 -5
- package/lib/dts/src/primitives/popover/popoverArrow.d.ts.map +0 -1
- package/lib/dts/src/primitives/popover/popoverCard.d.ts +0 -33
- package/lib/dts/src/primitives/popover/popoverCard.d.ts.map +0 -1
- package/src/primitives/popover/popoverCard.tsx +0 -160
package/lib/sanity-ui.js
CHANGED
|
@@ -6,8 +6,9 @@ var resizeObserver = require('@juggle/resize-observer');
|
|
|
6
6
|
var color$1 = require('@sanity/color');
|
|
7
7
|
var icons = require('@sanity/icons');
|
|
8
8
|
var Refractor = require('react-refractor');
|
|
9
|
-
var
|
|
9
|
+
var reactPopper = require('react-popper');
|
|
10
10
|
var ReactDOM = require('react-dom');
|
|
11
|
+
var maxSizeModifier = require('popper-max-size-modifier');
|
|
11
12
|
var framerMotion = require('framer-motion');
|
|
12
13
|
|
|
13
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -17,6 +18,7 @@ var ReactIs__default = /*#__PURE__*/_interopDefaultLegacy(ReactIs);
|
|
|
17
18
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
18
19
|
var Refractor__default = /*#__PURE__*/_interopDefaultLegacy(Refractor);
|
|
19
20
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
21
|
+
var maxSizeModifier__default = /*#__PURE__*/_interopDefaultLegacy(maxSizeModifier);
|
|
20
22
|
|
|
21
23
|
function _extends() {
|
|
22
24
|
_extends = Object.assign || function (target) {
|
|
@@ -114,25 +116,8 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
|
|
114
116
|
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
115
117
|
}
|
|
116
118
|
|
|
117
|
-
/**
|
|
118
|
-
* @internal
|
|
119
|
-
*/
|
|
120
119
|
var EMPTY_ARRAY = [];
|
|
121
|
-
/**
|
|
122
|
-
* @internal
|
|
123
|
-
*/
|
|
124
|
-
|
|
125
120
|
var EMPTY_RECORD = {};
|
|
126
|
-
/**
|
|
127
|
-
* @internal
|
|
128
|
-
*/
|
|
129
|
-
|
|
130
|
-
var FLOATING_STATIC_SIDES = {
|
|
131
|
-
top: 'bottom',
|
|
132
|
-
right: 'left',
|
|
133
|
-
bottom: 'top',
|
|
134
|
-
left: 'right'
|
|
135
|
-
};
|
|
136
121
|
|
|
137
122
|
/**
|
|
138
123
|
* @internal
|
|
@@ -2947,7 +2932,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/React.createContext(null
|
|
|
2947
2932
|
|
|
2948
2933
|
var ThemeContext = globalScope[key$7];
|
|
2949
2934
|
|
|
2950
|
-
var _excluded$
|
|
2935
|
+
var _excluded$H = ["color", "layer"];
|
|
2951
2936
|
/**
|
|
2952
2937
|
* @public
|
|
2953
2938
|
*/
|
|
@@ -2966,7 +2951,7 @@ function ThemeProvider(props) {
|
|
|
2966
2951
|
|
|
2967
2952
|
var rootColor = themeProp.color,
|
|
2968
2953
|
rootLayer = themeProp.layer,
|
|
2969
|
-
restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$
|
|
2954
|
+
restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
|
|
2970
2955
|
|
|
2971
2956
|
var colorScheme = rootColor[scheme] || rootColor.light;
|
|
2972
2957
|
var color = colorScheme[tone] || colorScheme["default"];
|
|
@@ -3709,18 +3694,19 @@ function responsiveInputPaddingIconRightStyle(props) {
|
|
|
3709
3694
|
}));
|
|
3710
3695
|
}
|
|
3711
3696
|
|
|
3712
|
-
var _templateObject$
|
|
3713
|
-
var ROOT_STYLE = styled.css(_templateObject$
|
|
3697
|
+
var _templateObject$D, _templateObject2$n, _templateObject3$e;
|
|
3698
|
+
var ROOT_STYLE = styled.css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
|
|
3714
3699
|
function textInputRootStyle() {
|
|
3715
3700
|
return ROOT_STYLE;
|
|
3716
3701
|
}
|
|
3717
3702
|
function textInputBaseStyle(props) {
|
|
3718
3703
|
var theme = props.theme,
|
|
3704
|
+
$scheme = props.$scheme,
|
|
3719
3705
|
$tone = props.$tone,
|
|
3720
3706
|
$weight = props.$weight;
|
|
3721
3707
|
var font = theme.sanity.fonts.text;
|
|
3722
3708
|
var color = theme.sanity.color.input;
|
|
3723
|
-
return styled.css(_templateObject2$
|
|
3709
|
+
return styled.css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n appearance: none;\n background: none;\n border: 0;\n border-radius: 0;\n outline: none;\n width: 100%;\n box-sizing: border-box;\n font-family: ", ";\n font-weight: ", ";\n margin: 0;\n position: relative;\n z-index: 1;\n display: block;\n\n /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: var(--input-fg-color) !important;\n transition: background-color 5000s;\n transition-delay: 86400s /* 24h */;\n }\n\n /* &:is(textarea) */\n &[data-as='textarea'] {\n resize: none;\n }\n\n color: var(--input-fg-color);\n\n &::placeholder {\n color: var(--input-placeholder-color);\n }\n\n &[data-scheme='", "'][data-tone='", "'] {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n\n /* enabled */\n &:not(:invalid):not(:disabled):not(:read-only) {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* disabled */\n &:not(:invalid):disabled {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* invalid */\n &:invalid {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* readOnly */\n &:read-only {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n }\n "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].disabled.fg, color["default"].disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color["default"].readOnly.fg, color["default"].readOnly.placeholder);
|
|
3724
3710
|
}
|
|
3725
3711
|
function textInputFontSizeStyle(props) {
|
|
3726
3712
|
var theme = props.theme;
|
|
@@ -3739,13 +3725,14 @@ function textInputRepresentationStyle(props) {
|
|
|
3739
3725
|
var $border = props.$border,
|
|
3740
3726
|
$hasPrefix = props.$hasPrefix,
|
|
3741
3727
|
$hasSuffix = props.$hasSuffix,
|
|
3728
|
+
$scheme = props.$scheme,
|
|
3742
3729
|
$tone = props.$tone,
|
|
3743
3730
|
theme = props.theme;
|
|
3744
3731
|
var _theme$sanity2 = theme.sanity,
|
|
3745
3732
|
focusRing = _theme$sanity2.focusRing,
|
|
3746
3733
|
input = _theme$sanity2.input;
|
|
3747
3734
|
var color = theme.sanity.color.input;
|
|
3748
|
-
return styled.css(_templateObject3$
|
|
3735
|
+
return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n --input-box-shadow: none;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n pointer-events: none;\n z-index: 0;\n\n background-color: var(--card-bg-color);\n box-shadow: var(--input-box-shadow);\n\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n\n &[data-scheme='", "'][data-tone='", "'] {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n\n /* enabled */\n *:not(:disabled) + & {\n --input-box-shadow: ", ";\n }\n\n /* invalid */\n *:not(:disabled):invalid + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n --input-box-shadow: ", ";\n }\n\n /* focused */\n *:not(:disabled):focus + & {\n --input-box-shadow: ", ";\n }\n\n /* disabled */\n *:disabled + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n --input-box-shadow: ", ";\n }\n\n /* readOnly */\n *:read-only + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n }\n\n /* hovered */\n @media (hover: hover) {\n *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n }\n\n *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {\n --input-box-shadow: ", ";\n }\n }\n }\n "])), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $scheme, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
|
|
3749
3736
|
color: color["default"].enabled.border,
|
|
3750
3737
|
width: input.border.width
|
|
3751
3738
|
}) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
|
|
@@ -3813,20 +3800,20 @@ function responsiveShadowStyle(props) {
|
|
|
3813
3800
|
});
|
|
3814
3801
|
}
|
|
3815
3802
|
|
|
3816
|
-
var _templateObject$
|
|
3803
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$d;
|
|
3817
3804
|
function textBaseStyle(props) {
|
|
3818
3805
|
var $accent = props.$accent,
|
|
3819
3806
|
$muted = props.$muted,
|
|
3820
3807
|
theme = props.theme;
|
|
3821
3808
|
var weights = theme.sanity.fonts.text.weights;
|
|
3822
|
-
return styled.css(_templateObject$
|
|
3809
|
+
return styled.css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n color: var(--card-fg-color);\n\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n background-color: var(--card-code-bg-color);\n color: var(--card-code-fg-color);\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n color: var(--card-link-color);\n outline: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & strong {\n font-weight: ", ";\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family, weights.bold);
|
|
3823
3810
|
}
|
|
3824
3811
|
|
|
3825
|
-
var _excluded$
|
|
3812
|
+
var _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
|
|
3826
3813
|
|
|
3827
|
-
var _templateObject$
|
|
3814
|
+
var _templateObject$B;
|
|
3828
3815
|
var Root$E = styled__default["default"].div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
|
|
3829
|
-
var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$
|
|
3816
|
+
var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
|
|
3830
3817
|
/**
|
|
3831
3818
|
* @public
|
|
3832
3819
|
*/
|
|
@@ -3842,7 +3829,7 @@ var Text = /*#__PURE__*/React.forwardRef(function Text(props, ref) {
|
|
|
3842
3829
|
size = _props$size === void 0 ? 2 : _props$size,
|
|
3843
3830
|
textOverflow = props.textOverflow,
|
|
3844
3831
|
weight = props.weight,
|
|
3845
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
3832
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
|
|
3846
3833
|
|
|
3847
3834
|
var children = childrenProp;
|
|
3848
3835
|
|
|
@@ -4002,7 +3989,7 @@ function avatarStrokeStyle() {
|
|
|
4002
3989
|
};
|
|
4003
3990
|
}
|
|
4004
3991
|
|
|
4005
|
-
var _excluded$
|
|
3992
|
+
var _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
|
|
4006
3993
|
var Root$D = styled__default["default"].div(responsiveAvatarSizeStyle, avatarStyle.root);
|
|
4007
3994
|
var Arrow = styled__default["default"].div(avatarStyle.arrow);
|
|
4008
3995
|
var BgStroke = styled__default["default"].ellipse(avatarStyle.bgStroke);
|
|
@@ -4026,7 +4013,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
|
|
|
4026
4013
|
status = _props$status === void 0 ? 'online' : _props$status,
|
|
4027
4014
|
_props$size = props.size,
|
|
4028
4015
|
sizeProp = _props$size === void 0 ? 0 : _props$size,
|
|
4029
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4016
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
|
|
4030
4017
|
|
|
4031
4018
|
var as = ReactIs__default["default"].isValidElementType(asProp) ? asProp : 'div';
|
|
4032
4019
|
var size = useArrayProp(sizeProp);
|
|
@@ -4131,7 +4118,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
|
|
|
4131
4118
|
}, /*#__PURE__*/React__default["default"].createElement("strong", null, initials)))));
|
|
4132
4119
|
});
|
|
4133
4120
|
|
|
4134
|
-
var _templateObject$
|
|
4121
|
+
var _templateObject$A;
|
|
4135
4122
|
|
|
4136
4123
|
function _responsiveAvatarCounterSizeStyle(props) {
|
|
4137
4124
|
var theme = props.theme;
|
|
@@ -4151,7 +4138,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
|
|
|
4151
4138
|
|
|
4152
4139
|
function _avatarCounterBaseStyle(props) {
|
|
4153
4140
|
var theme = props.theme;
|
|
4154
|
-
return styled.css(_templateObject$
|
|
4141
|
+
return styled.css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n user-select: none;\n color: inherit;\n color: var(--card-fg-color);\n background: var(--card-bg-color);\n box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n padding: 0 ", ";\n\n &:not([hidden]) {\n display: flex;\n }\n "])), rem(theme.sanity.space[2]));
|
|
4155
4142
|
}
|
|
4156
4143
|
|
|
4157
4144
|
var Root$C = styled__default["default"].div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
|
|
@@ -4186,10 +4173,10 @@ function childrenToElementArray(children) {
|
|
|
4186
4173
|
});
|
|
4187
4174
|
}
|
|
4188
4175
|
|
|
4189
|
-
var _excluded$
|
|
4176
|
+
var _excluded$E = ["children", "maxLength", "size"];
|
|
4190
4177
|
|
|
4191
|
-
var _templateObject$
|
|
4192
|
-
var BASE_STYLES = styled.css(_templateObject$
|
|
4178
|
+
var _templateObject$z;
|
|
4179
|
+
var BASE_STYLES = styled.css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n\n & > div {\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n }\n"])));
|
|
4193
4180
|
|
|
4194
4181
|
function avatarStackStyle() {
|
|
4195
4182
|
return BASE_STYLES;
|
|
@@ -4222,7 +4209,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
|
|
|
4222
4209
|
maxLengthProp = _props$maxLength === void 0 ? 4 : _props$maxLength,
|
|
4223
4210
|
_props$size = props.size,
|
|
4224
4211
|
sizeProp = _props$size === void 0 ? 0 : _props$size,
|
|
4225
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4212
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
|
|
4226
4213
|
|
|
4227
4214
|
var children = childrenToElementArray(childrenProp).filter(function (child) {
|
|
4228
4215
|
return typeof child !== 'string';
|
|
@@ -4252,7 +4239,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
|
|
|
4252
4239
|
}));
|
|
4253
4240
|
});
|
|
4254
4241
|
|
|
4255
|
-
var _excluded$
|
|
4242
|
+
var _excluded$D = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
|
|
4256
4243
|
var Root$A = styled__default["default"].div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
|
|
4257
4244
|
/**
|
|
4258
4245
|
* @public
|
|
@@ -4289,7 +4276,7 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(props, ref) {
|
|
|
4289
4276
|
rowStart = props.rowStart,
|
|
4290
4277
|
rowEnd = props.rowEnd,
|
|
4291
4278
|
sizing = props.sizing,
|
|
4292
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4279
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
|
|
4293
4280
|
|
|
4294
4281
|
return /*#__PURE__*/React__default["default"].createElement(Root$A, _extends({
|
|
4295
4282
|
"data-as": typeof asProp === 'string' ? asProp : undefined,
|
|
@@ -4325,20 +4312,20 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(props, ref) {
|
|
|
4325
4312
|
}), props.children);
|
|
4326
4313
|
});
|
|
4327
4314
|
|
|
4328
|
-
var _templateObject$
|
|
4315
|
+
var _templateObject$y, _templateObject2$l, _templateObject3$c;
|
|
4329
4316
|
function labelBaseStyle(props) {
|
|
4330
4317
|
var $accent = props.$accent,
|
|
4331
4318
|
$muted = props.$muted,
|
|
4332
4319
|
theme = props.theme;
|
|
4333
4320
|
var fonts = theme.sanity.fonts;
|
|
4334
|
-
return styled.css(_templateObject$
|
|
4321
|
+
return styled.css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n color: var(--card-muted-fg-color);\n "]))), fonts.code.family);
|
|
4335
4322
|
}
|
|
4336
4323
|
|
|
4337
|
-
var _excluded$
|
|
4324
|
+
var _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
|
|
4338
4325
|
|
|
4339
|
-
var _templateObject$
|
|
4326
|
+
var _templateObject$x;
|
|
4340
4327
|
var Root$z = styled__default["default"].div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
|
|
4341
|
-
var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$
|
|
4328
|
+
var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
|
|
4342
4329
|
/**
|
|
4343
4330
|
* @public
|
|
4344
4331
|
*/
|
|
@@ -4353,7 +4340,7 @@ var Label = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
|
|
|
4353
4340
|
size = _props$size === void 0 ? 2 : _props$size,
|
|
4354
4341
|
textOverflow = props.textOverflow,
|
|
4355
4342
|
weight = props.weight,
|
|
4356
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4343
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
|
|
4357
4344
|
|
|
4358
4345
|
var children = childrenProp;
|
|
4359
4346
|
|
|
@@ -4392,7 +4379,7 @@ function badgeStyle(props) {
|
|
|
4392
4379
|
};
|
|
4393
4380
|
}
|
|
4394
4381
|
|
|
4395
|
-
var _excluded$
|
|
4382
|
+
var _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
|
|
4396
4383
|
var Root$y = styled__default["default"](Box)(responsiveRadiusStyle, badgeStyle);
|
|
4397
4384
|
/**
|
|
4398
4385
|
* @public
|
|
@@ -4409,7 +4396,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
|
|
4409
4396
|
radius = _props$radius === void 0 ? 2 : _props$radius,
|
|
4410
4397
|
_props$tone = props.tone,
|
|
4411
4398
|
tone = _props$tone === void 0 ? 'default' : _props$tone,
|
|
4412
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4399
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
|
|
4413
4400
|
|
|
4414
4401
|
return /*#__PURE__*/React__default["default"].createElement(Root$y, _extends({
|
|
4415
4402
|
"data-ui": "Badge"
|
|
@@ -4424,7 +4411,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
|
|
|
4424
4411
|
}, children));
|
|
4425
4412
|
});
|
|
4426
4413
|
|
|
4427
|
-
var _excluded$
|
|
4414
|
+
var _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
|
|
4428
4415
|
var Root$x = styled__default["default"](Box)(flexItemStyle, responsiveFlexStyle);
|
|
4429
4416
|
/**
|
|
4430
4417
|
* @public
|
|
@@ -4438,7 +4425,7 @@ var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
|
|
|
4438
4425
|
gap = props.gap,
|
|
4439
4426
|
justify = props.justify,
|
|
4440
4427
|
wrap = props.wrap,
|
|
4441
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4428
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
|
|
4442
4429
|
|
|
4443
4430
|
return /*#__PURE__*/React__default["default"].createElement(Root$x, _extends({
|
|
4444
4431
|
"data-ui": "Flex"
|
|
@@ -4453,9 +4440,9 @@ var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
|
|
|
4453
4440
|
}));
|
|
4454
4441
|
});
|
|
4455
4442
|
|
|
4456
|
-
var _templateObject$
|
|
4457
|
-
var rotate$1 = styled.keyframes(_templateObject$
|
|
4458
|
-
var Root$w = styled__default["default"](Text)(_templateObject2$
|
|
4443
|
+
var _templateObject$w, _templateObject2$k;
|
|
4444
|
+
var rotate$1 = styled.keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
4445
|
+
var Root$w = styled__default["default"](Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
|
|
4459
4446
|
/**
|
|
4460
4447
|
* @public
|
|
4461
4448
|
*/
|
|
@@ -4505,13 +4492,13 @@ function _colorVarsStyle(base, color, checkered) {
|
|
|
4505
4492
|
};
|
|
4506
4493
|
}
|
|
4507
4494
|
|
|
4508
|
-
var _templateObject$
|
|
4495
|
+
var _templateObject$v;
|
|
4509
4496
|
/**
|
|
4510
4497
|
* @internal
|
|
4511
4498
|
*/
|
|
4512
4499
|
|
|
4513
4500
|
function buttonBaseStyles() {
|
|
4514
|
-
return styled.css(_templateObject$
|
|
4501
|
+
return styled.css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n -webkit-font-smoothing: inherit;\n appearance: none;\n display: inline-flex;\n align-items: center;\n font: inherit;\n border: 0;\n outline: none;\n user-select: none;\n text-decoration: none;\n border: 0;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n text-align: left;\n position: relative;\n\n & > span {\n display: block;\n flex: 1;\n min-width: 0;\n border-radius: inherit;\n }\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n "])));
|
|
4515
4502
|
}
|
|
4516
4503
|
var buttonTheme = {
|
|
4517
4504
|
border: {
|
|
@@ -4560,11 +4547,11 @@ function buttonColorStyles(props) {
|
|
|
4560
4547
|
}, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.button) == null ? void 0 : _theme$sanity$styles$.root].filter(Boolean);
|
|
4561
4548
|
}
|
|
4562
4549
|
|
|
4563
|
-
var _excluded$
|
|
4550
|
+
var _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
|
|
4564
4551
|
|
|
4565
|
-
var _templateObject$
|
|
4552
|
+
var _templateObject$u;
|
|
4566
4553
|
var Root$v = styled__default["default"].button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
|
|
4567
|
-
var LoadingBox = styled__default["default"].div(_templateObject$
|
|
4554
|
+
var LoadingBox = styled__default["default"].div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--card-bg-color);\n border-radius: inherit;\n z-index: 1;\n box-shadow: inherit;\n"])));
|
|
4568
4555
|
/**
|
|
4569
4556
|
* @public
|
|
4570
4557
|
*/
|
|
@@ -4599,7 +4586,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
|
4599
4586
|
tone = _props$tone === void 0 ? 'default' : _props$tone,
|
|
4600
4587
|
_props$type = props.type,
|
|
4601
4588
|
type = _props$type === void 0 ? 'button' : _props$type,
|
|
4602
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4589
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
|
|
4603
4590
|
|
|
4604
4591
|
var justify = useArrayProp(justifyProp);
|
|
4605
4592
|
var padding = useArrayProp(paddingProp);
|
|
@@ -4658,7 +4645,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
|
|
|
4658
4645
|
}, boxProps), children));
|
|
4659
4646
|
});
|
|
4660
4647
|
|
|
4661
|
-
var _templateObject$
|
|
4648
|
+
var _templateObject$t, _templateObject2$j, _templateObject3$b;
|
|
4662
4649
|
function cardStyle(props) {
|
|
4663
4650
|
return [cardBaseStyle(props), cardColorStyle(props)];
|
|
4664
4651
|
}
|
|
@@ -4666,7 +4653,7 @@ function cardBaseStyle(props) {
|
|
|
4666
4653
|
var $checkered = props.$checkered,
|
|
4667
4654
|
theme = props.theme;
|
|
4668
4655
|
var space = theme.sanity.space;
|
|
4669
|
-
return styled.css(_templateObject$
|
|
4656
|
+
return styled.css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n ", "\n\n &[data-as='button'] {\n -webkit-font-smoothing: inherit;\n appearance: none;\n outline: none;\n font: inherit;\n text-align: inherit;\n border: 0;\n width: stretch;\n }\n\n /* &:is(a) */\n &[data-as='a'] {\n outline: none;\n text-decoration: none;\n }\n\n /* &:is(pre) */\n &[data-as='pre'] {\n font: inherit;\n }\n "])), $checkered && styled.css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n background-size: ", "px ", "px;\n background-position: 50% 50%;\n background-image: var(--card-bg-image);\n "])), space[3], space[3]));
|
|
4670
4657
|
}
|
|
4671
4658
|
function cardColorStyle(props) {
|
|
4672
4659
|
var _theme$sanity$styles, _theme$sanity$styles$;
|
|
@@ -4682,7 +4669,7 @@ function cardColorStyle(props) {
|
|
|
4682
4669
|
width: 0,
|
|
4683
4670
|
color: 'var(--card-border-color)'
|
|
4684
4671
|
};
|
|
4685
|
-
return styled.css(_templateObject3$
|
|
4672
|
+
return styled.css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n ", "\n\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n\n /* &:is(button) */\n &[data-as='button'] {\n --card-focus-ring-box-shadow: none;\n\n cursor: default;\n box-shadow: var(--card-focus-ring-box-shadow);\n\n &:disabled {\n ", "\n }\n\n &:not(:disabled) {\n &[data-pressed] {\n ", "\n }\n\n &[data-selected] {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-pressed]):not([data-selected]) {\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n\n &:focus {\n --card-focus-ring-box-shadow: ", ";\n }\n\n &:focus:not(:focus-visible) {\n --card-focus-ring-box-shadow: ", ";\n }\n }\n }\n\n /* &:is(a) */\n &[data-as='a'] {\n cursor: pointer;\n box-shadow: var(--card-focus-ring-box-shadow);\n\n &[data-disabled] {\n ", "\n }\n\n &:not([data-disabled]) {\n &[data-pressed] {\n ", "\n }\n\n &[data-selected] {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-pressed]):not([data-selected]) {\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n\n &:focus {\n --card-focus-ring-box-shadow: ", ";\n }\n\n &:focus:not(:focus-visible) {\n --card-focus-ring-box-shadow: ", ";\n }\n }\n }\n\n ", "\n "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
|
|
4686
4673
|
base: base,
|
|
4687
4674
|
border: border,
|
|
4688
4675
|
focusRing: focusRing
|
|
@@ -4693,7 +4680,7 @@ function cardColorStyle(props) {
|
|
|
4693
4680
|
}) : undefined, $focusRing ? focusRingBorderStyle(border) : undefined, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.card) == null ? void 0 : _theme$sanity$styles$.root);
|
|
4694
4681
|
}
|
|
4695
4682
|
|
|
4696
|
-
var _excluded$
|
|
4683
|
+
var _excluded$y = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
|
|
4697
4684
|
var Root$u = styled__default["default"](Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
|
|
4698
4685
|
/**
|
|
4699
4686
|
* @public
|
|
@@ -4718,7 +4705,7 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
|
|
4718
4705
|
shadow = props.shadow,
|
|
4719
4706
|
_props$tone = props.tone,
|
|
4720
4707
|
toneProp = _props$tone === void 0 ? 'default' : _props$tone,
|
|
4721
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4708
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
|
|
4722
4709
|
|
|
4723
4710
|
var as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
|
|
4724
4711
|
var rootTheme = useRootTheme();
|
|
@@ -4751,9 +4738,9 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
|
|
|
4751
4738
|
})));
|
|
4752
4739
|
});
|
|
4753
4740
|
|
|
4754
|
-
var _templateObject$
|
|
4741
|
+
var _templateObject$s, _templateObject2$i;
|
|
4755
4742
|
function checkboxBaseStyles() {
|
|
4756
|
-
return styled.css(_templateObject$
|
|
4743
|
+
return styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n "])));
|
|
4757
4744
|
}
|
|
4758
4745
|
function inputElementStyles(props) {
|
|
4759
4746
|
var theme = props.theme;
|
|
@@ -4762,7 +4749,7 @@ function inputElementStyles(props) {
|
|
|
4762
4749
|
focusRing = _theme$sanity.focusRing,
|
|
4763
4750
|
input = _theme$sanity.input,
|
|
4764
4751
|
radius = _theme$sanity.radius;
|
|
4765
|
-
return styled.css(_templateObject2$
|
|
4752
|
+
return styled.css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n outline: none;\n opacity: 0;\n z-index: 1;\n padding: 0;\n margin: 0;\n\n & + span {\n position: relative;\n display: block;\n height: ", ";\n width: ", ";\n box-sizing: border-box;\n box-shadow: ", ";\n border-radius: ", ";\n line-height: 1;\n background-color: ", ";\n\n & > svg {\n display: block;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n\n & > path {\n vector-effect: non-scaling-stroke;\n stroke-width: 2 !important;\n }\n }\n }\n\n &:not(:disabled):focus + span {\n box-shadow: ", ";\n }\n\n &:not(:disabled):focus:not(:focus-visible) + span {\n box-shadow: ", ";\n }\n\n &:checked + span > svg:first-child {\n opacity: 1;\n }\n\n &[data-read-only] + span {\n background-color: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n\n &:not([data-read-only]):disabled + span {\n background-color: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n\n &:indeterminate + span > svg:last-child {\n opacity: 1;\n }\n "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
|
|
4766
4753
|
color: color["default"].enabled.border,
|
|
4767
4754
|
width: input.border.width
|
|
4768
4755
|
}), rem(radius[2]), color["default"].enabled.bg, focusRingStyle({
|
|
@@ -4783,7 +4770,7 @@ function inputElementStyles(props) {
|
|
|
4783
4770
|
}), color["default"].disabled.fg);
|
|
4784
4771
|
}
|
|
4785
4772
|
|
|
4786
|
-
var _excluded$
|
|
4773
|
+
var _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
|
|
4787
4774
|
var Root$t = styled__default["default"].div(checkboxBaseStyles);
|
|
4788
4775
|
var Input$5 = styled__default["default"].input(inputElementStyles);
|
|
4789
4776
|
/**
|
|
@@ -4798,7 +4785,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, forwardedR
|
|
|
4798
4785
|
customValidity = props.customValidity,
|
|
4799
4786
|
readOnly = props.readOnly,
|
|
4800
4787
|
style = props.style,
|
|
4801
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4788
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
|
|
4802
4789
|
|
|
4803
4790
|
var ref = useForwardedRef(forwardedRef);
|
|
4804
4791
|
useCustomValidity(ref, customValidity);
|
|
@@ -4823,7 +4810,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, forwardedR
|
|
|
4823
4810
|
})), /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkIcon, null), /*#__PURE__*/React__default["default"].createElement(icons.RemoveIcon, null)));
|
|
4824
4811
|
});
|
|
4825
4812
|
|
|
4826
|
-
var _templateObject$
|
|
4813
|
+
var _templateObject$r;
|
|
4827
4814
|
|
|
4828
4815
|
function codeSyntaxHighlightingStyle(_ref) {
|
|
4829
4816
|
var theme = _ref.theme;
|
|
@@ -4941,10 +4928,10 @@ function codeSyntaxHighlightingStyle(_ref) {
|
|
|
4941
4928
|
}
|
|
4942
4929
|
|
|
4943
4930
|
function codeBaseStyle() {
|
|
4944
|
-
return styled.css(_templateObject$
|
|
4931
|
+
return styled.css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n color: var(--card-code-fg-color);\n\n & code {\n font-family: inherit;\n\n &.refractor .token {\n ", "\n }\n }\n\n & a {\n color: inherit;\n text-decoration: underline;\n border-radius: 1px;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), codeSyntaxHighlightingStyle);
|
|
4945
4932
|
}
|
|
4946
4933
|
|
|
4947
|
-
var _excluded$
|
|
4934
|
+
var _excluded$w = ["children", "language", "size", "weight"];
|
|
4948
4935
|
var Root$s = styled__default["default"].pre(codeBaseStyle, responsiveCodeFontStyle);
|
|
4949
4936
|
/**
|
|
4950
4937
|
* @public
|
|
@@ -4956,7 +4943,7 @@ var Code = /*#__PURE__*/React.forwardRef(function Code(props, ref) {
|
|
|
4956
4943
|
_props$size = props.size,
|
|
4957
4944
|
size = _props$size === void 0 ? 2 : _props$size,
|
|
4958
4945
|
weight = props.weight,
|
|
4959
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4946
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
|
|
4960
4947
|
|
|
4961
4948
|
var language = typeof languageProp === 'string' ? languageProp : undefined;
|
|
4962
4949
|
var registered = language ? Refractor__default["default"].hasLanguage(language) : false;
|
|
@@ -4992,7 +4979,7 @@ function responsiveContainerWidthStyle(props) {
|
|
|
4992
4979
|
});
|
|
4993
4980
|
}
|
|
4994
4981
|
|
|
4995
|
-
var _excluded$
|
|
4982
|
+
var _excluded$v = ["as", "width"];
|
|
4996
4983
|
var Root$r = styled__default["default"](Box)(containerBaseStyle, responsiveContainerWidthStyle);
|
|
4997
4984
|
/**
|
|
4998
4985
|
* @public
|
|
@@ -5002,7 +4989,7 @@ var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
|
|
|
5002
4989
|
var as = props.as,
|
|
5003
4990
|
_props$width = props.width,
|
|
5004
4991
|
width = _props$width === void 0 ? 2 : _props$width,
|
|
5005
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4992
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
|
|
5006
4993
|
|
|
5007
4994
|
return /*#__PURE__*/React__default["default"].createElement(Root$r, _extends({
|
|
5008
4995
|
"data-ui": "Container"
|
|
@@ -5013,7 +5000,7 @@ var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
|
|
|
5013
5000
|
}));
|
|
5014
5001
|
});
|
|
5015
5002
|
|
|
5016
|
-
var _excluded$
|
|
5003
|
+
var _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
|
|
5017
5004
|
var Root$q = styled__default["default"](Box)(responsiveGridStyle);
|
|
5018
5005
|
/**
|
|
5019
5006
|
* @public
|
|
@@ -5030,7 +5017,7 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
|
|
|
5030
5017
|
gapY = props.gapY,
|
|
5031
5018
|
rows = props.rows,
|
|
5032
5019
|
children = props.children,
|
|
5033
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5020
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
|
|
5034
5021
|
|
|
5035
5022
|
return /*#__PURE__*/React__default["default"].createElement(Root$q, _extends({
|
|
5036
5023
|
"data-as": typeof as === 'string' ? as : undefined,
|
|
@@ -5049,19 +5036,19 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
|
|
|
5049
5036
|
}), children);
|
|
5050
5037
|
});
|
|
5051
5038
|
|
|
5052
|
-
var _templateObject$
|
|
5039
|
+
var _templateObject$q, _templateObject2$h, _templateObject3$a;
|
|
5053
5040
|
function headingBaseStyle(props) {
|
|
5054
5041
|
var $accent = props.$accent,
|
|
5055
5042
|
$muted = props.$muted,
|
|
5056
5043
|
theme = props.theme;
|
|
5057
|
-
return styled.css(_templateObject$
|
|
5044
|
+
return styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n color: var(--card-link-color);\n outline: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family);
|
|
5058
5045
|
}
|
|
5059
5046
|
|
|
5060
|
-
var _excluded$
|
|
5047
|
+
var _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
|
|
5061
5048
|
|
|
5062
|
-
var _templateObject$
|
|
5049
|
+
var _templateObject$p;
|
|
5063
5050
|
var Root$p = styled__default["default"].div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
|
|
5064
|
-
var SpanWithTextOverflow = styled__default["default"].span(_templateObject$
|
|
5051
|
+
var SpanWithTextOverflow = styled__default["default"].span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
|
|
5065
5052
|
/**
|
|
5066
5053
|
* @public
|
|
5067
5054
|
*/
|
|
@@ -5077,7 +5064,7 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
|
|
|
5077
5064
|
size = _props$size === void 0 ? 2 : _props$size,
|
|
5078
5065
|
textOverflow = props.textOverflow,
|
|
5079
5066
|
weight = props.weight,
|
|
5080
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5067
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
|
|
5081
5068
|
|
|
5082
5069
|
var children = childrenProp;
|
|
5083
5070
|
|
|
@@ -5122,7 +5109,7 @@ function inlineSpaceStyle(props) {
|
|
|
5122
5109
|
});
|
|
5123
5110
|
}
|
|
5124
5111
|
|
|
5125
|
-
var _excluded$
|
|
5112
|
+
var _excluded$s = ["as", "children", "space"];
|
|
5126
5113
|
var Root$o = styled__default["default"](Box)(inlineBaseStyle, inlineSpaceStyle);
|
|
5127
5114
|
/**
|
|
5128
5115
|
* @public
|
|
@@ -5132,7 +5119,7 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
|
|
|
5132
5119
|
var as = props.as,
|
|
5133
5120
|
childrenProp = props.children,
|
|
5134
5121
|
space = props.space,
|
|
5135
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5122
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
|
|
5136
5123
|
|
|
5137
5124
|
var children = React.useMemo(function () {
|
|
5138
5125
|
return childrenToElementArray(childrenProp).filter(Boolean).map(function (child, idx) {
|
|
@@ -5150,12 +5137,12 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
|
|
|
5150
5137
|
}), children);
|
|
5151
5138
|
});
|
|
5152
5139
|
|
|
5153
|
-
var _excluded$
|
|
5140
|
+
var _excluded$r = ["children", "fontSize", "padding", "radius"];
|
|
5154
5141
|
|
|
5155
|
-
var _templateObject$
|
|
5142
|
+
var _templateObject$o;
|
|
5156
5143
|
|
|
5157
5144
|
function kbdStyle() {
|
|
5158
|
-
return styled.css(_templateObject$
|
|
5145
|
+
return styled.css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n background: var(--card-bg-color);\n font: inherit;\n box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
|
|
5159
5146
|
}
|
|
5160
5147
|
|
|
5161
5148
|
var Root$n = styled__default["default"].kbd(responsiveRadiusStyle, kbdStyle);
|
|
@@ -5171,7 +5158,7 @@ var KBD = /*#__PURE__*/React.forwardRef(function KBD(props, ref) {
|
|
|
5171
5158
|
padding = _props$padding === void 0 ? 1 : _props$padding,
|
|
5172
5159
|
_props$radius = props.radius,
|
|
5173
5160
|
radius = _props$radius === void 0 ? 2 : _props$radius,
|
|
5174
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5161
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
|
|
5175
5162
|
|
|
5176
5163
|
return /*#__PURE__*/React__default["default"].createElement(Root$n, _extends({
|
|
5177
5164
|
"data-ui": "KBD"
|
|
@@ -5257,7 +5244,7 @@ function findMinBreakpoints(media, width) {
|
|
|
5257
5244
|
return ret;
|
|
5258
5245
|
}
|
|
5259
5246
|
|
|
5260
|
-
var _excluded$
|
|
5247
|
+
var _excluded$q = ["children", "media"];
|
|
5261
5248
|
/**
|
|
5262
5249
|
* DO NOT USE IN PRODUCTION.
|
|
5263
5250
|
* @beta
|
|
@@ -5269,7 +5256,7 @@ var ElementQuery = /*#__PURE__*/React.forwardRef(function ElementQuery(props, re
|
|
|
5269
5256
|
var children = props.children,
|
|
5270
5257
|
_props$media = props.media,
|
|
5271
5258
|
media = _props$media === void 0 ? theme.sanity.media : _props$media,
|
|
5272
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5259
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
|
|
5273
5260
|
|
|
5274
5261
|
var forwardedRef = useForwardedRef(ref);
|
|
5275
5262
|
|
|
@@ -5426,16 +5413,16 @@ function LayerProvider(props) {
|
|
|
5426
5413
|
}, children);
|
|
5427
5414
|
}
|
|
5428
5415
|
|
|
5429
|
-
var _excluded$
|
|
5416
|
+
var _excluded$p = ["children", "style"],
|
|
5430
5417
|
_excluded2$1 = ["children", "zOffset"];
|
|
5431
5418
|
|
|
5432
|
-
var _templateObject$
|
|
5433
|
-
var Root$m = styled__default["default"].div(_templateObject$
|
|
5419
|
+
var _templateObject$n;
|
|
5420
|
+
var Root$m = styled__default["default"].div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
5434
5421
|
var LayerChildren = /*#__PURE__*/React.forwardRef(function LayerChildren(props, ref) {
|
|
5435
5422
|
var children = props.children,
|
|
5436
5423
|
_props$style = props.style,
|
|
5437
5424
|
style = _props$style === void 0 ? EMPTY_RECORD : _props$style,
|
|
5438
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5425
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
|
|
5439
5426
|
|
|
5440
5427
|
var _useLayer = useLayer(),
|
|
5441
5428
|
zIndex = _useLayer.zIndex;
|
|
@@ -5583,8 +5570,8 @@ function PortalProvider(props) {
|
|
|
5583
5570
|
}, children);
|
|
5584
5571
|
}
|
|
5585
5572
|
|
|
5586
|
-
var _templateObject$
|
|
5587
|
-
var Root$l = styled__default["default"].div(_templateObject$
|
|
5573
|
+
var _templateObject$m;
|
|
5574
|
+
var Root$l = styled__default["default"].div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n"])));
|
|
5588
5575
|
/**
|
|
5589
5576
|
* @public
|
|
5590
5577
|
*/
|
|
@@ -5766,11 +5753,11 @@ function _isScrollable(el) {
|
|
|
5766
5753
|
return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
|
|
5767
5754
|
}
|
|
5768
5755
|
|
|
5769
|
-
var _excluded$
|
|
5756
|
+
var _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
|
|
5770
5757
|
|
|
5771
|
-
var _templateObject$
|
|
5772
|
-
var Root$k = styled__default["default"].div(_templateObject$
|
|
5773
|
-
var ItemWrapper = styled__default["default"].div(_templateObject2$
|
|
5758
|
+
var _templateObject$l, _templateObject2$g;
|
|
5759
|
+
var Root$k = styled__default["default"].div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
5760
|
+
var ItemWrapper = styled__default["default"].div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
|
|
5774
5761
|
/**
|
|
5775
5762
|
* @beta
|
|
5776
5763
|
*/
|
|
@@ -5785,7 +5772,7 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
|
|
|
5785
5772
|
items = _props$items === void 0 ? [] : _props$items,
|
|
5786
5773
|
onChange = props.onChange,
|
|
5787
5774
|
renderItem = props.renderItem,
|
|
5788
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5775
|
+
restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
|
|
5789
5776
|
|
|
5790
5777
|
var space = useTheme().sanity.space;
|
|
5791
5778
|
var forwardedRef = useForwardedRef(ref);
|
|
@@ -5914,13 +5901,13 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
|
|
|
5914
5901
|
}, children));
|
|
5915
5902
|
});
|
|
5916
5903
|
|
|
5917
|
-
var _templateObject$
|
|
5918
|
-
var Root$j = styled__default["default"].div(_templateObject$
|
|
5919
|
-
var BorderPath = styled__default["default"].path(_templateObject2$
|
|
5920
|
-
var ShapePath = styled__default["default"].path(_templateObject3$
|
|
5904
|
+
var _templateObject$k, _templateObject2$f, _templateObject3$9;
|
|
5905
|
+
var Root$j = styled__default["default"].div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n position: absolute;\n pointer-events: none;\n width: 27px;\n height: 27px;\n fill: none;\n\n :empty + & {\n display: none;\n }\n\n & > svg {\n display: block;\n transform-origin: 13.5px 13.5px;\n }\n\n [data-popper-placement^='top'] > div > & {\n bottom: -27px;\n }\n\n [data-popper-placement^='right'] > div > & {\n left: -27px;\n\n & > svg {\n transform: rotate(90deg);\n }\n }\n\n [data-popper-placement^='left'] > div > & {\n right: -27px;\n\n & > svg {\n transform: rotate(-90deg);\n }\n }\n\n [data-popper-placement^='bottom'] > div > & {\n top: -27px;\n\n & > svg {\n transform: rotate(180deg);\n }\n }\n"])));
|
|
5906
|
+
var BorderPath = styled__default["default"].path(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n fill: var(--card-shadow-outline-color);\n"])));
|
|
5907
|
+
var ShapePath = styled__default["default"].path(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n fill: var(--card-bg-color);\n"])));
|
|
5921
5908
|
var PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props, ref) {
|
|
5922
5909
|
return /*#__PURE__*/React__default["default"].createElement(Root$j, _extends({
|
|
5923
|
-
"data-ui": "
|
|
5910
|
+
"data-ui": "PopoverArrow"
|
|
5924
5911
|
}, props, {
|
|
5925
5912
|
ref: ref
|
|
5926
5913
|
}), /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
@@ -5936,309 +5923,325 @@ var PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props, re
|
|
|
5936
5923
|
})));
|
|
5937
5924
|
});
|
|
5938
5925
|
|
|
5939
|
-
|
|
5926
|
+
/*
|
|
5940
5927
|
|
|
5941
|
-
|
|
5942
|
-
var $boundaryWidth = props.$boundaryWidth;
|
|
5943
|
-
return {
|
|
5944
|
-
maxWidth: $boundaryWidth ? $boundaryWidth - 16 + "px" : 'calc(100% - 16px)'
|
|
5945
|
-
};
|
|
5946
|
-
}
|
|
5947
|
-
|
|
5948
|
-
var Root$i = /*#__PURE__*/React.memo(styled__default["default"](Card)(popoverCardStyle));
|
|
5949
|
-
/**
|
|
5950
|
-
* @internal
|
|
5951
|
-
*/
|
|
5952
|
-
|
|
5953
|
-
var PopoverCard = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function PopoverCard(props, ref) {
|
|
5954
|
-
var marginsProp = props.__unstable_margins,
|
|
5955
|
-
arrow = props.arrow,
|
|
5956
|
-
arrowRef = props.arrowRef,
|
|
5957
|
-
arrowX = props.arrowX,
|
|
5958
|
-
arrowY = props.arrowY,
|
|
5959
|
-
availableHeight = props.availableHeight,
|
|
5960
|
-
availableWidth = props.availableWidth,
|
|
5961
|
-
boundaryWidth = props.boundaryWidth,
|
|
5962
|
-
children = props.children,
|
|
5963
|
-
padding = props.padding,
|
|
5964
|
-
placement = props.placement,
|
|
5965
|
-
overflow = props.overflow,
|
|
5966
|
-
radius = props.radius,
|
|
5967
|
-
referenceWidthProp = props.referenceWidth,
|
|
5968
|
-
scheme = props.scheme,
|
|
5969
|
-
shadow = props.shadow,
|
|
5970
|
-
strategy = props.strategy,
|
|
5971
|
-
tone = props.tone,
|
|
5972
|
-
width = props.width,
|
|
5973
|
-
xProp = props.x,
|
|
5974
|
-
yProp = props.y,
|
|
5975
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
|
|
5976
|
-
|
|
5977
|
-
var _useLayer = useLayer(),
|
|
5978
|
-
zIndex = _useLayer.zIndex; // top right bottom left
|
|
5928
|
+
The order of popper phases:
|
|
5979
5929
|
|
|
5930
|
+
- beforeRead
|
|
5931
|
+
- read
|
|
5932
|
+
- afterRead
|
|
5933
|
+
- beforeMain
|
|
5934
|
+
- main
|
|
5935
|
+
- afterMain
|
|
5936
|
+
- beforeWrite
|
|
5937
|
+
- write
|
|
5938
|
+
- afterWrite
|
|
5980
5939
|
|
|
5981
|
-
|
|
5982
|
-
return marginsProp || [0, 0, 0, 0];
|
|
5983
|
-
}, [marginsProp]); // translate according to margins
|
|
5984
|
-
|
|
5985
|
-
var referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : undefined;
|
|
5986
|
-
var x = (xProp != null ? xProp : 0) + margins[3];
|
|
5987
|
-
var y = (yProp != null ? yProp : 0) + margins[0];
|
|
5988
|
-
var maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : undefined;
|
|
5989
|
-
var rootStyle = React.useMemo(function () {
|
|
5990
|
-
return {
|
|
5991
|
-
position: strategy,
|
|
5992
|
-
top: y,
|
|
5993
|
-
left: x,
|
|
5994
|
-
zIndex: zIndex,
|
|
5995
|
-
width: referenceWidth,
|
|
5996
|
-
maxWidth: referenceWidth ? undefined : maxWidth
|
|
5997
|
-
};
|
|
5998
|
-
}, [referenceWidth, maxWidth, strategy, x, y, zIndex]);
|
|
5999
|
-
var wrapperStyle = React.useMemo(function () {
|
|
6000
|
-
return {
|
|
6001
|
-
minHeight: 25,
|
|
6002
|
-
maxHeight: availableHeight ? availableHeight - 8 : undefined
|
|
6003
|
-
};
|
|
6004
|
-
}, [availableHeight]);
|
|
6005
|
-
var staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
|
|
6006
|
-
var arrowStyle = React.useMemo(function () {
|
|
6007
|
-
var style = {
|
|
6008
|
-
left: arrowX !== null ? arrowX : undefined,
|
|
6009
|
-
top: arrowY !== null ? arrowY : undefined,
|
|
6010
|
-
right: undefined,
|
|
6011
|
-
bottom: undefined
|
|
6012
|
-
};
|
|
6013
|
-
if (staticSide) style[staticSide] = -27;
|
|
6014
|
-
return style;
|
|
6015
|
-
}, [arrowX, arrowY, staticSide]);
|
|
6016
|
-
return /*#__PURE__*/React__default["default"].createElement(Root$i, _extends({}, restProps, {
|
|
6017
|
-
"$boundaryWidth": boundaryWidth,
|
|
6018
|
-
"data-placement": placement,
|
|
6019
|
-
"data-ui": "Popover",
|
|
6020
|
-
radius: radius,
|
|
6021
|
-
ref: ref,
|
|
6022
|
-
scheme: scheme,
|
|
6023
|
-
shadow: shadow,
|
|
6024
|
-
style: rootStyle,
|
|
6025
|
-
tone: tone,
|
|
6026
|
-
"$width": width
|
|
6027
|
-
}), /*#__PURE__*/React__default["default"].createElement(Box, {
|
|
6028
|
-
"data-ui": "Popover__wrapper",
|
|
6029
|
-
overflow: overflow,
|
|
6030
|
-
padding: padding,
|
|
6031
|
-
sizing: "border",
|
|
6032
|
-
style: wrapperStyle
|
|
6033
|
-
}, children), arrow && /*#__PURE__*/React__default["default"].createElement(PopoverArrow, {
|
|
6034
|
-
ref: arrowRef,
|
|
6035
|
-
style: arrowStyle
|
|
6036
|
-
}));
|
|
6037
|
-
}));
|
|
6038
|
-
PopoverCard.displayName = 'PopoverCard';
|
|
5940
|
+
*/
|
|
6039
5941
|
|
|
6040
|
-
|
|
5942
|
+
function getPopoverModifiers(props) {
|
|
5943
|
+
var allowedAutoPlacements = props.allowedAutoPlacements,
|
|
5944
|
+
arrow = props.arrow,
|
|
5945
|
+
arrowElement = props.arrowElement,
|
|
5946
|
+
boundaryElement = props.boundaryElement,
|
|
5947
|
+
constrainSize = props.constrainSize,
|
|
5948
|
+
distance = props.distance,
|
|
5949
|
+
fallbackPlacements = props.fallbackPlacements,
|
|
5950
|
+
margins = props.margins,
|
|
5951
|
+
matchReferenceWidth = props.matchReferenceWidth,
|
|
5952
|
+
open = props.open,
|
|
5953
|
+
preventOverflow = props.preventOverflow,
|
|
5954
|
+
skidding = props.skidding,
|
|
5955
|
+
tether = props.tether,
|
|
5956
|
+
tetherOffset = props.tetherOffset; // NOTE: For later viewers:
|
|
5957
|
+
// Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
|
|
5958
|
+
// was opened, when used with `constrainSize`. I was looking for a way to "reset"
|
|
5959
|
+
// the size of the popover as measured by Popper.js, and this seems to be a workaround.
|
|
5960
|
+
|
|
5961
|
+
if (!open) {
|
|
5962
|
+
return [];
|
|
5963
|
+
}
|
|
6041
5964
|
|
|
6042
|
-
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
|
|
5965
|
+
var detectOverflowOptions = {
|
|
5966
|
+
altAxis: !constrainSize,
|
|
5967
|
+
boundary: boundaryElement || undefined,
|
|
5968
|
+
padding: 8,
|
|
5969
|
+
tether: tether,
|
|
5970
|
+
tetherOffset: tetherOffset
|
|
5971
|
+
};
|
|
5972
|
+
return [constrainSize && _extends({}, maxSizeModifier__default["default"], {
|
|
5973
|
+
options: detectOverflowOptions
|
|
5974
|
+
}), constrainSize && {
|
|
5975
|
+
name: 'applyMaxSize',
|
|
5976
|
+
enabled: true,
|
|
5977
|
+
phase: 'beforeWrite',
|
|
5978
|
+
requires: ['maxSize'],
|
|
5979
|
+
fn: function fn(_ref) {
|
|
5980
|
+
var state = _ref.state;
|
|
5981
|
+
var _state$modifiersData$ = state.modifiersData.maxSize,
|
|
5982
|
+
width = _state$modifiersData$.width,
|
|
5983
|
+
height = _state$modifiersData$.height;
|
|
5984
|
+
state.styles.popper = _extends({}, state.styles.popper, {
|
|
5985
|
+
maxWidth: width + "px",
|
|
5986
|
+
maxHeight: height + "px"
|
|
5987
|
+
});
|
|
5988
|
+
}
|
|
5989
|
+
}, arrow && {
|
|
5990
|
+
name: 'arrow',
|
|
5991
|
+
options: {
|
|
5992
|
+
element: arrowElement,
|
|
5993
|
+
padding: 4
|
|
5994
|
+
}
|
|
5995
|
+
}, (constrainSize || preventOverflow) && {
|
|
5996
|
+
name: 'preventOverflow',
|
|
5997
|
+
options: detectOverflowOptions
|
|
5998
|
+
}, {
|
|
5999
|
+
name: 'offset',
|
|
6000
|
+
options: {
|
|
6001
|
+
offset: [skidding, distance]
|
|
6002
|
+
}
|
|
6003
|
+
}, margins && {
|
|
6004
|
+
name: 'margins',
|
|
6005
|
+
enabled: true,
|
|
6006
|
+
phase: 'beforeRead',
|
|
6007
|
+
fn: function fn(_ref2) {
|
|
6008
|
+
var state = _ref2.state;
|
|
6009
|
+
var rects = state.rects;
|
|
6010
|
+
|
|
6011
|
+
if (rects.reference) {
|
|
6012
|
+
rects.reference.x += margins[3];
|
|
6013
|
+
rects.reference.y += margins[1];
|
|
6014
|
+
rects.reference.width -= margins[1] + margins[3];
|
|
6015
|
+
rects.reference.height -= margins[0] + margins[2];
|
|
6048
6016
|
}
|
|
6017
|
+
}
|
|
6018
|
+
}, {
|
|
6019
|
+
name: 'flip',
|
|
6020
|
+
options: {
|
|
6021
|
+
allowedAutoPlacements: allowedAutoPlacements,
|
|
6022
|
+
boundary: boundaryElement || undefined,
|
|
6023
|
+
fallbackPlacements: fallbackPlacements,
|
|
6024
|
+
padding: 8
|
|
6025
|
+
}
|
|
6026
|
+
}, matchReferenceWidth && {
|
|
6027
|
+
name: 'matchWidth',
|
|
6028
|
+
enabled: true,
|
|
6029
|
+
phase: 'beforeWrite',
|
|
6030
|
+
requires: ['computeStyles'],
|
|
6031
|
+
fn: function fn(_ref3) {
|
|
6032
|
+
var state = _ref3.state;
|
|
6033
|
+
var width = state.rects.reference.width;
|
|
6034
|
+
state.styles.popper.width = width + "px";
|
|
6035
|
+
},
|
|
6036
|
+
effect: function effect(_ref4) {
|
|
6037
|
+
var state = _ref4.state;
|
|
6038
|
+
var refElement = state.elements.reference;
|
|
6049
6039
|
|
|
6050
|
-
if (
|
|
6051
|
-
|
|
6040
|
+
if (refElement instanceof HTMLElement) {
|
|
6041
|
+
state.elements.popper.style.width = refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0) + "px";
|
|
6052
6042
|
}
|
|
6053
|
-
}
|
|
6054
|
-
|
|
6055
|
-
});
|
|
6043
|
+
}
|
|
6044
|
+
}].filter(Boolean);
|
|
6056
6045
|
}
|
|
6057
6046
|
|
|
6058
|
-
|
|
6059
|
-
var
|
|
6047
|
+
function usePopoverModifiers(props) {
|
|
6048
|
+
var allowedAutoPlacements = props.allowedAutoPlacements,
|
|
6049
|
+
arrow = props.arrow,
|
|
6050
|
+
arrowElement = props.arrowElement,
|
|
6051
|
+
boundaryElement = props.boundaryElement,
|
|
6052
|
+
constrainSize = props.constrainSize,
|
|
6053
|
+
distance = props.distance,
|
|
6054
|
+
fallbackPlacements = props.fallbackPlacements,
|
|
6055
|
+
margins = props.margins,
|
|
6056
|
+
matchReferenceWidth = props.matchReferenceWidth,
|
|
6057
|
+
open = props.open,
|
|
6058
|
+
preventOverflow = props.preventOverflow,
|
|
6059
|
+
skidding = props.skidding,
|
|
6060
|
+
tether = props.tether,
|
|
6061
|
+
tetherOffset = props.tetherOffset;
|
|
6062
|
+
return React.useMemo(function () {
|
|
6063
|
+
return getPopoverModifiers({
|
|
6064
|
+
allowedAutoPlacements: allowedAutoPlacements,
|
|
6065
|
+
arrow: arrow,
|
|
6066
|
+
arrowElement: arrowElement,
|
|
6067
|
+
boundaryElement: boundaryElement,
|
|
6068
|
+
constrainSize: constrainSize,
|
|
6069
|
+
distance: distance,
|
|
6070
|
+
fallbackPlacements: fallbackPlacements,
|
|
6071
|
+
margins: margins,
|
|
6072
|
+
matchReferenceWidth: matchReferenceWidth,
|
|
6073
|
+
open: open,
|
|
6074
|
+
preventOverflow: preventOverflow,
|
|
6075
|
+
skidding: skidding,
|
|
6076
|
+
tether: tether,
|
|
6077
|
+
tetherOffset: tetherOffset
|
|
6078
|
+
});
|
|
6079
|
+
}, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
|
|
6080
|
+
}
|
|
6081
|
+
|
|
6082
|
+
var _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"];
|
|
6083
|
+
|
|
6084
|
+
var _templateObject$j, _templateObject2$e, _templateObject3$8;
|
|
6085
|
+
var Root$i = styled__default["default"](Layer)(function (_ref) {
|
|
6086
|
+
var $preventOverflow = _ref.$preventOverflow;
|
|
6087
|
+
return styled.css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n display: flex;\n flex-direction: column;\n max-width: calc(100% - 16px);\n\n & > * {\n min-height: 0;\n }\n\n /* Hide the popover when the reference element is out of bounds */\n ", "\n "])), $preventOverflow && styled.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n &[data-popper-reference-hidden='true'] {\n display: none;\n }\n "]))));
|
|
6088
|
+
});
|
|
6089
|
+
var PopoverCard = styled__default["default"](Card)(function (_ref2) {
|
|
6090
|
+
var $constrainSize = _ref2.$constrainSize;
|
|
6091
|
+
return styled.css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n flex: 1;\n max-height: ", ";\n pointer-events: all;\n\n && {\n display: flex;\n }\n\n flex-direction: column;\n\n & > * {\n min-height: 0;\n }\n\n ", "\n "])), $constrainSize && '100%', responsiveContainerWidthStyle);
|
|
6092
|
+
});
|
|
6093
|
+
/**
|
|
6094
|
+
* @public
|
|
6095
|
+
*/
|
|
6096
|
+
|
|
6097
|
+
var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
|
|
6098
|
+
var _theme$sanity$layer;
|
|
6060
6099
|
|
|
6061
|
-
var theme = useTheme();
|
|
6062
6100
|
var boundaryElementContext = useBoundaryElement();
|
|
6101
|
+
var theme = useTheme();
|
|
6063
6102
|
|
|
6064
6103
|
var margins = props.__unstable_margins,
|
|
6104
|
+
allowedAutoPlacements = props.allowedAutoPlacements,
|
|
6065
6105
|
_props$arrow = props.arrow,
|
|
6066
|
-
|
|
6106
|
+
arrow = _props$arrow === void 0 ? true : _props$arrow,
|
|
6067
6107
|
_props$boundaryElemen = props.boundaryElement,
|
|
6068
|
-
|
|
6069
|
-
|
|
6070
|
-
_props$constrainSize = props.constrainSize,
|
|
6071
|
-
constrainSize = _props$constrainSize === void 0 ? false : _props$constrainSize,
|
|
6108
|
+
boundaryElementProp = _props$boundaryElemen === void 0 ? boundaryElementContext.element : _props$boundaryElemen,
|
|
6109
|
+
child = props.children,
|
|
6072
6110
|
content = props.content,
|
|
6111
|
+
constrainSize = props.constrainSize,
|
|
6073
6112
|
disabled = props.disabled,
|
|
6074
6113
|
fallbackPlacements = props.fallbackPlacements,
|
|
6075
|
-
|
|
6076
|
-
open =
|
|
6077
|
-
|
|
6078
|
-
overflow = _props$overflow === void 0 ? props.constrainSize ? 'auto' : undefined : _props$overflow,
|
|
6079
|
-
paddingProp = props.padding,
|
|
6114
|
+
_props$open = props.open,
|
|
6115
|
+
open = _props$open === void 0 ? false : _props$open,
|
|
6116
|
+
padding = props.padding,
|
|
6080
6117
|
_props$placement = props.placement,
|
|
6081
|
-
|
|
6082
|
-
portal = props.portal,
|
|
6083
|
-
_props$
|
|
6084
|
-
preventOverflow =
|
|
6118
|
+
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
|
6119
|
+
_props$portal = props.portal,
|
|
6120
|
+
portalProp = _props$portal === void 0 ? false : _props$portal,
|
|
6121
|
+
preventOverflow = props.preventOverflow,
|
|
6085
6122
|
_props$radius = props.radius,
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6123
|
+
radius = _props$radius === void 0 ? 3 : _props$radius,
|
|
6124
|
+
referenceElementProp = props.referenceElement,
|
|
6125
|
+
matchReferenceWidth = props.matchReferenceWidth,
|
|
6089
6126
|
_props$shadow = props.shadow,
|
|
6090
|
-
|
|
6127
|
+
shadow = _props$shadow === void 0 ? 3 : _props$shadow,
|
|
6128
|
+
scheme = props.scheme,
|
|
6129
|
+
_props$style = props.style,
|
|
6130
|
+
style = _props$style === void 0 ? EMPTY_RECORD : _props$style,
|
|
6131
|
+
tether = props.tether,
|
|
6132
|
+
tetherOffset = props.tetherOffset,
|
|
6091
6133
|
_props$tone = props.tone,
|
|
6092
6134
|
tone = _props$tone === void 0 ? 'inherit' : _props$tone,
|
|
6093
6135
|
_props$width = props.width,
|
|
6094
|
-
widthProp = _props$width === void 0 ?
|
|
6136
|
+
widthProp = _props$width === void 0 ? 0 : _props$width,
|
|
6095
6137
|
_props$zOffset = props.zOffset,
|
|
6096
|
-
|
|
6138
|
+
zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset : _props$zOffset,
|
|
6097
6139
|
restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
|
|
6098
6140
|
|
|
6099
|
-
var boundarySize = (_useElementSize = useElementSize(boundaryElement)) == null ? void 0 : _useElementSize.border;
|
|
6100
|
-
var padding = useArrayProp(paddingProp);
|
|
6101
|
-
var radius = useArrayProp(radiusProp);
|
|
6102
|
-
var shadow = useArrayProp(shadowProp);
|
|
6103
|
-
var width = useArrayProp(widthProp);
|
|
6104
|
-
var zOffset = useArrayProp(zOffsetProp);
|
|
6105
|
-
|
|
6106
|
-
var _useState = React.useState(undefined),
|
|
6107
|
-
availableWidth = _useState[0],
|
|
6108
|
-
setAvailableWidth = _useState[1];
|
|
6109
|
-
|
|
6110
|
-
var _useState2 = React.useState(undefined),
|
|
6111
|
-
availableHeight = _useState2[0],
|
|
6112
|
-
setAvailableHeight = _useState2[1];
|
|
6113
|
-
|
|
6114
|
-
var _useState3 = React.useState(undefined),
|
|
6115
|
-
referenceWidth = _useState3[0],
|
|
6116
|
-
setReferenceWidth = _useState3[1];
|
|
6117
|
-
|
|
6118
6141
|
var forwardedRef = useForwardedRef(ref);
|
|
6119
|
-
var
|
|
6120
|
-
var rootBoundary = 'viewport';
|
|
6121
|
-
var middleware = React.useMemo(function () {
|
|
6122
|
-
var ret = []; // Flip the floating element when leaving the boundary box
|
|
6123
|
-
|
|
6124
|
-
if (constrainSize || preventOverflow) {
|
|
6125
|
-
ret.push(reactDom.flip({
|
|
6126
|
-
boundary: boundaryElement || undefined,
|
|
6127
|
-
fallbackPlacements: fallbackPlacements,
|
|
6128
|
-
padding: 8,
|
|
6129
|
-
rootBoundary: rootBoundary
|
|
6130
|
-
}));
|
|
6131
|
-
} // Track sizes
|
|
6132
|
-
|
|
6133
|
-
|
|
6134
|
-
ret.push(size({
|
|
6135
|
-
boundaryElement: boundaryElement,
|
|
6136
|
-
constrainSize: constrainSize,
|
|
6137
|
-
matchReferenceWidth: matchReferenceWidthProp,
|
|
6138
|
-
setAvailableHeight: setAvailableHeight,
|
|
6139
|
-
setAvailableWidth: setAvailableWidth,
|
|
6140
|
-
setReferenceWidth: setReferenceWidth
|
|
6141
|
-
})); // Define distance between reference and floating element
|
|
6142
|
-
|
|
6143
|
-
ret.push(reactDom.offset({
|
|
6144
|
-
mainAxis: arrowProp ? 4 : 0
|
|
6145
|
-
})); // Shift the popover so its sits with the boundary eleement
|
|
6146
|
-
|
|
6147
|
-
if (preventOverflow) {
|
|
6148
|
-
ret.push(reactDom.shift({
|
|
6149
|
-
boundary: boundaryElement || undefined,
|
|
6150
|
-
rootBoundary: rootBoundary,
|
|
6151
|
-
padding: 8
|
|
6152
|
-
}));
|
|
6153
|
-
} // Place arrow
|
|
6154
|
-
|
|
6142
|
+
var portal = usePortal();
|
|
6155
6143
|
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
padding: 4
|
|
6160
|
-
}));
|
|
6161
|
-
}
|
|
6144
|
+
var _useState = React.useState(null),
|
|
6145
|
+
referenceElement = _useState[0],
|
|
6146
|
+
setReferenceElement = _useState[1];
|
|
6162
6147
|
|
|
6163
|
-
|
|
6164
|
-
|
|
6148
|
+
var _useState2 = React.useState(null),
|
|
6149
|
+
popperElement = _useState2[0],
|
|
6150
|
+
setPopperElement = _useState2[1];
|
|
6165
6151
|
|
|
6166
|
-
var
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
}
|
|
6188
|
-
var
|
|
6189
|
-
|
|
6190
|
-
|
|
6152
|
+
var _useState3 = React.useState(null),
|
|
6153
|
+
arrowElement = _useState3[0],
|
|
6154
|
+
setArrowElement = _useState3[1];
|
|
6155
|
+
|
|
6156
|
+
var popperReferenceElement = referenceElementProp || referenceElement;
|
|
6157
|
+
var width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp);
|
|
6158
|
+
var modifiers = usePopoverModifiers({
|
|
6159
|
+
allowedAutoPlacements: allowedAutoPlacements,
|
|
6160
|
+
arrow: arrow,
|
|
6161
|
+
arrowElement: arrowElement,
|
|
6162
|
+
boundaryElement: boundaryElementProp || portal.boundaryElement,
|
|
6163
|
+
constrainSize: constrainSize,
|
|
6164
|
+
distance: arrow ? 4 : 0,
|
|
6165
|
+
fallbackPlacements: fallbackPlacements,
|
|
6166
|
+
margins: margins,
|
|
6167
|
+
matchReferenceWidth: matchReferenceWidth,
|
|
6168
|
+
open: open,
|
|
6169
|
+
preventOverflow: preventOverflow,
|
|
6170
|
+
skidding: 0,
|
|
6171
|
+
tether: tether,
|
|
6172
|
+
tetherOffset: tetherOffset
|
|
6173
|
+
});
|
|
6174
|
+
var popper = reactPopper.usePopper(popperReferenceElement, popperElement, {
|
|
6175
|
+
placement: placement,
|
|
6176
|
+
modifiers: modifiers
|
|
6177
|
+
});
|
|
6178
|
+
var attributes = popper.attributes,
|
|
6179
|
+
forceUpdate = popper.forceUpdate,
|
|
6180
|
+
styles = popper.styles;
|
|
6181
|
+
var setRef = React.useCallback(function (el) {
|
|
6182
|
+
var childRef = child.ref;
|
|
6183
|
+
setReferenceElement(el);
|
|
6191
6184
|
|
|
6192
6185
|
if (typeof childRef === 'function') {
|
|
6193
|
-
childRef(
|
|
6186
|
+
childRef(el);
|
|
6194
6187
|
} else if (childRef) {
|
|
6195
|
-
childRef.current =
|
|
6188
|
+
childRef.current = el;
|
|
6196
6189
|
}
|
|
6197
|
-
}, [
|
|
6198
|
-
var
|
|
6199
|
-
|
|
6200
|
-
|
|
6201
|
-
|
|
6202
|
-
|
|
6203
|
-
|
|
6190
|
+
}, [child]);
|
|
6191
|
+
var setRootRef = React.useCallback(function (el) {
|
|
6192
|
+
setPopperElement(el);
|
|
6193
|
+
forwardedRef.current = el;
|
|
6194
|
+
}, [forwardedRef]);
|
|
6195
|
+
var popoverStyle = React.useMemo(function () {
|
|
6196
|
+
return _extends({}, style, styles.popper);
|
|
6197
|
+
}, [style, styles]);
|
|
6198
|
+
var updateTimeoutRef = React.useRef(null);
|
|
6204
6199
|
React.useEffect(function () {
|
|
6205
|
-
if (
|
|
6206
|
-
|
|
6200
|
+
if (updateTimeoutRef.current) {
|
|
6201
|
+
clearTimeout(updateTimeoutRef.current);
|
|
6202
|
+
updateTimeoutRef.current = null;
|
|
6203
|
+
}
|
|
6204
|
+
|
|
6205
|
+
updateTimeoutRef.current = setTimeout(function () {
|
|
6206
|
+
if (forceUpdate) {
|
|
6207
|
+
try {
|
|
6208
|
+
forceUpdate();
|
|
6209
|
+
} catch (_) {// ignore caught error
|
|
6210
|
+
}
|
|
6211
|
+
}
|
|
6212
|
+
}, 0);
|
|
6213
|
+
}, [content, forceUpdate, open, popperReferenceElement]);
|
|
6207
6214
|
|
|
6208
6215
|
if (disabled) {
|
|
6209
|
-
return
|
|
6216
|
+
return child || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
6210
6217
|
}
|
|
6211
6218
|
|
|
6212
|
-
var
|
|
6219
|
+
var node = /*#__PURE__*/React__default["default"].createElement(Root$i, _extends({
|
|
6220
|
+
"data-ui": "Popover"
|
|
6221
|
+
}, restProps, {
|
|
6222
|
+
"$preventOverflow": preventOverflow,
|
|
6223
|
+
ref: setRootRef,
|
|
6224
|
+
style: popoverStyle,
|
|
6213
6225
|
zOffset: zOffset
|
|
6214
|
-
}, /*#__PURE__*/React__default["default"].createElement(PopoverCard,
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
arrowX: arrowX,
|
|
6219
|
-
arrowY: arrowY,
|
|
6220
|
-
availableWidth: constrainSize ? availableWidth : undefined,
|
|
6221
|
-
availableHeight: constrainSize ? availableHeight : undefined,
|
|
6222
|
-
boundaryWidth: boundarySize == null ? void 0 : boundarySize.width,
|
|
6223
|
-
overflow: overflow,
|
|
6226
|
+
}, attributes.popper), /*#__PURE__*/React__default["default"].createElement(PopoverCard, {
|
|
6227
|
+
"$constrainSize": constrainSize,
|
|
6228
|
+
"$width": width,
|
|
6229
|
+
"data-ui": "PopoverCard",
|
|
6224
6230
|
padding: padding,
|
|
6225
|
-
placement: placement,
|
|
6226
6231
|
radius: radius,
|
|
6227
|
-
ref: setFloating,
|
|
6228
|
-
referenceWidth: matchReferenceWidthProp ? referenceWidth : undefined,
|
|
6229
6232
|
scheme: scheme,
|
|
6230
6233
|
shadow: shadow,
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
|
|
6235
|
-
width: width
|
|
6234
|
+
tone: tone
|
|
6235
|
+
}, arrow && /*#__PURE__*/React__default["default"].createElement(PopoverArrow, {
|
|
6236
|
+
ref: setArrowElement,
|
|
6237
|
+
style: styles.arrow
|
|
6236
6238
|
}), content));
|
|
6237
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6238
|
-
|
|
6239
|
-
}
|
|
6240
|
-
|
|
6241
|
-
|
|
6239
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, child && !referenceElementProp ? /*#__PURE__*/React.cloneElement(child, {
|
|
6240
|
+
ref: setRef
|
|
6241
|
+
}) : child || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portalProp && /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
6242
|
+
__unstable_name: typeof portalProp === 'string' ? portalProp : undefined
|
|
6243
|
+
}, node), !portalProp && node));
|
|
6244
|
+
});
|
|
6242
6245
|
|
|
6243
6246
|
var _templateObject$i, _templateObject2$d;
|
|
6244
6247
|
function radioBaseStyle() {
|
|
@@ -6588,6 +6591,7 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
|
|
|
6588
6591
|
}, restProps, {
|
|
6589
6592
|
"$fontSize": useArrayProp(fontSize),
|
|
6590
6593
|
"$padding": useArrayProp(padding),
|
|
6594
|
+
"$scheme": rootTheme.scheme,
|
|
6591
6595
|
"$space": useArrayProp(0),
|
|
6592
6596
|
"$tone": rootTheme.tone,
|
|
6593
6597
|
"$weight": weight,
|
|
@@ -6596,6 +6600,7 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
|
|
|
6596
6600
|
})), /*#__PURE__*/React__default["default"].createElement(Presentation$1, {
|
|
6597
6601
|
"$border": border,
|
|
6598
6602
|
"$radius": useArrayProp(radius),
|
|
6603
|
+
"$scheme": rootTheme.scheme,
|
|
6599
6604
|
"$tone": rootTheme.tone,
|
|
6600
6605
|
"data-tone": rootTheme.tone
|
|
6601
6606
|
})));
|
|
@@ -6697,7 +6702,9 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
|
|
|
6697
6702
|
"$hasPrefix": $hasPrefix,
|
|
6698
6703
|
"$hasSuffix": $hasSuffix,
|
|
6699
6704
|
"$radius": radius,
|
|
6705
|
+
"$scheme": rootTheme.scheme,
|
|
6700
6706
|
"$tone": rootTheme.tone,
|
|
6707
|
+
"data-scheme": rootTheme.scheme,
|
|
6701
6708
|
"data-tone": rootTheme.tone
|
|
6702
6709
|
}, icon && /*#__PURE__*/React__default["default"].createElement(LeftBox, {
|
|
6703
6710
|
padding: padding
|
|
@@ -6708,7 +6715,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
|
|
|
6708
6715
|
}, /*#__PURE__*/React__default["default"].createElement(Text, {
|
|
6709
6716
|
size: fontSize
|
|
6710
6717
|
}, /*#__PURE__*/React.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && /*#__PURE__*/React.createElement(iconRight))));
|
|
6711
|
-
}, [border, fontSize, icon, iconRight, padding, radius, rootTheme
|
|
6718
|
+
}, [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
|
|
6712
6719
|
|
|
6713
6720
|
var clearButtonBoxPadding = React.useMemo(function () {
|
|
6714
6721
|
return padding.map(function (v) {
|
|
@@ -6763,12 +6770,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
|
|
|
6763
6770
|
tone: rootTheme.tone
|
|
6764
6771
|
}, prefixNode, /*#__PURE__*/React__default["default"].createElement(InputRoot, null, /*#__PURE__*/React__default["default"].createElement(Input, _extends({
|
|
6765
6772
|
"data-as": "input",
|
|
6773
|
+
"data-scheme": rootTheme.scheme,
|
|
6766
6774
|
"data-tone": rootTheme.tone
|
|
6767
6775
|
}, restProps, {
|
|
6768
6776
|
"$fontSize": fontSize,
|
|
6769
6777
|
"$iconLeft": $hasIcon,
|
|
6770
6778
|
"$iconRight": $hasIconRight || $hasClearButton,
|
|
6771
6779
|
"$padding": padding,
|
|
6780
|
+
"$scheme": rootTheme.scheme,
|
|
6772
6781
|
"$space": space,
|
|
6773
6782
|
"$tone": rootTheme.tone,
|
|
6774
6783
|
"$weight": weight,
|
|
@@ -6780,15 +6789,13 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
|
|
|
6780
6789
|
});
|
|
6781
6790
|
|
|
6782
6791
|
var _templateObject$d, _templateObject2$9, _templateObject3$4;
|
|
6783
|
-
var Root$b = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n
|
|
6792
|
+
var Root$b = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 15px;\n height: 15px;\n fill: none;\n\n :empty + & {\n display: none;\n }\n\n & > svg {\n &:not([hidden]) {\n display: block;\n }\n transform-origin: 7.5px 7.5px;\n }\n\n [data-popper-placement^='top'] > div > & {\n bottom: -15px;\n }\n\n [data-popper-placement^='right'] > div > & {\n left: -15px;\n\n & > svg {\n transform: rotate(90deg);\n }\n }\n\n [data-popper-placement^='left'] > div > & {\n right: -15px;\n\n & > svg {\n transform: rotate(-90deg);\n }\n }\n\n [data-popper-placement^='bottom'] > div > & {\n top: -15px;\n\n & > svg {\n transform: rotate(180deg);\n }\n }\n"])));
|
|
6784
6793
|
var Border = styled__default["default"].path(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n fill: var(--card-shadow-outline-color);\n"])));
|
|
6785
6794
|
var Shape = styled__default["default"].path(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n fill: var(--card-bg-color);\n"])));
|
|
6786
6795
|
var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, ref) {
|
|
6787
6796
|
var restProps = _extends({}, props);
|
|
6788
6797
|
|
|
6789
|
-
return /*#__PURE__*/React__default["default"].createElement(Root$b, _extends({
|
|
6790
|
-
"data-ui": "Tooltip__arrow"
|
|
6791
|
-
}, restProps, {
|
|
6798
|
+
return /*#__PURE__*/React__default["default"].createElement(Root$b, _extends({}, restProps, {
|
|
6792
6799
|
ref: ref
|
|
6793
6800
|
}), /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
6794
6801
|
width: "15",
|
|
@@ -6801,7 +6808,7 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, re
|
|
|
6801
6808
|
})));
|
|
6802
6809
|
});
|
|
6803
6810
|
|
|
6804
|
-
var _excluded$g = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "
|
|
6811
|
+
var _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
|
|
6805
6812
|
|
|
6806
6813
|
var _templateObject$c;
|
|
6807
6814
|
var Root$a = styled__default["default"](Layer)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n"])));
|
|
@@ -6810,23 +6817,22 @@ var Root$a = styled__default["default"](Layer)(_templateObject$c || (_templateOb
|
|
|
6810
6817
|
*/
|
|
6811
6818
|
|
|
6812
6819
|
var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
6813
|
-
var _theme$sanity$layer
|
|
6820
|
+
var _theme$sanity$layer;
|
|
6814
6821
|
|
|
6815
6822
|
var boundaryElementContext = useBoundaryElement();
|
|
6816
6823
|
var theme = useTheme();
|
|
6817
6824
|
|
|
6818
|
-
var
|
|
6825
|
+
var allowedAutoPlacements = props.allowedAutoPlacements,
|
|
6826
|
+
_props$boundaryElemen = props.boundaryElement,
|
|
6819
6827
|
boundaryElement = _props$boundaryElemen === void 0 ? boundaryElementContext == null ? void 0 : boundaryElementContext.element : _props$boundaryElemen,
|
|
6820
|
-
|
|
6828
|
+
children = props.children,
|
|
6821
6829
|
content = props.content,
|
|
6822
6830
|
disabled = props.disabled,
|
|
6823
6831
|
fallbackPlacementsProp = props.fallbackPlacements,
|
|
6824
6832
|
_props$placement = props.placement,
|
|
6825
|
-
|
|
6833
|
+
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
|
6826
6834
|
portal = props.portal,
|
|
6827
6835
|
scheme = props.scheme,
|
|
6828
|
-
_props$shadow = props.shadow,
|
|
6829
|
-
shadow = _props$shadow === void 0 ? 2 : _props$shadow,
|
|
6830
6836
|
_props$zOffset = props.zOffset,
|
|
6831
6837
|
zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset : _props$zOffset,
|
|
6832
6838
|
restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
|
|
@@ -6838,73 +6844,47 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
|
6838
6844
|
referenceElement = _useState[0],
|
|
6839
6845
|
setReferenceElement = _useState[1];
|
|
6840
6846
|
|
|
6841
|
-
var
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
var ret = []; // Flip the floating element when leaving the boundary box
|
|
6845
|
-
|
|
6846
|
-
ret.push(reactDom.flip({
|
|
6847
|
-
boundary: boundaryElement || undefined,
|
|
6848
|
-
fallbackPlacements: fallbackPlacements,
|
|
6849
|
-
padding: 4,
|
|
6850
|
-
rootBoundary: rootBoundary
|
|
6851
|
-
})); // Define distance between reference and floating element
|
|
6852
|
-
|
|
6853
|
-
ret.push(reactDom.offset({
|
|
6854
|
-
mainAxis: 3
|
|
6855
|
-
})); // Shift the tooltip so its sits with the boundary eleement
|
|
6856
|
-
|
|
6857
|
-
ret.push(reactDom.shift({
|
|
6858
|
-
boundary: boundaryElement || undefined,
|
|
6859
|
-
rootBoundary: rootBoundary,
|
|
6860
|
-
padding: 4
|
|
6861
|
-
})); // Place arrow
|
|
6847
|
+
var _useState2 = React.useState(null),
|
|
6848
|
+
popperElement = _useState2[0],
|
|
6849
|
+
setPopperElement = _useState2[1];
|
|
6862
6850
|
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
}));
|
|
6867
|
-
return ret;
|
|
6868
|
-
}, [boundaryElement, fallbackPlacements]);
|
|
6851
|
+
var _useState3 = React.useState(null),
|
|
6852
|
+
arrowElement = _useState3[0],
|
|
6853
|
+
setArrowElement = _useState3[1];
|
|
6869
6854
|
|
|
6870
|
-
var
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
bottom: undefined
|
|
6900
|
-
};
|
|
6901
|
-
if (staticSide) style[staticSide] = -15;
|
|
6902
|
-
return style;
|
|
6903
|
-
}, [arrowX, arrowY, staticSide]);
|
|
6855
|
+
var popper = reactPopper.usePopper(referenceElement, popperElement, {
|
|
6856
|
+
placement: placement,
|
|
6857
|
+
modifiers: [{
|
|
6858
|
+
name: 'arrow',
|
|
6859
|
+
options: {
|
|
6860
|
+
element: arrowElement,
|
|
6861
|
+
padding: 4
|
|
6862
|
+
}
|
|
6863
|
+
}, {
|
|
6864
|
+
name: 'preventOverflow',
|
|
6865
|
+
options: {
|
|
6866
|
+
altAxis: true,
|
|
6867
|
+
boundary: boundaryElement || undefined,
|
|
6868
|
+
padding: 4
|
|
6869
|
+
}
|
|
6870
|
+
}, {
|
|
6871
|
+
name: 'offset',
|
|
6872
|
+
options: {
|
|
6873
|
+
offset: [0, 3]
|
|
6874
|
+
}
|
|
6875
|
+
}, {
|
|
6876
|
+
name: 'flip',
|
|
6877
|
+
options: {
|
|
6878
|
+
allowedAutoPlacements: allowedAutoPlacements,
|
|
6879
|
+
fallbackPlacements: fallbackPlacements
|
|
6880
|
+
}
|
|
6881
|
+
}]
|
|
6882
|
+
});
|
|
6883
|
+
var forceUpdate = popper.forceUpdate;
|
|
6904
6884
|
|
|
6905
|
-
var
|
|
6906
|
-
isOpen =
|
|
6907
|
-
setIsOpen =
|
|
6885
|
+
var _useState4 = React.useState(false),
|
|
6886
|
+
isOpen = _useState4[0],
|
|
6887
|
+
setIsOpen = _useState4[1];
|
|
6908
6888
|
|
|
6909
6889
|
var handleBlur = React.useCallback(function () {
|
|
6910
6890
|
return setIsOpen(false);
|
|
@@ -6938,7 +6918,23 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
|
6938
6918
|
return function () {
|
|
6939
6919
|
window.removeEventListener('mousemove', handleWindowMouseMove);
|
|
6940
6920
|
};
|
|
6941
|
-
}, [isOpen, referenceElement]);
|
|
6921
|
+
}, [isOpen, referenceElement]);
|
|
6922
|
+
var updateTimeoutRef = React.useRef(null);
|
|
6923
|
+
React.useEffect(function () {
|
|
6924
|
+
if (updateTimeoutRef.current) {
|
|
6925
|
+
clearTimeout(updateTimeoutRef.current);
|
|
6926
|
+
updateTimeoutRef.current = null;
|
|
6927
|
+
}
|
|
6928
|
+
|
|
6929
|
+
updateTimeoutRef.current = setTimeout(function () {
|
|
6930
|
+
if (forceUpdate) {
|
|
6931
|
+
try {
|
|
6932
|
+
forceUpdate();
|
|
6933
|
+
} catch (_) {// ignore caught error
|
|
6934
|
+
}
|
|
6935
|
+
}
|
|
6936
|
+
}, 0);
|
|
6937
|
+
}, [forceUpdate, content]); // Close when `disabled` changes to `true`
|
|
6942
6938
|
|
|
6943
6939
|
React.useEffect(function () {
|
|
6944
6940
|
if (disabled) setIsOpen(false);
|
|
@@ -6946,61 +6942,40 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
|
|
|
6946
6942
|
|
|
6947
6943
|
React.useEffect(function () {
|
|
6948
6944
|
if (!content) setIsOpen(false);
|
|
6949
|
-
}, [content]);
|
|
6945
|
+
}, [content]);
|
|
6950
6946
|
|
|
6951
|
-
|
|
6952
|
-
|
|
6953
|
-
|
|
6954
|
-
|
|
6955
|
-
|
|
6956
|
-
|
|
6957
|
-
|
|
6958
|
-
var
|
|
6959
|
-
|
|
6960
|
-
|
|
6961
|
-
|
|
6962
|
-
|
|
6963
|
-
|
|
6964
|
-
|
|
6965
|
-
|
|
6966
|
-
|
|
6967
|
-
childRef.current = node;
|
|
6968
|
-
} // childRef.current = node
|
|
6969
|
-
|
|
6970
|
-
|
|
6971
|
-
setReferenceElement(node);
|
|
6972
|
-
}, [childRef]);
|
|
6973
|
-
var child = React.useMemo(function () {
|
|
6974
|
-
if (!childProp) return null;
|
|
6975
|
-
return /*#__PURE__*/React.cloneElement(childProp, {
|
|
6976
|
-
onBlur: handleBlur,
|
|
6977
|
-
onFocus: handleFocus,
|
|
6978
|
-
onMouseEnter: handleMouseEnter,
|
|
6979
|
-
onMouseLeave: handleMouseLeave,
|
|
6980
|
-
ref: setReference
|
|
6981
|
-
});
|
|
6982
|
-
}, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
|
|
6983
|
-
if (!child) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
6984
|
-
if (disabled) return child;
|
|
6985
|
-
var root = /*#__PURE__*/React__default["default"].createElement(Root$a, _extends({
|
|
6947
|
+
var setRef = function setRef(el) {
|
|
6948
|
+
setPopperElement(el);
|
|
6949
|
+
forwardedRef.current = el;
|
|
6950
|
+
};
|
|
6951
|
+
|
|
6952
|
+
if (!children) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
6953
|
+
if (disabled) return children;
|
|
6954
|
+
var referenceProps = {
|
|
6955
|
+
onBlur: handleBlur,
|
|
6956
|
+
onFocus: handleFocus,
|
|
6957
|
+
onMouseEnter: handleMouseEnter,
|
|
6958
|
+
onMouseLeave: handleMouseLeave,
|
|
6959
|
+
ref: setReferenceElement
|
|
6960
|
+
};
|
|
6961
|
+
var referenceNode = /*#__PURE__*/React.cloneElement(children, referenceProps);
|
|
6962
|
+
var popperNode = /*#__PURE__*/React__default["default"].createElement(Root$a, _extends({
|
|
6986
6963
|
"data-ui": "Tooltip"
|
|
6987
|
-
}, restProps, {
|
|
6988
|
-
ref:
|
|
6989
|
-
style:
|
|
6964
|
+
}, restProps, popper.attributes.popper, {
|
|
6965
|
+
ref: setRef,
|
|
6966
|
+
style: popper.styles.popper,
|
|
6990
6967
|
zOffset: zOffset
|
|
6991
6968
|
}), /*#__PURE__*/React__default["default"].createElement(Card, {
|
|
6992
|
-
"data-ui": "Tooltip__card",
|
|
6993
|
-
"data-placement": placement,
|
|
6994
6969
|
radius: 2,
|
|
6995
6970
|
scheme: scheme,
|
|
6996
|
-
shadow:
|
|
6971
|
+
shadow: 3
|
|
6997
6972
|
}, content, /*#__PURE__*/React__default["default"].createElement(TooltipArrow, {
|
|
6998
|
-
ref:
|
|
6999
|
-
style:
|
|
6973
|
+
ref: setArrowElement,
|
|
6974
|
+
style: popper.styles.arrow
|
|
7000
6975
|
})));
|
|
7001
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6976
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, referenceNode, isOpen && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portal && /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
7002
6977
|
__unstable_name: typeof portal === 'string' ? portal : undefined
|
|
7003
|
-
},
|
|
6978
|
+
}, popperNode), !portal && popperNode));
|
|
7004
6979
|
});
|
|
7005
6980
|
|
|
7006
6981
|
var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$2, _templateObject5$1;
|
|
@@ -7018,7 +6993,7 @@ var ListBox = styled__default["default"](Box)(_templateObject2$8 || (_templateOb
|
|
|
7018
6993
|
* @internal
|
|
7019
6994
|
*/
|
|
7020
6995
|
|
|
7021
|
-
var ResultsPopover = styled__default["default"](Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n &[data-popper-reference-hidden='true'] {\n display: none;\n }\n"])));
|
|
6996
|
+
var ResultsPopover = styled__default["default"](Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n & > div {\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n &[data-popper-reference-hidden='true'] {\n display: none;\n }\n"])));
|
|
7022
6997
|
var rotate = styled.keyframes(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
7023
6998
|
/**
|
|
7024
6999
|
* @internal
|
|
@@ -7134,17 +7109,17 @@ var AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'Hom
|
|
|
7134
7109
|
* @internal
|
|
7135
7110
|
*/
|
|
7136
7111
|
|
|
7137
|
-
var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1,
|
|
7112
|
+
var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
|
|
7138
7113
|
/**
|
|
7139
7114
|
* @internal
|
|
7140
7115
|
*/
|
|
7141
7116
|
|
|
7142
|
-
var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom';
|
|
7117
|
+
var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
|
|
7143
7118
|
/**
|
|
7144
7119
|
* @internal
|
|
7145
7120
|
*/
|
|
7146
7121
|
|
|
7147
|
-
var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['
|
|
7122
|
+
var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
|
|
7148
7123
|
|
|
7149
7124
|
var _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"];
|
|
7150
7125
|
|