@box/blueprint-web 8.1.0 → 8.2.0

package/lib-esm/combobox/combobox.js

@@ -9,11 +9,12 @@ import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { ChipsGroup } from './chips-group.js';
 import styles from './combobox.module.js';
-import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
@@ -45,6 +46,7 @@ const RootInner = ({
     open,
     onOpenChange,
     onFocus,
+    onBlur,
     defaultInputValue = '',
     inputValue: inputValueProp,
     onInputValueChange,
@@ -70,11 +72,12 @@ const RootInner = ({
     focusLoop,
     clearButtonAriaLabel,
     endComboboxIcon,
+    idForLabel,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
   const inputRef = useRef(null);
-  const comboboxId = useUniqueId('combobox-');
+  const comboboxId = useUniqueId('combobox-', !idForLabel) || idForLabel || 'default-combobox-id';
   const popoverRef = useRef(null);
   const popoverRefCallback = useCallback(node => {
     popoverRef.current = node;
@@ -277,13 +280,15 @@ const RootInner = ({
             ...comboboxProps,
             ref: reference,
             "aria-describedby": ariaDescribedBy,
-            "aria-invalid": hasError,
+            ...(hasError && {
+              'aria-invalid': 'true'
+            }),
             "aria-required": required,
             autoSelect: false,
             className: styles.textInput,
             disabled: disabled,
             id: comboboxId,
-            onBlur: handleOnBlur,
+            onBlur: composeEventHandlers(onBlur, handleOnBlur),
             onFocus: handleOnFocus,
             onKeyDown: handleKeyDown,
             required: required,
@@ -315,14 +320,16 @@ const RootInner = ({
     id: comboboxId,
     render: jsx(TextArea, {
       ref: reference,
-      "aria-invalid": hasError,
+      ...(hasError && {
+        'aria-invalid': 'true'
+      }),
       "aria-required": required,
       className: styles.textInput,
       disabled: disabled,
       error: error,
       hideLabel: hideLabel,
       label: label,
-      onBlur: handleOnBlur,
+      onBlur: composeEventHandlers(onBlur, handleOnBlur),
       onFocus: handleOnFocus,
       onKeyDown: handleKeyDown,
       required: required

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--92da0","disabled":"bp_combobox_module_disabled--92da0","label":"bp_combobox_module_label--92da0","hiddenLabel":"bp_combobox_module_hiddenLabel--92da0","comboboxContainer":"bp_combobox_module_comboboxContainer--92da0","withComboboxButtons":"bp_combobox_module_withComboboxButtons--92da0","error":"bp_combobox_module_error--92da0","textInputWrapper":"bp_combobox_module_textInputWrapper--92da0","textInput":"bp_combobox_module_textInput--92da0","errorIcon":"bp_combobox_module_errorIcon--92da0","comboboxButtons":"bp_combobox_module_comboboxButtons--92da0","withChips":"bp_combobox_module_withChips--92da0","inlineError":"bp_combobox_module_inlineError--92da0","popover":"bp_combobox_module_popover--92da0","option":"bp_combobox_module_option--92da0","indicator":"bp_combobox_module_indicator--92da0","indicatorIcon":"bp_combobox_module_indicatorIcon--92da0","optionWithIndicator":"bp_combobox_module_optionWithIndicator--92da0","loadingIndicator":"bp_combobox_module_loadingIndicator--92da0","noResultOption":"bp_combobox_module_noResultOption--92da0"};
+var styles = {"container":"bp_combobox_module_container--4d653","disabled":"bp_combobox_module_disabled--4d653","label":"bp_combobox_module_label--4d653","hiddenLabel":"bp_combobox_module_hiddenLabel--4d653","comboboxContainer":"bp_combobox_module_comboboxContainer--4d653","withComboboxButtons":"bp_combobox_module_withComboboxButtons--4d653","error":"bp_combobox_module_error--4d653","textInputWrapper":"bp_combobox_module_textInputWrapper--4d653","textInput":"bp_combobox_module_textInput--4d653","errorIcon":"bp_combobox_module_errorIcon--4d653","comboboxButtons":"bp_combobox_module_comboboxButtons--4d653","withChips":"bp_combobox_module_withChips--4d653","inlineError":"bp_combobox_module_inlineError--4d653","popover":"bp_combobox_module_popover--4d653","option":"bp_combobox_module_option--4d653","indicator":"bp_combobox_module_indicator--4d653","indicatorIcon":"bp_combobox_module_indicatorIcon--4d653","optionWithIndicator":"bp_combobox_module_optionWithIndicator--4d653","loadingIndicator":"bp_combobox_module_loadingIndicator--4d653","noResultOption":"bp_combobox_module_noResultOption--4d653"};
 
 export { styles as default };

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

@@ -185,6 +185,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Callback used when combobox input/textarea is focused
      */
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback used when combobox input/textarea loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /**
      * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
      */
@@ -194,6 +198,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * it disappears when the input is not empty
      */
     endComboboxIcon?: React.ReactNode;
+    /**
+     * `idForLabel` is used in the Combobox Group to define the id of the subcomponent associated with the Combobox Group label.
+     */
+    idForLabel?: string;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ComboboxGroupComboboxProps } from './types';
+export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { Combobox } from '../combobox/combobox.js';
+import { useComboboxGroupContext } from './combobox-group-context.js';
+import styles from './combobox-group.module.js';
+
+const ComboboxGroupCombobox = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    position = 'leading',
+    error = false,
+    portalElement,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    errors,
+    setError,
+    inlineErrorId,
+    isDisabled,
+    isSelectFocused,
+    setComboboxFocus,
+    comboboxId,
+    setSubcomponentId
+  } = useComboboxGroupContext();
+  const borderStyles = position === 'trailing' ? styles.trailing : styles.leading;
+  const handleFocus = useCallback(() => setComboboxFocus(true), [setComboboxFocus]);
+  const handleBlur = useCallback(() => setComboboxFocus(false), [setComboboxFocus]);
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const isLeading = position === 'leading';
+  useEffect(() => {
+    if (isLeading) {
+      setSubcomponentId(comboboxId);
+    }
+  }, [isLeading, comboboxId, setSubcomponentId]);
+  useEffect(() => {
+    setError('combobox', error);
+  }, [error, setError]);
+  return jsx(Combobox, {
+    as: "input",
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": comboboxHasError ? inlineErrorId : undefined,
+    "aria-invalid": comboboxHasError,
+    className: clsx(borderStyles, {
+      [styles.errorSelect]: selectHasError
+    }, {
+      [styles.errorCombobox]: comboboxHasError
+    }, {
+      [styles.selectHasFocus]: isSelectFocused
+    }),
+    disabled: isDisabled,
+    error: null,
+    idForLabel: comboboxId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    portalElement: portalElement
+  });
+});
+
+export { ComboboxGroupCombobox };

package/lib-esm/combobox-group/combobox-group-context.d.ts

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from 'react';
+interface ComboboxGroupContextType {
+    errors: {
+        combobox?: boolean;
+        select?: boolean;
+    };
+    setError: (type: 'combobox' | 'select', error: boolean) => void;
+    inlineErrorId: string;
+    selectId: string;
+    comboboxId: string;
+    subcomponentId: string;
+    setSubcomponentId: (id: string) => void;
+    isDisabled: boolean;
+    isComboboxFocused: boolean;
+    setComboboxFocus: (focus: boolean) => void;
+    isSelectFocused: boolean;
+    setSelectFocus: (focus: boolean) => void;
+}
+export declare const ComboboxGroupProvider: React.FC<{
+    children: ReactNode;
+    isDisabled: boolean;
+}>;
+export declare const useComboboxGroupContext: () => ComboboxGroupContextType;
+export {};

package/lib-esm/combobox-group/combobox-group-context.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useUniqueId } from '../utils/useUniqueId.js';
+
+const ComboboxGroupContext = /*#__PURE__*/createContext(undefined);
+const ComboboxGroupProvider = ({
+  children,
+  isDisabled
+}) => {
+  const [errors, setErrors] = useState({});
+  const [isComboboxFocused, setComboboxFocus] = useState(false);
+  const [isSelectFocused, setSelectFocus] = useState(false);
+  const [subcomponentId, setSubcomponentId] = useState('');
+  const inlineErrorId = useUniqueId('inline-error-');
+  const selectId = useUniqueId('select-');
+  const comboboxId = useUniqueId('combobox-');
+  const setError = useCallback((type, hasError) => {
+    setErrors(prev => ({
+      ...prev,
+      [type]: hasError
+    }));
+  }, []);
+  const contextValue = useMemo(() => ({
+    isDisabled,
+    errors,
+    setError,
+    inlineErrorId,
+    isComboboxFocused,
+    setComboboxFocus,
+    isSelectFocused,
+    setSelectFocus,
+    subcomponentId,
+    setSubcomponentId,
+    selectId,
+    comboboxId
+  }), [isDisabled, errors, setError, inlineErrorId, isComboboxFocused, setComboboxFocus, isSelectFocused, setSelectFocus, subcomponentId, setSubcomponentId, selectId, comboboxId]);
+  return jsx(ComboboxGroupContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+const useComboboxGroupContext = () => {
+  const context = useContext(ComboboxGroupContext);
+  if (!context) {
+    throw new Error('useComboboxGroupContext must be used within a component wrapped in ComboboxGroup.');
+  }
+  return context;
+};
+
+export { ComboboxGroupProvider, useComboboxGroupContext };

package/lib-esm/combobox-group/combobox-group-select.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ComboboxGroupSelectProps } from './types';
+export declare const ComboboxGroupSelect: import("react").ForwardRefExoticComponent<ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { Select } from '../select/select.js';
+import { useComboboxGroupContext } from './combobox-group-context.js';
+import styles from './combobox-group.module.js';
+
+const ComboboxGroupSelect = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    position = 'trailing',
+    error = false,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    errors,
+    setError,
+    inlineErrorId,
+    isDisabled,
+    setSelectFocus,
+    isComboboxFocused,
+    setSubcomponentId,
+    selectId
+  } = useComboboxGroupContext();
+  const handleFocus = useCallback(() => setSelectFocus(true), [setSelectFocus]);
+  const handleBlur = useCallback(() => setSelectFocus(false), [setSelectFocus]);
+  const borderStyles = position === 'trailing' ? styles.trailing : styles.leading;
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const isLeading = position === 'leading';
+  useEffect(() => {
+    if (isLeading) {
+      setSubcomponentId(selectId);
+    }
+  }, [isLeading, selectId, setSubcomponentId]);
+  useEffect(() => {
+    setError('select', error);
+  }, [error, setError]);
+  return jsx(Select, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": selectHasError ? inlineErrorId : undefined,
+    "aria-invalid": selectHasError,
+    className: clsx(borderStyles, {
+      [styles.errorSelect]: selectHasError
+    }, {
+      [styles.errorCombobox]: comboboxHasError
+    }, {
+      [styles.comboboxHasFocus]: isComboboxFocused
+    }),
+    disabled: isDisabled,
+    error: null,
+    id: selectId,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  });
+});
+
+export { ComboboxGroupSelect };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ComboboxGroupProps } from './types';
+export declare const ComboboxGroup: {
+    ({ children, disabled, ...props }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    Combobox: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
+    Select: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { ComboboxGroupCombobox } from './combobox-group-combobox.js';
+import { ComboboxGroupProvider, useComboboxGroupContext } from './combobox-group-context.js';
+import { ComboboxGroupSelect } from './combobox-group-select.js';
+import styles from './combobox-group.module.js';
+
+const Root = /*#__PURE__*/forwardRef(({
+  children,
+  label,
+  errorMessage,
+  hideLabel,
+  ...props
+}, forwardedRef) => {
+  const {
+    errors,
+    inlineErrorId,
+    isDisabled,
+    subcomponentId
+  } = useComboboxGroupContext();
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const Label = useLabelable(label, subcomponentId);
+  return jsxs("div", {
+    ...props,
+    ref: forwardedRef,
+    className: clsx(styles.container, {
+      [styles.disabled]: isDisabled
+    }),
+    children: [jsx(Label, {
+      className: styles.label,
+      hideLabel: hideLabel
+    }), jsx("div", {
+      className: styles.comboboxGroupcontainer,
+      children: children
+    }), (comboboxHasError || selectHasError) && jsx(InlineError, {
+      id: inlineErrorId,
+      children: errorMessage
+    })]
+  });
+});
+const ComboboxGroup = ({
+  children,
+  disabled,
+  ...props
+}) => {
+  return jsx(ComboboxGroupProvider, {
+    isDisabled: !!disabled,
+    children: jsx(Root, {
+      ...props,
+      children: children
+    })
+  });
+};
+ComboboxGroup.Combobox = ComboboxGroupCombobox;
+ComboboxGroup.Select = ComboboxGroupSelect;
+
+export { ComboboxGroup };

package/lib-esm/combobox-group/combobox-group.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"bp_combobox_group_module_container--88b97","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--88b97","disabled":"bp_combobox_group_module_disabled--88b97","label":"bp_combobox_group_module_label--88b97","trailing":"bp_combobox_group_module_trailing--88b97","leading":"bp_combobox_group_module_leading--88b97","errorCombobox":"bp_combobox_group_module_errorCombobox--88b97","errorSelect":"bp_combobox_group_module_errorSelect--88b97","selectHasFocus":"bp_combobox_group_module_selectHasFocus--88b97","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--88b97"};
+
+export { styles as default };

package/lib-esm/combobox-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './combobox-group';
+export * from './types';

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { type ComboboxBaseProps, type OptionValue } from '../combobox/types';
+import { type SelectProps } from '../select/types';
+export interface ComboboxGroupProps {
+    children: React.ReactNode;
+    disabled?: boolean;
+    errorMessage?: string;
+    label: string;
+    hideLabel?: boolean;
+}
+export interface ComboboxGroupSelectProps extends SelectProps {
+    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 ComboboxBaseProps<Multiple, FreeInput, T> {
+    disabled?: never;
+    error?: boolean;
+    label: never;
+    position?: 'leading' | 'trailing';
+}