@react-fabric/core 1.0.0-beta.0 → 1.0.0-beta.11

package/dist/cjs/components/menu/ContextMenu.js

@@ -9,15 +9,22 @@ var jsxRuntime = require('react/jsx-runtime');
 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 ContextMenu = function ContextMenu(_ref) {
+  var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
-    menu = _ref.menu;
+    menu = _ref.menu,
+    disabled = _ref.disabled;
   var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var nodeId = react$1.useFloatingNodeId();
   var _useFloating = react$1.useFloating({
       open: isOpen,
-      onOpenChange: setIsOpen,
+      nodeId: nodeId,
+      onOpenChange: function onOpenChange(open, evt, reason) {
+        var target = evt === null || evt === void 0 ? void 0 : evt.target;
+        if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
+      },
       strategy: "fixed",
       placement: "bottom-start",
       whileElementsMounted: react$1.autoUpdate,
@@ -26,8 +33,13 @@ var ContextMenu = function ContextMenu(_ref) {
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
-  var click = react$1.useClick(context, {});
-  var dismiss = react$1.useDismiss(context, {});
+  var click = react$1.useClick(context, {
+    toggle: true,
+    ignoreMouse: true
+  });
+  var dismiss = react$1.useDismiss(context, {
+    bubbles: true
+  });
   var _useInteractions = react$1.useInteractions([dismiss, click]),
     getFloatingProps = _useInteractions.getFloatingProps;
   var handleClick = react.useRef(function (e) {
@@ -51,11 +63,18 @@ var ContextMenu = function ContextMenu(_ref) {
     e.preventDefault();
     return false;
   });
-  var wrapperRef = react.useRef(function (el) {
-    var _el$parentElement, _el$parentElement2;
-    el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.removeEventListener("contextmenu", handleClick.current);
-    el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.addEventListener("contextmenu", handleClick.current);
-  });
+  var wrapperRef = react.useRef(null);
+  react.useEffect(function () {
+    var el = wrapperRef.current;
+    if (el && !disabled) {
+      var _el$parentElement;
+      el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.addEventListener("contextmenu", handleClick.current);
+      return function () {
+        var _el$parentElement2;
+        el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.removeEventListener("contextmenu", handleClick.current);
+      };
+    }
+  }, [disabled]);
   var tryClosing = react.useRef(function (e) {
     var _e$target;
     if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
@@ -64,9 +83,10 @@ var ContextMenu = function ContextMenu(_ref) {
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "contents",
-    ref: wrapperRef.current,
+    ref: wrapperRef,
     onMouseUpCapture: tryClosing.current,
     children: [children, isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
       children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
         style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
           borderRadius: "var(--rounding)",

package/dist/cjs/components/menu/Menu.js

@@ -163,7 +163,7 @@ var MenuComponent = function MenuComponent(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
             className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
             autoFocus: true,
-            ref: utilities.mergeRefs(refs.setFloating, isNested ? undefined : ref)
+            ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
           }, getFloatingProps({
             onClick: isNested ? undefined : handleClick
           })), {}, {

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

@@ -7,10 +7,10 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
+require('@babel/runtime/helpers/slicedToArray');
 require('react-i18next');
 require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('@babel/runtime/helpers/slicedToArray');
 require('../../hotkeys/HotKeyWrapper.js');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');

package/dist/cjs/components/navigator/Navigator.js

@@ -6,43 +6,49 @@ var classNames = require('classnames');
 var HotKey = require('../../hotkeys/HotKey.js');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "onNavigate", "color"];
+var _excluded = ["className", "onNavigate", "color", "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; }
 var Navigator = function Navigator(_ref) {
   var className = _ref.className,
     onNavigate = _ref.onNavigate,
     color = _ref.color,
+    children = _ref.children,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var navPrev = react.useCallback(function () {
+    return onNavigate(-1);
+  }, [onNavigate]);
+  var navNext = react.useCallback(function () {
+    return onNavigate(+1);
+  }, [onNavigate]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, "inline-block leading-none")
+    className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "left",
-      handler: function handler() {
-        return onNavigate(-1);
-      }
+      handler: navPrev
     }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "right",
-      handler: function handler() {
-        return onNavigate(1);
-      }
+      handler: navNext
     }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
       color: color,
       className: "text-[1em] p-1",
       "aria-label": "previous",
+      "data-testid": "previous",
       icon: icons.CoreIcons.chevronLeft,
       onClick: function onClick(e) {
         return [e.stopPropagation(), onNavigate(-1)];
       }
-    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+    }), children, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
       className: "text-[1em] p-1",
       color: color,
       "aria-label": "next",
+      "data-testid": "next",
       icon: icons.CoreIcons.chevronRight,
       onClick: function onClick(e) {
         return [e.stopPropagation(), onNavigate(1)];

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

@@ -74,6 +74,7 @@ var Panel = function Panel(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
       role: "none",
       className: classNames(Panel_module.panelHeader, headerClassName, "flex flex-nowrap items-center area-head"),
+      "data-testid": "panel-header",
       onClick: collapsable ? toggleCollapse : undefined,
       children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         "data-ref": "panelBack",
@@ -116,6 +117,7 @@ var Panel = function Panel(_ref) {
         })]
       })]
     }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-testid": "panel-body",
       className: classNames(Panel_module.panelBody, "area-content grid overflow-hidden"),
       children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
     })]

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

