@primer/components 0.0.0-202195193757 → 0.0.0-202195195659

package/lib/Token/_RemoveTokenButton.js

@@ -9,36 +9,67 @@ var _octiconsReact = require("@primer/octicons-react");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _TokenBase = require("./TokenBase");
+var _styledSystem = require("styled-system");
+
+var _constants = require("../constants");
+
+var _sx = _interopRequireDefault(require("../sx"));
 
-var _tokenButtonUtils = require("./_tokenButtonUtils");
+var _TokenBase = require("./TokenBase");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const RemoveTokenButton = _styledComponents.default.span.attrs(({
-  borderOffset,
-  parentTokenTag,
-  variant,
-  parentTokenIsInteractive,
+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); }
+
+const variants = (0, _styledSystem.variant)({
+  prop: 'size',
+  variants: {
+    small: {
+      height: _TokenBase.tokenSizes.small,
+      width: _TokenBase.tokenSizes.small
+    },
+    medium: {
+      height: _TokenBase.tokenSizes.medium,
+      width: _TokenBase.tokenSizes.medium
+    },
+    large: {
+      height: _TokenBase.tokenSizes.large,
+      width: _TokenBase.tokenSizes.large
+    },
+    xlarge: {
+      height: _TokenBase.tokenSizes.xlarge,
+      width: _TokenBase.tokenSizes.xlarge
+    }
+  }
+});
+
+const getTokenButtonIconSize = variant => parseInt(_TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize], 10) * 0.75;
+
+const StyledTokenButton = _styledComponents.default.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)`, (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'), variants, _sx.default);
+
+const RemoveTokenButton = ({
+  'aria-label': ariaLabel,
+  isParentInteractive,
+  size,
+  children,
   ...rest
 }) => {
-  delete rest.children;
-  return {
-    borderOffset,
-    as: parentTokenIsInteractive ? 'span' : 'button',
-    tabIndex: parentTokenIsInteractive ? -1 : undefined,
-    'aria-label': !parentTokenIsInteractive ? 'Remove token' : undefined,
-    children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
-      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
-    })
-  };
-}).withConfig({
-  displayName: "_RemoveTokenButton__RemoveTokenButton",
-  componentId: "sc-14lvcw1-0"
-})(["", " ", " transform:", ";"], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
+  return /*#__PURE__*/React.createElement(StyledTokenButton, _extends({
+    as: isParentInteractive ? 'span' : 'button',
+    tabIndex: isParentInteractive ? -1 : undefined,
+    "aria-label": !isParentInteractive ? 'Remove token' : undefined,
+    size: size
+  }, rest), /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
+    size: getTokenButtonIconSize(size)
+  }));
+};
 
+RemoveTokenButton.displayName = "RemoveTokenButton";
 RemoveTokenButton.defaultProps = {
-  variant: _TokenBase.defaultTokenSize
+  size: _TokenBase.defaultTokenSize
 };
 var _default = RemoveTokenButton;
 exports.default = _default;

package/lib/Token/_TokenTextContainer.d.ts

@@ -0,0 +1,3 @@
+import { TokenBaseProps } from './TokenBase';
+declare const TokenTextContainer: import("styled-components").StyledComponent<"span", any, Partial<TokenBaseProps>, never>;
+export default TokenTextContainer;

package/lib/Token/_TokenTextContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
+  displayName: "_TokenTextContainer__TokenTextContainer",
+  componentId: "sc-4t2bev-0"
+})(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;", ""], props => {
+  if (props.as === 'a') {
+    return (0, _styledComponents.css)(["color:currentColor;text-decoration:none;"]);
+  }
+
+  if (props.as === 'button') {
+    // reset button styles, make the cursor a pointer, and add line-height
+    return (0, _styledComponents.css)(["background:transparent;border:none;color:inherit;font:inherit;margin:0;overflow:visible;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;line-height:1;"]);
+  } // position psuedo-element above text content
+  // so it gets the click
+
+
+  if (props.as !== 'span') {
+    return (0, _styledComponents.css)(["&:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}"]);
+  }
+});
+var _default = TokenTextContainer;
+exports.default = _default;

package/lib/Token/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Token';
-export { default as TokenLabel } from './TokenLabel';
-export { default as TokenProfile } from './TokenProfile';
+export { default as IssueLabelToken } from './IssueLabelToken';
+export { default as ProfileToken } from './ProfileToken';

package/lib/Token/index.js

@@ -9,23 +9,23 @@ Object.defineProperty(exports, "default", {
     return _Token.default;
   }
 });
-Object.defineProperty(exports, "TokenLabel", {
+Object.defineProperty(exports, "IssueLabelToken", {
   enumerable: true,
   get: function () {
-    return _TokenLabel.default;
+    return _IssueLabelToken.default;
   }
 });
-Object.defineProperty(exports, "TokenProfile", {
+Object.defineProperty(exports, "ProfileToken", {
   enumerable: true,
   get: function () {
-    return _TokenProfile.default;
+    return _ProfileToken.default;
   }
 });
 
 var _Token = _interopRequireDefault(require("./Token"));
 
-var _TokenLabel = _interopRequireDefault(require("./TokenLabel"));
+var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
 
-var _TokenProfile = _interopRequireDefault(require("./TokenProfile"));
+var _ProfileToken = _interopRequireDefault(require("./ProfileToken"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.d.ts

@@ -104,7 +104,7 @@ export { default as Text } from './Text';
 export type { TextProps } from './Text';
 export { default as Timeline } from './Timeline';
 export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
-export { default as Token, TokenLabel, TokenProfile } from './Token';
+export { default as Token, IssueLabelToken, ProfileToken } from './Token';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Truncate } from './Truncate';

package/lib/index.js

@@ -459,16 +459,16 @@ Object.defineProperty(exports, "Token", {
     return _Token.default;
   }
 });
-Object.defineProperty(exports, "TokenLabel", {
+Object.defineProperty(exports, "IssueLabelToken", {
   enumerable: true,
   get: function () {
-    return _Token.TokenLabel;
+    return _Token.IssueLabelToken;
   }
 });
-Object.defineProperty(exports, "TokenProfile", {
+Object.defineProperty(exports, "ProfileToken", {
   enumerable: true,
   get: function () {
-    return _Token.TokenProfile;
+    return _Token.ProfileToken;
   }
 });
 Object.defineProperty(exports, "Tooltip", {

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type * as Polymorphic from "@radix-ui/react-polymorphic";
+import type * as Polymorphic from '@radix-ui/react-polymorphic';
 import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;

package/lib-esm/Autocomplete/AutocompleteInput.js

@@ -27,12 +27,12 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
   } = useContext(AutocompleteContext);
   const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
   const [highlightRemainingText, setHighlightRemainingText] = useState(true);
-  const handleInputFocus = useCallback(e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = useCallback(event => {
+    onFocus && onFocus(event);
     setShowMenu && setShowMenu(true);
   }, [onFocus, setShowMenu]);
-  const handleInputBlur = useCallback(e => {
-    onBlur && onBlur(e); // HACK: wait a tick and check the focused element before hiding the autocomplete menu
+  const handleInputBlur = useCallback(event => {
+    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding the autocomplete menu
     // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
     // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
 
@@ -42,28 +42,28 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
       }
     }, 0);
   }, [onBlur, setShowMenu]);
-  const handleInputChange = useCallback(e => {
-    onChange && onChange(e);
-    setInputValue && setInputValue(e.currentTarget.value);
+  const handleInputChange = useCallback(event => {
+    onChange && onChange(event);
+    setInputValue && setInputValue(event.currentTarget.value);
 
     if (!showMenu) {
       setShowMenu && setShowMenu(true);
     }
   }, [onChange, setInputValue, setShowMenu, showMenu]);
-  const handleInputKeyDown = useCallback(e => {
+  const handleInputKeyDown = useCallback(event => {
     var _inputRef$current;
 
-    if (e.key === 'Backspace') {
+    if (event.key === 'Backspace') {
       setHighlightRemainingText(false);
     }
 
-    if (e.key === 'Escape' && inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
+    if (event.key === 'Escape' && inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
       setInputValue && setInputValue('');
       inputRef.current.value = '';
     }
   }, [inputRef, setInputValue, setHighlightRemainingText]);
-  const handleInputKeyUp = useCallback(e => {
-    if (e.key === 'Backspace') {
+  const handleInputKeyUp = useCallback(event => {
+    if (event.key === 'Backspace') {
       setHighlightRemainingText(true);
     }
   }, [setHighlightRemainingText]);

package/lib-esm/Autocomplete/AutocompleteMenu.js

@@ -32,8 +32,6 @@ function getItemById(itemId, items) {
   return items.find(item => item.id === itemId);
 }
 
-;
-
 // TODO: consider making 'aria-labelledby' required
 function AutocompleteMenu(props) {
   const {
@@ -58,7 +56,7 @@ function AutocompleteMenu(props) {
     loading,
     selectionVariant,
     filterFn = getDefaultItemFilter(inputValue),
-    "aria-labelledby": ariaLabelledBy,
+    'aria-labelledby': ariaLabelledBy,
     onOpenChange,
     onSelectedChange = getDefaultOnSelectionChange(setInputValue),
     customScrollContainerRef
@@ -70,7 +68,7 @@ function AutocompleteMenu(props) {
   }) => id));
   const selectableItems = useMemo(() => items.map(selectableItem => {
     return { ...selectableItem,
-      role: "option",
+      role: 'option',
       id: selectableItem.id,
       selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
       onAction: item => {
@@ -125,7 +123,7 @@ function AutocompleteMenu(props) {
       }
 
       if (current) {
-        const selectedItem = selectableItems.find(item => item.id.toString() === (current === null || current === void 0 ? void 0 : current.dataset.id));
+        const selectedItem = selectableItems.find(item => item.id.toString() === current.dataset.id);
         setHighlightedItem(selectedItem);
         setIsMenuDirectlyActivated && setIsMenuDirectlyActivated(directlyActivated);
       }
@@ -182,7 +180,7 @@ function AutocompleteMenu(props) {
   }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
     ref: listContainerRef
   }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property 
+    selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
     // on `items` for Autocomplete: `metadata`
     ,
     items: allItemsToRender,

package/lib-esm/Autocomplete/AutocompleteOverlay.js

@@ -41,7 +41,7 @@ const AutocompleteOverlay = ({
     left: position === null || position === void 0 ? void 0 : position.left,
     visibility: showMenu ? 'visible' : 'hidden',
     sx: {
-      overflow: "auto"
+      overflow: 'auto'
     }
   }, overlayProps), children);
 };

package/lib-esm/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Autocomplete';
-export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps, } from './Autocomplete';
+export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';

package/lib-esm/TextInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
-import type * as Polymorphic from "@radix-ui/react-polymorphic";
+import type * as Polymorphic from '@radix-ui/react-polymorphic';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 import UnstyledTextInput from './_UnstyledTextInput';