@react-fabric/core 1.0.0-beta.18 → 1.0.0-beta.20

package/dist/cjs/components/badge/Badge.js

@@ -67,7 +67,7 @@ var Badge = function Badge(_ref) {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames(Badge_module.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames(Badge_module.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label

package/dist/cjs/components/chip/Chip.js

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,

package/dist/cjs/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.25;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.5;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

package/dist/cjs/components/icon/Icon.module.css

@@ -1 +1 @@
-@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
+@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}

package/dist/cjs/components/panel/Panel.js

@@ -91,7 +91,7 @@ var Panel = function Panel(_ref) {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-1",
+        className: "px-1 leading-none",
         children: actions
       }), hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",

package/dist/cjs/components/tabpanel/TabPanel.js

@@ -62,7 +62,7 @@ var TabPanel = function TabPanel(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames(TabPanel_module.tabHeader, headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
       children: [prepend, /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(TabPanel_module.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
+        className: classNames(TabPanel_module.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", ["bottom", "end"].includes(orientation) ? "self-start" : "self-end", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
         style: {
           gap: gap
         },

package/dist/cjs/components/tabpanel/TabPanel.module.css

@@ -1 +1 @@
-@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
+@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}

package/dist/cjs/core/section/Section.module.css

@@ -1 +1 @@
-@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
+@layer comp{.section{grid-template:". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}

package/dist/cjs/overlays/flyout/Flyout.js

@@ -47,6 +47,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = react.useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = react.useRole(context);
@@ -73,9 +74,7 @@ var Flyout = function Flyout(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   var tryClosing = react$1.useCallback(function (e) {
@@ -103,47 +102,45 @@ var Flyout = function Flyout(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
-        children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-            style: {
-              width: width,
-              minWidth: minWidth
-            },
-            onMouseUpCapture: tryClosing,
-            ref: refs.setFloating
-          }, getFloatingProps()), aria), aria), {}, {
-            children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
-                flex: true,
-                className: classNames(Flyout_module.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__PURE__*/jsxRuntime.jsx("label", {
-                  className: "flex-1 truncate py-2 px-1",
-                  children: title
-                }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  "data-ref": "panelClose",
-                  className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                  icon: icons.CoreIcons.close,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-                role: "dialog",
-                className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
+        children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          "data-align": align,
+          className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          style: {
+            width: width,
+            minWidth: minWidth
+          },
+          onMouseUpCapture: tryClosing,
+          ref: refs.setFloating
+        }, getFloatingProps()), aria), aria), {}, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+              flex: true,
+              className: classNames(Flyout_module.flyoutHeader, headerClassName),
+              children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/jsxRuntime.jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                "data-ref": "panelClose",
+                className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: icons.CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
               })]
-            })
-          }))
-        })
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+              role: "dialog",
+              className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
       })
     })
   });

package/dist/cjs/overlays/modal/Modal.js

