minor improvements & optimizations (#302)

Various optimisations, bug fixes & improvements.

closes #293
closes #292
closes #291

package.json

@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "The UI component library for product teams.",
     "workspaces": {
         "packages": [

packages/core/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

packages/core/src/accordion/accordion.tsx

@@ -61,9 +61,9 @@ export const AccordionItem = (props: AccordionItemProps) => {
     const id = useId()
     const [innerOpen, setInnerOpen] = useState(collapsed)
     const isOpen = uncontrolled ? uncontrolled && innerOpen : open
-    const { heading, panel } = useMemo(() => {
-        return React.Children.toArray(props.children).reduce((acc: any, val: ReactElement) => {
-            switch (val.type) {
+    const { heading, panel } = useMemo<any>(() => {
+        return React.Children.toArray(props.children).reduce((acc, val) => {
+            switch ((val as any).type) {
                 case AccordionHeading:
                     return { ...acc, heading: val }
                 case AccordionPanel:

packages/core/src/alert/alert.tsx

@@ -1,9 +1,10 @@
-import React, { useContext } from 'react'
+import React, { ReactPortal, useContext } from 'react'
 import { Button, Heading, IconLib, Modal, ModalClose, Text, useId } from '../'
 import { FoldContext } from '../contexts'
 
 export type AlertOptions = {
     icon?: string
+    portal?: any
     color?: string
     title?: string
     description?: string
@@ -26,11 +27,12 @@ export const Alert = (props: AlertProps) => {
     const { onDismiss, alert } = props
     const titleId = useId()
     const descriptionId = useId()
-    const { icon, color, title, description, button = 'Okay', closeButton } = alert
+    const { portal, icon, color, title, description, button = 'Okay', closeButton } = alert
 
     return (
         <Modal
             borderless
+            portal={portal}
             width={400}
             height="fit-content"
             role="alertdialog"

packages/core/src/attachment/attachment.css

@@ -65,6 +65,7 @@
 }
 
 .f-attachment__text {
+    overflow: hidden;
     flex: 1;
     align-items: flex-start;
 }
@@ -79,7 +80,27 @@
     margin-top: -2.5px;
 }
 
+.f-attachment__text-label {
+    max-width: 100%;
+}
+
+.f-attachment__text-label span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .f-attachment__text-meta {
+    max-width: 100%;
+}
+
+.f-attachment__text-meta span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--f-color-text-weakest);
 }

packages/core/src/attachment/attachment.tsx

@@ -254,14 +254,18 @@ export const Attachment = (props: AttachmentProps) => {
                                 size={size}
                                 color="currentColor"
                                 className="f-attachment__text-label">
-                                {label}
+                                <span>
+                                    {label}
+                                </span>
                             </Text>
                             {mime && (
                                 <Text
                                     size="sm"
                                     as="span"
                                     className="f-attachment__text-meta">
-                                    {MIME.DESCRIPTION[mime]}
+                                    <span>
+                                        {MIME.DESCRIPTION[mime]}
+                                    </span>
                                 </Text>
                             )}
                             {filesize && (

packages/core/src/button/button.css

@@ -484,7 +484,7 @@
 }
 
 .f-button.md { 
-    height: var(--f-size-11); 
+    height: var(--f-size-10); 
     padding: 0 var(--f-space-3);
 }
 

packages/core/src/copy/copy.css

@@ -81,7 +81,7 @@
 
 .f-copy.md {
     font-size: var(--f-font-size-md) !important;
-    min-height: var(--f-size-11); 
+    min-height: var(--f-size-10); 
 }
 
 .f-copy.lg {

packages/core/src/drag/drag.css

@@ -29,6 +29,12 @@
     user-select: all !important; 
 }
 
+.f-drag-area.is-dragging .f-drag-element > *.drag-pe-all,
+.f-drag-area.is-dragging .f-drag-area__element > *.drag-pe-all {
+    pointer-events: all !important; 
+    user-select: all !important; 
+}
+
 /* target groups */
 
 .f-drag-area.is-dragging.no-origin-variant .f-drag-area.is-dragging:not(.no-origin-variant) {

packages/core/src/drag/drag.hook.ts

@@ -50,10 +50,10 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
         return !!windowObject[FOLD_CUSTOM_GHOST_ELEMENT]
     }
 
-    const startDrag = () => {
+    const startDrag = (data = null) => {
         documentObject.body.dataset.dragging = 'yes'
         globalCursor.add('grabbing')
-        dispatchDragEvent('onstart', null)
+        dispatchDragEvent('onstart', data)
     }
 
     const endDrag = () => {
@@ -171,7 +171,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                         // cache the indentation parameters
                         let targetIndent = indent
                         const previous = el.previousSibling
-                        const next = el.nextSibling
+                        const next = el.nextSibling?.dataset.buffer ? null : el.nextSibling
                         const previousIndent = previous ? +previous.dataset.indent : 0
                         const nextIndent = next ? +next.dataset.indent : 0
 
@@ -207,17 +207,17 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                             group,
                         }
 
-                        setOrigin({
+                        const origin = {
                             targetVariant: finalTargetVariant,
                             elementId,
                             width,
                             height,
                             areaId,
                             index,
                             group,
-                        })
+                        }
 
-                        setTarget({
+                        const target: any = {
                             focus: false,
                             moveDirection,
                             index,
@@ -229,9 +229,11 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                             areaId,
                             elementId,
                             group,
-                        })
+                        }
 
-                        startDrag()
+                        setOrigin(origin)
+                        setTarget(target)
+                        startDrag({ origin, target })
                     })
                 }
             }, 150)

packages/core/src/drag/drag.util.ts

@@ -3,15 +3,13 @@ import { FOLD_DRAG_STATE } from './drag-manager'
 import { FOLD_GHOST_ELEMENT_ROTATION } from './drag.hook'
 
 export const getPreviousNextElements = (targetIndex, targetElement, moveDirection) => {
-    const { origin } = windowObject[FOLD_DRAG_STATE]
-    const originIndex = origin.index
     const parent = targetElement.parentNode
 
     let previous = parent.children[targetIndex - 1]
     let next = parent.children[targetIndex]
 
     if (!!next) {
-        if (moveDirection == 'down' && originIndex == +next.dataset.index) {
+        if (moveDirection == 'down' && windowObject[FOLD_DRAG_STATE].origin.index == +next.dataset.index) {
             next = parent.children[targetIndex + 1]
         }
 
@@ -23,7 +21,11 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
     }
 
     if (!!previous) {
-        if (moveDirection == 'up' && originIndex == +previous.dataset.index) {
+        // if it's the same object and the mouse is travelling up, then skip over it
+        if (
+            moveDirection == 'up' 
+            && windowObject[FOLD_DRAG_STATE].origin.index == +previous.dataset.index
+            && windowObject[FOLD_DRAG_STATE].origin.areaId == previous.dataset.areaid) {
             previous = parent.children[targetIndex - 2]
         }
     } else {

packages/core/src/editable/editable.tsx

@@ -1,18 +1,19 @@
 import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { View } from '..'
-import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd } from '../helpers'
+import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd, stopEvent } from '../helpers'
 import { CoreViewProps } from '../types'
 
 export type EditableProps = {
     selectOnFocus?: boolean
     cursorEnd?: boolean
     disabled?: boolean
+    useDoubleClick?: boolean
     onChange?: any
     onCancel?: any
 } & CoreViewProps
 
 export const Editable = forwardRef((props: EditableProps, ref) => {
-    const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, ...rest } = props
+    const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, useDoubleClick, ...rest } = props
     const elementRef = useRef(null)
     const childRef = useRef(null)
     const cache = useRef('')
@@ -28,20 +29,25 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         if (onChange) onChange(value)
     }
 
+    // disable drag
+    // TODO: find a better way to handle this
+    const noEvent = (e) => e.stopPropagation()
+
     const deFocus = (target: HTMLElement, type: 'escape' | 'enter' | 'focusout') => {
         target.contentEditable = 'false'
         target.removeAttribute('tabindex')
         target.removeEventListener('keydown', handleKeyDown)
         target.removeEventListener('focusout', handleFocusOut)
+        target.removeEventListener('mousedown', noEvent)
         target.blur()
         keypressCache.current = false
         switch (type) {
             case 'escape':
                 return onCancel ? onCancel(cache.current) : null
             case 'enter':
-                return handleChange(target.innerHTML)
+                return handleChange(target.textContent)
             case 'focusout':
-                return handleChange(target.innerHTML)
+                return handleChange(target.textContent)
         }
     }
 
@@ -92,12 +98,13 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         el.spellcheck = false
         el.addEventListener('keydown', handleKeyDown)
         el.addEventListener('focusout', handleFocusOut)
-        cache.current = el.innerHTML
+        el.addEventListener('mousedown', noEvent)
+        cache.current = el.textContent
         setTimeout(() => {
             el.focus()
             if (cursorEnd) setCaretToTheEnd(el)
             if (selectOnFocus) selectElementContents(el)
-        }, 150)
+        })
     }
 
     useLayoutEffect(() => {
@@ -108,7 +115,8 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         <View
             {...rest}
             className={className}
-            onClick={handleClick}
+            onClick={useDoubleClick ? undefined : handleClick}
+            onDoubleClick={useDoubleClick ? handleClick : undefined}
             ref={mergeRefs([elementRef, ref])}>
             {props.children}
         </View>