@zohodesk/dot 1.0.0-temp-195.2 → 1.0.0-temp-198

package/es/v1/DotProvider/props/defaultProps.js

@@ -0,0 +1,11 @@
+import { THEME_APPEARANCE_LIGHT, THEME_COLOR_BLUE } from "../utils/constants";
+export const defaultProps = {
+  themeAppearance: THEME_APPEARANCE_LIGHT,
+  themeColor: THEME_COLOR_BLUE,
+  baseZoomUnit: '1px',
+  baseFontUnit: '16px',
+  zoomUnitVariable: '--zd_baseUnit',
+  fontUnitVariable: '--zd_baseFontUnit',
+  themeAppearanceAttr: 'data-mode',
+  themeColorAttr: 'data-theme'
+};

package/es/v1/DotProvider/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { THEME_APPEARANCES, THEME_COLORS } from "../utils/constants";
+export const propTypes = {
+  themeAppearance: PropTypes.oneOf(THEME_APPEARANCES),
+  themeColor: PropTypes.oneOf(THEME_COLORS),
+  baseZoomUnit: PropTypes.string,
+  baseFontUnit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  zoomUnitVariable: PropTypes.string,
+  fontUnitVariable: PropTypes.string,
+  themeAppearanceAttr: PropTypes.string,
+  themeColorAttr: PropTypes.string,
+  providerRef: PropTypes.func,
+  onAssetsDownloadSuccess: PropTypes.func,
+  getAssetsPromises: PropTypes.func,
+  children: PropTypes.node
+};

package/es/v1/DotProvider/utils/assetPromiseHandlers.js

@@ -0,0 +1,61 @@
+import { getAssetsImportPromises } from "./getAssetsImportPromises";
+import { assetImports as themeAppearanceImports, assetImportMapping as themeAppearanceMapping } from "./themeAppearanceAssetsConfig";
+import { assetImports as themeColorImports, assetImportMapping as themeColorMapping } from "./themeColorAssetsConfig";
+import { assetImports as sizeImports, assetImportMapping as sizeMapping } from "./sizeAssetsConfig";
+import { errorValidation } from "./errorValidation";
+import { LIBRARIES, THEME_APPEARANCES, THEME_COLORS } from "./constants";
+export function getThemeAppearanceAssetPromise(_ref) {
+  let {
+    themeAppearance
+  } = _ref;
+
+  try {
+    errorValidation({
+      options: THEME_APPEARANCES,
+      value: themeAppearance,
+      type: 'themeAppearance'
+    });
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeAppearanceMapping[library][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeAppearanceImports
+    });
+  } catch (error) {
+    console.warn('Error: ', error);
+  }
+}
+export function getThemeColorAssetPromise(_ref2) {
+  let {
+    themeAppearance,
+    themeColor
+  } = _ref2;
+
+  try {
+    errorValidation({
+      options: THEME_COLORS,
+      value: themeColor,
+      type: 'themeColor'
+    });
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeColorMapping[library][themeColor][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeColorImports
+    });
+  } catch (error) {
+    console.warn('Error: ', error);
+  }
+}
+export function getZoomSizeAssetPromise() {
+  return sizeImports[sizeMapping.zoomSize]();
+}
+export function getFontSizeAssetPromise() {
+  return sizeImports[sizeMapping.fontSize]();
+}

package/es/v1/DotProvider/utils/constants.js

@@ -0,0 +1,14 @@
+export const LIBRARY_COMPONENT = 'component';
+export const LIBRARY_DOT = 'dot';
+export const LIBRARY_SVG = 'svg';
+export const THEME_APPEARANCE_LIGHT = 'light';
+export const THEME_APPEARANCE_DARK = 'dark';
+export const THEME_APPEARANCE_PURE_DARK = 'pureDark';
+export const THEME_COLOR_BLUE = 'blue';
+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 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/v1/DotProvider/utils/errorValidation.js

