@hyphen/hyphen-components 7.3.1 → 7.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hyphen-components.cjs.development.js +10 -6
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +10 -6
- package/dist/hyphen-components.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Sidebar/Sidebar.tsx +14 -8
|
@@ -3870,6 +3870,7 @@ var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "classNa
|
|
|
3870
3870
|
_excluded14 = ["className"],
|
|
3871
3871
|
_excluded15 = ["className"];
|
|
3872
3872
|
var SIDEBAR_WIDTH = '16rem';
|
|
3873
|
+
var SIDEBAR_RIGHT_WIDTH = '24rem';
|
|
3873
3874
|
var SIDEBAR_WIDTH_ICON = '44px';
|
|
3874
3875
|
var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
|
|
3875
3876
|
var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
|
|
@@ -4063,7 +4064,7 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
|
4063
4064
|
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
|
4064
4065
|
minBlockSize: '100svh'
|
|
4065
4066
|
}, style),
|
|
4066
|
-
className: classNames('display-flex w-100 background-color-secondary', className),
|
|
4067
|
+
className: classNames('display-flex w-100 background-color-secondary overflow-hidden', className),
|
|
4067
4068
|
ref: ref
|
|
4068
4069
|
}, props), children)))));
|
|
4069
4070
|
});
|
|
@@ -4081,6 +4082,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
|
4081
4082
|
state = _useSidebar.state,
|
|
4082
4083
|
openMobile = _useSidebar.openMobile,
|
|
4083
4084
|
setOpenMobile = _useSidebar.setOpenMobile;
|
|
4085
|
+
var sidebarWidth = side === 'right' ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
|
|
4084
4086
|
if (isMobile) {
|
|
4085
4087
|
return React__default.createElement(SidebarSideContext.Provider, {
|
|
4086
4088
|
value: side
|
|
@@ -4102,6 +4104,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
|
4102
4104
|
}, React__default.createElement("div", _extends({
|
|
4103
4105
|
className: classNames('group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
|
|
4104
4106
|
style: {
|
|
4107
|
+
'--sidebar-width': sidebarWidth,
|
|
4105
4108
|
width: 'var(--sidebar-width)'
|
|
4106
4109
|
},
|
|
4107
4110
|
ref: ref
|
|
@@ -4119,9 +4122,9 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
|
4119
4122
|
color: "base",
|
|
4120
4123
|
fontSize: "sm",
|
|
4121
4124
|
position: "relative",
|
|
4122
|
-
style:
|
|
4123
|
-
|
|
4124
|
-
}
|
|
4125
|
+
style: {
|
|
4126
|
+
'--sidebar-width': sidebarWidth
|
|
4127
|
+
},
|
|
4125
4128
|
"data-state": state,
|
|
4126
4129
|
"data-collapsible": collapsible,
|
|
4127
4130
|
"data-side": side,
|
|
@@ -4399,9 +4402,10 @@ var SidebarRail = /*#__PURE__*/React__default.forwardRef(function (_ref16, ref)
|
|
|
4399
4402
|
top: '20px',
|
|
4400
4403
|
bottom: '20px',
|
|
4401
4404
|
right: side === 'left' ? '-14px' : undefined,
|
|
4402
|
-
left: side === 'right' ? '-
|
|
4405
|
+
left: side === 'right' ? '-18px' : undefined,
|
|
4403
4406
|
width: '10px'
|
|
4404
|
-
}
|
|
4407
|
+
},
|
|
4408
|
+
type: "button"
|
|
4405
4409
|
}, props), React__default.createElement(Box, {
|
|
4406
4410
|
radius: "xl",
|
|
4407
4411
|
background: "primary",
|