@sanity/ui 1.8.2 → 1.9.0

package/dist/index.js

@@ -4761,7 +4761,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return styled.css(_b$i || (_b$i = __template$t(["\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(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return styled.css(_b$i || (_b$i = __template$t(["\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: -webkit-fill-available;\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(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -6378,7 +6378,7 @@ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
 }));
 var _a$j, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return styled.css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
@@ -7040,19 +7040,21 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   const closeDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp;
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  const handleIsOpenChange = react.useCallback(open => {
+  const handleIsOpenChange = react.useCallback((open, immediate) => {
     if (isInsideGroup) {
       if (open) {
-        delayGroupContext.setIsGroupActive(open, openDelay);
-        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        delayGroupContext.setIsGroupActive(open, groupedOpenDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay);
       } else {
         const minimumGroupDeactivateDelay = 200;
         const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
         delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
-        delayGroupContext.setOpenTooltipId(null, closeDelay);
+        delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay);
       }
     } else {
-      setIsOpen(open, open ? openDelay : closeDelay);
+      const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay;
+      setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
   const handleBlur = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
@@ -7081,6 +7083,18 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      if (event.key === "Escape") {
+        handleIsOpenChange(false, true);
+      }
+    }
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
@@ -8529,7 +8543,7 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
 }));
 var _a$7, _b$4;
 function selectableBaseStyle() {
-  return styled.css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\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      text-decoration: none;\n    }\n  "])));
+  return styled.css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\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: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a2, _b2;