@box/blueprint-web 5.31.3

package/lib-esm/util-components/menu-item-sections/menu-item-sections.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"menuItemMainContent":"menu-item-sections-module_menuItemMainContent__7F2do","label":"menu-item-sections-module_label__XO4Q3","bold":"menu-item-sections-module_bold__NvEY6","description":"menu-item-sections-module_description__r-o44","menuItemSideContent":"menu-item-sections-module_menuItemSideContent__MY5uD","textOnLightSecondary":"menu-item-sections-module_textOnLightSecondary__bFOQV"};
+
+export { styles as default };

package/lib-esm/util-components/scrollable-container/scrollable-container.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentPropsWithRef, type ReactNode, type RefObject, type UIEvent } from 'react';
+interface ScrollableContainerProps extends ComponentPropsWithRef<'div'> {
+    children: ReactNode;
+}
+export type ScrollContextType = {
+    offsetX: number;
+    offsetY: number;
+    isScrolledX: boolean;
+    isScrolledY: boolean;
+    offsetTillEndX: number;
+    offsetTillEndY: number;
+    isScrolledToEndX: boolean;
+    isScrolledToEndY: boolean;
+};
+export declare const ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<ScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function useScrollContext(): ScrollContextType;
+export declare const useScroll: (forwardedRef: RefObject<HTMLDivElement>, scrollThrottleDelay?: number) => {
+    value: {
+        isScrolledX: boolean;
+        isScrolledY: boolean;
+        offsetX: number;
+        offsetY: number;
+        offsetTillEndX: number;
+        offsetTillEndY: number;
+        isScrolledToEndY: boolean;
+        isScrolledToEndX: boolean;
+    };
+    onScrollThrottled: import("lodash").DebouncedFunc<(e: UIEvent<HTMLElement>) => void>;
+};
+export {};

package/lib-esm/util-components/scrollable-container/scrollable-container.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import throttle from 'lodash/throttle';
+import { forwardRef, useRef, useContext, useState, useMemo, createContext } from 'react';
+import { useForkRef } from '../../utils/useForkRef.js';
+import styles from './scrollable-container.module.js';
+
+const ScrollContext = /*#__PURE__*/createContext(undefined);
+const ScrollableContainer = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => {
+  const localRef = useRef(null);
+  const scrollOptions = useScroll(localRef);
+  return jsx(ScrollContext.Provider, {
+    value: scrollOptions.value,
+    children: jsx("div", {
+      ...rest,
+      ref: useForkRef(localRef, forwardedRef),
+      className: clsx(styles.scrollableContainer, className),
+      onScroll: scrollOptions.onScrollThrottled,
+      children: children
+    })
+  });
+});
+function useScrollContext() {
+  const context = useContext(ScrollContext);
+  if (context === undefined) {
+    throw new Error('useScrollContext must be used with ScrollProvider');
+  }
+  return context;
+}
+const useScroll = (forwardedRef, scrollThrottleDelay = 100) => {
+  const [offsetX, setScrolledX] = useState(0);
+  const [offsetY, setScrolledY] = useState(0);
+  const onScrollThrottled = useMemo(() => throttle(e => {
+    const scrollX = e.target?.scrollLeft || 0;
+    const scrollY = e.target?.scrollTop || 0;
+    setScrolledX(scrollX);
+    setScrolledY(scrollY);
+  }, scrollThrottleDelay), [scrollThrottleDelay]);
+  const isScrolledX = offsetX > 0;
+  const isScrolledY = offsetY > 0;
+  const offsetTillEndX = (forwardedRef.current?.scrollWidth || Infinity) - (forwardedRef.current?.offsetWidth || Infinity) - offsetX;
+  const offsetTillEndY = (forwardedRef.current?.scrollHeight || Infinity) - (forwardedRef.current?.offsetHeight || Infinity) - offsetY;
+  const isScrolledToEndX = offsetTillEndX <= 0;
+  const isScrolledToEndY = offsetTillEndY <= 0;
+  const value = useMemo(() => ({
+    isScrolledX,
+    isScrolledY,
+    offsetX,
+    offsetY,
+    offsetTillEndX,
+    offsetTillEndY,
+    isScrolledToEndY,
+    isScrolledToEndX
+  }), [isScrolledToEndX, isScrolledToEndY, isScrolledX, isScrolledY, offsetTillEndX, offsetTillEndY, offsetX, offsetY]);
+  return {
+    value,
+    onScrollThrottled
+  };
+};
+
+export { ScrollableContainer, useScroll, useScrollContext };

package/lib-esm/util-components/scrollable-container/scrollable-container.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"scrollableContainer":"scrollable-container-module_scrollableContainer__KAyOF"};
+
+export { styles as default };

package/lib-esm/util-components/search-term-string/index.d.ts