@@ -2,15 +2,23 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+require('@babel/runtime/helpers/slicedToArray');
+require('@floating-ui/react');
+require('react-i18next');
+require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('../../hotkeys/HotKeyWrapper.js');
+var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
-var DropdownTool = require('../dropdown/DropdownTool.js');
 var Icon = require('../icon/Icon.js');
+require('../../types/icons.js');
+var DropdownTool = require('../dropdown/DropdownTool.js');
 var TabPanel_module = require('./TabPanel.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "minimal", "onClick", "tabFlex", "color", "actions", "activeClassName"];
+var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "minimal", "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; }
 var Tab = function Tab(_ref) {
@@ -32,46 +40,57 @@ var Tab = function Tab(_ref) {
     tabFlex = _ref.tabFlex,
     color = _ref.color,
     actions = _ref.actions,
+    tooltip = _ref.tooltip,
     activeClassName = _ref.activeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
+  var tooltipProps = react.useMemo(function () {
+    if (utilities.isString(tooltip)) return {
+      content: tooltip
+    };
+    return tooltip !== null && tooltip !== void 0 ? tooltip : {};
+  }, [tooltip]);
   var E = as !== null && as !== void 0 ? as : "button";
-  return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
-    "data-id": id,
-    disabled: disabled,
-    "data-color": color,
-    className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24", "flex items-center justify-center px-1 rounded overflow-hidden"),
-    onClick: function onClick() {
-      return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
-    },
-    ref: ref
-  }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: icon,
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip,
-      className: "flex-content"
-    }), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: "flex-initial truncate text-center px-1 py-1",
-      children: label
-    }), badge && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
-      placement: minimal ? "end" : "",
-      className: classNames("me-1", badgeProps.className)
-    })), actions && active && /*#__PURE__*/jsxRuntime.jsx(DropdownTool.DropdownTool, {
-      className: "bg-base/20 me-1 z-5",
-      children: actions
-    }), onClose && /*#__PURE__*/jsxRuntime.jsx("span", {
-      role: "none",
-      className: classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto"),
-      onClick: function onClick(e) {
-        onClose === null || onClose === void 0 || onClose();
-        e.stopPropagation();
+  var W = tooltip ? Tooltip.Tooltip : react.Fragment;
+  return /*#__PURE__*/jsxRuntime.jsx(W, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      "data-id": id,
+      disabled: disabled,
+      "data-color": color,
+      "data-inner-clickable": true,
+      className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      onClick: function onClick() {
+        return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },
-      children: "\xD7"
-    })]
+      ref: ref
+    }, aria), {}, {
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip,
+        className: "flex-content"
+      }), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: "flex-initial truncate text-center px-1 py-1",
+        children: label
+      }), badge && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        placement: minimal ? "end" : "",
+        className: classNames("me-1", badgeProps.className)
+      })), actions && active && /*#__PURE__*/jsxRuntime.jsx(DropdownTool.DropdownTool, {
+        className: "bg-base/20 me-1 z-5",
+        children: actions
+      }), onClose && /*#__PURE__*/jsxRuntime.jsx("span", {
+        role: "none",
+        className: classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto"),
+        onClick: function onClick(e) {
+          onClose === null || onClose === void 0 || onClose();
+          e.stopPropagation();
+        },
+        children: "\xD7"
+      })]
+    }))
   }));
 };
 

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

@@ -20,6 +20,8 @@ var TabPanel = function TabPanel(_ref) {
     justify = _ref.justify,
     variant = _ref.variant,
     tabFlex = _ref.tabFlex,
+    append = _ref.append,
+    prepend = _ref.prepend,
     gap = _ref.gap,
     onBeforeChange = _ref.onBeforeChange,
     onChange = _ref.onChange;
@@ -57,19 +59,22 @@ var TabPanel = function TabPanel(_ref) {
     className: classNames(TabPanel_module.tabPanel, "area-content grid bg-base overflow-hidden"),
     "data-orientation": orientation,
     "data-variant": variant !== null && variant !== void 0 ? variant : "default",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(TabPanel_module.tabList, headerClassName, justify && "justify-".concat(justify), ["start", "end"].includes(orientation) && "flex-col", "flex flex-nowrap overflow-auto scroll-thin"),
-      style: {
-        gap: gap
-      },
-      children: tabs.map(function (node) {
-        var _node$props$tabFlex;
-        return /*#__PURE__*/react.cloneElement(node, {
-          tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
-          onClick: handleClick,
-          active: node.props.id === active
-        });
-      })
+    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"),
+        style: {
+          gap: gap
+        },
+        children: tabs.map(function (node) {
+          var _node$props$tabFlex;
+          return /*#__PURE__*/react.cloneElement(node, {
+            tabFlex: (_node$props$tabFlex = node.props.tabFlex) !== null && _node$props$tabFlex !== void 0 ? _node$props$tabFlex : tabFlex,
+            onClick: handleClick,
+            active: node.props.id === active
+          });
+        })
+      }), append]
     }), rest, activeTabPanel]
   });
 };

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

@@ -1 +1 @@
-@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabList{grid-area: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;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 1px 0 theme(borderColor.dimmed)}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{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;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}}}

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

