@box/blueprint-web 12.118.1 → 12.119.0

package/dist/lib-esm/collapsible/collapsible-section.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PointerChevronDown, PointerChevronUp } from '@box/blueprint-web-assets/icons/Fill';
-import { ChevronDown, ChevronUp } from '@box/blueprint-web-assets/icons/Medium';
+import { ChevronDown, ChevronUp, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
+import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
@@ -18,6 +19,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     openSectionButtonAriaLabel,
     onOpenChange,
     children,
+    variant = 'default',
     ...rest
   } = props;
   const {
@@ -37,20 +39,30 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
     size: enableModernizedComponents ? 'large' : 'x-small'
   }), [enableModernizedComponents]);
+  const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
+  const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
+  const isBorderless = variant === 'borderless';
   return jsxs(Collapsible.Root, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.collapsibleSection, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-variant": variant,
     onOpenChange: onCollapsibleOpenChanged,
     open: collapsibleSectionOpen,
     children: [jsx(Collapsible.Trigger, {
       asChild: true,
       children: jsxs("div", {
+        "aria-label": isBorderless ? iconAriaLabel : undefined,
         className: styles.collapsibleSectionHeader,
         role: "button",
-        children: [headerSlot?.props.children, jsx(IconButton, {
-          "aria-label": collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel,
+        children: [headerSlot?.props.children, isBorderless ? jsx(BorderlessIcon, {
+          "aria-hidden": true,
+          className: styles.collapsibleSectionHeaderArrow,
+          height: Size4,
+          width: Size4
+        }) : jsx(IconButton, {
+          "aria-label": iconAriaLabel,
           className: styles.collapsibleSectionHeaderArrow,
           icon: collapsibleSectionOpen ? icon.up : icon.down,
           size: icon.size,

package/dist/lib-esm/collapsible/collapsible-section.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--3ab4e","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--3ab4e","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--3ab4e","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--3ab4e","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--3ab4e"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--b26d9","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--b26d9","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--b26d9","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--b26d9"};
 
 export { styles as default };

package/dist/lib-esm/collapsible/index.d.ts

@@ -1,2 +1,2 @@
 export { CollapsibleSection } from './collapsible-section';
-export type { CollapsibleSectionProps } from './types';
+export type { CollapsibleSectionProps, CollapsibleSectionVariant } from './types';

package/dist/lib-esm/collapsible/types.d.ts

@@ -1,4 +1,5 @@
 import { type CollapsibleProps as RadixCollapsibleSectionProps } from '@radix-ui/react-collapsible';
+export type CollapsibleSectionVariant = 'default' | 'borderless';
 export type CollapsibleSectionProps = RadixCollapsibleSectionProps & React.ComponentPropsWithRef<'div'> & {
     /**
      * Aria label for button opening CollapsibleSection
@@ -8,4 +9,11 @@ export type CollapsibleSectionProps = RadixCollapsibleSectionProps & React.Compo
      * Aria label for button closing CollapsibleSection
      */
     closeSectionButtonAriaLabel: string;
+    /**
+     * Visual variant of the collapsible section
+     * - default: Full width with border and background
+     * - borderless: No border, header fits content width
+     * @default 'default'
+     */
+    variant?: CollapsibleSectionVariant;
 };

package/dist/lib-esm/index.css

@@ -3125,7 +3125,7 @@
 .bp_checkbox_module_option--ae591.bp_checkbox_module_disabled--ae591 .bp_checkbox_module_label--ae591{
   cursor:default;
 }
-.bp_collapsible_section_module_collapsibleSection--3ab4e[data-modern=false]{
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-modern=false]{
   --collapsible-section-header-padding:var(--space-5);
   --collapsible-section-body-padding:var(--space-5);
   --collapsible-section-padding:var(--space-5);
@@ -3140,7 +3140,7 @@
   --collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
 }
 
-.bp_collapsible_section_module_collapsibleSection--3ab4e[data-modern=true]{
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-modern=true]{
   --collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
   --collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
   --collapsible-section-padding:var(--bp-space-050);
@@ -3155,10 +3155,20 @@
   --collapsible-section-header-expanded-border-bottom:none;
 }
 
-.bp_collapsible_section_module_collapsibleSection--3ab4e{
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless]{
+  --collapsible-section-border:none;
+  --collapsible-section-header-background-color:#0000;
+  --collapsible-section-content-background-color:#0000;
+  --collapsible-section-padding:var(--bp-space-040);
+  --collapsible-section-header-padding:0;
+  --collapsible-section-body-padding:var(--bp-space-020);
+  --collapsible-section-header-expanded-border-bottom:inherit;
+}
+
+.bp_collapsible_section_module_collapsibleSection--b26d9{
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--3ab4e{
+.bp_collapsible_section_module_collapsibleSectionHeader--b26d9{
   align-items:center;
   background:var(--collapsible-section-header-background-color);
   border:var(--collapsible-section-border);
@@ -3175,7 +3185,7 @@
           user-select:none;
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--3ab4e:focus::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--b26d9:focus::before{
   border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
   border-radius:var(--collapsible-section-outline-border-radius);
   bottom:var(--collapsible-section-outline-offset);
@@ -3185,29 +3195,31 @@
   right:var(--collapsible-section-outline-offset);
   top:var(--collapsible-section-outline-offset);
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--3ab4e[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--3ab4e[aria-expanded=true]::before{
-  border-bottom:var(--collapsible-section-header-expanded-border-bottom);
+.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true]::before{
   border-end-end-radius:0;
   border-end-start-radius:0;
+}
+.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true]{
+  border-bottom:var(--collapsible-section-header-expanded-border-bottom);
   padding-block:var(--collapsible-section-header-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--3ab4e{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9{
   display:block;
   margin-inline-start:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--3ab4e > svg{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9 > svg{
   vertical-align:middle;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--3ab4e{
+.bp_collapsible_section_module_collapsibleSectionContent--b26d9{
   overflow:hidden;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--3ab4e[data-state=open]{
-  animation:bp_collapsible_section_module_slideDown--3ab4e .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--b26d9[data-state=open]{
+  animation:bp_collapsible_section_module_slideDown--b26d9 .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--3ab4e[data-state=closed]{
-  animation:bp_collapsible_section_module_slideUp--3ab4e .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--b26d9[data-state=closed]{
+  animation:bp_collapsible_section_module_slideUp--b26d9 .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionBody--3ab4e{
+.bp_collapsible_section_module_collapsibleSectionBody--b26d9{
   align-items:center;
   background:var(--collapsible-section-content-background-color);
   border:var(--collapsible-section-border);
@@ -3219,8 +3231,29 @@
   padding-block:var(--collapsible-section-body-padding);
   padding-inline:var(--collapsible-section-padding);
 }
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9{
+  padding-block:var(--bp-space-030);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9:focus,.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9:hover{
+  background:var(--bp-surface-cta-surface-tertiary-hover);
+}
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9:focus{
+  outline:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
+  outline-offset:var(--collapsible-section-outline-offset);
+}
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9:focus::before{
+  display:none;
+}
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true]{
+  border-radius:var(--collapsible-section-border-radius);
+}
+.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9{
+  margin-inline-start:var(--bp-space-020);
+}
 
-@keyframes bp_collapsible_section_module_slideDown--3ab4e{
+@keyframes bp_collapsible_section_module_slideDown--b26d9{
   from{
     height:0;
   }
@@ -3228,7 +3261,7 @@
     height:var(--radix-collapsible-content-height);
   }
 }
-@keyframes bp_collapsible_section_module_slideUp--3ab4e{
+@keyframes bp_collapsible_section_module_slideUp--b26d9{
   from{
     height:var(--radix-collapsible-content-height);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.118.1",
+    "version": "12.119.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.94.0",
+        "@box/blueprint-web-assets": "^4.94.1",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.4",
+        "@box/storybook-utils": "^0.16.5",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",