@primer/components 0.0.0-2021116153325 → 0.0.0-2021116165050

package/lib-esm/TextInputWithTokens.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef, useState } from 'react';
 import { omit } from '@styled-system/props';
-import { FocusKeys } from '@primer/behaviors';
+import { FocusKeys } from './behaviors/focusZone';
 import { useCombinedRefs } from './hooks/useCombinedRefs';
 import { useFocusZone } from './hooks/useFocusZone';
 import Token from './Token/Token';
@@ -11,7 +11,7 @@ import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
 import Box from './Box';
 import Text from './Text';
-import { isFocusable } from '@primer/behaviors/utils'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 const overflowCountFontSizeMap = {
   small: 0,

package/lib-esm/_InputCaption.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /**
+     * The unique identifier used to associate the caption with an input
+     */
+    id: string;
+    /**
+     * Whether the input associated with this caption is disabled
+     */
+    disabled?: boolean;
+}
+declare const InputCaption: React.FC<Props>;
+export default InputCaption;

package/lib-esm/_InputCaption.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from '.';
+
+const InputCaption = ({
+  children,
+  disabled,
+  id
+}) => /*#__PURE__*/React.createElement(Text, {
+  color: disabled ? 'fg.subtle' : 'fg.muted',
+  fontSize: 0,
+  id: id
+}, children);
+
+InputCaption.displayName = "InputCaption";
+export default InputCaption;

package/lib-esm/_InputField/InputField.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentProps } from '../utils/types';
+import { FormValidationStatus } from '../utils/types/FormValidationStatus';
+export interface Props<T = Record<string, FormValidationStatus>> {
+    children?: React.ReactNode;
+    /**
+     * Whether the field is ready for user input
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for this field. Used to associate the label, validation text, and caption text
+     */
+    id?: string;
+    /**
+     * Whether this field must have a value for the user to complete their task
+     */
+    required?: boolean;
+    /**
+     * A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop,
+     * the associated validation message will be rendered in the correct style
+     */
+    validationMap?: T;
+    /**
+     * The key of the validation message to show
+     */
+    validationResult?: keyof T;
+}
+export interface InputFieldContext extends Pick<Props<Record<string, FormValidationStatus>>, 'disabled' | 'id' | 'required'> {
+    captionId: string;
+    validationMessageId: string;
+}
+declare const InputField: <T extends Record<string, FormValidationStatus>>({ children, disabled, id: idProp, required, validationMap, validationResult }: Props<T>) => JSX.Element;
+export declare type InputFieldComponentProps = ComponentProps<typeof InputField>;
+declare const _default: (<T extends Record<string, FormValidationStatus>>({ children, disabled, id: idProp, required, validationMap, validationResult }: Props<T>) => JSX.Element) & {
+    Caption: React.FC<{}>;
+    Label: React.FC<import("./InputFieldLabel").Props>;
+    Validation: React.FC<import("./InputFieldValidation").InputFieldValidationProps>;
+};
+export default _default;

