@box/blueprint-web 6.38.4 → 6.38.6

package/lib-esm/collapsible/collapsible-section.d.ts

@@ -9,7 +9,7 @@ export declare const CollapsibleSection: import("react").ForwardRefExoticCompone
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Slot: (props: {
         name: CollapsibleSectionSlotName;
-        children: JSX.Element | null;
-    }) => JSX.Element | null;
+        children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 };
 export {};

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

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { type ReactElement } from 'react';
 export interface ContentFieldProps {
     /**
      * custom aria label for the content field clear button.
@@ -11,7 +11,7 @@ export interface ContentFieldProps {
     /**
      * type of the selected content(document, folder, etc.)
      */
-    itemIcon?: React.JSX.Element;
+    itemIcon?: ReactElement;
     /**
      * whether or not the selected content is a shared folder.
      */

package/lib-esm/guided-tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import type * as RadixPopover from '@radix-ui/react-popover';
-import { type JSX, type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type ReactElement, type SVGProps } from 'react';
 export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
     /** The preferred alignment against the anchor. May change when collisions occur.
      * "start" | "center" | "end"
@@ -10,7 +10,7 @@ export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTM
     /** Localized aria-label for close button */
     closeLabel: string;
     /** React element with the content of GuildedTooltip */
-    content: React.ReactElement;
+    content: ReactElement;
     /**
      * "data-resin-target" to be passed to Close button.
      */
@@ -58,7 +58,7 @@ export interface GuidedTooltipIconProps {
     /**
      * SVG Icon element to pass to GuidedTooltip Icon
      * */
-    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>> | ((props: SVGProps<SVGSVGElement>) => JSX.Element);
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>> | ((props: SVGProps<SVGSVGElement>) => ReactElement);
 }
 export interface GuidedTooltipTitleProps {
     /** Title content. */

package/lib-esm/input-chip/types.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 export interface InputChipProps extends HTMLAttributes<HTMLElement> {
     /**
      * Text content inside the Chip.
@@ -7,7 +7,7 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
     /**
      * The Avatar element to display.
      */
-    avatar?: JSX.Element;
+    avatar?: ReactElement;
     /**
      * The theme color of the component.
      *

package/lib-esm/list-item/cell/action-cell.js

@@ -23,7 +23,7 @@ const ActionCell = /*#__PURE__*/forwardRef((props, ref) => {
   } = useTableOptions();
   const divRef = useRef(null);
   // Allows consumer to sync changes to dropdown `open` state. Ensures actions are shown when dropdown is open
-  // TODO: Once we have feature complete dropdown, this could be built-in.
+  // TODO(DSYS-1175): Once we have feature complete dropdown, this could be built-in.
   const onOpenChange = isOpen => {
     if (divRef.current) {
       divRef.current.setAttribute('data-state', isOpen ? 'open' : 'closed');

package/lib-esm/primitives/chips/filter-chip/filter-combo-chip.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useContext, useCallback, useReducer, cloneElement, createContext } from 'react';
+import { forwardRef, useContext, useCallback, useReducer, useMemo, cloneElement, createContext } from 'react';
 import { DropdownMenu } from '../../dropdown-menu/index.js';
 import styles from '../chip.module.js';
 import { FilterChipGroupContext } from './filter-chip-group-context.js';
@@ -59,11 +59,12 @@ const FilterComboChip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const [selectionCount, dispatchSelectionCountChange] = useReducer(comboChipSelectionCountReducer, 0);
+  const dispatchSelectionCountChangeMemo = useMemo(() => ({
+    dispatchSelectionCountChange
+  }), []);
   const isSelectionActive = selectionCount > 0;
   return jsx(FilterComboChipContext.Provider, {
-    value: {
-      dispatchSelectionCountChange
-    },
+    value: dispatchSelectionCountChangeMemo,
     children: jsxs(DropdownMenu.Root, {
       ...rest,
       children: [jsx(DropdownMenu.Trigger, {

package/lib-esm/primitives/date-i18n-provider/date-i18n-provider.d.ts

@@ -1,5 +1,5 @@
 import { type I18nProviderProps } from '@react-aria/i18n';
-import { type JSX } from 'react';
+import { type ReactElement } from 'react';
 interface DateI18nProviderProps extends I18nProviderProps {
     /**
      * Locale in which date should be displayed, e.g. en-US
@@ -8,8 +8,8 @@ interface DateI18nProviderProps extends I18nProviderProps {
     /**
      * I18nProvider children element to be projected
      */
-    children: JSX.Element;
+    children: ReactElement;
 }
 /** Provides internationalized strings to date related components. */
-export declare const DateI18nProvider: ({ locale, children, ...rest }: DateI18nProviderProps) => globalThis.JSX.Element;
+export declare const DateI18nProvider: ({ locale, children, ...rest }: DateI18nProviderProps) => JSX.Element;
 export {};

package/lib-esm/primitives/dropdown-menu/dropdown-menu-content.js

@@ -16,7 +16,7 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return (
-    // TODO: Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
+    // TODO(DSYS-440): Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(DropdownMenuPrimitive.Portal, {
       container: container,
       children: jsx(DropdownMenuPrimitive.Content, {

package/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-content.js

@@ -16,7 +16,7 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
     ...rest
   } = props;
   return (
-    // TODO: Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
+    // TODO(DSYS-440): Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(DropdownMenuPrimitive.Portal, {
       container: container,
       children: jsx(DropdownMenuPrimitive.SubContent, {

package/lib-esm/primitives/notification/notification-provider.d.ts

@@ -2,7 +2,7 @@ import * as Toast from '@radix-ui/react-toast';
 import * as React from 'react';
 import { type PrivateNotificationElementProps } from './private-notification-element';
 export type NotificationProviderProps = Toast.ToastProviderProps;
-export declare const useNotification: () => {
+interface NotificationContextType {
     /**
      * Creates notification based on passed arguments.
      * @returns string, which is notification `id`.
@@ -27,7 +27,8 @@ export declare const useNotification: () => {
      * @param newProps - new properties of notification
      */
     updateNotification: (id: string, newProps: PrivateNotificationElementProps) => void;
-};
+}
+export declare const useNotification: () => NotificationContextType;
 /**
  * A wrapper for notifications. It must be provided by the application.
  *
@@ -35,3 +36,4 @@ export declare const useNotification: () => {
  * useNotification hook provides access to store, and methods to interact with it.
  */
 export declare const NotificationProvider: React.FC<NotificationProviderProps>;
+export {};

package/lib-esm/primitives/popover/popover-content-container.js

@@ -23,7 +23,7 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     setIsContentOverflowing
   }), [isContentOverflowing, setIsContentOverflowing]);
   return (
-    // TODO: Unify all Portals (Tooltip, Select, Popover, etc...), Expose a Provider which would tell where to mount (body? other elem?)
+    // TODO(DSYS-440): Unify all Portals (Tooltip, Select, Popover, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(RadixPopover.Portal, {
       container: container,
       children: jsx(PopoverOverflowContext.Provider, {

package/lib-esm/primitives/slot.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import { type ReactElement } from 'react';
 export declare const Slot: <T>(props: {
     name: T;
-    children: JSX.Element | null;
-}) => JSX.Element | null;
+    children: ReactElement | null;
+}) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/lib-esm/primitives/slot.js

@@ -1,4 +1,3 @@
-// This should never be part of public api because of generic type
 const Slot = props => props.children;
 
 export { Slot };

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

@@ -22,8 +22,8 @@ import { type SelectContentProps, type SelectOptionProps } from './types';
  */
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps, keyof {
     label: string;
-    placeholder: string | JSX.Element;
-    children?: JSX.Element | undefined;
+    placeholder: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     defaultValue?: string | undefined;
     value?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;
@@ -38,8 +38,8 @@ export declare const Select: import("react").ForwardRefExoticComponent<Omit<Sele
     error?: import("react").ReactNode;
 }> & {
     label: string;
-    placeholder: string | JSX.Element;
-    children?: JSX.Element | undefined;
+    placeholder: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     defaultValue?: string | undefined;
     value?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 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 Modify } from '../types/modify';
 type ExtraProps = {
     /**
@@ -9,11 +9,11 @@ type ExtraProps = {
     /**
      * The placeholder value displayed within the select trigger button when no values has been selected yet.
      */
-    placeholder: string | JSX.Element;
+    placeholder: string | ReactElement;
     /**
      * Pass the select content using `<Select.Content />`.
      */
-    children?: JSX.Element;
+    children?: ReactElement;
     /**
      * The value of the select when initially rendered. Use when you do not need to control the state of the select.
      */

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/lib-esm/utils/processString.d.ts

@@ -2,8 +2,8 @@
  * Helper method to apply a function to all matching regex in a string
  * ref: https://github.com/EfogDev/react-process-string/blob/master/index.js
  * */
-import type React from 'react';
-type ProcessedString = React.JSX.Element | string;
+import { type ReactElement } from 'react';
+type ProcessedString = ReactElement | string;
 type ProcessStringInput = {
     processingRegex: RegExp;
     processingFunction: (key: number, result: Array<string>) => ProcessedString;

package/lib-esm/utils/useForkRef.js

@@ -1,8 +1,5 @@
 import { useMemo } from 'react';
 
-/**
- * Credit to material-ui for this snippet
- */
 function setRef(ref, value) {
   if (typeof ref === 'function') {
     ref(value);

package/package.json

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