@carbon-labs/react-ui-shell 0.1.0 → 0.3.0

package/es/components/SideNav.d.ts

@@ -20,6 +20,8 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
     inert?: boolean;
+    isCollapsible: boolean | undefined;
+    hideOverlay: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/es/components/SideNav.js

@@ -43,6 +43,8 @@ function SideNavRenderFunction(_ref, ref) {
     onOverlayClick,
     onSideNavBlur,
     enterDelayMs = 100,
+    isCollapsible = false,
+    hideOverlay = false,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -76,7 +78,8 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
-    [`${prefix}--side-nav--hidden`]: !isPersistent
+    [`${prefix}--side-nav--hidden`]: !isPersistent,
+    [`${prefix}--side-nav--collapsible`]: isCollapsible
   });
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
@@ -153,7 +156,7 @@ function SideNavRenderFunction(_ref, ref) {
     value: {
       isRail
     }
-  }, isFixedNav ? null :
+  }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React.createElement("div", {
@@ -198,6 +201,10 @@ SideNav.propTypes = {
    * Using this prop causes SideNav to become a controled component.
    */
   expanded: PropTypes.bool,
+  /**
+   * If `true`, the overlay will be hidden. Defaults to `false`.
+   */
+  hideOverlay: PropTypes.bool,
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.
@@ -207,6 +214,10 @@ SideNav.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   isChildOfHeader: PropTypes.bool,
+  /**
+   * Specify whether the SideNav is collapsible at desktop
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Specify if sideNav is standalone
    */

package/lib/components/SideNav.d.ts

@@ -20,6 +20,8 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
     inert?: boolean;
+    isCollapsible: boolean | undefined;
+    hideOverlay: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/lib/components/SideNav.js

@@ -45,6 +45,8 @@ function SideNavRenderFunction(_ref, ref) {
     onOverlayClick,
     onSideNavBlur,
     enterDelayMs = 100,
+    isCollapsible = false,
+    hideOverlay = false,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -78,7 +80,8 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
-    [`${prefix}--side-nav--hidden`]: !isPersistent
+    [`${prefix}--side-nav--hidden`]: !isPersistent,
+    [`${prefix}--side-nav--collapsible`]: isCollapsible
   });
   const overlayClassName = index.default({
     [`${prefix}--side-nav__overlay`]: true,
@@ -155,7 +158,7 @@ function SideNavRenderFunction(_ref, ref) {
     value: {
       isRail
     }
-  }, isFixedNav ? null :
+  }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React.createElement("div", {
@@ -200,6 +203,10 @@ SideNav.propTypes = {
    * Using this prop causes SideNav to become a controled component.
    */
   expanded: PropTypes.bool,
+  /**
+   * If `true`, the overlay will be hidden. Defaults to `false`.
+   */
+  hideOverlay: PropTypes.bool,
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.
@@ -209,6 +216,10 @@ SideNav.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   isChildOfHeader: PropTypes.bool,
+  /**
+   * Specify whether the SideNav is collapsible at desktop
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Specify if sideNav is standalone
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "5a095d69e2f17220f2dc611abdb3e321aba55d05"
+  "gitHead": "e2bf601b2e8d4301fa72fdb9a5424f2ac938df14"
 }

package/scss/styles/_side-nav.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/utilities/convert' as convert;
+
+// $prefix: 'clabs' !default;
+// Do we want to update to clabs?
+$prefix: 'cds' !default;
+
+//----------------------------------------------------------------------------
+// Side-nav Collapsible
+//----------------------------------------------------------------------------
+.#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--ux {
+  inline-size: 0;
+}
+
+.#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
+  inline-size: convert.to-rem(256px);
+}

package/scss/ui-shell.scss

@@ -5,16 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// Carbon setting imports
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/components/button' as *;
-
-$prefix: 'clabs' !default;
-
-.#{$prefix}--ui-shell__container {
-  padding: $spacing-01;
-  border: 1px solid $border-subtle-01;
-  inline-size: fit-content;
-}
+@use 'styles/side-nav';