package/lib-esm/_InputField/InputField.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box } from '..';
+import InputValidation from '../_InputValidation';
+import { uniqueId } from '../utils/uniqueId';
+import InputFieldCaption from './InputFieldCaption';
+import InputFieldLabel from './InputFieldLabel';
+import InputFieldValidation from './InputFieldValidation';
+import { Slots } from './slots';
+import ValidationAnimationContainer from './ValidationAnimationContainer';
+
+const InputField = ({
+  children,
+  disabled,
+  id: idProp,
+  required,
+  validationMap,
+  validationResult
+}) => {
+  var _React$Children$map, _React$Children$map2;
+
+  const id = idProp || uniqueId();
+  const validationChildren = (_React$Children$map = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === InputFieldValidation ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const captionChildren = (_React$Children$map2 = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === InputFieldCaption ? child : null)) === null || _React$Children$map2 === void 0 ? void 0 : _React$Children$map2.filter(Boolean);
+  const validationChildToRender = validationChildren === null || validationChildren === void 0 ? void 0 : validationChildren.find(child => child.props.validationKey === validationResult);
+  const validationMessageId = validationChildToRender ? `${id}-validationMsg` : undefined;
+  const captionId = captionChildren !== null && captionChildren !== void 0 && captionChildren.length ? `${id}-caption` : undefined;
+  return /*#__PURE__*/React.createElement(Slots, {
+    context: {
+      captionId,
+      disabled,
+      id,
+      required,
+      validationMessageId
+    }
+  }, slots => {
+    const isLabelHidden = /*#__PURE__*/React.isValidElement(slots.Label) && slots.Label.props.visuallyHidden;
+
+    if (slots.Input && !slots.Label) {
+      // eslint-disable-next-line no-console
+      console.error(`The input field with the id ${id} MUST have a Label child (e.g.: <TextInputField.Label>).\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the Label component.`);
+    }
+
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      sx: isLabelHidden ? {
+        '> *:not(label) + *': {
+          marginTop: 2
+        }
+      } : {
+        '> * + *': {
+          marginTop: 2
+        }
+      }
+    }, React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type !== InputFieldValidation), slots.Label, slots.Input, validationChildToRender && validationMap && validationResult && validationMessageId && /*#__PURE__*/React.createElement(ValidationAnimationContainer, {
+      show: true
+    }, /*#__PURE__*/React.createElement(InputValidation, {
+      validationStatus: validationMap[validationResult],
+      id: validationMessageId
+    }, validationChildToRender)), slots.Caption);
+  });
+};
+
+InputField.displayName = "InputField";
+export default Object.assign(InputField, {
+  Caption: InputFieldCaption,
+  Label: InputFieldLabel,
+  Validation: InputFieldValidation
+});

package/lib-esm/_InputField/InputFieldCaption.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InputFieldCaption: React.FC;
+export default InputFieldCaption;

package/lib-esm/_InputField/InputFieldCaption.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import InputCaption from '../_InputCaption';
+import { Slot } from './slots';
+
+const InputFieldCaption = ({
+  children
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "Caption"
+}, ({
+  captionId,
+  disabled
+}) => /*#__PURE__*/React.createElement(InputCaption, {
+  id: captionId,
+  disabled: disabled
+}, children));
+
+InputFieldCaption.displayName = "InputFieldCaption";
+export default InputFieldCaption;

package/lib-esm/_InputField/InputFieldLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    /**
+     * Whether the label should be visually hidden
+     */
+    visuallyHidden?: boolean;
+}
+declare const InputFieldLabel: React.FC<Props>;
+export default InputFieldLabel;

package/lib-esm/_InputField/InputFieldLabel.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import InputLabel from '../_InputLabel';
+import { Slot } from './slots';
+
+const InputFieldLabel = ({
+  children,
+  visuallyHidden
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "Label"
+}, ({
+  disabled,
+  id,
+  required
+}) => /*#__PURE__*/React.createElement(InputLabel, {
+  htmlFor: id,
+  visuallyHidden: visuallyHidden,
+  required: required,
+  disabled: disabled
+}, children));
+
+InputFieldLabel.displayName = "InputFieldLabel";
+export default InputFieldLabel;

package/lib-esm/_InputField/InputFieldValidation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface InputFieldValidationProps {
+    validationKey: string;
+}
+declare const InputFieldValidation: React.FC<InputFieldValidationProps>;
+export default InputFieldValidation;

