@box/blueprint-web 7.8.0 → 7.10.0

package/lib-esm/badge/base-badge.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type BadgeProps } from './types';
+export type BaseBadgeProps = BadgeProps & {
+    /** The color of the badge background */
+    backgroundColor: string;
+    className?: string;
+};
+export declare const BadgeSizes: readonly ["small", "medium", "large", "xlarge"];
+export declare const BaseBadge: ({ backgroundColor, className, children, size, offset }: BaseBadgeProps) => JSX.Element;

package/lib-esm/badge/base-badge.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import mapValues from 'lodash/mapValues';
+import styles from './base-badge.module.js';
+
+const BaseBadge = ({
+  backgroundColor,
+  className,
+  children,
+  size,
+  offset
+}) => {
+  const offsetStyle = mapValues(offset, value => Number.isInteger(value) ? `${value}px` : `0`);
+  return jsx("div", {
+    className: clsx(className, styles.badge, styles[`${size}SizeBadge`]),
+    style: {
+      backgroundColor,
+      ...offsetStyle
+    },
+    children: children
+  });
+};
+
+export { BaseBadge };

package/lib-esm/badge/base-badge.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--251c2","badge":"bp_base_badge_module_badge--251c2","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--251c2","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--251c2","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--251c2","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--251c2","iconBadge":"bp_base_badge_module_iconBadge--251c2","statusBadge":"bp_base_badge_module_statusBadge--251c2","numericBadge":"bp_base_badge_module_numericBadge--251c2","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--251c2","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--251c2"};
+
+export { styles as default };

package/lib-esm/badge/icon-badge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type BadgeProps } from './types';
+export interface IconBadgeProps extends BadgeProps {
+    /** The variant of the icon badge */
+    variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress';
+}
+export declare const IconBadgeVariants: ("file-pdf" | "file-docs" | "file-sheets" | "file-image" | "file-canvas" | "file-pages" | "file-keynote" | "file-boxnote" | "file-video" | "folder-external" | "folder-shared" | "action-relay" | "action-mention" | "action-task" | "action-taskapproval" | "action-annotation" | "action-performed-completed" | "action-performed-rejected" | "collaborator-external" | "collaborator-admin" | "collaborator-coadmin" | "content-pin" | "content-collection" | "content-offline" | "content-progress")[];
+export declare const IconBadge: (props: IconBadgeProps) => JSX.Element;

