@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.4

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -0,0 +1,639 @@
+import { c } from 'react-compiler-runtime';
+import { FocusKeys } from '@primer/behaviors';
+import { isFocusable } from '@primer/behaviors/utils';
+import { omit } from '@styled-system/props';
+import React, { useRef, useState } from 'react';
+import { isValidElementType } from 'react-is';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useFocusZone } from '../hooks/useFocusZone.js';
+import Token from '../Token/Token.js';
+import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
+import UnstyledTextInput from '../internal/components/UnstyledTextInput.js';
+import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot.js';
+import styles from './TextInputWithTokens.module.css.js';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Text from '../Text/Text.js';
+
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  xlarge: 2
+};
+
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+function TextInputWithTokensInnerComponent(t0, forwardedRef) {
+  const $ = c(137);
+  let IconComponent;
+  let LeadingVisual;
+  let TokenComponent;
+  let TrailingVisual;
+  let block;
+  let className;
+  let contrast;
+  let disabled;
+  let hideTokenRemoveButtons;
+  let loaderPosition;
+  let loading;
+  let maxHeight;
+  let maxWidthProp;
+  let minWidthProp;
+  let onTokenRemove;
+  let preventTokenWrapping;
+  let size;
+  let style;
+  let sxProp;
+  let t1;
+  let tokens;
+  let validationStatus;
+  let variantProp;
+  let visibleTokenCount;
+  let widthProp;
+  if ($[0] !== t0) {
+    const {
+      icon: t2,
+      leadingVisual: t3,
+      trailingVisual: t4,
+      loading: t5,
+      loaderPosition: t6,
+      contrast: t7,
+      className: t8,
+      block: t9,
+      disabled: t10,
+      sx: t11,
+      tokens: t12,
+      onTokenRemove: t13,
+      tokenComponent: t14,
+      preventTokenWrapping: t15,
+      size: t16,
+      hideTokenRemoveButtons: t17,
+      maxHeight: t18,
+      width: t19,
+      minWidth: t20,
+      maxWidth: t21,
+      validationStatus: t22,
+      variant: t23,
+      visibleTokenCount: t24,
+      style: t25,
+      ...rest
+    } = t0;
+    IconComponent = t2;
+    LeadingVisual = t3;
+    TrailingVisual = t4;
+    loading = t5;
+    contrast = t7;
+    className = t8;
+    block = t9;
+    disabled = t10;
+    sxProp = t11;
+    tokens = t12;
+    onTokenRemove = t13;
+    maxHeight = t18;
+    widthProp = t19;
+    minWidthProp = t20;
+    maxWidthProp = t21;
+    validationStatus = t22;
+    variantProp = t23;
+    visibleTokenCount = t24;
+    style = t25;
+    loaderPosition = t6 === undefined ? "auto" : t6;
+    TokenComponent = t14 === undefined ? Token : t14;
+    preventTokenWrapping = t15 === undefined ? false : t15;
+    size = t16 === undefined ? "xlarge" : t16;
+    hideTokenRemoveButtons = t17 === undefined ? false : t17;
+    t1 = omit(rest);
+    $[0] = t0;
+    $[1] = IconComponent;
+    $[2] = LeadingVisual;
+    $[3] = TokenComponent;
+    $[4] = TrailingVisual;
+    $[5] = block;
+    $[6] = className;
+    $[7] = contrast;
+    $[8] = disabled;
+    $[9] = hideTokenRemoveButtons;
+    $[10] = loaderPosition;
+    $[11] = loading;
+    $[12] = maxHeight;
+    $[13] = maxWidthProp;
+    $[14] = minWidthProp;
+    $[15] = onTokenRemove;
+    $[16] = preventTokenWrapping;
+    $[17] = size;
+    $[18] = style;
+    $[19] = sxProp;
+    $[20] = t1;
+    $[21] = tokens;
+    $[22] = validationStatus;
+    $[23] = variantProp;
+    $[24] = visibleTokenCount;
+    $[25] = widthProp;
+  } else {
+    IconComponent = $[1];
+    LeadingVisual = $[2];
+    TokenComponent = $[3];
+    TrailingVisual = $[4];
+    block = $[5];
+    className = $[6];
+    contrast = $[7];
+    disabled = $[8];
+    hideTokenRemoveButtons = $[9];
+    loaderPosition = $[10];
+    loading = $[11];
+    maxHeight = $[12];
+    maxWidthProp = $[13];
+    minWidthProp = $[14];
+    onTokenRemove = $[15];
+    preventTokenWrapping = $[16];
+    size = $[17];
+    style = $[18];
+    sxProp = $[19];
+    t1 = $[20];
+    tokens = $[21];
+    validationStatus = $[22];
+    variantProp = $[23];
+    visibleTokenCount = $[24];
+    widthProp = $[25];
+  }
+  let inputPropsRest;
+  let onBlur;
+  let onFocus;
+  let onKeyDown;
+  if ($[26] !== t1) {
+    ({
+      onBlur,
+      onFocus,
+      onKeyDown,
+      ...inputPropsRest
+    } = t1);
+    $[26] = t1;
+    $[27] = inputPropsRest;
+    $[28] = onBlur;
+    $[29] = onFocus;
+    $[30] = onKeyDown;
+  } else {
+    inputPropsRest = $[27];
+    onBlur = $[28];
+    onFocus = $[29];
+    onKeyDown = $[30];
+  }
+  const ref = useRef(null);
+  useRefObjectAsForwardedRef(forwardedRef, ref);
+  const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
+  let t2;
+  if ($[31] !== selectedTokenIndex) {
+    t2 = [selectedTokenIndex];
+    $[31] = selectedTokenIndex;
+    $[32] = t2;
+  } else {
+    t2 = $[32];
+  }
+  const {
+    containerRef: t3
+  } = useFocusZone({
+    focusOutBehavior: "wrap",
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusableElementFilter: _temp,
+    getNextFocusable: direction => {
+      var _containerRef$current;
+      if (!selectedTokenIndex && selectedTokenIndex !== 0) {
+        return;
+      }
+      let nextIndex = selectedTokenIndex + 1;
+      if (direction === "next") {
+        nextIndex = nextIndex + 1;
+      }
+      if (direction === "previous") {
+        nextIndex = nextIndex - 1;
+      }
+      if (nextIndex > tokens.length || nextIndex < 1) {
+        return ref.current || undefined;
+      }
+      return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
+    }
+  }, t2);
+  const containerRef = t3;
+  let t4;
+  if ($[33] !== containerRef || $[34] !== onTokenRemove || $[35] !== selectedTokenIndex) {
+    t4 = tokenId => {
+      onTokenRemove(tokenId);
+      setTimeout(() => {
+        var _containerRef$current2, _containerRef$current3;
+        const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0];
+        const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(_temp2);
+        if (firstFocusable) {
+          firstFocusable.focus();
+        } else {
+          var _ref$current;
+          (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+        }
+      }, 0);
+    };
+    $[33] = containerRef;
+    $[34] = onTokenRemove;
+    $[35] = selectedTokenIndex;
+    $[36] = t4;
+  } else {
+    t4 = $[36];
+  }
+  const handleTokenRemove = t4;
+  let t5;
+  if ($[37] !== disabled) {
+    t5 = tokenIndex => () => {
+      if (!disabled) {
+        setSelectedTokenIndex(tokenIndex);
+      }
+    };
+    $[37] = disabled;
+    $[38] = t5;
+  } else {
+    t5 = $[38];
+  }
+  const handleTokenFocus = t5;
+  let t6;
+  if ($[39] !== containerRef || $[40] !== visibleTokenCount) {
+    t6 = () => {
+      setSelectedTokenIndex(undefined);
+      setTimeout(() => {
+        var _containerRef$current4;
+        if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
+          setTokensAreTruncated(true);
+        }
+      }, 0);
+    };
+    $[39] = containerRef;
+    $[40] = visibleTokenCount;
+    $[41] = t6;
+  } else {
+    t6 = $[41];
+  }
+  const handleTokenBlur = t6;
+  let t7;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event => {
+      if (event.key === "Escape") {
+        var _ref$current2;
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      }
+    };
+    $[42] = t7;
+  } else {
+    t7 = $[42];
+  }
+  const handleTokenKeyUp = t7;
+  let t8;
+  if ($[43] !== onFocus || $[44] !== visibleTokenCount) {
+    t8 = event_0 => {
+      onFocus && onFocus(event_0);
+      setSelectedTokenIndex(undefined);
+      visibleTokenCount && setTokensAreTruncated(false);
+    };
+    $[43] = onFocus;
+    $[44] = visibleTokenCount;
+    $[45] = t8;
+  } else {
+    t8 = $[45];
+  }
+  const handleInputFocus = t8;
+  let t9;
+  if ($[46] !== containerRef || $[47] !== onBlur || $[48] !== visibleTokenCount) {
+    t9 = event_1 => {
+      onBlur && onBlur(event_1);
+      setTimeout(() => {
+        var _containerRef$current5;
+        if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
+          setTokensAreTruncated(true);
+        }
+      }, 0);
+    };
+    $[46] = containerRef;
+    $[47] = onBlur;
+    $[48] = visibleTokenCount;
+    $[49] = t9;
+  } else {
+    t9 = $[49];
+  }
+  const handleInputBlur = t9;
+  let t10;
+  if ($[50] !== handleTokenRemove || $[51] !== onKeyDown || $[52] !== tokens) {
+    t10 = e => {
+      var _ref$current3;
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+      if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
+        return;
+      }
+      const lastToken = tokens[tokens.length - 1];
+      if (e.key === "Backspace" && lastToken) {
+        handleTokenRemove(lastToken.id);
+        if (ref.current) {
+          ref.current.value = `${lastToken.text} `;
+        }
+        setTimeout(() => {
+          var _ref$current4;
+          (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
+        }, 0);
+      }
+    };
+    $[50] = handleTokenRemove;
+    $[51] = onKeyDown;
+    $[52] = tokens;
+    $[53] = t10;
+  } else {
+    t10 = $[53];
+  }
+  const handleInputKeyDown = t10;
+  let t11;
+  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = () => {
+      var _ref$current5;
+      (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.focus();
+    };
+    $[54] = t11;
+  } else {
+    t11 = $[54];
+  }
+  const focusInput = t11;
+  const preventTokenClickPropagation = _temp3;
+  let t12;
+  if ($[55] !== tokens || $[56] !== tokensAreTruncated || $[57] !== visibleTokenCount) {
+    t12 = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
+    $[55] = tokens;
+    $[56] = tokensAreTruncated;
+    $[57] = visibleTokenCount;
+    $[58] = t12;
+  } else {
+    t12 = $[58];
+  }
+  const visibleTokens = t12;
+  let t13;
+  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      small: "small",
+      medium: "small",
+      large: "medium",
+      xlarge: "medium"
+    };
+    $[59] = t13;
+  } else {
+    t13 = $[59];
+  }
+  const inputSizeMap = t13;
+  const showLeadingLoadingIndicator = loading && (loaderPosition === "leading" || Boolean(LeadingVisual && loaderPosition !== "trailing"));
+  const showTrailingLoadingIndicator = loading && (loaderPosition === "trailing" || loaderPosition === "auto" && !LeadingVisual);
+  const t14 = Boolean(LeadingVisual || showLeadingLoadingIndicator);
+  const t15 = Boolean(TrailingVisual || showTrailingLoadingIndicator);
+  const t16 = inputSizeMap[size];
+  const t17 = Boolean(preventTokenWrapping || maxHeight) || undefined;
+  let t18;
+  if ($[60] !== className) {
+    t18 = clsx(className, styles.TextInputWrapper);
+    $[60] = className;
+    $[61] = t18;
+  } else {
+    t18 = $[61];
+  }
+  let t19;
+  if ($[62] !== maxHeight || $[63] !== style) {
+    t19 = maxHeight ? {
+      maxHeight,
+      ...style
+    } : style;
+    $[62] = maxHeight;
+    $[63] = style;
+    $[64] = t19;
+  } else {
+    t19 = $[64];
+  }
+  let t20;
+  if ($[65] !== IconComponent || $[66] !== LeadingVisual) {
+    t20 = IconComponent && !LeadingVisual && /*#__PURE__*/jsx(IconComponent, {
+      className: "TextInput-icon"
+    });
+    $[65] = IconComponent;
+    $[66] = LeadingVisual;
+    $[67] = t20;
+  } else {
+    t20 = $[67];
+  }
+  const t21 = typeof loading === "boolean";
+  let t22;
+  if ($[68] !== LeadingVisual) {
+    t22 = typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual) ? /*#__PURE__*/jsx(LeadingVisual, {}) : LeadingVisual;
+    $[68] = LeadingVisual;
+    $[69] = t22;
+  } else {
+    t22 = $[69];
+  }
+  let t23;
+  if ($[70] !== showLeadingLoadingIndicator || $[71] !== t21 || $[72] !== t22) {
+    t23 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
+      hasLoadingIndicator: t21,
+      visualPosition: "leading",
+      showLoadingIndicator: showLeadingLoadingIndicator,
+      children: t22
+    });
+    $[70] = showLeadingLoadingIndicator;
+    $[71] = t21;
+    $[72] = t22;
+    $[73] = t23;
+  } else {
+    t23 = $[73];
+  }
+  const t24 = containerRef;
+  const t25 = validationStatus === "error" ? "true" : "false";
+  let t26;
+  if ($[74] !== disabled || $[75] !== handleInputBlur || $[76] !== handleInputFocus || $[77] !== handleInputKeyDown || $[78] !== inputPropsRest || $[79] !== t25) {
+    t26 = /*#__PURE__*/jsx("div", {
+      className: styles.InputWrapper,
+      children: /*#__PURE__*/jsx(UnstyledTextInput, {
+        ref: ref,
+        disabled: disabled,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onKeyDown: handleInputKeyDown,
+        type: "text",
+        className: styles.UnstyledTextInput,
+        "aria-invalid": t25,
+        ...inputPropsRest
+      })
+    });
+    $[74] = disabled;
+    $[75] = handleInputBlur;
+    $[76] = handleInputFocus;
+    $[77] = handleInputKeyDown;
+    $[78] = inputPropsRest;
+    $[79] = t25;
+    $[80] = t26;
+  } else {
+    t26 = $[80];
+  }
+  let t27;
+  if ($[81] !== TokenComponent || $[82] !== disabled || $[83] !== handleTokenBlur || $[84] !== handleTokenFocus || $[85] !== handleTokenRemove || $[86] !== hideTokenRemoveButtons || $[87] !== selectedTokenIndex || $[88] !== size || $[89] !== visibleTokens) {
+    let t28;
+    if ($[91] !== TokenComponent || $[92] !== disabled || $[93] !== handleTokenBlur || $[94] !== handleTokenFocus || $[95] !== handleTokenRemove || $[96] !== hideTokenRemoveButtons || $[97] !== selectedTokenIndex || $[98] !== size) {
+      t28 = (t29, i) => {
+        const {
+          id,
+          ...tokenRest
+        } = t29;
+        return /*#__PURE__*/jsx(TokenComponent, {
+          disabled: disabled,
+          onFocus: handleTokenFocus(i),
+          onBlur: handleTokenBlur,
+          onKeyUp: handleTokenKeyUp,
+          onClick: preventTokenClickPropagation,
+          isSelected: selectedTokenIndex === i,
+          onRemove: () => {
+            handleTokenRemove(id);
+          },
+          hideRemoveButton: disabled || hideTokenRemoveButtons,
+          size: size,
+          tabIndex: 0,
+          ...tokenRest
+        }, id);
+      };
+      $[91] = TokenComponent;
+      $[92] = disabled;
+      $[93] = handleTokenBlur;
+      $[94] = handleTokenFocus;
+      $[95] = handleTokenRemove;
+      $[96] = hideTokenRemoveButtons;
+      $[97] = selectedTokenIndex;
+      $[98] = size;
+      $[99] = t28;
+    } else {
+      t28 = $[99];
+    }
+    t27 = visibleTokens.map(t28);
+    $[81] = TokenComponent;
+    $[82] = disabled;
+    $[83] = handleTokenBlur;
+    $[84] = handleTokenFocus;
+    $[85] = handleTokenRemove;
+    $[86] = hideTokenRemoveButtons;
+    $[87] = selectedTokenIndex;
+    $[88] = size;
+    $[89] = visibleTokens;
+    $[90] = t27;
+  } else {
+    t27 = $[90];
+  }
+  let t28;
+  if ($[100] !== size || $[101] !== tokens || $[102] !== tokensAreTruncated || $[103] !== visibleTokens.length) {
+    t28 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxs(Text, {
+      color: "fg.muted",
+      fontSize: overflowCountFontSizeMap[size],
+      children: ["+", tokens.length - visibleTokens.length]
+    }) : null;
+    $[100] = size;
+    $[101] = tokens;
+    $[102] = tokensAreTruncated;
+    $[103] = visibleTokens.length;
+    $[104] = t28;
+  } else {
+    t28 = $[104];
+  }
+  let t29;
+  if ($[105] !== preventTokenWrapping || $[106] !== t24 || $[107] !== t26 || $[108] !== t27 || $[109] !== t28) {
+    t29 = /*#__PURE__*/jsxs("div", {
+      ref: t24,
+      className: styles.Container,
+      "data-prevent-token-wrapping": preventTokenWrapping,
+      children: [t26, t27, t28]
+    });
+    $[105] = preventTokenWrapping;
+    $[106] = t24;
+    $[107] = t26;
+    $[108] = t27;
+    $[109] = t28;
+    $[110] = t29;
+  } else {
+    t29 = $[110];
+  }
+  const t30 = typeof loading === "boolean";
+  let t31;
+  if ($[111] !== TrailingVisual) {
+    t31 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
+    $[111] = TrailingVisual;
+    $[112] = t31;
+  } else {
+    t31 = $[112];
+  }
+  let t32;
+  if ($[113] !== showTrailingLoadingIndicator || $[114] !== t30 || $[115] !== t31) {
+    t32 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
+      hasLoadingIndicator: t30,
+      visualPosition: "trailing",
+      showLoadingIndicator: showTrailingLoadingIndicator,
+      children: t31
+    });
+    $[113] = showTrailingLoadingIndicator;
+    $[114] = t30;
+    $[115] = t31;
+    $[116] = t32;
+  } else {
+    t32 = $[116];
+  }
+  let t33;
+  if ($[117] !== block || $[118] !== contrast || $[119] !== disabled || $[120] !== maxWidthProp || $[121] !== minWidthProp || $[122] !== sxProp || $[123] !== t14 || $[124] !== t15 || $[125] !== t16 || $[126] !== t17 || $[127] !== t18 || $[128] !== t19 || $[129] !== t20 || $[130] !== t23 || $[131] !== t29 || $[132] !== t32 || $[133] !== validationStatus || $[134] !== variantProp || $[135] !== widthProp) {
+    t33 = /*#__PURE__*/jsxs(TextInputWrapper, {
+      block: block,
+      contrast: contrast,
+      disabled: disabled,
+      hasLeadingVisual: t14,
+      hasTrailingVisual: t15,
+      width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
+      size: t16,
+      validationStatus: validationStatus,
+      variant: variantProp,
+      onClick: focusInput,
+      "data-token-wrapping": t17,
+      className: t18,
+      style: t19,
+      sx: sxProp,
+      children: [t20, t23, t29, t32]
+    });
+    $[117] = block;
+    $[118] = contrast;
+    $[119] = disabled;
+    $[120] = maxWidthProp;
+    $[121] = minWidthProp;
+    $[122] = sxProp;
+    $[123] = t14;
+    $[124] = t15;
+    $[125] = t16;
+    $[126] = t17;
+    $[127] = t18;
+    $[128] = t19;
+    $[129] = t20;
+    $[130] = t23;
+    $[131] = t29;
+    $[132] = t32;
+    $[133] = validationStatus;
+    $[134] = variantProp;
+    $[135] = widthProp;
+    $[136] = t33;
+  } else {
+    t33 = $[136];
+  }
+  return t33;
+}
+function _temp3(event_2) {
+  event_2.stopPropagation();
+}
+function _temp2(el) {
+  return isFocusable(el);
+}
+function _temp(element) {
+  return !element.getAttributeNames().includes("aria-hidden");
+}
+const TextInputWithTokens = /*#__PURE__*/React.forwardRef(TextInputWithTokensInnerComponent);
+TextInputWithTokens.displayName = 'TextInputWithTokens';
+
+export { TextInputWithTokens as default };