diff --git a/packages/harmony/src/components/modal/Modal.module.css b/packages/harmony/src/components/modal/Modal.module.css index 33282578bc9..5f64f1c9afa 100644 --- a/packages/harmony/src/components/modal/Modal.module.css +++ b/packages/harmony/src/components/modal/Modal.module.css @@ -2,7 +2,7 @@ :global(.bgModal) { background-color: rgba(0, 0, 0, 0.6); - z-index: 9999; + z-index: calc(var(--harmony-layer-modal) - 1); position: fixed; opacity: 0; top: 0; diff --git a/packages/harmony/src/components/modal/Modal.tsx b/packages/harmony/src/components/modal/Modal.tsx index b324fb51e82..babff7bf90b 100644 --- a/packages/harmony/src/components/modal/Modal.tsx +++ b/packages/harmony/src/components/modal/Modal.tsx @@ -17,9 +17,7 @@ import ReactDOM from 'react-dom' import { animated, useTransition } from 'react-spring' import { useEffectOnce } from 'react-use' -import { useClickOutside } from 'hooks/useClickOutside' - -import { useHotkeys, useScrollLock } from '../../hooks' +import { useHotkeys, useScrollLock, useClickOutside } from '../../hooks' import { IconClose } from '../../icons' import styles from './Modal.module.css' @@ -348,7 +346,7 @@ export const Modal = forwardRef(function Modal( className={styles.dismissButton} onClick={onClose} > - + )}
( aria-label='dismiss dialog' className={cn(styles.dismissButton, dismissButtonClassName)} icon={IconClose} + color='subdued' + size='s' onClick={handleClose} /> ) : null} diff --git a/packages/harmony/src/index.ts b/packages/harmony/src/index.ts index 0c657b90e8f..eb88af9f704 100644 --- a/packages/harmony/src/index.ts +++ b/packages/harmony/src/index.ts @@ -7,6 +7,7 @@ import './foundations/color/semantic.css' import './foundations/motion/motion.css' import './foundations/corner-radius/corner-radius.css' import './foundations/shadows/shadows.css' +import './foundations/layers/layers.css' export * from './foundations' export * from './components' diff --git a/packages/stems/src/hooks/useClickOutside.ts b/packages/stems/src/hooks/useClickOutside.ts deleted file mode 100644 index d912814345f..00000000000 --- a/packages/stems/src/hooks/useClickOutside.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { MutableRefObject, useEffect, useRef } from 'react' - -/** - * Custom hook that fires an onClick callback when the user clicks - * outside of the element referenced by the returned ref. - * - * @param onClick the callback fired when a click is performed "outside" - * @param ignoreClick optional check to be run on the element that receives - * the "click." If ignoreClick returns true, the click is not considered outside - * even if it was outside the element referenced. - * @param defaultRef optional ref to use, if not provided a new ref will be created & returned - - * @returns a ref that should be used to mark the "inside" element - */ -export const useClickOutside = ( - onClick: () => void, - ignoreClick: (target: EventTarget) => boolean = () => false, - isVisible: boolean, - defaultRef?: MutableRefObject | null -) => { - const ref = useRef(defaultRef?.current ?? null) - - useEffect(() => { - const handleClick = (e: MouseEvent) => { - if (e.target) { - if ( - !ref.current || - (ref.current && ref.current.contains(e.target)) || - ignoreClick(e.target) - ) { - return - } - } - onClick() - } - - if (isVisible) { - // Don't attach the listener until all the current events are finished bubbling - setTimeout(() => { - document.addEventListener('click', handleClick) - }, 0) - } - return () => { - // Don't remove the listener until after the listener has been attached - setTimeout(() => { - document.removeEventListener('click', handleClick) - }, 0) - } - }, [onClick, ignoreClick, isVisible]) - - return ref -} diff --git a/packages/stems/src/hooks/useHotKeys.ts b/packages/stems/src/hooks/useHotKeys.ts deleted file mode 100644 index ccaf55540c2..00000000000 --- a/packages/stems/src/hooks/useHotKeys.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useEffect } from 'react' - -import { Mapping, setupHotkeys, removeHotkeys } from 'utils/hotkeyUtil' - -export const useHotkeys = (mapping: Mapping) => { - useEffect(() => { - const hook = setupHotkeys(mapping) - return () => { - removeHotkeys(hook) - } - }, [mapping]) -} diff --git a/packages/stems/src/hooks/useScrollLock.ts b/packages/stems/src/hooks/useScrollLock.ts deleted file mode 100644 index 68973aea502..00000000000 --- a/packages/stems/src/hooks/useScrollLock.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { useState, useRef, useEffect } from 'react' - -/** - * `useScrollLock` will prevent the root app div from scrolling. This is useful for modals, or for presenting - * full screen pages on top of the existing app. - */ -export const useScrollLock = ( - lock: boolean, - increment: () => void, - decrement: () => void -) => { - const isLocked = useRef(lock) - const [previousLockVal, setPreviousLockVal] = useState(null) - - const isNewLockVal = lock !== previousLockVal && previousLockVal !== null - const isFirstLock = lock && previousLockVal === null - - if (isNewLockVal || isFirstLock) { - setPreviousLockVal(lock) - - if (lock) { - increment() - } else { - decrement() - } - } - - useEffect(() => { - isLocked.current = lock - }, [lock]) - - useEffect( - () => () => { - if (isLocked.current) { - decrement() - } - }, - [decrement] - ) -} diff --git a/packages/stems/src/index.ts b/packages/stems/src/index.ts index f0f67479202..7877ce05f23 100644 --- a/packages/stems/src/index.ts +++ b/packages/stems/src/index.ts @@ -38,10 +38,6 @@ export { TokenValueSliderProps } from './components/TokenValueSlider' -export { useClickOutside } from './hooks/useClickOutside' -export { useScrollLock } from './hooks/useScrollLock' -export { useMediaQueryListener } from './hooks/useMediaQueryListener' - export { MarkdownViewer, MarkdownViewerProps diff --git a/packages/web/src/hooks/useScrollLock.ts b/packages/web/src/hooks/useScrollLock.ts index 9aaa73bfd5b..9c0a93719a6 100644 --- a/packages/web/src/hooks/useScrollLock.ts +++ b/packages/web/src/hooks/useScrollLock.ts @@ -1,4 +1,4 @@ -import { useScrollLock as stemsScrollLock } from '@audius/stems' +import { useScrollLock as harmonyScrollLock } from '@audius/harmony' import { useDispatch } from 'react-redux' import { @@ -17,7 +17,7 @@ const useScrollLock = ( const dispatch = useDispatch() increment = increment ?? (() => dispatch(incrementScrollCount())) decrement = decrement ?? (() => dispatch(decrementScrollCount())) - stemsScrollLock(lock, increment, decrement) + harmonyScrollLock(lock, increment, decrement) } export default useScrollLock