@sanity/ui 1.9.1 → 1.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +37 -21
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +36 -20
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/primitives/tooltip/__workshop__/index.ts +0 -10
- package/src/primitives/tooltip/constants.ts +0 -1
- package/src/primitives/tooltip/tooltip.tsx +21 -10
- package/src/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -53
- package/src/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -85
package/dist/index.js
CHANGED
|
@@ -6860,7 +6860,6 @@ function useDelayedState(initialState) {
|
|
|
6860
6860
|
}, []);
|
|
6861
6861
|
return [state, onStateChange];
|
|
6862
6862
|
}
|
|
6863
|
-
const DEFAULT_TOOLTIP_PADDING = 4;
|
|
6864
6863
|
const DEFAULT_FALLBACK_PLACEMENTS = {
|
|
6865
6864
|
top: ["bottom", "left", "right"],
|
|
6866
6865
|
"top-start": ["bottom-start", "left-start", "right-start"],
|
|
@@ -6944,7 +6943,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
|
|
|
6944
6943
|
value: __freeze$e(raw || cooked.slice())
|
|
6945
6944
|
}));
|
|
6946
6945
|
var _a$e;
|
|
6947
|
-
const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n pointer-events: none;\n
|
|
6946
|
+
const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n pointer-events: none;\n"])));
|
|
6948
6947
|
const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
6949
6948
|
var _a2, _b, _c, _d, _e;
|
|
6950
6949
|
const boundaryElementContext = useBoundaryElement();
|
|
@@ -6972,25 +6971,42 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
|
6972
6971
|
const middleware = react.useMemo(() => {
|
|
6973
6972
|
const ret = [];
|
|
6974
6973
|
ret.push(reactDom$1.flip({
|
|
6975
|
-
boundary:
|
|
6974
|
+
boundary: boundaryElement || void 0,
|
|
6976
6975
|
fallbackPlacements,
|
|
6977
|
-
padding:
|
|
6978
|
-
rootBoundary
|
|
6976
|
+
padding: 4,
|
|
6977
|
+
rootBoundary,
|
|
6978
|
+
mainAxis: false
|
|
6979
6979
|
}));
|
|
6980
6980
|
ret.push(reactDom$1.offset({
|
|
6981
6981
|
mainAxis: 3
|
|
6982
6982
|
}));
|
|
6983
|
+
ret.push(reactDom$1.size({
|
|
6984
|
+
apply(_ref22) {
|
|
6985
|
+
let {
|
|
6986
|
+
availableWidth,
|
|
6987
|
+
availableHeight,
|
|
6988
|
+
elements
|
|
6989
|
+
} = _ref22;
|
|
6990
|
+
Object.assign(elements.floating.style, {
|
|
6991
|
+
maxWidth: "".concat(availableWidth - 4 * 2, "px"),
|
|
6992
|
+
// the padding is `4px`
|
|
6993
|
+
maxHeight: "".concat(availableHeight - 4 * 2, "px")
|
|
6994
|
+
// the padding is `4px`
|
|
6995
|
+
});
|
|
6996
|
+
}
|
|
6997
|
+
}));
|
|
6998
|
+
|
|
6983
6999
|
ret.push(reactDom$1.shift({
|
|
6984
|
-
boundary:
|
|
7000
|
+
boundary: boundaryElement || void 0,
|
|
6985
7001
|
rootBoundary,
|
|
6986
|
-
padding:
|
|
7002
|
+
padding: 4
|
|
6987
7003
|
}));
|
|
6988
7004
|
ret.push(reactDom$1.arrow({
|
|
6989
7005
|
element: arrowRef,
|
|
6990
7006
|
padding: 2
|
|
6991
7007
|
}));
|
|
6992
7008
|
return ret;
|
|
6993
|
-
}, [boundaryElement, fallbackPlacements
|
|
7009
|
+
}, [boundaryElement, fallbackPlacements]);
|
|
6994
7010
|
const {
|
|
6995
7011
|
floatingStyles,
|
|
6996
7012
|
placement,
|
|
@@ -7290,10 +7306,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
|
|
|
7290
7306
|
query,
|
|
7291
7307
|
value
|
|
7292
7308
|
} = state;
|
|
7293
|
-
const defaultRenderOption = react.useCallback(
|
|
7309
|
+
const defaultRenderOption = react.useCallback(_ref23 => {
|
|
7294
7310
|
let {
|
|
7295
7311
|
value: value2
|
|
7296
|
-
} =
|
|
7312
|
+
} = _ref23;
|
|
7297
7313
|
return /* @__PURE__ */jsxRuntime.jsx(Card, {
|
|
7298
7314
|
"data-as": "button",
|
|
7299
7315
|
padding: paddingProp,
|
|
@@ -7746,10 +7762,10 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
|
|
|
7746
7762
|
}, itemIndex))
|
|
7747
7763
|
});
|
|
7748
7764
|
});
|
|
7749
|
-
function dialogStyle(
|
|
7765
|
+
function dialogStyle(_ref24) {
|
|
7750
7766
|
let {
|
|
7751
7767
|
theme
|
|
7752
|
-
} =
|
|
7768
|
+
} = _ref24;
|
|
7753
7769
|
const color = theme.sanity.color.base;
|
|
7754
7770
|
return {
|
|
7755
7771
|
"&:not([hidden])": {
|
|
@@ -8811,15 +8827,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
|
|
|
8811
8827
|
var _a$6, _b$3, _c$1, _d;
|
|
8812
8828
|
const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n"])));
|
|
8813
8829
|
const animation = styled.css(_b$3 || (_b$3 = __template$6(["\n background-image: linear-gradient(\n to right,\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-to),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from)\n );\n background-position: 100%;\n background-size: 200% 100%;\n background-attachment: fixed;\n animation-name: ", ";\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-duration: 2000ms;\n"])), keyframe);
|
|
8814
|
-
const skeletonStyle = styled.css(_d || (_d = __template$6(["\n opacity: ", ";\n transition: opacity 200ms ease-in;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n ", "\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n background-color: var(--card-skeleton-color-from);\n }\n"])),
|
|
8830
|
+
const skeletonStyle = styled.css(_d || (_d = __template$6(["\n opacity: ", ";\n transition: opacity 200ms ease-in;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n ", "\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n background-color: var(--card-skeleton-color-from);\n }\n"])), _ref25 => {
|
|
8815
8831
|
let {
|
|
8816
8832
|
$visible
|
|
8817
|
-
} =
|
|
8833
|
+
} = _ref25;
|
|
8818
8834
|
return $visible ? 1 : 0;
|
|
8819
|
-
},
|
|
8835
|
+
}, _ref26 => {
|
|
8820
8836
|
let {
|
|
8821
8837
|
$animated
|
|
8822
|
-
} =
|
|
8838
|
+
} = _ref26;
|
|
8823
8839
|
return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n background-color: var(--card-skeleton-color-from);\n "])));
|
|
8824
8840
|
});
|
|
8825
8841
|
const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
|
|
@@ -8850,12 +8866,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
|
|
|
8850
8866
|
ref
|
|
8851
8867
|
});
|
|
8852
8868
|
});
|
|
8853
|
-
const Root$3 = styled__default.default(Skeleton)(
|
|
8869
|
+
const Root$3 = styled__default.default(Skeleton)(_ref27 => {
|
|
8854
8870
|
let {
|
|
8855
8871
|
$size,
|
|
8856
8872
|
$style,
|
|
8857
8873
|
theme
|
|
8858
|
-
} =
|
|
8874
|
+
} = _ref27;
|
|
8859
8875
|
const {
|
|
8860
8876
|
media
|
|
8861
8877
|
} = theme.sanity;
|
|
@@ -9202,12 +9218,12 @@ function ToastProvider(props) {
|
|
|
9202
9218
|
paddingY,
|
|
9203
9219
|
children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
|
|
9204
9220
|
initial: false,
|
|
9205
|
-
children: state.map(
|
|
9221
|
+
children: state.map(_ref28 => {
|
|
9206
9222
|
let {
|
|
9207
9223
|
dismiss,
|
|
9208
9224
|
id,
|
|
9209
9225
|
params
|
|
9210
|
-
} =
|
|
9226
|
+
} = _ref28;
|
|
9211
9227
|
return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
|
|
9212
9228
|
animate: {
|
|
9213
9229
|
opacity: 1,
|