diff --git a/.eslintrc.json b/.eslintrc.json index 50373dc6e95..69c26f940ab 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -65,17 +65,23 @@ } ], "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": "error", "curly": "error", "jest/expect-expect": "off", "jest/no-export": "warn", - "jsdoc/require-jsdoc": "off", "jsdoc/check-tag-names": "off", + "jsdoc/require-jsdoc": "off", "lines-between-class-members": ["error", "always"], - "no-multiple-empty-lines": ["error", { "max": 1 }], - "no-unneeded-ternary": "error", "no-eval": "error", "no-implied-eval": "error", + "no-multiple-empty-lines": [ + "error", + { + "max": 1 + } + ], "no-new-func": "error", + "no-unneeded-ternary": "error", "react/forbid-component-props": [ "warn", { @@ -129,6 +135,10 @@ "settings": { "react": { "pragma": "h" + }, + "jsdoc": { + "ignoreInternal": true, + "ignorePrivate": true } } } diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml index 5e6e5b371b0..f64c8e4d9be 100644 --- a/.github/ISSUE_TEMPLATE/accessibility.yml +++ b/.github/ISSUE_TEMPLATE/accessibility.yml @@ -51,7 +51,6 @@ body: attributes: label: Reproduction Version description: The latest version that reproduces the issue. - placeholder: 1.0.0-beta.99 validations: required: true - type: input @@ -77,7 +76,6 @@ body: attributes: label: Regression? description: Please provide the last working version if the issue is a regression. - placeholder: 1.0.4 validations: required: false - type: dropdown diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 3eb36947da9..c41f08f3948 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -45,7 +45,6 @@ body: attributes: label: Reproduction Version description: The latest version that reproduces the issue. - placeholder: 1.0.4 validations: required: true - type: textarea @@ -64,9 +63,21 @@ body: attributes: label: Regression? description: Please provide the last working version if the issue is a regression. - placeholder: 1.0.0-beta.99 validations: required: false + - type: dropdown + id: priority-impact + validations: + required: true + attributes: + label: Priority impact + multiple: false + description: What is the impact to you, your team, or organization? Use discretion and only select "need" or "emergency" priorities for high user impact and quality issues. For instance, would someone notice, in a bad way, if this issue were present in the release? + options: + - p3 - not time sensitive + - p2 - want for current milestone + - p1 - need for current milestone + - p0 - emergency - type: textarea id: impact attributes: diff --git a/.github/workflows/add-bug-priority-label.yml b/.github/workflows/add-bug-priority-label.yml new file mode 100644 index 00000000000..3b221275270 --- /dev/null +++ b/.github/workflows/add-bug-priority-label.yml @@ -0,0 +1,66 @@ +name: Add Bug Priority Label +on: + issues: + types: [opened, edited] +jobs: + label: + runs-on: ubuntu-latest + steps: + - uses: actions/github-script@v6 + with: + script: | + const { + repo: { owner, repo }, + payload: { + action, + issue: { body, labels: currentLabels, number: issue_number }, + }, + } = context; + + if (!body) { + console.log("could not determine the issue body"); + return; + } + + const bugPriorityRegex = new RegExp( + action === "edited" + ? // the way GitHub parses the issue body into plaintext + // requires this exact format for edits + "(?<=### Priority impact\r\n\r\n).+" + : // otherwise it depends on the submitter's OS + "(?<=### Priority impact[\r\n|\r|\n]{2}).+$", + "m" + ); + + const bugPriorityRegexMatch = body.match(bugPriorityRegex); + + const bugPriority = ( + bugPriorityRegexMatch && bugPriorityRegexMatch[0] ? bugPriorityRegexMatch[0] : "" + ).trim(); + + if (bugPriority && bugPriority !== "N/A") { + /** Creates a label if it does not exist */ + try { + await github.rest.issues.getLabel({ + owner, + repo, + name: bugPriority, + }); + } catch (error) { + await github.rest.issues.createLabel({ + owner, + repo, + name: bugPriority, + color: "bb7fe0", + description: `User set priority status of ${bugPriority}`, + }); + } + + /** add new bug priority label */ + await github.rest.issues.addLabels({ + issue_number, + owner, + repo, + labels: [bugPriority], + }); + } diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml new file mode 100644 index 00000000000..5a5f126bea9 --- /dev/null +++ b/.github/workflows/sync_to_airtable.yml @@ -0,0 +1,187 @@ +name: Sync to Airtable + +on: + issues: + types: [assigned, closed, demilestoned, edited, labeled, milestoned, opened, reopened, unassigned, unlabeled] + +jobs: + issue_assigned: + runs-on: ubuntu-latest + if: github.event.action == 'assigned' || github.event.action == 'unassigned' + steps: + - name: Set Data + id: set-assigned-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, repository } = context.payload; + const body = JSON.stringify({ + action, + data: JSON.stringify({ assignees: issue.assignees }), + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); + issue_closed: + runs-on: ubuntu-latest + if: github.event.action == 'closed' + steps: + - name: Set Data + id: set-closed-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, repository } = context.payload; + const body = JSON.stringify({ + action, + data: issue.closed_at, + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); + issue_milestoned: + runs-on: ubuntu-latest + if: github.event.action == 'demilestoned' || github.event.action == 'milestoned' + steps: + - name: Set Data + id: set-demilestoned-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, repository } = context.payload; + const body = JSON.stringify({ + action, + data: JSON.stringify(issue.milestone || null), + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); + issue_edited: + runs-on: ubuntu-latest + if: github.event.action == 'edited' + steps: + - name: Set Data + id: set-edited-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, changes, repository } = context.payload; + const body = JSON.stringify({ + action, + changes: JSON.stringify(changes || null), + data: JSON.stringify(Object.keys(changes).reduce((acc, key) => { + acc[key] = issue[key] + return acc; + }, {})), + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: changes['title'] + ? changes['title'].from + : issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); + issue_labeled: + runs-on: ubuntu-latest + if: github.event.action == 'labeled' || github.event.action == 'unlabeled' + steps: + - name: Set Data + id: set-labeled-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, repository } = context.payload; + const body = JSON.stringify({ + action, + data: JSON.stringify({labels: issue.labels}), + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); + issue_opened: + runs-on: ubuntu-latest + if: github.event.action == 'opened' || github.event.action == 'reopened' + steps: + - name: Set Data + id: set-opened-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + WEBHOOK: ${{ secrets.AIRTABLE_WEBHOOK }} + with: + script: | + const { action, issue, repository } = context.payload; + const body = JSON.stringify({ + action, + data: JSON.stringify(issue), + owner: repository.owner.login, + repo: repository.name, + number: issue.number.toString(), + secret: process.env.SECRET, + title: issue.title, + }); + return fetch(process.env.WEBHOOK, { + body, + headers: { + "Content-Type": "application/json" + }, + method: "POST" + }); diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 55a7a56b4d5..6ab4a6a6320 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,7 +1,6 @@ { "*.{json,html,yml}": ["prettier --write"], - "*.js": ["eslint --ext .js --fix", "prettier --write"], "*.scss": ["stylelint --fix", "prettier --write"], - "*/!(assets)/*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"], + "*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"], "*.md": ["markdownlint --fix --disable MD024 MD013 MD041 MD033", "prettier --write"] } diff --git a/CHANGELOG.md b/CHANGELOG.md index 77b9dd71c91..f3b22d66de4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,44 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) +## [v1.0.8](https://github.com/Esri/calcite-components/compare/v1.0.7...v1.0.8) (2023-03-02) + +### Bug Fixes + +- **filter, list:** filter properly on initialization ([#6551](https://github.com/Esri/calcite-components/issues/6551)) ([b7782aa](https://github.com/Esri/calcite-components/commit/b7782aa79fc05fa9f217b08185f2fe35e36ef9f1)), closes [#6523](https://github.com/Esri/calcite-components/issues/6523) + +* apply offsetParent polyfill for Chrome 109+ ([#6520](https://github.com/Esri/calcite-components/issues/6520)) ([ba8c068](https://github.com/Esri/calcite-components/commit/ba8c0688dd92a99e147f0e6434a969fef10ab3e3)), closes [#6300](https://github.com/Esri/calcite-components/issues/6300) +* **tree:** restore wrapping in tree-item text content ([#6518](https://github.com/Esri/calcite-components/issues/6518)) ([7b95194](https://github.com/Esri/calcite-components/commit/7b951944ee028c2d5f372de8b04d10e69a2ef0c3)), closes [#6512](https://github.com/Esri/calcite-components/issues/6512) + +- **tree:** prevent tree-item content from being clipped ([#6519](https://github.com/Esri/calcite-components/issues/6519)) ([8501b23](https://github.com/Esri/calcite-components/commit/8501b2333196240fa3549117447ebac3f7f62e0d)), closes [#6514](https://github.com/Esri/calcite-components/issues/6514) + +* **select, slider, combobox:** display label in screen reader instructions. ([#6500](https://github.com/Esri/calcite-components/issues/6500)) ([3a7f112](https://github.com/Esri/calcite-components/commit/3a7f11238d52e7b5cec1cd2dd597d0184d7e0ce3)), closes [#5627](https://github.com/Esri/calcite-components/issues/5627) +* **value-list:** add back instructions for screen reader when drag handle is activated ([#6402](https://github.com/Esri/calcite-components/issues/6402)) ([b822f25](https://github.com/Esri/calcite-components/commit/b822f25a88519c8a4ddb1311006a88ac1e7b5a1b)), closes [#6401](https://github.com/Esri/calcite-components/issues/6401) [#5739](https://github.com/Esri/calcite-components/issues/5739) + +- **slider:** slider handle aligns with track when font size changes ([#5372](https://github.com/Esri/calcite-components/issues/5372)) ([780df6c](https://github.com/Esri/calcite-components/commit/780df6c78b9dd111bec177189421372c3fe21285)), closes [#4721](https://github.com/Esri/calcite-components/issues/4721) + +## [v1.0.7](https://github.com/Esri/calcite-components/compare/v1.0.6...v1.0.7) (2023-02-15) + +### Reverts + +- **focus-trap:** prevent host from receiving initial focus ([#6483](https://github.com/Esri/calcite-components/pull/6483)) ([68f2c0e](https://github.com/Esri/calcite-components/commit/68f2c0e54339fb4be37172a69b17bbcde60b9613)) + +## [v1.0.6](https://github.com/Esri/calcite-components/compare/v1.0.5...v1.0.6) (2023-02-14) + +### Bug Fixes + +- **focus-trap:** prevent host from receiving initial focus ([#6479](https://github.com/Esri/calcite-components/issues/6479)) ([764609d](https://github.com/Esri/calcite-components/commit/764609de7b8c96aa331e364ca790eefdb44dd1ab)), closes [#6454](https://github.com/Esri/calcite-components/issues/6454) [/github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts#L33-L35](https://github.com/Esri//github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts/issues/L33-L35) +- **tree-item:** preserves consistent height with or w/t actions-end ([#6403](https://github.com/Esri/calcite-components/issues/6403)) ([728f42b](https://github.com/Esri/calcite-components/commit/728f42b4ad219f5c947cfd5226db7959c3cfd9c1)), closes [#6361](https://github.com/Esri/calcite-components/issues/6361) [#3127](https://github.com/Esri/calcite-components/issues/3127) +- **vite:** getting the dist build to work correctly with vite again ([#6452](https://github.com/Esri/calcite-components/issues/6452)) ([cc44984](https://github.com/Esri/calcite-components/commit/cc44984966d21a8537e03daa0fe66d90bff38385)), closes [#6419](https://github.com/Esri/calcite-components/issues/6419) + +## [1.0.5](https://github.com/Esri/calcite-components/compare/v1.0.4...v1.0.5) (2023-02-09) + +### Bug Fixes + +- **input, input-number, input-text:** emit change value when clearing programmatically-set value ([#6431](https://github.com/Esri/calcite-components/issues/6431)) ([1802dc3](https://github.com/Esri/calcite-components/commit/1802dc3898358159da7304a940c1c530d8e98509)), closes [#4232](https://github.com/Esri/calcite-components/issues/4232) +- **modal:** no longer loses focus trap after clicking inside the component. ([#6434](https://github.com/Esri/calcite-components/issues/6434)) ([df144dc](https://github.com/Esri/calcite-components/commit/df144dc30e66d7e11fda326f289c6b8c931c34f8)), closes [#6281](https://github.com/Esri/calcite-components/issues/6281) +- **tooltip:** prevent closing of Esc-key-closing parent components when dismissing a tooltip with Esc ([#6343](https://github.com/Esri/calcite-components/issues/6343)) ([b4cbf54](https://github.com/Esri/calcite-components/commit/b4cbf544f876a5212d234368bbd296ed43433515)), closes [#6292](https://github.com/Esri/calcite-components/issues/6292) + ## [v1.0.4](https://github.com/Esri/calcite-components/compare/v1.0.3...v1.0.4) (2023-02-07) ### Bug Fixes diff --git a/conventions/README.md b/conventions/README.md index 26c0421d728..0a20a7eaaab 100644 --- a/conventions/README.md +++ b/conventions/README.md @@ -153,6 +153,20 @@ It is recommended to reflect properties that fit the following criteria: Doing so will give developers more flexibility when querying the DOM. This is important in framework environments where we can't safely assume components will have their attributes set vs properties. +### `ref` usage + +Due to a [bug in Stencil](https://github.com/ionic-team/stencil/issues/4074), `ref` should be set as the last property in JSX to ensure the node's attributes/properties are up to date. + +```jsx +
+``` + ## Focus support Components with focusable content, must implement the following pattern: diff --git a/package-lock.json b/package-lock.json index a0cc1e1e591..bcfe8ca8b24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,19 @@ { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.8", "license": "SEE LICENSE IN copyright.txt", "dependencies": { - "@floating-ui/dom": "1.1.0", + "@floating-ui/dom": "1.2.1", "@stencil/core": "2.20.0", "@types/color": "3.0.3", "color": "4.2.3", - "focus-trap": "7.2.0", + "focus-trap": "7.3.1", "form-request-submit-polyfill": "2.0.0", "lodash-es": "4.17.21", "sortablejs": "1.15.0" @@ -26,9 +26,9 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil/eslint-plugin": "0.4.0", "@stencil/postcss": "2.1.0", - "@stencil/sass": "2.0.1", + "@stencil/sass": "2.0.3", "@stencil/state-tunnel": "^1.0.1", - "@storybook/addon-a11y": "6.5.15", + "@storybook/addon-a11y": "6.5.16", "@storybook/addon-docs": "6.5.15", "@storybook/addon-interactions": "6.5.15", "@storybook/addon-knobs": "6.4.0", @@ -59,14 +59,14 @@ "conventional-changelog-cli": "2.2.2", "cpy-cli": "^4.0.0", "dedent": "0.7.0", - "eslint": "8.30.0", + "eslint": "8.35.0", "eslint-config-prettier": "8.6.0", - "eslint-plugin-jest": "27.1.7", + "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsdoc": "39.6.4", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", "eslint-plugin-unicorn": "45.0.2", - "gh-release": "7.0.1", + "gh-release": "7.0.2", "git-semver-tags": "4.1.1", "husky": "8.0.3", "jest": "27.4.5", @@ -88,7 +88,7 @@ "storybook-rtl-addon": "0.3.3", "stylelint": "14.16.0", "stylelint-config-recommended-scss": "8.0.0", - "stylelint-use-logical-spec": "4.1.0", + "stylelint-use-logical-spec": "5.0.0", "tailwindcss": "3.2.4", "ts-jest": "27.1.5", "ts-node": "10.9.1", @@ -2323,9 +2323,9 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.0.tgz", - "integrity": "sha512-7yfvXy6MWLgWSFsLhz5yH3iQ52St8cdUY6FoGieKkRDVxuxmrNuUetIuu6cmjNWwniUHiWXjxCr5tTXDrbYS5A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz", + "integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==", "dev": true, "dependencies": { "ajv": "^6.12.4", @@ -2352,9 +2352,9 @@ "dev": true }, "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.19.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz", - "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==", + "version": "13.20.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", + "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -2390,6 +2390,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@eslint/js": { + "version": "8.35.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz", + "integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, "node_modules/@esri/calcite-base": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@esri/calcite-base/-/calcite-base-1.2.0.tgz", @@ -2429,16 +2438,16 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz", - "integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz", + "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==" }, "node_modules/@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz", + "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==", "dependencies": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.2.1" } }, "node_modules/@gar/promisify": { @@ -4202,12 +4211,12 @@ } }, "node_modules/@stencil/sass": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.1.tgz", - "integrity": "sha512-66ZsqBIcK7B8Awjh7RfMVC6Q1OQPlQDNHqqBfMccH9iZiuUunDL9rzrIZAoUWHjjrxWocMMQR5YieTQSreC9DQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz", + "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==", "dev": true, "peerDependencies": { - "@stencil/core": ">=2.0.0" + "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0" } }, "node_modules/@stencil/state-tunnel": { @@ -4217,19 +4226,19 @@ "dev": true }, "node_modules/@storybook/addon-a11y": { - "version": "6.5.15", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.15.tgz", - "integrity": "sha512-4IgsCU7mrfooyGSgvyQdkZVu2iGJZqZ+2GDDIzzeIs1yXvuRy6QiHYNzesSrgeL52ykDXaPGuzKu2pcMKfDQHA==", + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz", + "integrity": "sha512-/e9s34o+TmEhy+Q3/YzbRJ5AJ/Sy0gjZXlvsCrcRpiQLdt5JRbN8s+Lbn/FWxy8U1Tb1wlLYlqjJ+fYi5RrS3A==", "dev": true, "dependencies": { - "@storybook/addons": "6.5.15", - "@storybook/api": "6.5.15", - "@storybook/channels": "6.5.15", - "@storybook/client-logger": "6.5.15", - "@storybook/components": "6.5.15", - "@storybook/core-events": "6.5.15", + "@storybook/addons": "6.5.16", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/components": "6.5.16", + "@storybook/core-events": "6.5.16", "@storybook/csf": "0.0.2--canary.4566f4d.1", - "@storybook/theming": "6.5.15", + "@storybook/theming": "6.5.16", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -4256,6 +4265,173 @@ } } }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/addons": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz", + "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==", + "dev": true, + "dependencies": { + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/theming": "6.5.16", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/api": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz", + "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==", + "dev": true, + "dependencies": { + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/channels": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz", + "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/client-logger": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz", + "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "global": "^4.4.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/components": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz", + "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/core-events": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz", + "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/router": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz", + "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/theming": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz", + "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@storybook/addon-docs": { "version": "6.5.15", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.15.tgz", @@ -6680,12 +6856,31 @@ "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true, + "peer": true + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.0.27", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz", + "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==", + "dev": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -6714,6 +6909,13 @@ "@types/node": "*" } }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true, + "peer": true + }, "node_modules/@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -14467,12 +14669,13 @@ } }, "node_modules/eslint": { - "version": "8.30.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.30.0.tgz", - "integrity": "sha512-MGADB39QqYuzEGov+F/qb18r4i7DohCDOfatHaxI2iGlPuC65bwG2gxgO+7DkyL38dRFaRH7RaRAgU6JKL9rMQ==", + "version": "8.35.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz", + "integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==", "dev": true, "dependencies": { - "@eslint/eslintrc": "^1.4.0", + "@eslint/eslintrc": "^2.0.0", + "@eslint/js": "8.35.0", "@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -14486,7 +14689,7 @@ "eslint-utils": "^3.0.0", "eslint-visitor-keys": "^3.3.0", "espree": "^9.4.0", - "esquery": "^1.4.0", + "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^6.0.1", @@ -14535,9 +14738,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "27.1.7", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.1.7.tgz", - "integrity": "sha512-0QVzf+og4YI1Qr3UoprkqqhezAZjFffdi62b0IurkCXMqPtRW84/UT4CKsYT80h/D82LA9avjO/80Ou1LdgbaQ==", + "version": "27.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz", + "integrity": "sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==", "dev": true, "dependencies": { "@typescript-eslint/utils": "^5.10.0" @@ -15035,9 +15238,9 @@ } }, "node_modules/espree/node_modules/acorn": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", - "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", + "version": "8.8.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", + "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -15069,9 +15272,9 @@ } }, "node_modules/esquery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", - "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz", + "integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==", "dev": true, "dependencies": { "estraverse": "^5.1.0" @@ -16035,11 +16238,11 @@ } }, "node_modules/focus-trap": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.2.0.tgz", - "integrity": "sha512-v4wY6HDDYvzkBy4735kW5BUEuw6Yz9ABqMYLuTNbzAFPcBOGiGHwwcNVMvUz4G0kgSYh13wa/7TG3XwTeT4O/A==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.3.1.tgz", + "integrity": "sha512-bX/u4FJ+F0Pp6b/8Q9W8Br/JaLJ7rrhOJAzai9JU8bh4BPdOjEATy4pxHcbBBxFjPN4d1oHy7/KqknEdOetm9w==", "dependencies": { - "tabbable": "^6.0.1" + "tabbable": "^6.1.1" } }, "node_modules/for-each": { @@ -16620,9 +16823,9 @@ } }, "node_modules/gh-release": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.1.tgz", - "integrity": "sha512-yWtXXBCn9V3v4r+cT1LOfBlkkGj7RnsqbwiXj7GSwqqTkxXFiQIEA2WDfQG14Nu/Y3dEklUncZ2W8MUu41Zong==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.2.tgz", + "integrity": "sha512-5gVe+BHFa9OtsjOa72hFRBsfsCIIMYbba35wtEJIkAzZjPXQkUmpLhyrIYYdouh0JRTNNwZ4sDD7eiUhE8T/IQ==", "dev": true, "dependencies": { "@octokit/rest": "^19.0.5", @@ -17812,9 +18015,9 @@ } }, "node_modules/http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", + "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", "dev": true }, "node_modules/http-errors": { @@ -29331,9 +29534,9 @@ } }, "node_modules/stylelint-use-logical-spec": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", - "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz", + "integrity": "sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==", "dev": true, "engines": { "node": ">=8.0.0" @@ -29564,9 +29767,9 @@ "dev": true }, "node_modules/tabbable": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz", - "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==" + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz", + "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==" }, "node_modules/table": { "version": "6.8.1", @@ -34336,9 +34539,9 @@ } }, "@eslint/eslintrc": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.0.tgz", - "integrity": "sha512-7yfvXy6MWLgWSFsLhz5yH3iQ52St8cdUY6FoGieKkRDVxuxmrNuUetIuu6cmjNWwniUHiWXjxCr5tTXDrbYS5A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz", + "integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==", "dev": true, "requires": { "ajv": "^6.12.4", @@ -34359,9 +34562,9 @@ "dev": true }, "globals": { - "version": "13.19.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz", - "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==", + "version": "13.20.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", + "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", "dev": true, "requires": { "type-fest": "^0.20.2" @@ -34384,6 +34587,12 @@ } } }, + "@eslint/js": { + "version": "8.35.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz", + "integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==", + "dev": true + }, "@esri/calcite-base": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@esri/calcite-base/-/calcite-base-1.2.0.tgz", @@ -34413,16 +34622,16 @@ } }, "@floating-ui/core": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz", - "integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz", + "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==" }, "@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz", + "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==", "requires": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.2.1" } }, "@gar/promisify": { @@ -35841,9 +36050,9 @@ } }, "@stencil/sass": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.1.tgz", - "integrity": "sha512-66ZsqBIcK7B8Awjh7RfMVC6Q1OQPlQDNHqqBfMccH9iZiuUunDL9rzrIZAoUWHjjrxWocMMQR5YieTQSreC9DQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz", + "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==", "dev": true, "requires": {} }, @@ -35854,19 +36063,19 @@ "dev": true }, "@storybook/addon-a11y": { - "version": "6.5.15", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.15.tgz", - "integrity": "sha512-4IgsCU7mrfooyGSgvyQdkZVu2iGJZqZ+2GDDIzzeIs1yXvuRy6QiHYNzesSrgeL52ykDXaPGuzKu2pcMKfDQHA==", + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz", + "integrity": "sha512-/e9s34o+TmEhy+Q3/YzbRJ5AJ/Sy0gjZXlvsCrcRpiQLdt5JRbN8s+Lbn/FWxy8U1Tb1wlLYlqjJ+fYi5RrS3A==", "dev": true, "requires": { - "@storybook/addons": "6.5.15", - "@storybook/api": "6.5.15", - "@storybook/channels": "6.5.15", - "@storybook/client-logger": "6.5.15", - "@storybook/components": "6.5.15", - "@storybook/core-events": "6.5.15", + "@storybook/addons": "6.5.16", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/components": "6.5.16", + "@storybook/core-events": "6.5.16", "@storybook/csf": "0.0.2--canary.4566f4d.1", - "@storybook/theming": "6.5.15", + "@storybook/theming": "6.5.16", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -35875,6 +36084,123 @@ "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" + }, + "dependencies": { + "@storybook/addons": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz", + "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==", + "dev": true, + "requires": { + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/theming": "6.5.16", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz", + "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==", + "dev": true, + "requires": { + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channels": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz", + "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz", + "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz", + "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz", + "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz", + "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/theming": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz", + "integrity": "sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7" + } + } } }, "@storybook/addon-docs": { @@ -37720,12 +38046,31 @@ "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true, + "peer": true + }, "@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "dev": true }, + "@types/react": { + "version": "18.0.27", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz", + "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==", + "dev": true, + "peer": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -37754,6 +38099,13 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true, + "peer": true + }, "@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -43791,12 +44143,13 @@ } }, "eslint": { - "version": "8.30.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.30.0.tgz", - "integrity": "sha512-MGADB39QqYuzEGov+F/qb18r4i7DohCDOfatHaxI2iGlPuC65bwG2gxgO+7DkyL38dRFaRH7RaRAgU6JKL9rMQ==", + "version": "8.35.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz", + "integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==", "dev": true, "requires": { - "@eslint/eslintrc": "^1.4.0", + "@eslint/eslintrc": "^2.0.0", + "@eslint/js": "8.35.0", "@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -43810,7 +44163,7 @@ "eslint-utils": "^3.0.0", "eslint-visitor-keys": "^3.3.0", "espree": "^9.4.0", - "esquery": "^1.4.0", + "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^6.0.1", @@ -43987,9 +44340,9 @@ "requires": {} }, "eslint-plugin-jest": { - "version": "27.1.7", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.1.7.tgz", - "integrity": "sha512-0QVzf+og4YI1Qr3UoprkqqhezAZjFffdi62b0IurkCXMqPtRW84/UT4CKsYT80h/D82LA9avjO/80Ou1LdgbaQ==", + "version": "27.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz", + "integrity": "sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==", "dev": true, "requires": { "@typescript-eslint/utils": "^5.10.0" @@ -44184,9 +44537,9 @@ }, "dependencies": { "acorn": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", - "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", + "version": "8.8.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", + "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "dev": true }, "eslint-visitor-keys": { @@ -44204,9 +44557,9 @@ "dev": true }, "esquery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", - "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz", + "integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==", "dev": true, "requires": { "estraverse": "^5.1.0" @@ -45004,11 +45357,11 @@ } }, "focus-trap": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.2.0.tgz", - "integrity": "sha512-v4wY6HDDYvzkBy4735kW5BUEuw6Yz9ABqMYLuTNbzAFPcBOGiGHwwcNVMvUz4G0kgSYh13wa/7TG3XwTeT4O/A==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.3.1.tgz", + "integrity": "sha512-bX/u4FJ+F0Pp6b/8Q9W8Br/JaLJ7rrhOJAzai9JU8bh4BPdOjEATy4pxHcbBBxFjPN4d1oHy7/KqknEdOetm9w==", "requires": { - "tabbable": "^6.0.1" + "tabbable": "^6.1.1" } }, "for-each": { @@ -45437,9 +45790,9 @@ "dev": true }, "gh-release": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.1.tgz", - "integrity": "sha512-yWtXXBCn9V3v4r+cT1LOfBlkkGj7RnsqbwiXj7GSwqqTkxXFiQIEA2WDfQG14Nu/Y3dEklUncZ2W8MUu41Zong==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.2.tgz", + "integrity": "sha512-5gVe+BHFa9OtsjOa72hFRBsfsCIIMYbba35wtEJIkAzZjPXQkUmpLhyrIYYdouh0JRTNNwZ4sDD7eiUhE8T/IQ==", "dev": true, "requires": { "@octokit/rest": "^19.0.5", @@ -46363,9 +46716,9 @@ } }, "http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", + "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", "dev": true }, "http-errors": { @@ -55418,9 +55771,9 @@ } }, "stylelint-use-logical-spec": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", - "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz", + "integrity": "sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==", "dev": true, "requires": {} }, @@ -55497,9 +55850,9 @@ "dev": true }, "tabbable": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz", - "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==" + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz", + "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==" }, "table": { "version": "6.8.1", diff --git a/package.json b/package.json index 23f54fe3fc9..8e457f5c394 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.8", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -31,7 +31,7 @@ "lint:md": "markdownlint \"**/*.md\" --fix --ignore node_modules --disable MD024 MD013 MD041 MD033 && prettier --write \"**/*.md\" >/dev/null", "lint:yml": "prettier --write \"**/*.yml\" >/dev/null", "lint:scss": "stylelint --fix \"src/**/*.scss\" && prettier --write \"**/*.scss\" >/dev/null", - "lint:ts": "eslint --ext .js,.ts,.tsx --fix . && prettier --write \"**/*.{t,j}s?(x)\" >/dev/null", + "lint:ts": "eslint --ext .ts,.tsx --fix . && prettier --write \"**/*.ts?(x)\" >/dev/null", "posttest": "npm run test:prerender", "prepare": "husky install", "prepublishOnly": "ts-node --esm ./support/prepublish.ts", @@ -44,7 +44,7 @@ "test:existing-build": "stencil test --no-docs --no-build --spec --e2e", "test:prerender": "stencil build --no-docs --prerender", "test:watch": "npm run test -- -- --watchAll", - "util:build-docs": "npm run util:copy-icons && stencil build --docs --config stencil.storybook.config.ts", + "util:build-docs": "npm run util:prep-build-reqs && stencil build --docs --config stencil.storybook.config.ts", "util:clean-tested-build": "npm ci && npm test && npm run build", "util:copy-icons": "cpy \"./node_modules/@esri/calcite-ui-icons/js/*.json\" \"./src/components/icon/assets/icon/\" --flat", "util:deploy-next": "npm run util:prep-next && npm run util:publish-next", @@ -70,11 +70,11 @@ "url": "git+https://github.com/Esri/calcite-components.git" }, "dependencies": { - "@floating-ui/dom": "1.1.0", + "@floating-ui/dom": "1.2.1", "@stencil/core": "2.20.0", "@types/color": "3.0.3", "color": "4.2.3", - "focus-trap": "7.2.0", + "focus-trap": "7.3.1", "form-request-submit-polyfill": "2.0.0", "lodash-es": "4.17.21", "sortablejs": "1.15.0" @@ -87,9 +87,9 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil/eslint-plugin": "0.4.0", "@stencil/postcss": "2.1.0", - "@stencil/sass": "2.0.1", + "@stencil/sass": "2.0.3", "@stencil/state-tunnel": "^1.0.1", - "@storybook/addon-a11y": "6.5.15", + "@storybook/addon-a11y": "6.5.16", "@storybook/addon-docs": "6.5.15", "@storybook/addon-interactions": "6.5.15", "@storybook/addon-knobs": "6.4.0", @@ -120,14 +120,14 @@ "conventional-changelog-cli": "2.2.2", "cpy-cli": "^4.0.0", "dedent": "0.7.0", - "eslint": "8.30.0", + "eslint": "8.35.0", "eslint-config-prettier": "8.6.0", - "eslint-plugin-jest": "27.1.7", + "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsdoc": "39.6.4", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", "eslint-plugin-unicorn": "45.0.2", - "gh-release": "7.0.1", + "gh-release": "7.0.2", "git-semver-tags": "4.1.1", "husky": "8.0.3", "jest": "27.4.5", @@ -149,7 +149,7 @@ "storybook-rtl-addon": "0.3.3", "stylelint": "14.16.0", "stylelint-config-recommended-scss": "8.0.0", - "stylelint-use-logical-spec": "4.1.0", + "stylelint-use-logical-spec": "5.0.0", "tailwindcss": "3.2.4", "ts-jest": "27.1.5", "ts-node": "10.9.1", diff --git a/readme.md b/readme.md index fbe5f326949..69d09977e64 100644 --- a/readme.md +++ b/readme.md @@ -13,11 +13,11 @@ Calcite Components, part of Esri's Calcite Design System, is a rich library of f The most common approach for loading Calcite Components is to use the version hosted on the CDN. The components can be loaded via ` + ``` diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index a82cb63dcbf..83401c7b219 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -330,10 +330,11 @@ export class ActionBar intlCollapse={messages.collapse} intlExpand={messages.expand} position={position} - ref={this.setExpandToggleRef} scale={scale} toggle={toggleExpand} tooltip={tooltip} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setExpandToggleRef} /> ) : null; diff --git a/src/components/action-menu/action-menu.tsx b/src/components/action-menu/action-menu.tsx index a6ce7bc2258..b59cedff439 100755 --- a/src/components/action-menu/action-menu.tsx +++ b/src/components/action-menu/action-menu.tsx @@ -270,10 +270,11 @@ export class ActionMenu implements LoadableComponent { ); diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 8f132fda0ee..c9e5a183472 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -1,4 +1,4 @@ -import { boolean, select, text } from "@storybook/addon-knobs"; +import { boolean, select } from "@storybook/addon-knobs"; import { Attributes, Attribute, diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index ca4a03e9c42..e4c0466e9ed 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -223,10 +223,11 @@ export class ActionPad intlCollapse={messages.collapse} intlExpand={messages.expand} position={position} - ref={this.setExpandToggleRef} scale={scale} toggle={toggleExpand} tooltip={tooltip} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setExpandToggleRef} /> ) : null; diff --git a/src/components/action/action.scss b/src/components/action/action.scss index 1db50bb5535..a3f5ce55598 100755 --- a/src/components/action/action.scss +++ b/src/components/action/action.scss @@ -70,6 +70,7 @@ .text-container--visible { @apply w-auto flex-auto opacity-100; + margin-inline-end: theme("spacing.4"); } } @@ -213,9 +214,6 @@ &::after { inset-block-end: auto; } - .text-container--visible { - margin-inline-end: theme("spacing.4"); - } } .button:hover::after, .button:focus::after { diff --git a/src/components/action/action.stories.ts b/src/components/action/action.stories.ts index 679bc7bfa7f..b4b951e2c5f 100644 --- a/src/components/action/action.stories.ts +++ b/src/components/action/action.stories.ts @@ -198,6 +198,10 @@ export const alignmentStartAndLargeScaleAndTextOverflow_TestOnly = (): string => )}
`; +export const indicatorTextEnabled_TestOnly = (): string => html` + +`; + export const arabicLocale_TestOnly = (): string => html` (this.buttonEl = buttonEl)} > {this.renderIconContainer()} diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index 072c3687562..4c15b5c3114 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -216,8 +216,9 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen aria-label={this.messages.close} class="alert-close" onClick={this.closeAlert} - ref={(el) => (this.closeButton = el)} type="button" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.closeButton = el)} > @@ -268,6 +269,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen }} onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null} + // eslint-disable-next-line react/jsx-sort-props ref={this.setTransitionEl} > {requestedIcon ? ( diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index e3acfb5251d..ced67b8dc5d 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -252,11 +252,12 @@ export class Button href={childElType === "a" && this.href} name={childElType === "button" && this.name} onClick={this.handleClick} - ref={(el) => (this.childEl = el)} rel={childElType === "a" && this.rel} tabIndex={this.disabled || this.loading ? -1 : null} target={childElType === "a" && this.target} type={childElType === "button" && this.type} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.childEl = el)} > {loaderNode} {this.iconStart ? iconStartEl : null} diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index c45d4299b23..02a874f3610 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -1,4 +1,4 @@ -import { boolean, select, text } from "@storybook/addon-knobs"; +import { boolean, select } from "@storybook/addon-knobs"; import { placeholderImage } from "../../../.storybook/placeholderImage"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; diff --git a/src/components/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox.stories.ts index c96ea4bd942..b0c20b3dcdb 100644 --- a/src/components/checkbox/checkbox.stories.ts +++ b/src/components/checkbox/checkbox.stories.ts @@ -4,12 +4,6 @@ import { modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; -import { filterComponentAttributes, Attributes, createComponentHTML as create } from "../../../.storybook/utils"; - -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes([], exceptions); -}; - export default { title: "Components/Controls/Checkbox", parameters: { diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index 9389dbfe2a2..7faee7604b9 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -250,9 +250,10 @@ export class Checkbox class="toggle" onBlur={this.onToggleBlur} onFocus={this.onToggleFocus} - ref={(toggleEl) => (this.toggleEl = toggleEl)} role="checkbox" tabIndex={this.disabled ? undefined : 0} + // eslint-disable-next-line react/jsx-sort-props + ref={(toggleEl) => (this.toggleEl = toggleEl)} >
{hideHex && hideChannels ? null : ( diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx index e5f7b5cf56d..d0f47e70f3b 100644 --- a/src/components/combobox/combobox.tsx +++ b/src/components/combobox/combobox.tsx @@ -1142,8 +1142,9 @@ export class Combobox onFocus={this.comboboxFocusHandler} onInput={this.inputHandler} placeholder={placeholder} - ref={(el) => (this.textInput = el as HTMLInputElement)} type="text" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.textInput = el as HTMLInputElement)} /> ); @@ -1177,9 +1178,14 @@ export class Combobox "floating-ui-container": true, "floating-ui-container--active": open }} + // eslint-disable-next-line react/jsx-sort-props ref={setFloatingEl} > -
+
@@ -1233,7 +1239,7 @@ export class Combobox aria-controls={`${listboxUidPrefix}${guid}`} aria-expanded={toAriaBoolean(open)} aria-haspopup="listbox" - aria-labelledby={`${labelUidPrefix}${guid}`} + aria-label={getLabelText(this)} aria-live="polite" aria-owns={`${listboxUidPrefix}${guid}`} class={{ @@ -1243,8 +1249,9 @@ export class Combobox }} onClick={this.clickHandler} onKeyDown={this.keydownHandler} - ref={this.setReferenceEl} role="combobox" + // eslint-disable-next-line react/jsx-sort-props + ref={this.setReferenceEl} >
{this.renderIconStart()} diff --git a/src/components/date-picker-month-header/date-picker-month-header.tsx b/src/components/date-picker-month-header/date-picker-month-header.tsx index 118df205b9e..ff4ae52be52 100644 --- a/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -163,9 +163,10 @@ export class DatePickerMonthHeader { onInput={this.onYearInput} onKeyDown={this.onYearKey} pattern="\d*" - ref={(el) => (this.yearInput = el)} type="text" value={localizedYear} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.yearInput = el)} /> {suffix && {suffix}} diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx index f856358b4ba..ef211b3eb81 100644 --- a/src/components/date-picker-month/date-picker-month.tsx +++ b/src/components/date-picker-month/date-picker-month.tsx @@ -436,16 +436,17 @@ export class DatePickerMonth { onCalciteInternalDayHover={this.dayHover} range={!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} rangeHover={this.isRangeHover(date)} + scale={this.scale} + selected={this.isSelected(date)} + startOfRange={this.isStartOfRange(date)} + value={date} + // eslint-disable-next-line react/jsx-sort-props ref={(el: HTMLCalciteDatePickerDayElement) => { // when moving via keyboard, focus must be updated on active date if (ref && active && this.activeFocus) { el?.focus(); } }} - scale={this.scale} - selected={this.isSelected(date)} - startOfRange={this.isStartOfRange(date)} - value={date} /> ); } diff --git a/src/components/dropdown-item/dropdown-item.tsx b/src/components/dropdown-item/dropdown-item.tsx index 6ba35b1fd7f..ddbe2a6d155 100644 --- a/src/components/dropdown-item/dropdown-item.tsx +++ b/src/components/dropdown-item/dropdown-item.tsx @@ -166,10 +166,11 @@ export class DropdownItem implements LoadableComponent { aria-label={this.label} class={CSS.link} href={this.href} - ref={(el) => (this.childLink = el)} rel={this.rel} tabIndex={-1} target={this.target} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.childLink = el)} > {slottedContent} diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index b77baeb4b0c..1851f402ff2 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -225,6 +225,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float id={`${guid}-menubutton`} onClick={this.openCalciteDropdown} onKeyDown={this.keyDownHandler} + // eslint-disable-next-line react/jsx-sort-props ref={this.setReferenceEl} > diff --git a/src/components/fab/fab.tsx b/src/components/fab/fab.tsx index 8289cea833d..c29adfcc020 100755 --- a/src/components/fab/fab.tsx +++ b/src/components/fab/fab.tsx @@ -147,14 +147,15 @@ export class Fab implements InteractiveComponent, LoadableComponent { kind={kind} label={label} loading={loading} - ref={(buttonEl): void => { - this.buttonEl = buttonEl; - }} round={true} scale={scale} title={title} type="button" width="auto" + // eslint-disable-next-line react/jsx-sort-props + ref={(buttonEl): void => { + this.buttonEl = buttonEl; + }} > {this.textEnabled ? this.text : null} diff --git a/src/components/filter/filter.e2e.ts b/src/components/filter/filter.e2e.ts index 377d47a924d..b024e94eaef 100644 --- a/src/components/filter/filter.e2e.ts +++ b/src/components/filter/filter.e2e.ts @@ -173,24 +173,36 @@ describe("calcite-filter", () => { }); }); - it.skip("updates filtered items after filtering", async () => { - const filterChangeSpy = await page.spyOnEvent("calciteFilterChange"); - const waitForEvent = page.waitForEvent("calciteFilterChange"); + it("updates filtered items after filtering", async () => { const filter = await page.find("calcite-filter"); + const filterChangeSpy = await page.spyOnEvent("calciteFilterChange"); + await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForChanges(); + + expect(filterChangeSpy).toHaveReceivedEventTimes(0); + assertMatchingItems(await filter.getProperty("filteredItems"), [ + "harry", + "matt", + "franco", + "katy", + "jon", + "regex" + ]); + + const filterChangeEvent = page.waitForEvent("calciteFilterChange"); await filter.callMethod("setFocus"); await filter.type("developer"); - await waitForEvent; + await filterChangeEvent; expect(filterChangeSpy).toHaveReceivedEventTimes(1); - assertMatchingItems(await filter.getProperty("filteredItems"), ["harry", "matt", "franco", "jon"]); - await page.evaluate(() => { - const filter = document.querySelector("calcite-filter"); + await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => { filter.items = filter.items.slice(3); }); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForChanges(); + assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]); expect(filterChangeSpy).toHaveReceivedEventTimes(1); }); diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index bdd7b6f098c..99ded0349e5 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -152,7 +152,6 @@ export class Filter async componentWillLoad(): Promise { setUpLoadableComponent(this); this.updateFiltered(filter(this.items, this.value)); - this.filter(this.value); await setUpMessages(this); } @@ -252,12 +251,13 @@ export class Filter onCalciteInputInput={this.inputHandler} onKeyDown={this.keyDownHandler} placeholder={this.placeholder} - ref={(el): void => { - this.textInput = el; - }} scale={scale} type="text" value={this.value} + // eslint-disable-next-line react/jsx-sort-props + ref={(el): void => { + this.textInput = el; + }} />
diff --git a/src/components/flow-item/flow-item.e2e.ts b/src/components/flow-item/flow-item.e2e.ts index e53ca4938dc..0f1a099d7bd 100644 --- a/src/components/flow-item/flow-item.e2e.ts +++ b/src/components/flow-item/flow-item.e2e.ts @@ -126,7 +126,7 @@ describe("calcite-flow-item", () => { `); - const [top, _middle, bottom] = await page.findAll("calcite-block"); + const [top, , bottom] = await page.findAll("calcite-block"); await bottom.callMethod("scrollIntoView"); diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx index 42a9e54d689..34feaeb9225 100644 --- a/src/components/flow-item/flow-item.tsx +++ b/src/components/flow-item/flow-item.tsx @@ -280,10 +280,11 @@ export class FlowItem icon={icon} key="flow-back-button" onClick={backButtonClick} - ref={this.setBackRef} scale="s" slot="header-actions-start" text={label} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setBackRef} /> ) : null; } @@ -316,6 +317,7 @@ export class FlowItem messageOverrides={messages} onCalcitePanelClose={this.handlePanelClose} onCalcitePanelScroll={this.handlePanelScroll} + // eslint-disable-next-line react/jsx-sort-props ref={this.setContainerRef} > {this.renderBackButton()} diff --git a/src/components/functional/ExpandToggle.tsx b/src/components/functional/ExpandToggle.tsx index 4baf1fdb5f6..76b0555aff4 100644 --- a/src/components/functional/ExpandToggle.tsx +++ b/src/components/functional/ExpandToggle.tsx @@ -92,12 +92,13 @@ export const ExpandToggle: FunctionalComponent = ({ - setTooltipReference({ tooltip, referenceElement, expanded, ref }) - } scale={scale} text={expandText} textEnabled={expanded} + // eslint-disable-next-line react/jsx-sort-props + ref={(referenceElement): HTMLCalciteActionElement => + setTooltipReference({ tooltip, referenceElement, expanded, ref }) + } /> ); diff --git a/src/components/handle/assets/handle/t9n/messages.json b/src/components/handle/assets/handle/t9n/messages.json new file mode 100644 index 00000000000..42ca69fde8e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Drag handle" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ar.json b/src/components/handle/assets/handle/t9n/messages_ar.json new file mode 100644 index 00000000000..5e0814d3fdb --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ar.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "اسحب المقبض" +} diff --git a/src/components/handle/assets/handle/t9n/messages_bg.json b/src/components/handle/assets/handle/t9n/messages_bg.json new file mode 100644 index 00000000000..32260229ada --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_bg.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Плъзнете маркера" +} diff --git a/src/components/handle/assets/handle/t9n/messages_bs.json b/src/components/handle/assets/handle/t9n/messages_bs.json new file mode 100644 index 00000000000..4d73ca3a629 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_bs.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Ručica za vuču" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ca.json b/src/components/handle/assets/handle/t9n/messages_ca.json new file mode 100644 index 00000000000..53dd6025d1b --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ca.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Arrossega el controlador" +} diff --git a/src/components/handle/assets/handle/t9n/messages_cs.json b/src/components/handle/assets/handle/t9n/messages_cs.json new file mode 100644 index 00000000000..3e247fe1aab --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_cs.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Přetáhnout úchyt" +} diff --git a/src/components/handle/assets/handle/t9n/messages_da.json b/src/components/handle/assets/handle/t9n/messages_da.json new file mode 100644 index 00000000000..247c0769b1e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_da.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Træk håndtag" +} diff --git a/src/components/handle/assets/handle/t9n/messages_de.json b/src/components/handle/assets/handle/t9n/messages_de.json new file mode 100644 index 00000000000..8dbcb9afefa --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_de.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Ziehpunkt ziehen" +} diff --git a/src/components/handle/assets/handle/t9n/messages_el.json b/src/components/handle/assets/handle/t9n/messages_el.json new file mode 100644 index 00000000000..dfce94ad648 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_el.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Λαβή σύρσης" +} diff --git a/src/components/handle/assets/handle/t9n/messages_en.json b/src/components/handle/assets/handle/t9n/messages_en.json new file mode 100644 index 00000000000..42ca69fde8e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_en.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Drag handle" +} diff --git a/src/components/handle/assets/handle/t9n/messages_es.json b/src/components/handle/assets/handle/t9n/messages_es.json new file mode 100644 index 00000000000..4dd04898d0f --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_es.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Arrastrar manipulador" +} diff --git a/src/components/handle/assets/handle/t9n/messages_et.json b/src/components/handle/assets/handle/t9n/messages_et.json new file mode 100644 index 00000000000..2cf3ffe32f0 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_et.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Lohistamispide" +} diff --git a/src/components/handle/assets/handle/t9n/messages_fi.json b/src/components/handle/assets/handle/t9n/messages_fi.json new file mode 100644 index 00000000000..3eefb641eaa --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_fi.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Vedä kahvasta" +} diff --git a/src/components/handle/assets/handle/t9n/messages_fr.json b/src/components/handle/assets/handle/t9n/messages_fr.json new file mode 100644 index 00000000000..92c6f0ce83e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_fr.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Poignée de redimensionnement" +} diff --git a/src/components/handle/assets/handle/t9n/messages_he.json b/src/components/handle/assets/handle/t9n/messages_he.json new file mode 100644 index 00000000000..d3b3b0ac4d8 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_he.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "ידית גרירה" +} diff --git a/src/components/handle/assets/handle/t9n/messages_hr.json b/src/components/handle/assets/handle/t9n/messages_hr.json new file mode 100644 index 00000000000..4d73ca3a629 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_hr.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Ručica za vuču" +} diff --git a/src/components/handle/assets/handle/t9n/messages_hu.json b/src/components/handle/assets/handle/t9n/messages_hu.json new file mode 100644 index 00000000000..9a022401e4d --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_hu.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Fogantyú húzása" +} diff --git a/src/components/handle/assets/handle/t9n/messages_id.json b/src/components/handle/assets/handle/t9n/messages_id.json new file mode 100644 index 00000000000..64e1fd7e761 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_id.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Seret handle" +} diff --git a/src/components/handle/assets/handle/t9n/messages_it.json b/src/components/handle/assets/handle/t9n/messages_it.json new file mode 100644 index 00000000000..9fff78172d9 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_it.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Trascina maniglia" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ja.json b/src/components/handle/assets/handle/t9n/messages_ja.json new file mode 100644 index 00000000000..56a52301ecd --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ja.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "ハンドルのドラッグ" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ko.json b/src/components/handle/assets/handle/t9n/messages_ko.json new file mode 100644 index 00000000000..fbd4527883e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ko.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "핸들 드래그" +} diff --git a/src/components/handle/assets/handle/t9n/messages_lt.json b/src/components/handle/assets/handle/t9n/messages_lt.json new file mode 100644 index 00000000000..951756932e7 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_lt.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Vilkti rankenėlę" +} diff --git a/src/components/handle/assets/handle/t9n/messages_lv.json b/src/components/handle/assets/handle/t9n/messages_lv.json new file mode 100644 index 00000000000..1a6f753dd02 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_lv.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Vilkt turētāju" +} diff --git a/src/components/handle/assets/handle/t9n/messages_nl.json b/src/components/handle/assets/handle/t9n/messages_nl.json new file mode 100644 index 00000000000..0e6e9767c82 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_nl.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Knop slepen" +} diff --git a/src/components/handle/assets/handle/t9n/messages_no.json b/src/components/handle/assets/handle/t9n/messages_no.json new file mode 100644 index 00000000000..543f05108dd --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_no.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Dra håndtak" +} diff --git a/src/components/handle/assets/handle/t9n/messages_pl.json b/src/components/handle/assets/handle/t9n/messages_pl.json new file mode 100644 index 00000000000..f326fd00a80 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_pl.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Uchwyt przeciągania" +} diff --git a/src/components/handle/assets/handle/t9n/messages_pt-BR.json b/src/components/handle/assets/handle/t9n/messages_pt-BR.json new file mode 100644 index 00000000000..263d4b2fa44 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_pt-BR.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Arrastar manipulador" +} diff --git a/src/components/handle/assets/handle/t9n/messages_pt-PT.json b/src/components/handle/assets/handle/t9n/messages_pt-PT.json new file mode 100644 index 00000000000..2218c580cb5 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_pt-PT.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Arrastar alça" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ro.json b/src/components/handle/assets/handle/t9n/messages_ro.json new file mode 100644 index 00000000000..31692d9065a --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ro.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Tragere ghidaj" +} diff --git a/src/components/handle/assets/handle/t9n/messages_ru.json b/src/components/handle/assets/handle/t9n/messages_ru.json new file mode 100644 index 00000000000..70267afc2e0 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_ru.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Перетащить маркер" +} diff --git a/src/components/handle/assets/handle/t9n/messages_sk.json b/src/components/handle/assets/handle/t9n/messages_sk.json new file mode 100644 index 00000000000..63fba9e6dd6 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_sk.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Rukoväť na ťahanie" +} diff --git a/src/components/handle/assets/handle/t9n/messages_sl.json b/src/components/handle/assets/handle/t9n/messages_sl.json new file mode 100644 index 00000000000..6eda9688164 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_sl.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Povleci ročico" +} diff --git a/src/components/handle/assets/handle/t9n/messages_sr.json b/src/components/handle/assets/handle/t9n/messages_sr.json new file mode 100644 index 00000000000..4681982da0d --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_sr.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Regulator prevlačenja" +} diff --git a/src/components/handle/assets/handle/t9n/messages_sv.json b/src/components/handle/assets/handle/t9n/messages_sv.json new file mode 100644 index 00000000000..adde0333e29 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_sv.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Dra handtag" +} diff --git a/src/components/handle/assets/handle/t9n/messages_th.json b/src/components/handle/assets/handle/t9n/messages_th.json new file mode 100644 index 00000000000..104cb58ecff --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_th.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "ลากที่จับ" +} diff --git a/src/components/handle/assets/handle/t9n/messages_tr.json b/src/components/handle/assets/handle/t9n/messages_tr.json new file mode 100644 index 00000000000..e363b7b7aa1 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_tr.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Kolu sürükle" +} diff --git a/src/components/handle/assets/handle/t9n/messages_uk.json b/src/components/handle/assets/handle/t9n/messages_uk.json new file mode 100644 index 00000000000..14c25f43dbf --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_uk.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Перетягнути маркер" +} diff --git a/src/components/handle/assets/handle/t9n/messages_vi.json b/src/components/handle/assets/handle/t9n/messages_vi.json new file mode 100644 index 00000000000..c94b7c290ab --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_vi.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Kéo thông tin" +} diff --git a/src/components/handle/assets/handle/t9n/messages_zh-CN.json b/src/components/handle/assets/handle/t9n/messages_zh-CN.json new file mode 100644 index 00000000000..aabe586c791 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_zh-CN.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "拖动控点" +} diff --git a/src/components/handle/assets/handle/t9n/messages_zh-HK.json b/src/components/handle/assets/handle/t9n/messages_zh-HK.json new file mode 100644 index 00000000000..70a2cff7258 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_zh-HK.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "拖曳控桿" +} diff --git a/src/components/handle/assets/handle/t9n/messages_zh-TW.json b/src/components/handle/assets/handle/t9n/messages_zh-TW.json new file mode 100644 index 00000000000..70a2cff7258 --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_zh-TW.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "拖曳控桿" +} diff --git a/src/components/handle/handle.e2e.ts b/src/components/handle/handle.e2e.ts index 21d53c722b6..c1dfbedd64f 100644 --- a/src/components/handle/handle.e2e.ts +++ b/src/components/handle/handle.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders } from "../../tests/commonTests"; +import { accessible, hidden, renders, t9n } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-handle", () => { @@ -45,4 +45,6 @@ describe("calcite-handle", () => { expect(await calciteHandleNudgeSpy.lastEvent.detail.direction).toBe("down"); expect(calciteHandleNudgeSpy).toHaveReceivedEventTimes(2); }); + + it("supports translation", () => t9n("calcite-handle")); }); diff --git a/src/components/handle/handle.tsx b/src/components/handle/handle.tsx index 5030f032b31..3cc31b988f0 100644 --- a/src/components/handle/handle.tsx +++ b/src/components/handle/handle.tsx @@ -1,4 +1,15 @@ -import { Component, Element, Event, EventEmitter, h, Method, Prop, VNode } from "@stencil/core"; +import { + Component, + Element, + Event, + EventEmitter, + h, + Method, + Prop, + State, + VNode, + Watch +} from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; import { componentLoaded, @@ -6,15 +17,25 @@ import { setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { HandleMessages } from "./assets/handle/t9n"; import { HandleNudge } from "./interfaces"; import { CSS, ICONS } from "./resources"; @Component({ tag: "calcite-handle", styleUrl: "handle.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class Handle implements LoadableComponent { +export class Handle implements LoadableComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -29,7 +50,24 @@ export class Handle implements LoadableComponent { /** * Value for the button title attribute */ - @Prop({ reflect: true }) textTitle = "handle"; + @Prop({ reflect: true }) dragHandle: string; + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop() messages: HandleMessages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop() messageOverrides: Partial; + + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } //-------------------------------------------------------------------------- // @@ -37,14 +75,25 @@ export class Handle implements LoadableComponent { // //-------------------------------------------------------------------------- - componentWillLoad(): void { + connectedCallback(): void { + connectMessages(this); + connectLocalized(this); + } + + async componentWillLoad(): Promise { setUpLoadableComponent(this); + await setUpMessages(this); } componentDidLoad(): void { setComponentLoaded(this); } + disconnectedCallback(): void { + disconnectMessages(this); + disconnectLocalized(this); + } + // -------------------------------------------------------------------------- // // Private Properties @@ -55,6 +104,15 @@ export class Handle implements LoadableComponent { handleButton: HTMLElement; + @State() effectiveLocale: string; + + @State() defaultMessages: HandleMessages; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + // -------------------------------------------------------------------------- // // Events @@ -127,12 +185,13 @@ export class Handle implements LoadableComponent { class={{ [CSS.handle]: true, [CSS.handleActivated]: this.activated }} onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} + role="button" + tabindex="0" + title={this.messages.dragHandle} + // eslint-disable-next-line react/jsx-sort-props ref={(el): void => { this.handleButton = el; }} - role="button" - tabindex="0" - title={this.textTitle} > diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index a3298a71bb2..9dd3ba6eed9 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -175,13 +175,14 @@ export class InlineEditable kind="neutral" label={this.messages.enableEditing} onClick={this.enableEditingHandler} - ref={(el) => (this.enableEditingButton = el)} scale={this.scale} style={{ opacity: this.editingEnabled ? "0" : "1", width: this.editingEnabled ? "0" : "inherit" }} type="button" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.enableEditingButton = el)} /> {this.shouldShowControls && [
@@ -193,9 +194,10 @@ export class InlineEditable kind="neutral" label={this.messages.cancelEditing} onClick={this.cancelEditingHandler} - ref={(el) => (this.cancelEditingButton = el)} scale={this.scale} type="button" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.cancelEditingButton = el)} />
, (this.confirmEditingButton = el)} scale={this.scale} type="button" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.confirmEditingButton = el)} /> ]}
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index e3fc49ac056..844359bb3e7 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -465,7 +465,11 @@ export class InputDatePicker {this.localeData && (
{ -
+
} @@ -492,6 +497,7 @@ export class InputDatePicker [CSS.menu]: true, [CSS.menuActive]: this.open }} + // eslint-disable-next-line react/jsx-sort-props ref={this.setFloatingEl} >
)} {this.range && ( -
+
)} diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx index 9e7d2b0da21..4741535d1f0 100644 --- a/src/components/input-number/input-number.tsx +++ b/src/components/input-number/input-number.tsx @@ -967,9 +967,10 @@ export class InputNumber onKeyUp={this.inputNumberKeyUpHandler} placeholder={this.placeholder || ""} readOnly={this.readOnly} - ref={this.setChildNumberElRef} type="text" value={this.localizedValue} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setChildNumberElRef} /> ); diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx index 2f2d95fae74..9d53e20a6ea 100644 --- a/src/components/input-text/input-text.tsx +++ b/src/components/input-text/input-text.tsx @@ -635,11 +635,12 @@ export class InputText pattern={this.pattern} placeholder={this.placeholder || ""} readOnly={this.readOnly} - ref={this.setChildElRef} required={this.required ? true : null} tabIndex={this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null} type="text" value={this.value} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setChildElRef} /> ); diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index b154d247fe9..f8db63883e8 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -502,9 +502,10 @@ export class InputTimePicker onCalciteInternalInputBlur={this.calciteInternalInputBlurHandler} onCalciteInternalInputFocus={this.calciteInternalInputFocusHandler} readOnly={this.readOnly} - ref={this.setCalciteInputEl} scale={this.scale} step={this.step} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setCalciteInputEl} />
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index cde1aa5dc8f..83f2850ea59 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -1100,9 +1100,10 @@ export class Input pattern={this.pattern} placeholder={this.placeholder || ""} readOnly={this.readOnly} - ref={this.setChildNumberElRef} type="text" value={this.localizedValue} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setChildNumberElRef} /> ) : null; @@ -1136,7 +1137,6 @@ export class Input pattern={this.pattern} placeholder={this.placeholder || ""} readOnly={this.readOnly} - ref={this.setChildElRef} required={this.required ? true : null} step={this.step} tabIndex={ @@ -1144,6 +1144,8 @@ export class Input } type={this.type} value={this.value} + // eslint-disable-next-line react/jsx-sort-props + ref={this.setChildElRef} />, this.isTextarea ? (
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index bdb6d17cc01..e41dd4a76cd 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -118,11 +118,12 @@ export class Link implements InteractiveComponent, LoadableComponent { download={Tag === "a" && (download === "" || download) ? download : null} href={Tag === "a" && this.href} onClick={this.childElClickHandler} - ref={this.storeTagRef} rel={Tag === "a" && this.rel} role={role} tabIndex={tabIndex} target={Tag === "a" && this.target} + // eslint-disable-next-line react/jsx-sort-props + ref={this.storeTagRef} > {this.iconStart ? iconStartEl : null} diff --git a/src/components/list-item/list-item.tsx b/src/components/list-item/list-item.tsx index 307e440094f..e9d835771dd 100644 --- a/src/components/list-item/list-item.tsx +++ b/src/components/list-item/list-item.tsx @@ -298,8 +298,9 @@ export class ListItem implements InteractiveComponent, LoadableComponent { class={CSS.actionsStart} hidden={!hasActionsStart} key="actions-start-container" - ref={(el) => (this.actionsStartEl = el)} role="gridcell" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.actionsStartEl = el)} > @@ -314,8 +315,9 @@ export class ListItem implements InteractiveComponent, LoadableComponent { class={CSS.actionsEnd} hidden={!hasActionsEnd} key="actions-end-container" - ref={(el) => (this.actionsEndEl = el)} role="gridcell" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.actionsEndEl = el)} > @@ -388,8 +390,9 @@ export class ListItem implements InteractiveComponent, LoadableComponent { }} key="content-container" onClick={this.itemClicked} - ref={(el) => (this.contentEl = el)} role="gridcell" + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.contentEl = el)} > {content} @@ -430,10 +433,11 @@ export class ListItem implements InteractiveComponent, LoadableComponent { }} onFocus={this.focusCellNull} onKeyDown={this.handleItemKeyDown} - ref={(el) => (this.containerEl = el)} role="row" style={{ "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }} tabIndex={active ? 0 : -1} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.containerEl = el)} > {this.renderSelected()} {this.renderOpen()} diff --git a/src/components/list/list.e2e.ts b/src/components/list/list.e2e.ts index 171b965c3fb..6281c9a5a56 100755 --- a/src/components/list/list.e2e.ts +++ b/src/components/list/list.e2e.ts @@ -107,16 +107,15 @@ describe("calcite-list", () => { const list = await page.find("calcite-list"); const filter = await page.find(`calcite-list >>> calcite-filter`); expect(await list.getProperty("filteredItems")).toHaveLength(2); - expect(await list.getProperty("filteredData")).toHaveLength(0); + expect(await list.getProperty("filteredData")).toHaveLength(2); expect(await list.getProperty("filterText")).toBeUndefined(); await filter.callMethod("setFocus"); - const calciteFilterChangeEvent = filter.waitForEvent("calciteFilterChange"); const calciteListFilterEvent = page.waitForEvent("calciteListFilter"); await page.keyboard.type("one"); await page.waitForTimeout(debounceTimeout); - await calciteFilterChangeEvent; + await page.waitForChanges(); await calciteListFilterEvent; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -127,27 +126,69 @@ describe("calcite-list", () => { await page.keyboard.press("Backspace"); await page.waitForChanges(); - const calciteFilterChangeEvent2 = filter.waitForEvent("calciteFilterChange"); const calciteListFilterEvent2 = page.waitForEvent("calciteListFilter"); await page.keyboard.type("two"); await page.waitForTimeout(debounceTimeout); - await calciteFilterChangeEvent2; + await page.waitForChanges(); await calciteListFilterEvent2; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); expect(await list.getProperty("filterText")).toBe("two"); - const calciteFilterChangeEvent3 = filter.waitForEvent("calciteFilterChange"); const calciteListFilterEvent3 = page.waitForEvent("calciteListFilter"); await page.keyboard.type("blah"); await page.waitForTimeout(debounceTimeout); - await calciteFilterChangeEvent3; + await page.waitForChanges(); await calciteListFilterEvent3; expect(await list.getProperty("filteredItems")).toHaveLength(0); expect(await list.getProperty("filteredData")).toHaveLength(0); expect(await list.getProperty("filterText")).toBe("twoblah"); }); + it("filters initially", async () => { + const page = await newE2EPage({ + html: html` + + + + + + + ` + }); + + const list = await page.find("calcite-list"); + await page.waitForTimeout(debounceTimeout); + await page.waitForChanges(); + + expect(await list.getProperty("filteredData")).toHaveLength(3); + expect(await list.getProperty("filteredItems")).toHaveLength(3); + + const visibleItems = await page.findAll("calcite-list-item:not([hidden])"); + + expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]); + }); + it("should update active item on init and click", async () => { const page = await newE2EPage({ html: html` diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx index ffa4c8aca37..8ab2240ee3d 100755 --- a/src/components/list/list.tsx +++ b/src/components/list/list.tsx @@ -278,8 +278,9 @@ export class List implements InteractiveComponent, LoadableComponent { items={dataForFilter} onCalciteFilterChange={this.handleFilter} placeholder={filterPlaceholder} - ref={(el) => (this.filterEl = el)} value={filterText} + // eslint-disable-next-line react/jsx-sort-props + ref={(el) => (this.filterEl = el)} /> @@ -391,7 +392,7 @@ export class List implements InteractiveComponent, LoadableComponent { })); }; - private updateListItems = debounce((): void => { + private updateListItems(): void { const { selectionAppearance, selectionMode } = this; const items = this.queryListItems(); items.forEach((item) => { @@ -406,7 +407,7 @@ export class List implements InteractiveComponent, LoadableComponent { this.setActiveListItem(); this.updateSelectedItems(); this.updateFilteredItems(); - }, debounceTimeout); + } queryListItems = (): HTMLCalciteListItemElement[] => { return Array.from(this.el.querySelectorAll(listItemSelector)); diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index 85ce2cb1956..10c1c674c6d 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS, DURATIONS } from "./resources"; -import { newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; +import { isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; describe("calcite-modal properties", () => { it("renders", () => renders("calcite-modal", { display: "flex", visible: false })); @@ -303,83 +303,90 @@ describe("opening and closing behavior", () => { describe("calcite-modal accessibility checks", () => { it("traps focus within the modal when open", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); + await page.waitForChanges(); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - let $close; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); - await page.$eval("calcite-modal", (elm) => { - $close = elm.shadowRoot.querySelector(".close"); - }); - await modal.setProperty("open", true); + modal.setProperty("open", true); await page.waitForChanges(); - expect(document.activeElement).toEqual($close); + + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($close); + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); it("restores focus to previously focused element when closed", async () => { + const initiallyFocusedId = "initially-focused"; + const initiallyFocusedIdSelector = `#${initiallyFocusedId}`; const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + html` + + + ` + ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button; - await page.$eval("button", (elm: any) => { - $button = elm; - $button.focus(); + await page.$eval(initiallyFocusedIdSelector, (button: HTMLButtonElement) => { + button.focus(); }); await modal.setProperty("open", true); await page.waitForChanges(); await modal.setProperty("open", false); await page.waitForChanges(); - expect(document.activeElement).toEqual($button); + expect(await isElementFocused(page, initiallyFocusedIdSelector)).toBe(true); }); it("traps focus within the modal when open and disabled close button", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); await modal.setProperty("open", true); await page.waitForChanges(); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); describe("setFocus", () => { diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index e5ade1ea54f..ac6bcf78277 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -20,6 +20,11 @@ --calcite-modal-scrim-background-internal: #{rgba($blk-240, 0.85)}; } +.content-top[hidden], +.content-bottom[hidden] { + @apply hidden; +} + .container { @apply text-color-2 fixed @@ -109,11 +114,11 @@ transition-delay: 0ms; } -:host([open]) .container { +.container--open { @apply opacity-100; visibility: visible !important; transition-delay: 0ms; - .modal--open { + .modal { @apply pointer-events-auto visible opacity-100; transition: transform var(--calcite-internal-animation-timing-slow) $easing-function, visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) $easing-function, @@ -184,12 +189,31 @@ */ .content { @apply relative box-border block h-full overflow-auto p-0; - max-block-size: 100%; background-color: var(--calcite-modal-content-background, theme("colors.background.foreground.1")); - padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); - padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); + max-block-size: 100%; + padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); +} + +.content-top, +.content-bottom { + @apply bg-foreground-1 border-color-3 border-solid border-0 z-header flex; + flex: 0 0 auto; + padding: var(--calcite-modal-padding-internal); } +.content-top { + @apply min-w-0 max-w-full border-b; +} + +.content-bottom { + @apply mt-auto box-border w-full justify-between border-t; +} + +.content-top:not(.header ~ .content-top) { + @apply rounded-t; +} + +.content-bottom:not(.content-bottom ~ .footer), .content--no-footer { @apply rounded-b; } @@ -287,10 +311,10 @@ slot[name="primary"] { } :host([open][fullscreen]) { - .header { - border-radius: 0; - } - .footer { + .header, + .footer, + .content-top, + .content-bottom { border-radius: 0; } } @@ -339,7 +363,8 @@ slot[name="primary"] { .modal { @apply border-0 border-t-4 border-solid; } - .header { + .header, + .content-top { @apply rounded rounded-b-none; } } @@ -348,10 +373,11 @@ slot[name="primary"] { * Tablet */ @media screen and (max-width: $viewport-medium) { - @include slotted("header", "*") { + @include slotted("header", "content-top", "*") { @apply text-1; } - .footer { + .footer, + .content-bottom { @apply sticky bottom-0; } } @@ -360,7 +386,8 @@ slot[name="primary"] { * Mobile */ @media screen and (max-width: $viewport-small) { - .footer { + .footer, + .content-bottom { @apply flex-col; } .back, diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts index 3f47d5e2257..ab474c92345 100644 --- a/src/components/modal/modal.stories.ts +++ b/src/components/modal/modal.stories.ts @@ -1,4 +1,4 @@ -import { select, number } from "@storybook/addon-knobs"; +import { select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; import readme from "./readme.md"; @@ -27,7 +27,7 @@ export const simple = (): string => html` >

Small Modal

-

The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.

+ The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
Back html` `; +const mightyLongTextToScroll = html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nisi et elit auctor aliquet ac suscipit eros. Sed nec + nibh viverra, feugiat magna ut, posuere arcu. Curabitur varius erat ut suscipit convallis. Nullam semper pellentesque + est laoreet accumsan. Aenean eget urna fermentum, porttitor dui et, tincidunt erat. Curabitur lacinia lacus in urna + lacinia, ac interdum lorem fermentum. Ut accumsan malesuada varius. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Phasellus tempus tempor magna, eu dignissim urna ornare non. Integer tempor justo blandit nunc ornare, a + interdum nisl pharetra. Sed ultricies at augue vel fermentum. Maecenas laoreet odio lorem. Aliquam in pretium turpis. + Donec quis felis a diam accumsan vehicula efficitur at orci. Donec sollicitudin gravida ultrices. +`; + +export const slots = (): string => html` + +

Slot for a header.

+
Slot for a content-top.
+
${mightyLongTextToScroll}
+
Slot for a content-bottom.
+ Button + +`; + export const darkModeRTLCustomSizeCSSVars_TestOnly = (): string => html` @@ -212,9 +220,9 @@ export class Modal {this.renderStyle()}
@@ -223,15 +231,18 @@ export class Modal
+ {this.renderContentTop()}
(this.modalContent = el)} >
+ {this.renderContentBottom()} {this.renderFooter()}
@@ -255,6 +266,22 @@ export class Modal ) : null; } + renderContentTop(): VNode { + return ( + + ); + } + + renderContentBottom(): VNode { + return ( + + ); + } + renderCloseButton(): VNode { return !this.closeButtonDisabled ? (