@sanity/ui 1.9.0 → 1.9.1
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 +21 -37
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -36
- package/dist/index.js.map +1 -1
- package/package.json +4 -6
- package/src/primitives/tooltip/__workshop__/index.ts +10 -0
- package/src/primitives/tooltip/__workshop__/overflowingBoundary.tsx +53 -0
- package/src/primitives/tooltip/__workshop__/resizableBoundary.tsx +85 -0
- package/src/primitives/tooltip/constants.ts +1 -0
- package/src/primitives/tooltip/tooltip.tsx +10 -21
package/dist/index.js
CHANGED
|
@@ -6860,6 +6860,7 @@ function useDelayedState(initialState) {
|
|
|
6860
6860
|
}, []);
|
|
6861
6861
|
return [state, onStateChange];
|
|
6862
6862
|
}
|
|
6863
|
+
const DEFAULT_TOOLTIP_PADDING = 4;
|
|
6863
6864
|
const DEFAULT_FALLBACK_PLACEMENTS = {
|
|
6864
6865
|
top: ["bottom", "left", "right"],
|
|
6865
6866
|
"top-start": ["bottom-start", "left-start", "right-start"],
|
|
@@ -6943,7 +6944,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
|
|
|
6943
6944
|
value: __freeze$e(raw || cooked.slice())
|
|
6944
6945
|
}));
|
|
6945
6946
|
var _a$e;
|
|
6946
|
-
const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n pointer-events: none;\n"])));
|
|
6947
|
+
const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n pointer-events: none;\n // Note that 100vw doesn't exclude system scrollbars.\n // This should be sufficiently small enough to not trigger overflow-x scrollbars when portalled.\n max-width: calc(100vw - ", "px);\n"])), DEFAULT_TOOLTIP_PADDING * 10);
|
|
6947
6948
|
const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
6948
6949
|
var _a2, _b, _c, _d, _e;
|
|
6949
6950
|
const boundaryElementContext = useBoundaryElement();
|
|
@@ -6971,42 +6972,25 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
|
6971
6972
|
const middleware = react.useMemo(() => {
|
|
6972
6973
|
const ret = [];
|
|
6973
6974
|
ret.push(reactDom$1.flip({
|
|
6974
|
-
boundary: boundaryElement || void 0,
|
|
6975
|
+
boundary: portal ? void 0 : boundaryElement || void 0,
|
|
6975
6976
|
fallbackPlacements,
|
|
6976
|
-
padding:
|
|
6977
|
-
rootBoundary
|
|
6978
|
-
mainAxis: false
|
|
6977
|
+
padding: DEFAULT_TOOLTIP_PADDING,
|
|
6978
|
+
rootBoundary
|
|
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
|
-
|
|
6999
6983
|
ret.push(reactDom$1.shift({
|
|
7000
|
-
boundary: boundaryElement || void 0,
|
|
6984
|
+
boundary: portal ? void 0 : boundaryElement || void 0,
|
|
7001
6985
|
rootBoundary,
|
|
7002
|
-
padding:
|
|
6986
|
+
padding: DEFAULT_TOOLTIP_PADDING
|
|
7003
6987
|
}));
|
|
7004
6988
|
ret.push(reactDom$1.arrow({
|
|
7005
6989
|
element: arrowRef,
|
|
7006
6990
|
padding: 2
|
|
7007
6991
|
}));
|
|
7008
6992
|
return ret;
|
|
7009
|
-
}, [boundaryElement, fallbackPlacements]);
|
|
6993
|
+
}, [boundaryElement, fallbackPlacements, portal]);
|
|
7010
6994
|
const {
|
|
7011
6995
|
floatingStyles,
|
|
7012
6996
|
placement,
|
|
@@ -7306,10 +7290,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
|
|
|
7306
7290
|
query,
|
|
7307
7291
|
value
|
|
7308
7292
|
} = state;
|
|
7309
|
-
const defaultRenderOption = react.useCallback(
|
|
7293
|
+
const defaultRenderOption = react.useCallback(_ref22 => {
|
|
7310
7294
|
let {
|
|
7311
7295
|
value: value2
|
|
7312
|
-
} =
|
|
7296
|
+
} = _ref22;
|
|
7313
7297
|
return /* @__PURE__ */jsxRuntime.jsx(Card, {
|
|
7314
7298
|
"data-as": "button",
|
|
7315
7299
|
padding: paddingProp,
|
|
@@ -7762,10 +7746,10 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
|
|
|
7762
7746
|
}, itemIndex))
|
|
7763
7747
|
});
|
|
7764
7748
|
});
|
|
7765
|
-
function dialogStyle(
|
|
7749
|
+
function dialogStyle(_ref23) {
|
|
7766
7750
|
let {
|
|
7767
7751
|
theme
|
|
7768
|
-
} =
|
|
7752
|
+
} = _ref23;
|
|
7769
7753
|
const color = theme.sanity.color.base;
|
|
7770
7754
|
return {
|
|
7771
7755
|
"&:not([hidden])": {
|
|
@@ -8827,15 +8811,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
|
|
|
8827
8811
|
var _a$6, _b$3, _c$1, _d;
|
|
8828
8812
|
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"])));
|
|
8829
8813
|
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);
|
|
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"])),
|
|
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"])), _ref24 => {
|
|
8831
8815
|
let {
|
|
8832
8816
|
$visible
|
|
8833
|
-
} =
|
|
8817
|
+
} = _ref24;
|
|
8834
8818
|
return $visible ? 1 : 0;
|
|
8835
|
-
},
|
|
8819
|
+
}, _ref25 => {
|
|
8836
8820
|
let {
|
|
8837
8821
|
$animated
|
|
8838
|
-
} =
|
|
8822
|
+
} = _ref25;
|
|
8839
8823
|
return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n background-color: var(--card-skeleton-color-from);\n "])));
|
|
8840
8824
|
});
|
|
8841
8825
|
const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
|
|
@@ -8866,12 +8850,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
|
|
|
8866
8850
|
ref
|
|
8867
8851
|
});
|
|
8868
8852
|
});
|
|
8869
|
-
const Root$3 = styled__default.default(Skeleton)(
|
|
8853
|
+
const Root$3 = styled__default.default(Skeleton)(_ref26 => {
|
|
8870
8854
|
let {
|
|
8871
8855
|
$size,
|
|
8872
8856
|
$style,
|
|
8873
8857
|
theme
|
|
8874
|
-
} =
|
|
8858
|
+
} = _ref26;
|
|
8875
8859
|
const {
|
|
8876
8860
|
media
|
|
8877
8861
|
} = theme.sanity;
|
|
@@ -9218,12 +9202,12 @@ function ToastProvider(props) {
|
|
|
9218
9202
|
paddingY,
|
|
9219
9203
|
children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
|
|
9220
9204
|
initial: false,
|
|
9221
|
-
children: state.map(
|
|
9205
|
+
children: state.map(_ref27 => {
|
|
9222
9206
|
let {
|
|
9223
9207
|
dismiss,
|
|
9224
9208
|
id,
|
|
9225
9209
|
params
|
|
9226
|
-
} =
|
|
9210
|
+
} = _ref27;
|
|
9227
9211
|
return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
|
|
9228
9212
|
animate: {
|
|
9229
9213
|
opacity: 1,
|