@@ -0,0 +1,14 @@
+import { THEME_APPEARANCES, THEME_COLORS } from "./constants";
+export function errorValidation(_ref) {
+  let {
+    options,
+    value,
+    type
+  } = _ref;
+
+  if (!options.includes(value)) {
+    const themeAppearances = THEME_APPEARANCES.toString();
+    const themeColors = THEME_COLORS.toString();
+    console.error(`We do not support the '${value} ${type}'. Please provide valid '${type}' values or check spelling. DotProvider supports ${themeAppearances} appearance & ${themeColors} theme.`);
+  }
+}

package/es/v1/DotProvider/utils/getAssetsImportPromises.js

@@ -0,0 +1,17 @@
+export function getAssetsImportPromises(_ref) {
+  let {
+    assetImportKeys,
+    assetImports
+  } = _ref;
+  const promises = [];
+  assetImportKeys.forEach(importKey => {
+    const assetURL = assetImports[importKey];
+
+    if (assetURL) {
+      promises.push(assetURL());
+    } else {
+      console.error(`Import not found for ${importKey} from ${assetImports}`);
+    }
+  });
+  return promises;
+}

package/es/v1/DotProvider/utils/sizeAssetsConfig.js

@@ -0,0 +1,12 @@
+export const assetImports = {
+  Lib_ZoomSize: () => import(
+  /* webpackChunkName: 'Lib_ZoomSize' */
+  '@zohodesk/variables/assets/sizeVariables.module.css'),
+  Lib_FontSize: () => import(
+  /* webpackChunkName: 'Lib_FontSize' */
+  '@zohodesk/variables/assets/fontsizeVariables.module.css')
+};
+export const assetImportMapping = {
+  zoomSize: 'Lib_ZoomSize',
+  fontSize: 'Lib_FontSize'
+};

package/es/v1/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -0,0 +1,47 @@
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+export const assetImports = {
+  Lib_LightMode_Component: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Component' */
+  '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
+  Lib_DarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Component' */
+  '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'),
+  Lib_PureDarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Component' */
+  '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
+  Lib_LightMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Dot' */
+  "./../../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),
+  Lib_DarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Dot' */
+  "./../../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
+  Lib_PureDarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Dot' */
+  "./../../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"),
+  Lib_LightMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_LightMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css'),
+  Lib_DarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/dark/mode/SVG_DarkMode.module.css'),
+  Lib_PureDarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
+};
+export const assetImportMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Component'
+  },
+  [LIBRARY_DOT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Dot',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Dot',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Dot'
+  },
+  [LIBRARY_SVG]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_SVG',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_SVG',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_SVG'
+  }
+};

package/es/v1/DotProvider/utils/themeColorAssetsConfig.js

