@homecode/ui 4.19.3 → 4.19.5

package/dist/esm/index.js

@@ -29,9 +29,7 @@ export { Router, RouterContext, RouterStore } from './src/components/Router/Rout
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';
 export { Scroll } from './src/components/Scroll/Scroll.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import './src/components/Shimmer/Shimmer.styl.js';
+export { Shimmer } from './src/components/Shimmer/Shimmer.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import '../AssistiveText/AssistiveText.styl.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
+import S from './Autocomplete.styl.js';
+import { Shimmer } from '../Shimmer/Shimmer.js';
 import debounce from '../../tools/debounce.js';
 import { useIsMounted } from '../../hooks/useIsMounted.js';
-import S from './Autocomplete.styl.js';
-import Shimmer from '../Shimmer/Shimmer.js';
 import { useListKeyboardControl } from '../../hooks/useListKeyboardControl.js';
 import '../Spinner/Spinner.styl.js';
 import '../Button/Button.styl.js';
@@ -30,8 +30,8 @@ import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';
 import '../DatePickerInput/DatePickerInput.styl.js';
-import '../Draggable/Draggable.styl.js';
 import '../../tools/queryParams.js';
+import '../Draggable/Draggable.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
@@ -64,7 +64,7 @@ function Autocomplete(props) {
     const [isFocused, setIsFocused] = useState(false);
     const currentRequest = useRef('');
     const inputRef = useRef(null);
-    const isOpen = isFocused && options.length > 0;
+    const isOpen = options.length > 0;
     const classes = cn(S.root, className);
     const handleInputChange = (e, value) => {
         const val = (value || e?.target.value) ?? '';

package/dist/esm/src/components/Draggable/Draggable.js

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import S from './Draggable.styl.js';
-import Time from 'timen';
-import cn from 'classnames';
-import { createStore } from 'justorm/react';
 import 'nanoid';
 import '../../tools/dom.js';
-import debounce from '../../tools/debounce.js';
+import throttle from '../../tools/throttle.js';
+import Time from 'timen';
 import 'compareq';
 import 'lodash.pick';
 import '../../tools/queryParams.js';
+import { Component } from 'react';
+import S from './Draggable.styl.js';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
 
 class Draggable extends Component {
     store;
@@ -44,10 +44,9 @@ class Draggable extends Component {
         document.addEventListener('pointermove', this.onPointerMove);
         document.addEventListener('pointerup', this.onPointerUp);
     };
-    onPointerMove = e => {
+    onPointerMove = ({ clientX, clientY }) => {
         if (!this.draggingElem)
             return;
-        const { clientX: x, clientY: y } = e;
         if (!this.store.draggingId) {
             this.store.draggingId = this.draggingElem.dataset.id;
         }
@@ -55,12 +54,12 @@ class Draggable extends Component {
             this.dragStartFired = true;
             this.props.onDragStart?.(this.store.draggingId);
         }
-        const dx = x - this.startPos.x;
-        const dy = y - this.startPos.y;
+        const dx = clientX - this.startPos.x;
+        const dy = clientY - this.startPos.y;
         this.transformInner(this.draggingElem, `translate(${dx}px, ${dy}px)`);
-        this.checkUnderElem(x, y);
+        this.checkUnderElem(clientX, clientY);
     };
-    checkUnderElem = debounce((x, y) => {
+    checkUnderElem = throttle((x, y) => {
         const underItem = document.elementFromPoint(x, y)?.closest(`.${S.item}`);
         if (!underItem) {
             this.store.underOffset = '';
@@ -70,12 +69,57 @@ class Draggable extends Component {
         // @ts-ignore
         const { id } = underItem.dataset;
         const { draggingId, underId } = this.store;
+        const { isShifting, onChange } = this.props;
         if (!this.startPos || id === draggingId || id === underId)
             return;
         const { x: x1, y: y1 } = this.draggingElemBounds;
         const { x: x2, y: y2 } = this.selectInner(underItem).getBoundingClientRect();
         const dx = x1 - x2;
         const dy = y1 - y2;
+        if (isShifting) {
+            const items = [...this.props.items];
+            const dragIndex = items.indexOf(draggingId);
+            const underIndex = items.indexOf(id);
+            if (id !== underId) {
+                let newItems;
+                if (dragIndex < underIndex) {
+                    // Moving forward: take items before dragIndex, then between dragIndex+1 and underIndex, then dragged item, then rest
+                    newItems = [
+                        ...items.slice(0, dragIndex),
+                        ...items.slice(dragIndex + 1, underIndex + 1),
+                        draggingId,
+                        ...items.slice(underIndex + 1),
+                    ];
+                }
+                else {
+                    // Moving backward: take items before underIndex, then dragged item, then between underIndex and dragIndex-1, then rest
+                    newItems = [
+                        ...items.slice(0, underIndex),
+                        draggingId,
+                        ...items.slice(underIndex, dragIndex),
+                        ...items.slice(dragIndex + 1),
+                    ];
+                }
+                onChange?.(newItems);
+            }
+            const direction = Math.sign(underIndex - dragIndex);
+            items.forEach((itemId, index) => {
+                if (itemId === draggingId)
+                    return;
+                const elem = document.querySelector(`[data-id="${itemId}"]`);
+                if (!elem)
+                    return;
+                if (direction > 0 && index > dragIndex && index <= underIndex) {
+                    this.transformInner(elem, `translate(${-dx}px, ${-dy}px)`);
+                }
+                else if (direction < 0 && index < dragIndex && index >= underIndex) {
+                    this.transformInner(elem, `translate(${dx}px, ${dy}px)`);
+                }
+                else {
+                    this.transformInner(elem, null);
+                }
+            });
+        }
         this.store.underOffset = `translate(${dx}px, ${dy}px)`;
         this.store.underId = id;
     }, 100);
@@ -88,7 +132,7 @@ class Draggable extends Component {
     };
     onPointerUp = e => {
         const { underId, draggingId } = this.store;
-        const { onChange, onDragEnd } = this.props;
+        const { onDragEnd, isShifting } = this.props;
         const { id } = this.draggingElem.dataset;
         if (draggingId) {
             e.stopPropagation();
@@ -99,15 +143,25 @@ class Draggable extends Component {
         this.dragStartFired = false;
         this.startPos = null;
         this.store.draggingId = null;
-        if (underId && onChange) {
+        // Only call onChange if not in shifting mode
+        if (underId && !isShifting && this.props.onChange) {
             const newItems = [...this.props.items];
             const draggingIndex = newItems.indexOf(id);
             const underIndex = newItems.indexOf(underId);
             newItems[underIndex] = id;
             newItems[draggingIndex] = underId;
-            onChange(newItems);
+            this.props.onChange(newItems);
         }
         this.dropUnder();
+        // Reset all item transforms
+        // if (this.props.isShifting) {
+        //   this.props.items.forEach(itemId => {
+        //     const elem = document.querySelector(`[data-id="${itemId}"]`);
+        //     if (elem) {
+        //       this.transformInner(elem, null);
+        //     }
+        //   });
+        // }
         this.timers.after(100, () => {
             if (this.draggingElem) {
                 this.selectInner(this.draggingElem).style.transform = null;
@@ -129,7 +183,16 @@ class Draggable extends Component {
     render() {
         const { items, className, itemClassName, renderItem, children } = this.props;
         const { draggingId, underId, underOffset } = this.store;
-        return (jsxs("div", { className: cn(S.root, draggingId && S.dragging, className), children: [items.map((id, index) => (jsx("div", { className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, "data-id": id, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
+        return (jsxs("div", { className: cn(S.root, draggingId && S.dragging, className), children: [items.map((id, index) => {
+                    const isDragging = id === draggingId;
+                    const isUnder = id === underId;
+                    return (jsx("div", { className: cn(S.item, itemClassName, isDragging && S.active), onPointerDown: this.onPointerDown, "data-id": id, children: jsx("div", { className: S.inner, style: isDragging || (!this.props.isShifting && isUnder)
+                                ? {
+                                    transform: isUnder ? underOffset : null,
+                                    transition: 'none',
+                                }
+                                : null, children: renderItem(id, index, isDragging) }) }, id));
+                }), children] }));
     }
 }
 

package/dist/esm/src/components/Draggable/Draggable.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_dragging__M8qhF .Draggable_active__XcFM3,.Draggable_dragging__M8qhF .Draggable_inner__c4syM{pointer-events:none}.Draggable_dragging__M8qhF .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}";
+var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:inline-flex;max-width:100px;width:100%}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_dragging__M8qhF .Draggable_inner__c4syM{pointer-events:none}.Draggable_dragging__M8qhF .Draggable_active__XcFM3{pointer-events:none;z-index:1}.Draggable_dragging__M8qhF .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s}";
 var S = {"root":"Draggable_root__S1BgI","item":"Draggable_item__Z1pXk","inner":"Draggable_inner__c4syM","dragging":"Draggable_dragging__M8qhF","active":"Draggable_active__XcFM3"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Input/Input.js

@@ -12,9 +12,9 @@ import { Scroll } from '../Scroll/Scroll.js';
 import { capitalize } from '../../tools/string.js';
 import { generateUID } from '../../tools/uid.js';
 import S from './Input.styl.js';
-import debounce from '../../tools/debounce.js';
 import '../Autocomplete/Autocomplete.styl.js';
 import '../Shimmer/Shimmer.styl.js';
+import debounce from '../../tools/debounce.js';
 import '../ButtonGroup/ButtonGroup.styl.js';
 import '../Calendar/Calendar.styl.js';
 import '../../tools/dom.js';

package/dist/esm/src/components/Shimmer/Shimmer.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import cn from 'classnames';
 import S from './Shimmer.styl.js';
+import cn from 'classnames';
 
 const Shimmer = ({ className, size = 'm' }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`]), children: jsx("div", { className: S.inner }) }));
 
-export { Shimmer as default };
+export { Shimmer };

package/dist/esm/types/src/components/Draggable/Draggable.d.ts

@@ -11,7 +11,10 @@ export declare class Draggable extends Component<T.Props> {
     componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
     onPointerDown: (e: any) => void;
-    onPointerMove: (e: any) => void;
+    onPointerMove: ({ clientX, clientY }: {
+        clientX: any;
+        clientY: any;
+    }) => void;
     checkUnderElem: any;
     onPointerOut: ({ target }: {
         target: any;

package/dist/esm/types/src/components/Draggable/Draggable.types.d.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
-export type Props = {
+export interface Props {
     items: string[];
     className?: string;
     itemClassName?: string;
+    isShifting?: boolean;
+    mode: 'swap' | 'push';
     renderItem: (id: string, index: number, isActive: boolean) => ReactNode;
     onDragStart?: (id: string) => void;
     onDragEnd?: (id: string) => void;
     onChange: (items: string[]) => void;
     children?: ReactNode;
-};
+}

package/dist/esm/types/src/components/Shimmer/Shimmer.d.ts

@@ -1,7 +1,6 @@
 import { Size } from 'uilib/types';
-type ShimmerProps = {
+export type ShimmerProps = {
     className?: string;
     size?: Size;
 };
-declare const Shimmer: ({ className, size }: ShimmerProps) => JSX.Element;
-export default Shimmer;
+export declare const Shimmer: ({ className, size }: ShimmerProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.19.3",
+  "version": "4.19.5",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",