@primer/components 0.0.0-2021913174146 → 0.0.0-2021913222914

package/lib-esm/Button/ButtonInvisible.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.primer.fg.disabled'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
 export default ButtonInvisible;

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -1,7 +1,6 @@
 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); }
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useSSRSafeId } from '@react-aria/ssr';
 import TextInput from '../TextInput';
 import Box from '../Box';
 import { ActionList } from '../ActionList';
@@ -12,7 +11,36 @@ import styled from 'styled-components';
 import { get } from '../constants';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
 import useScrollFlash from '../hooks/useScrollFlash';
-import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
+import { useSSRSafeId } from '@react-aria/ssr';
+
+function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
+  const {
+    top: childTop,
+    bottom: childBottom
+  } = child.getBoundingClientRect();
+  const {
+    top: containerTop,
+    bottom: containerBottom
+  } = container.getBoundingClientRect();
+  const isChildTopAboveViewingArea = childTop < containerTop + margin;
+  const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
+
+  if (isChildTopAboveViewingArea) {
+    const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
+    container.scrollTo({
+      behavior,
+      top: scrollHeightToChildTop - margin
+    });
+  } else if (isChildBottomBelowViewingArea) {
+    const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
+    container.scrollTo({
+      behavior,
+      top: scrollHeightToChildBottom + margin
+    });
+  } // either completely in view or outside viewing area on both ends, don't scroll
+
+}
+
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "yg3jkv-0"
@@ -67,7 +95,7 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, undefined, 'auto');
     }
   }, [items]);
   useScrollFlash(scrollContainerRef);

package/lib-esm/Overlay.d.ts

@@ -40,7 +40,6 @@ export declare type OverlayProps = {
     top: number;
     left: number;
     portalContainerName?: string;
-    preventFocusOnOpen?: boolean;
 } & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,

package/lib-esm/Overlay.js

@@ -92,7 +92,6 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
   left,
   anchorSide,
   portalContainerName,
-  preventFocusOnOpen,
   ...rest
 }, forwardedRef) => {
   const overlayRef = useRef(null);
@@ -108,8 +107,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
     onEscape,
     ignoreClickRefs,
     onClickOutside,
-    initialFocusRef,
-    preventFocusOnOpen
+    initialFocusRef
   });
   useEffect(() => {
     var _combinedRef$current;

package/lib-esm/TextInput.d.ts

@@ -1,14 +1,22 @@
 import React from 'react';
+import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
+import { SxProp } from './sx';
 import { ComponentProps, Merge } from './utils/types';
-import UnstyledTextInput from './_UnstyledTextInput';
-import TextInputWrapper from './_TextInputWrapper';
+declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
+declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
+    disabled?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    block?: boolean | undefined;
+    contrast?: boolean | undefined;
+    variant?: "large" | "small" | undefined;
+} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
 declare type NonPassthroughProps = {
     className?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
-} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
-declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
+} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof Input>, NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;
 export default TextInput;

package/lib-esm/TextInput.js

@@ -2,8 +2,41 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import classnames from 'classnames';
 import React from 'react';
