diff --git a/app/assets/icons/ic-authenticator.svg b/app/assets/icons/ic-authenticator.svg new file mode 100644 index 000000000..9a1193919 --- /dev/null +++ b/app/assets/icons/ic-authenticator.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-code.svg b/app/assets/icons/ic-code.svg new file mode 100644 index 000000000..4a871e270 --- /dev/null +++ b/app/assets/icons/ic-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-markdown.svg b/app/assets/icons/ic-markdown.svg new file mode 100644 index 000000000..bceed54b3 --- /dev/null +++ b/app/assets/icons/ic-markdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-menu-arrow-down.svg b/app/assets/icons/ic-menu-arrow-down.svg new file mode 100644 index 000000000..be1d6a489 --- /dev/null +++ b/app/assets/icons/ic-menu-arrow-down.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/assets/icons/ic-spreadsheets.svg b/app/assets/icons/ic-spreadsheets.svg new file mode 100644 index 000000000..70f175be2 --- /dev/null +++ b/app/assets/icons/ic-spreadsheets.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-tasks.svg b/app/assets/icons/ic-tasks.svg new file mode 100644 index 000000000..0f8ef0587 --- /dev/null +++ b/app/assets/icons/ic-tasks.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-text-paragraph.svg b/app/assets/icons/ic-text-paragraph.svg new file mode 100644 index 000000000..4f43cdc0c --- /dev/null +++ b/app/assets/icons/ic-text-paragraph.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx new file mode 100644 index 000000000..e06994bae --- /dev/null +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -0,0 +1,119 @@ +import { + ListboxArrow, + ListboxButton, + ListboxInput, + ListboxList, + ListboxOption, + ListboxPopover, +} from '@reach/listbox'; +import VisuallyHidden from '@reach/visually-hidden'; +import { FunctionComponent } from 'preact'; +import { IconType, Icon } from './Icon'; +import { useState } from 'preact/hooks'; + +export type DropdownItem = { + icon?: IconType; + label: string; + value: string; +}; + +type DropdownProps = { + id: string; + label: string; + items: DropdownItem[]; + defaultValue: string; + onChange: (value: string) => void; +}; + +type ListboxButtonProps = { + icon?: IconType; + value: string | null; + label: string; + isExpanded: boolean; +}; + +const CustomDropdownButton: FunctionComponent = ({ + label, + isExpanded, + icon, +}) => ( + <> +
+ {icon ? ( +
+ +
+ ) : null} +
{label}
+
+ + + + +); + +export const Dropdown: FunctionComponent = ({ + id, + label, + items, + defaultValue, + onChange, +}) => { + const [value, setValue] = useState(defaultValue); + + const labelId = `${id}-label`; + + const handleChange = (value: string) => { + setValue(value); + onChange(value); + }; + + return ( + <> + {label} + + { + const current = items.find((item) => item.value === value); + const icon = current ? current?.icon : null; + return CustomDropdownButton({ + value, + label, + isExpanded, + ...(icon ? { icon } : null), + }); + }} + /> + +
+ + {items.map((item) => ( + + {item.icon ? ( +
+ +
+ ) : null} +
{item.label}
+ + ))} + +
+ + + + ); +}; diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx index e72804ae2..9e2ca1b1a 100644 --- a/app/assets/javascripts/components/Icon.tsx +++ b/app/assets/javascripts/components/Icon.tsx @@ -1,4 +1,5 @@ import PencilOffIcon from '../../icons/ic-pencil-off.svg'; +import PlainTextIcon from '../../icons/ic-text-paragraph.svg'; import RichTextIcon from '../../icons/ic-text-rich.svg'; import TrashIcon from '../../icons/ic-trash.svg'; import PinIcon from '../../icons/ic-pin.svg'; @@ -13,6 +14,12 @@ import PasswordIcon from '../../icons/ic-textbox-password.svg'; import TrashSweepIcon from '../../icons/ic-trash-sweep.svg'; import MoreIcon from '../../icons/ic-more.svg'; import TuneIcon from '../../icons/ic-tune.svg'; +import MenuArrowDownIcon from '../../icons/ic-menu-arrow-down.svg'; +import AuthenticatorIcon from '../../icons/ic-authenticator.svg'; +import SpreadsheetsIcon from '../../icons/ic-spreadsheets.svg'; +import TasksIcon from '../../icons/ic-tasks.svg'; +import MarkdownIcon from '../../icons/ic-markdown.svg'; +import CodeIcon from '../../icons/ic-code.svg'; import AccessibilityIcon from '../../icons/ic-accessibility.svg'; import HelpIcon from '../../icons/ic-help.svg'; @@ -35,7 +42,13 @@ import { FunctionalComponent } from 'preact'; const ICONS = { 'pencil-off': PencilOffIcon, + 'plain-text': PlainTextIcon, 'rich-text': RichTextIcon, + code: CodeIcon, + markdown: MarkdownIcon, + authenticator: AuthenticatorIcon, + spreadsheets: SpreadsheetsIcon, + tasks: TasksIcon, trash: TrashIcon, pin: PinIcon, unpin: UnpinIcon, @@ -64,6 +77,7 @@ const ICONS = { check: CheckIcon, 'check-bold': CheckBoldIcon, 'account-circle': AccountCircleIcon, + 'menu-arrow-down': MenuArrowDownIcon, }; export type IconType = keyof typeof ICONS; diff --git a/app/assets/javascripts/directives/views/editorMenu.ts b/app/assets/javascripts/directives/views/editorMenu.ts index 3f2d0244e..2c41dc302 100644 --- a/app/assets/javascripts/directives/views/editorMenu.ts +++ b/app/assets/javascripts/directives/views/editorMenu.ts @@ -4,53 +4,44 @@ import { SNComponent, SNItem, ComponentArea } from '@standardnotes/snjs'; import { isDesktopApplication } from '@/utils'; import template from '%/directives/editor-menu.pug'; import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl'; -import { ComponentMutator } from '@standardnotes/snjs'; interface EditorMenuScope { - callback: (component: SNComponent) => void - selectedEditorUuid: string - currentItem: SNItem - application: WebApplication + callback: (component: SNComponent) => void; + selectedEditorUuid: string; + currentItem: SNItem; + application: WebApplication; } class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { - - callback!: () => (component: SNComponent) => void - selectedEditorUuid!: string - currentItem!: SNItem - application!: WebApplication + callback!: () => (component: SNComponent) => void; + selectedEditorUuid!: string; + currentItem!: SNItem; + application!: WebApplication; /* @ngInject */ - constructor( - $timeout: ng.ITimeoutService, - ) { + constructor($timeout: ng.ITimeoutService) { super($timeout); this.state = { - isDesktop: isDesktopApplication() + isDesktop: isDesktopApplication(), }; } public isEditorSelected(editor: SNComponent) { - if(!this.selectedEditorUuid) { + if (!this.selectedEditorUuid) { return false; } return this.selectedEditorUuid === editor.uuid; } - public isEditorDefault(editor: SNComponent) { - return this.state.defaultEditor?.uuid === editor.uuid; - } - $onInit() { super.$onInit(); - const editors = this.application.componentManager!.componentsForArea(ComponentArea.Editor) + const editors = this.application + .componentManager!.componentsForArea(ComponentArea.Editor) .sort((a, b) => { return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; }); - const defaultEditor = editors.filter((e) => e.isDefaultEditor())[0]; this.setState({ editors: editors, - defaultEditor: defaultEditor }); } @@ -67,46 +58,9 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { }); } - toggleDefaultForEditor(editor: SNComponent) { - if (this.state.defaultEditor === editor) { - this.removeEditorDefault(editor); - } else { - this.makeEditorDefault(editor); - } - } - offlineAvailableForComponent(component: SNComponent) { return component.local_url && this.state.isDesktop; } - - makeEditorDefault(component: SNComponent) { - const currentDefault = this.application.componentManager! - .componentsForArea(ComponentArea.Editor) - .filter((e) => e.isDefaultEditor())[0]; - if (currentDefault) { - this.application.changeItem(currentDefault.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - } - this.application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = true; - }); - this.setState({ - defaultEditor: component - }); - } - - removeEditorDefault(component: SNComponent) { - this.application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - this.setState({ - defaultEditor: null - }); - } } export class EditorMenu extends WebDirective { @@ -121,7 +75,7 @@ export class EditorMenu extends WebDirective { callback: '&', selectedEditorUuid: '=', currentItem: '=', - application: '=' + application: '=', }; } } diff --git a/app/assets/javascripts/preferences/panes/General.tsx b/app/assets/javascripts/preferences/panes/General.tsx index b4fa9ad8e..826485fef 100644 --- a/app/assets/javascripts/preferences/panes/General.tsx +++ b/app/assets/javascripts/preferences/panes/General.tsx @@ -2,8 +2,7 @@ import { WebApplication } from '@/ui_models/application'; import { AppState } from '@/ui_models/app_state'; import { FunctionComponent } from 'preact'; import { PreferencesPane } from '../components'; -import { ErrorReporting } from './general-segments'; -import { Tools } from './general-segments/Tools'; +import { ErrorReporting, Tools, Defaults } from './general-segments'; interface GeneralProps { appState: AppState; @@ -13,6 +12,7 @@ interface GeneralProps { export const General: FunctionComponent = (props) => ( + ); diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx new file mode 100644 index 000000000..51a6062d1 --- /dev/null +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -0,0 +1,160 @@ +import { Dropdown, DropdownItem } from '@/components/Dropdown'; +import { IconType } from '@/components/Icon'; +import { + PreferencesGroup, + PreferencesSegment, + Subtitle, + Text, + Title, +} from '@/preferences/components'; +import { WebApplication } from '@/ui_models/application'; +import { + ComponentArea, + ComponentMutator, + SNComponent, +} from '@standardnotes/snjs'; +import { FunctionComponent } from 'preact'; +import { useEffect, useState } from 'preact/hooks'; + +type Props = { + application: WebApplication; +}; + +enum EditorIdentifier { + PlainEditor = 'plain-editor', + BoldEditor = 'org.standardnotes.bold-editor', + CodeEditor = 'org.standardnotes.code-editor', + MarkdownBasic = 'org.standardnotes.simple-markdown-editor', + MarkdownMath = 'org.standardnotes.fancy-markdown-editor', + MarkdownMinimist = 'org.standardnotes.minimal-markdown-editor', + MarkdownPro = 'org.standardnotes.advanced-markdown-editor', + PlusEditor = 'org.standardnotes.plus-editor', + SecureSpreadsheets = 'org.standardnotes.standard-sheets', + TaskEditor = 'org.standardnotes.simple-task-editor', + TokenVault = 'org.standardnotes.token-vault', +} + +const getEditorIconType = (identifier: string): IconType | null => { + switch (identifier) { + case EditorIdentifier.BoldEditor: + case EditorIdentifier.PlusEditor: + return 'rich-text'; + case EditorIdentifier.MarkdownBasic: + case EditorIdentifier.MarkdownMath: + case EditorIdentifier.MarkdownMinimist: + case EditorIdentifier.MarkdownPro: + return 'markdown'; + case EditorIdentifier.TokenVault: + return 'authenticator'; + case EditorIdentifier.SecureSpreadsheets: + return 'spreadsheets'; + case EditorIdentifier.TaskEditor: + return 'tasks'; + case EditorIdentifier.CodeEditor: + return 'code'; + } + return null; +}; + +const makeEditorDefault = ( + application: WebApplication, + component: SNComponent, + currentDefault: SNComponent +) => { + if (currentDefault) { + removeEditorDefault(application, currentDefault); + } + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = true; + }); +}; + +const removeEditorDefault = ( + application: WebApplication, + component: SNComponent +) => { + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); +}; + +const getDefaultEditor = (application: WebApplication) => { + return application.componentManager + .componentsForArea(ComponentArea.Editor) + .filter((e) => e.isDefaultEditor())[0]; +}; + +export const Defaults: FunctionComponent = ({ application }) => { + const [editorItems, setEditorItems] = useState([]); + const [defaultEditorValue] = useState( + () => + getDefaultEditor(application)?.package_info?.identifier || + EditorIdentifier.PlainEditor + ); + + useEffect(() => { + const editors = application.componentManager + .componentsForArea(ComponentArea.Editor) + .map((editor) => { + const identifier = editor.package_info.identifier; + const iconType = getEditorIconType(identifier); + + return { + label: editor.name, + value: identifier, + ...(iconType ? { icon: iconType } : null), + }; + }) + .concat([ + { + icon: 'plain-text', + label: 'Plain Editor', + value: EditorIdentifier.PlainEditor, + }, + ]) + .sort((a, b) => { + return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1; + }); + + setEditorItems(editors); + }, [application]); + + const setDefaultEditor = (value: string) => { + const editors = application.componentManager.componentsForArea( + ComponentArea.Editor + ); + const currentDefault = getDefaultEditor(application); + + if (value !== EditorIdentifier.PlainEditor) { + const editorComponent = editors.filter( + (e) => e.package_info.identifier === value + )[0]; + makeEditorDefault(application, editorComponent, currentDefault); + } else { + removeEditorDefault(application, currentDefault); + } + }; + + return ( + + + Defaults +
+ Default Editor + New notes will be created using this editor. +
+ +
+
+ + + ); +}; diff --git a/app/assets/javascripts/preferences/panes/general-segments/index.ts b/app/assets/javascripts/preferences/panes/general-segments/index.ts index dd28d7a2c..42a057b5d 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/index.ts +++ b/app/assets/javascripts/preferences/panes/general-segments/index.ts @@ -1,2 +1,3 @@ export * from './ErrorReporting'; export * from './Tools'; +export * from './Defaults'; diff --git a/app/assets/stylesheets/_reach-sub.scss b/app/assets/stylesheets/_reach-sub.scss index fcb0da138..3d209c899 100644 --- a/app/assets/stylesheets/_reach-sub.scss +++ b/app/assets/stylesheets/_reach-sub.scss @@ -9,14 +9,13 @@ } [data-reach-dialog-overlay]::before { background-color: var(--sn-stylekit-contrast-background-color); - content: ""; + content: ''; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75; - } [data-reach-dialog-content] { diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index 6ecdf4abe..3567bff84 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -53,6 +53,41 @@ } } +.sn-dropdown-popover { + z-index: 3001; + + &[data-reach-listbox-popover] { + background: var(--sn-stylekit-background-color); + } +} + +.sn-dropdown-button { + @extend .rounded; + @extend .px-3\.5; + @extend .py-1\.75; + @extend .fit-content; + @extend .bg-default; + @extend .text-input; + @extend .color-text; + @extend .border-solid; + @extend .border-gray-300; + @extend .border-1; + @extend .min-w-55; +} + +.sn-dropdown-button-label { + @extend .flex; + @extend .items-center; +} + +.sn-dropdown-arrow { + @extend .flex; + + &.sn-dropdown-arrow-flipped { + transform: rotate(180deg); + } +} + /** Lesser specificity will give priority to reach's styles */ [data-reach-custom-checkbox-container].sn-switch { @extend .duration-150; @@ -114,6 +149,21 @@ &.sn-dropdown-item--no-icon { @extend .py-2; } + + .sn-dropdown-popover & { + @extend .bg-default; + } + + &[data-current-nav] { + color: var(--sn-stylekit-contrast-foreground-color); + @extend .bg-contrast; + @extend .hover\:color-text; + } + + .sn-dropdown-popover &[data-current-selected] { + background-color: var(--sn-stylekit-info-backdrop-color); + @extend .color-info; + } } .sn-tag { @@ -278,4 +328,4 @@ .select-none { user-select: none; -} \ No newline at end of file +} diff --git a/app/assets/templates/directives/editor-menu.pug b/app/assets/templates/directives/editor-menu.pug index 67710575f..7d278faca 100644 --- a/app/assets/templates/directives/editor-menu.pug +++ b/app/assets/templates/directives/editor-menu.pug @@ -11,11 +11,7 @@ menu-row( ng-repeat='editor in self.state.editors track by editor.uuid' action='self.selectComponent(editor)', - button-action='self.toggleDefaultForEditor(editor)', - button-class="self.isEditorSelected(editor) ? 'warning' : 'info'", - button-text="self.isEditorDefault(editor) ? 'Undefault' : 'Set Default'", circle="self.isEditorSelected(editor) && 'success'", - has-button='self.isEditorSelected(editor) || isEditorDefault(editor)', label='editor.name', subtitle="self.isEditorSelected(editor) && 'Version ' + editor.package_info.version", ) diff --git a/package.json b/package.json index 909ca1ec5..724336ae5 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,9 @@ "@reach/alert-dialog": "^0.13.0", "@reach/checkbox": "^0.13.2", "@reach/dialog": "^0.13.0", - "@standardnotes/sncrypto-web": "1.5.2", + "@reach/listbox": "^0.16.1", "@standardnotes/features": "1.6.1", + "@standardnotes/sncrypto-web": "1.5.2", "@standardnotes/snjs": "2.14.11", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index 3402204fe..4bf64aec4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1834,6 +1834,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/auto-id@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed" + integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/checkbox@^0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.13.2.tgz#b972b922cf6cea0c2bbabca0129c58307b566a4e" @@ -1853,6 +1861,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/descendants@0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f" + integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/dialog@0.13.0", "@reach/dialog@^0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.13.0.tgz#2110725c3b8a3c64685834cdc9f3ce5c15617809" @@ -1887,6 +1903,18 @@ "@reach/utils" "0.15.2" prop-types "^15.7.2" +"@reach/listbox@^0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.1.tgz#8a4a13cf171e9ba3118d2e6e72f3e7f17f4c2f80" + integrity sha512-2KQTYmxKvZW0XdBWGoV7E2gUWWBINJmfj2MDRmWbRNdTjsF9w3mTb09buTWQ2sznzF7DrLrwiBFv4b2egMfKOw== + dependencies: + "@reach/auto-id" "0.16.0" + "@reach/descendants" "0.16.1" + "@reach/machine" "0.16.0" + "@reach/popover" "0.16.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + "@reach/machine@0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.13.2.tgz#744302f5ce2d4e5fd0527ae0baa60d325b2325d8" @@ -1905,6 +1933,15 @@ "@xstate/fsm" "1.4.0" tslib "^2.3.0" +"@reach/machine@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3" + integrity sha512-c8SRQz2xGtg5M9aXuuM5pFgaV1ZW5/nyMIYpZzBwHUlNFKGO+VBhwedbnqUxO0yLcbgl3wPvjPh740O3YjqiHg== + dependencies: + "@reach/utils" "0.16.0" + "@xstate/fsm" "1.4.0" + tslib "^2.3.0" + "@reach/menu-button@^0.15.1": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe" @@ -1934,6 +1971,17 @@ tabbable "^4.0.0" tslib "^2.3.0" +"@reach/popover@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623" + integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA== + dependencies: + "@reach/portal" "0.16.0" + "@reach/rect" "0.16.0" + "@reach/utils" "0.16.0" + tabbable "^4.0.0" + tslib "^2.3.0" + "@reach/portal@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.0.tgz#bed220d41097deb1454a7928b22529ba10d3ea2b" @@ -1950,6 +1998,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/portal@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3" + integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/rect@0.15.2": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd" @@ -1961,6 +2017,17 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/rect@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16" + integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q== + dependencies: + "@reach/observe-rect" "1.2.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/utils@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844" @@ -1996,6 +2063,14 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/utils@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce" + integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q== + dependencies: + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/visually-hidden@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f"