@@ -0,0 +1,221 @@
+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";
+export const assetImports = {
+  Lib_Blue_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Component' */
+  "../libraryChunks/themes/component/blue/Blue_Light_Component"),
+  Lib_Blue_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Component' */
+  "../libraryChunks/themes/component/blue/Blue_Dark_Component"),
+  Lib_Blue_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Component' */
+  "../libraryChunks/themes/component/blue/Blue_PureDark_Component"),
+  Lib_Green_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Component' */
+  "../libraryChunks/themes/component/green/Green_Light_Component"),
+  Lib_Green_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Component' */
+  "../libraryChunks/themes/component/green/Green_Dark_Component"),
+  Lib_Green_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Component' */
+  "../libraryChunks/themes/component/green/Green_PureDark_Component"),
+  Lib_Orange_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Component' */
+  "../libraryChunks/themes/component/orange/Orange_Light_Component"),
+  Lib_Orange_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Component' */
+  "../libraryChunks/themes/component/orange/Orange_Dark_Component"),
+  Lib_Orange_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Component' */
+  "../libraryChunks/themes/component/orange/Orange_PureDark_Component"),
+  Lib_Red_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Component' */
+  "../libraryChunks/themes/component/red/Red_Light_Component"),
+  Lib_Red_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Component' */
+  "../libraryChunks/themes/component/red/Red_Dark_Component"),
+  Lib_Red_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Component' */
+  "../libraryChunks/themes/component/red/Red_PureDark_Component"),
+  Lib_Yellow_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_Light_Component"),
+  Lib_Yellow_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_Dark_Component"),
+  Lib_Yellow_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Component' */
+  "../libraryChunks/themes/component/yellow/Yellow_PureDark_Component"),
+  Lib_Blue_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_Light_Dot"),
+  Lib_Blue_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_Dark_Dot"),
+  Lib_Blue_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Dot' */
+  "../libraryChunks/themes/dot/blue/Blue_PureDark_Dot"),
+  Lib_Green_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Dot' */
+  "../libraryChunks/themes/dot/green/Green_Light_Dot"),
+  Lib_Green_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Dot' */
+  "../libraryChunks/themes/dot/green/Green_Dark_Dot"),
+  Lib_Green_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Dot' */
+  "../libraryChunks/themes/dot/green/Green_PureDark_Dot"),
+  Lib_Orange_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_Light_Dot"),
+  Lib_Orange_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_Dark_Dot"),
+  Lib_Orange_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Dot' */
+  "../libraryChunks/themes/dot/orange/Orange_PureDark_Dot"),
+  Lib_Red_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Dot' */
+  "../libraryChunks/themes/dot/red/Red_Light_Dot"),
+  Lib_Red_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Dot' */
+  "../libraryChunks/themes/dot/red/Red_Dark_Dot"),
+  Lib_Red_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Dot' */
+  "../libraryChunks/themes/dot/red/Red_PureDark_Dot"),
+  Lib_Yellow_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_Light_Dot"),
+  Lib_Yellow_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot"),
+  Lib_Yellow_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Dot' */
+  "../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot"),
+  Lib_Blue_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_Light_SVG"),
+  Lib_Blue_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_Dark_SVG"),
+  Lib_Blue_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_SVG' */
+  "../libraryChunks/themes/svg/blue/Blue_PureDark_SVG"),
+  Lib_Green_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_SVG' */
+  "../libraryChunks/themes/svg/green/Green_Light_SVG"),
+  Lib_Green_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_SVG' */
+  "../libraryChunks/themes/svg/green/Green_Dark_SVG"),
+  Lib_Green_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_SVG' */
+  "../libraryChunks/themes/svg/green/Green_PureDark_SVG"),
+  Lib_Orange_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_Light_SVG"),
+  Lib_Orange_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_Dark_SVG"),
+  Lib_Orange_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_SVG' */
+  "../libraryChunks/themes/svg/orange/Orange_PureDark_SVG"),
+  Lib_Red_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_SVG' */
+  "../libraryChunks/themes/svg/red/Red_Light_SVG"),
+  Lib_Red_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_SVG' */
+  "../libraryChunks/themes/svg/red/Red_Dark_SVG"),
+  Lib_Red_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_SVG' */
+  "../libraryChunks/themes/svg/red/Red_PureDark_SVG"),
+  Lib_Yellow_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_Light_SVG"),
+  Lib_Yellow_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG"),
+  Lib_Yellow_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
+};
+export const assetImportMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Component'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Component'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Component'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Component'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Component'
+    }
+  },
+  [LIBRARY_DOT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Dot'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Dot'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Dot'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Dot'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Dot'
+    }
+  },
+  [LIBRARY_SVG]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_SVG'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_SVG'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_SVG'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_SVG'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_SVG'
+    }
+  }
+};

package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -145,6 +145,10 @@ export default class TagsMultiSelect extends React.Component {
       handleSelectAll,
       selectAllText,
       needSelectAll,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset,
       customClass,
       customProps
     } = this.props;
