@carbon-labs/react-ui-shell 0.41.0 → 0.42.0

package/es/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     defaultExpanded?: boolean;
     isChildOfHeader?: boolean;
     onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
+    hideRailBreakpointDown?: 'sm' | 'md' | 'lg' | 'xlg' | 'max';
     href?: string;
     isFixedNav?: boolean;
     isRail?: boolean;

package/es/components/SideNav.js

@@ -48,6 +48,7 @@ function SideNavRenderFunction(_ref, ref) {
     children,
     onToggle,
     className: customClassName,
+    hideRailBreakpointDown,
     href,
     isFixedNav = false,
     isRail,
@@ -95,6 +96,7 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--hide-rail-breakpoint-down-${hideRailBreakpointDown}`]: hideRailBreakpointDown,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
@@ -410,6 +412,12 @@ SideNav.propTypes = {
    * If `true`, the overlay will be hidden. Defaults to `false`.
    */
   hideOverlay: PropTypes.bool,
+  /**
+   * Specify the breakpoint at which the SideNav will be hidden.
+   * Can be one of `sm`, `md`, `lg`, `xlg`, or `max`.
+   * Only applies when `isRail` is `true`.
+   */
+  hideRailBreakpointDown: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg', 'max']),
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/lib/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     defaultExpanded?: boolean;
     isChildOfHeader?: boolean;
     onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
+    hideRailBreakpointDown?: 'sm' | 'md' | 'lg' | 'xlg' | 'max';
     href?: string;
     isFixedNav?: boolean;
     isRail?: boolean;

package/lib/components/SideNav.js

@@ -50,6 +50,7 @@ function SideNavRenderFunction(_ref, ref) {
     children,
     onToggle,
     className: customClassName,
+    hideRailBreakpointDown,
     href,
     isFixedNav = false,
     isRail,
@@ -97,6 +98,7 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--hide-rail-breakpoint-down-${hideRailBreakpointDown}`]: hideRailBreakpointDown,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
@@ -412,6 +414,12 @@ SideNav.propTypes = {
    * If `true`, the overlay will be hidden. Defaults to `false`.
    */
   hideOverlay: PropTypes.bool,
+  /**
+   * Specify the breakpoint at which the SideNav will be hidden.
+   * Can be one of `sm`, `md`, `lg`, `xlg`, or `max`.
+   * Only applies when `isRail` is `true`.
+   */
+  hideRailBreakpointDown: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg', 'max']),
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "84c5f4054019f11741d1a7f4bd5b9725914bab87"
+  "gitHead": "ce6519871f2327bbe4edefb8b65aeca93a4e6878"
 }

package/scss/styles/_side-nav.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 @use '@carbon/styles/scss/utilities/button-reset' as button-reset;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type' as *;
@@ -354,6 +355,14 @@ div:has(.#{$prefix}--header)
   z-index: 7999; /* needs to be below header */
 }
 
+@each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
+  .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint} {
+    @include breakpoint-down($breakpoint) {
+      display: none;
+    }
+  }
+}
+
 // allow overlay to display at all breakpoints
 .#{$prefix}--side-nav__overlay-active {
   z-index: z('overlay');