@douyinfe/semi-foundation 2.16.1 → 2.17.0-beta.0

package/lib/es/transfer/foundation.js

@@ -7,11 +7,10 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
-import { _generateGroupedData, _generateTreeData } from './transferUtils'; // eslint-disable-next-line max-len
+import { _generateGroupedData, _generateTreeData } from './transferUtils';
+import arrayMove from '../utils/arrayMove'; // eslint-disable-next-line max-len
 
 export default class TransferFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -275,7 +274,7 @@ export default class TransferFoundation extends BaseFoundation {
     const selectedItems = this._adapter.getSelected();
 
     let selectedArr = [..._valuesInstanceProperty(selectedItems).call(selectedItems)];
-    selectedArr = this._arrayMove(selectedArr, oldIndex, newIndex);
+    selectedArr = arrayMove(selectedArr, oldIndex, newIndex);
     let newSelectedItems = new _Map();
 
     _forEachInstanceProperty(selectedArr).call(selectedArr, option => {
@@ -287,12 +286,4 @@ export default class TransferFoundation extends BaseFoundation {
     this._notifyChange(newSelectedItems);
   }
 
-  _arrayMove(array, from, to) {
-    const newArray = _sliceInstanceProperty(array).call(array);
-
-    _spliceInstanceProperty(newArray).call(newArray, to < 0 ? newArray.length + to : to, 0, _spliceInstanceProperty(newArray).call(newArray, from, 1)[0]);
-
-    return newArray;
-  }
-
 }

package/lib/es/utils/arrayMove.d.ts

@@ -0,0 +1 @@
+export default function arrayMove(array: Array<any>, from: number, to: number): any[];

package/lib/es/utils/arrayMove.js

@@ -0,0 +1,9 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+export default function arrayMove(array, from, to) {
+  const newArray = _sliceInstanceProperty(array).call(array);
+
+  _spliceInstanceProperty(newArray).call(newArray, to < 0 ? newArray.length + to : to, 0, _spliceInstanceProperty(newArray).call(newArray, from, 1)[0]);
+
+  return newArray;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.16.1",
+    "version": "2.17.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3de98e4072b5614d5e41e2ad65f687507563dc7c",
+    "gitHead": "471474bb6fe0a743bc3daba532279969cc9374a5",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/select/foundation.ts

@@ -7,6 +7,7 @@ import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import { BasicOptionProps } from './optionFoundation';
 import isEnterPress from '../utils/isEnterPress';
+import { handlePrevent } from '../utils/a11y';
 
 export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getTriggerWidth(): number;
@@ -45,6 +46,11 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyMouseEnter(event: any): void;
     updateHovering(isHover: boolean): void;
     updateScrollTop(index?: number): void;
+    getContainer(): any;
+    getFocusableElements(node: any): any[];
+    getActiveElement(): any;
+    setIsFocusInContainer(isFocusInContainer: boolean): void;
+    getIsFocusInContainer(): boolean;
 }
 
 type LabelValue = string | number;
@@ -77,11 +83,18 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     focus() {
-        this._focusTrigger();
         const isFilterable = this._isFilterable();
+        const isMultiple = this._isMultiple();
         this._adapter.updateFocusState(true);
-        if (isFilterable) {
+        this._adapter.setIsFocusInContainer(false);
+        if (isFilterable && isMultiple) {
+            // when filter and multiple, only focus input
+            this.focusInput();
+        } else if (isFilterable && !isMultiple){
+            // when filter and not multiple, only show input and focus input
             this.toggle2SearchInput(true);
+        } else {
+            this._focusTrigger();
         }
     }
 
@@ -92,7 +105,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     destroy() {
         this._adapter.unregisterClickOutsideHandler();
-        this.unBindKeyBoardEvent();
+        // this.unBindKeyBoardEvent();
     }
 
     _setDropdownWidth() {
@@ -337,6 +350,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
         this._adapter.registerClickOutsideHandler((e: MouseEvent) => {
             this.close(e);
+            this._notifyBlur(e);
+            this._adapter.updateFocusState(false);
         });
     }
 
@@ -344,24 +359,27 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         if (isShow) {
             this._adapter.toggleInputShow(isShow, () => this.focusInput());
         } else {
+            // only when choose the option and close the panel, the input can be hide
             this._adapter.toggleInputShow(isShow, () => undefined);
         }
     }
 
     close(e?: any) {
+        // to support A11y, closing the panel trigger does not necessarily lose focus
         const isFilterable = this._isFilterable();
         if (isFilterable) {
-            this.unBindKeyBoardEvent();
+            // this.unBindKeyBoardEvent();
             this.clearInput();
             this.toggle2SearchInput(false);
         }
 
         this._adapter.closeMenu();
         this._adapter.notifyDropdownVisibleChange(false);
-        this.unBindKeyBoardEvent();
-        this._notifyBlur(e);
+        this._adapter.setIsFocusInContainer(false);
+        // this.unBindKeyBoardEvent();
+        // this._notifyBlur(e);
         this._adapter.unregisterClickOutsideHandler();
-        this._adapter.updateFocusState(false);
+        // this._adapter.updateFocusState(false);
     }
 
     onSelect(option: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent) {
@@ -378,6 +396,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         const isMultiple = this._isMultiple();
         if (!isMultiple) {
             this._handleSingleSelect(option, event);
+            this._focusTrigger();
         } else {
             this._handleMultipleSelect(option, event);
         }
@@ -519,6 +538,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     focusInput() {
         this._adapter.focusInput();
         this._adapter.updateFocusState(true);
+        this._adapter.setIsFocusInContainer(false);
     }
 
     handleInputChange(sugInput: string) {
@@ -636,9 +656,10 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     _handleKeyDown(event: KeyboardEvent) {
         const key = event.keyCode;
+        const { loading, filter, multiple, disabled } = this.getProps();
         const { isOpen } = this.getStates();
-        const { loading } = this.getProps();
-        if (!isOpen || loading) {
+
+        if (loading || disabled) {
             return;
         }
         switch (key) {
@@ -660,13 +681,30 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             case KeyCode.ENTER:
                 // internal-issues:302
                 // prevent trigger form’s submit when use in form
-                event.preventDefault();
-                event.stopPropagation();
+                handlePrevent(event);
                 this._handleEnterKeyDown(event);
                 break;
             case KeyCode.ESC:
+                isOpen && this.close(event);
+                filter && !multiple && this._focusTrigger();
+                break;
+            case KeyCode.TAB:
+                // check if slot have focusable element
+                this._handleTabKeyDown(event);
+                break;
+            default:
+                break;
+        }
+    }
+
+    handleContainerKeyDown(event: any) {
+        // when focus in contanier, handle the key down
+        const key = event.keyCode;
+        const { isOpen } = this.getStates();
+
+        switch (key) {
             case KeyCode.TAB:
-                this.close(event);
+                isOpen && this._handleTabKeyDown(event);
                 break;
             default:
                 break;
@@ -717,26 +755,91 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     _handleArrowKeyDown(offset: number) {
-        this._getEnableFocusIndex(offset);
+        const { isOpen } = this.getStates();
+        isOpen ? this._getEnableFocusIndex(offset) : this.open();
+    }
+
+    _handleTabKeyDown(event: any){
+        const { isOpen } = this.getStates();
+        this._adapter.updateFocusState(false);
+
+        if (isOpen){
+            const container = this._adapter.getContainer();
+            const focusableElements = this._adapter.getFocusableElements(container);
+            const focusableNum = focusableElements.length;
+
+            if (focusableNum > 0){
+                // Shift + Tab will move focus backward
+                if (event.shiftKey) {
+                    this._handlePanelOpenShiftTabKeyDown(focusableElements, event);
+                } else {
+                    this._handlePanelOpenTabKeyDown(focusableElements, event);  
+                }
+            } else {
+                // there are no focusable elements inside the container, tab to next element and trigger blur
+                this.close();
+                this._notifyBlur(event);
+            }
+        } else {
+            // tab or shift tab to next element and trigger blur
+            this._notifyBlur(event);
+        }
+    }
+
+    _handlePanelOpenTabKeyDown(focusableElements: any[], event: any) {
+        const activeElement = this._adapter.getActiveElement();
+        const isFocusInContainer = this._adapter.getIsFocusInContainer();
+        if (!isFocusInContainer){
+            // focus in trigger, set next focus to the first element in container
+            focusableElements[0].focus();
+            this._adapter.setIsFocusInContainer(true);
+            handlePrevent(event);
+        } else if (activeElement === focusableElements[focusableElements.length - 1]) {
+            // focus in the last element in container, focus back to trigger and close panel
+            this._focusTrigger(); 
+            this.close();
+            handlePrevent(event);
+        }
+    }
+
+    _handlePanelOpenShiftTabKeyDown(focusableElements: any[], event: any) {
+        const activeElement = this._adapter.getActiveElement();
+        const isFocusInContainer = this._adapter.getIsFocusInContainer();
+
+        if (!isFocusInContainer) {
+            // focus in trigger, close the panel, shift tab to previe element and trigger blur
+            this.close();
+            this._notifyBlur(event);
+        } else if (activeElement === focusableElements[0]) {
+            // focus in the first element in container, focus back to trigger
+            this._focusTrigger(); 
+            this._adapter.setIsFocusInContainer(false);
+            handlePrevent(event);
+        }
     }
 
     _handleEnterKeyDown(event: KeyboardEvent) {
         const { isOpen, options, focusIndex } = this.getStates();
-        if (focusIndex !== -1) {
-            const visibleOptions = options.filter((item: BasicOptionProps) => item._show);
-            const { length } = visibleOptions;
-            // fix issue 1201
-            if (length <= focusIndex) {
-                return;
-            }
-            if (visibleOptions && length) {
-                const selectedOption = visibleOptions[focusIndex];
-                if (selectedOption.disabled) {
+        if (!isOpen){
+            this.open();
+        } else {
+            if (focusIndex !== -1) {
+                const visibleOptions = options.filter((item: BasicOptionProps) => item._show);
+                const { length } = visibleOptions;
+                // fix issue 1201
+                if (length <= focusIndex) {
                     return;
                 }
-                this.onSelect(selectedOption, focusIndex, event);
+                if (visibleOptions && length) {
+                    const selectedOption = visibleOptions[focusIndex];
+                    if (selectedOption.disabled) {
+                        return;
+                    }
+                    this.onSelect(selectedOption, focusIndex, event);
+                }
+            } else {
+                this.close();
             }
-        } else if (isOpen) {
         }
     }
 
@@ -856,15 +959,16 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     // Scenes that may trigger blur：
-    //  1、clickOutSide
-    //  2、click option / press enter, and then select complete（when multiple is false
-    //  3、press esc when dropdown list open
+    // 1、clickOutSide
+    // 2、 tab to next element/ shift tab to previous element
+    // 3、[remove when add a11y] click option / press enter, and then select complete（when multiple is false 
+    // 4、[remove when add a11y] press esc when dropdown list open 
     _notifyBlur(e: FocusEvent) {
         this._adapter.notifyBlur(e);
     }
 
     // Scenes that may trigger focus:
-    //  1、click selection
+    // 1、click selection
     _notifyFocus(e: FocusEvent) {
         this._adapter.notifyFocus(e);
     }
@@ -910,23 +1014,32 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this._adapter.notifyListScroll(e);
     }
 
-    // handleTriggerFocus(e) {
-    //     console.log('handleTriggerFocus');
-    //     this._adapter.updateFocusState(true);
-    // }
+    handleTriggerFocus(e) {
+        this.bindKeyBoardEvent();
+        this._adapter.updateFocusState(true);
+        this._adapter.setIsFocusInContainer(false);
+    }
 
     handleTriggerBlur(e: FocusEvent) {
         this._adapter.updateFocusState(false);
         const { filter, autoFocus } = this.getProps();
         const { isOpen, isFocus } = this.getStates();
-        // Under normal circumstances, blur will be accompanied by dropdown close, so the notify of blur can be called uniformly in close
-        // But when autoFocus, because dropdown is not expanded, you need to listen for the trigger's blur and trigger the notify callback
+        // Under normal circumstances, blur will be accompanied by clickOutsideHandler, so the notify of blur can be called uniformly in clickOutsideHandler
+        // But when autoFocus, because clickOutsideHandler is not register, you need to listen for the trigger's blur and trigger the notify callback
         if (autoFocus && isFocus && !isOpen) {
-            // blur when autoFocus & not open dropdown yet
             this._notifyBlur(e);
         }
     }
 
+    handleInputBlur(e: any) {
+        const { filter, autoFocus } = this.getProps();
+        const isMultiple = this._isMultiple();
+        if (autoFocus && filter && !isMultiple ) {
+            // under this condition, when input blur, hide the input
+            this.toggle2SearchInput(false);
+        }
+    }
+
     selectAll() {
         const { options } = this.getStates();
         const { onChangeWithObject } = this.getProps();

package/select/select.scss

@@ -27,11 +27,6 @@ $multiple: #{$module}-multiple;
         border: $width-select-border-hover solid $color-select-border-hover;
     }
 
-    &:active {
-        background-color: $color-select-bg-active;
-        border: $width-select-border-active solid $color-select-border-active;
-    }
-
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
@@ -59,6 +54,12 @@ $multiple: #{$module}-multiple;
             background-color: $color-select-bg-default;
             border: $border-thickness-control-focus solid $color-select_default-border-focus;
         }
+
+        // when click the trigger, trigger get the focus state, active style should take effect
+        &:active {
+            background-color: $color-select-bg-active;
+            border: $width-select-border-active solid $color-select-border-active;
+        }
     }
 
     &-warning {
@@ -111,7 +112,9 @@ $multiple: #{$module}-multiple;
         }
 
         &:focus {
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            // when select is disabled, the border should not have active color
+            border: $border-thickness-control-focus solid transparent;
         }
 
         .#{$module}-selection,

package/tagInput/foundation.ts

@@ -8,18 +8,28 @@ import {
 } from 'lodash';
 import getSplitedArray from './utils/getSplitedArray';
 import isEnterPress from '../utils/isEnterPress';
+import arrayMove from '../utils/arrayMove';
 
 export type TagInputChangeEvent = any;
 export type TagInputCursorEvent = any;
 export type TagInputKeyboardEvent = any;
 export type TagInputMouseEvent = any;
 
+export interface OnSortEndProps {
+    oldIndex: number;
+    newIndex: number;
+}
+
 export interface TagInputAdapter extends DefaultAdapter {
     setInputValue: (inputValue: string) => void;
     setTagsArray: (tagsArray: string[]) => void;
     setFocusing: (focusing: boolean) => void;
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
+    setActive: (active: boolean) => void;
+    getClickOutsideHandler: () => any;
+    registerClickOutsideHandler: (cb: any) => void;
+    unregisterClickOutsideHandler: () => void;
     notifyBlur: (e: TagInputCursorEvent) => void;
     notifyFocus: (e: TagInputCursorEvent) => void;
     notifyInputChange: (v: string, e: TagInputChangeEvent) => void;
@@ -167,6 +177,8 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         if (inputValue.length > 0) {
             this._onInputChange('', e);
         }
+        // Prevent event propagate to TagInput outermost div
+        e.stopPropagation();
     }
 
     handleTagClose(index: number) {
@@ -185,6 +197,23 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         this._adapter.setHovering(false);
     }
 
+    handleClick(e?: any) {
+        const { disabled } = this.getProps();
+        if (disabled) {
+            return;
+        }
+        const clickOutsideHandler = this._adapter.getClickOutsideHandler();
+        if (!clickOutsideHandler) {
+            this._adapter.setActive(true);
+            this._adapter.registerClickOutsideHandler(e => this.clickOutsideCallBack());
+        } 
+    }
+
+    clickOutsideCallBack() {
+        this._adapter.unregisterClickOutsideHandler();
+        this._adapter.setActive(false);
+    }
+
     handleClickPrefixOrSuffix(e: any) {
         const { disabled } = this._adapter.getProps();
         const { isFocus } = this._adapter.getStates();
@@ -227,6 +256,16 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         this._adapter.setInputValue(value);
         this._adapter.notifyInputChange(value, e);
     }
+
+    handleSortEnd(callbackProps: OnSortEndProps) {
+        const { oldIndex, newIndex } = callbackProps;
+        const { tagsArray } = this.getStates();
+        const newTagsArray = arrayMove(tagsArray, oldIndex, newIndex);
+        if (!this._isControlledComponent()) {
+            this._adapter.setTagsArray(newTagsArray);
+        } 
+        this._adapter.notifyTagChange(newTagsArray);
+    }
 }
 
 export default TagInputFoundation;

package/tagInput/tagInput.scss

@@ -11,6 +11,19 @@ $module: #{$prefix}-tagInput;
     width: 100%;
     box-sizing: border-box;
     
+    &-drag {
+
+        &-item {
+            display: flex;
+            align-items: center;
+        }
+
+        &-handler {
+            margin-right: $spacing-tagInput_drag_handler-marginRight;
+            cursor: move;
+        }
+    }
+
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
         border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
@@ -104,6 +117,10 @@ $module: #{$prefix}-tagInput;
                     margin-bottom: $spacing-tagInput_large-Y;
                 }
             }
+            
+            &-icon {
+                padding-left: $spacing-tagInput_tag_icon_paddingLeft;
+            }
         }
 
         &-typo {

package/tagInput/variables.scss

@@ -32,6 +32,8 @@ $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
 $spacing-tagInput_default-Y: $spacing-super-tight; // 默认尺寸标签输入框标签顶部外边距
 $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
+$spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
+$spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度

package/tooltip/foundation.ts

@@ -206,10 +206,12 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 };
                 // bind focus to hover trigger for a11y
                 triggerEventSet[eventNames.focus] = () => {
-                    this.delayShow();
+                    const { disableFocusListener } = this.getProps();
+                    !disableFocusListener && this.delayShow();
                 };
                 triggerEventSet[eventNames.blur] = () => {
-                    this.delayHide();
+                    const { disableFocusListener } = this.getProps();
+                    !disableFocusListener && this.delayHide();
                 };
 
                 portalEventSet = { ...triggerEventSet };
@@ -856,7 +858,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _handleTriggerKeydown(event: any) {
-        const { closeOnEsc } = this.getProps();
+        const { closeOnEsc, disableArrowKeyDown } = this.getProps();
         const container = this._adapter.getContainer();
         const focusableElements = this._adapter.getFocusableElements(container);
         const focusableNum = focusableElements.length;
@@ -867,10 +869,11 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 closeOnEsc && this._handleEscKeyDown(event);
                 break;
             case "ArrowUp":
-                focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
+                // when disableArrowKeyDown is true, disable tooltip's arrow keyboard event action
+                !disableArrowKeyDown && focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
                 break;
             case "ArrowDown":
-                focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
+                !disableArrowKeyDown && focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
                 break;
             default:
                 break;

package/transfer/foundation.ts

@@ -3,6 +3,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BasicValue as BasicTreeValue } from '../tree/foundation';
 import { strings } from './constants';
 import { _generateGroupedData, _generateTreeData } from './transferUtils';
+import arrayMove from '../utils/arrayMove';
 
 export interface BasicDataItem {
     [x: string]: any;
@@ -217,7 +218,7 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
         const { oldIndex, newIndex } = callbackProps;
         const selectedItems = this._adapter.getSelected();
         let selectedArr = [...selectedItems.values()];
-        selectedArr = this._arrayMove(selectedArr, oldIndex, newIndex);
+        selectedArr = arrayMove(selectedArr, oldIndex, newIndex);
         let newSelectedItems = new Map();
         selectedArr.forEach(option => {
             newSelectedItems = newSelectedItems.set(option.key, option);
@@ -226,9 +227,4 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
         this._notifyChange(newSelectedItems);
     }
 
-    _arrayMove(array: Array<BasicDataItem>, from: number, to: number) {
-        const newArray = array.slice();
-        newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
-        return newArray;
-    }
 }

package/utils/arrayMove.ts

@@ -0,0 +1,5 @@
+export default function arrayMove(array: Array<any>, from: number, to: number) {
+    const newArray = array.slice();
+    newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+    return newArray;
+}