@box/blueprint-web 13.18.0 → 14.0.0

package/dist/lib-esm/card-tooltip-v2/card-tooltip-v2.js

@@ -1,119 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as Ariakit from '@ariakit/react';
-import clsx from 'clsx';
-import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
-import { Card } from '../card/card.js';
-import { composeEventHandlers } from '../utils/composeEventHandlers.js';
-import styles from './card-tooltip-v2.module.js';
-
-/**
- * CardTooltipV2 is a component that wraps a Card component inside a Tooltip component. The main difference between CardTooltipV2 and CardTooltip is that CardTooltipV2 uses Ariakit Tooltip component instead of Radix Tooltip component.
- *
- * You must only pass non-interactive content inside `content` prop.
- *
- * **IMPORTANT**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement,  HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
- *
- */
-const CardTooltipV2 = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    content,
-    setOpen,
-    open,
-    defaultOpen,
-    className,
-    skipTimeout,
-    hideTooltipOnContentClick,
-    hideOnInteractOutside,
-    placement = 'bottom',
-    elevation = 'dropshadow-3',
-    addDelayOnFocus,
-    ...contentProps
-  } = props;
-  const SHOW_TIMEOUT = 300;
-  const tooltipStore = Ariakit.useTooltipStore({
-    open,
-    setOpen,
-    defaultOpen,
-    placement,
-    showTimeout: SHOW_TIMEOUT,
-    hideTimeout: 0,
-    skipTimeout
-  });
-  const side = Ariakit.useStoreState(tooltipStore, 'currentPlacement').split('-')[0];
-  const contentId = Ariakit.useStoreState(tooltipStore, state => state.contentElement?.id);
-  const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
-  const isOpen = Ariakit.useStoreState(tooltipStore, 'open');
-  const focusTimeout = useRef(0);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  useLayoutEffect(() => {
-    if (mounted && !isOpen) {
-      // Make sure that tooltip disappears instantly after it is closed.
-      // Otherwise, once a tooltip is hovered, moving mouse to other tooltips
-      // could open them without honoring `showTimeout`.
-      tooltipStore.setState('animating', false);
-    }
-  }, [isOpen, mounted, tooltipStore]);
-  const handleHideOnInteractOutside = useCallback(e => {
-    if (typeof hideOnInteractOutside === 'function') {
-      hideOnInteractOutside(e);
-    }
-    if (e.type === 'focusin') {
-      const state = tooltipStore.getState();
-      const contentElement = state?.contentElement;
-      // If tooltip content is losing focus, do not hide it
-      // since it can be stolen sometimes by elements outside of it.
-      if (e?.relatedTarget === contentElement) {
-        return false;
-      }
-    }
-    return true;
-  }, [hideOnInteractOutside, tooltipStore]);
-  const handleOnFocusVisibleWithDelay = event => {
-    event.preventDefault();
-    event.currentTarget.setAttribute('data-focus-visible', 'true');
-    focusTimeout.current = window.setTimeout(() => {
-      tooltipStore?.setAnchorElement(event.currentTarget);
-      tooltipStore?.show();
-    }, SHOW_TIMEOUT);
-  };
-  const handleBlur = event => {
-    event.currentTarget.removeAttribute('data-focus-visible');
-    window.clearTimeout(focusTimeout.current);
-  };
-  return jsxs(Ariakit.TooltipProvider, {
-    store: tooltipStore,
-    children: [jsx(Ariakit.TooltipAnchor, {
-      ...(mounted && {
-        'aria-describedby': contentId
-      }),
-      onClick: tooltipStore.hide,
-      render: children,
-      ...(addDelayOnFocus && {
-        onFocusVisible: handleOnFocusVisibleWithDelay,
-        onBlur: handleBlur
-      })
-    }), jsx(Ariakit.Tooltip, {
-      ...contentProps,
-      ...(hideTooltipOnContentClick && {
-        onClick: composeEventHandlers(tooltipStore.hide, contentProps.onClick)
-      }),
-      ref: ref,
-      className: clsx(styles.content, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
-      "data-side": side,
-      fitViewport: true,
-      gutter: 4,
-      hideOnInteractOutside: handleHideOnInteractOutside,
-      children: jsx(Card, {
-        elevation: elevation,
-        children: content
-      })
-    })]
-  });
-});
-
-export { CardTooltipV2 };

