@box/blueprint-web 14.4.4 → 14.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2473,7 +2473,7 @@
2473
2473
  .bp_base_badge_module_numericBadgeMoreDigits--15c80{
2474
2474
  padding:1px 3px;
2475
2475
  }
2476
- .bp_icon_button_module_iconButton--a2d49[data-modern=false]{
2476
+ .bp_icon_button_module_iconButton--2eb85[data-modern=false]{
2477
2477
  --icon-button-radius:var(--radius-2);
2478
2478
  --icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
2479
2479
  --icon-button-gray:var(--gray-50);
@@ -2505,7 +2505,7 @@
2505
2505
  --icon-button-size-x-small:var(--size-6);
2506
2506
  }
2507
2507
 
2508
- .bp_icon_button_module_iconButton--a2d49[data-modern=true]{
2508
+ .bp_icon_button_module_iconButton--2eb85[data-modern=true]{
2509
2509
  --icon-button-radius:var(--bp-radius-10);
2510
2510
  --icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
2511
2511
  --icon-button-gray:var(--bp-gray-50);
@@ -2537,7 +2537,16 @@
2537
2537
  --icon-button-size-x-small:var(--bp-size-060);
2538
2538
  }
2539
2539
 
2540
- .bp_icon_button_module_iconButton--a2d49{
2540
+ .bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]{
2541
+ transition-duration:var(--bp-duration-short);
2542
+ transition-property:background;
2543
+ transition-timing-function:var(--bp-curve-small-off);
2544
+ }
2545
+ .bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]:active,.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]:hover,.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true][data-active]{
2546
+ transition-timing-function:var(--bp-curve-small-on);
2547
+ }
2548
+
2549
+ .bp_icon_button_module_iconButton--2eb85{
2541
2550
  align-items:center;
2542
2551
  border-radius:var(--icon-button-radius);
2543
2552
  border-style:none;
@@ -2547,109 +2556,109 @@
2547
2556
  justify-content:center;
2548
2557
  padding:0;
2549
2558
  }
2550
- .bp_icon_button_module_iconButton--a2d49[aria-disabled=true]{
2559
+ .bp_icon_button_module_iconButton--2eb85[aria-disabled=true]{
2551
2560
  background:var(--icon-button-surface-disabled);
2552
2561
  opacity:.3;
2553
2562
  }
2554
- .bp_icon_button_module_iconButton--a2d49[aria-disabled=true] .bp_icon_button_module_icon--a2d49 *{
2563
+ .bp_icon_button_module_iconButton--2eb85[aria-disabled=true] .bp_icon_button_module_icon--2eb85 *{
2555
2564
  fill:var(--icon-button-gray);
2556
2565
  }
2557
- .bp_icon_button_module_iconButton--a2d49:focus-visible{
2566
+ .bp_icon_button_module_iconButton--2eb85:focus-visible{
2558
2567
  outline:none;
2559
2568
  }
2560
- .bp_icon_button_module_iconButton--a2d49[data-focus-visible]{
2569
+ .bp_icon_button_module_iconButton--2eb85[data-focus-visible]{
2561
2570
  outline:var(--icon-button-border) solid var(--icon-button-outline);
2562
2571
  }
2563
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49{
2572
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85{
2564
2573
  background:var(--icon-button-surface);
2565
2574
  }
2566
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49 .bp_icon_button_module_icon--a2d49 *{
2575
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85 .bp_icon_button_module_icon--2eb85 *{
2567
2576
  fill:var(--icon-button-icon);
2568
2577
  }
2569
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-focus-visible]{
2578
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-focus-visible]{
2570
2579
  background:var(--icon-button-surface-hover);
2571
2580
  }
2572
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
2581
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
2573
2582
  fill:var(--icon-button-icon-hover);
2574
2583
  }
2575
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-active]{
2584
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-active]{
2576
2585
  background:var(--icon-button-surface-pressed);
2577
2586
  }
2578
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_default--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
2587
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
2579
2588
  fill:var(--icon-button-icon-pressed);
2580
2589
  }
2581
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49{
2590
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85{
2582
2591
  background:var(--icon-button-surface);
2583
2592
  }
2584
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49[data-focus-visible]{
2593
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85[data-focus-visible]{
2585
2594
  background:var(--icon-button-surface-hover);
2586
2595
  }
2587
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_icon-logo--a2d49[data-active]{
2596
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85[data-active]{
2588
2597
  background:var(--icon-button-surface-pressed);
2589
2598
  }
2590
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49{
2599
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85{
2591
2600
  background:var(--icon-button-surface);
2592
2601
  }
2593
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49 .bp_icon_button_module_icon--a2d49 *{
2602
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85 .bp_icon_button_module_icon--2eb85 *{
2594
2603
  fill:var(--icon-button-icon-high-contrast);
2595
2604
  }
2596
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-focus-visible]{
2605
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-focus-visible]{
2597
2606
  background:var(--icon-button-surface-hover);
2598
2607
  }
2599
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
2608
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
2600
2609
  fill:var(--icon-button-icon-high-contrast-hover);
2601
2610
  }
2602
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-active]{
2611
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-active]{
2603
2612
  background:var(--icon-button-surface-pressed);
2604
2613
  }
2605
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_high-contrast--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
2614
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
2606
2615
  fill:var(--icon-button-icon-high-contrast-pressed);
2607
2616
  }
2608
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49{
2617
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85{
2609
2618
  background:var(--icon-button-surface-on-dark);
2610
2619
  }
2611
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49 .bp_icon_button_module_icon--a2d49 *{
2620
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85 .bp_icon_button_module_icon--2eb85 *{
2612
2621
  fill:var(--icon-button-icon-on-dark);
2613
2622
  }
2614
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-focus-visible]{
2623
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-focus-visible]{
2615
2624
  background:var(--icon-button-surface-on-dark-hover);
2616
2625
  }
2617
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
2626
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
2618
2627
  fill:var(--icon-button-icon-on-dark-hover);
2619
2628
  }
2620
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-active]{
2629
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-active]{
2621
2630
  background:var(--icon-button-surface-on-dark-pressed);
2622
2631
  }
2623
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_on-dark--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
2632
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
2624
2633
  fill:var(--icon-button-icon-on-dark-pressed);
2625
2634
  }
2626
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49{
2635
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85{
2627
2636
  background:var(--icon-button-surface-utility);
2628
2637
  }
2629
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49 .bp_icon_button_module_icon--a2d49 *{
2638
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85 .bp_icon_button_module_icon--2eb85 *{
2630
2639
  fill:var(--icon-button-icon-utility);
2631
2640
  }
2632
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:hover,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-focus-visible]{
2641
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-focus-visible]{
2633
2642
  background:var(--icon-button-surface-utility-hover);
2634
2643
  }
2635
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:hover .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-focus-visible] .bp_icon_button_module_icon--a2d49 *{
2644
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
2636
2645
  fill:var(--icon-button-icon-utility-hover);
2637
2646
  }
2638
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:active,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-active]{
2647
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-active]{
2639
2648
  background:var(--icon-button-surface-utility-pressed);
2640
2649
  }
2641
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49:active .bp_icon_button_module_icon--a2d49 *,.bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small-utility--a2d49[data-active] .bp_icon_button_module_icon--a2d49 *{
2650
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
2642
2651
  fill:var(--icon-button-icon-utility-pressed);
2643
2652
  }
2644
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_large--a2d49{
2653
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_large--2eb85{
2645
2654
  height:var(--icon-button-size-large);
2646
2655
  width:var(--icon-button-size-large);
2647
2656
  }
2648
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_small--a2d49{
2657
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small--2eb85{
2649
2658
  height:var(--icon-button-size-small);
2650
2659
  width:var(--icon-button-size-small);
2651
2660
  }
2652
- .bp_icon_button_module_iconButton--a2d49.bp_icon_button_module_x-small--a2d49{
2661
+ .bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_x-small--2eb85{
2653
2662
  height:var(--icon-button-size-x-small);
2654
2663
  width:var(--icon-button-size-x-small);
2655
2664
  }
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { Button } from '@ariakit/react';
3
3
  import clsx from 'clsx';
4
4
  import { forwardRef, createElement } from 'react';
5
+ import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
5
6
  import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
6
7
  import styles from './icon-button.module.js';
7
8
  import { iconSizeMap } from './utils.js';
@@ -16,12 +17,17 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
16
17
  const {
17
18
  enableModernizedComponents
18
19
  } = useBlueprintModernization();
20
+ const {
21
+ componentsWithAnimationEnabled
22
+ } = useBlueprintConfiguration();
23
+ const isAnimationEnabled = componentsWithAnimationEnabled.includes('IconButton');
19
24
  const sizeStyles = variant === 'small-utility' ? styles.small : styles[size];
20
25
  return jsx(Button, {
21
26
  ...rest,
22
27
  ref: forwardedRef,
23
28
  className: clsx(styles.iconButton, styles[variant], sizeStyles, props.className),
24
29
  "data-modern": enableModernizedComponents ? 'true' : 'false',
30
+ "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
25
31
  children: /*#__PURE__*/createElement(icon, {
26
32
  className: styles.icon,
27
33
  height: iconSizeMap[size],
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"iconButton":"bp_icon_button_module_iconButton--a2d49","icon":"bp_icon_button_module_icon--a2d49","default":"bp_icon_button_module_default--a2d49","icon-logo":"bp_icon_button_module_icon-logo--a2d49","high-contrast":"bp_icon_button_module_high-contrast--a2d49","on-dark":"bp_icon_button_module_on-dark--a2d49","small-utility":"bp_icon_button_module_small-utility--a2d49","large":"bp_icon_button_module_large--a2d49","small":"bp_icon_button_module_small--a2d49","x-small":"bp_icon_button_module_x-small--a2d49"};
2
+ var styles = {"iconButton":"bp_icon_button_module_iconButton--2eb85","icon":"bp_icon_button_module_icon--2eb85","default":"bp_icon_button_module_default--2eb85","icon-logo":"bp_icon_button_module_icon-logo--2eb85","high-contrast":"bp_icon_button_module_high-contrast--2eb85","on-dark":"bp_icon_button_module_on-dark--2eb85","small-utility":"bp_icon_button_module_small-utility--2eb85","large":"bp_icon_button_module_large--2eb85","small":"bp_icon_button_module_small--2eb85","x-small":"bp_icon_button_module_x-small--2eb85"};
3
3
 
4
4
  export { styles as default };
@@ -1,2 +1,2 @@
1
1
  import { type RadioTilesOptionProps } from './types';
2
- 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;
2
+ export declare const RadioTilesOption: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, "data-target-id": dataTargetId, }: RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
@@ -15,7 +15,8 @@ const RadioTilesOption = function RadioTilesOption({
15
15
  icon,
16
16
  disabled: disabledProp,
17
17
  className,
18
- 'aria-label': ariaLabel
18
+ 'aria-label': ariaLabel,
19
+ 'data-target-id': dataTargetId
19
20
  }) {
20
21
  const {
21
22
  name,
@@ -54,6 +55,7 @@ const RadioTilesOption = function RadioTilesOption({
54
55
  children: jsx("div", {
55
56
  className: radioTileClassNames,
56
57
  "data-modern": enableModernizedComponents ? 'true' : 'false',
58
+ "data-target-id": dataTargetId,
57
59
  children: jsxs("label", {
58
60
  className: clsx({
59
61
  [styles.iconOnly]: !label,
@@ -1,4 +1,4 @@
1
1
  import { type RadioTilesProps } from './types';
2
2
  export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
3
- Option: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: import("./types").RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
3
+ Option: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, "data-target-id": dataTargetId, }: import("./types").RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
4
4
  };
@@ -46,5 +46,6 @@ export type RadioTilesOptionProps<T extends string = string> = {
46
46
  disabled?: boolean;
47
47
  className?: string;
48
48
  style?: CSSProperties;
49
+ 'data-target-id'?: string;
49
50
  } & (WithIcon | WithoutIcon) & (WithLabel | WithoutLabel);
50
51
  export {};
@@ -229,6 +229,7 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
229
229
  text,
230
230
  secondaryText,
231
231
  leftElement,
232
+ 'data-target-id': dataTargetId,
232
233
  ...itemProps
233
234
  } = props;
234
235
  const {
@@ -256,6 +257,7 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
256
257
  className: clsx(styles.option, {
257
258
  [styles.hasLeftElement]: hasLeftElement
258
259
  }),
260
+ "data-target-id": dataTargetId,
259
261
  onPointerLeave: onPointerLeave,
260
262
  onPointerMove: onPointerMove,
261
263
  children: [leftElement && jsx("span", {
@@ -145,6 +145,10 @@ export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
145
145
  * When provided, the checkmark indicator moves to the right side.
146
146
  */
147
147
  leftElement?: React.ReactNode;
148
+ /**
149
+ * Value for the data-target-id attribute on the option element (e.g. for analytics).
150
+ */
151
+ 'data-target-id'?: string;
148
152
  }
149
153
  export interface SelectTriggerProps extends Omit<SelectProps, 'children' | 'error' | 'label' | 'subText'> {
150
154
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "14.4.4",
3
+ "version": "14.6.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.21",
49
49
  "@ariakit/react-core": "0.4.21",
50
- "@box/blueprint-web-assets": "^4.112.0",
50
+ "@box/blueprint-web-assets": "^4.112.2",
51
51
  "@internationalized/date": "^3.12.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.17.27",
80
+ "@box/storybook-utils": "^0.17.29",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",