package/lib-esm/_InputField/InputFieldValidation.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const InputFieldValidation = ({
+  children
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, children);
+
+export default InputFieldValidation;

package/lib-esm/_InputField/ToggleInputField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Props as InputFieldProps } from './InputField';
+import { FormValidationStatus } from '../utils/types/FormValidationStatus';
+export interface Props extends Pick<InputFieldProps, 'disabled' | 'id'> {
+    /**
+     * Styles the field to visually communicate the result of form validation
+     */
+    validationStatus?: FormValidationStatus;
+}
+declare const _default: React.FC<Props> & {
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib-esm/_InputField/ToggleInputField.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box } from '..';
+import { get } from '../constants';
+import { uniqueId } from '../utils/uniqueId';
+import { Slots } from './slots';
+import ToggleInputLeadingVisual from './ToggleInputLeadingVisual';
+
+const ToggleInputField = ({
+  children,
+  disabled,
+  id,
+  validationStatus
+}) => {
+  const fieldId = id || uniqueId();
+  return /*#__PURE__*/React.createElement(Slots, {
+    context: {
+      captionId: `${id}-caption`,
+      disabled,
+      id: fieldId,
+      validationStatus
+    }
+  }, slots => {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      alignItems: slots.LeadingVisual ? 'center' : undefined
+    }, children, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        '> input': {
+          marginLeft: 0,
+          marginRight: 0
+        }
+      }
+    }, slots.Input), slots.LeadingVisual && /*#__PURE__*/React.createElement(Box, {
+      color: disabled ? 'fg.muted' : 'fg.default',
+      sx: {
+        '> *': {
+          minWidth: slots.Caption ? get('fontSizes.4') : get('fontSizes.2'),
+          minHeight: slots.Caption ? get('fontSizes.4') : get('fontSizes.2'),
+          fill: 'currentColor'
+        }
+      },
+      ml: 2
+    }, slots.LeadingVisual), /*#__PURE__*/React.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden || slots.Caption ? /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      ml: 2
+    }, slots.Label, slots.Caption) : /*#__PURE__*/React.createElement(React.Fragment, null, slots.Label, slots.Caption));
+  });
+};
+
+ToggleInputField.displayName = "ToggleInputField";
+export default Object.assign(ToggleInputField, {
+  LeadingVisual: ToggleInputLeadingVisual
+});

package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ToggleInputLeadingVisual: React.FC;
+export default ToggleInputLeadingVisual;

package/lib-esm/_InputField/ToggleInputLeadingVisual.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Slot } from './slots';
+
+const ToggleInputLeadingVisual = ({
+  children
+}) => /*#__PURE__*/React.createElement(Slot, {
+  name: "LeadingVisual"
+}, children);
+
+ToggleInputLeadingVisual.displayName = "ToggleInputLeadingVisual";
+export default ToggleInputLeadingVisual;

package/lib-esm/_InputField/ValidationAnimationContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    show?: boolean;
+}
+declare const ValidationAnimationContainer: React.FC<Props>;
+export default ValidationAnimationContainer;

