@react-fabric/core 1.0.0-beta.55 → 1.0.0-beta.58

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

@@ -8,9 +8,9 @@ import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 
-var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
+var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "preventDefault", "stopPropagation", "as"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
@@ -49,14 +49,12 @@ var Chip = function Chip(_ref) {
     color = _ref.color,
     variant = _ref.variant,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
     onIconClick = _ref.onIconClick,
     onRemove = _ref.onRemove,
     rounded = _ref.rounded,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     as = _ref.as,
     aria = _objectWithoutProperties(_ref, _excluded);
@@ -75,9 +73,10 @@ var Chip = function Chip(_ref) {
     return s;
   }, [color, size], "Chip styles");
   var clickHandler = useCallback(function (e) {
-    if (stopPropagation) e.stopPropagation();
+    preventDefault && e.preventDefault();
+    stopPropagation && e.stopPropagation();
     onClick === null || onClick === void 0 || onClick(e);
-  }, [onClick, stopPropagation]);
+  }, [onClick, preventDefault, stopPropagation]);
   var removeHandler = useCallback(function (e) {
     if (stopPropagation) e.stopPropagation();
     onRemove === null || onRemove === void 0 || onRemove(e);
@@ -93,17 +92,13 @@ var Chip = function Chip(_ref) {
     "data-inner-clickable": !!onClick,
     onClick: disabled ? undefined : clickHandler
   }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsx(Icon, {
+    children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
       "data-ref": "chipIcon",
       className: classNames("fabric-chipIcon", "m-1 flex-content"),
-      icon: icon,
-      bg: iconBg,
-      onClick: onIconClick,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    }), children && /*#__PURE__*/jsx("label", {
+      onClick: onIconClick
+    }, getIconProps(icon))), children && /*#__PURE__*/jsx("label", {
       "data-ref": "chipLabel",
-      className: classNames("fabric-chipLabel", "truncate"),
+      className: classNames("fabric-chipLabel", "truncate flex-1"),
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",

package/dist/esm/components/dropdown/Dropdown.js

@@ -112,6 +112,7 @@ var DropdownElement = function DropdownElement(_ref) {
         var _anchor$props$onClick, _anchor$props;
         (_anchor$props$onClick = (_anchor$props = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props, e);
         e.stopPropagation();
+        e.preventDefault();
       }
     })), {}, {
       "data-inner-clickable": "true",

package/dist/esm/components/icon/Icon.js

@@ -1,16 +1,25 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "iconSrc", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getIconProps = function getIconProps(props) {
+  if (typeof props === "string") {
+    return {
+      icon: props
+    };
+  }
+  return props;
+};
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 var SizeMap = {
   xs: "0.625rem",
@@ -52,6 +61,7 @@ var SizeMap = {
 var Icon = function Icon(_ref) {
   var ref = _ref.ref,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     bg = _ref.bg,
     color = _ref.color,
     _ref$size = _ref.size,
@@ -63,8 +73,16 @@ var Icon = function Icon(_ref) {
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
-    onClick = _ref.onClick,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageFailed = _useState2[0],
+    setImageFailed = _useState2[1];
+  useEffect(function () {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   var styles = useMemo(function () {
     var s = {};
@@ -90,6 +108,7 @@ var Icon = function Icon(_ref) {
 
   /** ***************** render icon *******************/
   var iconEl = useMemo(function () {
+    if ( /*#__PURE__*/isValidElement(icon)) return icon;
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -116,19 +135,28 @@ var Icon = function Icon(_ref) {
       className: "".concat(icon)
     });
   }, [icon, isSvg, viewBox]);
-  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
-    onClick: onClick,
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!_onClick && disabled && "opacity-30 pointer-events-none", className),
+    onClick: function onClick(e) {
+      _onClick && e.stopPropagation();
+      _onClick && e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     "data-flip": rtlFlip,
     style: styles,
-    "data-clickable": !!onClick,
-    "data-inner-clickable": !!onClick,
-    children: iconEl
+    "data-clickable": !!_onClick,
+    "data-inner-clickable": !!_onClick,
+    children: [iconSrc && !imageFailed && /*#__PURE__*/jsx("img", {
+      src: iconSrc,
+      onError: function onError() {
+        return setImageFailed(true);
+      }
+    }), (!iconSrc || imageFailed) && iconEl]
   }));
 };
 
-export { Icon };
+export { Icon, getIconProps };

package/dist/esm/components/menu/MenuItem.js

@@ -14,11 +14,11 @@ import '../../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -50,10 +50,7 @@ var MenuItem = function MenuItem(_ref) {
     color = _ref$color === void 0 ? "primary" : _ref$color,
     className = _ref.className,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     appendLabel = _ref.appendLabel,
-    rtlFlip = _ref.rtlFlip,
     altIcon = _ref.altIcon,
     id = _ref.id,
     active = _ref.active,
@@ -82,14 +79,10 @@ var MenuItem = function MenuItem(_ref) {
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return /*#__PURE__*/jsx(Icon, {
-      className: classNames("fabric-menuIcon", minimal && "minimal"),
-      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    });
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+    return /*#__PURE__*/jsx(Icon, _objectSpread({
+      className: classNames("fabric-menuIcon", minimal && "minimal")
+    }, getIconProps((_path = path) !== null && _path !== void 0 ? _path : "")));
+  }, [icon, minimal, label]);
   var Wrapper = useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);

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

@@ -6,13 +6,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
+import { HotKey } from '../../hotkeys/HotKey.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 { Icon, getIconProps } from '../icon/Icon.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"];
+var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -31,8 +31,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * <Panel
  *   title="Panel Title"
  *   icon={CoreIcons.info}
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -60,9 +58,6 @@ var Panel = function Panel(_ref) {
     title = _ref.title,
     actions = _ref.actions,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     panelId = _ref.panelId,
     height = _ref.height,
     width = _ref.width,
@@ -121,13 +116,9 @@ var Panel = function Panel(_ref) {
         className: classNames("fabric-panelAction", "cursor-pointer"),
         icon: CoreIcons.chevronLeft,
         onClick: onBack
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: "p-2 text-md select-none pointer-events-none"
-      }), /*#__PURE__*/jsx("div", {
+      }, getIconProps(icon))), /*#__PURE__*/jsx("div", {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsx("div", {

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

@@ -13,11 +13,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '../../hotkeys/HotKeyWrapper.js';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 import '../../types/icons.js';
 import { DropdownTool } from '../dropdown/DropdownTool.js';
 
-var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
+var _excluded = ["ref", "as", "id", "className", "label", "icon", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -34,8 +34,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *   id="tab1"
  *   label="Tab 1"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   badge="New"
  *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
  *   onClose={() => console.log("Tab closed")}
@@ -58,9 +56,6 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     badge = _ref.badge,
     disabled = _ref.disabled,
     onClose = _ref.onClose,
@@ -92,19 +87,15 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped", "flex items-center justify-center px-1 overflow-hidden cursor-pointer"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 rounded" : "rounded-capped", "flex items-center justify-center overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },
       ref: ref
     }, aria), {}, {
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: "flex-content p-2"
-      }), !minimal && /*#__PURE__*/jsx("label", {
+      }, getIconProps(icon))), !minimal && /*#__PURE__*/jsx("label", {
         className: "flex-initial truncate text-center px-1 py-1",
         children: label
       }), badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {

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

@@ -55,6 +55,7 @@ var TabPanel = function TabPanel(_ref) {
     tabFlex = _ref.tabFlex,
     append = _ref.append,
     prepend = _ref.prepend,
+    tabRotate = _ref.tabRotate,
     gap = _ref.gap,
     onBeforeChange = _ref.onBeforeChange,
     onChange = _ref.onChange;
@@ -93,7 +94,7 @@ var TabPanel = function TabPanel(_ref) {
     "data-orientation": orientation,
     "data-variant": variant !== null && variant !== void 0 ? variant : "default",
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames("fabric-tabHeader", headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
+      className: classNames("fabric-tabHeader", headerClassName, tabRotate && "tab-rotate", justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-hidden items-center"),
       children: [prepend, /*#__PURE__*/jsx("div", {
         className: classNames("fabric-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: {

package/dist/esm/core/aside/Aside.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { useLayoutEffectDebugger } from '../../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { useResize } from '../../hooks/useResize.js';
@@ -28,8 +28,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * <Aside
  *   title="Sidebar Title"
  *   icon={CoreIcons.menu}
- *   iconBg="bg-gray-200"
- *   iconColor="text-gray-800"
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -59,9 +57,6 @@ var Aside = function Aside(_ref) {
   var children = _ref.children,
     title = _ref.title,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -160,13 +155,9 @@ var Aside = function Aside(_ref) {
         rtlFlip: true,
         onClick: toggleCollapse,
         "data-ref": "asideToggle"
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: classNames("fabric-asideIcon", "p-1 text-lg select-none pointer-events-none")
-      }), actions && /*#__PURE__*/jsx("div", {
+      }, getIconProps(icon))), actions && /*#__PURE__*/jsx("div", {
         className: "fabric-asideActions",
         children: actions
       })]

package/dist/esm/core/headfoot/HeadFoot.js

@@ -50,7 +50,8 @@ var HeadFoot = function HeadFoot(_ref) {
 var Header = function Header(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "header",
-    area: "head"
+    area: "head",
+    "data-ref": "header"
   }, props));
 };
 
@@ -78,7 +79,8 @@ var Header = function Header(props) {
 var Footer = function Footer(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "footer",
-    area: "foot"
+    area: "foot",
+    "data-ref": "footer"
   }, props));
 };
 

package/dist/esm/core/page/Page.js

@@ -4,10 +4,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "children", "paper", "title", "titleClassName", "icon", "rtlFlip", "iconBg", "iconColor", "loading", "data-testid", "data-test-value"];
+var _excluded = ["ref", "children", "paper", "title", "titleClassName", "icon", "loading", "data-testid", "data-test-value"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -24,8 +24,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * <Page
  *   title="My Page"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   loading={false}
  *   paper={true}
  *   data-testid="my-page"
@@ -45,9 +43,6 @@ var Page = function Page(_ref) {
     title = _ref.title,
     titleClassName = _ref.titleClassName,
     icon = _ref.icon,
-    rtlFlip = _ref.rtlFlip,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     loading = _ref.loading,
     testId = _ref["data-testid"],
     testValue = _ref["data-test-value"],
@@ -62,13 +57,9 @@ var Page = function Page(_ref) {
     children: [title && /*#__PURE__*/jsxs("div", {
       "data-ref": "pageTitle",
       className: classNames("fabric-pageTitle", "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        size: "1.25em",
-        rtlFlip: rtlFlip,
-        bg: iconBg,
-        color: iconColor
-      }), title]
+      children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        size: "1.25em"
+      }, getIconProps(icon))), title]
     }), loading && /*#__PURE__*/jsx(Loading, {}), children]
   }));
 };