@@ -0,0 +1 @@
+export * from './search-term-string';

package/lib-esm/util-components/search-term-string/search-term-string.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type SearchTermStringProps } from './types';
+/** Highlights all the matching regex from a searchString */
+export declare const SearchTermString: ({ regex, searchString }: SearchTermStringProps) => JSX.Element | null;
+export default SearchTermString;

package/lib-esm/util-components/search-term-string/search-term-string.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import clsx from 'clsx';
+import styles from './search-term-string.module.js';
+import { processString } from '../../utils/processString.js';
+
+const MarkSearchTerm = (key, [, result]) => {
+  return jsx("mark", {
+    className: clsx(styles.searchTerm),
+    "data-testid": "marked-search-term",
+    children: result
+  }, key);
+};
+/** Highlights all the matching regex from a searchString */
+const SearchTermString = ({
+  regex,
+  searchString
+}) => {
+  const processedString = React.useMemo(() => {
+    if (!searchString) {
+      return null;
+    }
+    if (!regex) {
+      return searchString;
+    }
+    return processString({
+      processingRegex: regex,
+      processingFunction: MarkSearchTerm,
+      processingInput: searchString
+    });
+  }, [regex, searchString]);
+  if (!processedString) {
+    return null;
+  }
+  return jsx("div", {
+    className: clsx(styles.searchTermString),
+    children: processedString
+  });
+};
+
+export { SearchTermString, SearchTermString as default };

package/lib-esm/util-components/search-term-string/search-term-string.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"searchTerm":"search-term-string-module_searchTerm__Bz1zC","searchTermString":"search-term-string-module_searchTermString__bd2Qw"};
+
+export { styles as default };

package/lib-esm/util-components/search-term-string/types.d.ts

@@ -0,0 +1,4 @@
+export type SearchTermStringProps = {
+    regex?: RegExp;
+    searchString?: string;
+};

package/lib-esm/util-components/text-with-info-badge/index.d.ts

@@ -0,0 +1 @@
+export * from './text-with-info-badge';

package/lib-esm/util-components/text-with-info-badge/text-with-info-badge.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type TextWithInfoBadgeProps } from './types';
+export declare const TextWithInfoBadge: (props: TextWithInfoBadgeProps) => JSX.Element;
+export default TextWithInfoBadge;

package/lib-esm/util-components/text-with-info-badge/text-with-info-badge.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { InfoBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { clsx } from 'clsx';
+import { Tooltip } from '../../tooltip/tooltip.js';
+import { InteractiveIcon } from '../interactive-icon/interactive-icon.js';
+import styles from './text-with-info-badge.module.js';
+
+const TextWithInfoBadge = props => {
+  const {
+    children,
+    className,
+    id,
+    infoText,
+    infoBadgeAriaLabel,
+    variant = 'default'
+  } = props;
+  return jsxs("div", {
+    className: clsx(styles.text, styles[variant], className),
+    id: id,
+    children: [children, infoText && infoBadgeAriaLabel && jsx("span", {
+      className: styles.badgeContainer,
+      children: jsx(Tooltip, {
+        content: infoText,
+        children: jsx("span", {
+          className: styles.badge,
+          children: jsx(InteractiveIcon, {
+            "aria-label": infoBadgeAriaLabel,
+            icon: InfoBadge
+          })
+        })
+      })
+    })]
+  });
+};
+
+export { TextWithInfoBadge, TextWithInfoBadge as default };

package/lib-esm/util-components/text-with-info-badge/text-with-info-badge.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"text":"text-with-info-badge-module_text__HntPg","muted":"text-with-info-badge-module_muted__a6sEh","badgeContainer":"text-with-info-badge-module_badgeContainer__VUI-T","badge":"text-with-info-badge-module_badge__l53Hs"};
+
+export { styles as default };

package/lib-esm/util-components/text-with-info-badge/types.d.ts

@@ -0,0 +1,15 @@
+import { type StyledText } from '../../utils/commonTypes';
+export type TextWithInfoBadgeProps = {
+    /** The text to display */
+    children: StyledText;
+    /** Additional class name for adding styles */
+    className?: string;
+    /** An id to be associated with the text wrapper */
+    id?: string;
+    /** Additional text to aid in use. It will appear inside info icon tooltip. */
+    infoText?: StyledText;
+    /** aria-label for the label badge button */
+    infoBadgeAriaLabel?: string;
+    /** The color of the text */
+    variant?: 'default' | 'muted';
+};

package/lib-esm/utils/DocsStoryHeightDecorator.d.ts

@@ -0,0 +1,14 @@
+import { type Decorator } from '@storybook/react';
+/**
+ * Creates container with preset height for story in docs tab of storybook.
+ *
+ * @param docsStoryHeight - string | number
+ * @example
+ * export default {
+ *   ...componentMetaConfiguration,
+ *   args: { ...defaultArgs, docsStoryHeight: '60px' },
+ *   decorators: [DocsStoryHeightDecorator],
+ * }
+ *
+ */
+export declare const DocsStoryHeightDecorator: Decorator;

package/lib-esm/utils/VariantsAggregator.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type FunctionComponent } from 'react';
+export type ComponentVariant<Props extends object> = {
+    props?: Partial<Props>;
+    ComponentTemplate?: FunctionComponent<any>;
+};
+export type ComponentRecord<ComponentProps> = Record<string, ComponentVariant<Partial<ComponentProps>>>;
+export declare const VariantsAggregator: {
+    <T extends JSX.IntrinsicAttributes>({ defaultProps, DefaultComponentTemplate, variantsMap, containerStyle, }: {
+        defaultProps: T;
+        DefaultComponentTemplate: FunctionComponent<T>;
+        variantsMap: Record<string, ComponentVariant<T>>;
+        containerStyle?: CSSProperties | undefined;
+    }): JSX.Element;
+    displayName: string;
+};

package/lib-esm/utils/a11yExceptionsConfig.d.ts

@@ -0,0 +1,65 @@
+export declare const popoverHiddenFocusException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const comboboxTextAreaException: {
+    id: string;
+    selector: string;
+}[];
+export declare const emptyTableHeaderException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const ariaHiddenFocusException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const separatorInDropdownException: {
+    id: string;
+    selector: string;
+}[];
+export declare const contextMenuWithNestedMenuException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const ariaHiddenDivBeingSiblingOfTabException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const NotificationsListExceptions: ({
+    id: string;
+    selector: string;
+    reviewOnFail?: undefined;
+} | {
+    id: string;
+    reviewOnFail: boolean;
+    selector?: undefined;
+})[];
+export declare const calendarLandmarkTopLevelException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const nestedInteractiveA11yException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const uniqueLandmarksException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const landmarkNoDuplicateBannerException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const duplicateIdException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const colorContrastException: {
+    id: string;
+    enabled: boolean;
+}[];
+export declare const buttonNameException: {
+    id: string;
+    enabled: boolean;
+}[];

package/lib-esm/utils/commonTypes.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export type StyledText = ReactNode;

package/lib-esm/utils/debounce.d.ts

@@ -0,0 +1,4 @@
+export declare const debounce: <F extends (...args: Parameters<F>) => ReturnType<F>>(func: F, waitFor: number) => {
+    (...args: Parameters<F>): void;
+    clear(): void;
+};

package/lib-esm/utils/debounce.js

@@ -0,0 +1,13 @@
+const debounce = (func, waitFor) => {
+  let timeout;
+  const debounced = (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), waitFor);
+  };
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+  return debounced;
+};
+
+export { debounce };

package/lib-esm/utils/getButtonOptions.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from '@ariakit/react';
+type ButtonInteractionOptions = Pick<ButtonProps, 'aria-disabled' | 'clickOnEnter' | 'clickOnSpace' | 'focusable'>;
+type DependentButtonProps = ButtonInteractionOptions & {
+    loading?: boolean;
+};
+export declare const getButtonOptions: <T extends DependentButtonProps>(props: T) => T;
+export {};

package/lib-esm/utils/getButtonOptions.js

@@ -0,0 +1,15 @@
+const getButtonOptions = props => {
+  const buttonProps = {};
+  if (props.loading) {
+    buttonProps['aria-disabled'] = true;
+    buttonProps.clickOnEnter = false;
+    buttonProps.clickOnSpace = false;
+    buttonProps.focusable = false;
+  }
+  return {
+    ...props,
+    ...buttonProps
+  };
+};
+
+export { getButtonOptions };

package/lib-esm/utils/isDefined.d.ts

@@ -0,0 +1 @@
+export declare const isDefined: (value: any) => boolean;

package/lib-esm/utils/isDefined.js

@@ -0,0 +1,8 @@
+import isUndefined from 'lodash/isUndefined';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isDefined = value => {
+  return !isUndefined(value);
+};
+
+export { isDefined };

package/lib-esm/utils/keyboardUtils.d.ts

@@ -0,0 +1,5 @@
+import { type KeyboardEvent } from 'react';
+export declare enum keys {
+    ESCAPE = "Escape"
+}
+export declare function isCtrlKeyPressed(e: KeyboardEvent<HTMLDivElement>): boolean;

package/lib-esm/utils/keyboardUtils.js

@@ -0,0 +1,14 @@
+import { isMac } from '@react-aria/utils';
+
+var keys;
+(function (keys) {
+  keys["ESCAPE"] = "Escape";
+})(keys || (keys = {}));
+function isCtrlKeyPressed(e) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+  return e.ctrlKey;
+}
+
+export { isCtrlKeyPressed, keys };

package/lib-esm/utils/ownerWindow.d.ts

@@ -0,0 +1 @@
+export declare function ownerWindow(node: Node | undefined): Window;

package/lib-esm/utils/ownerWindow.js

@@ -0,0 +1,9 @@
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+function ownerWindow(node) {
+  const doc = ownerDocument(node);
+  return doc.defaultView || window;
+}
+
+export { ownerWindow };

package/lib-esm/utils/processString.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Helper method to apply a function to all matching regex in a string
+ * ref: https://github.com/EfogDev/react-process-string/blob/master/index.js
+ * */
+import type React from 'react';
+type ProcessedString = React.JSX.Element | string;
+type ProcessStringInput = {
+    processingRegex: RegExp;
+    processingFunction: (key: number, result: Array<string>) => ProcessedString;
+    processingInput: string;
+};
+export declare const processString: (processStringInput: ProcessStringInput) => Array<ProcessedString>;
+export {};

package/lib-esm/utils/processString.js

@@ -0,0 +1,27 @@
+const processString = processStringInput => {
+  let key = 0;
+  const {
+    processingRegex,
+    processingFunction
+  } = processStringInput;
+  let {
+    processingInput
+  } = processStringInput;
+  let result = null;
+  const output = [];
+  while ((result = processingRegex.exec(processingInput)) !== null) {
+    const {
+      index
+    } = result;
+    const match = result[0];
+    output.push(processingInput.substring(0, index));
+    key += 1;
+    output.push(processingFunction(key, result));
+    processingInput = processingInput.substring(index + match.length, processingInput.length + 1);
+    processingRegex.lastIndex = 0;
+  }
+  output.push(processingInput);
+  return output;
+};
+
+export { processString };

package/lib-esm/utils/switchCase.d.ts

@@ -0,0 +1 @@
+export declare const switchCase: <T>(cases: Record<string | number, T>) => (key: string | number) => T | null;

package/lib-esm/utils/switchCase.js

@@ -0,0 +1,5 @@
+import { isDefined } from './isDefined.js';
+
+const switchCase = cases => key => isDefined(cases[key]) ? cases[key] : !!cases.default && cases.default || null;
+
+export { switchCase };

package/lib-esm/utils/testStories.utils.d.ts

@@ -0,0 +1,99 @@
+/// <reference types="react" />
+export declare function sleep(ms: number): Promise<unknown>;
+export declare const docsDisabledNotice: {
+    docs: {
+        page: () => JSX.Element;
+    };
+};
+export declare const enableSnapshotsParams: {
+    chromatic: {
+        disableSnapshot: boolean;
+    };
+};
+export declare const disableControlsParams: {
+    controls: {
+        exclude: RegExp;
+    };
+};
+export declare const defaultInteractionTestsConfig: {
+    parameters: {
+        docs: {
+            page: () => JSX.Element;
+        };
+        controls: {
+            exclude: RegExp;
+        };
+    };
+};
+export declare const defaultVrtConfig: {
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        docs: {
+            page: () => JSX.Element;
+        };
+        controls: {
+            exclude: RegExp;
+        };
+    };
+};
+export declare const onlyDocsParametersConfig: {
+    viewMode: string;
+    previewTabs: {
+        canvas: {
+            hidden: boolean;
+        };
+    };
+};
+export declare const subComponentsDocsConfig: {
+    viewMode: string;
+    previewTabs: {
+        canvas: {
+            hidden: boolean;
+        };
+    };
+};
+export declare const viewportConfig: {
+    small: {
+        parameters: {
+            chromatic: {
+                viewports: number[];
+            };
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+    medium: {
+        parameters: {
+            chromatic: {
+                viewports: number[];
+            };
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+    large: {
+        parameters: {
+            chromatic: {
+                viewports: number[];
+            };
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+    xlarge: {
+        parameters: {
+            chromatic: {
+                viewports: number[];
+            };
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+};
+export declare const getDisabledArgs: (args: string[]) => any;

package/lib-esm/utils/unstableStorybookMessage.utils.d.ts

@@ -0,0 +1 @@
+export declare const UnstableComponentMd: string;

package/lib-esm/utils/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/lib-esm/utils/use-debounce.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export { useDebounce };

package/lib-esm/utils/useBreakpoint.d.ts

@@ -0,0 +1,16 @@
+export declare enum Breakpoint {
+    Small = 1,
+    Medium = 2,
+    Large = 3,
+    XLarge = 4
+}
+/**
+ * Returns an enum matching a Blueprint breakpoint for current window size.
+ *
+ * @example
+ * const breakpoint = useBreakpoint();
+ * return breakpoint > Breakpoint.Medium && 'Hello!';
+ *
+ * @returns Breakpoint enum
+ */
+export declare const useBreakpoint: () => Breakpoint;