package/dist/lib-esm/card-tooltip-v2/card-tooltip-v2.module.js

@@ -1,4 +0,0 @@
-import '../index.css';
-var styles = {"content":"bp_card_tooltip_v2_module_content--0d2ae"};
-
-export { styles as default };

package/dist/lib-esm/card-tooltip-v2/index.d.ts

@@ -1,2 +0,0 @@
-export { CardTooltipV2 } from './card-tooltip-v2';
-export { type CardTooltipV2Props } from './types';

package/dist/lib-esm/card-tooltip-v2/types.d.ts

@@ -1,30 +0,0 @@
-import { type TooltipProps, type TooltipStoreProps } from '@ariakit/react';
-import { type ReactElement, type ReactNode } from 'react';
-import { type CardProps } from '../card/types';
-export interface CardTooltipV2Props extends Omit<TooltipProps, 'content' | 'ref'> {
-    /**
-     * If true, the tooltip will be opened with delay when user focuses on the anchor. Be mindful that are accessibility concerns when using this prop. It should only be used in cases where the content is purely decorative and does not convey important information that needs to be accessible to screen readers or assistive technologies.
-     * @default false
-     */
-    addDelayOnFocus?: boolean;
-    /** The anchor for the tooltip. */
-    children: ReactElement;
-    /** The content of the tooltip. */
-    content: ReactNode;
-    defaultOpen?: TooltipStoreProps['defaultOpen'];
-    /**
-     * The elevation of the Card inside.
-     * @default dropshadow-3
-     */
-    elevation?: CardProps['elevation'];
-    /**
-     * If true, the tooltip will close itself when the content area is clicked.
-     * @default false
-     */
-    hideTooltipOnContentClick?: boolean;
-    open?: TooltipStoreProps['open'];
-    placement?: TooltipStoreProps['placement'];
-    portalElement?: TooltipProps['portalElement'];
-    setOpen?: TooltipStoreProps['setOpen'];
-    skipTimeout?: TooltipStoreProps['skipTimeout'];
-}

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

@@ -1,4 +0,0 @@
-import { type ContentFieldProps } from './types';
-export declare const contentFieldButtonTestId = "ContentField-button";
-/** @deprecated Use ContentField from @box/content-field package */
-export declare const ContentField: import("react").ForwardRefExoticComponent<ContentFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,126 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Button } from '@ariakit/react';
-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 { forwardRef, createRef } from 'react';
-import { InlineError } from '../primitives/inline-error/inline-error.js';
-import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
-import { useUniqueId } from '../utils/useUniqueId.js';
-import styles from './content-field.module.js';
-import { messages } from './messages.js';
-
-const ContentIconContainer = ({
-  children
-}) => jsx("div", {
-  className: styles.contentIconContainer,
-  children: children
-});
-const ContentIcon = ({
-  isSharedFolder,
-  itemIcon
-}) => {
-  if (itemIcon) {
-    return itemIcon;
-  }
-  if (isSharedFolder) {
-    return jsx(FolderShared, {
-      "aria-label": messages.sharedFolderIconLabel,
-      className: styles.contentIconShared,
-      height: Space6,
-      width: Space6
-    });
-  }
-  return jsx(ContentIconContainer, {
-    children: jsx(Folder, {
-      "aria-label": messages.folderIconLabel,
-      height: Space4,
-      width: Space4
-    })
-  });
-};
-const handleOnClickClearButton = ({
-  ref,
-  onClickClearButton
-}) => e => {
-  ref.current?.focus();
-  onClickClearButton(e);
-};
-const contentFieldButtonTestId = 'ContentField-button';
-/** @deprecated Use ContentField from @box/content-field package */
-const ContentField = /*#__PURE__*/forwardRef(({
-  clearButtonAriaLabel,
-  itemIcon,
-  hintText,
-  isSharedFolder,
-  onClick,
-  onClickClearButton,
-  title,
-  error,
-  ...rest
-}, forwardedRef) => {
-  const labelRef = /*#__PURE__*/createRef();
-  const {
-    Wrapper: Tooltip,
-    wrapperProps
-  } = useFullTextTooltip({
-    ref: labelRef,
-    textValue: title ?? hintText
-  });
-  const inlineErrorId = useUniqueId('inline-error-');
-  return jsxs("div", {
-    className: styles.contentFieldWrapper,
-    children: [jsxs("div", {
-      className: styles.contentField,
-      children: [jsx(Tooltip, {
-        ...wrapperProps,
-        children: jsxs(Button, {
-          ref: forwardedRef,
-          "aria-describedby": inlineErrorId,
-          className: clsx(styles.contentButton, {
-            [styles.hasSelection]: title,
-            [styles.error]: !!error
-          }),
-          "data-testid": contentFieldButtonTestId,
-          onClick: onClick,
-          type: "button",
-          ...rest,
-          children: [jsx(ContentIcon, {
-            isSharedFolder: isSharedFolder,
-            itemIcon: itemIcon
-          }), jsx("div", {
-            className: styles.contentLabelWrapper,
-            children: jsx("div", {
-              ref: labelRef,
-              className: styles.contentLabel,
-              children: title ?? hintText
-            })
-          })]
-        })
-      }), title && jsx(Button, {
-        "aria-label": clearButtonAriaLabel ?? messages.clearContentFieldButtonLabel,
-        className: clsx(styles.clearButton, {
-          [styles.hasSelection]: title,
-          [styles.error]: !!error
-        }),
-        onClick: handleOnClickClearButton({
-          ref: labelRef,
-          onClickClearButton
-        }),
-        type: "button",
-        children: jsx(XMark, {
-          "aria-label": messages.clearContentFieldIconLabel,
-          height: Space6,
-          width: Space6
-        })
-      })]
-    }), jsx(InlineError, {
-      className: styles.inlineError,
-      id: inlineErrorId,
-      children: error
-    })]
-  });
-});
-
-export { ContentField, contentFieldButtonTestId };

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

