@zohodesk/dot 1.0.0-temp-227 → 1.0.0-temp-228

package/README.md

@@ -2,15 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-
 # 1.9.8
 
-- **Lookup**
-  - `freezeLayerProps` supported under `customProps` prop
-- **ModuleHeader**
-  - `isDraggable`, `customClass` - Props supported
-- **version2/AlertHeader**
-  - `isDraggable`, `customClass`, `renderCustomIcon`, `renderSecondaryContent`, `renderRightActions` - Props supported
+- **DotProvider** - Variables package handled and separated the component & variable import files
+- **Dependency**: @zohodesk/variables@1.3.0 , @zohodesk/components@1.6.6
 
 # 1.9.7
 

package/es/ActionButton/ActionButton.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -7,13 +9,16 @@ import Button from '@zohodesk/components/es/Button/Button';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import style from "./ActionButton.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
+    this.getElementId = getUniqueId(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.handlePopupOpen = this.handlePopupOpen.bind(this);
+    this.popupId = this.getElementId();
   }
 
   handlePopupOpen(e) {
@@ -64,8 +69,12 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded,
       isRestrictScroll,
       positionsOffset,
-      targetOffset
+      targetOffset,
+      a11yAttributes
     } = this.props;
+    const {
+      splitButton: a11yAttributes_splitButton
+    } = a11yAttributes;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -92,8 +101,7 @@ export class ActionButton extends React.Component {
       dataId: dataId,
       className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
       "data-title": dataTitle,
-      tagName: "button",
-      tabIndex: "0"
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -113,22 +121,23 @@ export class ActionButton extends React.Component {
     }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
       "data-title": removeChildrenTooltip ? null : subText,
       className: style.subTxt
-    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
+    }, subText) : null)), children ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({}, a11yAttributes_splitButton, {
       onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
       dataId: `${dataId}_arrowButton`,
-      tabIndex: "0",
       tagName: "button",
-      dataSelectorId: `${dataSelectorId}_arrowButton`
-    }, /*#__PURE__*/React.createElement(Container, {
+      dataSelectorId: `${dataSelectorId}_arrowButton`,
+      "aria-expanded": isPopupOpen,
+      "aria-controls": this.popupId
+    }), /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "6",
       iconClass: style.arrow
-    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: "small",
       isActive: isPopupOpen,
       boxPosition: position,
@@ -146,7 +155,8 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
       isRestrictScroll: isRestrictScroll,
       positionsOffset: positionsOffset,
-      targetOffset: targetOffset
+      targetOffset: targetOffset,
+      htmlId: this.popupId
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/ActionButton/props/defaultProps.js

@@ -15,5 +15,6 @@ export const defaultProps = {
   removeChildrenTooltip: false,
   innerClassName: '',
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  a11yAttributes: {}
 };

package/es/ActionButton/props/propTypes.js

@@ -33,5 +33,8 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  a11yAttributes: PropTypes.shape({
+    splitButton: PropTypes.object
+  })
 };

package/es/DotProvider/hooks/useDotProvider.js

@@ -1,8 +1,8 @@
 import { useLayoutEffect } from 'react';
 import useDownloadAssetsAndSetAttr from "./useDownloadAssetsAndSetAttr";
-import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
-import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
-import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/pureDarkContrastLightness.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/Dark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/dark/mode/globalTokens_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/Light_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/light/mode/globalTokens_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/PureDark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/mode/globalTokens_PureDarkMode.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
-import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';

package/es/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,3 +1 @@
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/utils/constants.js

@@ -1,3 +1,4 @@
+export const LIBRARY_VARIABLES = 'variables';
 export const LIBRARY_COMPONENT = 'component';
 export const LIBRARY_DOT = 'dot';
 export const LIBRARY_SVG = 'svg';
@@ -9,6 +10,6 @@ export const THEME_COLOR_GREEN = 'green';
 export const THEME_COLOR_ORANGE = 'orange';
 export const THEME_COLOR_RED = 'red';
 export const THEME_COLOR_YELLOW = 'yellow';
-export const LIBRARIES = [LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
+export const LIBRARIES = [LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
 export const THEME_APPEARANCES = [THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_DARK, THEME_APPEARANCE_PURE_DARK];
 export const THEME_COLORS = [THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW];

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -1,5 +1,14 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
 export const themeAppearanceImports = {
+  Lib_LightMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Variables' */
+  "../libraryChunks/appearance/variables/Light_Variables"),
+  Lib_DarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Variables' */
+  "../libraryChunks/appearance/variables/Dark_Variables"),
+  Lib_PureDarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Variables' */
+  "../libraryChunks/appearance/variables/PureDark_Variables"),
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
   "../libraryChunks/appearance/component/Light_Component"),
