@homecode/ui 4.22.5 → 4.22.7

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

@@ -30,10 +30,23 @@ class Draggable extends Component {
         if (prevProps.items.join(',') !== this.props.items.join(',')) {
             this.dropUnder();
         }
+        if (prevProps.disabled !== this.props.disabled) {
+            this.dropUnder();
+            if (this.props.disabled)
+                this.unsubscribeMoveUp();
+        }
     }
     componentWillUnmount() {
         this.timers.clear();
     }
+    subscribeMoveUp = () => {
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    unsubscribeMoveUp = () => {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
     onPointerDown = e => {
         const { clientX: x, clientY: y, currentTarget } = e;
         e.stopPropagation();
@@ -41,11 +54,10 @@ class Draggable extends Component {
         this.startPos = { x, y };
         this.draggingElem = currentTarget;
         this.draggingElemBounds = currentTarget.getBoundingClientRect();
-        document.addEventListener('pointermove', this.onPointerMove);
-        document.addEventListener('pointerup', this.onPointerUp);
+        this.subscribeMoveUp();
     };
     onPointerMove = e => {
-        if (!this.draggingElem)
+        if (!this.draggingElem || this.props.disabled)
             return;
         const { clientX: x, clientY: y } = e;
         if (!this.store.draggingId) {
@@ -94,8 +106,7 @@ class Draggable extends Component {
             e.stopPropagation();
             e.preventDefault();
         }
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
+        this.unsubscribeMoveUp();
         this.dragStartFired = false;
         this.startPos = null;
         this.store.draggingId = null;
@@ -127,9 +138,9 @@ class Draggable extends Component {
         this.store.underOffset = null;
     }
     render() {
-        const { items, className, itemClassName, renderItem, children } = this.props;
+        const { items, className, itemClassName, renderItem, children, disabled } = this.props;
         const { draggingId, underId, underOffset } = this.store;
-        return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, 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.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: disabled ? undefined : this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
     }
 }
 

package/dist/esm/src/components/Icon/icons/checkers.svg.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCheckers = function SvgCheckers(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 200 150"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    fillOpacity: 0.8,
+    d: "M0 0h200v150H0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h50v50H0zm100 0h50v50h-50zM50 50h50v50H50zm100 0h50v50h-50zM0 100h50v50H0zm100 0h50v50h-50z"
+  })));
+};
+
+export { SvgCheckers as default };

package/dist/esm/src/components/Icon/icons/{compas.svg.js → compass.svg.js}

@@ -2,14 +2,14 @@ import * as React from 'react';
 
 var _linearGradient, _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgCompas = function SvgCompas(props) {
+var SvgCompass = function SvgCompass(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     fill: "currentColor",
     viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "compas_svg__a"
+    id: "compass_svg__a"
   }, /*#__PURE__*/React.createElement("stop", {
     offset: 0,
     style: {
@@ -35,8 +35,8 @@ var SvgCompas = function SvgCompas(props) {
       stopOpacity: 1
     }
   })), _linearGradient || (_linearGradient = /*#__PURE__*/React.createElement("linearGradient", {
-    xlinkHref: "#compas_svg__a",
-    id: "compas_svg__b",
+    xlinkHref: "#compass_svg__a",
+    id: "compass_svg__b",
     x1: 16.621,
     x2: 40.144,
     y1: 9.343,
@@ -48,9 +48,9 @@ var SvgCompas = function SvgCompas(props) {
   })), /*#__PURE__*/React.createElement("path", {
     d: "M12.06.27c-.589 0-.96.601-1.7 1.8-1.872 3.052-4.625 7.886-4.626 9.96s2.744 6.917 4.611 9.97c.735 1.202 1.105 1.804 1.694 1.803.588 0 .958-.602 1.698-1.8 1.873-3.053 4.627-7.886 4.627-9.96.001-2.074-2.743-6.914-4.611-9.964C13.018.873 12.648.268 12.059.269",
     style: {
-      fill: "url(#compas_svg__b)"
+      fill: "url(#compass_svg__b)"
     }
   }));
 };
 
-export { SvgCompas as default };
+export { SvgCompass as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -8,8 +8,9 @@ var ICONS = {
     check: () => import('./check.svg.js'),
     close: () => import('./close.svg.js'),
     colors: () => import('./colors.svg.js'),
-    compas: () => import('./compas.svg.js'),
+    compass: () => import('./compass.svg.js'),
     copy: () => import('./copy.svg.js'),
+    checkers: () => import('./checkers.svg.js'),
     chevronUp: () => import('./chevronUp.svg.js'),
     chevronDown: () => import('./chevronDown.svg.js'),
     chevronRight: () => import('./chevronRight.svg.js'),

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

@@ -10,6 +10,8 @@ export declare class Draggable extends Component<T.Props> {
     constructor(props: any);
     componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
+    subscribeMoveUp: () => void;
+    unsubscribeMoveUp: () => void;
     onPointerDown: (e: any) => void;
     onPointerMove: (e: any) => void;
     checkUnderElem: any;

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

@@ -3,6 +3,7 @@ export type Props = {
     items: string[];
     className?: string;
     itemClassName?: string;
+    disabled?: boolean;
     renderItem: (id: string, index: number, isActive: boolean) => ReactNode;
     onDragStart?: (id: string) => void;
     onDragEnd?: (id: string) => void;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -8,8 +8,9 @@ declare const _default: {
     check: () => Promise<any>;
     close: () => Promise<any>;
     colors: () => Promise<any>;
-    compas: () => Promise<any>;
+    compass: () => Promise<any>;
     copy: () => Promise<any>;
+    checkers: () => Promise<any>;
     chevronUp: () => Promise<any>;
     chevronDown: () => Promise<any>;
     chevronRight: () => Promise<any>;

package/package.json

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