@zohodesk/dot 1.0.0-temp-54 → 1.0.0-temp-58

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='default'][data-theme='blue'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #6cbbfc;
-    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
+	--zdt_commonEmptyState_dark_link: #6cbbfc;
+	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='green'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #4ac064;
-    --zdt_commonEmptyState_dark_link_hover: #0e7526;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
+	--zdt_commonEmptyState_dark_link: #4ac064;
+	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='orange'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e57717;
-    --zdt_commonEmptyState_dark_link_hover: #b25900;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
+	--zdt_commonEmptyState_dark_link: #e57717;
+	--zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='red'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
-    
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #ff6363;
-    --zdt_commonEmptyState_dark_link_hover: #ab1a18;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
+	--zdt_commonEmptyState_dark_link: #ff6363;
+	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='yellow'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e8b923;
-    --zdt_commonEmptyState_dark_link_hover: #b59100;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
+	--zdt_commonEmptyState_dark_link: #e8b923;
+	--zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/src/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -32,10 +32,10 @@ export default class FreezeLayer__dark extends Component {
         >
           <div
             style={{
-              color: 'var(--dot_text_black)',
+              color: 'var(--dot_black)',
               fontSize: '40px',
               padding: '100px',
-              background: 'var(--dot_bg_white)'
+              background: 'var(--dot_white)'
             }}
           >
             Im children

package/src/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -30,10 +30,10 @@ export default class FreezeLayer__default extends Component {
         >
           <span
             style={{
-              color: 'var(--dot_text_black)',
+              color: 'var(--dot_black)',
               fontSize: '40px',
               padding: '100px',
-              background: 'var(--dot_bg_white)'
+              background: 'var(--dot_white)'
             }}
           >
             Im children

package/src/ImportantNotes/ImportantNotes.js

@@ -10,14 +10,14 @@ export default class ImportantNotes extends React.Component {
   }
 
   render() {
-    let { text, iconName, iconSize, children, iconClass, isCover } = this.props;
+    let { text, iconName, iconSize, children, iconClass, isCover, className } = this.props;
     return (
           <Container 
             isInline={!isCover} 
             isCover={false} 
             alignBox='row' 
             align='top'
-            className={style.section}
+            className={`${style.section} ${className || ''}`}
           >
             {iconName ? (
               <Box className={style.icon} align='start'>
@@ -40,7 +40,8 @@ ImportantNotes.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
   isCover: PropTypes.bool,
-  text: PropTypes.string
+  text: PropTypes.string,
+  className: PropTypes.string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/src/Loader/docs/Loader__default.docs.js

@@ -7,7 +7,7 @@ export default class Loader__default extends React.Component {
 
   render() {
     return (
-      <div style={{ background: 'var(--dot_bg_black)', height: '40px' }}>
+      <div style={{ background: 'var(--dot_black)', height: '40px' }}>
         <Loader />
       </div>
     );

package/src/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -35,13 +35,13 @@
 /* select dropdown */
 
 [data-mode='dark'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }
 
 [data-mode='default'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -176,7 +176,7 @@ export default class TagsMultiSelect extends React.Component {
               isReadOnly={isReadOnly}
               ref={this.textBoxRef}
               needBorder={false}
-              placeHolder={tagsList.length ? '' : '-'}
+              placeHolder={tagsList.length ? '' : (i18nKeys.placeholderText || '-')}
               onClick={!isReadOnly ? handleTogglePopup : undefined}
               customClass={{
                 customTBoxWrap: style.custmInp,
@@ -308,7 +308,8 @@ TagsMultiSelect.propTypes = {
     errorMessage: PropTypes.string.isRequired,
     deleteText: PropTypes.string.isRequired,
     lessText: PropTypes.string.isRequired,
-    moreText: PropTypes.string.isRequired
+    moreText: PropTypes.string.isRequired,
+    placeholderText: PropTypes.string
   }),
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   needBorder: PropTypes.bool,

package/src/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -44,7 +44,7 @@ const TagsMultiSelectField__default = () => {
       isNewNeeded
       getTextBoxChildren={() => <Icon name='ZD-SE-setpracket' size='18' />}
     >
-      <span style={{ fontSize: '13px', marginLeft: '5px', color: 'var(--dot_text_shuttleGrey)' }}>shift+t</span>
+      <span style={{ fontSize: '13px', marginLeft: '5px', color: 'var(--dot_shuttleGrey)' }}>shift+t</span>
     </TagsMultiSelectField>
   </div>
 }

package/src/form/fields/TextEditor/TextEditor.js

@@ -222,7 +222,7 @@ export default class TextEditor extends Component {
       if (isCustomScroll) {
         let link = document.createElement('style');
         link.innerText =
-          ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+          "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }

package/src/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -40,7 +40,7 @@ export default class TextEditorField__default extends Component {
           needEditor={false}
           labelName='TextArea'
         >
-        <Box flexible style={{fontSize: '12px',color: 'var(--dot_text_primary)',textAlign: 'right'}}>Placeholders</Box>
+        <Box flexible style={{fontSize: '12px',color: 'var(--dot_primary)',textAlign: 'right'}}>Placeholders</Box>
       </TextEditorField>
 
         <TextEditorField

package/src/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -47,7 +47,7 @@ export default class TextEditorWrapper extends Component {
     ) {
       this.setState({ isEditorShow: true });
     } else {
-      if (!this.state.isEditorFocus) {
+      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
         this.setState({ isEditorShow: false });
       }
     }

package/src/list/BluePrintStatus/BluePrintStatus.module.css

@@ -3,10 +3,10 @@
   display: inherit;
 }
 /* .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/src/list/DotNew/DotNew.module.css

@@ -1,18 +1,18 @@
 .medium {
   width: var(--zd_size6);
-  height: var(--zd_size6); 
+  height: var(--zd_size6);
 }
 .small{
   width: var(--zd_size5);
-  height: var(--zd_size5); 
+  height: var(--zd_size5);
 }
 .container{
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   box-shadow: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */
 }
 @keyframes dotAnimation {

package/src/version2/GlobalNotification/GlobalNotification.js

@@ -36,7 +36,7 @@ export default class GlobalNotification extends React.Component {
   }
 
   render() {
-    let { type, message, hideMessage, onClick,i18nKeys={} } = this.props;
+    let { type, message, hideMessage, onClick, i18nKeys={}, customProps } = this.props;
     let { closeTitle = 'Close' } = i18nKeys;
     return (
       <GlobalNotificationUI
@@ -45,6 +45,7 @@ export default class GlobalNotification extends React.Component {
         hideMessage={hideMessage}
         onClick={onClick}
         closeTitle={closeTitle}
+        customProps={customProps}
       />
     );
   }
@@ -56,8 +57,14 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
+GlobalNotification.defaultProps = {
+  customProps: {}
+}
 if (__DOCS__) {
   GlobalNotification.docs = {
     componentGroup: 'GlobalNotification',
@@ -71,9 +78,10 @@ export function GlobalNotificationUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-  let { type = '', message, onClick, closeTitle='' } = props;
+  let { type = '', message, onClick, closeTitle='', customProps={} } = props;
+  let { ExtraProps={} } = customProps;
   return (
-    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`}>
+    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`} {...ExtraProps} >
       <Container
         className={`${style.container}`}
         alignBox='row'

package/src/version2/notification/DesktopNotification/DesktopNotification.js

@@ -58,11 +58,13 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let { closeTitle = 'Close' } = i18nKeys;
   let { containerClass } = customClass;
   let { buttonPalette = 'dangerFilled' } = buttonPaletteObject[type] || {};
+  let { ExtraProps={} } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -94,6 +96,7 @@ export function DesktopNotificationUI(props) {
         isCover={false}
         dataId={dataId}
         isInline={uiVariantTwo}
+        {...ExtraProps}
       >
         <Box>
           <DesktopNotificationHeader
@@ -227,7 +230,10 @@ DesktopNotification.propTypes = {
     'info',
     'notification',
     'alarm'
-  ])
+  ]),
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -240,7 +246,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (__DOCS__) {

package/src/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -13,7 +13,7 @@
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   pointer-events: auto;
 }
-.globalNotify { 
+.globalNotify {
   max-width: var(--zd_size490);
   min-width: var(--zd_size394);
 }
@@ -51,17 +51,17 @@
 /* Container Style */
 .message {
   padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-  border-top: 1px solid var(--zd_border_smoke1);
+  border-top: 1px solid var(--zd_smoke1);
   cursor: pointer;
   position: relative;
-  color: var(--zd_text_smoke18);
+  color: var(--zd_smoke18);
   font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
 }
 .message:hover {
-  background: var(--zd_bg_alabaster);
+  background: var(--zd_alabaster);
 }
 /* Section */
 .section {
@@ -88,4 +88,3 @@
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   overflow: hidden;
 }
-