@carbon/utilities 0.8.0 → 0.10.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/carousel/swipeEvents.js +1 -1
- package/es/makeDraggable/index.js +1 -0
- package/es/makeDraggable/makeDraggable.js +1 -0
- package/es/makeDraggable/makeDraggable.test.js +1 -0
- package/lib/carousel/swipeEvents.js +1 -1
- package/lib/makeDraggable/index.js +1 -0
- package/lib/makeDraggable/makeDraggable.js +1 -0
- package/lib/makeDraggable/makeDraggable.test.js +1 -0
- package/package.json +3 -3
- package/types/makeDraggable/index.d.ts +7 -0
- package/types/makeDraggable/makeDraggable.d.ts +38 -0
- package/types/makeDraggable/makeDraggable.test.d.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
const b=(t,d,
|
|
1
|
+
const b=(t,u,d,w)=>{let n=null,l=null,v=0;const M=400;let o=!1,s=null,i=null;const r=e=>{n=e.touches[0].clientX},a=e=>{l=e.touches[0].clientX},m=()=>{if(n!==null&&l!==null){const e=n-l;Math.abs(e)>50&&(e>0?u():d())}n=null,l=null},c=e=>{o=!0,s=e.clientX},h=e=>{o&&(i=e.clientX)},E=()=>{if(o&&s!==null&&i!==null){const e=s-i;Math.abs(e)>50&&(e>0?u():d())}o=!1,s=null,i=null},L=e=>{const f=Date.now();if(Math.abs(e.deltaX)>Math.abs(e.deltaY)&&Math.abs(e.deltaX)>20){if(e.preventDefault(),f-v<M)return;e.deltaX>0?u():d(),v=f}};w&&(t.removeEventListener("touchstart",r),t.removeEventListener("touchmove",a),t.removeEventListener("touchend",m),t.removeEventListener("mousedown",c),t.removeEventListener("mousemove",h),t.removeEventListener("mouseup",E),t.removeEventListener("wheel",L)),t.addEventListener("touchstart",r),t.addEventListener("touchmove",a),t.addEventListener("touchend",m),t.addEventListener("mousedown",c),t.addEventListener("mousemove",h),t.addEventListener("mouseup",E),t.addEventListener("wheel",L)};export{b as registerSwipeEvents};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from"./makeDraggable";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const b=({el:e,dragHandle:n,focusableDragHandle:i,dragStep:l,shiftDragStep:p})=>{n?(n.style.cursor="move",e.style.cursor="default"):e.style.cursor="move";let s=!1,f=0,c=0;const r=(t,o)=>{const d={detail:o,bubbles:!0};e.dispatchEvent(new CustomEvent(t,d))},m=t=>{if(t.key==="Enter"&&(s=!s),s?r("dragstart",{keyboard:!0}):r("dragend",{keyboard:!0}),!s)return;const o=t.shiftKey?p??32:l??8;switch(t.key){case"Enter":case" ":t.preventDefault();break;case"ArrowLeft":e.style.left=`${e.offsetLeft-o}px`;break;case"ArrowRight":e.style.left=`${e.offsetLeft+o}px`;break;case"ArrowUp":e.style.top=`${e.offsetTop-o}px`;break;case"ArrowDown":e.style.top=`${e.offsetTop+o}px`;break}},a=t=>{const o=t.target;!(o instanceof Node)||!(n?n.contains(o):e.contains(o))||(f=t.clientX-e.offsetLeft,c=t.clientY-e.offsetTop,s=!0,r("dragstart",{mouse:!0}),document.addEventListener("mousemove",u),document.addEventListener("mouseup",v,{once:!0}))},u=t=>{s&&(e.style.left=`${t.clientX-f}px`,e.style.top=`${t.clientY-c}px`)},v=()=>{s&&(s=!1,r("dragend",{mouse:!0}),document.removeEventListener("mousemove",u))};return n?n.addEventListener("mousedown",a):e.addEventListener("mousedown",a),i?.addEventListener("keydown",m),{cleanup:()=>{n?n.removeEventListener("mousedown",a):e.removeEventListener("mousedown",a),i?.removeEventListener("keydown",m),document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",v)}}};export{b as makeDraggable};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{makeDraggable as s}from"../makeDraggable";import{fireEvent as n}from"@testing-library/react";function o(e={}){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px";const l=document.createElement("div"),p=document.createElement("button");return t.appendChild(l),t.appendChild(p),document.body.appendChild(t),s({el:t,dragHandle:l,focusableDragHandle:p,dragStep:e.dragStep,shiftDragStep:e.shiftDragStep}),{el:t,handle:l,focusableHandle:p}}describe("makeDraggable",()=>{it("should set cursor style on handle",()=>{const{el:e,handle:t}=o();expect(t.style.cursor).toBe("move"),expect(e.style.cursor).toBe("default")}),it("should keep position as absolute when already absolute",()=>{const{el:e}=o();expect(e.style.position).toBe("absolute")}),it("should move element with arrowRight with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowUp with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("-8px")}),it("should move element with arrowLeft with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("-8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowDown with default shiftDragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.left).toBe("32px"),expect(e.style.top).toBe("0px")}),it("should move element with arrow keys(dragStep)",()=>{const{el:e,focusableHandle:t}=o({dragStep:10});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("10px"),expect(e.style.top).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown"})),expect(e.style.top).toBe("10px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with shift + arrow keys (shiftDragStep)",()=>{const{el:e,focusableHandle:t}=o({shiftDragStep:20});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown",shiftKey:!0})),expect(e.style.top).toBe("20px"),expect(e.style.left).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("20px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with mouse drag",()=>{const{el:e,handle:t}=o();n.mouseDown(t,{clientX:50,clientY:50}),n.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px"),n.mouseUp(t),n.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px")})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var D=(e,n)=>{for(var l in n)a(e,l,{get:n[l],enumerable:!0})},T=(e,n,l,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of S(n))!p.call(e,o)&&o!==l&&a(e,o,{get:()=>n[o],enumerable:!(s=H(n,o))||s.enumerable});return e};var g=e=>T(a({},"__esModule",{value:!0}),e);var U={};D(U,{registerSwipeEvents:()=>C});module.exports=g(U);const C=(e,n,l,s)=>{let i=null,u=null,m=0;const b=400;let d=!1,v=null,r=null;const c=t=>{i=t.touches[0].clientX},h=t=>{u=t.touches[0].clientX},E=()=>{if(i!==null&&u!==null){const t=i-u;Math.abs(t)>50&&(t>0?n():l())}i=null,u=null},L=t=>{d=!0,v=t.clientX},f=t=>{d&&(r=t.clientX)},w=()=>{if(d&&v!==null&&r!==null){const t=v-r;Math.abs(t)>50&&(t>0?n():l())}d=!1,v=null,r=null},M=t=>{const X=Date.now();if(Math.abs(t.deltaX)>Math.abs(t.deltaY)&&Math.abs(t.deltaX)>20){if(t.preventDefault(),X-m<b)return;t.deltaX>0?n():l(),m=X}};s&&(e.removeEventListener("touchstart",c),e.removeEventListener("touchmove",h),e.removeEventListener("touchend",E),e.removeEventListener("mousedown",L),e.removeEventListener("mousemove",f),e.removeEventListener("mouseup",w),e.removeEventListener("wheel",M)),e.addEventListener("touchstart",c),e.addEventListener("touchmove",h),e.addEventListener("touchend",E),e.addEventListener("mousedown",L),e.addEventListener("mousemove",f),e.addEventListener("mouseup",w),e.addEventListener("wheel",M)};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("./makeDraggable"),module.exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var r in t)m(e,r,{get:t[r],enumerable:!0})},k=(e,t,r,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of y(t))!g.call(e,a)&&a!==r&&m(e,a,{get:()=>t[a],enumerable:!(u=b(t,a))||u.enumerable});return e};var w=e=>k(m({},"__esModule",{value:!0}),e);var T={};L(T,{makeDraggable:()=>D});module.exports=w(T);const D=({el:e,dragHandle:t,focusableDragHandle:r,dragStep:u,shiftDragStep:a})=>{t?(t.style.cursor="move",e.style.cursor="default"):e.style.cursor="move";let s=!1,v=0,d=0;const i=(o,n)=>{const E={detail:n,bubbles:!0};e.dispatchEvent(new CustomEvent(o,E))},l=o=>{if(o.key==="Enter"&&(s=!s),s?i("dragstart",{keyboard:!0}):i("dragend",{keyboard:!0}),!s)return;const n=o.shiftKey?a??32:u??8;switch(o.key){case"Enter":case" ":o.preventDefault();break;case"ArrowLeft":e.style.left=`${e.offsetLeft-n}px`;break;case"ArrowRight":e.style.left=`${e.offsetLeft+n}px`;break;case"ArrowUp":e.style.top=`${e.offsetTop-n}px`;break;case"ArrowDown":e.style.top=`${e.offsetTop+n}px`;break}},f=o=>{const n=o.target;!(n instanceof Node)||!(t?t.contains(n):e.contains(n))||(v=o.clientX-e.offsetLeft,d=o.clientY-e.offsetTop,s=!0,i("dragstart",{mouse:!0}),document.addEventListener("mousemove",c),document.addEventListener("mouseup",p,{once:!0}))},c=o=>{s&&(e.style.left=`${o.clientX-v}px`,e.style.top=`${o.clientY-d}px`)},p=()=>{s&&(s=!1,i("dragend",{mouse:!0}),document.removeEventListener("mousemove",c))};return t?t.addEventListener("mousedown",f):e.addEventListener("mousedown",f),r?.addEventListener("keydown",l),{cleanup:()=>{t?t.removeEventListener("mousedown",f):e.removeEventListener("mousedown",f),r?.removeEventListener("keydown",l),document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",p)}}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var s=require("../makeDraggable"),n=require("@testing-library/react");function o(e={}){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px";const l=document.createElement("div"),p=document.createElement("button");return t.appendChild(l),t.appendChild(p),document.body.appendChild(t),(0,s.makeDraggable)({el:t,dragHandle:l,focusableDragHandle:p,dragStep:e.dragStep,shiftDragStep:e.shiftDragStep}),{el:t,handle:l,focusableHandle:p}}describe("makeDraggable",()=>{it("should set cursor style on handle",()=>{const{el:e,handle:t}=o();expect(t.style.cursor).toBe("move"),expect(e.style.cursor).toBe("default")}),it("should keep position as absolute when already absolute",()=>{const{el:e}=o();expect(e.style.position).toBe("absolute")}),it("should move element with arrowRight with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowUp with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("-8px")}),it("should move element with arrowLeft with default dragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("-8px"),expect(e.style.top).toBe("0px")}),it("should move element with arrowDown with default shiftDragStep value",()=>{const{el:e,focusableHandle:t}=o();t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.left).toBe("32px"),expect(e.style.top).toBe("0px")}),it("should move element with arrow keys(dragStep)",()=>{const{el:e,focusableHandle:t}=o({dragStep:10});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight"})),expect(e.style.left).toBe("10px"),expect(e.style.top).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowLeft"})),expect(e.style.left).toBe("0px"),expect(e.style.top).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown"})),expect(e.style.top).toBe("10px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp"})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with shift + arrow keys (shiftDragStep)",()=>{const{el:e,focusableHandle:t}=o({shiftDragStep:20});t.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown",shiftKey:!0})),expect(e.style.top).toBe("20px"),expect(e.style.left).toBe("0px"),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowUp",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("20px")},0),setTimeout(()=>{t.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowRight",shiftKey:!0})),expect(e.style.top).toBe("0px"),expect(e.style.left).toBe("0px")},0)}),it("should move element with mouse drag",()=>{const{el:e,handle:t}=o();n.fireEvent.mouseDown(t,{clientX:50,clientY:50}),n.fireEvent.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px"),n.fireEvent.mouseUp(t),n.fireEvent.mouseMove(document,{clientX:100,clientY:120}),expect(e.style.left).toBe("50px"),expect(e.style.top).toBe("70px")})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/utilities",
|
|
3
3
|
"description": "Utilities and helpers to drive consistency across software products using the Carbon Design System",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.10.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"esbuild": "^0.25.0",
|
|
42
42
|
"rimraf": "^6.0.1",
|
|
43
43
|
"typescript": "^5.7.3",
|
|
44
|
-
"typescript-config-carbon": "^0.
|
|
44
|
+
"typescript-config-carbon": "^0.7.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@ibm/telemetry-js": "^1.6.1",
|
|
48
48
|
"@internationalized/number": "^3.6.1"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "d70cdbd45cfce813ce7ec6b396fcfa95ad2a81b6"
|
|
51
51
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
interface DraggableProps {
|
|
8
|
+
/**
|
|
9
|
+
* HTML element to move.
|
|
10
|
+
*/
|
|
11
|
+
el: HTMLElement;
|
|
12
|
+
/**
|
|
13
|
+
* HTML element to initiate the drag (e.g., header).
|
|
14
|
+
*/
|
|
15
|
+
dragHandle?: HTMLElement;
|
|
16
|
+
/**
|
|
17
|
+
* HTML element to focus on drag for keyboard interaction (e.g., Drag Icon).
|
|
18
|
+
*/
|
|
19
|
+
focusableDragHandle?: HTMLElement;
|
|
20
|
+
/**
|
|
21
|
+
* Pixel value that defines the distance to move when dragging with arrow
|
|
22
|
+
* keys.
|
|
23
|
+
*/
|
|
24
|
+
dragStep?: number;
|
|
25
|
+
/**
|
|
26
|
+
* Pixel value that defines the distance to move when dragging with
|
|
27
|
+
* shift+arrow keys.
|
|
28
|
+
*/
|
|
29
|
+
shiftDragStep?: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Makes a given element draggable using a handle element.
|
|
33
|
+
*@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
|
|
34
|
+
*/
|
|
35
|
+
export declare const makeDraggable: ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps) => {
|
|
36
|
+
cleanup: () => void;
|
|
37
|
+
};
|
|
38
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|