feat(popover): add state hook prop

[richbachman]

• Added state prop to Popover
• Added tests and stories
• Added example to Popover docs page
• Expanded Disclosure state hook prop examples based on Is it possible to externally control a Disclosure's open/close state? #1578

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d4bfd7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@twilio-paste/popover	Patch
@twilio-paste/core	Patch
@twilio-paste/non-modal-dialog-primitive	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 5d4bfd7

🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-docs/deploys/60e5da830575f50008b52aa3

😎 Browse the preview: https://deploy-preview-1606--paste-docs.netlify.app

[github-actions]

Size Change: +76 B (0%)

Total Size: 599 kB

Filename	Size	Change
packages/paste-core/components/popover/dist/index.es.js	1.48 kB	+38 B (+3%)
packages/paste-core/components/popover/dist/index.js	1.83 kB	+38 B (+2%)

ℹ️ View Unchanged

Filename	Size
packages/paste-core/components/alert-dialog/dist/index.es.js	3.05 kB
packages/paste-core/components/alert-dialog/dist/index.js	3.35 kB
packages/paste-core/components/alert/dist/index.es.js	1.26 kB
packages/paste-core/components/alert/dist/index.js	1.61 kB
packages/paste-core/components/anchor/dist/index.es.js	1.52 kB
packages/paste-core/components/anchor/dist/index.js	1.83 kB
packages/paste-core/components/avatar/dist/index.es.js	1.71 kB
packages/paste-core/components/avatar/dist/index.js	2.04 kB
packages/paste-core/components/base-radio-checkbox/dist/index.es.js	1.13 kB
packages/paste-core/components/base-radio-checkbox/dist/index.js	1.5 kB
packages/paste-core/components/breadcrumb/dist/index.es.js	1.08 kB
packages/paste-core/components/breadcrumb/dist/index.js	1.41 kB
packages/paste-core/components/button/dist/index.es.js	5.53 kB
packages/paste-core/components/button/dist/index.js	5.78 kB
packages/paste-core/components/card/dist/index.es.js	697 B
packages/paste-core/components/card/dist/index.js	1.04 kB
packages/paste-core/components/checkbox/dist/index.es.js	2.34 kB
packages/paste-core/components/checkbox/dist/index.js	2.65 kB
packages/paste-core/components/combobox/dist/index.es.js	13.2 kB
packages/paste-core/components/combobox/dist/index.js	13.5 kB
packages/paste-core/components/date-picker/dist/index.es.js	8.3 kB
packages/paste-core/components/date-picker/dist/index.js	8.65 kB
packages/paste-core/components/disclosure/dist/index.es.js	2.26 kB
packages/paste-core/components/disclosure/dist/index.js	2.6 kB
packages/paste-core/components/form/dist/index.es.js	256 B
packages/paste-core/components/form/dist/index.js	692 B
packages/paste-core/components/heading/dist/index.es.js	889 B
packages/paste-core/components/heading/dist/index.js	1.23 kB
packages/paste-core/components/help-text/dist/index.es.js	923 B
packages/paste-core/components/help-text/dist/index.js	1.27 kB
packages/paste-core/components/inline-control-group/dist/index.es.js	956 B
packages/paste-core/components/inline-control-group/dist/index.js	1.3 kB
packages/paste-core/components/input-box/dist/index.es.js	1.93 kB
packages/paste-core/components/input-box/dist/index.js	2.23 kB
packages/paste-core/components/input/dist/index.es.js	1.47 kB
packages/paste-core/components/input/dist/index.js	1.82 kB
packages/paste-core/components/label/dist/index.es.js	1.13 kB
packages/paste-core/components/label/dist/index.js	1.48 kB
packages/paste-core/components/list/dist/index.es.js	778 B
packages/paste-core/components/list/dist/index.js	1.13 kB
packages/paste-core/components/menu/dist/index.es.js	1.9 kB
packages/paste-core/components/menu/dist/index.js	2.23 kB
packages/paste-core/components/modal/dist/index.es.js	2.66 kB
packages/paste-core/components/modal/dist/index.js	2.99 kB
packages/paste-core/components/pagination/dist/index.es.js	3.04 kB
packages/paste-core/components/pagination/dist/index.js	3.31 kB
packages/paste-core/components/paragraph/dist/index.es.js	570 B
packages/paste-core/components/paragraph/dist/index.js	914 B
packages/paste-core/components/radio-group/dist/index.es.js	1.59 kB
packages/paste-core/components/radio-group/dist/index.js	1.93 kB
packages/paste-core/components/screen-reader-only/dist/index.es.js	652 B
packages/paste-core/components/screen-reader-only/dist/index.js	996 B
packages/paste-core/components/select/dist/index.es.js	1.55 kB
packages/paste-core/components/select/dist/index.js	1.87 kB
packages/paste-core/components/separator/dist/index.es.js	758 B
packages/paste-core/components/separator/dist/index.js	1.1 kB
packages/paste-core/components/spinner/dist/index.es.js	744 B
packages/paste-core/components/spinner/dist/index.js	1.14 kB
packages/paste-core/components/table/dist/index.es.js	1.74 kB
packages/paste-core/components/table/dist/index.js	2.07 kB
packages/paste-core/components/tabs/dist/index.es.js	2.01 kB
packages/paste-core/components/tabs/dist/index.js	2.33 kB
packages/paste-core/components/textarea/dist/index.es.js	5.04 kB
packages/paste-core/components/textarea/dist/index.js	5.08 kB
packages/paste-core/components/time-picker/dist/index.es.js	14.2 kB
packages/paste-core/components/time-picker/dist/index.js	14.3 kB
packages/paste-core/components/toast/dist/index.es.js	3.04 kB
packages/paste-core/components/toast/dist/index.js	3.35 kB
packages/paste-core/components/tooltip/dist/index.es.js	1.1 kB
packages/paste-core/components/tooltip/dist/index.js	1.45 kB
packages/paste-core/components/truncate/dist/index.es.js	604 B
packages/paste-core/components/truncate/dist/index.js	947 B
packages/paste-core/components/typography/dist/index.es.js	1.38 kB
packages/paste-core/components/typography/dist/index.js	1.74 kB
packages/paste-core/core-bundle/dist/alert-dialog.js	210 B
packages/paste-core/core-bundle/dist/alert.js	194 B
packages/paste-core/core-bundle/dist/anchor.js	197 B
packages/paste-core/core-bundle/dist/animation-library.js	211 B
packages/paste-core/core-bundle/dist/aspect-ratio.js	205 B
packages/paste-core/core-bundle/dist/avatar.js	200 B
packages/paste-core/core-bundle/dist/base-radio-checkbox.js	218 B
packages/paste-core/core-bundle/dist/box.js	195 B
packages/paste-core/core-bundle/dist/breadcrumb.js	204 B
packages/paste-core/core-bundle/dist/button.js	201 B
packages/paste-core/core-bundle/dist/card.js	199 B
packages/paste-core/core-bundle/dist/checkbox.js	201 B
packages/paste-core/core-bundle/dist/combobox-primitive.js	213 B
packages/paste-core/core-bundle/dist/combobox.js	203 B
packages/paste-core/core-bundle/dist/customization.js	206 B
packages/paste-core/core-bundle/dist/date-picker.js	205 B
packages/paste-core/core-bundle/dist/design-tokens.js	209 B
packages/paste-core/core-bundle/dist/disclosure-primitive.js	213 B
packages/paste-core/core-bundle/dist/disclosure.js	204 B
packages/paste-core/core-bundle/dist/dropdown-library.js	211 B
packages/paste-core/core-bundle/dist/flex.js	196 B
packages/paste-core/core-bundle/dist/form.js	197 B
packages/paste-core/core-bundle/dist/grid.js	196 B
packages/paste-core/core-bundle/dist/heading.js	199 B
packages/paste-core/core-bundle/dist/help-text.js	204 B
packages/paste-core/core-bundle/dist/index.js	1.09 kB
packages/paste-core/core-bundle/dist/inline-control-group.js	218 B
packages/paste-core/core-bundle/dist/input-box.js	206 B
packages/paste-core/core-bundle/dist/input.js	200 B
packages/paste-core/core-bundle/dist/label.js	196 B
packages/paste-core/core-bundle/dist/list.js	195 B
packages/paste-core/core-bundle/dist/media-object.js	202 B
packages/paste-core/core-bundle/dist/menu-primitive.js	210 B
packages/paste-core/core-bundle/dist/menu.js	196 B
packages/paste-core/core-bundle/dist/modal-dialog-primitive.js	219 B
packages/paste-core/core-bundle/dist/modal.js	196 B
packages/paste-core/core-bundle/dist/non-modal-dialog-primitive.js	224 B
packages/paste-core/core-bundle/dist/pagination.js	199 B
packages/paste-core/core-bundle/dist/paragraph.js	202 B
packages/paste-core/core-bundle/dist/popover.js	201 B
packages/paste-core/core-bundle/dist/radio-group.js	208 B
packages/paste-core/core-bundle/dist/reakit-library.js	211 B
packages/paste-core/core-bundle/dist/screen-reader-only.js	214 B
packages/paste-core/core-bundle/dist/select.js	197 B
packages/paste-core/core-bundle/dist/separator.js	199 B
packages/paste-core/core-bundle/dist/sibling-box.js	206 B
packages/paste-core/core-bundle/dist/spinner.js	198 B
packages/paste-core/core-bundle/dist/stack.js	200 B
packages/paste-core/core-bundle/dist/style-props.js	202 B
packages/paste-core/core-bundle/dist/styling-library.js	210 B
packages/paste-core/core-bundle/dist/table.js	195 B
packages/paste-core/core-bundle/dist/tabs-primitive.js	210 B
packages/paste-core/core-bundle/dist/tabs.js	196 B
packages/paste-core/core-bundle/dist/text.js	195 B
packages/paste-core/core-bundle/dist/textarea.js	198 B
packages/paste-core/core-bundle/dist/theme.js	196 B
packages/paste-core/core-bundle/dist/time-picker.js	206 B
packages/paste-core/core-bundle/dist/toast.js	195 B
packages/paste-core/core-bundle/dist/tooltip-primitive.js	212 B
packages/paste-core/core-bundle/dist/tooltip.js	198 B
packages/paste-core/core-bundle/dist/truncate.js	198 B
packages/paste-core/core-bundle/dist/types.js	196 B
packages/paste-core/core-bundle/dist/uid-library.js	208 B
packages/paste-core/layout/aspect-ratio/dist/index.es.js	709 B
packages/paste-core/layout/aspect-ratio/dist/index.js	1.11 kB
packages/paste-core/layout/flex/dist/index.es.js	2.1 kB
packages/paste-core/layout/flex/dist/index.js	2.41 kB
packages/paste-core/layout/grid/dist/index.es.js	1.65 kB
packages/paste-core/layout/grid/dist/index.js	1.96 kB
packages/paste-core/layout/media-object/dist/index.es.js	577 B
packages/paste-core/layout/media-object/dist/index.js	987 B
packages/paste-core/layout/stack/dist/index.es.js	1.14 kB
packages/paste-core/layout/stack/dist/index.js	1.47 kB
packages/paste-core/primitives/box/dist/index.es.js	3.01 kB
packages/paste-core/primitives/box/dist/index.js	3.28 kB
packages/paste-core/primitives/combobox/dist/index.es.js	142 B
packages/paste-core/primitives/combobox/dist/index.js	561 B
packages/paste-core/primitives/disclosure/dist/index.es.js	155 B
packages/paste-core/primitives/disclosure/dist/index.js	570 B
packages/paste-core/primitives/menu/dist/index.es.js	209 B
packages/paste-core/primitives/menu/dist/index.js	622 B
packages/paste-core/primitives/modal-dialog/dist/index.es.js	23.5 kB
packages/paste-core/primitives/modal-dialog/dist/index.js	23.4 kB
packages/paste-core/primitives/non-modal-dialog/dist/index.es.js	176 B
packages/paste-core/primitives/non-modal-dialog/dist/index.js	590 B
packages/paste-core/primitives/sibling-box/dist/index.es.js	744 B
packages/paste-core/primitives/sibling-box/dist/index.js	1.16 kB
packages/paste-core/primitives/tabs/dist/index.es.js	153 B
packages/paste-core/primitives/tabs/dist/index.js	572 B
packages/paste-core/primitives/text/dist/index.es.js	2.69 kB
packages/paste-core/primitives/text/dist/index.js	2.98 kB
packages/paste-core/primitives/tooltip/dist/index.es.js	163 B
packages/paste-core/primitives/tooltip/dist/index.js	578 B
packages/paste-customization/dist/index.es.js	2.08 kB
packages/paste-customization/dist/index.js	2.38 kB
packages/paste-design-tokens/dist/themes/console/tokens.common.js	3.72 kB
packages/paste-design-tokens/dist/themes/console/tokens.es6.js	3.67 kB
packages/paste-design-tokens/dist/themes/dark/tokens.common.js	3.15 kB
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js	3.1 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js	3.11 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js	3.06 kB
packages/paste-design-tokens/dist/tokens.common.js	3.76 kB
packages/paste-design-tokens/dist/tokens.es6.js	3.7 kB
packages/paste-libraries/animation/dist/index.es.js	24.2 kB
packages/paste-libraries/animation/dist/index.js	24.5 kB
packages/paste-libraries/dropdown/dist/index.es.js	26.4 kB
packages/paste-libraries/dropdown/dist/index.js	26.5 kB
packages/paste-libraries/reakit/dist/index.es.js	48.4 kB
packages/paste-libraries/reakit/dist/index.js	48.6 kB
packages/paste-libraries/styling/dist/index.es.js	26.6 kB
packages/paste-libraries/styling/dist/index.js	27 kB
packages/paste-libraries/uid/dist/index.es.js	1.72 kB
packages/paste-libraries/uid/dist/index.js	2.1 kB
packages/paste-style-props/dist/index.es.js	5.11 kB
packages/paste-style-props/dist/index.js	5.63 kB
packages/paste-theme/dist/index.es.js	3.13 kB
packages/paste-theme/dist/index.js	3.34 kB
packages/paste-types/dist/index.es.js	20 B
packages/paste-types/dist/index.js	20 B

_{compressed-size-action}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5d4bfd7:

Sandbox	Source
@twilio-paste/nextjs-template	Configuration

[cypress]

---

Test summary

3 • 0 • 0 • 0 • 0

---

Run details

Project	Paste
Status	Passed
Commit	5d4bfd7
Started	Jul 7, 2021 5:02 PM
Ended	Jul 7, 2021 5:03 PM
Duration	00:49 💡
OS	Linux Ubuntu - 20.04
Browser	Electron 83

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[gloriliale]

Looks great! Definitely good to include the links to the Reakit Docs in the state examples sections of our docs, helped me understand the hooks more clearly and know that I could customize more actions if I wanted.

[SiTaggart]

Outside that one question on refs, it looks good to me.