@@ -71,9 +71,7 @@ var Modal = function Modal(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {

package/dist/esm/components/badge/Badge.js

@@ -67,7 +67,7 @@ var Badge = function Badge(_ref) {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsx("span", {
         className: "p-1",
         children: label

package/dist/esm/components/chip/Chip.js

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,

package/dist/esm/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.25;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.5;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

package/dist/esm/components/icon/Icon.module.css

@@ -1 +1 @@
-@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
+@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}

package/dist/esm/components/panel/Panel.js

@@ -91,7 +91,7 @@ var Panel = function Panel(_ref) {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsx("div", {
-        className: "px-1",
+        className: "px-1 leading-none",
         children: actions
       }), hasTools && /*#__PURE__*/jsxs("div", {
         role: "none",

package/dist/esm/components/tabpanel/TabPanel.js

@@ -62,7 +62,7 @@ var TabPanel = function TabPanel(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames(classes.tabHeader, headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
       children: [prepend, /*#__PURE__*/jsx("div", {
-        className: classNames(classes.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
+        className: classNames(classes.tabList, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", ["bottom", "end"].includes(orientation) ? "self-start" : "self-end", "flex flex-1 flex-nowrap overflow-auto scroll-thin"),
         style: {
           gap: gap
         },

package/dist/esm/components/tabpanel/TabPanel.module.css

@@ -1 +1 @@
-@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
+@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}

package/dist/esm/core/section/Section.module.css

@@ -1 +1 @@
-@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
+@layer comp{.section{grid-template:". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}

package/dist/esm/overlays/flyout/Flyout.js

@@ -47,6 +47,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = useRole(context);
@@ -73,9 +74,7 @@ var Flyout = function Flyout(_ref) {
   }, [onBeforeClose, onClose]);
   useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   var tryClosing = useCallback(function (e) {
@@ -103,47 +102,45 @@ var Flyout = function Flyout(_ref) {
     children: /*#__PURE__*/jsx(Wrapper, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
-        children: /*#__PURE__*/jsx(Wrapper, {
-          children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(classes.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-            style: {
-              width: width,
-              minWidth: minWidth
-            },
-            onMouseUpCapture: tryClosing,
-            ref: refs.setFloating
-          }, getFloatingProps()), aria), aria), {}, {
-            children: /*#__PURE__*/jsxs(HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxs(Header, {
-                flex: true,
-                className: classNames(classes.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsx(Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__PURE__*/jsx("label", {
-                  className: "flex-1 truncate py-2 px-1",
-                  children: title
-                }), actions, /*#__PURE__*/jsx(Icon, {
-                  "data-ref": "panelClose",
-                  className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                  icon: CoreIcons.close,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
-                role: "dialog",
-                className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
+        children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          "data-align": align,
+          className: classNames(classes.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          style: {
+            width: width,
+            minWidth: minWidth
+          },
+          onMouseUpCapture: tryClosing,
+          ref: refs.setFloating
+        }, getFloatingProps()), aria), aria), {}, {
+          children: /*#__PURE__*/jsxs(HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxs(Header, {
+              flex: true,
+              className: classNames(classes.flyoutHeader, headerClassName),
+              children: [icon && /*#__PURE__*/jsx(Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsx(Icon, {
+                "data-ref": "panelClose",
+                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
               })]
-            })
-          }))
-        })
+            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+              role: "dialog",
+              className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
       })
     })
   });

package/dist/esm/overlays/modal/Modal.js

@@ -71,9 +71,7 @@ var Modal = function Modal(_ref) {
   }, [onBeforeClose, onClose]);
   useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   return /*#__PURE__*/jsx(FloatingPortal, {

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactNode } from "react";
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { Tab } from "./Tab";
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
@@ -33,11 +33,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
     /**
      * append element
      */
-    append?: ReactElement;
+    append?: ReactNode;
     /**
      * prepend element
      */
-    prepend?: ReactElement;
+    prepend?: ReactNode;
     /**
      * change handler
      */

package/dist/types/index.d.ts

@@ -15,5 +15,6 @@ export * from "./hooks/useResizeObserver";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/types/index.d.ts

@@ -1,5 +1,8 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
+export type ModalProps<P = unknown> = P & {
+    onClose?: (...args: AnyObject) => void;
+};
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 export type ColorType = "primary" | "accent" | "info" | "danger" | "success" | "warning";
@@ -54,7 +57,7 @@ export interface TestProps {
      */
     "data-test-value"?: AnyObject;
 }
-export type Elements<T> = React.ReactElement<T> | React.ReactPortal | React.ReactNode | string | number | boolean | null | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 export type AriaProps = React.AriaAttributes;
 /**
  * For wrapping components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.20",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.18",
+    "@react-fabric/utilities": "^1.0.0-beta.20",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "4795fee60aa3e7411934a688f7c53e42ca3297ed"
+  "gitHead": "b265afe1779c1654fc9cf8d9de6e7396b64515d3"
 }

package/src/components/badge/Badge.tsx

@@ -142,7 +142,7 @@ export const Badge = ({
           className={classNames(
             classes.badge,
             className,
-            "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
+            "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none",
             (forButton && !placement) || inline ? "relative" : "absolute",
           )}
         >

package/src/components/chip/Chip.module.css

@@ -34,7 +34,7 @@
 
     & > .chipLabel {
       padding: 0 0.5em;
-      line-height: 1.25;
+      line-height: 1.5;
     }
 
     & > .chipIcon {

package/src/components/chip/Chip.tsx

@@ -156,7 +156,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         classes.chip,
         className,
         color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 rounded",
+        "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded",
         rounded && "rounded-full",
         !!onClick && classes.clickable,
         disabled && classes.disabled,

package/src/components/icon/Icon.module.css

@@ -42,7 +42,6 @@
       line-height: 1;
 
       object-fit: cover;
-      border-radius: inherit;
 
       fill: currentcolor;
     }

package/src/components/panel/Panel.tsx

@@ -205,7 +205,7 @@ export const Panel = ({
         >
           {title}
         </div>
-        <div className="px-1">{actions}</div>
+        <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
           <div
             role="none"

package/src/components/tabpanel/TabPanel.module.css

@@ -87,7 +87,6 @@
 
     &[data-orientation="top"] {
       grid-template: "tablist" auto "content" 1fr / 1fr;
-      padding-inline: 2px;
 
       .tabHeader {
         box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
@@ -96,7 +95,6 @@
 
     &[data-orientation="bottom"] {
       grid-template: "content" 1fr "tablist" auto / 1fr;
-      padding-inline: 2px;
 
       .tabHeader {
         margin-top: 1px;
@@ -106,7 +104,6 @@
 
     &[data-orientation="start"] {
       grid-template: "tablist content" 1fr / auto 1fr;
-      padding-block: 2px;
 
       .tabHeader {
         box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
@@ -115,7 +112,6 @@
 
     &[data-orientation="end"] {
       grid-template: "content tablist" 1fr / 1fr auto;
-      padding-block: 2px;
 
       .tabHeader {
         box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;

package/src/components/tabpanel/TabPanel.tsx

@@ -25,7 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
-  type ReactElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -68,11 +68,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * append element
    */
-  append?: ReactElement;
+  append?: ReactNode;
   /**
    * prepend element
    */
-  prepend?: ReactElement;
+  prepend?: ReactNode;
   /**
    * change handler
    */
@@ -156,6 +156,7 @@ export const TabPanel = ({
             classes.tabList,
             justify && `justify-${justify}`,
             ["start", "end"].includes(orientation) && "flex-col",
+            ["bottom", "end"].includes(orientation) ? "self-start" : "self-end",
             "flex flex-1 flex-nowrap overflow-auto scroll-thin",
           )}
           style={{ gap }}

package/src/core/section/Section.module.css

@@ -23,6 +23,6 @@
 
 @layer comp {
   .section {
-    grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    grid-template: ". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
   }
 }

package/src/index.ts

@@ -41,6 +41,7 @@ export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 
 export {

package/src/overlays/flyout/Flyout.tsx

@@ -140,6 +140,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +174,6 @@ export const Flyout = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>('[role="dialog"]')
-        ?.focus();
     }, 50);
   }, []);
 
@@ -214,68 +212,66 @@ export const Flyout = ({
     <FloatingPortal>
       <Wrapper>
         <FloatingFocusManager context={context}>
-          <Wrapper>
-            <div
-              data-align={align}
-              className={classNames(
-                classes.flyout,
-                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
-                align === "start" ? "start-0" : "end-0",
-                size === "sm" && "w-[20rem]",
-                size === "md" && "w-[40rem]",
-                size === "lg" && "w-[60vw]",
-                size === "xl" && "w-[80vw]",
-              )}
-              style={{
-                width,
-                minWidth,
-              }}
-              onMouseUpCapture={tryClosing}
-              ref={refs.setFloating}
-              {...getFloatingProps()}
-              {...aria}
-              {...aria}
-            >
-              <HotKeyWrapper>
-                <Header
-                  flex
-                  className={classNames(classes.flyoutHeader, headerClassName)}
-                >
-                  {icon && (
-                    <Icon
-                      icon={icon}
-                      bg={iconBg}
-                      color={iconColor}
-                      className={classNames(iconClassName, "p-1")}
-                      rtlFlip={rtlFlip}
-                    />
-                  )}
-                  <label className="flex-1 truncate py-2 px-1">{title}</label>
-                  {actions}
+          <div
+            data-align={align}
+            className={classNames(
+              classes.flyout,
+              "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+              align === "start" ? "start-0" : "end-0",
+              size === "sm" && "w-[20rem]",
+              size === "md" && "w-[40rem]",
+              size === "lg" && "w-[60vw]",
+              size === "xl" && "w-[80vw]",
+            )}
+            style={{
+              width,
+              minWidth,
+            }}
+            onMouseUpCapture={tryClosing}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            {...aria}
+            {...aria}
+          >
+            <HotKeyWrapper>
+              <Header
+                flex
+                className={classNames(classes.flyoutHeader, headerClassName)}
+              >
+                {icon && (
                   <Icon
-                    data-ref="panelClose"
-                    className={classNames(
-                      classes.panelAction,
-                      "cursor-pointer p-1 text-xl self-stretch",
-                    )}
-                    icon={CoreIcons.close}
-                    onClick={() => handleClose(false)}
+                    icon={icon}
+                    bg={iconBg}
+                    color={iconColor}
+                    className={classNames(iconClassName, "p-1")}
+                    rtlFlip={rtlFlip}
                   />
-                </Header>
-                {loading && <Loading />}
-                <div
-                  role="dialog"
+                )}
+                <label className="flex-1 truncate py-2 px-1">{title}</label>
+                {actions}
+                <Icon
+                  data-ref="panelClose"
                   className={classNames(
-                    classes.flyoutBody,
-                    "flex-1 grid overflow-hidden",
+                    classes.panelAction,
+                    "cursor-pointer p-1 text-xl self-stretch",
                   )}
-                  {...({ tabIndex: 0 } as AnyObject)}
-                >
-                  {children}
-                </div>
-              </HotKeyWrapper>
-            </div>
-          </Wrapper>
+                  icon={CoreIcons.close}
+                  onClick={() => handleClose(false)}
+                />
+              </Header>
+              {loading && <Loading />}
+              <div
+                role="dialog"
+                className={classNames(
+                  classes.flyoutBody,
+                  "flex-1 grid overflow-hidden",
+                )}
+                {...({ tabIndex: 0 } as AnyObject)}
+              >
+                {children}
+              </div>
+            </HotKeyWrapper>
+          </div>
         </FloatingFocusManager>
       </Wrapper>
     </FloatingPortal>

package/src/overlays/modal/Modal.tsx

@@ -163,9 +163,6 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 

package/src/types/index.ts

@@ -25,6 +25,10 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
+export type ModalProps<P = unknown> = P & {
+  onClose?: (...args: AnyObject) => void;
+};
+
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
@@ -122,15 +126,7 @@ export interface TestProps {
   "data-test-value"?: AnyObject;
 }
 
-export type Elements<T> =
-  | React.ReactElement<T>
-  | React.ReactPortal
-  | React.ReactNode
-  | string
-  | number
-  | boolean
-  | null
-  | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 
 export type AriaProps = React.AriaAttributes;