@zohodesk/dot 1.0.0-beta.227 → 1.0.0-beta.229

package/README.md

@@ -2,6 +2,14 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.229
+
+- TagsMultiSelect,TagsMultiSelectField => clickableTag prop added
+- GridStencils => margin, width removed in css
+
+# 1.0.0-beta.228
+
+- ResponsiveDropBox Implemented for all DropBox
 
 # 1.0.0-beta.227
 

package/es/ActionButton/ActionButton.js

@@ -4,7 +4,7 @@ import Popup from '@zohodesk/components/lib/Popup/Popup';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 import style from './ActionButton.module.css';
 export class ActionButton extends React.Component {
@@ -104,7 +104,7 @@ export class ActionButton extends React.Component {
       name: "ZD-down",
       size: "6",
       iconClass: style.arrow
-    })), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: "small",
       isActive: isPopupOpen,
       boxPosition: position,
@@ -115,7 +115,11 @@ export class ActionButton extends React.Component {
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
       getRef: getContainerRef
-    }, children) : null) : null));
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical"
+    }, children)) : null) : null));
   }
 
 }

package/es/Provider.js

@@ -4,6 +4,7 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
 import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
 import datetime from '@zohodesk/datetimejs';
+import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 import i18n from './i18n';
 /* component pkg - default mode & themes */
 
@@ -109,6 +110,7 @@ export default class Provider extends React.Component {
       themeName: 'blue'
     };
     this.setTheme = this.setTheme.bind(this);
+    this.setAppearance = this.setAppearance.bind(this);
   }
 
   setAppearance(mode) {
@@ -128,51 +130,6 @@ export default class Provider extends React.Component {
       appearanceName,
       themeName
     } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-    let light = {
-      backgroundColor: '#fff'
-    };
-    let night = {
-      backgroundColor: '#232b38'
-    };
-    let dark = {
-      backgroundColor: '#212121'
-    };
-    let fixedPosition = {
-      position: 'fixed',
-      bottom: '0',
-      backgroundColor: '#272727',
-      padding: '10px',
-      borderRadius: '15px 15px 0 0',
-      minWidth: '100px',
-      textAlign: 'center',
-      boxShadow: '0 0 3px #000',
-      fontSize: '12px',
-      zIndex: '3',
-      display: 'flex',
-      alignItems: 'center'
-    };
     return /*#__PURE__*/React.createElement(I18NProvider, {
       i18n: i18n,
       timeZone: "Asia/Kolkata",
@@ -194,65 +151,10 @@ export default class Provider extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '20%',
-        transform: 'translate(-20%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Light Mode",
-      style: Object.assign({}, themeClass, light),
-      onClick: () => this.setAppearance('default')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Night Mode",
-      style: Object.assign({}, themeClass, night),
-      onClick: () => this.setAppearance('dark')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Dark Mode",
-      style: Object.assign({}, themeClass, dark),
-      onClick: () => this.setAppearance('pureDark')
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '80%',
-        transform: 'translate(-80%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Themes:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))))));
+    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
+      onThemeChange: this.setTheme,
+      onAppearanceChange: this.setAppearance
+    }))));
   }
 
 }

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './SelectDropdown.module.css';
 
 class SelectDropdown extends React.Component {
@@ -32,6 +33,17 @@ class SelectDropdown extends React.Component {
     togglePopup(e, 'bottomRight');
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       title,
@@ -63,40 +75,52 @@ class SelectDropdown extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down1",
       size: "6"
-    })), /*#__PURE__*/React.createElement(DropBox, {
-      size: "medium",
-      boxPosition: "bottomRight",
-      isArrow: true,
-      isAnimate: true,
-      right: "-25",
-      isActive: isPopupOpen && isPopupReady,
-      getRef: getContainerRef
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      className: style.rulesPopup
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.rulesDepart
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      text: title
-    })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
-      className: style.searchDepart
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      name: "Test",
-      id: "Test",
-      maxLength: "150",
-      placeHolder: "Search Department"
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      scroll: "vertical",
-      flexible: true,
-      shrink: true
-    }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
-      key: index,
-      autoHover: true,
-      value: obj[valueKey],
-      active: selectedId == obj[idKey],
-      id: obj[idKey],
-      onClick: this.handleClick
-    }))))));
+    })), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        size: "medium",
+        boxPosition: "bottomRight",
+        isArrow: true,
+        isAnimate: true,
+        right: "-25",
+        isActive: isPopupOpen && isPopupReady,
+        getRef: getContainerRef,
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "column",
+        className: `${tabletMode ? '' : style.rulesPopup}`
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: style.rulesDepart
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: title
+      })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
+        className: style.searchDepart
+      }, /*#__PURE__*/React.createElement(TextBox, {
+        name: "Test",
+        id: "Test",
+        maxLength: "150",
+        placeHolder: "Search Department"
+      })) : null, /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true
+      }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
+        key: index,
+        autoHover: true,
+        value: obj[valueKey],
+        active: selectedId == obj[idKey],
+        id: obj[idKey],
+        onClick: this.handleClick
+      }))))));
+    }));
   }
 
 }

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -31,6 +31,7 @@
   max-height: var(--zd_size260);
   padding: var(--zd_size10) 0;
 }
+
 .rulesDepart {
   margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5);
 }