sample-ui-component-library 0.0.5-dev → 0.0.6-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.5-dev",
+  "version": "0.0.6-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/EditorTabs/EditorTabs.jsx

@@ -17,9 +17,15 @@ import {
  */
 function Tab({id, label, onSelectTab}) {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
+
+    const style = {
+        transform: transform
+        ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+        : undefined
+    };
     
     return (
-        <div ref={setNodeRef} id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
+        <div ref={setNodeRef} style={style}  id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
             {label}
         </div>
     );

package/src/components/FileBrowser/FileBrowser.jsx

@@ -35,6 +35,7 @@ function useEvent(fn) {
  */
 const TreeNode = ({id, node, onRowClick}) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
+
     /**
      * Gets the appropriate icon for the node based on its type and collapsed state.
      * @returns <JSX>
@@ -51,9 +52,15 @@ const TreeNode = ({id, node, onRowClick}) => {
      * Sets the background color of the row if the node is selected.
      */
     const getRowStyle = () => {
+        const style = {
+            transform: transform
+            ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+            : undefined
+        };        
         if (node.selected) {
-            return {"backgroundColor": SELECTED_FILE_COLOR};
+            style["backgroundColor"] = SELECTED_FILE_COLOR;
         }
+        return style;
     }