@primer/components 0.0.0-20211030143938 → 0.0.0-20211030163410

package/lib/TextInputField.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
+
+var _slots = require("./_InputField/slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 Input = /*#__PURE__*/_react.default.forwardRef(({
+  as: Component = _.TextInput,
+  id: idProp,
+  required: requiredProp,
+  disabled: disabledProp,
+  ...rest
+}, ref) => {
+  if (idProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (disabledProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (requiredProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+    name: "Input"
+  }, ({
+    disabled,
+    id,
+    required,
+    validationMessageId,
+    captionId
+  }) => /*#__PURE__*/_react.default.createElement(Component, _extends({
+    ref: ref,
+    "aria-describedby": [validationMessageId, captionId].filter(Boolean).join(' '),
+    id: id,
+    required: required,
+    disabled: disabled
+  }, rest)));
+});
+
+var _default = Object.assign(_InputField.default, {
+  Input,
+  Caption: _InputField.default.Caption,
+  Label: _InputField.default.Label,
+  Validation: _InputField.default.Validation
+});
+
+exports.default = _default;

package/lib/_InputCaption.d.ts

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

package/lib/_InputCaption.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 InputCaption = props => /*#__PURE__*/_react.default.createElement(_.Text, _extends({
+  color: "fg.muted",
+  fontSize: 0
+}, props));
+
+InputCaption.displayName = "InputCaption";
+var _default = InputCaption;
+exports.default = _default;

