@box/blueprint-web 8.5.2 → 8.6.0

package/lib-esm/side-panel/side-panel.d.ts

@@ -1,28 +1,27 @@
-/// <reference types="react" />
-import { type SidePanelProps } from './types';
-export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Close: import("react").ForwardRefExoticComponent<import("./types").SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & {
-        size?: "medium" | "large" | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-        PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            children?: string | string[] | undefined;
-            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
-        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            children?: string | string[] | undefined;
-            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
-        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-        SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            children?: string | string[] | undefined;
-            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
-        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-            children?: string | string[] | undefined;
-            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
-        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
-    };
-    Header: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-    Overlay: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelOverlayComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<import("./types").SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-};
+import { type SidePanelProps } from './types';
+export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Close: import("react").ForwardRefExoticComponent<import("./types").SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & {
+        size?: "medium" | "large";
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+        PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
+            children?: string | string[];
+            icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Header: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelOverlayComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./types").SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/lib-esm/side-panel/side-panel.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_side_panel_module_content--4e61a","header":"bp_side_panel_module_header--4e61a","headerMobile":"bp_side_panel_module_headerMobile--4e61a","headerShadow":"bp_side_panel_module_headerShadow--4e61a","persistentContent":"bp_side_panel_module_persistentContent--4e61a","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--4e61a","slideIn":"bp_side_panel_module_slideIn--4e61a","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--4e61a","slideOut":"bp_side_panel_module_slideOut--4e61a","contentNormal":"bp_side_panel_module_contentNormal--4e61a","contentLarge":"bp_side_panel_module_contentLarge--4e61a","dropShadowContent":"bp_side_panel_module_dropShadowContent--4e61a","close":"bp_side_panel_module_close--4e61a","overlayContent":"bp_side_panel_module_overlayContent--4e61a","overlay":"bp_side_panel_module_overlay--4e61a","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--4e61a","scrollableContainer":"bp_side_panel_module_scrollableContainer--4e61a","footer":"bp_side_panel_module_footer--4e61a","footerShadow":"bp_side_panel_module_footerShadow--4e61a","footerButton":"bp_side_panel_module_footerButton--4e61a"};
+var styles = {"content":"bp_side_panel_module_content--1a002","header":"bp_side_panel_module_header--1a002","headerMobile":"bp_side_panel_module_headerMobile--1a002","headerShadow":"bp_side_panel_module_headerShadow--1a002","persistentContent":"bp_side_panel_module_persistentContent--1a002","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--1a002","slideIn":"bp_side_panel_module_slideIn--1a002","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--1a002","slideOut":"bp_side_panel_module_slideOut--1a002","contentNormal":"bp_side_panel_module_contentNormal--1a002","contentLarge":"bp_side_panel_module_contentLarge--1a002","dropShadowContent":"bp_side_panel_module_dropShadowContent--1a002","close":"bp_side_panel_module_close--1a002","overlayContent":"bp_side_panel_module_overlayContent--1a002","overlay":"bp_side_panel_module_overlay--1a002","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--1a002","scrollableContainer":"bp_side_panel_module_scrollableContainer--1a002","footer":"bp_side_panel_module_footer--1a002","footerShadow":"bp_side_panel_module_footerShadow--1a002","footerButton":"bp_side_panel_module_footerButton--1a002"};
 
 export { styles as default };

package/lib-esm/side-panel/types.d.ts

@@ -1,49 +1,49 @@
-import { type DialogContentProps, type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
-import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
-/**
- * 'persistent' - side panel is displayed inline with the page content
- *
- * 'overlay' - side panel is displayed over the page content on a darkened overlay
- *
- * 'dropShadowOverlay' - side panel is displayed over the page content on a transparent overlay
- *
- * 'interactiveOverlay' - side panel is displayed over the page content and does not block interaction with the page content
- */
-export type SidePanelVariant = 'persistent' | 'overlay' | 'dropShadowOverlay' | 'interactiveOverlay';
-export type SidePanelProps = (SidePanelPersistentProps | SidePanelOverlayProps) & {
-    variant: SidePanelVariant;
-};
-export type SidePanelPersistentProps = ComponentPropsWithRef<'div'> & {
-    variant: 'persistent';
-};
-export type SidePanelOverlayProps = DialogProps;
-export type SidePanelOverlayComponentProps = ComponentPropsWithRef<'div'> & Pick<DialogPortalProps, 'container'>;
-export type SidePanelContentProps = DialogContentProps & {
-    /**
-     * The size of the side panel content.
-     * @default "medium"
-     */
-    size?: 'medium' | 'large';
-};
-export type SidePanelPersistentContentProps = ComponentPropsWithRef<'div'>;
-export interface SidePanelCloseProps {
-    /** The aria-label for the Close element */
-    'aria-label': string;
-    /** Custom icon for Close element */
-    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
-}
-export interface SidePanelTriggerProps {
-    children: ReactElement;
-}
-export interface SidePanelScrollableContainerProps extends ComponentPropsWithRef<'div'> {
-    /** Content of the ScrollableContainer element */
-    children: ReactNode;
-}
-export interface SidePanelFooterProps extends ComponentPropsWithRef<'div'> {
-    /** Content of the Footer element */
-    children: ReactNode;
-}
-export interface SidePanelHeaderProps extends ComponentPropsWithRef<'h2'> {
-    /** Content of the Header element */
-    children: ReactNode;
-}
+import { type DialogContentProps, type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
+/**
+ * 'persistent' - side panel is displayed inline with the page content
+ *
+ * 'overlay' - side panel is displayed over the page content on a darkened overlay
+ *
+ * 'dropShadowOverlay' - side panel is displayed over the page content on a transparent overlay
+ *
+ * 'interactiveOverlay' - side panel is displayed over the page content and does not block interaction with the page content
+ */
+export type SidePanelVariant = 'persistent' | 'overlay' | 'dropShadowOverlay' | 'interactiveOverlay';
+export type SidePanelProps = (SidePanelPersistentProps | SidePanelOverlayProps) & {
+    variant: SidePanelVariant;
+};
+export type SidePanelPersistentProps = ComponentPropsWithRef<'div'> & {
+    variant: 'persistent';
+};
+export type SidePanelOverlayProps = DialogProps;
+export type SidePanelOverlayComponentProps = ComponentPropsWithRef<'div'> & Pick<DialogPortalProps, 'container'>;
+export type SidePanelContentProps = DialogContentProps & {
+    /**
+     * The size of the side panel content.
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+};
+export type SidePanelPersistentContentProps = ComponentPropsWithRef<'div'>;
+export interface SidePanelCloseProps {
+    /** The aria-label for the Close element */
+    'aria-label': string;
+    /** Custom icon for Close element */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}
+export interface SidePanelTriggerProps {
+    children: ReactElement;
+}
+export interface SidePanelScrollableContainerProps extends ComponentPropsWithRef<'div'> {
+    /** Content of the ScrollableContainer element */
+    children: ReactNode;
+}
+export interface SidePanelFooterProps extends ComponentPropsWithRef<'div'> {
+    /** Content of the Footer element */
+    children: ReactNode;
+}
+export interface SidePanelHeaderProps extends ComponentPropsWithRef<'h2'> {
+    /** Content of the Header element */
+    children: ReactNode;
+}

package/lib-esm/side-panel/variant-context.d.ts

@@ -1,6 +1,6 @@
-import { type SidePanelVariant } from './types';
-export declare const VariantProvider: ({ children, variant, }: {
-    children: React.ReactNode;
-    variant: SidePanelVariant;
-}) => React.ReactElement;
-export declare function useVariant(): SidePanelVariant;
+import { type SidePanelVariant } from './types';
+export declare const VariantProvider: ({ children, variant, }: {
+    children: React.ReactNode;
+    variant: SidePanelVariant;
+}) => React.ReactElement;
+export declare function useVariant(): SidePanelVariant;

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

@@ -1,2 +1,2 @@
-export { Slider } from './slider';
-export { type SliderIncrementerProps, type SliderProps } from './types';
+export { Slider } from './slider';
+export { type SliderIncrementerProps, type SliderProps } from './types';

package/lib-esm/slider/slider-incrementer.d.ts

@@ -1,5 +1,5 @@
-import { type SliderIncrementerProps } from './types';
-export declare const SliderIncrementer: {
-    ({ children, disabled, max, min, minusButtonLabel, minusButtonTooltipContent, plusButtonLabel, plusButtonTooltipContent, setValue, step, value, }: SliderIncrementerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import { type SliderIncrementerProps } from './types';
+export declare const SliderIncrementer: {
+    ({ children, disabled, max, min, minusButtonLabel, minusButtonTooltipContent, plusButtonLabel, plusButtonTooltipContent, setValue, step, value, }: SliderIncrementerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib-esm/slider/slider-incrementer.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Minus, Plus } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
 import { useCallback } from 'react';
-import { Minus, Plus } from '@box/blueprint-web-assets/icons/Fill';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Tooltip } from '../tooltip/tooltip.js';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import styles from './slider-incrementer.module.js';
 
 const SliderIncrementer = ({
@@ -29,25 +30,37 @@ const SliderIncrementer = ({
     const cappedValue = nextValue > max ? max : nextValue;
     setValue(cappedValue);
   }, [max, setValue, step, value]);
+  const breakpoint = useBreakpoint();
+  const buttonProps = breakpoint > Breakpoint.Medium ? {
+    variant: 'default',
+    size: 'x-small'
+  } : {
+    variant: 'small-utility',
+    size: 'small'
+  };
+  const isRangeHidden = breakpoint < Breakpoint.Medium;
   return jsxs("div", {
     className: clsx(styles.container),
     children: [jsx(Tooltip, {
       content: minusButtonTooltipContent,
       children: jsx(IconButton, {
+        ...buttonProps,
         "aria-label": minusButtonLabel,
+        className: clsx({
+          [styles.rangeHidden]: isRangeHidden
+        }),
         disabled: disabled,
         icon: Minus,
-        onClick: decrement,
-        size: "x-small"
+        onClick: decrement
       })
     }), children, jsx(Tooltip, {
       content: plusButtonTooltipContent,
       children: jsx(IconButton, {
+        ...buttonProps,
         "aria-label": plusButtonLabel,
         disabled: disabled,
         icon: Plus,
-        onClick: increment,
-        size: "x-small"
+        onClick: increment
       })
     })]
   });

package/lib-esm/slider/slider-incrementer.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_slider_incrementer_module_container--8d8bf"};
+var styles = {"container":"bp_slider_incrementer_module_container--800b7","rangeHidden":"bp_slider_incrementer_module_rangeHidden--800b7"};
 
 export { styles as default };

package/lib-esm/slider/slider-range.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { type SliderRangeProps } from './types';
-/**
- * An input where the user selects a value from within a given range.
- */
-export declare const SliderRange: import("react").ForwardRefExoticComponent<SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { type SliderRangeProps } from './types';
+/**
+ * An input where the user selects a value from within a given range.
+ */
+export declare const SliderRange: import("react").ForwardRefExoticComponent<SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/slider/slider-range.js

@@ -5,8 +5,8 @@ import { forwardRef, useState, useCallback } from 'react';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './slider-range.module.js';
 
-/**
- * An input where the user selects a value from within a given range.
+/**
+ * An input where the user selects a value from within a given range.
  */
 const SliderRange = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {

package/lib-esm/slider/slider-range.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_slider_range_module_container--85e3c","hasFocus":"bp_slider_range_module_hasFocus--85e3c","thumb":"bp_slider_range_module_thumb--85e3c","root":"bp_slider_range_module_root--85e3c","disabled":"bp_slider_range_module_disabled--85e3c","track":"bp_slider_range_module_track--85e3c"};
+var styles = {"container":"bp_slider_range_module_container--54069","hasFocus":"bp_slider_range_module_hasFocus--54069","thumb":"bp_slider_range_module_thumb--54069","root":"bp_slider_range_module_root--54069","disabled":"bp_slider_range_module_disabled--54069","track":"bp_slider_range_module_track--54069"};
 
 export { styles as default };

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type SliderProps } from './types';
-export declare const Slider: ((props: SliderProps) => import("react/jsx-runtime").JSX.Element) & {
-    Slider: import("react").ForwardRefExoticComponent<import("./types").SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;
-};
+import { type SliderProps } from './types';
+export declare const Slider: ((props: SliderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Slider: import("react").ForwardRefExoticComponent<import("./types").SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/lib-esm/slider/slider.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { SliderIncrementer } from './slider-incrementer.js';
 import { SliderRange } from './slider-range.js';
 import styles from './slider.module.js';
@@ -19,8 +20,12 @@ const SliderRoot = props => {
     step,
     value
   } = props;
+  const breakpoint = useBreakpoint();
+  const showRange = breakpoint > Breakpoint.Small;
   return jsx("div", {
-    className: clsx(styles.container, className, {}),
+    className: clsx(styles.container, {
+      [styles.rangeHidden]: !showRange
+    }, className, {}),
     children: jsx(SliderIncrementer, {
       disabled: disabled,
       max: max,
@@ -32,7 +37,7 @@ const SliderRoot = props => {
       setValue: onValueChange,
       step: step,
       value: value,
-      children: jsx(SliderRange, {
+      children: showRange && jsx(SliderRange, {
         disabled: disabled,
         label: sliderLabel,
         max: max,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_slider_module_container--46500"};
+var styles = {"container":"bp_slider_module_container--c4adb","rangeHidden":"bp_slider_module_rangeHidden--c4adb"};
 
 export { styles as default };