@box/blueprint-web 17.12.1 → 17.12.3

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

@@ -51,6 +51,7 @@ const ComboboxGroupSelect = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     disabled: isDisabled,
     error: null,
     id: selectId,
+    label: "",
     onBlur: handleBlur,
     onFocus: handleFocus
   });

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

@@ -7,10 +7,9 @@ export interface ComboboxGroupProps {
     label: string;
     hideLabel?: boolean;
 }
-export interface ComboboxGroupSelectProps extends Omit<SelectProps, 'disabled'> {
+export interface ComboboxGroupSelectProps extends Omit<SelectProps, 'disabled' | 'label' | 'labelInfoText' | 'labelInfoBadgeAriaLabel'> {
     disabled?: never;
     error?: boolean;
-    label: never;
     position?: 'leading' | 'trailing';
 }
 export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends Omit<ComboboxBaseProps<Multiple, FreeInput, T>, 'defaultValue' | 'value' | 'onValueChange'> {

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

@@ -12,6 +12,7 @@ import { useBlueprintConfiguration } from '../blueprint-configuration-context/us
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
@@ -26,6 +27,8 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     error,
     hideLabel,
+    labelInfoBadgeAriaLabel,
+    labelInfoText,
     label,
     placeholder,
     placeholderLeftElement,
@@ -97,6 +100,7 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onValueChange,
     onOpenChange: handleOpenChange
   };
+  const shouldShowInfoBadge = !hideLabel && !!label && labelInfoText && labelInfoBadgeAriaLabel;
   const Label = useLabelable(label, selectId, required);
   const inlineErrorId = useUniqueId('inline-error-');
   const ariaDescribedBy = clsx(triggerProps['aria-describedby'], {
@@ -124,7 +128,14 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }, className),
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     "data-modern": 'true' ,
-    children: [jsx(Label, {
+    children: [shouldShowInfoBadge ? jsx(TextWithInfoBadge, {
+      infoBadgeAriaLabel: labelInfoBadgeAriaLabel,
+      infoText: labelInfoText,
+      children: jsx(Label, {
+        className: styles.label,
+        hideLabel: hideLabel
+      })
+    }) : jsx(Label, {
       className: styles.label,
       hideLabel: hideLabel
     }), jsx(SelectProvider, {

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

@@ -1,7 +1,16 @@
 import { type SelectItemProps as RadixItemProps, type SelectContentProps as RadixSelectContentProps, type SelectProps as RadixSelectProps, type SelectTriggerProps as RadixSelectTriggerProps } from '@radix-ui/react-select';
 import { type ReactElement } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
 import { type Modify } from '../types/modify';
 import { type Labelable } from '../util-components/labelable/types';
+import { type StyledText } from '../utils/commonTypes';
+/** Label-info tooltip props. Using these requires a TooltipProvider around this Select (or, ideally, around the app). */
+export interface LabelInfo {
+    /** Additional text to aid in use. It will appear inside info icon tooltip in the label. */
+    labelInfoText?: StyledText;
+    /** aria-label for the label badge button. */
+    labelInfoBadgeAriaLabel?: string;
+}
 export interface ExtraProps extends Labelable {
     /**
      * The placeholder value displayed within the select trigger button when no values has been selected yet.
@@ -99,7 +108,7 @@ type SelectState = {
     readonly: true;
     subText?: string;
 };
-export type SelectProps = Modify<RadixSelectTriggerProps, ExtraProps & SelectState>;
+export type SelectProps = Modify<RadixSelectTriggerProps, ExtraProps & SelectState & RequireAllOrNone<LabelInfo, keyof LabelInfo>>;
 export interface SelectContentProps extends React.ComponentPropsWithRef<'div'> {
     /**
      * Pass the select options and separators using `<Select.Option />` and `<Select.Separator />`.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.12.1",
+    "version": "17.12.3",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.10.14",
+        "@box/blueprint-web-assets": "^5.10.16",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.58",
+        "@box/storybook-utils": "^1.2.60",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",