forked from novuhq/novu
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(js): Popover focus trap and dismissal(novuhq#6049)
- Loading branch information
Showing
34 changed files
with
929 additions
and
830 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "typescript.preferences.importModuleSpecifier": "relative", | ||
| "typescript.preferences.autoImportFileExcludePatterns": ["**/node_modules/**", "**/dist/**"], | ||
| "editor.codeActionsOnSave": { | ||
| "source.organizeImports": "explicit", | ||
| "source.fixAll.eslint": "explicit" | ||
| }, | ||
| "editor.formatOnSave": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
packages/js/src/ui/components/Dropdown/DropdownContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { ComponentProps, splitProps } from 'solid-js'; | ||
| import { AppearanceKey } from '../../context'; | ||
| import { useStyle } from '../../helpers'; | ||
| import { Popover } from '../Popover'; | ||
|
|
||
| export const dropdownContentVariants = () => | ||
| 'nt-w-max nt-rounded-lg nt-overflow-hidden nt-flex nt-flex-col nt-min-w-52 nt-shadow-[0_5px_20px_0_rgba(0,0,0,0.20)] nt-z-10 nt-bg-background'; | ||
|
|
||
| export const DropdownContent = (props: ComponentProps<typeof Popover.Content> & { appearanceKey: AppearanceKey }) => { | ||
| const style = useStyle(); | ||
| const [local, rest] = splitProps(props, ['appearanceKey']); | ||
|
|
||
| return ( | ||
| <Popover.Content class={style(local.appearanceKey || 'dropdownContent', dropdownContentVariants())} {...rest} /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { splitProps } from 'solid-js'; | ||
| import { JSX } from 'solid-js/jsx-runtime'; | ||
| import { AppearanceKey } from '../../context'; | ||
| import { useStyle } from '../../helpers'; | ||
| import { usePopover } from '../Popover'; | ||
|
|
||
| export const dropdownItemVariants = () => | ||
| 'focus:nt-outline-none nt-items-center hover:nt-bg-neutral-alpha-100 focus:nt-bg-neutral-alpha-100 nt-py-1 nt-px-3'; | ||
|
|
||
| type DropdownItemProps = JSX.IntrinsicElements['button'] & { appearanceKey?: AppearanceKey }; | ||
| export const DropdownItem = (props: DropdownItemProps) => { | ||
| const style = useStyle(); | ||
| const [local, rest] = splitProps(props, ['appearanceKey', 'onClick']); | ||
| const { onClose } = usePopover(); | ||
|
|
||
| return ( | ||
| <button | ||
| class={style(local.appearanceKey || 'dropdownItem', dropdownItemVariants())} | ||
| onClick={(e) => { | ||
| if (typeof local.onClick === 'function') { | ||
| local.onClick(e); | ||
| } | ||
| onClose(); | ||
| }} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| }; |
17 changes: 17 additions & 0 deletions
17
packages/js/src/ui/components/Dropdown/DropdownTrigger.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { ComponentProps, splitProps } from 'solid-js'; | ||
| import { useStyle } from '../../helpers'; | ||
| import { AppearanceKey } from '../../context'; | ||
| import { Popover } from '../Popover'; | ||
|
|
||
| //TODO: Extend from buttonVariants() once added. | ||
| export const dropdownTriggerVariants = () => | ||
| 'nt-flex nt-justify-center nt-items-center nt-rounded-md nt-relative hover:nt-bg-foreground-alpha-50 focus:nt-bg-foreground-alpha-50 nt-text-foreground-alpha-600 nt-px-2'; | ||
|
|
||
| export const DropdownTrigger = (props: ComponentProps<typeof Popover.Trigger> & { appearanceKey?: AppearanceKey }) => { | ||
| const style = useStyle(); | ||
| const [local, rest] = splitProps(props, ['appearanceKey']); | ||
|
|
||
| return ( | ||
| <Popover.Trigger class={style(local.appearanceKey || 'dropdownTrigger', dropdownTriggerVariants())} {...rest} /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Popover } from '../Popover'; | ||
| import { DropdownContent } from './DropdownContent'; | ||
| import { DropdownItem } from './DropdownItem'; | ||
| import { DropdownTrigger } from './DropdownTrigger'; | ||
|
|
||
| export { dropdownTriggerVariants } from './DropdownTrigger'; | ||
| export { dropdownContentVariants } from './DropdownContent'; | ||
| export { dropdownItemVariants } from './DropdownItem'; | ||
|
|
||
| export const Dropdown = { | ||
| Root: Popover.Root, | ||
| Trigger: DropdownTrigger, | ||
| Content: DropdownContent, | ||
| Close: Popover.Close, | ||
| Item: DropdownItem, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 17 additions & 10 deletions
27
packages/js/src/ui/components/Header/MoreActionsDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,28 @@ | ||
| import { useStyle } from '../../helpers'; | ||
| import { cn, useStyle } from '../../helpers'; | ||
| import { DotsMenu } from '../../icons'; | ||
| import { dropdownContentClasses, moreActionsDropdownTriggerClasses, Popover } from '../Popover'; | ||
| import { Dropdown, dropdownTriggerVariants } from '../Dropdown'; | ||
| import { popoverTriggerVariants } from '../Popover'; | ||
| import { MoreActionsOptions } from './MoreActionsOptions'; | ||
|
|
||
| const APPEARANCE_KEY_PREFIX = 'moreActions'; | ||
|
|
||
| export const MoreActionsDropdown = () => { | ||
| const style = useStyle(); | ||
|
|
||
| return ( | ||
| <Popover fallbackPlacements={['bottom', 'top']} placement="bottom"> | ||
| <Popover.Trigger classes={style('moreActions__dropdownTrigger', moreActionsDropdownTriggerClasses())}> | ||
| <Dropdown.Root fallbackPlacements={['bottom', 'top']} placement="bottom"> | ||
| <Dropdown.Trigger | ||
| class={style( | ||
| 'moreActions__dropdownTrigger', | ||
| cn( | ||
| dropdownTriggerVariants(), | ||
| 'nt-rounded-md nt-px-0 hover:nt-bg-foreground-alpha-50 focus:nt-bg-foreground-alpha-50 nt-text-foreground-alpha-600' | ||
| ) | ||
| )} | ||
| > | ||
| <DotsMenu /> | ||
| </Popover.Trigger> | ||
| <Popover.Content classes={style('moreActions__dropdownContent', dropdownContentClasses())}> | ||
| </Dropdown.Trigger> | ||
| <Dropdown.Content appearanceKey="moreActions__dropdownContent"> | ||
| <MoreActionsOptions /> | ||
| </Popover.Content> | ||
| </Popover> | ||
| </Dropdown.Content> | ||
| </Dropdown.Root> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.