reshaped 2.11.10 → 2.11.12

package/components/Alert/Alert.js

@@ -14,7 +14,7 @@ const Alert = (props) => {
     const applyActions = (content) => {
         if (!actionsSlot)
             return content;
-        return (_jsxs(View, { gap: 2, direction: inline ? "row" : "column", children: [inline ? _jsx(View.Item, { grow: true, children: content }) : content, actionsSlot && (_jsx(Text, { variant: "body-3", weight: "medium", children: _jsx(View, { direction: "row", gap: 3, children: actionsSlot }) }))] }));
+        return (_jsxs(View, { gap: inline ? 4 : 2, direction: inline ? "row" : "column", children: [inline ? _jsx(View.Item, { grow: true, children: content }) : content, actionsSlot && (_jsx(Text, { variant: "body-3", weight: "medium", children: _jsx(View, { direction: "row", gap: 3, children: actionsSlot }) }))] }));
     };
     return (_jsx(View, { direction: "row", gap: 3, padding: 4, bleed: bleed, borderRadius: "medium", borderColor: `${color}-faded`, backgroundColor: `${color}-faded`, className: className, attributes: Object.assign(Object.assign({}, attributes), { role: color === "critical" ? "alert" : "status" }), children: icon ? (_jsxs(_Fragment, { children: [_jsx(Icon, { svg: icon, size: 5, color: isNeutral ? "primary" : color }), _jsx(View.Item, { grow: true, children: applyActions(renderContent()) })] })) : (applyActions(renderContent())) }));
 };

package/components/Modal/Modal.js

@@ -39,7 +39,7 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, active, size, padding = 4, position = "center", transparentOverlay, overlayClassName, className, attributes, } = props;
+    const { children, onClose, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, overlayClassName, className, attributes, } = props;
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
@@ -162,7 +162,7 @@ const Modal = (props) => {
             const rootClassNames = classNames(s.root, className, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", Object.assign({}, attributes, { style: Object.assign(Object.assign(Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), responsiveVariables("--rs-modal-size", size)), { "--rs-modal-drag": Math.abs(dragDistance) < DRAG_THRESHOLD
                             ? "0px"
-                            : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog", ref: rootRef, onTransitionEnd: handleTransitionEnd, children: children })) }));
+                            : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"]), className: rootClassNames, "aria-modal": "true", role: "dialog", tabIndex: !autoFocus ? -1 : undefined, ref: rootRef, onTransitionEnd: handleTransitionEnd, children: children })) }));
         } }));
 };
 Modal.Title = ModalTitle;

package/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

package/components/Modal/Modal.types.d.ts

