@box/blueprint-web 13.19.0 → 14.0.1

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 };