@primer/components 0.0.0-2021113144816 → 0.0.0-2021113204024

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/{ActionList2/MenuContext.js → _InputField/InputFieldValidation.js}

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuContext = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/** This context can be used by components that compose ActionList inside a Menu */
-const MenuContext = /*#__PURE__*/_react.default.createContext({});
+const InputFieldValidation = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 
-exports.MenuContext = MenuContext;
+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 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/_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;

package/lib/_InputValidation.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const validationIconMap = {
+  success: _octiconsReact.CheckCircleFillIcon,
+  error: _octiconsReact.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.default.createElement(_.Text, {
+    display: "flex",
+    color: fgColor,
+    fontSize: 0,
+    sx: {
+      alignItems: 'baseline',
+      a: {
+        color: 'currentColor',
+        textDecoration: 'underline'
+      }
+    }
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "span",
+    mr: 1
+  }, /*#__PURE__*/_react.default.createElement(IconComponent, {
+    size: 12,
+    fill: "currentColor"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    id: id
+  }, children));
+};
+
+InputValidation.displayName = "InputValidation";
+var _default = InputValidation;
+exports.default = _default;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const VisuallyHidden = _styledComponents.default.span.withConfig({
+  displayName: "_VisuallyHidden__VisuallyHidden",
+  componentId: "sc-1k15c4h-0"
+})(["", ""], props => {
+  if (props.isVisible) {
+    return _sx.default;
+  }
+
+  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
+};
+var _default = VisuallyHidden;
+exports.default = _default;

package/lib/drafts.d.ts

@@ -6,4 +6,3 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
-export * from './ActionMenu2';

package/lib/drafts.js

@@ -28,17 +28,4 @@ Object.keys(_NewButton).forEach(function (key) {
       return _NewButton[key];
     }
   });
-});
-
-var _ActionMenu = require("./ActionMenu2");
-
-Object.keys(_ActionMenu).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ActionMenu[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ActionMenu[key];
-    }
-  });
 });

package/lib/index.d.ts

@@ -46,6 +46,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';
@@ -86,6 +88,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';
@@ -102,6 +105,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/index.js

@@ -267,6 +267,24 @@ Object.defineProperty(exports, "CircleOcticon", {
     return _CircleOcticon.default;
   }
 });
+Object.defineProperty(exports, "CheckboxInputField", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxInputField.default;
+  }
+});
+Object.defineProperty(exports, "ChoiceFieldset", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceFieldset.default;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceFieldset.Item;
+  }
+});
 Object.defineProperty(exports, "CounterLabel", {
   enumerable: true,
   get: function () {
@@ -393,6 +411,12 @@ Object.defineProperty(exports, "ProgressBar", {
     return _ProgressBar.default;
   }
 });
+Object.defineProperty(exports, "RadioInputField", {
+  enumerable: true,
+  get: function () {
+    return _RadioInputField.default;
+  }
+});
 Object.defineProperty(exports, "SelectMenu", {
   enumerable: true,
   get: function () {
@@ -441,6 +465,12 @@ Object.defineProperty(exports, "TextInput", {
     return _TextInput.default;
   }
 });
+Object.defineProperty(exports, "TextInputField", {
+  enumerable: true,
+  get: function () {
+    return _TextInputField.default;
+  }
+});
 Object.defineProperty(exports, "TextInputWithTokens", {
   enumerable: true,
   get: function () {
@@ -572,6 +602,10 @@ var _CircleBadge = _interopRequireDefault(require("./CircleBadge"));
 
 var _CircleOcticon = _interopRequireDefault(require("./CircleOcticon"));
 
+var _CheckboxInputField = _interopRequireDefault(require("./CheckboxInputField"));
+
+var _ChoiceFieldset = _interopRequireWildcard(require("./ChoiceFieldset"));
+
 var _CounterLabel = _interopRequireDefault(require("./CounterLabel"));
 
 var _Details = _interopRequireDefault(require("./Details"));
@@ -612,6 +646,8 @@ var _Popover = _interopRequireDefault(require("./Popover"));
 
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
+var _RadioInputField = _interopRequireDefault(require("./RadioInputField"));
+
 var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
 
 var _SideNav = _interopRequireDefault(require("./SideNav"));
@@ -628,6 +664,8 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
 
 var _TextInput = _interopRequireDefault(require("./TextInput"));
 
+var _TextInputField = _interopRequireDefault(require("./TextInputField"));
+
 var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
 
 var _Text = _interopRequireDefault(require("./Text"));

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

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

package/lib/utils/types/FormValidationStatus.js

@@ -0,0 +1 @@
+"use strict";

package/lib-esm/ActionList/Header.js

@@ -10,7 +10,7 @@ import sx from '../sx';
 
 export const StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
-  componentId: "sc-qmofje-0"
+  componentId: "qmofje-0"
 })(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
   variant
 }) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);