@box/blueprint-web 12.124.0 → 12.125.0

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

@@ -42,6 +42,12 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
   const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
   const isBorderless = variant === 'borderless';
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onCollapsibleOpenChanged(!collapsibleSectionOpen);
+    }
+  }, [collapsibleSectionOpen, onCollapsibleOpenChanged]);
   return jsxs(Collapsible.Root, {
     ...rest,
     ref: forwardedRef,
@@ -55,7 +61,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
       children: jsxs("div", {
         "aria-label": isBorderless ? iconAriaLabel : undefined,
         className: styles.collapsibleSectionHeader,
+        onKeyDown: isBorderless ? handleKeyDown : undefined,
         role: "button",
+        tabIndex: isBorderless ? 0 : undefined,
         children: [headerSlot?.props.children, isBorderless ? jsx(BorderlessIcon, {
           "aria-hidden": true,
           className: styles.collapsibleSectionHeaderArrow,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-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"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--cb40a","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--cb40a","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--cb40a","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--cb40a"};
 
 export { styles as default };

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--b26d9[data-modern=false]{
+.bp_collapsible_section_module_collapsibleSection--cb40a[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--b26d9[data-modern=true]{
+.bp_collapsible_section_module_collapsibleSection--cb40a[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,7 +3155,7 @@
   --collapsible-section-header-expanded-border-bottom:none;
 }
 
-.bp_collapsible_section_module_collapsibleSection--b26d9[data-variant=borderless]{
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless]{
   --collapsible-section-border:none;
   --collapsible-section-header-background-color:#0000;
   --collapsible-section-content-background-color:#0000;
@@ -3165,10 +3165,10 @@
   --collapsible-section-header-expanded-border-bottom:inherit;
 }
 
-.bp_collapsible_section_module_collapsibleSection--b26d9{
+.bp_collapsible_section_module_collapsibleSection--cb40a{
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--b26d9{
+.bp_collapsible_section_module_collapsibleSectionHeader--cb40a{
   align-items:center;
   background:var(--collapsible-section-header-background-color);
   border:var(--collapsible-section-border);
@@ -3185,7 +3185,7 @@
           user-select:none;
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--b26d9:focus::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--cb40a: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);
@@ -3195,31 +3195,53 @@
   right:var(--collapsible-section-outline-offset);
   top:var(--collapsible-section-outline-offset);
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true]::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]::before{
   border-end-end-radius:0;
   border-end-start-radius:0;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--b26d9[aria-expanded=true]{
+.bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]{
   border-bottom:var(--collapsible-section-header-expanded-border-bottom);
   padding-block:var(--collapsible-section-header-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a{
   display:block;
   margin-inline-start:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--b26d9 > svg{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a > svg{
   vertical-align:middle;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--b26d9{
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a{
+  margin-inline-start:var(--bp-space-020);
+}
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a{
+  margin-inline-start:calc(var(--collapsible-section-padding)*-1);
+  padding-block:var(--bp-space-030);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus-visible,.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:hover{
+  background:var(--bp-surface-cta-surface-tertiary-hover);
+}
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus-visible{
+  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--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus::before{
+  display:none;
+}
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]{
+  border-radius:var(--collapsible-section-border-radius);
+}
+.bp_collapsible_section_module_collapsibleSectionContent--cb40a{
   overflow:hidden;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--b26d9[data-state=open]{
-  animation:bp_collapsible_section_module_slideDown--b26d9 .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--cb40a[data-state=open]{
+  animation:bp_collapsible_section_module_slideDown--cb40a .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_collapsibleSectionContent--cb40a[data-state=closed]{
+  animation:bp_collapsible_section_module_slideUp--cb40a .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionBody--b26d9{
+.bp_collapsible_section_module_collapsibleSectionBody--cb40a{
   align-items:center;
   background:var(--collapsible-section-content-background-color);
   border:var(--collapsible-section-border);
@@ -3231,29 +3253,11 @@
   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);
+.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionBody--cb40a{
+  padding-inline:0;
 }
 
-@keyframes bp_collapsible_section_module_slideDown--b26d9{
+@keyframes bp_collapsible_section_module_slideDown--cb40a{
   from{
     height:0;
   }
@@ -3261,7 +3265,7 @@
     height:var(--radix-collapsible-content-height);
   }
 }
-@keyframes bp_collapsible_section_module_slideUp--b26d9{
+@keyframes bp_collapsible_section_module_slideUp--cb40a{
   from{
     height:var(--radix-collapsible-content-height);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.124.0",
+    "version": "12.125.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.96.2",
+        "@box/blueprint-web-assets": "^4.96.3",
         "@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.13",
+        "@box/storybook-utils": "^0.16.14",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",