@@ -26,6 +26,8 @@ var Aside = function Aside(_ref) {
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
     rtlFlip = _ref.rtlFlip,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
     resizeable = _ref.resizeable,
     flyout = _ref.flyout,
@@ -101,15 +103,17 @@ var Aside = function Aside(_ref) {
     };
   }, [width, minWidth, maxWidth]);
   return /*#__PURE__*/jsxRuntime.jsxs("aside", {
-    className: classNames(Aside_module.aside, "overflow-hidden grid"),
+    className: classNames(Aside_module.aside, className, "overflow-hidden grid"),
     "data-align": align,
     "data-flyout": peek,
+    "data-loading": loading,
     "data-collapsed": isCollapsed,
     style: isCollapsed ? undefined : widthStyles,
     "data-testid": testId,
     "data-test-value": testValue,
     children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
       className: classNames(Aside_module.asideHeader, headerClassName, "grid area-head items-center"),
+      "data-testid": "aside-header",
       children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames(Aside_module.asideTitle, "truncate py-0.5 px-1 select-none pointer-events-none"),
         children: title
@@ -138,8 +142,9 @@ var Aside = function Aside(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       ref: elementRef,
       "data-ref": "asideBody",
-      className: classNames(Aside_module.asideBody, "overflow-hidden grid"),
+      className: classNames(Aside_module.asideBody, bodyClassName, "overflow-hidden grid"),
       style: isCollapsed ? widthStyles : undefined,
+      "data-testid": "aside-body",
       children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
         children: children
       })

package/dist/cjs/core/content/Content.js

@@ -44,12 +44,15 @@ var Content = function Content(_ref) {
     testValue = _ref["data-test-value"];
   var resizeHandle = useResizeObserver.useResizeObserver(onResize);
   var scrollHandler = useDebounce.useDebounce(function (e) {
+    var el = e.target;
     onScroll === null || onScroll === void 0 || onScroll({
-      // @ts-expect-error ignore
-      left: e.target.scrollLeft,
-      // @ts-expect-error ignore
-      top: e.target.scrollTop
-    });
+      left: el.scrollLeft,
+      top: el.scrollTop,
+      scrollHeight: el.scrollHeight,
+      scrollWidth: el.scrollWidth,
+      width: el.offsetWidth,
+      height: el.offsetHeight
+    }, e);
   }, [onScroll]);
   react.useImperativeHandle(ref, function () {
     return resizeHandle.current;

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

@@ -39,7 +39,7 @@ var HeadFoot = function HeadFoot(_ref) {
   }, [bg], "HeadFoot styles");
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
     dir: dir,
-    className: classNames(HeadFoot_module.headfoot, className, bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), area === "head" ? "area-head" : "area-foot", "leading-none", flex && "flex flex-nowrap gap-px", align && "items-".concat(align), justify && "justify-".concat(justify)),
+    className: classNames(HeadFoot_module.headfoot, className, bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), area === "head" ? "area-head" : "area-foot", "leading-none", flex && "flex flex-nowrap", align && "items-".concat(align), justify && "justify-".concat(justify)),
     style: styles
   }, aria), {}, {
     children: children

package/dist/cjs/core/headfoot/HeadFoot.module.css

@@ -1 +1 @@
-@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}
+@layer comp{.headfoot{gap:2px;.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}

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

@@ -47,6 +47,7 @@ var Page = function Page(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-testid": testId,
     "data-test-value": testValue,
+    "data-loading": loading,
     className: classNames(Page_module.page, "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "pageTitle",

package/dist/cjs/core/section/Section.js

@@ -30,11 +30,14 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var Section = function Section(_ref) {
   var children = _ref.children,
-    dir = _ref.dir;
+    className = _ref.className,
+    dir = _ref.dir,
+    ref = _ref.ref;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     "data-ref": "section",
     dir: dir,
-    className: classNames(Section_module.section, "grid area-content overflow-hidden"),
+    ref: ref,
+    className: classNames(Section_module.section, className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: children
     })

package/dist/cjs/hooks/useNavigator.js

@@ -11,17 +11,19 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
+  var refCurrent = react.useRef(defaultIndex);
   var onNavigate = react.useCallback(function (dir) {
     if (dir === -1) {
-      setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
     }
     if (dir === 1) {
-      setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
     }
-  }, [currentIndex, totalCount]);
+    setCurrentIndex(refCurrent.current);
+  }, [totalCount]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: "text-muted leading-none",
+      className: "text-muted leading-5",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);

package/dist/cjs/index.js

@@ -44,6 +44,7 @@ var ThemeProvider = require('./core/theme/ThemeProvider.js');
 var Viewport = require('./core/viewport/Viewport.js');
 var index = require('./i18n/index.js');
 require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/slicedToArray');
 require('@floating-ui/react');
 require('classnames');
 require('react');
@@ -56,8 +57,8 @@ var Flyout = require('./overlays/flyout/Flyout.js');
 var Modal = require('./overlays/modal/Modal.js');
 var Tooltip = require('./overlays/tooltip/Tooltip.js');
 var Abbr = require('./typography/Abbr.js');
+var Anchor = require('./typography/Anchor.js');
 var Copy = require('./typography/Copy.js');
-var Link = require('./typography/Link.js');
 var Mark = require('./typography/Mark.js');
 var Text = require('./typography/Text.js');
 var useClientService = require('./hooks/useClientService.js');
@@ -80,6 +81,7 @@ exports.ActionLabel = ActionLabel.ActionLabel;
 exports.AnimationBars = Animations.AnimationBars;
 exports.AnimationIndicator = Animations.AnimationIndicator;
 exports.AnimationSpinner = Animations.AnimationSpinner;
+exports.Loading = Animations.Loading;
 exports.Skeleton = Animations.Skeleton;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarGroup = AvatarGroup.AvatarGroup;
@@ -137,8 +139,8 @@ exports.Flyout = Flyout.Flyout;
 exports.Modal = Modal.Modal;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Abbr = Abbr.Abbr;
+exports.Anchor = Anchor.Anchor;
 exports.Copy = Copy.Copy;
-exports.Link = Link.Link;
 exports.Mark = Mark.Mark;
 exports.Text = Text.Text;
 exports.useClientService = useClientService.useClientService;

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

@@ -1,9 +1,10 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var react = require('@floating-ui/react');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react$1 = require('@floating-ui/react');
 var classNames = require('classnames');
-var react$1 = require('react');
+var react = require('react');
 var reactI18next = require('react-i18next');
 var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
@@ -28,10 +29,16 @@ var Alert = function Alert(_ref) {
     onClose = _ref.onClose,
     type = _ref.type,
     okLabel = _ref.okLabel,
-    cancelLabel = _ref.cancelLabel;
+    cancelLabel = _ref.cancelLabel,
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue;
   var _useTranslation = reactI18next.useTranslation("core"),
     t = _useTranslation.t;
-  var _useFloating = react.useFloating({
+  var _useState = react.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useFloating = react$1.useFloating({
       open: true,
       onOpenChange: function onOpenChange() {
         handleClose(false);
@@ -39,16 +46,16 @@ var Alert = function Alert(_ref) {
     }),
     refs = _useFloating.refs,
     context = _useFloating.context;
-  var dismiss = react.useDismiss(context, {
+  var dismiss = react$1.useDismiss(context, {
     outsidePressEvent: "mousedown",
     escapeKey: true
   });
-  var role = react.useRole(context);
+  var role = react$1.useRole(context);
 
   // Merge all the interactions into prop getters
-  var _useInteractions = react.useInteractions([dismiss, role]),
+  var _useInteractions = react$1.useInteractions([dismiss, role]),
     getFloatingProps = _useInteractions.getFloatingProps;
-  var iconType = react$1.useMemo(function () {
+  var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
       size: "md",
@@ -78,25 +85,25 @@ var Alert = function Alert(_ref) {
         });
     }
   }, [color, type, icon]);
-  var handleClose = react$1.useCallback(function (ret) {
+  var handleClose = react.useCallback(function (ret) {
     refs.floating.current && (refs.floating.current.dataset.show = "false");
     setTimeout(function () {
       onClose(ret);
     }, 250);
   }, [onClose]);
-  react$1.useLayoutEffect(function () {
+  react.useLayoutEffect(function () {
     setTimeout(function () {
       return refs.floating.current && (refs.floating.current.dataset.show = "true");
     }, 100);
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
       className: "bg-base/50 backdrop-blur-sm grid place-items-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
@@ -112,9 +119,24 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "area-[message] py-4",
             children: message
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "area-[message]",
-            children: message
+          }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx("input", {
+            value: value,
+            placeholder: placeholder,
+            className: classNames("border rounded focus:border-primary-500"),
+            ref: function ref(e) {
+              return e != null && setTimeout(function () {
+                return e.focus();
+              }, 100);
+            },
+            onBlur: function onBlur(e) {
+              return e.target.focus();
+            },
+            onChange: function onChange(e) {
+              return setValue(e.target.value);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.key === "Enter" && handleClose(value);
+            }
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {