@hyphen/hyphen-components 7.3.0 → 7.3.1

package/dist/hyphen-components.cjs.development.js

@@ -3900,8 +3900,11 @@ var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "classNa
   _excluded15 = ["className"];
 var SIDEBAR_WIDTH = '16rem';
 var SIDEBAR_WIDTH_ICON = '44px';
-var SIDEBAR_KEYBOARD_SHORTCUT = '[';
-var SidebarContext = /*#__PURE__*/React.createContext(null);
+var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
+var SidebarIsMobileContext = /*#__PURE__*/React.createContext(null);
+var SidebarLeftContext = /*#__PURE__*/React.createContext(null);
+var SidebarRightContext = /*#__PURE__*/React.createContext(null);
 var SidebarSideContext = /*#__PURE__*/React.createContext('left');
 var resolveSideValue = function resolveSideValue(value, side, fallback) {
   if (typeof value === 'boolean') {
@@ -3931,6 +3934,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,
@@ -3992,14 +4005,18 @@ var useSidebarSideState = function useSidebarSideState(_ref) {
   }, [state, open, setOpen, openMobile, setOpenMobile, toggleSidebar]);
 };
 function useSidebar(sideOverride) {
-  var context = React.useContext(SidebarContext);
-  if (!context) {
+  var isMobile = React.useContext(SidebarIsMobileContext);
+  if (typeof isMobile !== 'boolean') {
     throw new Error('useSidebar must be used within a SidebarProvider.');
   }
   var contextSide = React.useContext(SidebarSideContext);
   var side = sideOverride != null ? sideOverride : contextSide;
-  return _extends({}, context.sides[side], {
-    isMobile: context.isMobile,
+  var sideContext = React.useContext(side === 'left' ? SidebarLeftContext : SidebarRightContext);
+  if (!sideContext) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return _extends({}, sideContext, {
+    isMobile: isMobile,
     side: side
   });
 }
@@ -4016,6 +4033,8 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
   var isMobile = useIsMobile();
   var lastToggledSideRef = React.useRef('left');
+  var leftToggleRef = React.useRef(null);
+  var rightToggleRef = React.useRef(null);
   var leftState = useSidebarSideState({
     side: 'left',
     isMobile: isMobile,
@@ -4034,31 +4053,37 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     storageKey: storageKey,
     lastToggledSideRef: lastToggledSideRef
   });
-  // Keydown event handler for toggling sidebar
+  React.useEffect(function () {
+    leftToggleRef.current = leftState.toggleSidebar;
+  }, [leftState.toggleSidebar]);
+  React.useEffect(function () {
+    rightToggleRef.current = rightState.toggleSidebar;
+  }, [rightState.toggleSidebar]);
   React.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 = React.useMemo(function () {
-    return {
-      isMobile: isMobile,
-      sides: {
-        left: leftState,
-        right: rightState
-      }
-    };
-  }, [isMobile, leftState, rightState]);
-  return React.createElement(SidebarContext.Provider, {
-    value: contextValue
+  }, []);
+  return React.createElement(SidebarIsMobileContext.Provider, {
+    value: isMobile
+  }, React.createElement(SidebarLeftContext.Provider, {
+    value: leftState
+  }, React.createElement(SidebarRightContext.Provider, {
+    value: rightState
   }, React.createElement(TooltipProvider, {
     delayDuration: 0
   }, React.createElement("div", _extends({
@@ -4069,7 +4094,7 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, style),
     className: classNames('display-flex w-100 background-color-secondary', className),
     ref: ref
-  }, props), children)));
+  }, props), children)))));
 });
 SidebarProvider.displayName = 'SidebarProvider';
 var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
@@ -4137,15 +4162,13 @@ var Sidebar = /*#__PURE__*/React.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.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)',
@@ -4156,7 +4179,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       transitionProperty: 'left, right, width',
       width: state === 'collapsed' && collapsible === 'icon' ? 'var(--sidebar-width-icon)' : 'var(--sidebar-width)',
       height: '100svh'
-    }
+    })
   }, props), React.createElement("div", {
     "data-sidebar": "sidebar",
     className: classNames('display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base', {
@@ -4388,6 +4411,7 @@ var SidebarRail = /*#__PURE__*/React.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.createElement("button", _extends({
     ref: ref,
@@ -4395,7 +4419,7 @@ var SidebarRail = /*#__PURE__*/React.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'