@primer/components 0.0.0-202191914226 → 0.0.0-2021919184749

package/lib/ActionList/Item.js

@@ -71,9 +71,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
-      color: (0, _constants.get)('colors.fg.muted'),
-      iconColor: (0, _constants.get)('colors.fg.muted'),
-      annotationColor: (0, _constants.get)('colors.fg.muted'),
+      color: (0, _constants.get)('colors.primer.fg.disabled'),
+      iconColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      annotationColor: (0, _constants.get)('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     };
   }

package/lib/Button/Button.js

@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
 var _default = Button;
 exports.default = _default;

package/lib/Button/ButtonTableList.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ButtonTableList = _styledComponents.default.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
 
 var _default = ButtonTableList;
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Page = _styledComponents.default.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
 
 function usePaginationPages({
   theme,

package/lib/TextInputWithTokens.d.ts

@@ -32,6 +32,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
+    /**
+     * The number of tokens to display before truncating
+     */
+    visibleTokenCount?: number | undefined;
 } & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;

package/lib/TextInputWithTokens.js

@@ -25,6 +25,8 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
+var _Text = _interopRequireDefault(require("./Text"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +35,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -53,9 +61,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -64,6 +74,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = (0, _react.useRef)(null);
   const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = (0, _react.useState)();
+  const [tokensAreTruncated, setTokensAreTruncated] = (0, _react.useState)(Boolean(visibleTokenCount));
   const {
     containerRef
   } = (0, _useFocusZone.useFocusZone)({
@@ -113,20 +124,45 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined);
+    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$current3;
+
+      if (!((_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(document.activeElement))) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
-  const handleTokenKeyUp = e => {
-    if (e.key === 'Escape') {
+  const handleTokenKeyUp = event => {
+    if (event.key === 'Escape') {
       var _ref$current;
 
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = event => {
+    onFocus && onFocus(event);
     setSelectedTokenIndex(undefined);
+    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$current4;
+
+      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement))) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
   const handleInputKeyDown = e => {
@@ -164,6 +200,17 @@ function TextInputWithTokensInnerComponent({
     }
   };
 
+  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.default.createElement(_TextInputWrapper.default, {
     block: block,
     className: className,
@@ -176,6 +223,7 @@ function TextInputWithTokensInnerComponent({
     maxWidth: maxWidthProp,
     variant: variantProp,
     ref: containerRef,
+    onClick: focusInput,
     sx: {
       alignItems: 'center',
       flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
@@ -207,12 +255,13 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
+  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
@@ -220,6 +269,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -227,7 +277,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/_TextInputWrapper.js

@@ -39,13 +39,13 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.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:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.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:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {
     return (0, _styledComponents.css)(["padding:6px 12px;"]);
   }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;

package/lib/index.d.ts

@@ -22,7 +22,6 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
 export { ActionList } from './ActionList';
-export { ActionList as ActionList2 } from './ActionList2';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

package/lib/index.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "ActionList", {
     return _ActionList.ActionList;
   }
 });
-Object.defineProperty(exports, "ActionList2", {
-  enumerable: true,
-  get: function () {
-    return _ActionList2.ActionList;
-  }
-});
 Object.defineProperty(exports, "ActionMenu", {
   enumerable: true,
   get: function () {
@@ -542,8 +536,6 @@ var _ConfirmationDialog = require("./Dialog/ConfirmationDialog");
 
 var _ActionList = require("./ActionList");
 
-var _ActionList2 = require("./ActionList2");
-
 var _ActionMenu = require("./ActionMenu");
 
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));

package/lib-esm/ActionList/Item.js

@@ -48,9 +48,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
-      color: get('colors.fg.muted'),
-      iconColor: get('colors.fg.muted'),
-      annotationColor: get('colors.fg.muted'),
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     };
   }

package/lib-esm/Button/Button.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
 export default Button;

package/lib-esm/Button/ButtonTableList.js

@@ -4,5 +4,5 @@ import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
 export default ButtonTableList;

package/lib-esm/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
 
 function usePaginationPages({
   theme,

package/lib-esm/TextInputWithTokens.d.ts

@@ -32,6 +32,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
+    /**
+     * The number of tokens to display before truncating
+     */
+    visibleTokenCount?: number | undefined;
 } & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;

package/lib-esm/TextInputWithTokens.js

@@ -9,9 +9,16 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box';
+import Text from './Text'; // 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
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -31,9 +38,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -42,6 +51,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = useRef(null);
   const combinedInputRef = useCombinedRefs(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   const {
     containerRef
   } = useFocusZone({
@@ -91,20 +101,45 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined);
+    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$current3;
+
+      if (!((_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(document.activeElement))) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
-  const handleTokenKeyUp = e => {
-    if (e.key === 'Escape') {
+  const handleTokenKeyUp = event => {
+    if (event.key === 'Escape') {
       var _ref$current;
 
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = event => {
+    onFocus && onFocus(event);
     setSelectedTokenIndex(undefined);
+    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$current4;
+
+      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement))) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
   const handleInputKeyDown = e => {
@@ -142,6 +177,17 @@ function TextInputWithTokensInnerComponent({
     }
   };
 
+  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,
@@ -154,6 +200,7 @@ function TextInputWithTokensInnerComponent({
     maxWidth: maxWidthProp,
     variant: variantProp,
     ref: containerRef,
+    onClick: focusInput,
     sx: {
       alignItems: 'center',
       flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
@@ -185,12 +232,13 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
+  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/React.createElement(TokenComponent, _extends({
@@ -198,6 +246,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -205,7 +254,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/React.createElement(Text, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/_TextInputWrapper.js

@@ -21,11 +21,11 @@ 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:", ";", " .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:", ";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 => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {
     return css(["padding:6px 12px;"]);
   }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
 export default TextInputWrapper;

package/lib-esm/index.d.ts

@@ -22,7 +22,6 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
 export { ActionList } from './ActionList';
-export { ActionList as ActionList2 } from './ActionList2';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

package/lib-esm/index.js

@@ -18,7 +18,6 @@ export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
 export { ActionList } from './ActionList';
-export { ActionList as ActionList2 } from './ActionList2';
 export { ActionMenu } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';
 export { default as Avatar } from './Avatar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202191914226",
+  "version": "0.0.0-2021919184749",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/lib/ActionList2/Description.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare type DescriptionProps = {
-    variant?: 'inline' | 'block';
-};
-export declare const Description: React.FC<DescriptionProps>;

package/lib/ActionList2/Description.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Description = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Truncate = _interopRequireDefault(require("../Truncate"));
-
-var _Item = require("./Item");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Description = ({
-  variant = 'inline',
-  ...props
-}) => {
-  const styles = {
-    color: 'fg.muted',
-    fontSize: 0,
-    lineHeight: '16px',
-    flexGrow: 1,
-    flexBasis: 0,
-    minWidth: 0,
-    marginLeft: variant === 'block' ? 0 : 2
-  };
-  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
-    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
-  }, variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: "span",
-    sx: styles
-  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
-    sx: styles,
-    title: props.children,
-    inline: true,
-    maxWidth: "100%"
-  }, props.children));
-};
-
-exports.Description = Description;
-Description.displayName = "Description";

package/lib/ActionList2/Divider.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export declare function Divider(): JSX.Element;
-export declare namespace Divider {
-    var renderItem: typeof Divider;
-}

package/lib/ActionList2/Divider.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Divider = Divider;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _constants = require("../constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-function Divider() {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: "hr",
-    sx: {
-      border: 'none',
-      // override browser styles
-      height: 1,
-      backgroundColor: 'border.muted',
-      marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
-      marginBottom: 2
-    },
-    "data-component": "ActionList.Divider"
-  });
-}
-
-Divider.displayName = "Divider";
-
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;