@arbisoft/react-design-tool 1.0.13 → 1.0.15

package/README.md

@@ -36,11 +36,11 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.13
+npm install @arbisoft/react-design-tool@1.0.15
 ```
 OR
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.13
+yarn add @arbisoft/react-design-tool@1.0.15
 
 ```
 ## 🚀 Quick Start

package/dist/cjs/index.js

@@ -568,7 +568,7 @@ var palette = {
   gray_F5F6F6: '#F5F6F6',
   gray_A1A1A1: '#A1A1A1',
   gray_F0F2F7: '#F0F2F7',
-  gray_333: '#333',
+  gray_333: '#333333',
   gray_EFEFEF: '#EFEFEF',
   gray_9DA1A7: '#9DA1A7',
   green_80D965: '#80D965',
@@ -642,9 +642,10 @@ var SideBarPill = function SideBarPill(_ref) {
     _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     icon = _ref.icon,
     text = _ref.text,
-    pillActiveColor = _ref.pillActiveColor;
+    pillActiveColor = _ref.pillActiveColor,
+    id = _ref.id;
   return /*#__PURE__*/React.createElement(SideBarItem, {
-    key: Date.now(),
+    key: id,
     isSelected: isSelected,
     onClick: function onClick() {
       return _onClick();
@@ -816,7 +817,7 @@ var textList = [{
   text: '+ Heading 1',
   fontFamily: 'Open Sans',
   fontSize: 18,
-  color: '#333',
+  color: '#333333',
   fontWeight: theme.fontWeights[700],
   textDecoration: 'normal',
   fontStyle: 'normal',
@@ -826,7 +827,7 @@ var textList = [{
   text: '+ Heading 2',
   fontFamily: 'Open Sans',
   fontSize: 16,
-  color: '#333',
+  color: '#333333',
   fontWeight: theme.fontWeights[700],
   textDecoration: 'normal',
   fontStyle: 'normal',
@@ -836,7 +837,7 @@ var textList = [{
 //     text: 'What problem are you facing in this meeting room?',
 //     fontFamily: 'Open Sans Condensed',
 //     fontSize: 18,
-//     color: '#333',
+//     color: '#333333',
 //     fontWeight: theme.fontWeights[700],
 //     textDecoration: 'normal',
 //     fontStyle: 'normal',
@@ -846,7 +847,7 @@ var textList = [{
   text: 'Scan this QR code from your mobile to report the issue',
   fontFamily: 'Open Sans',
   fontSize: 16,
-  color: '#333',
+  color: '#333333',
   fontWeight: theme.fontWeights[400],
   textDecoration: 'normal',
   fontStyle: 'normal',
@@ -865,7 +866,7 @@ var textList = [{
   text: 'www.domain.com',
   fontFamily: 'Plus Jakarta Sans',
   fontSize: 10,
-  color: '#333',
+  color: '#333333',
   fontWeight: theme.fontWeights[400],
   textDecoration: 'normal',
   fontStyle: 'normal',
@@ -1879,7 +1880,7 @@ var SideBar = function SideBar(_ref) {
         return null;
       }
       return /*#__PURE__*/React.createElement(SideBarPill, {
-        key: Date.now(),
+        key: item === null || item === void 0 ? void 0 : item.id,
         id: item === null || item === void 0 ? void 0 : item.id,
         isSelected: selectedSideBarItem === (item === null || item === void 0 ? void 0 : item.id),
         onClick: function onClick() {
@@ -2222,7 +2223,7 @@ var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _tagg
 var DropDownList = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 50;\n    background-color: white;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    margin-top: 5px;\n    z-index: 10;\n    width: 100%;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 9999;\n"])));
 
 // Individual option in the dropdown
-var DropDownOption = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
+var DropDownOption = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
 
 var DropDown = function DropDown(_ref) {
   var left = _ref.left,
@@ -4093,8 +4094,7 @@ var propTypes$c = {
   onTransform: PropTypes.func,
   onChangeTextContent: PropTypes.func,
   onChangeTextProperty: PropTypes.func,
-  onDragMove: PropTypes.func,
-  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  onDragMove: PropTypes.func
 };
 
 var TextEditor = function TextEditor(_ref) {
@@ -4169,7 +4169,7 @@ var EditableText = function EditableText(_ref) {
     onClick = _ref.onClick,
     _onDragEnd = _ref.onDragEnd,
     onTransformEnd = _ref.onTransformEnd,
-    key = _ref.key,
+    id = _ref.id,
     onTransform = _ref.onTransform,
     onChangeTextContent = _ref.onChangeTextContent,
     onChangeTextProperty = _ref.onChangeTextProperty,
@@ -4243,7 +4243,7 @@ var EditableText = function EditableText(_ref) {
   if (!isFontLoaded) {
     return /*#__PURE__*/React.createElement(reactKonva.Text, _extends({
       ref: textRef,
-      key: key
+      key: id
     }, element, {
       id: element.id,
       fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
@@ -4257,7 +4257,7 @@ var EditableText = function EditableText(_ref) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reactKonva.Text, _extends({
     ref: textRef,
-    key: key
+    key: id
   }, element, {
     id: element.id,
     fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
@@ -4924,6 +4924,7 @@ var Editor = function Editor(_ref) {
       case elementTypes.text:
         return /*#__PURE__*/React.createElement(EditableText, {
           key: el.id,
+          id: el.id,
           element: el,
           onClick: function onClick() {
             return handleSelect(el);