diff --git a/package.json b/package.json index 0e55ad54..8cdbcb7f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fold-dev", "title": "Fold", - "version": "0.19.0", + "version": "0.20.0", "description": "The UI component library for product teams.", "workspaces": { "packages": [ diff --git a/packages/core/package.json b/packages/core/package.json index dbc6e0e5..7f085a54 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@fold-dev/core", "title": "Fold", - "version": "0.19.0", + "version": "0.20.0", "description": "The UI library for product teams.", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/core/src/alert/alert.tsx b/packages/core/src/alert/alert.tsx index 9e93706e..7aecf3b5 100644 --- a/packages/core/src/alert/alert.tsx +++ b/packages/core/src/alert/alert.tsx @@ -1,5 +1,5 @@ import React, { ReactPortal, useContext } from 'react' -import { Button, Heading, IconLib, Modal, ModalClose, Text, useId } from '../' +import { Button, Heading, IconLib, Modal, ModalClose, Portal, Text, useId } from '../' import { FoldContext } from '../contexts' export type AlertOptions = { @@ -27,7 +27,7 @@ export const Alert = (props: AlertProps) => { const { onDismiss, alert } = props const titleId = useId() const descriptionId = useId() - const { portal, icon, color, title, description, button = 'Okay', closeButton } = alert + const { portal = Portal, icon, color, title, description, button = 'Okay', closeButton } = alert return ( { // calculate normal mouse movement if (mouseX < cache.mouse.x - moveThreshold) moveDirection = 'left' if (mouseX > cache.mouse.x + moveThreshold) moveDirection = 'right' - if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up' - if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down' + + // if there is dual movement - restrict the direction + if (window[FOLD_RESTRICT_DUAL_MOVEMENT]) { + if (moveDirection != 'left' && moveDirection != 'right') { + if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up' + if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down' + } + } else { + if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up' + if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down' + } // calculate indent mouse movement (jerking) // TODO: extend to accommodate vertical directions diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts index 39723621..1f56ef52 100644 --- a/packages/core/src/drag/drag.hook.ts +++ b/packages/core/src/drag/drag.hook.ts @@ -5,6 +5,7 @@ import { FOLD_DRAG_CACHE, FOLD_DRAG_LOCK, FOLD_DRAG_STATE, + FOLD_RESTRICT_DUAL_MOVEMENT, getBoundingClientRect, getPreviousNextElements, globalCursor, @@ -22,6 +23,10 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { const ghostRef = useRef(null) const { indentDelay } = args + const restrictDualMovement = (val = true) => window[FOLD_RESTRICT_DUAL_MOVEMENT] = val + + const forceLockDragMovement = (val = true) => window[FOLD_DRAG_LOCK] = val + const getStaticState = (): any => windowObject[FOLD_DRAG_STATE] const getCache = (): any => windowObject[FOLD_DRAG_CACHE] @@ -420,6 +425,8 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { return { getStaticState, + forceLockDragMovement, + restrictDualMovement, getCache, getGhostElement, setGhostElement, diff --git a/packages/core/src/heading/heading.css b/packages/core/src/heading/heading.css index a9cd267e..62a592e3 100644 --- a/packages/core/src/heading/heading.css +++ b/packages/core/src/heading/heading.css @@ -7,7 +7,7 @@ h1, h2, h3, h4, h5, h6, .f-heading { color: var(--f-heading-color); background-color: var(--f-heading-background-color); font-family: var(--f-font-heading); - width: fit-content; + /* width: fit-content; */ /* line-height: normal; */ } diff --git a/packages/core/src/menu/menu.css b/packages/core/src/menu/menu.css index a4821880..254a9501 100644 --- a/packages/core/src/menu/menu.css +++ b/packages/core/src/menu/menu.css @@ -67,7 +67,7 @@ --f-menu-item-color-active: var(--f-color-accent); --f-menu-item-color-system-active: var(--f-color-surface-stronger); --f-menu-item-color-disabled: var(--f-color-text-weakest); - --f-menu-item-padding: 0.3rem 0.75rem; + --f-menu-item-padding: 0.4rem 0.75rem; --f-menu-item-margin: 0 0.2rem; --f-menu-item-height: fit-content; } diff --git a/packages/core/src/stat/stat.tsx b/packages/core/src/stat/stat.tsx index 16f4f954..fca8a598 100644 --- a/packages/core/src/stat/stat.tsx +++ b/packages/core/src/stat/stat.tsx @@ -44,7 +44,7 @@ export const Stat = (props: StatProps) => {
{icon && } {descriptionTool} - {description && {description}} + {description && {description}}
)} {footer} diff --git a/packages/core/src/view/view.tsx b/packages/core/src/view/view.tsx index 853fb950..846f8ef1 100644 --- a/packages/core/src/view/view.tsx +++ b/packages/core/src/view/view.tsx @@ -21,6 +21,7 @@ export type ScrollViewProps = { onScrollToBottom?: any onScrollToTop?: any instanceId?: string + scrollSensitivityDelay?: number } & CoreViewProps export const ScrollView = forwardRef((props: ScrollViewProps, ref) => { @@ -34,6 +35,7 @@ export const ScrollView = forwardRef((props: ScrollViewProps, ref) => { onScrollToTop, style = {}, instanceId, + scrollSensitivityDelay = 50, ...rest } = props const scrollRef = useRef(null) @@ -79,17 +81,23 @@ export const ScrollView = forwardRef((props: ScrollViewProps, ref) => { const handleWheelEvent = (e) => { if (freeze) return - const offsetHeight = scrollRef.current.scrollHeight - scrollRef.current.scrollTop - 1 - const isBottom = scrollRef.current.offsetHeight >= offsetHeight - const isTop = scrollRef.current.scrollTop == 0 - - if (isTop && stickToTop) { - userIsScrolling.current = false - } else if (isBottom && stickToBottom) { - userIsScrolling.current = false - } else { - userIsScrolling.current = true - } + // give the browser time to repaint the scroll + setTimeout(() => { + // maybe unmounted now + if (!scrollRef.current) return + + const offsetHeight = scrollRef.current.scrollHeight - scrollRef.current.scrollTop + const isBottom = scrollRef.current.offsetHeight >= offsetHeight + const isTop = scrollRef.current.scrollTop == 0 + + if (isTop && stickToTop) { + userIsScrolling.current = false + } else if (isBottom && stickToBottom) { + userIsScrolling.current = false + } else { + userIsScrolling.current = true + } + }, scrollSensitivityDelay) } const handleCustomEvent = ({ detail }) => { diff --git a/packages/design/package.json b/packages/design/package.json index 66faf075..005561a6 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -1,7 +1,7 @@ { "name": "@fold-dev/design", "title": "Design Tokens", - "version": "0.19.0", + "version": "0.20.0", "description": "The UI library for product teams.", "main": "", "module": "", diff --git a/packages/design/tokens/font-size.json b/packages/design/tokens/font-size.json index e8b90bf3..9f67a4cd 100644 --- a/packages/design/tokens/font-size.json +++ b/packages/design/tokens/font-size.json @@ -1,5 +1,6 @@ { "font-size": { + "2xs": { "value": "0.45rem" }, "xs": { "value": "0.6rem" }, "sm": { "value": "0.8rem" }, "md": { "value": "1rem" },