@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

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 ToggleInputFieldProps extends Pick<InputFieldProps, 'disabled' | 'id'> {
+    /**
+     * Styles the field to visually communicate the result of form validation
+     */
+    validationStatus?: FormValidationStatus;
+}
+declare const _default: React.FC<ToggleInputFieldProps> & {
+    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/_TextInputWrapper.d.ts

@@ -0,0 +1,10 @@
+import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
+import { SxProp } from './sx';
+declare const TextInputWrapper: import("styled-components").StyledComponent<"span", any, {
+    disabled?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    block?: boolean | undefined;
+    contrast?: boolean | undefined;
+    variant?: "small" | "large" | 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>;
+export default TextInputWrapper;

package/lib-esm/_TextInputWrapper.js

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

package/lib-esm/_UnstyledTextInput.d.ts

@@ -0,0 +1,2 @@
+declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
+export default UnstyledTextInput;

package/lib-esm/_UnstyledTextInput.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import sx from './sx';
+const UnstyledTextInput = styled.input.withConfig({
+  displayName: "_UnstyledTextInput__UnstyledTextInput",
+  componentId: "sc-1jgl33s-0"
+})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx);
+export default UnstyledTextInput;

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;