@box/blueprint-web 9.1.3 → 9.2.1

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

@@ -0,0 +1,3 @@
+import { type FocusableProps } from '@ariakit/react';
+import React from 'react';
+export declare const Focusable: React.ForwardRefExoticComponent<Omit<FocusableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/focusable/focusable.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Focusable as Focusable$1 } from '@ariakit/react';
+import { forwardRef, isValidElement } from 'react';
+import { isProduction } from '../utils/is-production.js';
+import { disabledFromProps } from '../utils/disabledFromProps.js';
+
+const Focusable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    focusable = true,
+    ...restProps
+  } = props;
+  if (! /*#__PURE__*/isValidElement(children)) {
+    if (!isProduction()) {
+      /* eslint-disable-next-line no-console */
+      console.error('Focusable children must be a valid React element.');
+    }
+    return children;
+  }
+  const isChildDisabled = disabledFromProps(children.props);
+  const renderProps = isChildDisabled ? {
+    children
+  } : {
+    render: children
+  };
+  return jsx(Focusable$1, {
+    ref: forwardedRef,
+    focusable: focusable,
+    tabIndex: focusable ? 0 : undefined,
+    ...restProps,
+    ...renderProps
+  });
+});
+
+export { Focusable };

package/lib-esm/focusable/index.d.ts

@@ -0,0 +1 @@
+export { Focusable } from './focusable';

package/lib-esm/index.d.ts

@@ -17,6 +17,7 @@ export * from './data-table/data-table';
 export * from './date-picker';
 export * from './divider';
 export * from './empty-state';
+export * from './focusable';
 export * from './ghost';
 export * from './grid-list-item';
 export * from './guided-tooltip';

package/lib-esm/index.js

@@ -20,6 +20,7 @@ export { DataTableWrapper, StickyCell } from './data-table/data-table.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { Divider } from './divider/divider.js';
 export { EmptyState } from './empty-state/empty-state.js';
+export { Focusable } from './focusable/focusable.js';
 export { Ghost } from './ghost/ghost.js';
 export { GridList } from './grid-list-item/index.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';

package/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -3,6 +3,7 @@ import { CompositeItem, Button } from '@ariakit/react';
 import { Gray05, Gray100, BoxBlue100, DarkBlue100, GreenLight100, Grimace100, Size4, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import Color from 'color';
+import omit from 'lodash/omit';
 import { forwardRef, createElement } from 'react';
 import { Text } from '../../text/text.js';
 import { Ghost } from '../../ghost/ghost.js';
@@ -42,10 +43,11 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
   const shouldShowTooltip = !isButtonDisabled && !isWithLabel;
   const ariaLabel = !isWithLabel ? props['aria-label'] : props.label;
+  const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon']) : restProps;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
   const button = jsx(CompositeItem, {
     render: jsxs(Button, {
-      ...restProps,
+      ...buttonProps,
       ref: forwardedRef,
       "aria-label": loading ? loadingAriaLabel : ariaLabel,
       className: clsx(styles.optionButton, className, {

package/lib-esm/primitives/select-menu-grid/select-menu-grid.js

@@ -17,6 +17,10 @@ const SelectMenuGrid = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
+  if (new Set(Children.toArray(children).map(child => child?.type)).size > 1) {
+    // eslint-disable-next-line no-console
+    console.warn('SelectMenuGrid: all children should be of the same type');
+  }
   const childrenByColumns = chunk(Children.toArray(children), columns);
   return jsx(CompositeProvider, {
     children: jsx(Composite, {

package/lib-esm/utils/disabledFromProps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks whether something is disabled or not based on its props.
+ * Provided by ariakit https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/misc.ts
+ */
+export declare function disabledFromProps(props: {
+    disabled?: boolean;
+    'aria-disabled'?: boolean | 'true' | 'false';
+}): boolean;

package/lib-esm/utils/disabledFromProps.js

@@ -0,0 +1,9 @@
+/**
+ * Checks whether something is disabled or not based on its props.
+ * Provided by ariakit https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/misc.ts
+ */
+function disabledFromProps(props) {
+  return props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';
+}
+
+export { disabledFromProps };

package/lib-esm/utils/is-production.d.ts

@@ -0,0 +1 @@
+export declare const isProduction: () => boolean;

package/lib-esm/utils/is-production.js

@@ -0,0 +1,3 @@
+const isProduction = () => process.env.NODE_ENV === 'production';
+
+export { isProduction };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.1.3",
+    "version": "9.2.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "9a853cf5c13b885475cc76128d6eebeb1de4788a",
+    "gitHead": "94a36651838769cd08fd62a9ab1b41e0b4cb5280",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {