Merge from v2 repo

.nvmrc

@@ -1 +1 @@
-8.*
+12.*

README.md

@@ -33,7 +33,7 @@ email = [ADOBE EMAIL]
 
 The auth key can be obtained by following the steps listed [here](https://www.jfrog.com/confluence/display/RTF/Npm+Registry#npmRegistry-UsingBasicAuthentication). Sample cURL:
 ```
- curl -u danilu:<API KEY> https://artifactory.corp.adobe.com/artifactory/api/npm/auth
+ curl -u <ARTIFACTORY USERNAME>:<API KEY> https://artifactory.corp.adobe.com/artifactory/api/npm/auth
 ```
 
 Then you should be able to install with npm:

lint-packages.js

@@ -1,22 +1,53 @@
 const glob = require('fast-glob');
 const fs = require('fs');
 const assert = require('assert');
+const chalk = require('chalk');
 
 let packages = glob.sync(__dirname + '/packages/@react-{aria,spectrum,stately}/*/package.json');
 
+let errors = false;
+
+// soft assert won't fail the whole thing, allowing us to accumulate all errors at once
+// there's probably a nicer way to do this, but well... sometimes it's good enough. feel free to update me :)
+// maybe turn me into an actual eslint plugin so we get their format for styling
+function softAssert(val, message) {
+  try {
+    assert(val, message);
+  } catch {
+    console.error(chalk.red(message));
+    errors = true;
+  }
+}
+softAssert.deepEqual = function (val, val2, message) {
+  try {
+    assert.deepEqual(val, val2, message);
+  } catch {
+    console.error(chalk.red(message));
+    errors = true;
+  }
+}
+softAssert.equal = function (val, val2, message) {
+  try {
+    assert.equal(val, val2, message);
+  } catch {
+    console.error(chalk.red(message));
+    errors = true;
+  }
+}
+
 for (let pkg of packages) {
   let json = JSON.parse(fs.readFileSync(pkg));
-  assert(json.main, `${pkg} did not have "main"`);
-  assert(json.module, `${pkg} did not have "module"`);
-  assert(json.types, `${pkg} did not have "types"`);
-  assert(json.source, `${pkg} did not have "source"`);
-  assert.deepEqual(json.files, ['dist'], `${pkg} did not match "files"`);
-  assert.equal(json.sideEffects, false, `${pkg} is missing sideEffects: false`);
-  assert(!json.dependencies || !json.dependencies['@adobe/spectrum-css-temp'], `${pkg} has @adobe/spectrum-css-temp in dependencies instead of devDependencies`);
-  assert(json.dependencies && json.dependencies['@babel/runtime'], `${pkg} is missing a dependency on @babel/runtime`);
+  softAssert(json.main, `${pkg} did not have "main"`);
+  softAssert(json.module, `${pkg} did not have "module"`);
+  softAssert(json.types, `${pkg} did not have "types"`);
+  softAssert(json.source, `${pkg} did not have "source"`);
+  softAssert.deepEqual(json.files, ['dist'], `${pkg} did not match "files"`);
+  softAssert.equal(json.sideEffects, false, `${pkg} is missing sideEffects: false`);
+  softAssert(!json.dependencies || !json.dependencies['@adobe/spectrum-css-temp'], `${pkg} has @adobe/spectrum-css-temp in dependencies instead of devDependencies`);
+  softAssert(json.dependencies && json.dependencies['@babel/runtime'], `${pkg} is missing a dependency on @babel/runtime`);
 
   if (json.name.startsWith('@react-spectrum') && json.devDependencies && json.devDependencies['@adobe/spectrum-css-temp']) {
-    assert.deepEqual(json.targets, {
+    softAssert.deepEqual(json.targets, {
       main: {
         includeNodeModules: ['@adobe/spectrum-css-temp']
       },
@@ -26,5 +57,9 @@ for (let pkg of packages) {
     }, `${pkg} did not match "targets"`);
   }
 
-  assert(json.publishConfig && json.publishConfig.access === 'public', `${pkg} has missing or incorrect publishConfig`);
+  softAssert(json.publishConfig && json.publishConfig.access === 'public', `${pkg} has missing or incorrect publishConfig`);
+}
+
+if (errors) {
+  return process.exit(1);
 }

package.json

@@ -48,12 +48,12 @@
     "@react/collection-view": "^4.1.5",
     "@react/react-spectrum": "^2.24.0",
     "@react/react-spectrum-icons": "^2.1.0",
-    "@storybook/addon-a11y": "^5.1.9",
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-info": "^5.1.9",
-    "@storybook/addon-knobs": "^5.1.9",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/react": "^5.1.9",
+    "@storybook/addon-a11y": "^5.2.1",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-info": "^5.2.1",
+    "@storybook/addon-knobs": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/react": "^5.2.1",
     "@testing-library/react": "^8.0.1",
     "@testing-library/user-event": "^4.1.0",
     "@types/react": "^16.8.0",
@@ -69,6 +69,7 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-glob-import": "^1.0.1",
     "babelify": "^10.0.0",
+    "chalk": "^2.4.2",
     "classnames": "^2.2.5",
     "core-js": "^3.0.0",
     "css-loader": "^2.1.1",
@@ -80,6 +81,7 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-rulesdir": "^0.1.0",
+    "fast-glob": "^3.1.0",
     "file-loader": "^0.9.0",
     "full-icu": "^1.3.0",
     "identity-obj-proxy": "^3.0.0",
@@ -90,8 +92,6 @@
     "lerna": "^3.13.2",
     "lfcdn": "^0.4.2",
     "md5": "^2.2.1",
-    "moment": "^2.15.1",
-    "moment-range": "^3.0.3",
     "nyc": "^10.2.0",
     "parcel": "^2.0.0-alpha.2.1",
     "plop": "^2.4.0",

packages/@adobe/spectrum-css-temp/components/fieldgroup/index.css

@@ -24,6 +24,14 @@ governing permissions and limitations under the License.
 .spectrum-FieldGroup {
   display: flex;
   vertical-align: top;
+  flex-wrap: wrap;
+}
+
+
+.spectrum-FieldGroup-label {
+  display: flex;
+  align-items: flex-start;
+  inline-size: 100%;
 }
 
 /* topdoc

packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

@@ -25,7 +25,7 @@ governing permissions and limitations under the License.
 {{ fieldlabel/fieldlabel-required.yml }}
 */
 .spectrum-FieldLabel {
-  display: block;
+  display: flex;
 
   box-sizing: border-box;
 
@@ -40,6 +40,11 @@ governing permissions and limitations under the License.
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: auto;
   font-smoothing: subpixel-antialiased;
+  text-align: start;
+}
+
+.spectrum-FieldLabel-label {
+  margin-inline-end: 5px;
 }
 
 .spectrum-FieldLabel-requiredIcon {

packages/@adobe/spectrum-css-temp/components/radio/index.css

@@ -29,10 +29,10 @@ governing permissions and limitations under the License.
 
   position: relative;
 
-  min-height: var(--spectrum-radio-height);
-  max-width: 100%;
+  min-block-size: var(--spectrum-radio-height);
+  max-inline-size: 100%;
 
-  margin-right: calc(var(--spectrum-radio-cursor-hit-x) * 2);
+  margin-inline-end: calc(var(--spectrum-radio-cursor-hit-x) * 2);
 
   vertical-align: top;
 }
@@ -59,8 +59,10 @@ governing permissions and limitations under the License.
   position: absolute;
   top: 0;
   left: calc(var(--spectrum-radio-cursor-hit-x) * -1);
-  width: calc(100% + var(--spectrum-radio-cursor-hit-x) * 2);
-  height: 100%;
+  /* right wins in rtl because inline-size is specified */
+  right: calc(var(--spectrum-radio-cursor-hit-x) * -1);
+  inline-size: calc(100% + var(--spectrum-radio-cursor-hit-x) * 2);
+  block-size: 100%;
 
   opacity: .0001;
   z-index: 1;
@@ -77,20 +79,20 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Radio-label {
-  margin-left: var(--spectrum-radio-text-gap);
+  margin-inline-start: var(--spectrum-radio-text-gap);
   font-size: var(--spectrum-radio-text-size);
 
   transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
 
   /* Hardcoded as no good way to calculate this */
-  margin-top: var(--spectrum-radio-label-margin-top);
+  margin-block-start: var(--spectrum-radio-label-margin-top);
 }
 
 .spectrum-Radio-button {
   position: relative;
   box-sizing: border-box;
-  width: var(--spectrum-radio-circle-diameter);
-  height: var(--spectrum-radio-circle-diameter);
+  inline-size: var(--spectrum-radio-circle-diameter);
+  block-size: var(--spectrum-radio-circle-diameter);
 
   /* Fix vertical alignment when not wrapping since we're flex-start */
   margin: calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter)) / 2) 0;
@@ -109,7 +111,7 @@ governing permissions and limitations under the License.
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  height: var(--spectrum-radio-labelbelow-height);
+  block-size: var(--spectrum-radio-labelbelow-height);
 
   .spectrum-Radio-button {
     flex-shrink: 0;

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -194,7 +194,7 @@ governing permissions and limitations under the License.
   display: block;
   position: absolute;
   inset-inline-start: 12px;
-  top: calc(calc(var(--spectrum-textfield-height) / 2) - calc(var(--spectrum-icon-magnifier-width) / 2));
+  top: calc(calc(var(--spectrum-textfield-height) / 2) - calc(var(--spectrum-icon-magnifier-width) / 2) - calc(var(--spectrum-textfield-padding-bottom) - var(--spectrum-textfield-padding-top)));
 }
 
 /* styles the textfield properly if the left icon is provided */

packages/@react-aria/radio/index.ts

@@ -0,0 +1 @@
+export * from './src';

packages/@react-aria/radio/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@react-aria/radio",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-types/radio": "^3.0.0-alpha.1",
+    "@react-aria/utils": "^3.0.0-alpha.1",
+    "@react-stately/radio": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-aria/radio/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useRadio';
+export * from './useRadioGroup';

packages/@react-aria/radio/src/useRadio.ts

@@ -0,0 +1,54 @@
+import {AllHTMLAttributes} from 'react';
+import {LabelPosition, RadioProps} from '@react-types/radio';
+import {RadioGroupState} from '@react-stately/radio';
+
+interface RadioAriaProps extends RadioProps {
+  isDisabled?: boolean,
+  isRequired?: boolean,
+  isReadOnly?: boolean,
+  isEmphasized?: boolean,
+  labelPosition?: LabelPosition,
+  name?: string,
+  validationState?: 'valid' | 'invalid',
+  selectedRadio?: string,
+  setSelectedRadio?: (value: string) => void
+}
+
+interface RadioAria {
+  inputProps: AllHTMLAttributes<HTMLInputElement>
+}
+
+export function useRadio(props: RadioAriaProps, state: RadioGroupState): RadioAria {
+  let {
+    value,
+    isRequired,
+    isReadOnly,
+    isDisabled,
+    name
+  } = props;
+  let {
+    selectedRadio,
+    setSelectedRadio
+  } = state;
+
+  let checked = selectedRadio === value;
+
+  let onChange = (e) => {
+    e.stopPropagation();
+
+    setSelectedRadio(value);
+  };
+
+  return {
+    inputProps: {
+      type: 'radio',
+      name,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      checked,
+      'aria-checked': checked,
+      onChange
+    }
+  };
+}

packages/@react-aria/radio/src/useRadioGroup.ts

@@ -0,0 +1,25 @@
+import {AllHTMLAttributes} from 'react';
+import {RadioGroupProps} from '@react-types/radio';
+import {useId} from '@react-aria/utils';
+
+
+interface RadioGroupAria {
+  radioGroupProps: AllHTMLAttributes<HTMLElement>,
+  radioProps: AllHTMLAttributes<HTMLInputElement>
+}
+
+export function useRadioGroup(props: RadioGroupProps): RadioGroupAria {
+  let defaultGroupId = `${useId()}-group`;
+  let {
+    name = defaultGroupId
+  } = props;
+
+  return {
+    radioGroupProps: {
+      role: 'radiogroup'
+    },
+    radioProps: {
+      name
+    }
+  };
+}

packages/@react-aria/searchfield/package.json

@@ -18,6 +18,7 @@
     "@babel/runtime": "^7.6.2",
     "@react-aria/i18n": "^3.0.0-alpha.1",
     "@react-aria/utils": "^3.0.0-alpha.1",
+    "@react-stately/searchfield": "^3.0.0-alpha.1",
     "@react-types/searchfield": "^3.0.0-alpha.1"
   },
   "peerDependencies": {

packages/@react-aria/searchfield/src/useSearchField.ts

@@ -1,7 +1,8 @@
 import {AllHTMLAttributes, RefObject} from 'react';
 import {chain} from '@react-aria/utils';
 import intlMessages from './intl/*.json';
-import {SearchFieldProps, SearchFieldState} from '@react-types/searchfield';
+import {SearchFieldProps} from '@react-types/searchfield';
+import {SearchFieldState} from '@react-stately/searchfield';
 import {useMessageFormatter} from '@react-aria/i18n';
 
 interface SearchFieldAria {
@@ -11,7 +12,7 @@ interface SearchFieldAria {
 }
 
 export function useSearchField(
-  props: SearchFieldProps, 
+  props: SearchFieldProps,
   state: SearchFieldState,
   searchFieldRef: RefObject<HTMLInputElement & HTMLTextAreaElement>
 ): SearchFieldAria {
@@ -50,7 +51,7 @@ export function useSearchField(
     state.setValue('', e);
     searchFieldRef.current.focus();
   };
-  
+
   return {
     searchDivProps: {
       role