@box/blueprint-web 6.36.5 → 6.37.0

package/lib-esm/content-field/content-field.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type ContentFieldProps } from './types';
 export declare const contentFieldButtonTestId = "ContentField-button";
-export declare const ContentField: ({ hintText, onClick, onClickClearButton, isSharedFolder, title, error, }: ContentFieldProps) => JSX.Element;
+export declare const ContentField: ({ clearButtonAriaLabel, itemIcon, hintText, isSharedFolder, onClick, onClickClearButton, title, error, }: ContentFieldProps) => JSX.Element;

package/lib-esm/content-field/content-field.js

@@ -5,10 +5,10 @@ import { XMark, Folder } from '@box/blueprint-web-assets/icons/Fill';
 import { Space6, Space4 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { createRef } from 'react';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import styles from './content-field.module.js';
 import { messages } from './messages.js';
-import { InlineError } from '../primitives/inline-error/inline-error.js';
 
 const ContentIconContainer = ({
   children
@@ -17,19 +17,28 @@ const ContentIconContainer = ({
   children: children
 });
 const ContentIcon = ({
-  isSharedFolder
-}) => isSharedFolder ? jsx(FolderShared, {
-  "aria-label": messages.sharedFolderIconLabel,
-  className: styles.contentIconShared,
-  height: Space6,
-  width: Space6
-}) : jsx(ContentIconContainer, {
-  children: jsx(Folder, {
-    "aria-label": messages.folderIconLabel,
-    height: Space4,
-    width: Space4
-  })
-});
+  isSharedFolder,
+  itemIcon
+}) => {
+  if (itemIcon) {
+    return itemIcon;
+  }
+  if (isSharedFolder) {
+    return jsx(FolderShared, {
+      "aria-label": messages.sharedFolderIconLabel,
+      className: styles.contentIconShared,
+      height: Space6,
+      width: Space6
+    });
+  }
+  return jsx(ContentIconContainer, {
+    children: jsx(Folder, {
+      "aria-label": messages.folderIconLabel,
+      height: Space4,
+      width: Space4
+    })
+  });
+};
 const handleOnClickClearButton = ({
   ref,
   onClickClearButton
@@ -39,10 +48,12 @@ const handleOnClickClearButton = ({
 };
 const contentFieldButtonTestId = 'ContentField-button';
 const ContentField = ({
+  clearButtonAriaLabel,
+  itemIcon,
   hintText,
+  isSharedFolder,
   onClick,
   onClickClearButton,
-  isSharedFolder,
   title,
   error
 }) => {
@@ -69,7 +80,8 @@ const ContentField = ({
           onClick: onClick,
           type: "button",
           children: [jsx(ContentIcon, {
-            isSharedFolder: isSharedFolder
+            isSharedFolder: isSharedFolder,
+            itemIcon: itemIcon
           }), jsx("div", {
             className: styles.contentLabelWrapper,
             children: jsx("div", {
@@ -80,7 +92,7 @@ const ContentField = ({
           })]
         })
       }), title && jsx(Button, {
-        "aria-label": messages.clearContentFieldButtonLabel,
+        "aria-label": clearButtonAriaLabel ?? messages.clearContentFieldButtonLabel,
         className: clsx(styles.clearButton, {
           [styles.hasSelection]: title,
           [styles.error]: !!error

package/lib-esm/content-field/content-field.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"contentFieldWrapper":"bp_content_field_module_contentFieldWrapper--557cc","contentField":"bp_content_field_module_contentField--557cc","inlineError":"bp_content_field_module_inlineError--557cc","contentButton":"bp_content_field_module_contentButton--557cc","error":"bp_content_field_module_error--557cc","hasSelection":"bp_content_field_module_hasSelection--557cc","contentIconContainer":"bp_content_field_module_contentIconContainer--557cc","contentIconShared":"bp_content_field_module_contentIconShared--557cc","contentLabelWrapper":"bp_content_field_module_contentLabelWrapper--557cc","contentLabel":"bp_content_field_module_contentLabel--557cc","clearButton":"bp_content_field_module_clearButton--557cc"};
+var styles = {"contentFieldWrapper":"bp_content_field_module_contentFieldWrapper--7aebd","contentField":"bp_content_field_module_contentField--7aebd","inlineError":"bp_content_field_module_inlineError--7aebd","contentButton":"bp_content_field_module_contentButton--7aebd","error":"bp_content_field_module_error--7aebd","hasSelection":"bp_content_field_module_hasSelection--7aebd","contentIconContainer":"bp_content_field_module_contentIconContainer--7aebd","contentIconShared":"bp_content_field_module_contentIconShared--7aebd","contentLabelWrapper":"bp_content_field_module_contentLabelWrapper--7aebd","contentLabel":"bp_content_field_module_contentLabel--7aebd","clearButton":"bp_content_field_module_clearButton--7aebd"};
 
 export { styles as default };

package/lib-esm/content-field/messages.d.ts

@@ -1,6 +1,7 @@
 export declare const messages: {
     sharedFolderIconLabel: string;
     folderIconLabel: string;
+    fileIconLabel: string;
     clearContentFieldButtonLabel: string;
     clearContentFieldIconLabel: string;
 };

package/lib-esm/content-field/messages.js

@@ -1,6 +1,7 @@
 const messages = {
   sharedFolderIconLabel: 'Shared Folder Icon',
   folderIconLabel: 'Folder Icon',
+  fileIconLabel: 'File Icon',
   clearContentFieldButtonLabel: 'Clear Content Field',
   clearContentFieldIconLabel: 'Clear Content Field icon'
 };

package/lib-esm/content-field/types.d.ts

@@ -1,9 +1,17 @@
-/// <reference types="react" />
+import type React from 'react';
 export interface ContentFieldProps {
+    /**
+     * custom aria label for the content field clear button.
+     */
+    clearButtonAriaLabel?: string;
     /**
      * placeholder text for the content field.
      */
     hintText: string;
+    /**
+     * type of the selected content(document, folder, etc.)
+     */
+    itemIcon?: React.JSX.Element;
     /**
      * whether or not the selected content is a shared folder.
      */

package/lib-esm/index.css

@@ -2886,11 +2886,11 @@
 .bp_content_card_module_pillGhost--6db10{
   margin-inline-end:var(--size-2);
 }
-.bp_content_field_module_contentFieldWrapper--557cc{
+.bp_content_field_module_contentFieldWrapper--7aebd{
   width:100%;
 }
 
-.bp_content_field_module_contentField--557cc{
+.bp_content_field_module_contentField--7aebd{
   border-radius:var(--radius-2);
   box-shadow:var(--dropshadow-2);
   display:flex;
@@ -2898,11 +2898,11 @@
   justify-content:space-between;
 }
 
-.bp_content_field_module_inlineError--557cc{
+.bp_content_field_module_inlineError--7aebd{
   margin-block-start:var(--space-2);
 }
 
-.bp_content_field_module_contentButton--557cc{
+.bp_content_field_module_contentButton--7aebd{
   all:unset;
   align-items:center;
   background:var(--surface-cta-surface-secondary);
@@ -2916,11 +2916,11 @@
   min-width:0;
   padding:var(--border-1) var(--space-3);
 }
-.bp_content_field_module_contentButton--557cc.bp_content_field_module_error--557cc{
+.bp_content_field_module_contentButton--7aebd.bp_content_field_module_error--7aebd{
   border:var(--border-2) solid var(--border-dropdown-border-error);
   position:relative;
 }
-.bp_content_field_module_contentButton--557cc.bp_content_field_module_error--557cc.bp_content_field_module_hasSelection--557cc:hover::after{
+.bp_content_field_module_contentButton--7aebd.bp_content_field_module_error--7aebd.bp_content_field_module_hasSelection--7aebd:hover::after{
   background-color:var(--border-cta-border-secondary);
   content:"";
   height:100%;
@@ -2929,53 +2929,54 @@
   top:0;
   width:1px;
 }
-.bp_content_field_module_contentButton--557cc.bp_content_field_module_hasSelection--557cc{
+.bp_content_field_module_contentButton--7aebd.bp_content_field_module_hasSelection--7aebd{
   border-radius:var(--radius-2) 0 0 var(--radius-2);
   border-right:none;
 }
-.bp_content_field_module_contentButton--557cc:hover{
+.bp_content_field_module_contentButton--7aebd:hover{
   background:var(--surface-cta-surface-secondary-hover);
 }
-.bp_content_field_module_contentButton--557cc:not(.bp_content_field_module_error--557cc):hover{
+.bp_content_field_module_contentButton--7aebd:not(.bp_content_field_module_error--7aebd):hover{
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_content_field_module_contentButton--557cc:focus-visible{
+.bp_content_field_module_contentButton--7aebd:focus-visible{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_content_field_module_contentButton--557cc:focus-visible:not(.bp_content_field_module_error--557cc){
+.bp_content_field_module_contentButton--7aebd:focus-visible:not(.bp_content_field_module_error--7aebd){
   padding:calc(var(--border-1) - var(--border-1)) calc(var(--space-3) - var(--border-1));
 }
 
-.bp_content_field_module_contentIconContainer--557cc{
+.bp_content_field_module_contentIconContainer--7aebd{
   align-items:center;
   background:var(--surface-cta-surface-icon-utility);
   border-radius:50%;
   display:flex;
   height:var(--space-6);
   justify-content:center;
+  min-width:var(--space-6);
   width:var(--space-6);
 }
 
-.bp_content_field_module_contentIconShared--557cc{
+.bp_content_field_module_contentIconShared--7aebd{
   min-height:var(--space-6);
   min-width:var(--space-6);
 }
 
-.bp_content_field_module_contentLabelWrapper--557cc{
+.bp_content_field_module_contentLabelWrapper--7aebd{
   align-items:center;
   display:flex;
   flex-grow:1;
   min-width:0;
 }
 
-.bp_content_field_module_contentLabel--557cc{
+.bp_content_field_module_contentLabel--7aebd{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_content_field_module_clearButton--557cc{
+.bp_content_field_module_clearButton--7aebd{
   all:unset;
   align-items:center;
   background:var(--surface-cta-surface-secondary);
@@ -2986,18 +2987,18 @@
   display:flex;
   padding:var(--border-1) var(--space-2);
 }
-.bp_content_field_module_clearButton--557cc:hover{
+.bp_content_field_module_clearButton--7aebd:hover{
   background:var(--surface-cta-surface-secondary-hover);
 }
-.bp_content_field_module_clearButton--557cc:not(.bp_content_field_module_error--557cc):hover{
+.bp_content_field_module_clearButton--7aebd:not(.bp_content_field_module_error--7aebd):hover{
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_content_field_module_clearButton--557cc.bp_content_field_module_error--557cc{
+.bp_content_field_module_clearButton--7aebd.bp_content_field_module_error--7aebd{
   border:var(--border-2) solid var(--border-dropdown-border-error);
   border-left:none;
   position:relative;
 }
-.bp_content_field_module_clearButton--557cc.bp_content_field_module_error--557cc.bp_content_field_module_hasSelection--557cc:hover::after{
+.bp_content_field_module_clearButton--7aebd.bp_content_field_module_error--7aebd.bp_content_field_module_hasSelection--7aebd:hover::after{
   background-color:var(--border-cta-border-secondary);
   content:"";
   height:100%;
@@ -3006,11 +3007,11 @@
   top:0;
   width:1px;
 }
-.bp_content_field_module_clearButton--557cc:focus-visible{
+.bp_content_field_module_clearButton--7aebd:focus-visible{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_content_field_module_clearButton--557cc:focus-visible:not(.bp_content_field_module_error--557cc){
+.bp_content_field_module_clearButton--7aebd:focus-visible:not(.bp_content_field_module_error--7aebd){
   padding:calc(var(--border-1) - var(--border-1)) calc(var(--space-2) - var(--border-1));
 }
 .bp_scrollable_container_module_scrollableContainer--074ff{

package/lib-esm/util-components/focus-trap/focus-trap.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { type FocusTrapProps } from './types';
 export declare const FocusTrap: ({ containerRef, children, customInitialFocus }: FocusTrapProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.36.5",
+    "version": "6.37.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.7"
     },
-    "gitHead": "d49b33cb093048a4b79735034f8e18aa4f6ee49f",
+    "gitHead": "1a88160eddd95364ad06361a6bfa6a3f49b6a51a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {