@hyphen/hyphen-components 7.3.0 → 7.3.2

package/dist/hyphen-components.esm.js

@@ -3870,9 +3870,13 @@ var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "classNa
   _excluded14 = ["className"],
   _excluded15 = ["className"];
 var SIDEBAR_WIDTH = '16rem';
+var SIDEBAR_RIGHT_WIDTH = '24rem';
 var SIDEBAR_WIDTH_ICON = '44px';
-var SIDEBAR_KEYBOARD_SHORTCUT = '[';
-var SidebarContext = /*#__PURE__*/React__default.createContext(null);
+var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
+var SidebarIsMobileContext = /*#__PURE__*/React__default.createContext(null);
+var SidebarLeftContext = /*#__PURE__*/React__default.createContext(null);
+var SidebarRightContext = /*#__PURE__*/React__default.createContext(null);
 var SidebarSideContext = /*#__PURE__*/React__default.createContext('left');
 var resolveSideValue = function resolveSideValue(value, side, fallback) {
   if (typeof value === 'boolean') {
@@ -3902,6 +3906,16 @@ var resolveStorageKey = function resolveStorageKey(storageKey, side) {
   }
   return side === 'left' ? 'sidebar_expanded' : 'sidebar_expanded_right';
 };
+var getSidebarWidth = function getSidebarWidth(state, collapsible) {
+  return state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : state === 'collapsed' ? '0' : 'var(--sidebar-width)';
+};
+var getSidebarOffsetStyles = function getSidebarOffsetStyles(side, state, collapsible) {
+  var isVisible = state === 'expanded' || collapsible === 'icon';
+  return {
+    left: side === 'left' ? isVisible ? '0' : 'calc(var(--sidebar-width)*-1)' : undefined,
+    right: side === 'right' ? isVisible ? '0' : 'calc(var(--sidebar-width)*-1)' : undefined
+  };
+};
 var useSidebarSideState = function useSidebarSideState(_ref) {
   var side = _ref.side,
     isMobile = _ref.isMobile,
@@ -3963,14 +3977,18 @@ var useSidebarSideState = function useSidebarSideState(_ref) {
   }, [state, open, setOpen, openMobile, setOpenMobile, toggleSidebar]);
 };
 function useSidebar(sideOverride) {
-  var context = React__default.useContext(SidebarContext);
-  if (!context) {
+  var isMobile = React__default.useContext(SidebarIsMobileContext);
+  if (typeof isMobile !== 'boolean') {
     throw new Error('useSidebar must be used within a SidebarProvider.');
   }
   var contextSide = React__default.useContext(SidebarSideContext);
   var side = sideOverride != null ? sideOverride : contextSide;
-  return _extends({}, context.sides[side], {
-    isMobile: context.isMobile,
+  var sideContext = React__default.useContext(side === 'left' ? SidebarLeftContext : SidebarRightContext);
+  if (!sideContext) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return _extends({}, sideContext, {
+    isMobile: isMobile,
     side: side
   });
 }
@@ -3987,6 +4005,8 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
   var isMobile = useIsMobile();
   var lastToggledSideRef = React__default.useRef('left');
+  var leftToggleRef = React__default.useRef(null);
+  var rightToggleRef = React__default.useRef(null);
   var leftState = useSidebarSideState({
     side: 'left',
     isMobile: isMobile,
@@ -4005,31 +4025,37 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     storageKey: storageKey,
     lastToggledSideRef: lastToggledSideRef
   });
-  // Keydown event handler for toggling sidebar
+  useEffect(function () {
+    leftToggleRef.current = leftState.toggleSidebar;
+  }, [leftState.toggleSidebar]);
+  useEffect(function () {
+    rightToggleRef.current = rightState.toggleSidebar;
+  }, [rightState.toggleSidebar]);
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT) {
-        event.preventDefault();
-        var sideToToggle = lastToggledSideRef.current;
-        (sideToToggle === 'left' ? leftState : rightState).toggleSidebar();
+      var target = event.target;
+      if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable)) {
+        return;
+      }
+      var shortcutSide = event.key === SIDEBAR_KEYBOARD_SHORTCUT_LEFT ? 'left' : event.key === SIDEBAR_KEYBOARD_SHORTCUT_RIGHT ? 'right' : null;
+      if (!shortcutSide) {
+        return;
       }
+      event.preventDefault();
+      var toggleSidebar = shortcutSide === 'left' ? leftToggleRef.current : rightToggleRef.current;
+      toggleSidebar == null || toggleSidebar();
     };
     window.addEventListener('keydown', handleKeyDown);
     return function () {
       return window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [leftState, rightState]);
-  var contextValue = useMemo(function () {
-    return {
-      isMobile: isMobile,
-      sides: {
-        left: leftState,
-        right: rightState
-      }
-    };
-  }, [isMobile, leftState, rightState]);
-  return React__default.createElement(SidebarContext.Provider, {
-    value: contextValue
+  }, []);
+  return React__default.createElement(SidebarIsMobileContext.Provider, {
+    value: isMobile
+  }, React__default.createElement(SidebarLeftContext.Provider, {
+    value: leftState
+  }, React__default.createElement(SidebarRightContext.Provider, {
+    value: rightState
   }, React__default.createElement(TooltipProvider, {
     delayDuration: 0
   }, React__default.createElement("div", _extends({
@@ -4038,9 +4064,9 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       minBlockSize: '100svh'
     }, style),
-    className: classNames('display-flex w-100 background-color-secondary', className),
+    className: classNames('display-flex w-100 background-color-secondary overflow-hidden', className),
     ref: ref
-  }, props), children)));
+  }, props), children)))));
 });
 SidebarProvider.displayName = 'SidebarProvider';
 var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
@@ -4056,6 +4082,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     state = _useSidebar.state,
     openMobile = _useSidebar.openMobile,
     setOpenMobile = _useSidebar.setOpenMobile;
+  var sidebarWidth = side === 'right' ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
   if (isMobile) {
     return React__default.createElement(SidebarSideContext.Provider, {
       value: side
@@ -4077,6 +4104,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     }, React__default.createElement("div", _extends({
       className: classNames('group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
       style: {
+        '--sidebar-width': sidebarWidth,
         width: 'var(--sidebar-width)'
       },
       ref: ref
@@ -4094,9 +4122,9 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     color: "base",
     fontSize: "sm",
     position: "relative",
-    style: side === 'right' && collapsible === 'offcanvas' ? {
-      overflowX: 'hidden'
-    } : undefined,
+    style: {
+      '--sidebar-width': sidebarWidth
+    },
     "data-state": state,
     "data-collapsible": collapsible,
     "data-side": side,
@@ -4108,15 +4136,13 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
       animationDuration: 'var(--sidebar-transition-duration, 200ms)',
       transitionProperty: 'width',
-      width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : state === 'collapsed' ? '0' : 'var(--sidebar-width)',
+      width: getSidebarWidth(state, collapsible),
       height: '100svh'
     },
     className: classNames('position-relative', className)
   }), React__default.createElement("div", _extends({
     className: classNames('position-absolute display-none display-flex-desktop ', className),
-    style: {
-      left: side === 'left' && (state === 'expanded' || collapsible === 'icon') ? '0' : side === 'left' ? 'calc(var(--sidebar-width)*-1)' : undefined,
-      right: side === 'right' && (state === 'expanded' || collapsible === 'icon') ? '0' : side === 'right' ? 'calc(var(--sidebar-width)*-1)' : undefined,
+    style: _extends({}, getSidebarOffsetStyles(side, state, collapsible), {
       top: '0',
       bottom: '0',
       zIndex: 'var(--size-z-index-drawer)',
@@ -4127,7 +4153,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       transitionProperty: 'left, right, width',
       width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : 'var(--sidebar-width)',
       height: '100svh'
-    }
+    })
   }, props), React__default.createElement("div", {
     "data-sidebar": "sidebar",
     className: classNames('display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base', {
@@ -4359,6 +4385,7 @@ var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref)
     open = _useSidebar5.open,
     toggleSidebar = _useSidebar5.toggleSidebar,
     side = _useSidebar5.side;
+  var shortcutLabel = side === 'left' ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
   var caretIcon = open ? side === 'right' ? 'caret-sm-right' : 'caret-sm-left' : side === 'right' ? 'caret-sm-left' : 'caret-sm-right';
   return React__default.createElement("button", _extends({
     ref: ref,
@@ -4366,7 +4393,7 @@ var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref)
     "aria-label": "Toggle Sidebar",
     tabIndex: -1,
     onClick: toggleSidebar,
-    title: "Toggle Sidebar [",
+    title: "Toggle Sidebar " + shortcutLabel,
     className: classNames(styles$8.rail, 'hover-show-child background-color-transparent display-flex p-top-5xl p-left-xl p-right-0 justify-content-center position-absolute', {
       'cursor-w-resize': open && side === 'left' || !open && side === 'right',
       'cursor-e-resize': !open && side === 'left' || open && side === 'right'
@@ -4375,9 +4402,10 @@ var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref)
       top: '20px',
       bottom: '20px',
       right: side === 'left' ? '-14px' : undefined,
-      left: side === 'right' ? '-14px' : undefined,
+      left: side === 'right' ? '-18px' : undefined,
       width: '10px'
-    }
+    },
+    type: "button"
   }, props), React__default.createElement(Box, {
     radius: "xl",
     background: "primary",