@react-fabric/core 1.0.0-beta.53 → 1.0.0-beta.54

package/css/theme/_utilities.css

@@ -82,7 +82,7 @@
 }
 
 @utility flex-content {
-  flex: 0 1 auto;
+  flex: 0 0 auto;
 }
 
 @utility flex-full {

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

@@ -95,7 +95,7 @@ var Chip = function Chip(_ref) {
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       "data-ref": "chipIcon",
-      className: classNames("fabric-chipIcon", "m-1 flex-auto"),
+      className: classNames("fabric-chipIcon", "m-1 flex-content"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,

package/dist/cjs/components/empty/EmptyContent.js

@@ -101,13 +101,13 @@ var EmptyContent = function EmptyContent(_ref) {
         icon: icon
       }), /*#__PURE__*/react.isValidElement(icon) && icon, !icon && /*#__PURE__*/jsxRuntime.jsx(DefaultIcon, {})]
     }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "font-medium text-center text-dimmed",
+      className: "font-medium text-center opacity-85",
       style: {
         fontSize: "1.5em"
       },
       children: title
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "font-medium text-center text-muted",
+      className: "font-medium text-center opacity-65",
       style: {
         fontSize: "0.875em"
       },

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

@@ -9,6 +9,7 @@ var usePropToggle = require('../../hooks/usePropToggle.js');
 var icons = require('../../types/icons.js');
 var Animations = require('../animations/Animations.js');
 var Icon = require('../icon/Icon.js');
+var HotKey = require('../../hotkeys/HotKey.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
@@ -107,7 +108,10 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
+    children: [expanded && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      keyCombo: "esc",
+      handler: toggleExpand
+    }), /*#__PURE__*/jsxRuntime.jsxs("header", {
       role: "none",
       className: classNames("fabric-panelHeader", headerClassName, "flex flex-nowrap items-center area-head"),
       "data-ref": "panelHeader",

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

@@ -120,7 +120,7 @@ var Flyout = function Flyout(_ref) {
               children: title
             }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
               "data-ref": "panelClose",
-              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
               icon: icons.CoreIcons.close,
               onClick: function onClick() {
                 return handleClose(false);

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

@@ -114,7 +114,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
                 icon: icons.CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);

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

@@ -95,7 +95,7 @@ var Chip = function Chip(_ref) {
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsx(Icon, {
       "data-ref": "chipIcon",
-      className: classNames("fabric-chipIcon", "m-1 flex-auto"),
+      className: classNames("fabric-chipIcon", "m-1 flex-content"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,

package/dist/esm/components/empty/EmptyContent.js

@@ -101,13 +101,13 @@ var EmptyContent = function EmptyContent(_ref) {
         icon: icon
       }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
     }), title && /*#__PURE__*/jsx("div", {
-      className: "font-medium text-center text-dimmed",
+      className: "font-medium text-center opacity-85",
       style: {
         fontSize: "1.5em"
       },
       children: title
     }), /*#__PURE__*/jsx("div", {
-      className: "font-medium text-center text-muted",
+      className: "font-medium text-center opacity-65",
       style: {
         fontSize: "0.875em"
       },

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

@@ -9,6 +9,7 @@ import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Loading } from '../animations/Animations.js';
 import { Icon } from '../icon/Icon.js';
+import { HotKey } from '../../hotkeys/HotKey.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
@@ -107,7 +108,10 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxs("header", {
+    children: [expanded && /*#__PURE__*/jsx(HotKey, {
+      keyCombo: "esc",
+      handler: toggleExpand
+    }), /*#__PURE__*/jsxs("header", {
       role: "none",
       className: classNames("fabric-panelHeader", headerClassName, "flex flex-nowrap items-center area-head"),
       "data-ref": "panelHeader",

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

@@ -120,7 +120,7 @@ var Flyout = function Flyout(_ref) {
               children: title
             }), actions, /*#__PURE__*/jsx(Icon, {
               "data-ref": "panelClose",
-              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
               icon: CoreIcons.close,
               onClick: function onClick() {
                 return handleClose(false);

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

@@ -114,7 +114,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
                 icon: CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.53",
+  "version": "1.0.0-beta.54",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "1042327831f9c908912c552d5c2704b765a6f9c2"
+  "gitHead": "242f15e3de29d365cce6f41f4ef99ab36bb6b995"
 }

package/src/components/chip/Chip.tsx

@@ -190,7 +190,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {icon && (
         <Icon
           data-ref="chipIcon"
-          className={classNames("fabric-chipIcon", "m-1 flex-auto")}
+          className={classNames("fabric-chipIcon", "m-1 flex-content")}
           icon={icon}
           bg={iconBg}
           onClick={onIconClick}

package/src/components/empty/EmptyContent.tsx

@@ -164,14 +164,14 @@ export const EmptyContent = ({
       </div>
       {title && (
         <div
-          className="font-medium text-center text-dimmed"
+          className="font-medium text-center opacity-85"
           style={{ fontSize: "1.5em" }}
         >
           {title}
         </div>
       )}
       <div
-        className="font-medium text-center text-muted"
+        className="font-medium text-center opacity-65"
         style={{ fontSize: "0.875em" }}
       >
         {message}

package/src/components/panel/Panel.tsx

@@ -38,6 +38,7 @@ import {
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
 import { Icon } from "../icon/Icon";
+import { HotKey } from "../../hotkeys/HotKey";
 
 export interface PanelProps
   extends CssProp,
@@ -205,6 +206,7 @@ export const Panel = ({
       }
       {...aria}
     >
+      {expanded && <HotKey keyCombo="esc" handler={toggleExpand} />}
       <header
         role="none"
         className={classNames(

package/src/overlays/flyout/Flyout.tsx

@@ -245,7 +245,7 @@ export const Flyout = ({
                 data-ref="panelClose"
                 className={classNames(
                   "fabric-panelAction",
-                  "cursor-pointer p-1 text-xl self-stretch",
+                  "cursor-pointer p-1 text-xl self-center",
                 )}
                 icon={CoreIcons.close}
                 onClick={() => handleClose(false)}

package/src/overlays/modal/Modal.tsx

@@ -240,7 +240,7 @@ export const Modal = ({
                   data-ref="panelClose"
                   className={classNames(
                     "fabric-panelAction",
-                    "cursor-pointer p-1 text-xl self-stretch",
+                    "cursor-pointer p-1 text-xl self-center",
                   )}
                   icon={CoreIcons.close}
                   onClick={() => handleClose(false)}