@primer/components 0.0.0-2021927202224 → 0.0.0-2021927203020

package/lib-esm/TextInputWithTokens.js

@@ -9,17 +9,9 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box';
-import Text from './Text';
-import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const overflowCountFontSizeMap = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  extralarge: 2
-}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -39,11 +31,9 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
-    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -52,7 +42,6 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = useRef(null);
   const combinedInputRef = useCombinedRefs(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
-  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   const {
     containerRef
   } = useFocusZone({
@@ -87,25 +76,14 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
-
-    setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3;
-
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
-      // `nextFocusableElement` is the div that wraps the input
+    onTokenRemove(tokenId);
 
-      const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => isFocusable(el));
+    if (selectedTokenIndex) {
+      var _containerRef$current2;
 
-      if (firstFocusable) {
-        firstFocusable.focus();
-      } else {
-        var _ref$current;
-
-        // if there are no tokens left, focus the input
-        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-      }
-    }, 0);
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
+      nextElementToFocus.focus();
+    }
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -113,55 +91,30 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus between tokens,
-    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current4;
-
-      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
+    setSelectedTokenIndex(undefined);
   };
 
-  const handleTokenKeyUp = event => {
-    if (event.key === 'Escape') {
-      var _ref$current2;
+  const handleTokenKeyUp = e => {
+    if (e.key === 'Escape') {
+      var _ref$current;
 
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = event => {
-    onFocus && onFocus(event);
+  const handleInputFocus = e => {
+    onFocus && onFocus(e);
     setSelectedTokenIndex(undefined);
-    visibleTokenCount && setTokensAreTruncated(false);
-  };
-
-  const handleInputBlur = event => {
-    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
-    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current5;
-
-      if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current3;
+    var _ref$current2;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
+    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
       return;
     }
 
@@ -182,24 +135,13 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current4;
+        var _ref$current3;
 
-        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
+        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
       }, 0);
     }
   };
 
-  const focusInput = () => {
-    var _combinedInputRef$cur;
-
-    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
-  };
-
-  const preventTokenClickPropagation = event => {
-    event.stopPropagation();
-  };
-
-  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: className,
@@ -211,8 +153,15 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    onClick: focusInput,
-    sx: { ...(block ? {
+    ref: containerRef,
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      gap: '0.25rem',
+      '> *': {
+        flexShrink: 0
+      },
+      ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -225,21 +174,6 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
-  }, /*#__PURE__*/React.createElement(Box, {
-    ref: containerRef,
-    display: "flex",
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      marginLeft: '-0.25rem',
-      marginBottom: '-0.25rem',
-      flexGrow: 1,
-      '> *': {
-        flexShrink: 0,
-        marginLeft: '0.25rem',
-        marginBottom: '0.25rem'
-      }
-    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       order: 1,
@@ -251,13 +185,12 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
+  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/React.createElement(TokenComponent, _extends({
@@ -265,7 +198,6 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
-    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -273,10 +205,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/React.createElement(Text, {
-    color: "fg.muted",
-    fontSize: size && overflowCountFontSizeMap[size]
-  }, "+", tokens.length - visibleTokens.length) : null));
+  }, tokenRest))) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/Token/Token.js

@@ -19,16 +19,7 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
 const LeadingVisualContainer = styled('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;", ""], props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return css(["margin-right:", ";"], get('space.2'));
-
-    default:
-      return css(["margin-right:", ";"], get('space.1'));
-  }
-});
+})(["flex-shrink:0;line-height:0;"]);
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -63,9 +54,7 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTokenInteractive: isTokenInteractive(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
-    size: size
-  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib-esm/Token/TokenBase.js

@@ -20,6 +20,7 @@ const variants = variant({
   variants: {
     small: {
       fontSize: 0,
+      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -32,6 +33,7 @@ const variants = variant({
     },
     medium: {
       fontSize: 0,
+      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -41,6 +43,7 @@ const variants = variant({
     },
     large: {
       fontSize: 0,
+      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -50,6 +53,7 @@ const variants = variant({
     },
     extralarge: {
       fontSize: 1,
+      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { XIcon } from '@primer/octicons-react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { variant } from 'styled-system';
 import { get } from '../constants';
 import sx from '../sx';
@@ -34,16 +34,7 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return css(["margin-left:", ";"], get('space.2'));
-
-    default:
-      return css(["margin-left:", ";"], get('space.1'));
-  }
-}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

package/lib-esm/hooks/useDebounce.d.ts

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

package/lib-esm/hooks/useDebounce.js

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

package/lib-esm/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

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

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021927202224",
+  "version": "0.0.0-2021927203020",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,20 +43,16 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/octicons-react": "^16.1.0",
+    "@primer/primitives": "6.0.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
-    "@types/history": "4.7.8",
-    "@types/styled-components": "5.1.11",
-    "@types/styled-system": "5.1.12",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
+    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -76,15 +72,20 @@
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@size-limit/preset-big-lib": "5.0.2",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-a11y": "6.3.4",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "6.3.8",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
+    "@types/history": "4.7.9",
+    "@types/styled-components": "5.1.15",
+    "@types/styled-system": "5.1.13",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",