@box/blueprint-web 8.3.1 → 8.4.0

package/lib-esm/index.css

@@ -5114,6 +5114,88 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   background-color:var(--surface-radio-surface-selected-hover);
 }
 
+.bp_radio_tiles_option_module_radioTileOption--db24b{
+  background-color:var(--surface-radiotile-surface);
+  border:var(--border-1) solid var(--border-radiotile-border);
+  border-radius:var(--radius-3);
+  box-sizing:border-box;
+  cursor:pointer;
+  display:inline-flex;
+  max-width:100%;
+  min-height:var(--size-10);
+  overflow:hidden;
+  pointer-events:auto;
+  position:relative;
+  transition:background-color var(--animation-duration-2), border var(--animation-duration-2);
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b .bp_radio_tiles_option_module_icon--db24b{
+  display:inline-flex;
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b .bp_radio_tiles_option_module_icon--db24b > svg > path{
+  fill:var(--icon-icon-on-light-secondary);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b.bp_radio_tiles_option_module_disabled--db24b{
+  opacity:.6;
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b:has(:focus-visible){
+  outline:2px solid var(--border-input-border-focus);
+  outline-offset:var(--border-2);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b.bp_radio_tiles_option_module_checked--db24b{
+  background-color:var(--surface-radiotile-surface-selected);
+  border-color:#0000;
+  box-shadow:0 0 0 2px var(--border-radiotile-border-selected);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b.bp_radio_tiles_option_module_checked--db24b:focus-within{
+  outline-offset:var(--border-3);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b.bp_radio_tiles_option_module_checked--db24b .bp_radio_tiles_option_module_icon--db24b > svg > path{
+  fill:var(--icon-icon-blue);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b:hover:not(.bp_radio_tiles_option_module_disabled--db24b, .bp_radio_tiles_option_module_checked--db24b){
+  background-color:var(--surface-radiotile-surface-hover);
+  border:var(--border-1) solid var(--border-radiotile-border-hover);
+}
+.bp_radio_tiles_option_module_radioTileOption--db24b > label{
+  align-items:center;
+  box-sizing:border-box;
+  cursor:inherit;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-2);
+  justify-content:center;
+  padding:var(--space-2);
+  width:100%;
+}
+
+.bp_radio_tiles_option_module_radioTileLabel--db24b{
+  max-width:100%;
+  overflow:hidden;
+  text-align:center;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.bp_radio_tiles_module_radioTiles--94f93{
+  display:flex;
+  gap:var(--space-2);
+}
+.bp_radio_tiles_module_radioTiles--94f93.bp_radio_tiles_module_hasColumns--94f93{
+  flex-wrap:wrap;
+}
+.bp_radio_tiles_module_radioTiles--94f93.bp_radio_tiles_module_hasColumns--94f93 > *{
+  width:100%;
+}
+.bp_radio_tiles_module_radioTiles--94f93.bp_radio_tiles_module_default--94f93 > *{
+  flex:1 1 calc(100%/var(--columns) - var(--space-2));
+  width:100%;
+}
+.bp_radio_tiles_module_radioTiles--94f93.bp_radio_tiles_module_compact--94f93 > *{
+  flex:0 1 calc(100%/var(--columns) - var(--space-2) + var(--space-2)/var(--columns));
+}
+
 .bp_search_module_search--b65f4{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;

package/lib-esm/index.d.ts

@@ -46,6 +46,7 @@ export * from './primitives/select-menu-grid';
 export * from './primitives/supplementary-fonts';
 export * from './primitives/tabs';
 export * from './radio-group';
+export * from './radio-tiles';
 export * from './search-input';
 export * from './select';
 export * from './side-panel';

package/lib-esm/index.js

@@ -61,6 +61,8 @@ export { useSupplementaryFonts } from './primitives/supplementary-fonts/useSuppl
 export { getSupplementaryFontFacesConfig } from './primitives/supplementary-fonts/get-supplementary-font-faces-config.js';
 export { Tabs } from './primitives/tabs/index.js';
 export { Radio } from './radio-group/index.js';
+export { RadioTiles } from './radio-tiles/radio-tiles.js';
+export { RadioTilesOption } from './radio-tiles/radio-tiles-option.js';
 export { SearchInput } from './search-input/index.js';
 export { SELECT_EMPTY_VALUE, Select } from './select/select.js';
 export { SidePanel } from './side-panel/side-panel.js';

package/lib-esm/radio-tiles/index.d.ts

@@ -0,0 +1,3 @@
+export { RadioTiles } from './radio-tiles';
+export { RadioTilesOption } from './radio-tiles-option';
+export type { RadioTilesProps, RadioTilesOptionProps } from './types';

package/lib-esm/radio-tiles/radio-tiles-option.d.ts

@@ -0,0 +1,2 @@
+import { type RadioTilesOptionProps } from './types';
+export declare const RadioTilesOption: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib-esm/radio-tiles/radio-tiles-option.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../text/text.js';
+import { useRadioTilesContext } from './radio-tiles.context.js';
+import styles from './radio-tiles-option.module.js';
+import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
+import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
+
+const RadioTilesOption = function RadioTilesOption({
+  children,
+  value,
+  label,
+  icon,
+  disabled: disabledProp,
+  className,
+  'aria-label': ariaLabel
+}) {
+  const {
+    name,
+    selectedValue,
+    disabled,
+    onChange
+  } = useRadioTilesContext();
+  const labelRef = useRef(null);
+  const {
+    Wrapper: Tooltip,
+    wrapperProps
+  } = useFullTextTooltip({
+    ref: labelRef,
+    textValue: label
+  });
+  const isSelected = selectedValue === value;
+  const isDisabled = disabled || disabledProp;
+  const handleChange = event => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    onChange(event);
+  };
+  const radioTileClassNames = clsx(styles.radioTileOption, {
+    [styles.checked]: isSelected,
+    [styles.disabled]: isDisabled
+  }, className);
+  return (
+    // @ts-expect-error Fix this type error - DSYS-1597
+    jsx(Tooltip, {
+      ...wrapperProps,
+      children: jsx("div", {
+        className: radioTileClassNames,
+        children: jsxs("label", {
+          children: [jsx(VisuallyHidden, {
+            children: jsx("input", {
+              checked: isSelected,
+              disabled: isDisabled,
+              name: name,
+              onChange: handleChange,
+              type: "radio",
+              value: value
+            })
+          }), icon && jsx("div", {
+            className: styles.icon,
+            children: /*#__PURE__*/React__default.cloneElement(icon, {
+              'aria-label': label || ariaLabel
+            })
+          }), children && /*#__PURE__*/React__default.cloneElement(children, {
+            'aria-label': label || ariaLabel
+          }), label && jsx(Text, {
+            ref: labelRef,
+            as: "p",
+            className: styles.radioTileLabel,
+            variant: "bodyDefault",
+            children: label
+          })]
+        })
+      })
+    })
+  );
+};
+
+export { RadioTilesOption };

package/lib-esm/radio-tiles/radio-tiles-option.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--db24b","icon":"bp_radio_tiles_option_module_icon--db24b","disabled":"bp_radio_tiles_option_module_disabled--db24b","checked":"bp_radio_tiles_option_module_checked--db24b","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--db24b"};
+
+export { styles as default };

package/lib-esm/radio-tiles/radio-tiles.context.d.ts

@@ -0,0 +1,9 @@
+import { type ChangeEvent } from 'react';
+export interface RadioTilesContextValue {
+    name?: string;
+    disabled?: boolean;
+    selectedValue: string | undefined | null;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioTilesContext: import("react").Context<RadioTilesContextValue | null>;
+export declare const useRadioTilesContext: () => RadioTilesContextValue;

package/lib-esm/radio-tiles/radio-tiles.context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const RadioTilesContext = /*#__PURE__*/createContext(null);
+const useRadioTilesContext = () => {
+  const context = useContext(RadioTilesContext);
+  if (!context) {
+    throw new Error('useRadioTilesContext cannot be used outside the RadioTilesContext.Provider');
+  }
+  return context;
+};
+
+export { RadioTilesContext, useRadioTilesContext };

package/lib-esm/radio-tiles/radio-tiles.d.ts

@@ -0,0 +1,4 @@
+import { type RadioTilesProps } from './types';
+export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Option: <T_1 extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: import("./types").RadioTilesOptionProps<T_1>) => import("react/jsx-runtime").JSX.Element;
+};

package/lib-esm/radio-tiles/radio-tiles.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { RadioTilesOption } from './radio-tiles-option.js';
+import { RadioTilesContext } from './radio-tiles.context.js';
+import styles from './radio-tiles.module.js';
+
+const RadioTilesRoot = ({
+  children,
+  name,
+  value,
+  variant = 'default',
+  columns,
+  disabled,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  onChange
+}) => {
+  const containerStyles = {
+    '--columns': columns
+  };
+  const containerClassNames = clsx(styles.radioTiles, {
+    [styles.hasColumns]: Number(columns) > 0,
+    [variant === 'compact' ? styles.compact : styles.default]: true
+  });
+  const contextValue = useMemo(() => ({
+    name,
+    selectedValue: value,
+    disabled,
+    onChange
+  }), [name, value, disabled, onChange]);
+  return jsx(RadioTilesContext.Provider, {
+    value: contextValue,
+    children: jsx("div", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      className: containerClassNames,
+      role: "radiogroup",
+      style: containerStyles,
+      children: children
+    })
+  });
+};
+const RadioTiles = Object.assign(RadioTilesRoot, {
+  Option: RadioTilesOption
+});
+
+export { RadioTiles };

package/lib-esm/radio-tiles/radio-tiles.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"radioTiles":"bp_radio_tiles_module_radioTiles--94f93","hasColumns":"bp_radio_tiles_module_hasColumns--94f93","default":"bp_radio_tiles_module_default--94f93","compact":"bp_radio_tiles_module_compact--94f93"};
+
+export { styles as default };

package/lib-esm/radio-tiles/types.d.ts

@@ -0,0 +1,48 @@
+import { type ChangeEvent, type CSSProperties, type ReactElement, type SVGProps } from 'react';
+/**
+ * RadioTilesProps
+ */
+interface WithAriaLabel {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface WithAriaLabelledBy {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+}
+export type RadioTilesProps<T extends string | null = string | null> = {
+    children: ReactElement<RadioTilesOptionProps<NonNullable<T>>>[];
+    name?: string;
+    value?: T;
+    gap?: string;
+    columns?: number;
+    variant?: 'default' | 'compact';
+    disabled?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+} & (WithAriaLabel | WithAriaLabelledBy);
+/**
+ * RadioTilesOptionProps
+ */
+interface WithIcon {
+    icon?: ReactElement<SVGProps<SVGSVGElement>>;
+    children?: never;
+}
+interface WithoutIcon {
+    icon?: never;
+    children: ReactElement;
+}
+interface WithLabel {
+    label: string;
+    'aria-label'?: never;
+}
+interface WithoutLabel {
+    label?: never;
+    'aria-label': string;
+}
+export type RadioTilesOptionProps<T extends string = string> = {
+    value: T;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+} & (WithIcon | WithoutIcon) & (WithLabel | WithoutLabel);
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.3.1",
+    "version": "8.4.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "bef9db208515d53f0fb75d387d1740b389f6f753",
+    "gitHead": "057276bec06cb3038669d8e87106aaa2bd86c718",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {