rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: migrate dialogs & tooltips from reach-ui (#2314)

Browse Source
This commit is contained in:
Aman Harwara
2023-04-21 01:51:22 +05:30
committed by GitHub
parent 5a02003458
commit 9996dac00a
62 changed files with 387 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/cache/@ariakit-core-npm-0.1.1-af1bc2d80a-b4db09f0f0.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@ariakit-react-core-npm-0.1.2-97b6e8fa7d-c42738d48e.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@ariakit-react-npm-0.1.2-f728e3fe9e-5f6687b59a.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@floating-ui-core-npm-1.2.6-083bec342c-e4aa96c435.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@floating-ui-dom-npm-1.2.6-9d4be07ec3-2226c6c244.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@radix-ui-react-compose-refs-npm-1.0.0-ec19c72c12-fb98be2e27.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@radix-ui-react-slot-npm-1.0.1-8752e36473-a20693f8ce.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/@reach-alert-dialog-npm-0.18.0-35faccfb5e-34cd77249c.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/@reach-alert-npm-0.18.0-d5750d237f-679a90427b.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/@reach-dialog-npm-0.18.0-b83711f1cd-c87fe1a7be.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/@reach-tooltip-npm-0.18.0-71fda5ed5f-4080b15c1b.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/@reach-visually-hidden-npm-0.18.0-199c5bc693-675ad41121.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/detect-node-es-npm-1.1.0-2ad57e0b50-e46307d726.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/focus-lock-npm-0.9.2-6d20c4c409-7bb35e62c6.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/get-nonce-npm-1.0.1-6272950b34-e2614e43b4.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/react-clientside-effect-npm-1.2.6-4c95acf94f-7db6110027.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/react-focus-lock-npm-2.5.2-acf7c7a0c7-520b12a449.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/react-remove-scroll-bar-npm-2.3.4-7d25bbed45-b5ce5f2f98.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/react-remove-scroll-npm-2.4.3-7ae050ed05-c2f4277ee9.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/react-style-singleton-npm-2.2.1-e45b97b153-7ee8ef3aab.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/use-callback-ref-npm-1.3.0-6c0773783f-7913df383a.zip vendored
View File

Binary file not shown.

BIN
.yarn/cache/use-sidecar-npm-1.1.2-dfc322e94a-925d1922f9.zip vendored
View File

Binary file not shown.

7
packages/web/package.json
View File

@@ -30,14 +30,9 @@
"@babel/preset-typescript": "^7.18.6",
"@lexical/react": "0.9.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
"@reach/alert": "^0.18.0",
"@reach/alert-dialog": "^0.18.0",
"@reach/checkbox": "^0.18.0",
"@reach/dialog": "^0.18.0",
"@reach/disclosure": "^0.18.0",
"@reach/listbox": "^0.18.0",
"@reach/tooltip": "^0.18.0",
"@reach/visually-hidden": "^0.18.0",
"@simplewebauthn/browser": "^7.1.0",
"@standardnotes/authenticator": "^2.3.9",
"@standardnotes/autobiography-theme": "^1.2.7",
@@ -117,7 +112,9 @@
"app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
},
"dependencies": {
"@ariakit/react": "^0.1.2",
"@lexical/headless": "0.9.2",
"@radix-ui/react-slot": "^1.0.1",
"contactjs": "2.1.5"
}
}

35
packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Dialog, DialogStoreProps, useDialogStore } from '@ariakit/react'
import { classNames } from '@standardnotes/snjs'
import { ReactNode } from 'react'
const AlertDialog = ({
children,
closeDialog,
className,
...props
}: { children: ReactNode; closeDialog: () => void; className?: string } & Partial<DialogStoreProps>) => {
const dialog = useDialogStore({
open: true,
...props,
})
return (
<Dialog store={dialog} role="alertdialog" className="h-full w-full" backdropProps={{ className: '!z-modal' }}>
<div
className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
role="presentation"
onClick={closeDialog}
/>
<div
className={classNames(
'absolute top-1/2 left-1/2 z-[1] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl',
className,
)}
>
{children}
</div>
</Dialog>
)
}
export default AlertDialog

30
packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
View File

@@ -4,7 +4,6 @@ import { Component } from 'react'
import ApplicationView from '@/Components/ApplicationView/ApplicationView'
import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
import { ApplicationGroupEvent, ApplicationGroupEventData, DeinitSource } from '@standardnotes/snjs'
import { DialogContent, DialogOverlay } from '@reach/dialog'
import { getPlatformString, isDesktopApplication } from '@/Utils'
import DeallocateHandler from '../DeallocateHandler/DeallocateHandler'
@@ -23,6 +22,20 @@ type State = {
deviceDestroyed?: boolean
}
const renderDialog = (message: string) => {
return (
<div className="flex h-full w-full items-center justify-center bg-passive-5" role="alert">
<div
className={
'challenge-modal shadow-overlay-light relative flex max-w-125 flex-col items-center rounded border border-solid border-border bg-default p-6'
}
>
<div className="text-base lg:text-xs">{message}</div>
</div>
</div>
)
}
class ApplicationGroupView extends Component<Props, State> {
applicationObserverRemover?: () => void
private group?: ApplicationGroup
@@ -83,21 +96,6 @@ class ApplicationGroupView extends Component<Props, State> {
}
override render() {
const renderDialog = (message: string) => {
return (
<DialogOverlay className={'sn-component challenge-modal-overlay'}>
<DialogContent
aria-label="Switching workspace"
className={
'challenge-modal shadow-overlay-light relative flex flex-col items-center rounded border border-solid border-border bg-default p-8'
}
>
<div className="text-base lg:text-xs">{message}</div>
</DialogContent>
</DialogOverlay>
)
}
if (this.state.deviceDestroyed) {
const message = `Secure memory has destroyed this application instance. ${
isDesktopApplication()

2
packages/web/src/javascripts/Components/ApplicationView/DotOrgNotice.tsx
View File

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
const DotOrgNotice: FunctionComponent = () => {
return (
<div className="z-modal flex h-30 w-full w-full items-center bg-danger text-center text-info-contrast">
<div className="z-modal flex h-30 w-full items-center bg-danger text-center text-info-contrast">
<div className="w-full text-center text-xl font-bold">
app.standardnotes.org is no longer maintained. Please switch to{' '}
<a className="underline" href="https://app.standardnotes.com">

17
packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
View File

@@ -71,7 +71,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
const [isSubmitting, setIsSubmitting] = useState(false)
const [isProcessing, setIsProcessing] = useState(false)
const [, setProcessingPrompts] = useState<ChallengePrompt[]>([])
const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false)
const shouldShowForgotPasscode = [ChallengeReason.ApplicationUnlock, ChallengeReason.Migration].includes(
challenge.reason,
@@ -238,23 +237,17 @@ const ChallengeModal: FunctionComponent<Props> = ({
})
return (
<ModalOverlay
isOpen={true}
className={`sn-component p-0 ${isFullScreenBlocker ? 'bg-passive-5' : ''}`}
onDismiss={cancelChallenge}
dangerouslyBypassFocusLock={bypassModalFocusLock}
key={challenge.id}
ref={setModalElement}
>
<ModalOverlay isOpen={true} key={challenge.id} ref={setModalElement}>
<Modal
title="Authenticate"
close={cancelChallenge}
className={{
content: classNames(
'challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-auto md:border',
'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border',
!isMobileScreen && 'shadow-overlay-light',
isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
),
backdrop: isFullScreenBlocker ? 'bg-passive-5' : '',
}}
customHeader={<></>}
customFooter={<></>}
@@ -319,7 +312,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
<Button
className="flex min-w-76 items-center justify-center"
onClick={() => {
setBypassModalFocusLock(true)
application.alertService
.confirm(
'If you forgot your local passcode, your only option is to clear your local data from this device and sign back in to your account.',
@@ -333,9 +325,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
}
})
.catch(console.error)
.finally(() => {
setBypassModalFocusLock(false)
})
}}
>
<Icon type="help" className="mr-2 text-neutral" />

2
packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View File

@@ -223,7 +223,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
)
})}
</Menu>
<ModalOverlay isOpen={showSuperImporter} onDismiss={closeSuperNoteImporter}>
<ModalOverlay isOpen={showSuperImporter}>
{note && (
<SuperNoteImporter
note={note}

2
packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx
View File

@@ -180,7 +180,7 @@ const ChangeMultipleMenu = ({ application, notes, setDisableClickOutside }: Prop
</Fragment>
))}
</Menu>
<ModalOverlay isOpen={showSuperImporter} onDismiss={closeCurrentSuperNoteImporter}>
<ModalOverlay isOpen={showSuperImporter}>
{confirmationQueue[0] && (
<SuperNoteImporter
note={confirmationQueue[0]}

49
packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
View File

@@ -1,11 +1,11 @@
import { observer } from 'mobx-react-lite'
import { ViewControllerManager } from '@Controllers/ViewControllerManager'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { useCallback, useRef } from 'react'
import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
import Button from '@/Components/Button/Button'
import { WebApplication } from '@/Application/Application'
import Icon from '../Icon/Icon'
import AlertDialog from '../AlertDialog/AlertDialog'
type Props = {
viewControllerManager: ViewControllerManager
@@ -25,37 +25,26 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
}, [application.user, closeDialog])
return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-content">
<div className="sk-panel-section">
<AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
Delete account?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
</div>
</AlertDialogDescription>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
Delete my account for good
</Button>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeDialog}>
<div className="flex items-center justify-between text-lg font-bold">
Delete account?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
</div>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
Delete my account for good
</Button>
</div>
</AlertDialog>
)
}

126
packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
View File

@@ -1,5 +1,4 @@
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
import { WebApplication } from '@/Application/Application'
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
@@ -8,6 +7,7 @@ import { ApplicationGroup } from '@/Application/ApplicationGroup'
import { isDesktopApplication } from '@/Utils'
import Button from '@/Components/Button/Button'
import Icon from '../Icon/Icon'
import AlertDialog from '../AlertDialog/AlertDialog'
type Props = {
application: WebApplication
@@ -42,75 +42,65 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
}, [application, closeDialog, deleteLocalBackups])
return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-content">
<div className="sk-panel-section">
<AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
Sign out workspace?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
{showWorkspaceWarning && (
<>
<br />
<p className="text-base text-foreground lg:text-sm">
<strong>Note: </strong>
Because you have other workspaces signed in, this sign out may leave logs and other metadata
of your session on this device. For a more robust sign out that performs a hard clear of all
app-related data, use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
</p>
</>
)}
</div>
</AlertDialogDescription>
{localBackupsCount > 0 && (
<div className="flex">
<div className="sk-panel-row"></div>
<label className="flex items-center">
<input
type="checkbox"
checked={deleteLocalBackups}
onChange={(event) => {
setDeleteLocalBackups((event.target as HTMLInputElement).checked)
}}
/>
<span className="ml-2">
Delete {localBackupsCount} local backup file
{localBackupsCount > 1 ? 's' : ''}
</span>
</label>
<button
className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
onClick={() => {
application.desktopDevice?.viewlocalBackups()
}}
>
View backup files
</button>
</div>
)}
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
{application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
</Button>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeDialog}>
<div className="flex items-center justify-between text-lg font-bold">
Sign out workspace?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<div>
<p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
{showWorkspaceWarning && (
<>
<br />
<p className="text-base text-foreground lg:text-sm">
<strong>Note: </strong>
Because you have other workspaces signed in, this sign out may leave logs and other metadata of your
session on this device. For a more robust sign out that performs a hard clear of all app-related data,
use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
</p>
</>
)}
</div>
</div>
{localBackupsCount > 0 && (
<div className="flex">
<div className="sk-panel-row"></div>
<label className="flex items-center">
<input
type="checkbox"
checked={deleteLocalBackups}
onChange={(event) => {
setDeleteLocalBackups((event.target as HTMLInputElement).checked)
}}
/>
<span className="ml-2">
Delete {localBackupsCount} local backup file
{localBackupsCount > 1 ? 's' : ''}
</span>
</label>
<button
className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
onClick={() => {
application.desktopDevice?.viewlocalBackups()
}}
>
View backup files
</button>
</div>
)}
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
{application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
</Button>
</div>
</AlertDialog>
)
}

4
packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
View File

@@ -106,10 +106,10 @@ const AddItemMenuButton = ({
</MenuItem>
</Menu>
</Popover>
<ModalOverlay isOpen={captureType === 'photo'} onDismiss={closeCaptureModal}>
<ModalOverlay isOpen={captureType === 'photo'}>
<PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
</ModalOverlay>
<ModalOverlay isOpen={captureType === 'video'} onDismiss={closeCaptureModal}>
<ModalOverlay isOpen={captureType === 'video'}>
<VideoCaptureModal filesController={filesController} close={closeCaptureModal} />
</ModalOverlay>
</>

2
packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
View File

@@ -1,12 +1,12 @@
import { ListboxArrow, ListboxInput, ListboxList, ListboxPopover } from '@reach/listbox'
import '@reach/listbox/styles.css'
import { VisuallyHidden } from '@reach/visually-hidden'
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
import { DropdownItem } from './DropdownItem'
import StyledListboxButton from './StyledListboxButton'
import StyledListboxOption from './StyledListboxOption'
import { classNames } from '@standardnotes/snjs'
import { VisuallyHidden } from '@ariakit/react'
type DropdownProps = {
id: string

8
packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
View File

@@ -285,13 +285,7 @@ FilePreviewModal.displayName = 'FilePreviewModal'
const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
return (
<ModalOverlay
className="sn-component p-0"
aria-label="File preview modal"
isOpen={viewControllerManager.filePreviewModalController.isOpen}
onDismiss={viewControllerManager.filePreviewModalController.dismiss}
dangerouslyBypassScrollLock
>
<ModalOverlay aria-label="File preview modal" isOpen={viewControllerManager.filePreviewModalController.isOpen}>
<FilePreviewModal application={application} viewControllerManager={viewControllerManager} />
</ModalOverlay>
)

2
packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx
View File

@@ -33,7 +33,7 @@ const ImportModal = ({ importModalController }: { importModalController: ImportM
)
return (
<ModalOverlay isOpen={isVisible} onDismiss={close}>
<ModalOverlay isOpen={isVisible}>
<Modal title="Import" close={close} actions={modalActions}>
<div className="px-4 py-4">
{!files.length && <ImportModalInitialPage setFiles={setFiles} />}

18
packages/web/src/javascripts/Components/Modal/Modal.tsx
View File

@@ -1,6 +1,5 @@
import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
import { isIOS } from '@/Utils'
import { DialogContent } from '@reach/dialog'
import { classNames } from '@standardnotes/snjs'
import { ReactNode, useMemo, useRef, useState } from 'react'
import Button from '../Button/Button'
@@ -26,6 +25,7 @@ type Props = {
className?: {
content?: string
description?: string
backdrop?: string
}
customHeader?: ReactNode
disableCustomHeader?: boolean
@@ -95,13 +95,17 @@ const Modal = ({
return (
<>
<ModalAndroidBackHandler close={close} />
<DialogContent
tabIndex={0}
<div
className={classNames('absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75', className?.backdrop)}
role="presentation"
onClick={close}
/>
<div
className={classNames(
'm-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
className.content,
'absolute z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
className?.content,
)}
aria-label={title}
>
{customHeader && !disableCustomHeader ? (
customHeader
@@ -218,7 +222,7 @@ const Modal = ({
))}
</div>
)}
</DialogContent>
</div>
</>
)
}

48
packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
View File

@@ -1,35 +1,37 @@
import { mergeRefs } from '@/Hooks/mergeRefs'
import { DialogOverlay, DialogOverlayProps } from '@reach/dialog'
import { classNames } from '@standardnotes/snjs'
import { Dialog, useDialogStore } from '@ariakit/react'
import { ForwardedRef, forwardRef, ReactNode } from 'react'
import { useModalAnimation } from '../Modal/useModalAnimation'
type Props = {
isOpen: boolean
onDismiss?: () => void
children: ReactNode
className?: string
} & DialogOverlayProps
}
const ModalOverlay = forwardRef(
({ isOpen, onDismiss, children, className, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
const [isMounted, setElement] = useModalAnimation(isOpen)
const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
const [isMounted, setElement] = useModalAnimation(isOpen)
const dialog = useDialogStore({
open: isMounted,
})
if (!isMounted) {
return null
}
if (!isMounted) {
return null
}
return (
<DialogOverlay
className={classNames('p-0 md:px-0 md:opacity-100', className)}
onDismiss={onDismiss}
ref={mergeRefs([setElement, ref])}
{...props}
>
{children}
</DialogOverlay>
)
},
)
return (
<Dialog
tabIndex={0}
className="h-full w-full"
backdropProps={{
className: '!z-modal',
}}
ref={mergeRefs([setElement, ref])}
store={dialog}
{...props}
>
{children}
</Dialog>
)
})
export default ModalOverlay

2
packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -395,7 +395,7 @@ const NotesOptions = ({
</>
) : null}
<ModalOverlay isOpen={showExportSuperModal} onDismiss={closeSuperExportModal}>
<ModalOverlay isOpen={showExportSuperModal}>
<SuperExportModal exportNotes={downloadSelectedItems} close={closeSuperExportModal} />
</ModalOverlay>
</>

53
packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
View File

@@ -1,10 +1,10 @@
import { useCallback, useRef } from 'react'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { WebApplication } from '@/Application/Application'
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
import { observer } from 'mobx-react-lite'
import Button from '@/Components/Button/Button'
import Icon from '../Icon/Icon'
import AlertDialog from '../AlertDialog/AlertDialog'
type Props = {
application: WebApplication
@@ -27,37 +27,26 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
}, [application, closeDialog])
return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-content">
<div className="sk-panel-section">
<AlertDialogLabel className="flex items-center justify-between text-lg font-bold capitalize">
End all other sessions?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">
This action will sign out all other devices signed into your account, and remove your data from
those devices when they next regain connection to the internet. You may sign back in on those
devices at any time.
</p>
</AlertDialogDescription>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
End Sessions
</Button>
</div>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeDialog}>
<div className="flex items-center justify-between text-lg font-bold capitalize">
End all other sessions?
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">
This action will sign out all other devices signed into your account, and remove your data from those devices
when they next regain connection to the internet. You may sign back in on those devices at any time.
</p>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button primary colorStyle="danger" onClick={confirm}>
End Sessions
</Button>
</div>
</AlertDialog>
)

2
packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
View File

@@ -1,4 +1,3 @@
import { VisuallyHidden } from '@reach/visually-hidden'
import { observer } from 'mobx-react-lite'
import { FunctionComponent, useCallback, useMemo } from 'react'
import Icon from '@/Components/Icon/Icon'
@@ -6,6 +5,7 @@ import { NotesController } from '@/Controllers/NotesController/NotesController'
import { classNames } from '@standardnotes/utils'
import { keyboardStringForShortcut, PIN_NOTE_COMMAND } from '@standardnotes/ui-services'
import { useCommandService } from '../CommandProvider'
import { VisuallyHidden } from '@ariakit/react'
type Props = {
className?: string

4
packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
View File

@@ -58,12 +58,12 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
</Text>
<Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
<ModalOverlay isOpen={isChangeEmailDialogOpen} onDismiss={closeChangeEmailDialog}>
<ModalOverlay isOpen={isChangeEmailDialogOpen}>
<ChangeEmail onCloseDialog={closeChangeEmailDialog} application={application} />
</ModalOverlay>
</PreferencesSegment>
</PreferencesGroup>
<ModalOverlay isOpen={shouldShowPasswordWizard} onDismiss={dismissPasswordWizard}>
<ModalOverlay isOpen={shouldShowPasswordWizard}>
<PasswordWizard application={application} dismissModal={dismissPasswordWizard} />
</ModalOverlay>
</>

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx
View File

@@ -48,7 +48,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
{!subscriptionState.allInvitationsUsed && (
<Button className="min-w-20" label="Invite" onClick={() => setIsInviteDialogOpen(true)} />
)}
<ModalOverlay isOpen={isInviteDialogOpen} onDismiss={closeInviteDialog}>
<ModalOverlay isOpen={isInviteDialogOpen}>
<Invite
onCloseDialog={closeInviteDialog}
application={application}

7
packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx
View File

@@ -89,13 +89,10 @@ const SmartViews = ({ application, featuresController }: Props) => {
)}
</PreferencesSegment>
</PreferencesGroup>
<ModalOverlay isOpen={!!editSmartViewModalController.view} onDismiss={editSmartViewModalController.closeDialog}>
<ModalOverlay isOpen={!!editSmartViewModalController.view}>
<EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
</ModalOverlay>
<ModalOverlay
isOpen={addSmartViewModalController.isAddingSmartView}
onDismiss={addSmartViewModalController.closeModal}
>
<ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
<AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
</ModalOverlay>
</>

2
packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
View File

@@ -115,7 +115,7 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
</PreferencesSegment>
)}
</PreferencesGroup>
<ModalOverlay isOpen={shouldShowActivationModal} onDismiss={closeActivationModal}>
<ModalOverlay isOpen={shouldShowActivationModal}>
<Modal title={activationModalTitle} close={closeActivationModal} actions={activationModalActions}>
{shouldShowActivationModal && <TwoFactorActivationView activation={auth.status} />}
</Modal>

6
packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
View File

@@ -20,11 +20,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
}, [commandService, viewControllerManager])
return (
<ModalOverlay
isOpen={viewControllerManager.preferencesController.isOpen}
onDismiss={viewControllerManager.preferencesController.closePreferences}
className="p-0"
>
<ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen}>
<PreferencesView
closePreferences={() => viewControllerManager.preferencesController.closePreferences()}
application={application}

6
packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
View File

@@ -1,4 +1,4 @@
import { AlertDialog } from '@reach/alert-dialog'
import AlertDialog from '../AlertDialog/AlertDialog'
import { FunctionComponent, useRef } from 'react'
import { WebApplication } from '@/Application/Application'
import { PremiumFeatureModalType } from './PremiumFeatureModalType'
@@ -30,9 +30,9 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
}
return (
<AlertDialog leastDestructiveRef={ctaButtonRef} className="p-0">
<AlertDialog closeDialog={onClose} className="!max-w-89">
<div tabIndex={-1} className="sn-component bg-default">
<div tabIndex={0} className="max-w-89 rounded bg-default p-4 shadow-main">
<div tabIndex={0}>
{type === PremiumFeatureModalType.UpgradePrompt && (
<UpgradePrompt
featureName={featureName}

9
packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx
View File

@@ -1,5 +1,4 @@
import Icon from '@/Components/Icon/Icon'
import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
export const SuccessPrompt = ({
ctaRef,
@@ -10,7 +9,7 @@ export const SuccessPrompt = ({
}) => {
return (
<>
<AlertDialogLabel>
<div>
<div className="flex justify-end p-1">
<button
className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -27,11 +26,9 @@ export const SuccessPrompt = ({
<Icon className={'h-24 w-24 px-7 py-2 text-[50px]'} size={'custom'} type={'🎉'} />
</div>
<div className="mb-1 text-center text-lg font-bold">Your purchase was successful!</div>
</AlertDialogLabel>
</div>
<AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
Enjoy your new powered up experience.
</AlertDialogDescription>
<div className="mb-2 px-4.5 text-center text-sm text-passive-1">Enjoy your new powered up experience.</div>
<div className="p-4">
<button

9
packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx
View File

@@ -1,4 +1,3 @@
import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { useCallback } from 'react'
import { WebApplication } from '@/Application/Application'
import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
@@ -29,7 +28,7 @@ export const UpgradePrompt = ({
return (
<>
<AlertDialogLabel>
<div>
<div className="flex justify-end p-1">
<button
className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -46,8 +45,8 @@ export const UpgradePrompt = ({
<Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} size={'custom'} type={PremiumFeatureIconName} />
</div>
<div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
</AlertDialogLabel>
<AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
</div>
<div className="mb-2 px-4.5 text-center text-sm text-passive-1">
{featureName && (
<span>
To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
@@ -74,7 +73,7 @@ export const UpgradePrompt = ({
</ul>
</div>
)}
</AlertDialogDescription>
</div>
<div className="p-4">
<button

33
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -1,6 +1,6 @@
import { getPlatformString } from '@/Utils'
import { classNames } from '@standardnotes/utils'
import { DialogOverlay, DialogContent } from '@reach/dialog'
import { Dialog, useDialogStore } from '@ariakit/react'
import { ForwardedRef, forwardRef, ReactNode } from 'react'
type Props = {
@@ -9,23 +9,36 @@ type Props = {
}
const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: ForwardedRef<HTMLDivElement>) => {
const dialog = useDialogStore({
open: true,
})
return (
<DialogOverlay
className={`sn-component ${getPlatformString()}`}
onDismiss={onDismiss}
<Dialog
store={dialog}
aria-label="Note revision history"
ref={ref}
backdropProps={{
className: '!z-modal',
}}
className="h-full w-full"
>
<DialogContent
aria-label="Note revision history"
<div
className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
role="presentation"
onClick={onDismiss}
/>
<div
className={classNames(
'my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
getPlatformString(),
)}
>
<div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
</DialogContent>
</DialogOverlay>
{children}
</div>
</Dialog>
)
})

85
packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
View File

@@ -1,8 +1,6 @@
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
import { SNApplication, SessionStrings, UuidString, SessionListEntry, isErrorResponse } from '@standardnotes/snjs'
import { FunctionComponent, useState, useEffect, useRef, useMemo, useCallback } from 'react'
import { Alert } from '@reach/alert'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { WebApplication } from '@/Application/Application'
import { observer } from 'mobx-react-lite'
import Spinner from '@/Components/Spinner/Spinner'
@@ -10,6 +8,7 @@ import Button from '@/Components/Button/Button'
import Icon from '../Icon/Icon'
import Modal, { ModalAction } from '../Modal/Modal'
import ModalOverlay from '../Modal/ModalOverlay'
import AlertDialog from '../AlertDialog/AlertDialog'
type Session = SessionListEntry & {
revoking?: true
@@ -126,7 +125,14 @@ const SessionsModalContent: FunctionComponent<{
return (
<>
<Modal title="Active Sessions" close={close} actions={sessionModalActions}>
<Modal
title="Active Sessions"
close={close}
actions={sessionModalActions}
className={{
content: 'sessions-modal',
}}
>
<div className="px-4 py-4">
{refreshing ? (
<div className="flex items-center gap-2">
@@ -135,7 +141,11 @@ const SessionsModalContent: FunctionComponent<{
</div>
) : (
<>
{errorMessage && <Alert className="sk-p bold">{errorMessage}</Alert>}
{errorMessage && (
<div role="alert" className="sk-p bold">
{errorMessage}
</div>
)}
{sessions.length > 0 && (
<ul>
{sessions.map((session) => (
@@ -166,43 +176,30 @@ const SessionsModalContent: FunctionComponent<{
</div>
</Modal>
{confirmRevokingSessionUuid && (
<AlertDialog onDismiss={closeRevokeConfirmationDialog} leastDestructiveRef={cancelRevokeRef} className="p-0">
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-content">
<div className="sk-panel-section">
<AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
{SessionStrings.RevokeTitle}
<button
className="rounded p-1 font-bold hover:bg-contrast"
onClick={closeRevokeConfirmationDialog}
>
<Icon type="close" />
</button>
</AlertDialogLabel>
<AlertDialogDescription className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
</AlertDialogDescription>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
<span>{SessionStrings.RevokeCancelButton}</span>
</Button>
<Button
primary
colorStyle="danger"
onClick={() => {
closeRevokeSessionAlert()
revokeSession(confirmRevokingSessionUuid).catch(console.error)
}}
>
<span>{SessionStrings.RevokeConfirmButton}</span>
</Button>
</div>
</div>
</div>
</div>
</div>
<AlertDialog closeDialog={closeRevokeConfirmationDialog}>
<div className="flex items-center justify-between text-lg font-bold">
{SessionStrings.RevokeTitle}
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeRevokeConfirmationDialog}>
<Icon type="close" />
</button>
</div>
<div className="sk-panel-row">
<p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
</div>
<div className="mt-4 flex justify-end gap-2">
<Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
<span>{SessionStrings.RevokeCancelButton}</span>
</Button>
<Button
primary
colorStyle="danger"
onClick={() => {
closeRevokeSessionAlert()
revokeSession(confirmRevokingSessionUuid).catch(console.error)
}}
>
<span>{SessionStrings.RevokeConfirmButton}</span>
</Button>
</div>
</AlertDialog>
)}
@@ -215,11 +212,7 @@ const SessionsModal: FunctionComponent<{
application: WebApplication
}> = ({ viewControllerManager, application }) => {
return (
<ModalOverlay
isOpen={viewControllerManager.isSessionsModalVisible}
onDismiss={viewControllerManager.closeSessionsModal}
className="sessions-modal"
>
<ModalOverlay isOpen={viewControllerManager.isSessionsModalVisible}>
<SessionsModalContent application={application} viewControllerManager={viewControllerManager} />
</ModalOverlay>
)

39
packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
View File

@@ -1,14 +1,27 @@
import { Tooltip } from '@reach/tooltip'
import styled from 'styled-components'
import { classNames } from '@standardnotes/snjs'
import { ReactNode } from 'react'
import { Tooltip, TooltipAnchor, useTooltipStore } from '@ariakit/react'
import { Slot } from '@radix-ui/react-slot'
export default styled(Tooltip)`
&[data-reach-tooltip] {
border-radius: 0.25rem;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
background-color: var(--sn-stylekit-contrast-background-color);
color: var(--sn-stylekit-foreground-color);
border-color: var(--sn-stylekit-border-color);
z-index: var(--z-index-tooltip);
}
`
const StyledTooltip = ({ children, className, label }: { children: ReactNode; className?: string; label: string }) => {
const tooltip = useTooltipStore()
return (
<>
<TooltipAnchor store={tooltip} as={Slot}>
{children}
</TooltipAnchor>
<Tooltip
store={tooltip}
className={classNames(
'z-tooltip rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
className,
)}
>
{label}
</Tooltip>
</>
)
}
export default StyledTooltip

2
packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
View File

@@ -208,7 +208,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
</BlocksEditorComposer>
</FilesControllerProvider>
</LinkingControllerProvider>
<ModalOverlay isOpen={showMarkdownPreview} onDismiss={closeMarkdownPreview}>
<ModalOverlay isOpen={showMarkdownPreview}>
<SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />
</ModalOverlay>
</ErrorBoundary>

1
packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
View File

@@ -1,7 +1,6 @@
import Icon from '@/Components/Icon/Icon'
import { FeaturesController } from '@/Controllers/FeaturesController'
import { NavigationController } from '@/Controllers/Navigation/NavigationController'
import '@reach/tooltip/styles.css'
import { SmartView, SystemViewId, isSystemView } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import {

7
packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
View File

@@ -54,13 +54,10 @@ const SmartViewsSection: FunctionComponent<Props> = ({ application, navigationCo
featuresController={featuresController}
setEditingSmartView={editSmartViewModalController.setView}
/>
<ModalOverlay isOpen={!!editSmartViewModalController.view} onDismiss={editSmartViewModalController.closeDialog}>
<ModalOverlay isOpen={!!editSmartViewModalController.view}>
<EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
</ModalOverlay>
<ModalOverlay
isOpen={addSmartViewModalController.isAddingSmartView}
onDismiss={addSmartViewModalController.closeModal}
>
<ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
<AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
</ModalOverlay>
</section>

1
packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
View File

@@ -3,7 +3,6 @@ import { FOCUSABLE_BUT_NOT_TABBABLE, TAG_FOLDERS_FEATURE_NAME } from '@/Constant
import { KeyboardKey } from '@standardnotes/ui-services'
import { FeaturesController } from '@/Controllers/FeaturesController'
import { NavigationController } from '@/Controllers/Navigation/NavigationController'
import '@reach/tooltip/styles.css'
import { IconType, SNTag } from '@standardnotes/snjs'
import { computed } from 'mobx'
import { observer } from 'mobx-react-lite'

6
packages/web/src/javascripts/Components/Tags/TagsSectionTitle.tsx
View File

@@ -1,9 +1,9 @@
import { TAG_FOLDERS_FEATURE_NAME, TAG_FOLDERS_FEATURE_TOOLTIP } from '@/Constants/Constants'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { FeaturesController } from '@/Controllers/FeaturesController'
import { Tooltip } from '@reach/tooltip'
import { observer } from 'mobx-react-lite'
import { FunctionComponent, useCallback } from 'react'
import StyledTooltip from '../StyledTooltip/StyledTooltip'
type Props = {
features: FeaturesController
@@ -38,11 +38,11 @@ const TagsSectionTitle: FunctionComponent<Props> = ({ features, hasMigration, on
<>
<div className="title text-base md:text-sm">
<span className="font-bold">Tags</span>
<Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
<StyledTooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
<label className="ml-1 cursor-pointer font-bold text-passive-2" onClick={showPremiumAlert}>
Folders
</label>
</Tooltip>
</StyledTooltip>
</div>
</>
)

1
packages/web/src/javascripts/index.ts
View File

@@ -1,7 +1,6 @@
//= require_tree ./app
// css
import '@reach/dialog/styles.css'
import '../stylesheets/index.css.scss'
// entry point

1
packages/web/src/stylesheets/_modals.scss
View File

@@ -143,7 +143,6 @@
}
}
[data-reach-dialog-overlay],
[data-mobile-popover] {
max-height: none;
max-height: var(--ios-viewport-height, none);

34
packages/web/src/stylesheets/_reach-sub.scss
View File

@@ -1,34 +0,0 @@
[data-reach-dialog-overlay] {
z-index: var(--z-index-modal);
background: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: unset;
}
[data-reach-dialog-overlay]::before {
background-color: var(--sn-stylekit-passive-color-5);
content: '';
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
}
[data-reach-dialog-content] {
position: relative;
}
[data-reach-dialog-content] .sk-modal-content,
[data-reach-dialog-content] .sn-component,
[data-reach-dialog-content] .sk-panel {
height: 100%;
}
[data-reach-alert-dialog-content] {
width: auto;
}

1
packages/web/src/stylesheets/index.css.scss
View File

@@ -14,7 +14,6 @@ $blocks-editor-icons-path: '../javascripts/Components/SuperEditor/Lexical/Icons'
@import 'menus';
@import 'modals';
@import 'stylekit-sub';
@import 'reach-sub';
@import 'sessions-modal';
@import 'preferences';
@import 'focused';

285
yarn.lock
View File

@@ -22,6 +22,40 @@ __metadata:
languageName: node
linkType: hard
"@ariakit/core@npm:0.1.1":
version: 0.1.1
resolution: "@ariakit/core@npm:0.1.1"
checksum: b4db09f0f0fd5787ad5b76dad33ea01cfc5ba4cbdbfd19fe790bd8663b92beb379fd9f0f5c1bfee8448564b15250c5e1fa571e4fa515b60178faa29e5db5930c
languageName: node
linkType: hard
"@ariakit/react-core@npm:0.1.2":
version: 0.1.2
resolution: "@ariakit/react-core@npm:0.1.2"
dependencies:
"@ariakit/core": 0.1.1
use-sync-external-store: ^1.2.0
peerDependencies:
react: ^17.0.0 || ^18.0.0
react-dom: ^17.0.0 || ^18.0.0
checksum: c42738d48ed4cfc1b6afb6cdcc9399970e2f90d7ff5d1d3fab99e9c7383e10ecffd11d0d6faeeb4dcada13bf4eb9268543930675a572fcca58aee88dfb695c7a
languageName: node
linkType: hard
"@ariakit/react@npm:^0.1.2":
version: 0.1.2
resolution: "@ariakit/react@npm:0.1.2"
dependencies:
"@ariakit/core": 0.1.1
"@ariakit/react-core": 0.1.2
"@floating-ui/dom": ^1.0.0
peerDependencies:
react: ^17.0.0 || ^18.0.0
react-dom: ^17.0.0 || ^18.0.0
checksum: 5f6687b59ae04c14e90d22d486fe0d9a97df5e2b31d88f248d084fa95ea3f16333231f9f92dff025f21c712975904b3f6e0f9747896f5920583d4bc43c96b11d
languageName: node
linkType: hard
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.18.6":
version: 7.18.6
resolution: "@babel/code-frame@npm:7.18.6"
@@ -1980,7 +2014,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.8.4":
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.8.4":
version: 7.19.4
resolution: "@babel/runtime@npm:7.19.4"
dependencies:
@@ -1989,6 +2023,15 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.13.10":
version: 7.21.0
resolution: "@babel/runtime@npm:7.21.0"
dependencies:
regenerator-runtime: ^0.13.11
checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
languageName: node
linkType: hard
"@babel/runtime@npm:^7.20.1":
version: 7.20.1
resolution: "@babel/runtime@npm:7.20.1"
@@ -2546,6 +2589,22 @@ __metadata:
languageName: node
linkType: hard
"@floating-ui/core@npm:^1.2.6":
version: 1.2.6
resolution: "@floating-ui/core@npm:1.2.6"
checksum: e4aa96c435277f1720d4bc939e17a79b1e1eebd589c20b622d3c646a5273590ff889b8c6e126f7be61873cf8c4d7db7d418895986ea19b8b0d0530de32504c3a
languageName: node
linkType: hard
"@floating-ui/dom@npm:^1.0.0":
version: 1.2.6
resolution: "@floating-ui/dom@npm:1.2.6"
dependencies:
"@floating-ui/core": ^1.2.6
checksum: 2226c6c244b96ae75ab14cc35bb119c8d7b83a85e2ff04e9d9800cffdb17faf4a7cf82db741dd045242ced56e31c8a08e33c8c512c972309a934d83b1f410441
languageName: node
linkType: hard
"@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
version: 1.1.3
resolution: "@gar/promisify@npm:1.1.3"
@@ -4178,33 +4237,26 @@ __metadata:
languageName: node
linkType: hard
"@reach/alert-dialog@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/alert-dialog@npm:0.18.0"
"@radix-ui/react-compose-refs@npm:1.0.0":
version: 1.0.0
resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
dependencies:
"@reach/auto-id": 0.18.0
"@reach/dialog": 0.18.0
"@reach/polymorphic": 0.18.0
"@reach/utils": 0.18.0
tiny-invariant: ^1.2.0
"@babel/runtime": ^7.13.10
peerDependencies:
react: ^16.8.0 || 17.x
react-dom: ^16.8.0 || 17.x
checksum: 34cd77249cf9ff0ad750fd86a04e6114e184e5b74160e31e0e03482b51e12d0f7986298768322af4b0852b1ec143ab26ed8137dcf1232ca2ea0b329e058419f3
react: ^16.8 || ^17.0 || ^18.0
checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
languageName: node
linkType: hard
"@reach/alert@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/alert@npm:0.18.0"
"@radix-ui/react-slot@npm:^1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-slot@npm:1.0.1"
dependencies:
"@reach/polymorphic": 0.18.0
"@reach/utils": 0.18.0
"@reach/visually-hidden": 0.18.0
"@babel/runtime": ^7.13.10
"@radix-ui/react-compose-refs": 1.0.0
peerDependencies:
react: ^16.8.0 || 17.x
react-dom: ^16.8.0 || 17.x
checksum: 679a90427b1aec2dfd76a4bbcec7dee3f86a80f643f0a3a9060eb9debe93010e248883ac8cb4a7141fed58ad6e803695b78ecf06f13777fdbb67cfdad11f3676
react: ^16.8 || ^17.0 || ^18.0
checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
languageName: node
linkType: hard
@@ -4247,22 +4299,6 @@ __metadata:
languageName: node
linkType: hard
"@reach/dialog@npm:0.18.0, @reach/dialog@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/dialog@npm:0.18.0"
dependencies:
"@reach/polymorphic": 0.18.0
"@reach/portal": 0.18.0
"@reach/utils": 0.18.0
react-focus-lock: 2.5.2
react-remove-scroll: 2.4.3
peerDependencies:
react: ^16.8.0 || 17.x
react-dom: ^16.8.0 || 17.x
checksum: c87fe1a7bee9c1acb9b149baa0bdf2fe4c3618883393f3062bf9e5c3bebd398dd7673799e962d3f1b6859957c40f6a3bf344666a8c78f97112fd970e314dbed5
languageName: node
linkType: hard
"@reach/disclosure@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/disclosure@npm:0.18.0"
@@ -4365,23 +4401,6 @@ __metadata:
languageName: node
linkType: hard
"@reach/tooltip@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/tooltip@npm:0.18.0"
dependencies:
"@reach/auto-id": 0.18.0
"@reach/polymorphic": 0.18.0
"@reach/portal": 0.18.0
"@reach/rect": 0.18.0
"@reach/utils": 0.18.0
"@reach/visually-hidden": 0.18.0
peerDependencies:
react: ^16.8.0 || 17.x
react-dom: ^16.8.0 || 17.x
checksum: 4080b15c1b5d313751bcb4a7494e83e36d280e4a9bd35df39c62d26b658a18ce1e25d1e2f68bb1bb018a48bffc607049f14d262c7576bfd25a608cfa9c6d4e28
languageName: node
linkType: hard
"@reach/utils@npm:0.18.0":
version: 0.18.0
resolution: "@reach/utils@npm:0.18.0"
@@ -4392,18 +4411,6 @@ __metadata:
languageName: node
linkType: hard
"@reach/visually-hidden@npm:0.18.0, @reach/visually-hidden@npm:^0.18.0":
version: 0.18.0
resolution: "@reach/visually-hidden@npm:0.18.0"
dependencies:
"@reach/polymorphic": 0.18.0
peerDependencies:
react: ^16.8.0 || 17.x || 18.x
react-dom: ^16.8.0 || 17.x || 18.x
checksum: 675ad41121d0ae52a55d3e75ad9e60a4ca7cb91defe756565bf7b8fb3d27553d76f851f9cd069455240ec955465d6e235a8f92b73859e091265607b0cb3358ae
languageName: node
linkType: hard
"@react-native-async-storage/async-storage@npm:1.17.11":
version: 1.17.11
resolution: "@react-native-async-storage/async-storage@npm:1.17.11"
@@ -5677,6 +5684,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@standardnotes/web@workspace:packages/web"
dependencies:
"@ariakit/react": ^0.1.2
"@babel/core": "*"
"@babel/plugin-proposal-class-properties": ^7.18.6
"@babel/plugin-transform-react-jsx": ^7.19.0
@@ -5685,14 +5693,10 @@ __metadata:
"@lexical/headless": 0.9.2
"@lexical/react": 0.9.2
"@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
"@reach/alert": ^0.18.0
"@reach/alert-dialog": ^0.18.0
"@radix-ui/react-slot": ^1.0.1
"@reach/checkbox": ^0.18.0
"@reach/dialog": ^0.18.0
"@reach/disclosure": ^0.18.0
"@reach/listbox": ^0.18.0
"@reach/tooltip": ^0.18.0
"@reach/visually-hidden": ^0.18.0
"@simplewebauthn/browser": ^7.1.0
"@standardnotes/authenticator": ^2.3.9
"@standardnotes/autobiography-theme": ^1.2.7
@@ -10771,13 +10775,6 @@ __metadata:
languageName: node
linkType: hard
"detect-node-es@npm:^1.1.0":
version: 1.1.0
resolution: "detect-node-es@npm:1.1.0"
checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
languageName: node
linkType: hard
"detect-node@npm:^2.0.4":
version: 2.1.0
resolution: "detect-node@npm:2.1.0"
@@ -12885,15 +12882,6 @@ __metadata:
languageName: node
linkType: hard
"focus-lock@npm:^0.9.1":
version: 0.9.2
resolution: "focus-lock@npm:0.9.2"
dependencies:
tslib: ^2.0.3
checksum: 7bb35e62c6308b3dd2f4559c9ffb126e2ef89db7b27602fa286c6f7e085f396bc9b34fb8ff0f1c2b409f479331e6a5344f6268f60ea71c300ca7dfd9c8827178
languageName: node
linkType: hard
"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.0":
version: 1.15.2
resolution: "follow-redirects@npm:1.15.2"
@@ -13232,13 +13220,6 @@ __metadata:
languageName: node
linkType: hard
"get-nonce@npm:^1.0.0":
version: 1.0.1
resolution: "get-nonce@npm:1.0.1"
checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
languageName: node
linkType: hard
"get-package-type@npm:^0.1.0":
version: 0.1.0
resolution: "get-package-type@npm:0.1.0"
@@ -20472,7 +20453,7 @@ __metadata:
languageName: node
linkType: hard
"prop-types@npm:*, prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
"prop-types@npm:*, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -20732,17 +20713,6 @@ __metadata:
languageName: node
linkType: hard
"react-clientside-effect@npm:^1.2.5":
version: 1.2.6
resolution: "react-clientside-effect@npm:1.2.6"
dependencies:
"@babel/runtime": ^7.12.13
peerDependencies:
react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
checksum: 7db6110027a51458b1a46109d2b63dd822825f483c71afef7c0c0a671f3b1aa155049dbd8651c9d536ffac83601f8823b7c3f8916b4f4ee5c3cb7647a85cce4e
languageName: node
linkType: hard
"react-devtools-core@npm:^4.26.1":
version: 4.27.2
resolution: "react-devtools-core@npm:4.27.2"
@@ -20782,22 +20752,6 @@ __metadata:
languageName: node
linkType: hard
"react-focus-lock@npm:2.5.2":
version: 2.5.2
resolution: "react-focus-lock@npm:2.5.2"
dependencies:
"@babel/runtime": ^7.0.0
focus-lock: ^0.9.1
prop-types: ^15.6.2
react-clientside-effect: ^1.2.5
use-callback-ref: ^1.2.5
use-sidecar: ^1.0.5
peerDependencies:
react: ^16.8.0 || ^17.0.0
checksum: 520b12a4496be21b3228bbf938657f6c33f868e486a0cd355d8bec918129d2c1bf7aabecb20aecdb446a1fbdb61b16f680b5d15b998f544f1b5c0dc5c8914c40
languageName: node
linkType: hard
"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
version: 18.2.0
resolution: "react-is@npm:18.2.0"
@@ -21007,41 +20961,6 @@ __metadata:
languageName: node
linkType: hard
"react-remove-scroll-bar@npm:^2.1.0":
version: 2.3.4
resolution: "react-remove-scroll-bar@npm:2.3.4"
dependencies:
react-style-singleton: ^2.2.1
tslib: ^2.0.0
peerDependencies:
"@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
languageName: node
linkType: hard
"react-remove-scroll@npm:2.4.3":
version: 2.4.3
resolution: "react-remove-scroll@npm:2.4.3"
dependencies:
react-remove-scroll-bar: ^2.1.0
react-style-singleton: ^2.1.0
tslib: ^1.0.0
use-callback-ref: ^1.2.3
use-sidecar: ^1.0.1
peerDependencies:
"@types/react": ^16.8.0 || ^17.0.0
react: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: c2f4277ee953b3905b8500c72b6f509f5138dc6eff157ff1160f7810cb6934ee148d13aef7f9fa3f4ed12372cc4564347ed6b16083ff1e4d241708bb1b8bf5a7
languageName: node
linkType: hard
"react-shallow-renderer@npm:^16.15.0":
version: 16.15.0
resolution: "react-shallow-renderer@npm:16.15.0"
@@ -21054,23 +20973,6 @@ __metadata:
languageName: node
linkType: hard
"react-style-singleton@npm:^2.1.0, react-style-singleton@npm:^2.2.1":
version: 2.2.1
resolution: "react-style-singleton@npm:2.2.1"
dependencies:
get-nonce: ^1.0.0
invariant: ^2.2.4
tslib: ^2.0.0
peerDependencies:
"@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
languageName: node
linkType: hard
"react@link:../web/node_modules/react::locator=%40standardnotes%2Ftoast%40workspace%3Apackages%2Ftoast":
version: 0.0.0-use.local
resolution: "react@link:../web/node_modules/react::locator=%40standardnotes%2Ftoast%40workspace%3Apackages%2Ftoast"
@@ -23970,14 +23872,14 @@ __metadata:
languageName: node
linkType: hard
"tslib@npm:^1.0.0, tslib@npm:^1.8.1":
"tslib@npm:^1.8.1":
version: 1.14.1
resolution: "tslib@npm:1.14.1"
checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
languageName: node
linkType: hard
"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0":
"tslib@npm:^2.0.1, tslib@npm:^2.1.0":
version: 2.4.0
resolution: "tslib@npm:2.4.0"
checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
@@ -24458,37 +24360,6 @@ __metadata:
languageName: node
linkType: hard
"use-callback-ref@npm:^1.2.3, use-callback-ref@npm:^1.2.5":
version: 1.3.0
resolution: "use-callback-ref@npm:1.3.0"
dependencies:
tslib: ^2.0.0
peerDependencies:
"@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
languageName: node
linkType: hard
"use-sidecar@npm:^1.0.1, use-sidecar@npm:^1.0.5":
version: 1.1.2
resolution: "use-sidecar@npm:1.1.2"
dependencies:
detect-node-es: ^1.1.0
tslib: ^2.0.0
peerDependencies:
"@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
languageName: node
linkType: hard
"use-sync-external-store@npm:^1.0.0, use-sync-external-store@npm:^1.2.0":
version: 1.2.0
resolution: "use-sync-external-store@npm:1.2.0"