@@ -20,7 +20,9 @@ export type Props = {
     padding?: G.Responsive<number>;
     active?: boolean;
     transparentOverlay?: boolean;
+    autoFocus?: boolean;
     onClose?: () => void;
+    ariaLabel?: string;
     className?: G.ClassName;
     overlayClassName?: G.ClassName;
     attributes?: G.Attributes<"div", Props>;

package/components/Modal/tests/Modal.stories.d.ts

@@ -1,7 +1,8 @@
+import { type ModalProps } from "./..";
 declare const _default: {
     title: string;
     component: {
-        (props: import("./..").ModalProps): import("react").JSX.Element;
+        (props: ModalProps): import("react").JSX.Element;
         Title: (props: import("../Modal.types").TitleProps) => import("react").JSX.Element;
         Subtitle: (props: import("../Modal.types").SubtitleProps) => import("react").JSX.Element;
     };

package/components/Modal/tests/Modal.stories.js

@@ -114,6 +114,9 @@ export const edgeCases = () => {
     const menuModalToggle = useToggle();
     const scrollModalToggle = useToggle();
     return (<Example>
+			<Example.Item title="trap focus works with custom children components">
+				<Demo title="Modal title" autoFocus={false} active/>
+			</Example.Item>
 			<Example.Item title="trap focus works with custom children components">
 				<Demo title="Modal title">
 					<View gap={3} direction="row">

package/components/Overlay/Overlay.js

@@ -81,7 +81,9 @@ const Overlay = (props) => {
         if (!rendered || !contentRef.current)
             return;
         const trapFocus = new TrapFocus(contentRef.current);
-        trapFocus.trap();
+        trapFocus.trap({
+            initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
+        });
         return () => trapFocus.release();
     }, [rendered]);
     // Unlock scroll on unmount

package/components/Tooltip/Tooltip.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
 import Flyout from "../_private/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { id, text, children, onOpen, onClose, position = "bottom", active } = props;
+    if (!text)
+        return _jsx(_Fragment, { children: children({}) });
     return (_jsxs(Flyout, { id: id, active: active, position: position, onOpen: onOpen, onClose: onClose, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 export default Tooltip;

package/components/Tooltip/Tooltip.types.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active"> & Pick<FlyoutTriggerProps, "children"> & {
-    text: React.ReactNode;
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active"> & {
+    children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
+    text?: React.ReactNode;
 };

package/components/Tooltip/tests/Tooltip.stories.d.ts

@@ -10,3 +10,4 @@ declare const _default: {
 export default _default;
 export declare const position: () => import("react").JSX.Element;
 export declare const controlled: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;

package/components/Tooltip/tests/Tooltip.stories.js

@@ -13,6 +13,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Tooltip from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
+import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -28,6 +29,16 @@ const Demo = (props) => {
 			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
 		</Tooltip>);
 };
+const DemoResponsive = (props) => {
+    const { position } = props, rest = __rest(props, ["position"]);
+    const screenSize = useResponsiveClientValue({
+        s: "small",
+        m: "medium",
+    });
+    return (<Tooltip text={position} position={position} {...rest} active={screenSize === "small"}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
+};
 export const position = () => (<Example>
 		<Example.Item title="position: bottom-start">
 			<Demo position="bottom-start"/>
@@ -60,6 +71,14 @@ export const position = () => (<Example>
 	</Example>);
 export const controlled = () => (<Example>
 		<Example.Item title="active, controlled, position: bottom">
-			<Demo position="bottom" active/>
+			<Demo position="bottom"/>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="without text">
+			<Tooltip>{() => <Button>Button</Button>}</Tooltip>
+		</Example.Item>
+		<Example.Item title="responsive visibility">
+			<DemoResponsive />
 		</Example.Item>
 	</Example>);

package/components/_private/Flyout/Flyout.types.d.ts

@@ -1,7 +1,37 @@
 import React from "react";
 import type * as G from "../../../types/global";
 import type { TrapMode } from "../../../utilities/a11y/types";
-import useFlyout, { FlyoutPosition, FlyoutWidth } from "../../../hooks/_private/useFlyout";
+/**
+ * Utility
+ */
+export type Position = "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "start" | "start-top" | "start-bottom" | "end" | "end-top" | "end-bottom";
+export type Width = "trigger" | string;
+export type Options = {
+    width?: Width;
+    position: Position;
+    rtl: boolean;
+    forcePosition?: boolean;
+};
+export type Styles = React.CSSProperties;
+export type State = {
+    styles: Styles;
+    position?: Position;
+    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
+};
+export type FlyoutData = {
+    styles: Styles;
+    position: Position;
+};
+export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
+    updatePosition: () => void;
+    render: () => void;
+    hide: () => void;
+    remove: () => void;
+    show: () => void;
+};
+/**
+ * Component
+ */
 export type InstanceRef = {
     open: () => void;
     close: () => void;
@@ -30,14 +60,14 @@ export type TriggerAttributes = {
 type BaseProps = {
     id?: string;
     triggerType?: "hover" | "click" | "focus";
-    position?: FlyoutPosition;
+    position?: Position;
     forcePosition?: boolean;
     trapFocusMode?: TrapMode;
     disableHideAnimation?: boolean;
     children?: React.ReactNode;
     onOpen?: () => void;
     onClose?: () => void;
-    width?: FlyoutWidth;
+    width?: Width;
     contentGap?: number;
     contentClassName?: string;
     contentAttributes?: G.Attributes<"div">;
@@ -60,8 +90,8 @@ export type ContentProps = {
 };
 export type ContextProps = {
     id: string;
-    flyout: ReturnType<typeof useFlyout>;
-    width?: FlyoutWidth;
+    flyout: UseFlyoutData;
+    width?: Width;
     triggerElRef: React.RefObject<HTMLButtonElement>;
     flyoutElRef: React.RefObject<HTMLDivElement>;
     handleClose: (options?: {

package/components/_private/Flyout/FlyoutControlled.js

@@ -8,10 +8,10 @@ import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../../hooks/useHotkeys.js";
-import useFlyout from "../../../hooks/_private/useFlyout.js";
 import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
 import useRTL from "../../../hooks/useRTL.js";
-import { checkTransitions } from "../../../utilities/animation.js";
+import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
+import useFlyout from "./useFlyout.js";
 import { Provider, useFlyoutContext } from "./Flyout.context.js";
 const FlyoutRoot = (props) => {
     const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
@@ -33,7 +33,7 @@ const FlyoutRoot = (props) => {
         defaultActive: passedActive,
         forcePosition,
     });
-    const { status, updatePosition, render, hide, remove } = flyout;
+    const { status, updatePosition, render, hide, remove, show } = flyout;
     // Don't create dismissible queue for hover flyout because they close all together on mouseout
     const isDismissible = useIsDismissible(triggerType !== "hover" && status !== "idle", flyoutElRef, triggerElRef);
     const clearTimer = React.useCallback(() => {
@@ -102,6 +102,21 @@ const FlyoutRoot = (props) => {
     }, [status, handleOpen, handleClose]);
     const handleContentMouseDown = () => (lockedBlurEffects.current = true);
     const handleContentMouseUp = () => (lockedBlurEffects.current = false);
+    const handleTransitionStart = React.useCallback((e) => {
+        if (!passedActive)
+            return;
+        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
+            return;
+        transitionStartedRef.current = true;
+    }, [passedActive]);
+    const handleTransitionEnd = React.useCallback((e) => {
+        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
+            return;
+        if (status === "hidden") {
+            transitionStartedRef.current = false;
+            remove();
+        }
+    }, [remove, status]);
     /**
      * Control the display based on the props
      */
@@ -122,21 +137,11 @@ const FlyoutRoot = (props) => {
             remove();
         }
     }, [passedActive, render, hide, disableHideAnimation]);
-    const handleTransitionStart = React.useCallback((e) => {
-        if (!passedActive)
-            return;
-        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
-            return;
-        transitionStartedRef.current = true;
-    }, [passedActive]);
-    const handleTransitionEnd = React.useCallback((e) => {
-        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
-            return;
-        if (status === "hidden") {
-            transitionStartedRef.current = false;
-            remove();
-        }
-    }, [remove, status]);
+    React.useEffect(() => {
+        // Wait after positioning before show is triggered to animate flyout from the right side
+        if (status === "positioned")
+            onNextFrame(() => show());
+    }, [status, show]);
     /**
      * Handle focus trap
      *

package/components/_private/Flyout/useFlyout.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+/**
+ * Typings
+ */
+type ElementRef = React.RefObject<HTMLElement>;
+type PassedFlyoutOptions = {
+    width?: T.Width;
+    position?: T.Position;
+    defaultActive?: boolean;
+    forcePosition?: boolean;
+};
+type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<T.State, "styles" | "position" | "status"> & {
+    updatePosition: () => void;
+    render: () => void;
+    hide: () => void;
+    remove: () => void;
+    show: () => void;
+};
+declare const useFlyout: UseFlyout;
+export default useFlyout;

package/{hooks/_private → components/_private/Flyout}/useFlyout.js

@@ -1,8 +1,7 @@
 import React from "react";
-import useRTL from "../useRTL.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { getClosestFlyoutTarget } from "../../utilities/dom.js";
-const SCREEN_OFFSET = 16;
+import useRTL from "../../../hooks/useRTL.js";
+import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import calculatePosition from "./utilities/calculatePosition.js";
 const topPos = ["top-start", "top", "top-end"];
 const bottomPos = ["bottom-start", "bottom", "bottom-end"];
 const startPos = ["start", "start-bottom", "start-top"];
@@ -13,19 +12,6 @@ const order = {
     start: [...startPos, ...endPos, ...topPos, ...bottomPos],
     end: [...endPos, ...startPos, ...topPos, ...bottomPos],
 };
-const getRTLPosition = (position) => {
-    if (position.includes("start"))
-        return position.replace("start", "end");
-    if (position.includes("end"))
-        return position.replace("end", "start");
-    return position;
-};
-/**
- * Get a position value which centers 2 elements vertically or horizontally
- */
-const centerBySize = (originSize, targetSize) => {
-    return Math.floor(originSize / 2 - targetSize / 2);
-};
 /**
  * Get an order of positions to try to fit popover on the screen based on its starting position
  */
@@ -48,88 +34,6 @@ const fullyVisible = (bounds) => {
         bounds.top >= pageTop &&
         bounds.top + bounds.height <= pageBottom);
 };
-/**
- * Calculate styles for the current position
- */
-const calculatePosition = (originBounds, targetBounds, parentOffset, options) => {
-    const { position: passedPosition, rtl, width } = options;
-    let left = 0;
-    let top = 0;
-    let position = passedPosition;
-    if (rtl)
-        position = getRTLPosition(position);
-    if (width === "full" || width === "trigger") {
-        position = position.includes("top") ? "top" : "bottom";
-    }
-    switch (position) {
-        case "bottom":
-        case "top":
-            left = centerBySize(originBounds.width, targetBounds.width) + originBounds.left;
-            break;
-        case "start":
-        case "start-top":
-        case "start-bottom":
-            left = originBounds.left - targetBounds.width;
-            break;
-        case "end":
-        case "end-top":
-        case "end-bottom":
-            left = originBounds.right;
-            break;
-        case "top-start":
-        case "bottom-start":
-            left = originBounds.left;
-            break;
-        case "top-end":
-        case "bottom-end":
-            left = originBounds.right - targetBounds.width;
-            break;
-        default:
-            break;
-    }
-    switch (position) {
-        case "top":
-        case "top-start":
-        case "top-end":
-            top = originBounds.top - targetBounds.height;
-            break;
-        case "bottom":
-        case "bottom-start":
-        case "bottom-end":
-            top = originBounds.bottom;
-            break;
-        case "start":
-        case "end":
-            top = centerBySize(originBounds.height, targetBounds.height) + originBounds.top;
-            break;
-        case "start-top":
-        case "end-top":
-            top = originBounds.top;
-            break;
-        case "start-bottom":
-        case "end-bottom":
-            top = originBounds.bottom - targetBounds.height;
-            break;
-        default:
-            break;
-    }
-    if (top === undefined || left === undefined) {
-        throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
-    }
-    top = Math.round(top + (window.scrollY || 0) - parentOffset.top);
-    left = Math.round(left + (window.scrollX || 0) - parentOffset.left);
-    let widthStyle = Math.ceil(targetBounds.width);
-    const height = Math.ceil(targetBounds.height);
-    if (width === "full") {
-        left = SCREEN_OFFSET;
-        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
-    }
-    else if (width === "trigger") {
-        widthStyle = originBounds.width;
-    }
-    const styles = { left, top, width: widthStyle, height };
-    return { styles, position };
-};
 /**
  * Order of keys here is responsible for the order of styles applied
  */
@@ -154,10 +58,10 @@ const resetStyles = {
 /**
  * Set position of the target element to fit on the screen
  */
-const flyout = (origin, target, options) => {
+const flyout = (triggerEl, flyoutEl, options) => {
     const { position, forcePosition, width } = options;
-    const targetClone = target.cloneNode(true);
-    const originBounds = origin.getBoundingClientRect();
+    const targetClone = flyoutEl.cloneNode(true);
+    const triggerBounds = triggerEl.getBoundingClientRect();
     // Reset all styles applied on the previous hook execution
     targetClone.style = "";
     Object.keys(resetStyles).forEach((key) => {
@@ -166,21 +70,21 @@ const flyout = (origin, target, options) => {
     });
     if (width) {
         if (width === "trigger") {
-            targetClone.style.width = `${originBounds.width}px`;
+            targetClone.style.width = `${triggerBounds.width}px`;
         }
         else if (width !== "full") {
             targetClone.style.width = width;
         }
     }
     document.body.appendChild(targetClone);
-    const targetBounds = targetClone.getBoundingClientRect();
-    const scrollableParent = getClosestFlyoutTarget(origin);
-    const boundsDelta = scrollableParent.getBoundingClientRect();
-    const parentOffset = {
-        top: boundsDelta.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
-        left: boundsDelta.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
+    const flyoutBounds = targetClone.getBoundingClientRect();
+    const scrollableParent = getClosestFlyoutTarget(triggerEl);
+    const scopeBounds = scrollableParent.getBoundingClientRect();
+    const scopeOffset = {
+        top: scopeBounds.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
+        left: scopeBounds.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
     };
-    let calculated = calculatePosition(originBounds, targetBounds, parentOffset, options);
+    let calculated = calculatePosition(Object.assign({ triggerBounds, flyoutBounds, scopeOffset }, options));
     if (!fullyVisible(calculated.styles) && !forcePosition) {
         const order = getPositionOrder(position);
         const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
@@ -188,7 +92,9 @@ const flyout = (origin, target, options) => {
             const { fullWidth } = extraOptions;
             testOrder.some((currentPosition) => {
                 const calculateOptions = Object.assign(Object.assign({}, options), { width: fullWidth ? "full" : options.width, position: currentPosition });
-                const tested = calculatePosition(originBounds, targetBounds, parentOffset, calculateOptions);
+                const tested = calculatePosition(Object.assign({ triggerBounds,
+                    flyoutBounds,
+                    scopeOffset }, calculateOptions));
                 if (fullyVisible(tested.styles)) {
                     calculated = tested;
                     return true;
@@ -207,16 +113,25 @@ const flyout = (origin, target, options) => {
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
+            if (state.status !== "idle")
+                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
             return Object.assign(Object.assign({}, state), { status: "rendered", styles: Object.assign({ pointerEvents: "none" }, resetStyles) });
         case "position":
-            return Object.assign(Object.assign({}, state), { status: state.status === "visible" ? "visible" : "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
+            if (state.status !== "rendered")
+                return state;
+            return Object.assign(Object.assign({}, state), { status: "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
         case "show":
-            return state.status === "positioned"
-                ? Object.assign(Object.assign({}, state), { status: "visible" }) : Object.assign(Object.assign({}, state), { status: "idle" });
+            if (state.status !== "positioned")
+                return state;
+            return Object.assign(Object.assign({}, state), { status: "visible" });
         case "hide":
-            return Object.assign(Object.assign({}, state), { status: state.status === "idle" || state.status === "hidden" ? "idle" : "hidden" });
+            if (state.status !== "visible")
+                return state;
+            return Object.assign(Object.assign({}, state), { status: "hidden" });
         case "remove":
+            if (state.status !== "hidden" && state.status !== "visible")
+                return state;
             return Object.assign(Object.assign({}, state), { status: "idle", styles: resetStyles });
         default:
             throw new Error("Invalid reducer type");
@@ -256,10 +171,7 @@ const useFlyout = (originRef, targetRef, options) => {
     React.useEffect(() => {
         if (state.status === "rendered")
             updatePosition();
-        // Wait after positioning before show is triggered to animate flyout from the right side
-        if (state.status === "positioned")
-            onNextFrame(() => show());
-    }, [state.status, updatePosition, show]);
+    }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
         styles: state.styles,
@@ -268,6 +180,7 @@ const useFlyout = (originRef, targetRef, options) => {
         render,
         hide,
         remove,
-    }), [render, updatePosition, hide, remove, state.position, state.styles, state.status]);
+        show,
+    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
 };
 export default useFlyout;

package/components/_private/Flyout/utilities/calculatePosition.d.ts

@@ -0,0 +1,18 @@
+import type * as T from "../Flyout.types";
+/**
+ * Calculate styles for the current position
+ */
+declare const calculatePosition: (args: T.Options & {
+    triggerBounds: DOMRect;
+    flyoutBounds: DOMRect;
+    scopeOffset: Record<"left" | "top", number>;
+}) => {
+    styles: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    position: T.Position;
+};
+export default calculatePosition;