package/lib-esm/_InputField/ValidationAnimationContainer.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import { Box } from '..';
+const fadeIn = keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]); // using easeOutQuint easing fn https://easings.net/#easeOutQuint
+
+const AnimatedElement = styled.div.withConfig({
+  displayName: "ValidationAnimationContainer__AnimatedElement",
+  componentId: "sc-1grmoaz-0"
+})(["animation:", ";"], props => props.show && css(["170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], fadeIn));
+
+const ValidationAnimationContainer = ({
+  show,
+  children
+}) => {
+  const [shouldRender, setRender] = useState(show);
+  useEffect(() => {
+    if (show) setRender(true);
+  }, [show]);
+
+  const onAnimationEnd = () => {
+    if (!show) setRender(false);
+  };
+
+  return shouldRender ? /*#__PURE__*/React.createElement(Box, {
+    height: show ? 'auto' : 0,
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement(AnimatedElement, {
+    show: show,
+    onAnimationEnd: onAnimationEnd
+  }, children)) : null;
+};
+
+export default ValidationAnimationContainer;

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

@@ -0,0 +1 @@
+export { default } from './InputField';

package/lib-esm/_InputField/index.js

@@ -0,0 +1 @@
+export { default } from './InputField';

package/lib-esm/_InputField/slots.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Slots: import("react").FC<{
+    context?: Record<string, unknown> | undefined;
+    children: (slots: {
+        LeadingVisual?: import("react").ReactNode;
+        Caption?: import("react").ReactNode;
+        Input?: import("react").ReactNode;
+        Label?: import("react").ReactNode;
+    }) => import("react").ReactNode;
+}>, Slot: import("react").FC<{
+    name: "LeadingVisual" | "Caption" | "Input" | "Label";
+    children: import("react").ReactNode;
+}>;

package/lib-esm/_InputField/slots.js

@@ -0,0 +1,5 @@
+import createSlots from '../utils/create-slots';
+export const {
+  Slots,
+  Slot
+} = createSlots(['Caption', 'Input', 'Label', 'LeadingVisual']);

package/lib-esm/_InputLabel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props extends React.HTMLProps<HTMLLabelElement> {
+    disabled?: boolean;
+    required?: boolean;
+    visuallyHidden?: boolean;
+}
+declare const InputLabel: React.FC<Props>;
+export default InputLabel;

package/lib-esm/_InputLabel.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box } from '.';
+import VisuallyHidden from './_VisuallyHidden';
+
+const InputLabel = ({
+  children,
+  disabled,
+  required,
+  visuallyHidden,
+  htmlFor
+}) => {
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    isVisible: !visuallyHidden,
+    as: "label",
+    htmlFor: htmlFor,
+    title: required ? 'required field' : undefined,
+    sx: {
+      fontWeight: 'bold',
+      fontSize: 1,
+      display: 'block',
+      color: disabled ? 'fg.muted' : 'fg.default'
+    }
+  }, required ? /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    as: "span"
+  }, /*#__PURE__*/React.createElement(Box, {
+    mr: 1
+  }, children), /*#__PURE__*/React.createElement("span", null, "*")) : children);
+};
+
+InputLabel.displayName = "InputLabel";
+export default InputLabel;

package/lib-esm/_InputValidation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormValidationStatus } from './utils/types/FormValidationStatus';
+interface Props {
+    id: string;
+    validationStatus?: FormValidationStatus;
+}
+declare const InputValidation: React.FC<Props>;
+export default InputValidation;

package/lib-esm/_InputValidation.js

@@ -0,0 +1,43 @@
+import { AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
+import React from 'react';
+import { Box, Text } from '.';
+const validationIconMap = {
+  success: CheckCircleFillIcon,
+  error: AlertFillIcon
+};
+const validationColorMap = {
+  success: 'success.fg',
+  error: 'danger.fg'
+};
+
+const InputValidation = ({
+  children,
+  id,
+  validationStatus
+}) => {
+  const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;
+  const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined;
+  return /*#__PURE__*/React.createElement(Text, {
+    display: "flex",
+    color: fgColor,
+    fontSize: 0,
+    sx: {
+      alignItems: 'baseline',
+      a: {
+        color: 'currentColor',
+        textDecoration: 'underline'
+      }
+    }
+  }, IconComponent && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    mr: 1
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    size: 12,
+    fill: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", {
+    id: id
+  }, children));
+};
+
+InputValidation.displayName = "InputValidation";
+export default InputValidation;

package/lib-esm/_VisuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { SxProp } from './sx';
+interface Props {
+    isVisible?: boolean;
+}
+declare const VisuallyHidden: import("styled-components").StyledComponent<"span", any, Props & SxProp, never>;
+export default VisuallyHidden;

package/lib-esm/_VisuallyHidden.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import sx from './sx';
+const VisuallyHidden = styled.span.withConfig({
+  displayName: "_VisuallyHidden__VisuallyHidden",
+  componentId: "sc-1k15c4h-0"
+})(["", ""], props => {
+  if (props.isVisible) {
+    return sx;
+  }
+
+  return `
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    `;
+});
+VisuallyHidden.defaultProps = {
+  isVisible: true
+};
+export default VisuallyHidden;

package/lib-esm/behaviors/anchoredPosition.d.ts

@@ -0,0 +1,89 @@
+export declare type AnchorAlignment = 'start' | 'center' | 'end';
+export declare type AnchorSide = 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right';
+/**
+ * Settings that customize how a floating element is positioned
+ * with respect to an anchor element.
+ */
+export interface PositionSettings {
+    /**
+     * Sets the side of the anchor element that the floating element should be
+     * pinned to. This side is given by a string starting with either "inside" or
+     * "outside", followed by a hyphen, followed by either "top", "right", "bottom",
+     * or "left". Additionally, "inside-center" is an allowed value.
+     *
+     * The first part of this string, "inside" or "outside", determines whether the
+     * floating element should be attempted to be placed "inside" the anchor element
+     * or "outside" of it. Using "inside" is useful for making it appear that the
+     * anchor _contains_ the floating element, and it can be used for implementing a
+     * dialog that is centered on the screen. The "outside" value is more common and
+     * can be used for tooltips, popovers, menus, etc.
+     *
+     * The second part of this string determines the _edge_ on the anchor element that
+     * the floating element will be anchored to. If side is "inside-center", then
+     * the floating element will be centered in the X-direction (while align is used
+     * to position it in the Y-direction).
+     * Note: "outside-center" is _not_ a valid value for this property.
+     */
+    side: AnchorSide;
+    /**
+     * Determines how the floating element should align with the anchor element. If
+     * set to "start", the floating element's first edge (top or left) will align
+     * with the anchor element's first edge. If set to "center", the floating
+     * element will be centered along the axis of the anchor edge. If set to "end",
+     * the floating element's last edge will align with the anchor element's last edge.
+     */
+    align: AnchorAlignment;
+    /**
+     * The number of pixels between the anchor edge and the floating element.
+     *
+     * Positive values move the floating element farther from the anchor element
+     * (for outside positioning) or further inside the anchor element (for inside
+     * positioning). Negative values have the opposite effect.
+     */
+    anchorOffset: number;
+    /**
+     * An additional offset, in pixels, to move the floating element from
+     * the aligning edge.
+     *
+     * Positive values move the floating element in the direction of center-
+     * alignment. Negative values move the floating element away from center-
+     * alignment. When align is "center", positive offsets move the floating
+     * element right (top or bottom anchor side) or down (left or right
+     * anchor side).
+     */
+    alignmentOffset: number;
+    /**
+     * If false, when the above settings result in rendering the floating element
+     * wholly or partially outside of the bounds of the containing element, attempt
+     * to adjust the settings to prevent this. Only applies to "outside" positioning.
+     *
+     * First, attempt to flip to the opposite edge of the anchor if the floating
+     * element is getting clipped in that direction. If flipping results in a
+     * similar clipping, try moving to the adjacent sides.
+     *
+     * Once we find a side that does not clip the overlay in its own dimension,
+     * check the rest of the sides to see if we need to adjust the alignment offset
+     * to fit in other dimensions.
+     *
+     * If we try all four sides and get clipped each time, settle for overflowing
+     * and use the "bottom" side, since the ability to scroll is most likely in
+     * this direction.
+     */
+    allowOutOfBounds: boolean;
+}
+export interface AnchorPosition {
+    top: number;
+    left: number;
+    anchorSide: AnchorSide;
+}
+/**
+ * Given a floating element and an anchor element, return coordinates for the top-left
+ * of the floating element in order to absolutely position it such that it appears
+ * near the anchor element.
+ *
+ * @param floatingElement Element intended to be positioned near or within an anchor
+ * @param anchorElement The element to serve as the position anchor
+ * @param settings Settings to determine the rules for positioning the floating element
+ * @returns {top: number, left: number} coordinates for the floating element
+ */
+export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;