@@ -252,7 +256,11 @@ export default class TagsMultiSelect extends React.Component {
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {

package/es/v1/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -9,6 +9,8 @@ export const defaultProps = {
   clickableTag: false,
   dataSelectorId: 'tagsMultiSelectField',
   needSelectAll: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {},
   customProps: {}
 };

package/es/v1/form/fields/TagsMultiSelect/props/propTypes.js

@@ -44,6 +44,10 @@ export const propTypes = {
   handleSelectAll: PropTypes.func,
   selectAllText: PropTypes.string,
   needSelectAll: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   customClass: PropTypes.object,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,

package/es/v1/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -40,7 +40,11 @@ const TagsMultiSelectField = props => {
     ePhiData,
     customProps,
     clickableTag,
-    dataSelectorId
+    dataSelectorId,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    positionsOffset,
+    targetOffset
   } = props;
   const {
     LabelProps = {},
@@ -244,6 +248,10 @@ const TagsMultiSelectField = props => {
     htmlId: htmlId,
     getTextBoxChildren: getTextBoxChildren,
     className: containerClass,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isRestrictScroll: isRestrictScroll,
+    positionsOffset: positionsOffset,
+    targetOffset: targetOffset,
     ...TagsMultiSelectProps,
     clickableTag: clickableTag
   }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {

package/es/v1/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -17,5 +17,7 @@ export const defaultProps = {
   numberOfDisplayedValues: '5',
   customProps: {},
   dataSelectorId: 'tagsMultiSelectField',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   ...FieldCommonDefaultProps()
 };

package/es/v1/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -63,5 +63,9 @@ export const propTypes = {
   togglePopup: PropTypes.func,
   clickableTag: PropTypes.bool,
   dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
 };

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -69,6 +69,10 @@ function StatusDropdown(props) {
     isFetchingOptions,
     getNextOptions,
     options,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    positionsOffset,
+    targetOffset,
     a11y = {}
   } = props;
   const [optionsList, setOptionsList] = useState(options);
@@ -200,6 +204,10 @@ function StatusDropdown(props) {
       needFocusScope: true,
       onClose: handleTogglePopup,
       dataId: `${dataId}_dropbox`,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
       customProps: {
         focusScopeProps: {
           searchValue: searchString,

package/es/v1/list/status/StatusDropdown/props/defaultProps.js

@@ -16,5 +16,7 @@ export const defaultProps = {
   needExternalPopupState: false,
   statusColor: 'statusColor',
   needMultiLineText: false,
-  isFetchingOptions: false
+  isFetchingOptions: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };

package/es/v1/list/status/StatusDropdown/props/propTypes.js

@@ -50,5 +50,9 @@ export const propTypes = {
   needMultiLineText: PropTypes.bool,
   onSelectLabel: PropTypes.func,
   top: PropTypes.number,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   a11y: PropTypes.object
 };

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -70,7 +70,11 @@ class DropDown extends SelectComponent {
       searchBoxVariant,
       searchBoxPlaceHolder,
       maxLength,
-      dataId
+      dataId,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset
     } = this.props;
     const {
       hoverIndex,
@@ -117,7 +121,11 @@ class DropDown extends SelectComponent {
         size: "large",
         alignBox: "row",
         isResponsivePadding: true,
-        dataId: `${dataId}_dropbox`
+        dataId: `${dataId}_dropbox`,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {

package/es/v1/lookup/header/ViewDropDown/props/defaultProps.js

@@ -4,5 +4,7 @@ export const defaultProps = {
   needSearch: true,
   textField: 'text',
   valueField: 'id',
-  dataId: 'ViewDropDown'
+  dataId: 'ViewDropDown',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };

package/es/v1/lookup/header/ViewDropDown/props/propTypes.js

@@ -19,5 +19,9 @@ export const propTypes = {
   animationStyle: PropTypes.string,
   searchBoxSize: PropTypes.string,
   searchBoxVariant: PropTypes.string,
-  maxLength: PropTypes.string
+  maxLength: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.string,
+  targetOffset: PropTypes.string
 };