@primer/react 38.30.1-rc.0d136c1b7 → 38.30.1-rc.34724960c

package/dist/TextInput/TextInput.d.ts

@@ -1,55 +1,55 @@
-import React from 'react';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { Merge } from '../utils/types';
-import type { StyledWrapperProps } from '../internal/components/TextInputWrapper';
-export type TextInputNonPassthroughProps = {
-    /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
-    icon?: React.ElementType;
-    /** Whether the to show a loading indicator in the input */
-    loading?: boolean;
-    /**
-     * Which position to render the loading indicator
-     * 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning
-     * 'leading': at the beginning of the input
-     * 'trailing': at the end of the input
-     **/
-    loaderPosition?: 'auto' | 'leading' | 'trailing';
-    /** Text for screen readers to convey the loading state */
-    loaderText?: string;
-    /**
-     * A visual that renders inside the input before the typing area
-     */
-    leadingVisual?: React.ElementType | React.ReactNode;
-    /**
-     * A visual that renders inside the input after the typing area
-     */
-    trailingVisual?: React.ElementType | React.ReactNode;
-    /**
-     * A visual that renders inside the input after the typing area
-     */
-    trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>;
-    /**
-     * Optional character limit for the input. If provided, a character counter will be displayed below the input.
-     * When the limit is exceeded, validation styling will be applied.
-     */
-    characterLimit?: number;
-    /**
-     * Stable identifier for the underlying input element.
-     *
-     * TODO: next-major: Remove in favor of data-component="TextInput.Input"
-     */
-    'data-component'?: string;
+import { Merge } from "../utils/types/Merge.js";
+import { ForwardRefComponent } from "../utils/polymorphic.js";
+import { ButtonProps } from "../Button/types.js";
+import { StyledWrapperProps } from "../internal/components/TextInputWrapper.js";
+import React from "react";
+
+//#region src/TextInput/TextInput.d.ts
+type TextInputNonPassthroughProps = {
+  /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */icon?: React.ElementType; /** Whether the to show a loading indicator in the input */
+  loading?: boolean;
+  /**
+   * Which position to render the loading indicator
+   * 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning
+   * 'leading': at the beginning of the input
+   * 'trailing': at the end of the input
+   **/
+  loaderPosition?: 'auto' | 'leading' | 'trailing'; /** Text for screen readers to convey the loading state */
+  loaderText?: string;
+  /**
+   * A visual that renders inside the input before the typing area
+   */
+  leadingVisual?: React.ElementType | React.ReactNode;
+  /**
+   * A visual that renders inside the input after the typing area
+   */
+  trailingVisual?: React.ElementType | React.ReactNode;
+  /**
+   * A visual that renders inside the input after the typing area
+   */
+  trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>;
+  /**
+   * Optional character limit for the input. If provided, a character counter will be displayed below the input.
+   * When the limit is exceeded, validation styling will be applied.
+   */
+  characterLimit?: number;
+  /**
+   * Stable identifier for the underlying input element.
+   *
+   * TODO: next-major: Remove in favor of data-component="TextInput.Input"
+   */
+  'data-component'?: string;
 } & Partial<Pick<StyledWrapperProps, 'block' | 'contrast' | 'disabled' | 'monospace' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size' | 'validationStatus'>>;
-export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>;
-declare const _default: PolymorphicForwardRefComponent<"input", TextInputProps> & {
-    __SLOT__: symbol;
-    Action: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "size" | "tooltipDirection"> & {
-        children?: React.ReactNode;
-        "aria-label"?: string;
-        tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
-        icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
-        variant?: import("..").ButtonProps["variant"];
-    } & React.RefAttributes<HTMLButtonElement>>;
+type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>;
+declare const _default: ForwardRefComponent<"input", TextInputProps> & {
+  __SLOT__: symbol;
+  Action: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "size" | "tooltipDirection"> & {
+    children?: React.ReactNode;
+    "aria-label"?: string;
+    tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+    icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
+    variant?: ButtonProps["variant"];
+  } & React.RefAttributes<HTMLButtonElement>>;
 };
-export default _default;
-//# sourceMappingURL=TextInput.d.ts.map
+//#endregion
+export { TextInputNonPassthroughProps, TextInputProps, _default as default };

package/dist/TextInput/TextInput.js

@@ -1,190 +1,151 @@
-import React, { useState, useId, useCallback } from 'react';
-import { isValidElementType } from 'react-is';
-import { clsx } from 'clsx';
-import { AlertFillIcon } from '@primer/octicons-react';
-import classes from './TextInput.module.css.js';
-import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot.js';
-import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
-import TextInputAction from '../internal/components/TextInputInnerAction.js';
-import UnstyledTextInput from '../internal/components/UnstyledTextInput.js';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import visuallyHiddenClasses from '../_VisuallyHidden.module.css.js';
-import { SCREEN_READER_DELAY, getCharacterCountState } from '../utils/character-counter.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
-import { AriaStatus } from '../live-region/AriaStatus.js';
-import Text from '../Text/Text.js';
-
-// using forwardRef is important so that other components can autofocus the input
-const TextInput = /*#__PURE__*/React.forwardRef(({
-  icon: IconComponent,
-  leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
-  trailingAction,
-  block,
-  className,
-  contrast,
-  disabled,
-  loading,
-  loaderPosition = 'auto',
-  loaderText = 'Loading',
-  monospace,
-  validationStatus,
-  size: sizeProp,
-  onFocus,
-  onBlur,
-  // start deprecated props
-  variant: variantProp,
-  width: widthProp,
-  minWidth: minWidthProp,
-  maxWidth: maxWidthProp,
-  // end deprecated props
-  type = 'text',
-  required,
-  characterLimit,
-  onChange,
-  value,
-  defaultValue,
-  'data-component': dataComponent,
-  ...inputProps
-}, ref) => {
-  var _counter$isOverLimit;
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const inputRef = useProvidedRefOrCreate(ref);
-
-  // For uncontrolled usage we track the length of the input's content so the
-  // character counter can be derived during render rather than synced from an
-  // effect (which would trigger an extra render on every keystroke). For
-  // controlled usage the `value` prop is the source of truth.
-  const isControlled = value !== undefined;
-  const [uncontrolledLength, setUncontrolledLength] = useState(() => defaultValue !== undefined ? String(defaultValue).length : 0);
-  const currentLength = isControlled ? String(value).length : uncontrolledLength;
-
-  // The counter and validation state are derived directly from the current
-  // length, so they stay in sync with the input without an extra render.
-  const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : undefined;
-  const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
-
-  // this class is necessary to style FilterSearch, plz no touchy!
-  const wrapperClasses = clsx(className, 'TextInput-wrapper');
-  const showLeadingLoadingIndicator = loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'));
-  const showTrailingLoadingIndicator = loading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual));
-
-  // Date/time input types that have segment-based focus
-  const isSegmentedInputType = type === 'date' || type === 'time' || type === 'datetime-local';
-  const focusInput = e => {
-    // Don't call focus() if the input itself was clicked on date/time inputs.
-    if (e.target !== inputRef.current || !isSegmentedInputType) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    }
-  };
-  const leadingVisualId = useId();
-  const trailingVisualId = useId();
-  const loadingId = useId();
-  const inputDescribedBy = clsx(inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loading && loadingId) || undefined;
-  const handleInputFocus = useCallback(e_0 => {
-    setIsInputFocused(true);
-    onFocus && onFocus(e_0);
-  }, [onFocus]);
-  const handleInputBlur = useCallback(e_1 => {
-    setIsInputFocused(false);
-    onBlur && onBlur(e_1);
-  }, [onBlur]);
-
-  // Handle input change with character counter
-  const handleInputChange = useCallback(e_2 => {
-    if (characterLimit && !isControlled) {
-      setUncontrolledLength(e_2.target.value.length);
-    }
-    onChange === null || onChange === void 0 ? void 0 : onChange(e_2);
-  }, [onChange, characterLimit, isControlled]);
-  const characterCountId = useId();
-  const characterCountStaticMessageId = useId();
-  const isValid = isOverLimit ? 'error' : validationStatus;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(TextInputWrapper, {
-      block: block,
-      className: wrapperClasses,
-      validationStatus: isValid,
-      contrast: contrast,
-      disabled: disabled,
-      monospace: monospace,
-      size: sizeProp,
-      width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
-      variant: variantProp,
-      hasLeadingVisual: Boolean(LeadingVisual || showLeadingLoadingIndicator),
-      hasTrailingVisual: Boolean(TrailingVisual || showTrailingLoadingIndicator),
-      hasTrailingAction: Boolean(trailingAction),
-      isInputFocused: isInputFocused,
-      onClick: focusInput,
-      "aria-busy": Boolean(loading),
-      children: [IconComponent && /*#__PURE__*/jsx(IconComponent, {
-        className: "TextInput-icon",
-        "data-component": "TextInput.Icon"
-      }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
-        visualPosition: "leading",
-        showLoadingIndicator: showLeadingLoadingIndicator,
-        hasLoadingIndicator: typeof loading === 'boolean',
-        id: leadingVisualId,
-        children: typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? /*#__PURE__*/jsx(LeadingVisual, {}) : LeadingVisual
-      }), /*#__PURE__*/jsx(UnstyledTextInput
-      // @ts-expect-error it needs a non nullable ref
-      , {
-        ref: inputRef,
-        disabled: disabled,
-        onFocus: handleInputFocus,
-        onBlur: handleInputBlur,
-        onChange: handleInputChange,
-        type: type,
-        "aria-required": required,
-        "aria-invalid": isValid === 'error' ? 'true' : undefined,
-        value: value,
-        defaultValue: defaultValue,
-        ...inputProps,
-        "aria-describedby": characterLimit ? [characterCountStaticMessageId, inputDescribedBy].filter(Boolean).join(' ') || undefined : inputDescribedBy
-        // TODO: next-major: Remove in favor of data-component="TextInput.Input"
-        ,
-        "data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : 'input'
-      }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
-        id: loadingId,
-        children: loaderText
-      }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
-        visualPosition: "trailing",
-        showLoadingIndicator: showTrailingLoadingIndicator,
-        hasLoadingIndicator: typeof loading === 'boolean',
-        id: trailingVisualId,
-        "data-testid": "text-input-trailing-visual",
-        children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
-      }), trailingAction]
-    }), characterLimit && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(AriaStatus, {
-        announceOnShow: false,
-        delayMs: SCREEN_READER_DELAY,
-        className: visuallyHiddenClasses.InternalVisuallyHidden,
-        children: counter === null || counter === void 0 ? void 0 : counter.message
-      }), /*#__PURE__*/jsxs(VisuallyHidden, {
-        id: characterCountStaticMessageId,
-        children: ["You can enter up to ", characterLimit, " ", characterLimit === 1 ? 'character' : 'characters']
-      }), /*#__PURE__*/jsxs(Text, {
-        "aria-hidden": "true",
-        id: characterCountId,
-        size: "small",
-        className: clsx(classes.CharacterCounter, isOverLimit && classes['CharacterCounter--error']),
-        "data-component": "TextInput.CharacterCounter",
-        children: [isOverLimit && /*#__PURE__*/jsx(AlertFillIcon, {
-          size: 16
-        }), counter === null || counter === void 0 ? void 0 : counter.message]
-      })]
-    })]
-  });
+import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
+import { AriaStatus } from "../live-region/AriaStatus.js";
+import Text_default from "../Text/Text.js";
+import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
+import VisuallyHidden from "../_VisuallyHidden.js";
+import TextInput_module_css_default from "./TextInput.module.css.js";
+import TextInputInnerVisualSlot from "../internal/components/TextInputInnerVisualSlot.js";
+import { TextInputWrapper } from "../internal/components/TextInputWrapper.js";
+import TextInputAction from "../internal/components/TextInputInnerAction.js";
+import UnstyledTextInput from "../internal/components/UnstyledTextInput.js";
+import { getCharacterCountState } from "../utils/character-counter.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useId, useState } from "react";
+import { isValidElementType } from "react-is";
+import { AlertFillIcon } from "@primer/octicons-react";
+//#region src/TextInput/TextInput.tsx
+const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction, block, className, contrast, disabled, loading, loaderPosition = "auto", loaderText = "Loading", monospace, validationStatus, size: sizeProp, onFocus, onBlur, variant: variantProp, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, type = "text", required, characterLimit, onChange, value, defaultValue, "data-component": dataComponent, ...inputProps }, ref) => {
+	var _counter$isOverLimit;
+	const [isInputFocused, setIsInputFocused] = useState(false);
+	const inputRef = useProvidedRefOrCreate(ref);
+	const isControlled = value !== void 0;
+	const [uncontrolledLength, setUncontrolledLength] = useState(() => defaultValue !== void 0 ? String(defaultValue).length : 0);
+	const currentLength = isControlled ? String(value).length : uncontrolledLength;
+	const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : void 0;
+	const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
+	const wrapperClasses = clsx(className, "TextInput-wrapper");
+	const showLeadingLoadingIndicator = loading && (loaderPosition === "leading" || Boolean(LeadingVisual && loaderPosition !== "trailing"));
+	const showTrailingLoadingIndicator = loading && (loaderPosition === "trailing" || Boolean(loaderPosition === "auto" && !LeadingVisual));
+	const isSegmentedInputType = type === "date" || type === "time" || type === "datetime-local";
+	const focusInput = (e) => {
+		if (e.target !== inputRef.current || !isSegmentedInputType) {
+			var _inputRef$current;
+			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		}
+	};
+	const leadingVisualId = useId();
+	const trailingVisualId = useId();
+	const loadingId = useId();
+	const inputDescribedBy = clsx(inputProps["aria-describedby"], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loading && loadingId) || void 0;
+	const handleInputFocus = useCallback((e_0) => {
+		setIsInputFocused(true);
+		onFocus && onFocus(e_0);
+	}, [onFocus]);
+	const handleInputBlur = useCallback((e_1) => {
+		setIsInputFocused(false);
+		onBlur && onBlur(e_1);
+	}, [onBlur]);
+	const handleInputChange = useCallback((e_2) => {
+		if (characterLimit && !isControlled) setUncontrolledLength(e_2.target.value.length);
+		onChange === null || onChange === void 0 || onChange(e_2);
+	}, [
+		onChange,
+		characterLimit,
+		isControlled
+	]);
+	const characterCountId = useId();
+	const characterCountStaticMessageId = useId();
+	const isValid = isOverLimit ? "error" : validationStatus;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsxs(TextInputWrapper, {
+		block,
+		className: wrapperClasses,
+		validationStatus: isValid,
+		contrast,
+		disabled,
+		monospace,
+		size: sizeProp,
+		width: widthProp,
+		minWidth: minWidthProp,
+		maxWidth: maxWidthProp,
+		variant: variantProp,
+		hasLeadingVisual: Boolean(LeadingVisual || showLeadingLoadingIndicator),
+		hasTrailingVisual: Boolean(TrailingVisual || showTrailingLoadingIndicator),
+		hasTrailingAction: Boolean(trailingAction),
+		isInputFocused,
+		onClick: focusInput,
+		"aria-busy": Boolean(loading),
+		children: [
+			IconComponent && /*#__PURE__*/ jsx(IconComponent, {
+				className: "TextInput-icon",
+				"data-component": "TextInput.Icon"
+			}),
+			/*#__PURE__*/ jsx(TextInputInnerVisualSlot, {
+				visualPosition: "leading",
+				showLoadingIndicator: showLeadingLoadingIndicator,
+				hasLoadingIndicator: typeof loading === "boolean",
+				id: leadingVisualId,
+				children: typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual) ? /*#__PURE__*/ jsx(LeadingVisual, {}) : LeadingVisual
+			}),
+			/*#__PURE__*/ jsx(UnstyledTextInput, {
+				ref: inputRef,
+				disabled,
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur,
+				onChange: handleInputChange,
+				type,
+				"aria-required": required,
+				"aria-invalid": isValid === "error" ? "true" : void 0,
+				value,
+				defaultValue,
+				...inputProps,
+				"aria-describedby": characterLimit ? [characterCountStaticMessageId, inputDescribedBy].filter(Boolean).join(" ") || void 0 : inputDescribedBy,
+				"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "input"
+			}),
+			loading && /*#__PURE__*/ jsx(VisuallyHidden, {
+				id: loadingId,
+				children: loaderText
+			}),
+			/*#__PURE__*/ jsx(TextInputInnerVisualSlot, {
+				visualPosition: "trailing",
+				showLoadingIndicator: showTrailingLoadingIndicator,
+				hasLoadingIndicator: typeof loading === "boolean",
+				id: trailingVisualId,
+				"data-testid": "text-input-trailing-visual",
+				children: typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/ jsx(TrailingVisual, {}) : TrailingVisual
+			}),
+			trailingAction
+		]
+	}), characterLimit && /*#__PURE__*/ jsxs(Fragment, { children: [
+		/*#__PURE__*/ jsx(AriaStatus, {
+			announceOnShow: false,
+			delayMs: 500,
+			className: _VisuallyHidden_module_css_default.InternalVisuallyHidden,
+			children: counter === null || counter === void 0 ? void 0 : counter.message
+		}),
+		/*#__PURE__*/ jsxs(VisuallyHidden, {
+			id: characterCountStaticMessageId,
+			children: [
+				"You can enter up to ",
+				characterLimit,
+				" ",
+				characterLimit === 1 ? "character" : "characters"
+			]
+		}),
+		/*#__PURE__*/ jsxs(Text_default, {
+			"aria-hidden": "true",
+			id: characterCountId,
+			size: "small",
+			className: clsx(TextInput_module_css_default.CharacterCounter, isOverLimit && TextInput_module_css_default["CharacterCounter--error"]),
+			"data-component": "TextInput.CharacterCounter",
+			children: [isOverLimit && /*#__PURE__*/ jsx(AlertFillIcon, { size: 16 }), counter === null || counter === void 0 ? void 0 : counter.message]
+		})
+	] })] });
 });
-TextInput.displayName = 'TextInput';
-var TextInput$1 = Object.assign(TextInput, {
-  __SLOT__: Symbol('TextInput'),
-  Action: TextInputAction
+TextInput.displayName = "TextInput";
+var TextInput_default = Object.assign(TextInput, {
+	__SLOT__: Symbol("TextInput"),
+	Action: TextInputAction
 });
-
-export { TextInput$1 as default };
+//#endregion
+export { TextInput_default as default };

package/dist/TextInput/TextInput.module.css.js

@@ -1,5 +1,8 @@
-import './TextInput-dff8f842.css';
-
-var classes = {"CharacterCounter":"prc-TextInput-CharacterCounter-vJZBe","CharacterCounter--error":"prc-TextInput-CharacterCounter--error-HA0kN"};
-
-export { classes as default };
+import "./TextInput-dff8f842.css";
+//#region src/TextInput/TextInput.module.css.js
+var TextInput_module_css_default = {
+	"CharacterCounter": "prc-TextInput-CharacterCounter-vJZBe",
+	"CharacterCounter--error": "prc-TextInput-CharacterCounter--error-HA0kN"
+};
+//#endregion
+export { TextInput_module_css_default as default };

package/dist/TextInput/index.d.ts

@@ -1,4 +1,3 @@
-export { default } from './TextInput';
-export type { TextInputProps, TextInputNonPassthroughProps } from './TextInput';
-export type { TextInputActionProps } from '../internal/components/TextInputInnerAction';
-//# sourceMappingURL=index.d.ts.map
+import _default, { TextInputNonPassthroughProps, TextInputProps } from "./TextInput.js";
+import { TextInputActionProps } from "../internal/components/TextInputInnerAction.js";
+export { type TextInputActionProps, type TextInputProps, _default as default };