package/lib-esm/badge/icon-badge.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader } from '@box/blueprint-web-assets/icons/Fill';
+import { GrayWhite, GreenLight100, Orange100, Gray10, Gray100, Gray65, LightBlue100, LightBlue120, Yellorange100, WatermelonRed110, Gray50, DarkBlue100, PurpleRain100, Gray80 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Children, createElement } from 'react';
+import { BaseBadge } from './base-badge.js';
+import styles from './base-badge.module.js';
+
+const badgeVariantToIconProps = {
+  'file-pdf': {
+    backgroundColor: '#D0021B',
+    icon: FilePdf,
+    iconColor: GrayWhite
+  },
+  'file-docs': {
+    backgroundColor: '#4083F7',
+    icon: FileDocs,
+    iconColor: GrayWhite
+  },
+  'file-sheets': {
+    backgroundColor: '#21A464',
+    icon: FileSheets,
+    iconColor: GrayWhite
+  },
+  'file-image': {
+    backgroundColor: GreenLight100,
+    icon: FileImage,
+    iconColor: GrayWhite
+  },
+  'file-canvas': {
+    backgroundColor: Orange100,
+    icon: FileCanvas,
+    iconColor: GrayWhite
+  },
+  'file-pages': {
+    backgroundColor: '#FF9500',
+    icon: FilePages,
+    iconColor: GrayWhite
+  },
+  'file-keynote': {
+    backgroundColor: '#0A84FF',
+    icon: FileKeynote,
+    iconColor: GrayWhite
+  },
+  'file-boxnote': {
+    backgroundColor: Gray10,
+    icon: FileBoxNote,
+    iconColor: Gray100
+  },
+  'file-video': {
+    backgroundColor: '#009AED',
+    icon: FileVideo,
+    iconColor: GrayWhite
+  },
+  'folder-external': {
+    backgroundColor: Gray65,
+    icon: FolderExternal,
+    iconColor: GrayWhite
+  },
+  'folder-shared': {
+    backgroundColor: LightBlue100,
+    icon: FolderShared,
+    iconColor: GrayWhite
+  },
+  'action-relay': {
+    backgroundColor: LightBlue120,
+    icon: Relay,
+    iconColor: GrayWhite
+  },
+  'action-mention': {
+    backgroundColor: LightBlue120,
+    icon: EllipsisBubble,
+    iconColor: GrayWhite
+  },
+  'action-task': {
+    backgroundColor: LightBlue100,
+    icon: Task,
+    iconColor: GrayWhite
+  },
+  'action-taskapproval': {
+    backgroundColor: LightBlue120,
+    icon: ApprovalTask,
+    iconColor: GrayWhite
+  },
+  'action-annotation': {
+    backgroundColor: Yellorange100,
+    icon: Annotation,
+    iconColor: GrayWhite
+  },
+  'action-performed-completed': {
+    backgroundColor: GreenLight100,
+    icon: Checkmark,
+    iconColor: GrayWhite
+  },
+  'action-performed-rejected': {
+    backgroundColor: WatermelonRed110,
+    icon: XMark,
+    iconColor: GrayWhite
+  },
+  'collaborator-external': {
+    backgroundColor: Gray50,
+    icon: GlobeBadge,
+    iconColor: GrayWhite
+  },
+  'collaborator-admin': {
+    backgroundColor: DarkBlue100,
+    icon: Star,
+    iconColor: GrayWhite
+  },
+  'collaborator-coadmin': {
+    backgroundColor: PurpleRain100,
+    icon: Star,
+    iconColor: GrayWhite
+  },
+  'content-pin': {
+    backgroundColor: Gray10,
+    icon: Pin,
+    iconColor: Gray80
+  },
+  'content-collection': {
+    backgroundColor: Gray10,
+    icon: Arrow,
+    iconColor: Gray80,
+    iconStyle: {
+      transform: 'rotate(135deg)'
+    }
+  },
+  'content-offline': {
+    backgroundColor: GreenLight100,
+    icon: CheckmarkUnderline,
+    iconColor: GrayWhite
+  },
+  'content-progress': {
+    backgroundColor: Yellorange100,
+    icon: Loader,
+    iconColor: GrayWhite
+  }
+};
+const badgeSizeToIconSize = {
+  small: '6px',
+  medium: '9px',
+  large: '10px',
+  xlarge: '14px'
+};
+const IconBadge = props => {
+  const {
+    size,
+    variant,
+    children,
+    offset
+  } = props;
+  const {
+    backgroundColor,
+    icon,
+    iconColor,
+    iconStyle
+  } = badgeVariantToIconProps[variant];
+  const iconSize = badgeSizeToIconSize[size];
+  if (Children.count(children) !== 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('IconBadge component requires exactly one child');
+    }
+  }
+  return jsxs("div", {
+    className: styles.badgeContainer,
+    children: [children, jsx(BaseBadge, {
+      backgroundColor: backgroundColor,
+      className: styles.iconBadge,
+      offset: offset,
+      size: size,
+      children: /*#__PURE__*/createElement(icon, {
+        color: iconColor,
+        height: iconSize,
+        width: iconSize,
+        role: 'presentation',
+        style: iconStyle || {}
+      })
+    })]
+  });
+};
+
+export { IconBadge };

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

@@ -0,0 +1,3 @@
+export { IconBadge, type IconBadgeProps } from './icon-badge';
+export { NumericBadge, type NumericBadgeProps } from './numeric-badge';
+export { StatusBadge, type StatusBadgeProps } from './status-badge';

package/lib-esm/badge/numeric-badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type BadgeProps } from './types';
+export interface NumericBadgeProps extends Omit<BadgeProps, 'size'> {
+    /** The numeric value to inform users of the total count */
+    value: string;
+}
+export declare const NumericBadge: React.ForwardRefExoticComponent<NumericBadgeProps & React.RefAttributes<React.ReactNode>>;