package/lib/_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/_InputField/InputField.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _InputValidation = _interopRequireDefault(require("../_InputValidation"));
+
+var _uniqueId = require("../utils/uniqueId");
+
+var _InputFieldCaption = _interopRequireDefault(require("./InputFieldCaption"));
+
+var _InputFieldLabel = _interopRequireDefault(require("./InputFieldLabel"));
+
+var _InputFieldValidation = _interopRequireDefault(require("./InputFieldValidation"));
+
+var _slots = require("./slots");
+
+var _ValidationAnimationContainer = _interopRequireDefault(require("./ValidationAnimationContainer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputField = ({
+  children,
+  disabled,
+  id: idProp,
+  required,
+  validationMap,
+  validationResult
+}) => {
+  var _React$Children$map, _React$Children$map2;
+
+  const id = idProp || (0, _uniqueId.uniqueId)();
+  const validationChildren = (_React$Children$map = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _InputFieldValidation.default ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const captionChildren = (_React$Children$map2 = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _InputFieldCaption.default ? 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.default.createElement(_slots.Slots, {
+    context: {
+      captionId,
+      disabled,
+      id,
+      required,
+      validationMessageId
+    }
+  }, slots => {
+    const isLabelHidden = /*#__PURE__*/_react.default.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.default.createElement(_.Box, {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      sx: isLabelHidden ? {
+        '> *:not(label) + *': {
+          marginTop: 2
+        }
+      } : {
+        '> * + *': {
+          marginTop: 2
+        }
+      }
+    }, _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type !== _InputFieldValidation.default), slots.Label, slots.Input, validationChildToRender && validationMap && validationResult && validationMessageId && /*#__PURE__*/_react.default.createElement(_ValidationAnimationContainer.default, {
+      show: true
+    }, /*#__PURE__*/_react.default.createElement(_InputValidation.default, {
+      validationStatus: validationMap[validationResult],
+      id: validationMessageId
+    }, validationChildToRender)), slots.Caption);
+  });
+};
+
+InputField.displayName = "InputField";
+
+var _default = Object.assign(InputField, {
+  Caption: _InputFieldCaption.default,
+  Label: _InputFieldLabel.default,
+  Validation: _InputFieldValidation.default
+});
+
+exports.default = _default;

package/lib/_InputField/InputFieldCaption.d.ts

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

package/lib/_InputField/InputFieldCaption.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputCaption = _interopRequireDefault(require("../_InputCaption"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldCaption = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "Caption"
+}, ({
+  captionId
+}) => /*#__PURE__*/_react.default.createElement(_InputCaption.default, {
+  id: captionId
+}, children));
+
+InputFieldCaption.displayName = "InputFieldCaption";
+var _default = InputFieldCaption;
+exports.default = _default;

package/lib/_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/_InputField/InputFieldLabel.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputLabel = _interopRequireDefault(require("../_InputLabel"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldLabel = ({
+  children,
+  visuallyHidden
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "Label"
+}, ({
+  disabled,
+  id,
+  required
+}) => /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+  htmlFor: id,
+  visuallyHidden: visuallyHidden,
+  required: required,
+  disabled: disabled
+}, children));
+
+InputFieldLabel.displayName = "InputFieldLabel";
+var _default = InputFieldLabel;
+exports.default = _default;

package/lib/_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/_InputField/InputFieldValidation.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputFieldValidation = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+
+var _default = InputFieldValidation;
+exports.default = _default;

package/lib/_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/_InputField/ToggleInputField.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _uniqueId = require("../utils/uniqueId");
+
+var _slots = require("./slots");
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("./ToggleInputLeadingVisual"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ToggleInputField = ({
+  children,
+  disabled,
+  id,
+  validationStatus
+}) => {
+  const fieldId = id || (0, _uniqueId.uniqueId)();
+  return /*#__PURE__*/_react.default.createElement(_slots.Slots, {
+    context: {
+      captionId: `${id}-caption`,
+      disabled,
+      id: fieldId,
+      validationStatus
+    }
+  }, slots => {
+    return /*#__PURE__*/_react.default.createElement(_.Box, {
+      display: "flex",
+      alignItems: slots.LeadingVisual ? 'center' : undefined
+    }, children, /*#__PURE__*/_react.default.createElement(_.Box, {
+      sx: {
+        '> input': {
+          marginLeft: 0,
+          marginRight: 0
+        }
+      }
+    }, slots.Input), slots.LeadingVisual && /*#__PURE__*/_react.default.createElement(_.Box, {
+      color: disabled ? 'fg.muted' : 'fg.default',
+      sx: {
+        '> *': {
+          minWidth: slots.Caption ? (0, _constants.get)('fontSizes.4') : (0, _constants.get)('fontSizes.2'),
+          minHeight: slots.Caption ? (0, _constants.get)('fontSizes.4') : (0, _constants.get)('fontSizes.2'),
+          fill: 'currentColor'
+        }
+      },
+      ml: 2
+    }, slots.LeadingVisual), /*#__PURE__*/_react.default.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden || slots.Caption ? /*#__PURE__*/_react.default.createElement(_.Box, {
+      display: "flex",
+      flexDirection: "column",
+      ml: 2
+    }, slots.Label, slots.Caption) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slots.Label, slots.Caption));
+  });
+};
+
+ToggleInputField.displayName = "ToggleInputField";
+
+var _default = Object.assign(ToggleInputField, {
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;

package/lib/_InputField/ToggleInputLeadingVisual.d.ts

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

package/lib/_InputField/ToggleInputLeadingVisual.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _slots = require("./slots");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ToggleInputLeadingVisual = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+  name: "LeadingVisual"
+}, children);
+
+ToggleInputLeadingVisual.displayName = "ToggleInputLeadingVisual";
+var _default = ToggleInputLeadingVisual;
+exports.default = _default;

package/lib/_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/_InputField/ValidationAnimationContainer.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+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 fadeIn = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]); // using easeOutQuint easing fn https://easings.net/#easeOutQuint
+
+const AnimatedElement = _styledComponents.default.div.withConfig({
+  displayName: "ValidationAnimationContainer__AnimatedElement",
+  componentId: "sc-1grmoaz-0"
+})(["animation:", ";"], props => props.show && (0, _styledComponents.css)(["170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], fadeIn));
+
+const ValidationAnimationContainer = ({
+  show,
+  children
+}) => {
+  const [shouldRender, setRender] = (0, _react.useState)(show);
+  (0, _react.useEffect)(() => {
+    if (show) setRender(true);
+  }, [show]);
+
+  const onAnimationEnd = () => {
+    if (!show) setRender(false);
+  };
+
+  return shouldRender ? /*#__PURE__*/_react.default.createElement(_.Box, {
+    height: show ? 'auto' : 0,
+    overflow: "hidden"
+  }, /*#__PURE__*/_react.default.createElement(AnimatedElement, {
+    show: show,
+    onAnimationEnd: onAnimationEnd
+  }, children)) : null;
+};
+
+var _default = ValidationAnimationContainer;
+exports.default = _default;

package/lib/_InputField/index.d.ts

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

package/lib/_InputField/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InputField.default;
+  }
+});
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/_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/_InputField/slots.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slot = exports.Slots = void 0;
+
+var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  Slots,
+  Slot
+} = (0, _createSlots.default)(['Caption', 'Input', 'Label', 'LeadingVisual']);
+exports.Slot = Slot;
+exports.Slots = Slots;

package/lib/_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/_InputLabel.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+var _VisuallyHidden = _interopRequireDefault(require("./_VisuallyHidden"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const InputLabel = ({
+  children,
+  disabled,
+  required,
+  visuallyHidden,
+  htmlFor
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, {
+    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.default.createElement(_.Box, {
+    display: "flex",
+    as: "span"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    mr: 1
+  }, children), /*#__PURE__*/_react.default.createElement("span", null, "*")) : children);
+};
+
+InputLabel.displayName = "InputLabel";
+var _default = InputLabel;
+exports.default = _default;

package/lib/_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;