-import UnstyledTextInput from './_UnstyledTextInput';
-import TextInputWrapper from './_TextInputWrapper';
+import styled, { css } from 'styled-components';
+import { maxWidth, minWidth, variant, width } from 'styled-system';
+import { get } from './constants';
+import sx from './sx';
+const sizeVariants = variant({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+});
+const Input = styled.input.withConfig({
+  displayName: "TextInput__Input",
+  componentId: "sc-1apmpmt-0"
+})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}"]);
+const Wrapper = styled.span.withConfig({
+  displayName: "TextInput__Wrapper",
+  componentId: "sc-1apmpmt-1"
+})(["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 {
+    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.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); // Props that are not passed through to Input:
+
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/React.forwardRef(({
   icon: IconComponent,
@@ -21,7 +54,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = classnames(className, 'TextInput-wrapper');
-  return /*#__PURE__*/React.createElement(TextInputWrapper, {
+  return /*#__PURE__*/React.createElement(Wrapper, {
     block: block,
     className: wrapperClasses,
     contrast: contrast,
@@ -35,7 +68,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
     variant: variantProp
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: "TextInput-icon"
-  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
+  }), /*#__PURE__*/React.createElement(Input, _extends({
     ref: ref,
     disabled: disabled
   }, inputProps)));

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

@@ -3,6 +3,5 @@ export declare type UseOpenAndCloseFocusSettings = {
     initialFocusRef?: React.RefObject<HTMLElement>;
     containerRef: React.RefObject<HTMLElement>;
     returnFocusRef: React.RefObject<HTMLElement>;
-    preventFocusOnOpen?: boolean;
 };
-export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;
+export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef }: UseOpenAndCloseFocusSettings): void;

package/lib-esm/hooks/useOpenAndCloseFocus.js

@@ -3,14 +3,9 @@ import { iterateFocusableElements } from '../utils/iterateFocusableElements';
 export function useOpenAndCloseFocus({
   initialFocusRef,
   returnFocusRef,
-  containerRef,
-  preventFocusOnOpen
+  containerRef
 }) {
   useEffect(() => {
-    if (preventFocusOnOpen) {
-      return;
-    }
-
     const returnRef = returnFocusRef.current;
 
     if (initialFocusRef && initialFocusRef.current) {
@@ -23,5 +18,5 @@ export function useOpenAndCloseFocus({
     return function () {
       returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
     };
-  }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
+  }, [initialFocusRef, returnFocusRef, containerRef]);
 }

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

@@ -7,9 +7,8 @@ export declare type UseOverlaySettings = {
     onEscape: (e: KeyboardEvent) => void;
     onClickOutside: (e: TouchOrMouseEvent) => void;
     overlayRef?: React.RefObject<HTMLDivElement>;
-    preventFocusOnOpen?: boolean;
 };
 export declare type OverlayReturnProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
-export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;
+export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;

package/lib-esm/hooks/useOverlay.js

@@ -8,15 +8,13 @@ export const useOverlay = ({
   initialFocusRef,
   onEscape,
   ignoreClickRefs,
-  onClickOutside,
-  preventFocusOnOpen
+  onClickOutside
 }) => {
   const overlayRef = useProvidedRefOrCreate(_overlayRef);
   useOpenAndCloseFocus({
     containerRef: overlayRef,
     returnFocusRef,
-    initialFocusRef,
-    preventFocusOnOpen
+    initialFocusRef
   });
   useOnOutsideClick({
     containerRef: overlayRef,

package/lib-esm/index.d.ts

@@ -24,8 +24,6 @@ export { useConfirm } from './Dialog/ConfirmationDialog';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';
-export { default as Autocomplete } from './Autocomplete';
-export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';
 export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarPair } from './AvatarPair';
@@ -100,13 +98,10 @@ export { default as TabNav } from './TabNav';
 export type { TabNavProps, TabNavLinkProps } from './TabNav';
 export { default as TextInput } from './TextInput';
 export type { TextInputProps } from './TextInput';
-export { default as TextInputWithTokens } from './TextInputWithTokens';
-export type { TextInputWithTokensProps } from './TextInputWithTokens';
 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, IssueLabelToken, AvatarToken } from './Token';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Truncate } from './Truncate';

package/lib-esm/index.js

@@ -19,7 +19,6 @@ export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
-export { default as Autocomplete } from './Autocomplete';
 export { default as Avatar } from './Avatar';
 export { default as AvatarPair } from './AvatarPair';
 export { default as AvatarStack } from './AvatarStack';
@@ -62,10 +61,8 @@ export { default as StyledOcticon } from './StyledOcticon';
 export { default as SubNav } from './SubNav';
 export { default as TabNav } from './TabNav';
 export { default as TextInput } from './TextInput';
-export { default as TextInputWithTokens } from './TextInputWithTokens';
 export { default as Text } from './Text';
 export { default as Timeline } from './Timeline';
-export { default as Token, IssueLabelToken, AvatarToken } from './Token';
 export { default as Tooltip } from './Tooltip';
 export { default as Truncate } from './Truncate';
 export { default as UnderlineNav } from './UnderlineNav';