package/lib-esm/badge/numeric-badge.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WatermelonRed110 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import React__default, { forwardRef, Children } from 'react';
+import { Text } from '../text/text.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import { BaseBadge } from './base-badge.js';
+import styles from './base-badge.module.js';
+
+const NumericBadge = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    children,
+    offset
+  } = props;
+  const valueId = useUniqueId('numeric-badge-value');
+  if (Children.count(children) !== 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('NumericBadge component requires exactly one child');
+    }
+  }
+  const child = Children.only(children);
+  return jsxs("div", {
+    className: styles.badgeContainer,
+    children: [/*#__PURE__*/React__default.cloneElement(child, {
+      ref: forwardedRef,
+      'aria-describedby': valueId
+    }), jsx(BaseBadge, {
+      backgroundColor: WatermelonRed110,
+      className: clsx({
+        [styles.numericBadge]: true,
+        [styles.numericBadgeMoreDigits]: value.length > 1,
+        [styles.numericBadgeSingleDigit]: value.length === 1
+      }),
+      offset: offset,
+      size: "medium",
+      children: jsx(Text, {
+        as: "span",
+        color: "textOnDarkDefault",
+        id: valueId,
+        variant: "labelBold",
+        children: value
+      })
+    })]
+  });
+});
+
+export { NumericBadge };

package/lib-esm/badge/status-badge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type BadgeProps } from './types';
+export interface StatusBadgeProps extends BadgeProps {
+    /** The variant for the status */
+    variant: 'online';
+}
+export declare const StatusBadgeVariants: "online"[];
+export declare const StatusBadge: (props: StatusBadgeProps) => JSX.Element;

package/lib-esm/badge/status-badge.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { GreenLight120 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Children } from 'react';
+import { BaseBadge } from './base-badge.js';
+import styles from './base-badge.module.js';
+
+const variantToBaseBadgeProp = {
+  online: {
+    backgroundColor: GreenLight120,
+    children: null
+  }
+};
+const StatusBadge = props => {
+  const {
+    variant,
+    size,
+    children,
+    offset
+  } = props;
+  if (Children.count(children) !== 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('StatusBadge component requires exactly one child');
+    }
+  }
+  return jsxs("div", {
+    className: styles.badgeContainer,
+    children: [children, jsx(BaseBadge, {
+      ...variantToBaseBadgeProp[variant],
+      className: styles.statusBadge,
+      offset: offset,
+      size: size
+    })]
+  });
+};
+
+export { StatusBadge };

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface BadgeProps {
+    /** Accepts exactly a single child component. Badge will be displayed over the child. */
+    children: React.ReactNode;
+    /** The size of the badge */
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    /** The offset in pixels from the default position of the badge. Accepts positive and negative integers. */
+    offset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type ContentFieldProps } from './types';
 export declare const contentFieldButtonTestId = "ContentField-button";
-export declare const ContentField: ({ clearButtonAriaLabel, itemIcon, hintText, isSharedFolder, onClick, onClickClearButton, title, error, }: ContentFieldProps) => JSX.Element;
+export declare const ContentField: import("react").ForwardRefExoticComponent<ContentFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/content-field/content-field.js

