@box/blueprint-web 12.1.3 → 12.3.0

package/dist/lib-esm/accordion/accordion.js

@@ -67,16 +67,12 @@ const Item = props => {
   // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
-    statusIcon,
-    statusIconAriaLabel,
     title,
     disabled,
     error,
     errorIconAriaLabel,
     ...itemRest
   } = props;
-  const hasStatusLabel = isDefined(status) && !isDefined(statusIcon);
-  const hasStatusIcon = !isDefined(status) && isDefined(statusIcon);
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -91,17 +87,10 @@ const Item = props => {
             children: title
           }), jsxs("div", {
             className: styles.accordionHeaderTrigger,
-            children: [hasStatusLabel && jsx(Status, {
+            children: [isDefined(status) && jsx(Status, {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
-            }), hasStatusIcon && jsx(Status, {
-              "aria-label": statusIconAriaLabel,
-              className: styles.accordionIconStatus,
-              color: error ? statusColors.error : statusColors.default,
-              hideText: true,
-              icon: statusIcon,
-              text: statusIconAriaLabel ?? ''
             }), jsx(PointerChevron, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon

package/dist/lib-esm/accordion/accordion.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--ae5da","slideDown":"bp_accordion_module_slideDown--ae5da","slideUp":"bp_accordion_module_slideUp--ae5da","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--ae5da","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--ae5da","accordionItem":"bp_accordion_module_accordionItem--ae5da","accordionFixedContent":"bp_accordion_module_accordionFixedContent--ae5da","accordionHeader":"bp_accordion_module_accordionHeader--ae5da","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--ae5da","accordionStatus":"bp_accordion_module_accordionStatus--ae5da","accordionIconStatus":"bp_accordion_module_accordionIconStatus--ae5da","accordionTrigger":"bp_accordion_module_accordionTrigger--ae5da","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--ae5da"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--eb917","slideDown":"bp_accordion_module_slideDown--eb917","slideUp":"bp_accordion_module_slideUp--eb917","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--eb917","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--eb917","accordionItem":"bp_accordion_module_accordionItem--eb917","accordionFixedContent":"bp_accordion_module_accordionFixedContent--eb917","accordionHeader":"bp_accordion_module_accordionHeader--eb917","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--eb917","accordionStatus":"bp_accordion_module_accordionStatus--eb917","accordionTrigger":"bp_accordion_module_accordionTrigger--eb917","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--eb917"};
 
 export { styles as default };

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

@@ -1,5 +1,4 @@
 import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionItemProps as RadixAccordionItemProps } from '@radix-ui/react-accordion';
-import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 interface Loading {
     /** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
@@ -17,23 +16,6 @@ interface Errorable {
      */
     errorIconAriaLabel?: string;
 }
-interface StatusIconProps {
-    /**
-     * Icon displayed in a status pill next to the title
-     * */
-    statusIcon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
-    /**
-     * Description of icon displayed in a status pill next to the title
-     * */
-    statusIconAriaLabel: string;
-}
-type StatusProps = {
-    status: number;
-    statusIcon?: never;
-    statusIconAriaLabel?: never;
-} | ({
-    status?: never;
-} & RequireAllOrNone<StatusIconProps, keyof StatusIconProps>);
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -51,11 +33,15 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Header text displayed
      */
     title: string;
+    /**
+     * Number displayed in a status pill next to the title
+     * */
+    status?: number;
     /**
      * Disabled state of the section.
      */
     disabled?: boolean;
-} & StatusProps;
+};
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/combobox/combobox.js

@@ -79,6 +79,7 @@ const RootInner = ({
     clearButtonAriaLabel,
     endComboboxIcon,
     idForLabel,
+    displaySingleSelectionAsChip = multiselect,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
@@ -152,6 +153,11 @@ const RootInner = ({
   const {
     setValue: setSelectedValue
   } = selectStore;
+  useEffect(() => {
+    if (inputValue.trim() === '' && !multiselect && selectedValue && !displaySingleSelectionAsChip && !clearOnBlur) {
+      setSelectedValue('');
+    }
+  }, [inputValue, multiselect, setSelectedValue, selectedValue, displaySingleSelectionAsChip, clearOnBlur]);
   const resetSelectedValue = useCallback(() => {
     setSelectedValue(multiselect ? [] : '');
   }, [multiselect, setSelectedValue]);
@@ -165,15 +171,28 @@ const RootInner = ({
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
   }, []);
+  const onOptionClick = useCallback(displayedValue => {
+    // Check if inputValue is different from displayedValue,
+    // if so, update inputValue to displayedValue
+    // Othwerwise, clicking the option will do nothing.
+    if (inputValue.trim() !== displayedValue && !displaySingleSelectionAsChip) {
+      setInputValue(displayedValue);
+    }
+  }, [inputValue, setInputValue, displaySingleSelectionAsChip]);
+  const createClickHandler = useCallback(displayedValue => () => {
+    onOptionClick(displayedValue);
+  }, [onOptionClick]);
   const renderSelectItemOption = useCallback(option => {
     const value = getOptionValue(option);
+    const displayedValue = displayValue ? displayValue(option) : value;
     return jsxs(OptionWithIndicator, {
       ...(typeof option === 'object' ? option : {}),
       disabled: typeof option === 'object' && option.disabled,
+      onClick: createClickHandler(displayedValue),
       value: value,
       children: [jsx(Indicator, {}), displayValue ? displayValue(option) : value]
     });
-  }, [displayValue]);
+  }, [displayValue, createClickHandler]);
   const renderOptionFn = renderOption || renderSelectItemOption;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const selectedValueMemoized = useMemo(() => selectedValue, [JSON.stringify(selectedValue)]);
@@ -182,7 +201,8 @@ const RootInner = ({
     if (Array.isArray(selectedValueMemoized) || showSingleSelectChip) {
       setInputValue('');
     } else if (selectedValueMemoized) {
-      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue));
+      const selectedDisplayValue = getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue);
+      setInputValue(selectedDisplayValue);
       // Also focus input for single-select variant
       focusInput();
     }
@@ -259,7 +279,7 @@ const RootInner = ({
   const reference = useForkRef(inputRef, ref);
   const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
-  const showSingleSelectChip = showComboboxCancelButton && !Array.isArray(selectedValue) && !!selectedValue;
+  const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
   const Label = useLabelable(label, comboboxId);
   const inlineErrorId = useUniqueId('inline-error-');
   const ariaDescribedBy = clsx(rest['aria-describedby'], {

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

@@ -217,6 +217,13 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default true
      */
     hideOnEscape?: ComboboxPopoverProps['hideOnEscape'];
+    /**
+     * If `true`, displays the single selected value in the input field as a chip.
+     * This is independent of the clear button visibility.
+     *
+     * @default false
+     */
+    displaySingleSelectionAsChip?: boolean;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/dist/lib-esm/index.css

@@ -612,19 +612,19 @@
 .bp_status_module_colorSurfaceStatusSurfaceGreen--6c98f.bp_status_module_interactiveStatus--6c98f:focus-visible{
   background-color:var(--surface-status-surface-green-focus);
 }
-.bp_accordion_module_accordionContent--ae5da[data-state=open]{
-  animation:bp_accordion_module_slideDown--ae5da .15s ease-out;
+.bp_accordion_module_accordionContent--eb917[data-state=open]{
+  animation:bp_accordion_module_slideDown--eb917 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--ae5da[data-state=closed]{
-  animation:bp_accordion_module_slideUp--ae5da .15s ease-out;
+.bp_accordion_module_accordionContent--eb917[data-state=closed]{
+  animation:bp_accordion_module_slideUp--eb917 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--ae5da{
+.bp_accordion_module_accordionContent--eb917{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--ae5da{
+@keyframes bp_accordion_module_slideDown--eb917{
   from{
     height:0;
   }
@@ -632,7 +632,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--ae5da{
+@keyframes bp_accordion_module_slideUp--eb917{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -640,7 +640,7 @@
     height:0;
   }
 }
-.bp_accordion_module_accordionContentWrapper--ae5da{
+.bp_accordion_module_accordionContentWrapper--eb917{
   display:flex;
   flex-direction:column;
   gap:var(--space-4);
@@ -649,20 +649,20 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--ae5da{
+.bp_accordion_module_accordionInlineErrorWrapper--eb917{
   padding-block-start:var(--space-4);
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionItem--ae5da{
+.bp_accordion_module_accordionItem--eb917{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   min-width:320px;
 }
-.bp_accordion_module_accordionItem--ae5da,.bp_accordion_module_accordionItem--ae5da > [data-state=open]{
+.bp_accordion_module_accordionItem--eb917,.bp_accordion_module_accordionItem--eb917 > [data-state=open]{
   background-color:var(--surface-accordion-surface);
 }
 
-.bp_accordion_module_accordionFixedContent--ae5da{
+.bp_accordion_module_accordionFixedContent--eb917{
   background-color:var(--surface-surface);
   display:flex;
   flex-direction:column;
@@ -671,7 +671,7 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionHeader--ae5da{
+.bp_accordion_module_accordionHeader--eb917{
   color:var(--text-text-on-light);
   display:flex;
   font-family:var(--title-small-font-family);
@@ -688,19 +688,16 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionHeaderTrigger--ae5da{
+.bp_accordion_module_accordionHeaderTrigger--eb917{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionIconStatus--ae5da,.bp_accordion_module_accordionStatus--ae5da{
+.bp_accordion_module_accordionStatus--eb917{
   margin-inline-start:var(--space-2);
 }
-.bp_accordion_module_accordionIconStatus--ae5da > span{
-  padding:0 var(--space-1);
-}
 
-.bp_accordion_module_accordionTrigger--ae5da{
+.bp_accordion_module_accordionTrigger--eb917{
   align-items:center;
   background-color:var(--surface-surface);
   border:none;
@@ -711,31 +708,31 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--ae5da:active{
+.bp_accordion_module_accordionTrigger--eb917:active{
   background-color:var(--surface-surface);
 }
-.bp_accordion_module_accordionTrigger--ae5da:hover{
+.bp_accordion_module_accordionTrigger--eb917:hover{
   background-color:var(--surface-accordion-surface-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--ae5da:focus-visible{
+.bp_accordion_module_accordionTrigger--eb917:focus-visible{
   background-color:var(--surface-surface-hover);
   box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--ae5da:disabled{
+.bp_accordion_module_accordionTrigger--eb917:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--ae5da:disabled:hover{
+.bp_accordion_module_accordionTrigger--eb917:disabled:hover{
   background-color:var(--gray-white);
 }
-.bp_accordion_module_accordionTrigger--ae5da .bp_accordion_module_accordionTriggerIcon--ae5da{
+.bp_accordion_module_accordionTrigger--eb917 .bp_accordion_module_accordionTriggerIcon--eb917{
   color:var(--gray-50);
   flex-shrink:0;
   margin-inline-start:var(--space-3);
 }
-.bp_accordion_module_accordionTrigger--ae5da[data-state=open] .bp_accordion_module_accordionTriggerIcon--ae5da{
+.bp_accordion_module_accordionTrigger--eb917[data-state=open] .bp_accordion_module_accordionTriggerIcon--eb917{
   transform:rotate(180deg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.1.3",
+    "version": "12.3.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {