From 24230e1cfd625c37a8c08f0b424a52dfd91a58f6 Mon Sep 17 00:00:00 2001 From: bulby97 Date: Wed, 24 Jun 2020 13:06:34 +1200 Subject: [PATCH 1/2] Add manual state with dangerousmySetExpanded --- babel.config.js | 5 +- demo/src/index.tsx | 36 ++++++ .../__snapshots__/wai-aria.spec.js.snap | 12 ++ package.json | 13 ++- src/components/AccordionContext.tsx | 24 +++- src/components/AccordionItem.tsx | 8 +- src/components/ItemContext.tsx | 16 ++- src/helpers/AccordionStore.ts | 6 +- tslint.json | 1 - yarn.lock | 105 ++++++++++++------ 10 files changed, 170 insertions(+), 56 deletions(-) diff --git a/babel.config.js b/babel.config.js index 9ed02170..2358dc95 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,7 +16,10 @@ module.exports = api => { '@babel/preset-typescript', ]; - const plugins = ['@babel/plugin-proposal-class-properties']; + const plugins = [ + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-nullish-coalescing-operator', + ]; return { presets, diff --git a/demo/src/index.tsx b/demo/src/index.tsx index fc07d934..66577d44 100644 --- a/demo/src/index.tsx +++ b/demo/src/index.tsx @@ -193,6 +193,42 @@ const App = (): JSX.Element => ( ))} + +

Manual state

+ +

+ When you use the onChange prop, you can get + feedback about which items are expanded. +

+ +

+ In this example, we are simply logging the uuids of the expanded + items to the console. Have a click around then check your console to + see this in action. +

+ + + {placeholders.map((placeholder: Placeholder, i: number) => { + const dangerouslySetExpanded = i < 2 ? true : false; + + return ( + + + + {placeholder.heading} + + + + {placeholder.panel} + + + ); + })} + ); diff --git a/integration/__snapshots__/wai-aria.spec.js.snap b/integration/__snapshots__/wai-aria.spec.js.snap index e4cb6e67..88f11774 100644 --- a/integration/__snapshots__/wai-aria.spec.js.snap +++ b/integration/__snapshots__/wai-aria.spec.js.snap @@ -7,14 +7,26 @@ Object { "name": "Heading One", "role": "button", }, + Object { + "name": "Sunt in reprehenderit cillum ex proident qui culpa fugiat pariatur aliqua nostrud consequat consequat enim quis sit consectetur ad aute ea ex eiusmod id esse culpa et pariatur ad amet pariatur pariatur dolor quis.", + "role": "text", + }, Object { "name": "Heading Two", "role": "button", }, + Object { + "name": "Velit tempor dolore commodo voluptate id do nulla do ut proident cillum ad cillum voluptate deserunt fugiat ut sed cupidatat ut consectetur consequat incididunt sed in culpa do labore ea incididunt ea in eiusmod.", + "role": "text", + }, Object { "name": "Heading Three", "role": "button", }, + Object { + "name": "Lorem ipsum esse occaecat voluptate duis incididunt amet eiusmod sunt commodo sunt enim anim ea culpa ut tempor dolore fugiat exercitation aliquip commodo dolore elit esse est ullamco velit et deserunt.", + "role": "text", + }, ], "name": "React Accessible Accordion - Integration Test Sandbox", "role": "WebArea", diff --git a/package.json b/package.json index 51d45a13..b9ce48e9 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@babel/cli": "^7.4.4", "@babel/core": "^7.4.5", "@babel/plugin-proposal-class-properties": "^7.4.4", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1", "@babel/polyfill": "^7.4.4", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", @@ -102,7 +103,7 @@ "jest": "^24.5.0", "lint-staged": "^8.1.5", "mini-css-extract-plugin": "^0.7.0", - "prettier": "^1.16.3", + "prettier": "^2.0.5", "puppeteer": "2.0.0", "react": "16.3.2", "react-dom": "16.3.3", @@ -114,12 +115,12 @@ "rollup-plugin-node-resolve": "^5.1.0", "rollup-plugin-replace": "^2.1.1", "style-loader": "^0.23.1", - "tslint": "^5.14.0", + "tslint": "^6.1.2", "tslint-config-prettier": "^1.18.0", - "tslint-microsoft-contrib": "^6.1.0", - "tslint-plugin-prettier": "^2.0.1", - "tslint-react": "^4.0.0", - "typescript": "^3.5.2", + "tslint-microsoft-contrib": "^6.2.0", + "tslint-plugin-prettier": "^2.3.0", + "tslint-react": "^5.0.0", + "typescript": "^3.9.5", "uuid": "^3.3.2", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", diff --git a/src/components/AccordionContext.tsx b/src/components/AccordionContext.tsx index 2d7608b2..ef8679f3 100644 --- a/src/components/AccordionContext.tsx +++ b/src/components/AccordionContext.tsx @@ -24,9 +24,15 @@ export interface AccordionContext { toggleExpanded(uuid: UUID): void; isItemDisabled(uuid: UUID): boolean; isItemExpanded(uuid: UUID): boolean; - getPanelAttributes(uuid: UUID): InjectedPanelAttributes; + getPanelAttributes( + uuid: UUID, + dangerouslySetExpanded?: boolean, + ): InjectedPanelAttributes; getHeadingAttributes(uuid: UUID): InjectedHeadingAttributes; - getButtonAttributes(uuid: UUID): InjectedButtonAttributes; + getButtonAttributes( + uuid: UUID, + dangerouslySetExpanded?: boolean, + ): InjectedButtonAttributes; } const Context = React.createContext(null as AccordionContext | null); @@ -65,16 +71,22 @@ export class Provider extends React.PureComponent< return this.state.isItemExpanded(key); }; - getPanelAttributes = (key: UUID): InjectedPanelAttributes => { - return this.state.getPanelAttributes(key); + getPanelAttributes = ( + key: UUID, + dangerouslySetExpanded?: boolean, + ): InjectedPanelAttributes => { + return this.state.getPanelAttributes(key, dangerouslySetExpanded); }; getHeadingAttributes = (key: UUID): InjectedHeadingAttributes => { return this.state.getHeadingAttributes(key); }; - getButtonAttributes = (key: UUID): InjectedButtonAttributes => { - return this.state.getButtonAttributes(key); + getButtonAttributes = ( + key: UUID, + dangerouslySetExpanded?: boolean, + ): InjectedButtonAttributes => { + return this.state.getButtonAttributes(key, dangerouslySetExpanded); }; render(): JSX.Element { diff --git a/src/components/AccordionItem.tsx b/src/components/AccordionItem.tsx index b36af958..ca69585b 100644 --- a/src/components/AccordionItem.tsx +++ b/src/components/AccordionItem.tsx @@ -12,6 +12,7 @@ import { type Props = DivAttributes & { uuid?: UUID; activeClassName?: string; + dangerouslySetExpanded?: boolean; }; const defaultProps = { @@ -40,10 +41,13 @@ export default class AccordionItem extends React.Component { }; render(): JSX.Element { - const { uuid = this.instanceUuid } = this.props; + const { uuid = this.instanceUuid, dangerouslySetExpanded } = this.props; return ( - + {this.renderChildren} ); diff --git a/src/components/ItemContext.tsx b/src/components/ItemContext.tsx index 0bd4ff9a..11836318 100644 --- a/src/components/ItemContext.tsx +++ b/src/components/ItemContext.tsx @@ -17,6 +17,7 @@ type ProviderProps = { children?: React.ReactNode; uuid: UUID; accordionContext: AccordionContext; + dangerouslySetExpanded?: boolean; }; export type ProviderWrapperProps = Pick< @@ -42,13 +43,20 @@ class Provider extends React.Component { }; renderChildren = (accordionContext: AccordionContext): JSX.Element => { - const { uuid } = this.props; + const { uuid, dangerouslySetExpanded } = this.props; - const expanded = accordionContext.isItemExpanded(uuid); + const expanded = + dangerouslySetExpanded ?? accordionContext.isItemExpanded(uuid); const disabled = accordionContext.isItemDisabled(uuid); - const panelAttributes = accordionContext.getPanelAttributes(uuid); + const panelAttributes = accordionContext.getPanelAttributes( + uuid, + dangerouslySetExpanded, + ); const headingAttributes = accordionContext.getHeadingAttributes(uuid); - const buttonAttributes = accordionContext.getButtonAttributes(uuid); + const buttonAttributes = accordionContext.getButtonAttributes( + uuid, + dangerouslySetExpanded, + ); return ( { - const expanded = this.isItemExpanded(uuid); + const expanded = dangerouslySetExpanded ?? this.isItemExpanded(uuid); return { role: this.allowMultipleExpanded ? undefined : 'region', @@ -105,8 +106,9 @@ export default class AccordionStore { public readonly getButtonAttributes = ( uuid: UUID, + dangerouslySetExpanded?: boolean, ): InjectedButtonAttributes => { - const expanded = this.isItemExpanded(uuid); + const expanded = dangerouslySetExpanded ?? this.isItemExpanded(uuid); const disabled = this.isItemDisabled(uuid); return { diff --git a/tslint.json b/tslint.json index 2270425b..63e44436 100644 --- a/tslint.json +++ b/tslint.json @@ -16,7 +16,6 @@ "typedef": [ true, "call-signature", - "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", diff --git a/yarn.lock b/yarn.lock index 7442cd28..48898112 100644 --- a/yarn.lock +++ b/yarn.lock @@ -179,6 +179,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA== +"@babel/helper-plugin-utils@^7.10.1", "@babel/helper-plugin-utils@^7.8.0": + version "7.10.3" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.3.tgz#aac45cccf8bc1873b99a85f34bceef3beb5d3244" + integrity sha512-j/+j8NAWUTxOtx4LKHybpSClxHoq6I91DQ/mKgAXn5oNUPIUiGppjPIX3TDtJWPrdfP9Kfl7e4fgVMiQR9VE/g== + "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.4.4.tgz#a47e02bc91fb259d2e6727c2a30013e3ac13c4a2" @@ -280,6 +285,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-json-strings" "^7.2.0" +"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1": + version "7.10.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz#02dca21673842ff2fe763ac253777f235e9bbf78" + integrity sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA== + dependencies: + "@babel/helper-plugin-utils" "^7.10.1" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0" + "@babel/plugin-proposal-object-rest-spread@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz#1ef173fcf24b3e2df92a678f027673b55e7e3005" @@ -326,6 +339,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9" + integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ== + dependencies: + "@babel/helper-plugin-utils" "^7.8.0" + "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e" @@ -2586,10 +2606,10 @@ diff-sequences@^24.3.0: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975" integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw== -diff@^3.2.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" - integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== +diff@^4.0.1: + version "4.0.2" + resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" + integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A== diffie-hellman@^5.0.0: version "5.0.3" @@ -5205,6 +5225,11 @@ minimist@^1.1.1, minimist@^1.2.0: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= +minimist@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" + integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + minimist@~0.0.1: version "0.0.10" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" @@ -5256,6 +5281,13 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0: dependencies: minimist "0.0.8" +mkdirp@^0.5.3: + version "0.5.5" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" + integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== + dependencies: + minimist "^1.2.5" + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -6039,10 +6071,10 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@^1.16.3: - version "1.18.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" - integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== +prettier@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4" + integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg== pretty-error@^2.0.2: version "2.1.1" @@ -7464,7 +7496,12 @@ trim-right@^1.0.1: resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM= -tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.10.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" + integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== + +tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== @@ -7474,46 +7511,46 @@ tslint-config-prettier@^1.18.0: resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37" integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg== -tslint-microsoft-contrib@^6.1.0: +tslint-microsoft-contrib@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/tslint-microsoft-contrib/-/tslint-microsoft-contrib-6.2.0.tgz#8aa0f40584d066d05e6a5e7988da5163b85f2ad4" integrity sha512-6tfi/2tHqV/3CL77pULBcK+foty11Rr0idRDxKnteTaKm6gWF9qmaCNU17HVssOuwlYNyOmd9Jsmjd+1t3a3qw== dependencies: tsutils "^2.27.2 <2.29.0" -tslint-plugin-prettier@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-2.0.1.tgz#95b6a3b766622ffc44375825d7760225c50c3680" - integrity sha512-4FX9JIx/1rKHIPJNfMb+ooX1gPk5Vg3vNi7+dyFYpLO+O57F4g+b/fo1+W/G0SUOkBLHB/YKScxjX/P+7ZT/Tw== +tslint-plugin-prettier@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-2.3.0.tgz#73fe71bf9f03842ac48c104122ca9b1de012ecf4" + integrity sha512-F9e4K03yc9xuvv+A0v1EmjcnDwpz8SpCD8HzqSDe0eyg34cBinwn9JjmnnRrNAs4HdleRQj7qijp+P/JTxt4vA== dependencies: eslint-plugin-prettier "^2.2.0" lines-and-columns "^1.1.6" tslib "^1.7.1" -tslint-react@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-4.0.0.tgz#b4bb4c01c32448cb14d23f143a2f5e4989bb961e" - integrity sha512-9fNE0fm9zNDx1+b6hgy8rgDN2WsQLRiIrn3+fbqm0tazBVF6jiaCFAITxmU+WSFWYE03Xhp1joCircXOe1WVAQ== +tslint-react@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-5.0.0.tgz#d0ae644e8163bdd3e134012e9353094904e8dd44" + integrity sha512-/IbcSmoBPlFic8kQaRfQ4knTY4mivwo5LVzvozvX6Dyu2ynEnrh1dIcR2ujjyp/IodXqY/H5GbxFxSMo/Kf2Hg== dependencies: - tsutils "^3.9.1" + tsutils "^3.17.1" -tslint@^5.14.0: - version "5.18.0" - resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.18.0.tgz#f61a6ddcf372344ac5e41708095bbf043a147ac6" - integrity sha512-Q3kXkuDEijQ37nXZZLKErssQVnwCV/+23gFEMROi8IlbaBG6tXqLPQJ5Wjcyt/yHPKBC+hD5SzuGaMora+ZS6w== +tslint@^6.1.2: + version "6.1.2" + resolved "https://registry.yarnpkg.com/tslint/-/tslint-6.1.2.tgz#2433c248512cc5a7b2ab88ad44a6b1b34c6911cf" + integrity sha512-UyNrLdK3E0fQG/xWNqAFAC5ugtFyPO4JJR1KyyfQAyzR8W0fTRrC91A8Wej4BntFzcvETdCSDa/4PnNYJQLYiA== dependencies: "@babel/code-frame" "^7.0.0" builtin-modules "^1.1.1" chalk "^2.3.0" commander "^2.12.1" - diff "^3.2.0" + diff "^4.0.1" glob "^7.1.1" js-yaml "^3.13.1" minimatch "^3.0.4" - mkdirp "^0.5.1" + mkdirp "^0.5.3" resolve "^1.3.2" semver "^5.3.0" - tslib "^1.8.0" + tslib "^1.10.0" tsutils "^2.29.0" "tsutils@^2.27.2 <2.29.0": @@ -7530,10 +7567,10 @@ tsutils@^2.29.0: dependencies: tslib "^1.8.1" -tsutils@^3.9.1: - version "3.14.0" - resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.14.0.tgz#bf8d5a7bae5369331fa0f2b0a5a10bd7f7396c77" - integrity sha512-SmzGbB0l+8I0QwsPgjooFRaRvHLBLNYM8SeQ0k6rtNDru5sCGeLJcZdwilNndN+GysuFjF5EIYgN8GfFG6UeUw== +tsutils@^3.17.1: + version "3.17.1" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" + integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g== dependencies: tslib "^1.8.1" @@ -7579,10 +7616,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^3.5.2: - version "3.5.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c" - integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA== +typescript@^3.9.5: + version "3.9.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36" + integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ== ua-parser-js@^0.7.18: version "0.7.20" From d1ea367ae36c421adf6bd75c1dd9dad3d1553e99 Mon Sep 17 00:00:00 2001 From: Emilia Zapata Date: Wed, 1 Jul 2020 11:55:29 +1200 Subject: [PATCH 2/2] docs(demo/readme): add state override warnings --- README.md | 10 ++++++++-- demo/src/index.tsx | 5 +++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b5259092..5902cd97 100644 --- a/README.md +++ b/README.md @@ -97,8 +97,8 @@ Allow the only remaining expanded item to be collapsed. #### preExpanded: `string[]` [_optional_, default: `[]`] -Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one -of these strings will be expanded on mount. +Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches +any one of these strings will be expanded on mount. #### className : `string` [*optional*, default: `'accordion'`] @@ -121,6 +121,12 @@ Class(es) to apply to element. Recommended for use with `onChange`. Will be auto-generated if not provided. +#### dangerouslySetExpanding: `boolean` [*optional*] + +Enables external control of the expansion. + +> Warning: This may impact accessibility negatively, use at your own risk + --- ### AccordionItemHeading diff --git a/demo/src/index.tsx b/demo/src/index.tsx index 66577d44..8962b72f 100644 --- a/demo/src/index.tsx +++ b/demo/src/index.tsx @@ -209,13 +209,14 @@ const App = (): JSX.Element => ( {placeholders.map((placeholder: Placeholder, i: number) => { - const dangerouslySetExpanded = i < 2 ? true : false; + const isExpanded = i < 2; return (