@@ -1,4 +0,0 @@
-import '../index.css';
-var styles = {"contentFieldWrapper":"bp_content_field_module_contentFieldWrapper--67a59","contentField":"bp_content_field_module_contentField--67a59","inlineError":"bp_content_field_module_inlineError--67a59","contentButton":"bp_content_field_module_contentButton--67a59","error":"bp_content_field_module_error--67a59","hasSelection":"bp_content_field_module_hasSelection--67a59","contentIconContainer":"bp_content_field_module_contentIconContainer--67a59","contentIconShared":"bp_content_field_module_contentIconShared--67a59","contentLabelWrapper":"bp_content_field_module_contentLabelWrapper--67a59","contentLabel":"bp_content_field_module_contentLabel--67a59","clearButton":"bp_content_field_module_clearButton--67a59"};
-
-export { styles as default };

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

@@ -1,2 +0,0 @@
-export { ContentField } from './content-field';
-export { type ContentFieldProps } from './types';

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

@@ -1,7 +0,0 @@
-export declare const messages: {
-    sharedFolderIconLabel: string;
-    folderIconLabel: string;
-    fileIconLabel: string;
-    clearContentFieldButtonLabel: string;
-    clearContentFieldIconLabel: string;
-};

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

@@ -1,8 +0,0 @@
-const messages = {
-  sharedFolderIconLabel: 'Shared Folder Icon',
-  folderIconLabel: 'Folder Icon',
-  clearContentFieldButtonLabel: 'Clear Content Field',
-  clearContentFieldIconLabel: 'Clear Content Field icon'
-};
-
-export { messages };

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

@@ -1,35 +0,0 @@
-import { type ReactElement } from 'react';
-export interface ContentFieldProps {
-    /**
-     * custom aria label for the content field clear button.
-     */
-    clearButtonAriaLabel?: string;
-    /**
-     * placeholder text for the content field.
-     */
-    hintText: string;
-    /**
-     * type of the selected content(document, folder, etc.)
-     */
-    itemIcon?: ReactElement;
-    /**
-     * whether or not the selected content is a shared folder.
-     */
-    isSharedFolder?: boolean;
-    /**
-     * callback used by consumer to open content picker or equivalent.
-     */
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /**
-     * callback to clear selected content
-     */
-    onClickClearButton: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /**
-     * title of the selected content selected content
-     */
-    title?: string;
-    /**
-     * The content of the error message
-     */
-    error?: React.ReactNode;
-}

package/dist/lib-esm/util-components/focus-trap/focus-trap.d.ts

@@ -1,2 +0,0 @@
-import { type FocusTrapProps } from './types';
-export declare const FocusTrap: ({ containerRef, children, customInitialFocus }: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/util-components/focus-trap/focus-trap.js

@@ -1,52 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useCallback, useEffect } from 'react';
-import tabbable from 'tabbable';
-
-// TODO(DISC-1141): write unit tests
-const FocusTrap = ({
-  containerRef,
-  children,
-  customInitialFocus
-}) => {
-  const previousFocusEl = useRef(null);
-  const getTabbableElements = useCallback(() => {
-    if (!containerRef.current) {
-      throw new Error('Could not initialize focus-trapping - container is missing');
-    }
-    const tabbableEls = tabbable(containerRef.current);
-    if (!tabbableEls.length) {
-      throw new Error('Could not initialize focus-trapping - focusable elements are missing');
-    }
-    return tabbableEls;
-  }, [containerRef]);
-  const focusFirstTabbableElement = useCallback(() => {
-    const tabbableEls = getTabbableElements();
-    tabbableEls[0].focus();
-  }, [getTabbableElements]);
-  const focusLastTabbableElement = useCallback(() => {
-    const tabbableEls = getTabbableElements();
-    tabbableEls[tabbableEls.length - 1].focus();
-  }, [getTabbableElements]);
-  useEffect(() => {
-    previousFocusEl.current = document.activeElement;
-    customInitialFocus ? customInitialFocus(getTabbableElements()) : focusFirstTabbableElement();
-    return () => {
-      if (previousFocusEl.current) {
-        previousFocusEl.current.focus();
-      }
-    };
-  }, [customInitialFocus, focusFirstTabbableElement, getTabbableElements]);
-  return jsxs(Fragment, {
-    children: [jsx("i", {
-      "aria-hidden": true,
-      onFocus: focusLastTabbableElement,
-      tabIndex: 0
-    }), children, jsx("i", {
-      "aria-hidden": true,
-      onFocus: focusFirstTabbableElement,
-      tabIndex: 0
-    })]
-  });
-};
-
-export { FocusTrap };

package/dist/lib-esm/util-components/focus-trap/index.d.ts

@@ -1 +0,0 @@
-export { FocusTrap } from './focus-trap';

package/dist/lib-esm/util-components/focus-trap/types.d.ts

@@ -1,8 +0,0 @@
-import { type MutableRefObject } from 'react';
-export interface FocusTrapProps {
-    children: React.ReactNode;
-    /** Reference to the container element */
-    containerRef: MutableRefObject<HTMLDivElement | null>;
-    /** Function to set the focus to a desired element when the focus trap is activated */
-    customInitialFocus?: (tabbableEls: (HTMLElement | SVGElement)[]) => void;
-}

package/dist/lib-esm/utils/useIsTriggerInteractive.d.ts

@@ -1,4 +0,0 @@
-/**
- *  React helper hook, which checks interactivity of Tooltip trigger
- */
-export declare const useIsTriggerInteractive: () => import("react").RefObject<HTMLButtonElement>;

package/dist/lib-esm/utils/useIsTriggerInteractive.js

@@ -1,21 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { isTabbable } from 'tabbable';
-
-/**
- *  React helper hook, which checks interactivity of Tooltip trigger
- */
-const useIsTriggerInteractive = () => {
-  // We assert button type for compatibility with ref type of radix trigger
-  const triggerRef = useRef(null);
-  useEffect(() => {
-    const triggerElement = triggerRef.current;
-    if (!triggerElement || !isTabbable(triggerElement)) {
-      const tagName = triggerElement?.tagName ? `<${triggerElement.tagName}>`.toLowerCase() : 'element';
-      /* eslint-disable-next-line no-console */
-      console.error(`${tagName} which acts as a tooltip trigger is not interactive. Make sure that trigger element is focusable, visible, and with a tabindex !== -1. More about tooltip accessibility in the Design System Portal.`);
-    }
-  }, []);
-  return triggerRef;
-};
-
-export { useIsTriggerInteractive };