@@ -4,7 +4,7 @@ import { FolderShared } from '@box/blueprint-web-assets/icons/Content';
 import { XMark, Folder } from '@box/blueprint-web-assets/icons/Fill';
 import { Space6, Space4 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { createRef } from 'react';
+import { forwardRef, createRef } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import styles from './content-field.module.js';
@@ -47,7 +47,7 @@ const handleOnClickClearButton = ({
   onClickClearButton(e);
 };
 const contentFieldButtonTestId = 'ContentField-button';
-const ContentField = ({
+const ContentField = /*#__PURE__*/forwardRef(({
   clearButtonAriaLabel,
   itemIcon,
   hintText,
@@ -56,13 +56,13 @@ const ContentField = ({
   onClickClearButton,
   title,
   error
-}) => {
-  const ref = /*#__PURE__*/createRef();
+}, forwardedRef) => {
+  const labelRef = /*#__PURE__*/createRef();
   const {
     Wrapper: Tooltip,
     wrapperProps
   } = useFullTextTooltip({
-    ref,
+    ref: labelRef,
     textValue: title ?? hintText
   });
   return jsxs("div", {
@@ -72,6 +72,7 @@ const ContentField = ({
       children: [jsx(Tooltip, {
         ...wrapperProps,
         children: jsxs(Button, {
+          ref: forwardedRef,
           className: clsx(styles.contentButton, {
             [styles.hasSelection]: title,
             [styles.error]: !!error
@@ -85,7 +86,7 @@ const ContentField = ({
           }), jsx("div", {
             className: styles.contentLabelWrapper,
             children: jsx("div", {
-              ref: ref,
+              ref: labelRef,
               className: styles.contentLabel,
               children: title ?? hintText
             })
@@ -98,7 +99,7 @@ const ContentField = ({
           [styles.error]: !!error
         }),
         onClick: handleOnClickClearButton({
-          ref,
+          ref: labelRef,
           onClickClearButton
         }),
         type: "button",
@@ -113,6 +114,6 @@ const ContentField = ({
       children: error
     })]
   });
-};
+});
 
 export { ContentField, contentFieldButtonTestId };

package/lib-esm/index.css

@@ -801,6 +801,74 @@
   top:0;
 }
 
+.bp_base_badge_module_badgeContainer--251c2{
+  display:inline-flex;
+  position:relative;
+}
+
+.bp_base_badge_module_badge--251c2{
+  align-items:center;
+  border:var(--border-2) solid var(--border-badge-border);
+  border-radius:2rem;
+  box-sizing:initial !important;
+  display:flex;
+  justify-content:center;
+  position:absolute;
+}
+
+.bp_base_badge_module_smallSizeBadge--251c2{
+  height:var(--size-2);
+  min-width:var(--size-2);
+}
+
+.bp_base_badge_module_mediumSizeBadge--251c2{
+  height:var(--size-3);
+  min-width:var(--size-3);
+}
+
+.bp_base_badge_module_largeSizeBadge--251c2{
+  height:var(--size-4);
+  min-width:var(--size-4);
+}
+
+.bp_base_badge_module_xlargeSizeBadge--251c2{
+  height:var(--size-5);
+  min-width:var(--size-5);
+}
+
+.bp_base_badge_module_iconBadge--251c2{
+  bottom:-5%;
+  right:-5%;
+}
+
+.bp_base_badge_module_statusBadge--251c2{
+  bottom:-20%;
+  right:-20%;
+}
+
+.bp_base_badge_module_statusBadge--251c2.bp_base_badge_module_largeSizeBadge--251c2{
+  bottom:-22%;
+  right:-22%;
+}
+
+.bp_base_badge_module_statusBadge--251c2.bp_base_badge_module_xlargeSizeBadge--251c2{
+  bottom:-15%;
+  right:-15%;
+}
+
+.bp_base_badge_module_numericBadge--251c2{
+  left:60%;
+  top:0;
+}
+
+.bp_base_badge_module_numericBadgeSingleDigit--251c2{
+  padding:1px;
+}
+
+.bp_base_badge_module_numericBadgeMoreDigits--251c2{
+  padding:1px 3px;
+}
+
 .bp_card_module_card--aac33{
   background:var(--surface-card-surface);
   border:var(--border-1) solid var(--border-card-border);

package/lib-esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './actionable-inline-notice';
 export * from './avatar';
+export * from './badge';
 export * from './branding-styles';
 export * from './button';
 export * from './card';

package/lib-esm/index.js

@@ -1,6 +1,9 @@
 export { Accordion } from './accordion/accordion.js';
 export { ActionableInlineNotice } from './actionable-inline-notice/index.js';
 export { Avatar } from './avatar/avatar.js';
+export { IconBadge } from './badge/icon-badge.js';
+export { NumericBadge } from './badge/numeric-badge.js';
+export { StatusBadge } from './badge/status-badge.js';
 export { BrandingStyles } from './branding-styles/branding-styles.js';
 export { useCustomBranding } from './branding-styles/useCustomBranding.js';
 export { Button } from './button/button.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.8.0",
+    "version": "7.10.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
         "@box/storybook-utils": "^0.2.1",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "cca3b51a9667470b94e0898699f1c2ed8ccdc4cd",
+    "gitHead": "1c4894acc4c1c6e26e2ce2bda5dcb5d500b9a0db",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {