@primer/components 0.0.0-2021111142050 → 0.0.0-2021111164412

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-esm/src → 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/{src/Autocomplete → Autocomplete}/Autocomplete.d.ts

@@ -26,7 +26,6 @@ declare const _default: React.FC<{
             className?: string | undefined;
         }> | undefined;
     } & Pick<{
-        title?: string | undefined;
         color?: string | undefined;
         maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -37,6 +36,7 @@ declare const _default: React.FC<{
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
+        title?: string | undefined;
         block?: boolean | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;

package/lib-esm/{src/Autocomplete → Autocomplete}/AutocompleteInput.d.ts

@@ -18,7 +18,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
         className?: string | undefined;
     }> | undefined;
 } & Pick<{
-    title?: string | undefined;
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -29,6 +28,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
+    title?: string | undefined;
     block?: boolean | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;