@primer/components 0.0.0-2021113194429 → 0.0.0-2021113204024

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/_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/drafts.d.ts

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

package/lib-esm/drafts.js

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

package/lib-esm/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-esm/index.js

@@ -30,6 +30,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';
@@ -55,6 +57,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';
@@ -63,6 +66,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-2021113194429",
+  "version": "0.0.0-2021113204024",
   "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",
@@ -65,7 +65,7 @@
     "@babel/cli": "7.14.5",
     "@babel/core": "7.14.8",
     "@babel/eslint-parser": "7.15.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
     "@babel/preset-react": "7.14.5",
@@ -75,7 +75,7 @@
     "@github/prettier-config": "0.0.4",
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
-    "@size-limit/preset-big-lib": "7.0.3",
+    "@size-limit/preset-big-lib": "5.0.2",
     "@storybook/addon-a11y": "6.3.12",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "6.3.12",
@@ -91,7 +91,6 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -100,7 +99,7 @@
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-styled-components": "2.0.2",
+    "babel-plugin-styled-components": "1.12.0",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chroma-js": "2.1.2",
@@ -117,7 +116,6 @@
     "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "front-matter": "4.0.2",
     "jest": "27.0.4",
     "jest-axe": "5.0.1",
     "jest-styled-components": "6.3.4",
@@ -130,16 +128,16 @@
     "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "rollup": "2.60.2",
+    "rollup": "2.56.3",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
-    "size-limit": "7.0.3",
+    "size-limit": "5.0.2",
     "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "ts-toolbelt": "9.6.0",
-    "typescript": "4.4.4"
+    "typescript": "4.2.2"
   },
   "peerDependencies": {
     "react": "^17.0.0",
@@ -158,9 +156,5 @@
       "webpack": false,
       "running": false
     }
-  ],
-  "engines": {
-    "node": ">=16",
-    "npm": ">=8"
-  }
+  ]
 }

package/lib/ActionList2/MenuContext.d.ts

@@ -1,10 +0,0 @@
-/** This context can be used by components that compose ActionList inside a Menu */
-import React from 'react';
-declare type ContextProps = {
-    parent?: string;
-    listRole?: string;
-    itemRole?: string;
-    afterSelect?: () => void;
-};
-export declare const MenuContext: React.Context<ContextProps>;
-export {};