@@ -29,6 +38,11 @@ export const themeAppearanceImports = {
   '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
 };
 export const themeAppearanceMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Variables',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Variables',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Variables'
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
     [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',

package/es/DotProvider/utils/themeColorAssetsConfig.js

@@ -1,5 +1,50 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
 export const themeColorImports = {
+  Lib_Blue_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Light_Variables"),
+  Lib_Blue_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Dark_Variables"),
+  Lib_Blue_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_PureDark_Variables"),
+  Lib_Green_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Light_Variables"),
+  Lib_Green_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Dark_Variables"),
+  Lib_Green_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_PureDark_Variables"),
+  Lib_Orange_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Light_Variables"),
+  Lib_Orange_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Dark_Variables"),
+  Lib_Orange_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_PureDark_Variables"),
+  Lib_Red_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Light_Variables"),
+  Lib_Red_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Dark_Variables"),
+  Lib_Red_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_PureDark_Variables"),
+  Lib_Yellow_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Light_Variables"),
+  Lib_Yellow_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Dark_Variables"),
+  Lib_Yellow_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables"),
   Lib_Blue_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Component' */
   "../libraryChunks/themes/component/blue/Blue_Light_Component"),
@@ -137,6 +182,33 @@ export const themeColorImports = {
   "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
 };
 export const themeColorMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Variables'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Variables'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Variables'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Variables'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Variables'
+    }
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_COLOR_BLUE]: {
       [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',

package/es/lookup/Lookup/Lookup.js

@@ -70,8 +70,7 @@ export default class Lookup extends Component {
       ...a11yAttributes
     } = a11y;
     const {
-      focusScopeProps = {},
-      freezeLayerProps
+      focusScopeProps = {}
     } = customProps;
     const {
       needAutoFocus = true,
@@ -98,17 +97,16 @@ export default class Lookup extends Component {
       isCover: false,
       className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`
     }, children));
-    return /*#__PURE__*/React.createElement(FreezeLayer, _extends({
+    return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",
       animationName: "fade",
-      palette: "snow"
-    }, freezeLayerProps, {
       childAnimationName: childAnimationName,
       isActive: isActive,
+      palette: "snow",
       forwardRef: forwardRef,
       onClick: onClick,
       customClass: customClass
-    }), /*#__PURE__*/React.createElement(Container, {
+    }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       className: style.container,
       dataId: "fldValue"

package/es/lookup/Lookup/__tests__/Lookup.spec.js

@@ -1,37 +1,14 @@
 import React from 'react';
-import { cleanup, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Lookup from "../Lookup";
-const SIZE_VALUES = ['small', 'xmedium', 'large', 'xlarge', 'full'];
-const CHILD_ANIMATION_NAME_VALUES = ['expand'];
-afterEach(() => {
-  cleanup();
-});
-describe('Lookup snapshot - ', () => {
-  test('Render with default props', () => {
+describe('Lookup', () => {
+  test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Lookup, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test.each(SIZE_VALUES)('Render with size=%s', size => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      size: size
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test.each(CHILD_ANIMATION_NAME_VALUES)('Render with childAnimationName=%s', childAnimationName => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      childAnimationName: childAnimationName
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with isActive=true', () => {
+  test('rendering isActive is true', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Lookup, {
@@ -39,78 +16,4 @@ describe('Lookup snapshot - ', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Render with isMinHeight=true', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      isMinHeight: true
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with children', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", null, "Lookup child content")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with custom classes', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      customClass: "lookup-freeze-layer",
-      containerClass: "lookup-container",
-      lookupClass: "lookup-box"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with customProps', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      customProps: {
-        freezeLayerProps: {
-          palette: 'plain'
-        }
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with dataId', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      dataId: "lookup-data-id"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with htmlId', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      htmlId: "lookup-html-id"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Render with a11y attributes', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Lookup, {
-      isActive: true,
-      a11y: {
-        role: 'region',
-        ariaLabelledby: 'lookup-title',
-        ariaDescribedby: 'lookup-description',
-        ariaLabel: 'Lookup Dialog',
-        ariaModal: true
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });