@primer/components 0.0.0-2021118165314 → 0.0.0-20211181903

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,16 @@
+import React from 'react';
+import { Text } from '.';
+
+const InputCaption = ({
+  children,
+  disabled,
+  id
+}) => /*#__PURE__*/React.createElement(Text, {
+  color: disabled ? 'fg.subtle' : 'fg.muted',
+  display: "block",
+  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,69 @@
+import React from 'react';
+import { Box, useSSRSafeId } from '..';
+import InputValidation from '../_InputValidation';
+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 = useSSRSafeId(idProp);
+  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,58 @@
+import React from 'react';
+import { Box, useSSRSafeId } from '..';
+import { get } from '../constants';
+import { Slots } from './slots';
+import ToggleInputLeadingVisual from './ToggleInputLeadingVisual';
+import InputFieldCaption from './InputFieldCaption';
+
+const ToggleInputField = ({
+  children,
+  disabled,
+  id: idProp,
+  validationStatus
+}) => {
+  var _React$Children$map;
+
+  const id = useSSRSafeId(idProp);
+  const captionChildren = (_React$Children$map = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === InputFieldCaption ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const captionId = captionChildren !== null && captionChildren !== void 0 && captionChildren.length ? `${id}-caption` : undefined;
+  return /*#__PURE__*/React.createElement(Slots, {
+    context: {
+      captionId,
+      disabled,
+      id,
+      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,33 @@
+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',
+      cursor: 'pointer'
+    }
+  }, 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,46 @@
+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, {
+    fontSize: 0,
+    sx: {
+      alignItems: 'center',
+      color: fgColor,
+      display: 'flex',
+      a: {
+        color: 'currentColor',
+        textDecoration: 'underline'
+      }
+    }
+  }, IconComponent && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    mr: 1,
+    sx: {
+      display: 'flex'
+    }
+  }, /*#__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/index.d.ts

@@ -48,6 +48,8 @@ export { default as CircleBadge } from './CircleBadge';
 export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
 export { default as CircleOcticon } from './CircleOcticon';
 export type { CircleOcticonProps } from './CircleOcticon';
+export { default as CheckboxInputField } from './CheckboxInputField';
+export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
 export { default as CounterLabel } from './CounterLabel';
 export type { CounterLabelProps } from './CounterLabel';
 export { default as Details } from './Details';
@@ -88,6 +90,7 @@ export { default as Popover } from './Popover';
 export type { PopoverProps, PopoverContentProps } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
 export type { ProgressBarProps } from './ProgressBar';
+export { default as RadioInputField } from './RadioInputField';
 export { default as SelectMenu } from './SelectMenu';
 export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
 export { default as SideNav } from './SideNav';
@@ -104,6 +107,7 @@ 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 TextInputField } from './TextInputField';
 export { default as TextInputWithTokens } from './TextInputWithTokens';
 export type { TextInputWithTokensProps } from './TextInputWithTokens';
 export { default as Text } from './Text';

package/lib-esm/index.js

@@ -31,6 +31,8 @@ export { NewButton } from './NewButton';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';
 export { default as CircleOcticon } from './CircleOcticon';
+export { default as CheckboxInputField } from './CheckboxInputField';
+export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
 export { default as CounterLabel } from './CounterLabel';
 export { default as Details } from './Details';
 export { default as Dialog } from './Dialog';
@@ -56,6 +58,7 @@ export { default as Popover } from './Popover';
 // export {default as Portal, registerPortalRoot} from './Portal'
 // export type {PortalProps} from './Portal'
 export { default as ProgressBar } from './ProgressBar';
+export { default as RadioInputField } from './RadioInputField';
 export { default as SelectMenu } from './SelectMenu';
 export { default as SideNav } from './SideNav';
 export { default as Spinner } from './Spinner';
@@ -64,6 +67,7 @@ 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 TextInputField } from './TextInputField';
 export { default as TextInputWithTokens } from './TextInputWithTokens';
 export { default as Text } from './Text';
 export { default as Timeline } from './Timeline';

package/lib-esm/utils/types/FormValidationStatus.d.ts

@@ -0,0 +1 @@
+export declare type FormValidationStatus = 'error' | 'success';

package/lib-esm/utils/types/FormValidationStatus.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021118165314",
+  "version": "0.0.0-20211181903",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,7 +43,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^16.1.0",
+    "@primer/octicons-react": "16.1.1",
     "@primer/primitives": "7.1.1",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",