diff --git a/.circleci/comment.js b/.circleci/comment.js index 04231015b53..70592fb7215 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -19,7 +19,7 @@ async function run() { body: `Build successful! 🎉 * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html) -* [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html) +* [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html) * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)` }); } diff --git a/.circleci/config.yml b/.circleci/config.yml index 4bc3bc333e0..07dd9f48607 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -6,14 +6,14 @@ orbs: executors: rsp: docker: - - image: cimg/node:12.22 + - image: cimg/node:14.16.0 environment: CACHE_VERSION: v1 working_directory: ~/react-spectrum rsp-large: docker: - - image: cimg/node:12.22 + - image: cimg/node:14.16.0 resource_class: large environment: CACHE_VERSION: v1 @@ -21,7 +21,7 @@ executors: rsp-xlarge: docker: - - image: cimg/node:12.22 + - image: cimg/node:14.16.0 resource_class: xlarge environment: CACHE_VERSION: v1 @@ -60,7 +60,7 @@ jobs: - ~/react-spectrum key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} - install-17: + install-16: executor: rsp-large steps: - checkout @@ -73,12 +73,12 @@ jobs: - run: name: build command: | - yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-17 --cache-folder ~/.cache/yarn + yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-16 --cache-folder ~/.cache/yarn - save_cache: paths: - ~/react-spectrum - key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} + key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} test-ssr: executor: rsp-xlarge @@ -116,23 +116,23 @@ jobs: - store_artifacts: path: ~/junit - test-ssr-17: + test-ssr-16: executor: rsp-xlarge steps: - restore_cache: - key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} + key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} - run: name: test ssr command: | yarn test:ssr - test-17: + test-16: parallelism: 3 executor: rsp-xlarge steps: - restore_cache: - key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} + key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} - run: mkdir ~/junit @@ -141,10 +141,10 @@ jobs: command: | shopt -s globstar TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings) - JEST_JUNIT_OUTPUT_NAME="junit-17.xml" yarn test ${TESTFILES} + JEST_JUNIT_OUTPUT_NAME="junit-16.xml" yarn test ${TESTFILES} - run: - command: cp junit-17.xml ~/junit/ + command: cp junit-16.xml ~/junit/ when: always - store_test_results: path: ~/junit @@ -176,20 +176,20 @@ jobs: paths: - '*/storybook/' - storybook-17: + storybook-16: executor: rsp-large steps: - restore_cache: - key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} + key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }} - run: - name: build storybook-17 - command: make storybook-17 + name: build storybook-16 + command: make storybook-16 - persist_to_workspace: root: dist paths: - - '*/storybook-17/' + - '*/storybook-16/' docs: executor: rsp-xlarge @@ -275,28 +275,28 @@ workflows: commit: jobs: - install - - install-17 + - install-16 - test-ssr: requires: - install - test: requires: - install - - test-ssr-17: + - test-ssr-16: requires: - - install-17 - - test-17: + - install-16 + - test-16: requires: - - install-17 + - install-16 - lint: requires: - install - storybook: requires: - install - - storybook-17: + - storybook-16: requires: - - install-17 + - install-16 - docs: requires: - install @@ -311,10 +311,10 @@ workflows: - lint - test-ssr - test - - test-ssr-17 - - test-17 + - test-ssr-16 + - test-16 - storybook - - storybook-17 + - storybook-16 - docs - deploy-production: filters: diff --git a/.eslintrc.js b/.eslintrc.js index f06b3967c3d..20e8a1aecf6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -79,7 +79,10 @@ module.exports = { 'expect': true, 'JSX': 'readonly', 'NodeJS': 'readonly', - 'AsyncIterable': 'readonly' + 'AsyncIterable': 'readonly', + 'FileSystemFileEntry': 'readonly', + 'FileSystemDirectoryEntry': 'readonly', + 'FileSystemEntry': 'readonly' }, settings: { jsdoc: { diff --git a/.parcelrc b/.parcelrc index e3b1d70c3f7..464308aa81d 100644 --- a/.parcelrc +++ b/.parcelrc @@ -1,19 +1,25 @@ { "extends": "@parcel/config-default", - "resolvers": ["parcel-resolver-docs", "..."], + "resolvers": ["@parcel/resolver-glob", "parcel-resolver-docs", "..."], + "bundler": "@parcel/bundler-experimental", "transformers": { "apiCheck:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], "*.{md,mdx}": ["parcel-transformer-mdx-docs"], "*.svg": ["@parcel/transformer-svg-react"], - "*.css": ["...", "parcel-transformer-css-env"] + "*.css": ["...", "parcel-transformer-css-env"], + "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ + "@parcel/transformer-js", + "@parcel/transformer-react-refresh-wrap" + ] }, "namers": ["parcel-namer-docs", "..."], "packagers": { "*.json": "parcel-packager-docs", + "*.html": "@parcel/packager-js" }, "optimizers": { - "*.js": ["parcel-optimizer-ssg", "..."] + "*.html": ["parcel-optimizer-ssg", "..."] } } diff --git a/Makefile b/Makefile index 89565917293..5712b637777 100644 --- a/Makefile +++ b/Makefile @@ -65,8 +65,8 @@ icons: packages/@spectrum-icons/workflow/src packages/@spectrum-icons/color/src storybook: NODE_ENV=production yarn build:storybook -storybook-17: - yarn build:storybook-17 +storybook-16: + yarn build:storybook-16 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet ci: @@ -79,7 +79,7 @@ publish-nightly: build yarn publish:nightly build: - parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/*/ --no-minify + parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/*/ --no-optimize website: yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs diff --git a/babel.config.json b/babel.config.json index c73d561f2f9..510f70cc937 100644 --- a/babel.config.json +++ b/babel.config.json @@ -2,7 +2,7 @@ "presets": [ "@babel/preset-typescript", "@babel/preset-react", - ["@parcel/babel-preset-env", + ["@babel/preset-env", { "loose": true } @@ -12,7 +12,7 @@ "storybook": { "presets": [ [ - "@parcel/babel-preset-env", + "@babel/preset-env", { "loose": true, "targets": { @@ -42,7 +42,7 @@ }, "plugins": [ [ - "@parcel/babel-plugin-transform-runtime", + "@babel/plugin-transform-runtime", { "version": "^7.6.2" } @@ -53,15 +53,6 @@ "legacy": true } ], - [ - "@babel/plugin-proposal-class-properties", - { - "loose": true - } - ], - "@babel/plugin-proposal-export-default-from", - "@babel/plugin-proposal-export-namespace-from", - "@babel/plugin-syntax-class-properties", "transform-glob-import", "babel-plugin-macros" ], diff --git a/package.json b/package.json index ed97fd6af65..47b91ec8017 100644 --- a/package.json +++ b/package.json @@ -15,19 +15,19 @@ ], "scripts": { "check-types": "tsc", - "install-17": "yarn add -W react@^17.0.1 react-dom@^17.0.1", + "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0", "start": "cross-env NODE_ENV=storybook start-storybook -p 9003 --ci -c '.storybook'", "build:storybook": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook", - "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17", + "build:storybook-16": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16", "start:chromatic": "NODE_ENV=storybook start-storybook -p 9004 --ci -c '.chromatic'", "build:chromatic": "build-storybook -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic", "start:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'", - "build:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx' --no-scope-hoist", + "build:docs": "PARCEL_WORKER_BACKEND=process DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'", "test": "yarn jest", "build": "make build", "test:ssr": "yarn jest --config jest.ssr.config.js", "ci-test": "yarn jest --maxWorkers=2 && yarn test:ssr --runInBand", - "ci-test-17": "yarn jest --maxWorkers=2 && yarn test:ssr --runInBand", + "ci-test-16": "yarn jest --maxWorkers=2 && yarn test:ssr --runInBand", "lint": "concurrently \"yarn check-types\" \"eslint packages --ext .js,.ts,.tsx\" \"node scripts/lint-packages.js\"", "jest": "node scripts/jest.js", "copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js", @@ -56,15 +56,8 @@ "@babel/cli": "^7.12.10", "@babel/core": "^7.12.10", "@babel/node": "^7.12.10", - "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.12.1", - "@babel/plugin-proposal-export-default-from": "^7.12.1", - "@babel/plugin-proposal-export-namespace-from": "^7.12.1", - "@babel/plugin-proposal-object-rest-spread": "^7.12.1", - "@babel/plugin-syntax-class-properties": "^7.12.1", "@babel/plugin-syntax-decorators": "^7.12.1", - "@babel/plugin-syntax-object-rest-spread": "^7.8.3", - "@babel/plugin-transform-async-to-generator": "^7.12.1", "@babel/plugin-transform-runtime": "^7.12.10", "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", @@ -72,10 +65,12 @@ "@babel/register": "^7.12.10", "@babel/runtime": "^7.12.5", "@octokit/rest": "*", - "@parcel/babel-plugin-transform-runtime": "nightly", - "@parcel/babel-preset-env": "nightly", - "@parcel/transformer-inline": "nightly", - "@parcel/transformer-svg-react": "nightly", + "@parcel/bundler-experimental": "2.0.0-nightly.2573", + "@parcel/packager-ts": "2.0.0-nightly.951", + "@parcel/resolver-glob": "2.0.2-nightly.2573", + "@parcel/transformer-inline": "2.0.0-nightly.951", + "@parcel/transformer-svg-react": "2.0.2-nightly.2573", + "@parcel/transformer-typescript-types": "2.0.0-nightly.951", "@spectrum-css/component-builder": "^1.0.0", "@spectrum-css/vars": "^2.3.0", "@storybook/addon-a11y": "^6.1.10", @@ -89,9 +84,9 @@ "@testing-library/dom": "^8.0.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", - "@testing-library/react-hooks": "^3.4.1", + "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^12.1.3", - "@types/react": "^16.9.23", + "@types/react": "^17.0.37", "@types/storybook__react": "^5.2.1", "@typescript-eslint/eslint-plugin": "^4.3.0", "@typescript-eslint/parser": "^4.3.0", @@ -140,9 +135,10 @@ "md5": "^2.2.1", "nyc": "^10.2.0", "p-queue": "^6.2.1", - "parcel": "nightly", + "parcel": "2.0.0-nightly.949", "patch-package": "^6.2.0", "plop": "^2.4.0", + "postcss": "^7.0.0", "postcss-calc": "^6.0.0", "postcss-custom-properties": "6.3.1", "postcss-dir-pseudo-class": "^5.0.0", @@ -157,9 +153,9 @@ "postcss-svg": "^3.0.0", "prop-types": "^15.6.0", "raf": "^3.4.0", - "react": "^16.8.0 || ^17.0.0-rc.1", + "react": "^17.0.2", "react-axe": "^3.0.2", - "react-dom": "^16.8.0 || ^17.0.0-rc.1", + "react-dom": "^17.0.2", "react-overlays": "0.8.3", "react-test-renderer": "^16.9.0", "recursive-readdir": "^2.2.2", @@ -169,7 +165,7 @@ "storybook-dark-mode": "^1.0.3", "style-loader": "^0.23.1", "tempy": "^0.5.0", - "typescript": "^3.8.3", + "typescript": "^4.5.2", "url-loader": "^1.1.2", "walk-object": "^4.0.0", "webpack": "^4.44.2", diff --git a/packages/@react-aria/aria-modal-polyfill/docs/watchModals.mdx b/packages/@react-aria/aria-modal-polyfill/docs/watchModals.mdx index 5308890eb63..5b1c037fec0 100644 --- a/packages/@react-aria/aria-modal-polyfill/docs/watchModals.mdx +++ b/packages/@react-aria/aria-modal-polyfill/docs/watchModals.mdx @@ -1,17 +1,17 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/aria-modal-polyfill'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/aria-modal-polyfill/package.json'; --- @@ -21,7 +21,7 @@ keywords: [dialog, modal, aria] # watchModals -

{docs.exports.watchModals.description}

+{docs.exports.watchModals.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/autocomplete'; import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts'; -import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink} from '@react-spectrum/docs'; +import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs'; import i18nDocs from 'docs:@react-aria/i18n'; import overlaysDocs from 'docs:@react-aria/overlays'; import packageData from '@react-aria/autocomplete/package.json'; @@ -30,7 +30,7 @@ after_version: 3.0.0 # useSearchAutocomplete -

{docs.exports.useSearchAutocomplete.description}

+{docs.exports.useSearchAutocomplete.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/breadcrumbs'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/breadcrumbs/package.json'; import Anatomy from './anatomy.svg'; @@ -26,7 +27,7 @@ keywords: [breadcrumbs, aria] # useBreadcrumbs -

{docs.exports.useBreadcrumbs.description}

+{docs.exports.useBreadcrumbs.description} Enter key to navigate to that page. Optionally, breadcrumbs can be used +triggered via the Enter key to navigate to that page. Optionally, breadcrumbs can be used in place of a page title, in which case the last breadcrumb acts as a heading. `useBreadcrumbs` returns props to be spread onto the navigation element: diff --git a/packages/@react-aria/button/docs/useButton.mdx b/packages/@react-aria/button/docs/useButton.mdx index 8487e7f97f0..7a548c04b2b 100644 --- a/packages/@react-aria/button/docs/useButton.mdx +++ b/packages/@react-aria/button/docs/useButton.mdx @@ -1,17 +1,18 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/button'; -import {HeaderInfo, FunctionAPI} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/button/package.json'; ```jsx import @@ -26,7 +27,7 @@ keywords: [button, aria, form] # useButton -

{docs.exports.useButton.description}

+{docs.exports.useButton.description} ` and custom element type support via ARIA * Mouse and touch event handling, and press state management * Keyboard focus management and cross browser normalization -* Keyboard event support for Space and Enter keys +* Keyboard event support for Space and Enter keys ## Anatomy Buttons consist of a clickable area usually containing a textual label or an icon that users can click to perform an action. In addition, keyboard users may activate -buttons using the Space or Enter keys. +buttons using the Space or Enter keys. If a visual label is not provided (e.g. an icon only button), then an `aria-label` or `aria-labelledby` prop must be passed to identify the button to assistive technology. diff --git a/packages/@react-aria/button/docs/useToggleButton.mdx b/packages/@react-aria/button/docs/useToggleButton.mdx index a7f72435383..eeeb9c45604 100644 --- a/packages/@react-aria/button/docs/useToggleButton.mdx +++ b/packages/@react-aria/button/docs/useToggleButton.mdx @@ -1,18 +1,19 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/button'; import statelyDocs from 'docs:@react-stately/toggle'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/button/package.json'; ```jsx import @@ -27,7 +28,7 @@ keywords: [button, toggle button, aria, form] # useToggleButton -

{docs.exports.useToggleButton.description}

+{docs.exports.useToggleButton.description} Space and Enter keys +* Keyboard event support for Space and Enter keys ## Anatomy Toggle buttons consist of a clickable area usually containing a textual label or an icon that users can click to toggle a selection state. In addition, keyboard users may toggle -the state using the Space or Enter keys. +the state using the Space or Enter keys. `useToggleButton` returns props to be spread onto the button element, along with a boolean indicating whether the user is currently pressing the button: diff --git a/packages/@react-aria/checkbox/docs/useCheckbox.mdx b/packages/@react-aria/checkbox/docs/useCheckbox.mdx index 2b12bcc9d25..2fa58f55a6d 100644 --- a/packages/@react-aria/checkbox/docs/useCheckbox.mdx +++ b/packages/@react-aria/checkbox/docs/useCheckbox.mdx @@ -1,11 +1,11 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -14,7 +14,8 @@ import docs from 'docs:@react-aria/checkbox'; import hiddenDocs from 'docs:@react-aria/visually-hidden'; import focusDocs from 'docs:@react-aria/focus'; import statelyDocs from 'docs:@react-stately/toggle'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/checkbox/package.json'; import Anatomy from './checkbox-anatomy.svg'; @@ -29,7 +30,7 @@ keywords: [checkbox, input, aria] # useCheckbox -

{docs.exports.useCheckbox.description}

+{docs.exports.useCheckbox.description} Tab key to navigate to it and the Space key to toggle it. +to toggle the selection state, or use the Tab key to navigate to it and the Space key to toggle it. `useCheckbox` returns props to be spread onto its input element: diff --git a/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx b/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx index d6b9f9d7013..8ee5d2a1267 100644 --- a/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx +++ b/packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx @@ -1,11 +1,11 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -14,7 +14,8 @@ import docs from 'docs:@react-aria/checkbox'; import hiddenDocs from 'docs:@react-aria/visually-hidden'; import focusDocs from 'docs:@react-aria/focus'; import statelyDocs from 'docs:@react-stately/checkbox'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/checkbox/package.json'; import Anatomy from './checkboxgroup-anatomy.svg'; @@ -30,7 +31,7 @@ after_version: 3.1.0 # useCheckboxGroup -

{docs.exports.useCheckboxGroup.description}

+{docs.exports.useCheckboxGroup.description} Tab key to navigate to it -and the Space key to toggle it. +to select it, or use the Tab key to navigate to it +and the Space key to toggle it. `useCheckboxGroup` returns props for the group and its label, which you should spread onto the appropriate element: diff --git a/packages/@react-aria/color/docs/useColorField.mdx b/packages/@react-aria/color/docs/useColorField.mdx index 51005085181..c6ea9eabbca 100644 --- a/packages/@react-aria/color/docs/useColorField.mdx +++ b/packages/@react-aria/color/docs/useColorField.mdx @@ -1,18 +1,18 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/color'; import statelyDocs from 'docs:@react-stately/color'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/color/package.json'; import Anatomy from './ColorFieldAnatomy.svg'; @@ -27,7 +27,7 @@ keywords: [color, input, color picker, aria] # useColorField -

{docs.exports.useColorField.description}

+{docs.exports.useColorField.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -13,7 +13,7 @@ export default Layout; import docs from 'docs:@react-aria/color'; import statelyDocs from 'docs:@react-stately/color'; import typesDocs from 'docs:@react-types/color'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/color/package.json'; import Anatomy from './ColorSliderAnatomy.svg'; @@ -28,7 +28,7 @@ keywords: [color slider, color picker, aria] # useColorSlider -

{docs.exports.useColorSlider.description}

+{docs.exports.useColorSlider.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/color'; import statelyDocs from 'docs:@react-stately/color'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/color/package.json'; import Anatomy from './ColorWheelAnatomy.svg'; @@ -27,7 +27,7 @@ keywords: [color wheel, color picker, aria] # useColorWheel -

{docs.exports.useColorWheel.description}

+{docs.exports.useColorWheel.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/combobox'; import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts'; -import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink} from '@react-spectrum/docs'; +import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs'; import i18nDocs from 'docs:@react-aria/i18n'; import listboxDocs from 'docs:@react-aria/listbox'; import overlaysDocs from 'docs:@react-aria/overlays'; @@ -36,7 +36,7 @@ after_version: 3.0.0-alpha.0 # useComboBox -

{docs.exports.useComboBox.description}

+{docs.exports.useComboBox.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -13,7 +13,8 @@ export default Layout; import docs from 'docs:@react-aria/dialog'; import overlaysDocs from 'docs:@react-aria/overlays'; import focusDocs from 'docs:@react-aria/focus'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/dialog/package.json'; import Anatomy from './anatomy.svg'; @@ -24,7 +25,7 @@ keywords: [overlays, dialog, modal, aria] # useDialog -

{docs.exports.useDialog.description}

+{docs.exports.useDialog.description} > * Hides content behind the dialog from screen readers when combined with * Prevents scrolling the page behind the dialog when combined with -* Handles closing the dialog when interacting outside and pressing the Escape key, when combined with +* Handles closing the dialog when interacting outside and pressing the Escape key, when combined with ## Anatomy @@ -81,7 +82,7 @@ and hides content outside the dialog with . The modal can be closed by clicking or interacting outside the dialog if the `isDismissable` -prop is set to true, or by pressing the Escape key. +prop is set to true, or by pressing the Escape key. This is handled by . Focus is contained within the dialog while it is open using a diff --git a/packages/@react-aria/dnd/src/constants.ts b/packages/@react-aria/dnd/src/constants.ts index e18e6e24764..9a23f3fba87 100644 --- a/packages/@react-aria/dnd/src/constants.ts +++ b/packages/@react-aria/dnd/src/constants.ts @@ -10,6 +10,8 @@ * governing permissions and limitations under the License. */ +import {DropOperation} from '@react-types/shared'; + export enum DROP_OPERATION { none = 0, cancel = 0, @@ -31,7 +33,7 @@ export const DROP_OPERATION_ALLOWED = { export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED); export const DROP_EFFECT = invert(DROP_OPERATION); -export const DROP_EFFECT_TO_DROP_OPERATION = { +export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = { none: 'cancel', link: 'link', copy: 'copy', diff --git a/packages/@react-aria/dnd/src/useDrop.ts b/packages/@react-aria/dnd/src/useDrop.ts index 279c22fff8a..d2ac185bab5 100644 --- a/packages/@react-aria/dnd/src/useDrop.ts +++ b/packages/@react-aria/dnd/src/useDrop.ts @@ -43,7 +43,7 @@ export function useDrop(options: DropOptions): DropResult { x: 0, y: 0, dragEnterCount: 0, - dropEffect: 'none', + dropEffect: 'none' as DataTransfer['dropEffect'], dropActivateTimer: null }).current; diff --git a/packages/@react-aria/dnd/src/utils.ts b/packages/@react-aria/dnd/src/utils.ts index b8f2c2f3570..7ebda4796f6 100644 --- a/packages/@react-aria/dnd/src/utils.ts +++ b/packages/@react-aria/dnd/src/utils.ts @@ -277,25 +277,6 @@ function createDirectoryItem(entry: any): DirectoryItem { }; } -interface FileSystemFileEntry { - isFile: true, - isDirectory: false, - name: string, - file(successCallback: (file: File) => void, errorCallback?: (error: Error) => void): void -} - -interface FileSystemDirectoryEntry { - isDirectory: true, - isFile: false, - name: string, - createReader(): FileSystemDirectoryReader -} - -type FileSystemEntry = FileSystemFileEntry | FileSystemDirectoryEntry; -interface FileSystemDirectoryReader { - readEntries(successCallback: (entries: FileSystemEntry[]) => void, errorCallback?: (error: Error) => void): void -} - async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable { let reader = item.createReader(); @@ -309,7 +290,7 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/focus'; -import {HeaderInfo, PropTable} from '@react-spectrum/docs'; +import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/focus/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [focus, keyboard focus, focus management, aria] # FocusRing -

{docs.exports.FocusRing.description}

+{docs.exports.FocusRing.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/focus'; -import {HeaderInfo, PropTable, FunctionAPI, TypeLink, ClassAPI} from '@react-spectrum/docs'; +import {HeaderInfo, PropTable, FunctionAPI, TypeLink, ClassAPI, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/focus/package.json'; ```tsx import @@ -25,7 +26,7 @@ keywords: [focus scope, keyboard focus, focus management, aria] # FocusScope -

{docs.exports.FocusScope.description}

+{docs.exports.FocusScope.description} Tab key to move within the scope, but focus is contained inside. Clicking the "Close" +press the Tab key to move within the scope, but focus is contained inside. Clicking the "Close" button unmounts the focus scope, which restores focus back to the button. For a full example of building a modal dialog, see [useDialog](useDialog.html). diff --git a/packages/@react-aria/focus/docs/useFocusRing.mdx b/packages/@react-aria/focus/docs/useFocusRing.mdx index 70b0615c21f..b4cfea3d482 100644 --- a/packages/@react-aria/focus/docs/useFocusRing.mdx +++ b/packages/@react-aria/focus/docs/useFocusRing.mdx @@ -1,17 +1,17 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/focus'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/focus/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [focus ring, keyboard focus, focus management, aria] # useFocusRing -

{docs.exports.useFocusRing.description}

+{docs.exports.useFocusRing.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {HeaderInfo, TypeContext, PropTable, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, TypeContext, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [i18n, provider, aria, locale, localization] # I18nProvider -

{docs.exports.I18nProvider.description}

+{docs.exports.I18nProvider.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; diff --git a/packages/@react-aria/i18n/docs/useCollator.mdx b/packages/@react-aria/i18n/docs/useCollator.mdx index 6d35eca3957..4932351d9a5 100644 --- a/packages/@react-aria/i18n/docs/useCollator.mdx +++ b/packages/@react-aria/i18n/docs/useCollator.mdx @@ -1,17 +1,17 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [collator, i18n, aria, localization] # useCollator -

{docs.exports.useCollator.description}

+{docs.exports.useCollator.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [date, time, i18n, aria, localization] # useDateFormatter -

{docs.exports.useDateFormatter.description}

+{docs.exports.useDateFormatter.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; --- @@ -21,7 +21,7 @@ keywords: [filter, search, string match, i18n, aria, localization] # useFilter -

{docs.exports.useFilter.description}

+{docs.exports.useFilter.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; --- @@ -21,7 +21,7 @@ keywords: [locale, i18n, aria, localization] # useLocale -

{docs.exports.useLocale.description}

+{docs.exports.useLocale.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [message, i18n, aria, localization] # useMessageFormatter -

{docs.exports.useMessageFormatter.description}

+{docs.exports.useMessageFormatter.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/i18n'; -import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs'; +import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/i18n/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [number, i18n, aria, localization] # useNumberFormatter -

{docs.exports.useNumberFormatter.description}

+{docs.exports.useNumberFormatter.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import {HeaderInfo, PropTable, TypeLink} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; --- category: Concepts @@ -73,10 +74,10 @@ Keyboard and focus support is important to allow users to navigate your app with who are unable to physically use a mouse or touch screen, but also nice for power users who may find it faster to navigate parts of your app without lifting their hands from the keyboard. -At a high level, keyboard navigation is broken up into **tab stops**, which may be navigated by pressing the Tab key to -move to the next tab stop, and Shift + Tab to move to the previous tab stop. A tab stop may be an atomic +At a high level, keyboard navigation is broken up into **tab stops**, which may be navigated by pressing the Tab key to +move to the next tab stop, and Shift + Tab to move to the previous tab stop. A tab stop may be an atomic component like a text field or button, or a composite component like a listbox, radio group, grid, or toolbar. Composite components -behave as a single tab stop. Elements within a composite component are typically navigated with the arrow keys, while the Tab +behave as a single tab stop. Elements within a composite component are typically navigated with the arrow keys, while the Tab key continues to navigate to the next/previous tab stop. React Aria implements hooks for many of these composite components and handles all of the keyboard navigation behavior for elements inside them. diff --git a/packages/@react-aria/interactions/docs/useFocus.mdx b/packages/@react-aria/interactions/docs/useFocus.mdx index b1b453689be..b39b3338595 100644 --- a/packages/@react-aria/interactions/docs/useFocus.mdx +++ b/packages/@react-aria/interactions/docs/useFocus.mdx @@ -1,18 +1,18 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [keyboard focus, focus management, focus pseudo class, aria] # useFocus -

{docs.exports.useFocus.description}

+{docs.exports.useFocus.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [keyboard focus, focus management, focus ring, focus visibility, aria] # useFocusVisible -

{docs.exports.useFocusVisible.description}

+{docs.exports.useFocusVisible.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [keyboard focus, focus management, focus ring, focus descendant, aria] # useFocusWithin -

{docs.exports.useFocusWithin.description}

+{docs.exports.useFocusWithin.description} +{/* filter props to only include events... */} prop.value.type === 'function'))} /> diff --git a/packages/@react-aria/interactions/docs/useHover.mdx b/packages/@react-aria/interactions/docs/useHover.mdx index 143c8b273dc..30a5bd3952a 100644 --- a/packages/@react-aria/interactions/docs/useHover.mdx +++ b/packages/@react-aria/interactions/docs/useHover.mdx @@ -1,18 +1,18 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [pointer hover, point events, hover events, aria] # useHover -

{docs.exports.useHover.description}

+{docs.exports.useHover.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [keyboard interactions, keyboard events, aria] # useKeyboard -

{docs.exports.useKeyboard.description}

+{docs.exports.useKeyboard.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [long press interactions, long press events, long press gesture, aria] # useLongPress -

{docs.exports.useLongPress.description}

+{docs.exports.useLongPress.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +26,7 @@ keywords: [move interactions, move events, drag, touch, mouse, keyboard, aria] # useMove -

{docs.exports.useMove.description}

+{docs.exports.useMove.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/interactions'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/interactions/package.json'; ```jsx import @@ -26,7 +27,7 @@ keywords: [press interactions, press events, aria] # usePress -

{docs.exports.usePress.description}

+{docs.exports.usePress.description} Enter or Space key presses +* Handles Enter or Space key presses * Handles screen reader virtual clicks * Uses pointer events where available, with fallbacks to mouse and touch events * Normalizes focus behavior on mouse and touch interactions across browsers @@ -80,7 +81,7 @@ type of event that triggered the interaction. This example shows a simple target that handles press events with `usePress` and logs them to a list below. It also uses the `isPressed` state to adjust the background color when the target is pressed. Press down on the target and drag your pointer off and over to see when the events are fired, and try focusing -the target with a keyboard and pressing the Enter or Space keys to trigger events as well. +the target with a keyboard and pressing the Enter or Space keys to trigger events as well. **NOTE: for more advanced button functionality, see [useButton](useButton.html).** diff --git a/packages/@react-aria/interactions/src/useFocusVisible.ts b/packages/@react-aria/interactions/src/useFocusVisible.ts index a22bce1e9f6..62a62db7467 100644 --- a/packages/@react-aria/interactions/src/useFocusVisible.ts +++ b/packages/@react-aria/interactions/src/useFocusVisible.ts @@ -231,6 +231,8 @@ export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyA fn(isFocusVisible()); }; changeHandlers.add(handler); - return () => changeHandlers.delete(handler); + return () => { + changeHandlers.delete(handler); + }; }, deps); } diff --git a/packages/@react-aria/label/docs/useField.mdx b/packages/@react-aria/label/docs/useField.mdx index 1d84262a65e..f3eb832a3af 100644 --- a/packages/@react-aria/label/docs/useField.mdx +++ b/packages/@react-aria/label/docs/useField.mdx @@ -1,17 +1,17 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/label'; -import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; +import {FunctionAPI, HeaderInfo, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/label/package.json'; ```tsx import @@ -26,7 +26,7 @@ after_version: 3.1.3 # useField -

{docs.exports.useField.description}

+{docs.exports.useField.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/label'; -import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; +import {FunctionAPI, HeaderInfo, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/label/package.json'; ```tsx import @@ -25,7 +25,7 @@ keywords: [label, form, aria] # useLabel -

{docs.exports.useLabel.description}

+{docs.exports.useLabel.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/link'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/link/package.json'; ```jsx import @@ -25,7 +26,7 @@ keywords: [link, anchor, aria] # useLink -

{docs.exports.useLink.description}

+{docs.exports.useLink.description} Enter key. +keyboard users may activate links using the Enter key. `useLink` returns props to be spread onto the link element: diff --git a/packages/@react-aria/listbox/docs/useListBox.mdx b/packages/@react-aria/listbox/docs/useListBox.mdx index e2018566a18..7b3e161cebb 100644 --- a/packages/@react-aria/listbox/docs/useListBox.mdx +++ b/packages/@react-aria/listbox/docs/useListBox.mdx @@ -1,11 +1,11 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -14,7 +14,7 @@ import docs from 'docs:@react-aria/listbox'; import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts'; import selectionDocs from 'docs:@react-stately/selection'; import statelyDocs from 'docs:@react-stately/list'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/listbox/package.json'; import Anatomy from './anatomy.svg'; @@ -29,7 +29,7 @@ keywords: [listbox, aria] # useListBox -

{docs.exports.useListBox.description}

+{docs.exports.useListBox.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -14,7 +14,8 @@ import docs from 'docs:@react-aria/menu'; import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts'; import selectionDocs from 'docs:@react-stately/selection'; import treeDocs from 'docs:@react-stately/tree'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/menu/package.json'; import Anatomy from './menu-anatomy.svg'; @@ -29,7 +30,7 @@ keywords: [menu, mutli-select menu, aria] # useMenu -

{docs.exports.useMenu.description}

+{docs.exports.useMenu.description}
Copy
Copy the selected text
- ⌘C + ⌘C
Cut
Cut the selected text
- ⌘X + ⌘X
Paste
Paste the copied text
- ⌘V + ⌘V ``` diff --git a/packages/@react-aria/menu/docs/useMenuTrigger.mdx b/packages/@react-aria/menu/docs/useMenuTrigger.mdx index 6f8507dce55..adaece47973 100644 --- a/packages/@react-aria/menu/docs/useMenuTrigger.mdx +++ b/packages/@react-aria/menu/docs/useMenuTrigger.mdx @@ -1,11 +1,11 @@ - +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; @@ -16,7 +16,7 @@ import focusDocs from 'docs:@react-aria/focus'; import menuDocs from 'docs:@react-aria/menu'; import buttonDocs from 'docs:@react-aria/button'; import statelyDocs from 'docs:@react-stately/menu'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/menu/package.json'; import Anatomy from './menu-trigger-anatomy.svg'; @@ -27,7 +27,7 @@ keywords: [menu trigger, mutli-select menu, aria] # useMenuTrigger -

{docs.exports.useMenuTrigger.description}

+{docs.exports.useMenuTrigger.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/meter'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/meter/package.json'; import Anatomy from './anatomy.svg'; @@ -26,7 +26,7 @@ keywords: [meter, progressbar, aria] # useMeter -

{docs.exports.useMeter.description}

+{docs.exports.useMeter.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/numberfield'; import statelyDocs from 'docs:@react-stately/numberfield'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/numberfield/package.json'; import Anatomy from './anatomy.svg'; @@ -27,7 +27,7 @@ keywords: [number field, input, form, aria] # useNumberField -

{docs.exports.useNumberField.description}

+{docs.exports.useNumberField.description} +governing permissions and limitations under the License. */} import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-aria/overlays'; -import {HeaderInfo, PropTable} from '@react-spectrum/docs'; +import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; +import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/overlays/package.json'; --- @@ -21,7 +22,7 @@ keywords: [dialog, modal, tray, popover, aria] # DismissButton -

{docs.exports.DismissButton.description}

+{docs.exports.DismissButton.description}