package/dist/esm/index.js

@@ -20,7 +20,7 @@ export { Divider } from './components/divider/Divider.js';
 export { Dropdown, DropdownDismiss } from './components/dropdown/Dropdown.js';
 export { DropdownTool } from './components/dropdown/DropdownTool.js';
 export { EmptyContent } from './components/empty/EmptyContent.js';
-export { Icon } from './components/icon/Icon.js';
+export { Icon, getIconProps } from './components/icon/Icon.js';
 export { Image, Video } from './components/media/Media.js';
 export { ContextMenu } from './components/menu/ContextMenu.js';
 export { Menu } from './components/menu/Menu.js';

package/dist/esm/overlays/alert/Alert.js

@@ -23,6 +23,7 @@ var Alert = function Alert(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -57,6 +58,7 @@ var Alert = function Alert(_ref) {
   var iconType = useMemo(function () {
     if (icon) return /*#__PURE__*/jsx(Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
       color: "".concat(color, "-600")
@@ -83,7 +85,7 @@ var Alert = function Alert(_ref) {
           color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var handleClose = useCallback(function (ret) {
     refs.floating.current && (refs.floating.current.dataset.show = "false");
     setTimeout(function () {

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

@@ -7,21 +7,18 @@ import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Flyout = function Flyout(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     closeOnClick = _ref.closeOnClick,
@@ -33,6 +30,7 @@ var Flyout = function Flyout(_ref) {
     size = _ref.size,
     width = _ref.width,
     minWidth = _ref.minWidth,
+    root = _ref.root,
     hideMask = _ref.hideMask,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
@@ -85,6 +83,7 @@ var Flyout = function Flyout(_ref) {
     }
   }, [closeOnClick, handleClose]);
   return /*#__PURE__*/jsxs(FloatingPortal, {
+    root: root,
     children: [!hideMask && /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {
@@ -109,13 +108,9 @@ var Flyout = function Flyout(_ref) {
             flex: true,
             align: "center",
             className: classNames("fabric-flyoutHeader", headerClassName),
-            children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
-              icon: icon,
-              bg: iconBg,
-              color: iconColor,
-              className: classNames(iconClassName, "p-1"),
-              rtlFlip: rtlFlip
-            }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
+            children: [isString(icon) && /*#__PURE__*/jsx(Icon, _objectSpread({
+              className: classNames(iconClassName, "p-1")
+            }, getIconProps(icon))), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
               className: "flex-1 truncate py-2 px-1",
               children: title
             }), actions, /*#__PURE__*/jsx(Icon, {

package/dist/esm/overlays/message/Message.js

@@ -35,6 +35,7 @@ var Message = function Message(_ref) {
     message = _ref.message,
     color = _ref.color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose;
@@ -59,6 +60,7 @@ var Message = function Message(_ref) {
     ref: elRef,
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip
     }), title && /*#__PURE__*/jsx("div", {

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

@@ -7,21 +7,18 @@ import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "noMask", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     headerClassName = _ref.headerClassName,
@@ -31,7 +28,7 @@ var Modal = function Modal(_ref) {
     loading = _ref.loading,
     root = _ref.root,
     size = _ref.size,
-    noMask = _ref.noMask,
+    hideMask = _ref.hideMask,
     width = _ref.width,
     height = _ref.height,
     minHeight = _ref.minHeight,
@@ -85,7 +82,7 @@ var Modal = function Modal(_ref) {
         position: "absolute",
         overflow: "hidden"
       },
-      className: classNames("grid place-items-center p-16", !noMask && "bg-tint-100/20 backdrop-blur-sm"),
+      className: classNames("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm"),
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
@@ -103,13 +100,9 @@ var Modal = function Modal(_ref) {
               flex: true,
               align: "center",
               className: classNames("fabric-modalHeader", headerClassName),
-              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, _objectSpread({
+                className: classNames(iconClassName, "p-1")
+              }, getIconProps(icon))), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {