@zohodesk/library-platform 1.1.8 → 1.1.9-exp.1

package/es/library/custom-component/domain/entities/Behaviour.js

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class Behaviour {
   constructor(_ref) {
     let {
@@ -8,15 +6,6 @@ class Behaviour {
       setIntialState,
       eventHandlers
     } = _ref;
-
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "properties", void 0);
-
-    _defineProperty(this, "setIntialState", void 0);
-
-    _defineProperty(this, "eventHandlers", void 0);
-
     this.name = name;
     this.properties = properties;
     this.setIntialState = setIntialState;

package/es/library/custom-component/domain/entities/Component.js

@@ -1,30 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import EventHandler from "./EventHandler";
 export default class Component {
   constructor() {
-    _defineProperty(this, "_name", void 0);
-
-    _defineProperty(this, "_events", void 0);
-
-    _defineProperty(this, "_properties", void 0);
-
-    _defineProperty(this, "_lifeCycleAction", void 0);
-
-    _defineProperty(this, "_eventHandlers", void 0);
-
-    _defineProperty(this, "_tranformer", void 0);
-
-    _defineProperty(this, "_stateInitializer", void 0);
-
-    _defineProperty(this, "_state", void 0);
-
-    _defineProperty(this, "_eventHandlersWrapper", void 0);
-
-    _defineProperty(this, "_behaviours", void 0);
-
-    _defineProperty(this, "_behavioursProperties", void 0);
-
     this._behavioursProperties = {};
   }
 

package/es/library/custom-component/domain/entities/ComponentProperties.js

@@ -0,0 +1,121 @@
+/* eslint-disable complexity */
+import { ErrorCodes } from "../../../../cc/component/ErrorStructure";
+import Logger from "./Logger";
+export default class ComponentProperties {
+  constructor(componentName, properties, behaviours) {
+    this.componentName = componentName;
+    this.properties = properties;
+    this.behaviours = behaviours;
+    this.logger = new Logger(componentName);
+    this.behavioursProperties = {};
+    /* store behaviour properties */
+
+    this.behaviours.forEach(behaviour => {
+      behaviour.getProperties().data && behaviour.getProperties().data.forEach(obj => {
+        this.behavioursProperties[obj.getName()] = obj.clone();
+      });
+    });
+  }
+
+  getAllBehavioursPropertiesWithValue() {
+    const output = {};
+    Object.keys(this.behavioursProperties).forEach(propertyName => {
+      output[propertyName] = this.behavioursProperties[propertyName].getValue();
+    });
+    return output;
+  }
+
+  getAllPropertiesValue() {
+    return { ...this.properties.getAllPropertiesValue(),
+      ...this.getAllBehavioursPropertiesWithValue()
+    };
+  }
+
+  getAllPropertiesKeys() {
+    const propKeys = this.properties.getAllPropertiesKeys();
+    const bhvrKeys = Object.keys(this.behavioursProperties);
+    return [...propKeys, ...bhvrKeys];
+  }
+
+  validateAndUpdateProperties(jsonValidator, newProps) {
+    const {
+      isValid,
+      validationResults
+    } = this.validateProperties(jsonValidator, newProps);
+
+    if (!isValid) {
+      this.logger.logPropertiesValidation(validationResults); // console.log({ isValid, componentName: this.componentName, validationResults });
+
+      throw {
+        code: ErrorCodes.PROPERTY_VALIDATION_FAILED,
+        message: `Properties validation failed for component ${this.componentName}`,
+        errorDetails: {
+          isBreaking: true,
+          validationResults: validationResults.filter(result => !result.isValid)
+        }
+      };
+    }
+
+    return this.updateProperties(newProps);
+  }
+
+  updateProperties(newProps) {
+    const allProperties = this.getAllPropertiesKeys();
+    let isChanged = false;
+    allProperties.forEach(key => {
+      const property = this.findProperty(key);
+
+      if (property) {
+        isChanged = property.updateValue(newProps[key]) || isChanged;
+      }
+    });
+    return isChanged;
+  }
+
+  getExtraPropertiesError(propertyName) {
+    return {
+      key: propertyName,
+      isValid: false,
+      warnings: [{
+        keyword: 'extra',
+        message: 'Property is not allowed',
+        params: {}
+      }],
+      errors: [],
+      schema: {}
+    };
+  }
+
+  validateProperties(validator, newProps) {
+    const allProperties = this.getAllPropertiesKeys();
+    const validationResults = [];
+    allProperties.forEach(propertyName => {
+      const property = this.findProperty(propertyName);
+
+      if (property) {
+        const result = property.validateProperty(validator, newProps[propertyName]);
+        validationResults.push(result);
+      } else {
+        validationResults.push(this.getExtraPropertiesError(propertyName));
+      }
+    });
+    const isValid = validationResults.every(result => result.isValid);
+    return {
+      isValid,
+      validationResults
+    };
+  }
+
+  findProperty(propertyName) {
+    if (this.behavioursProperties[propertyName]) {
+      return this.behavioursProperties[propertyName];
+    }
+
+    return this.properties.findProperty(propertyName);
+  }
+
+  getAppendToActionPayloadProperty() {
+    return this.properties.getAppendToActionPayloadProperty();
+  }
+
+}

package/es/library/custom-component/domain/entities/Event.js

@@ -1,13 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class Event {
   constructor(type) {
     let payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    _defineProperty(this, "type", void 0);
-
-    _defineProperty(this, "payload", void 0);
-
     this.type = type;
     this.payload = payload;
   }

package/es/library/custom-component/domain/entities/EventHandler.js

@@ -1,11 +1,5 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class EventHandler {
   constructor(key, handler) {
-    _defineProperty(this, "handler", void 0);
-
-    _defineProperty(this, "key", void 0);
-
     this.key = key;
     this.handler = handler;
   }

package/es/library/custom-component/domain/entities/LifeCycleAction.js

@@ -1,16 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 export default class LifeCycleAction {
   constructor(name) {
-    _defineProperty(this, "mount", void 0);
-
-    _defineProperty(this, "unmount", void 0);
-
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "contructUpdatePropertiesAction", void 0);
-
     this.name = name;
     this.mount = {
       type: `${name}#${LifeCycleEvents.MOUNT}`

package/es/library/custom-component/domain/entities/Logger.js

@@ -0,0 +1,63 @@
+// Define types
+// const ERROR_TITLE: string = 'color: red; font-weight: bold;';
+const ERROR_PRIMARY = 'color: #FF6F61;font-weight: bold';
+const ERROR_SECONDARY = 'color: #FFA500;font-weight: initial'; // const LOG_TITLE: string = 'color: gray; font-weight: bold;';
+
+const LOG_PRIMARY = 'color: #55c355;font-weight: bold';
+const LOG_SECONDARY = 'color: #5a9de9;font-weight: bold';
+export default class Logger {
+  constructor(componentName) {
+    this.componentName = componentName;
+  } // eslint-disable-next-line max-lines-per-function
+
+
+  logPropertiesValidation(validationResults) {
+    console.group(`%cProperties Validation: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, validationResults.filter(result => result.errors?.length > 0 || result.warnings?.length > 0));
+    validationResults.filter(result => result.errors?.length > 0 || result.warnings?.length > 0).forEach(result => {
+      result.errors?.forEach(error => {
+        this.printResult(result.key, error);
+      });
+      result.warnings?.forEach(warning => {
+        this.printResult(result.key, warning);
+      });
+    });
+    console.groupEnd();
+  }
+
+  printResult(key, errorOrWarning) {
+    if (errorOrWarning.dataPath) {
+      console.error(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: white;');
+      return;
+    }
+
+    console.error(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: white;');
+  }
+
+  eventNameConsoleStyle(type) {
+    const index = type.indexOf('#');
+    return {
+      msg: '%c' + type.slice(0, index) + '%c' + type.slice(index),
+      styles: [LOG_PRIMARY, LOG_SECONDARY]
+    };
+  }
+
+  isLoggingEnabled() {
+    // @ts-ignore
+    return __DEVELOPMENT__ && globalThis.enableEventLogging;
+  }
+
+  isLoggingEnabledAndTypePresent(type) {
+    return this.isLoggingEnabled() && type;
+  }
+
+  logEvent(type, data) {
+    if (this.isLoggingEnabledAndTypePresent(type)) {
+      const {
+        msg,
+        styles: nameStyles
+      } = this.eventNameConsoleStyle(type);
+      console.log(`%cEvent ${msg}`, 'font-weight: bold', ...nameStyles, data);
+    }
+  }
+
+}

package/es/library/custom-component/domain/entities/Payload.js

@@ -1,11 +1,5 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class Payload {
   constructor(name, typeMetadata) {
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "typeMetadata", void 0);
-
     this.name = name;
     this.typeMetadata = typeMetadata;
   }

package/es/library/custom-component/domain/entities/Properties.js

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import Property from "./Property";
 import defaultAppendToActionPayload from "./DefaultAppendToActionPayload";
 import getRefPropertySchema from "../../../../cc/component/properties/getRefPropertySchema";
@@ -7,9 +5,6 @@ import defaultSlotNameAppend from "./DefaultSlotNameAppend";
 export default class Properties {
   constructor(properties, componentName) {
     this.componentName = componentName;
-
-    _defineProperty(this, "data", void 0);
-
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));

package/es/library/custom-component/domain/entities/Property.js

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class Property {
   constructor(_ref) {
     let {
@@ -8,17 +6,6 @@ export default class Property {
       required,
       typeMetadata
     } = _ref;
-
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "required", void 0);
-
-    _defineProperty(this, "defaultValue", void 0);
-
-    _defineProperty(this, "typeMetadata", void 0);
-
-    _defineProperty(this, "value", void 0);
-
     this.name = name;
     this.defaultValue = defaultValue;
     this.required = required;

package/es/library/custom-component/domain/entities/Schema.js

@@ -1,9 +1,5 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class Schema {
-  constructor() {
-    _defineProperty(this, "_type", void 0);
-  }
+  constructor() {}
 
   getType() {
     return this._type;

package/es/library/custom-component/domain/entities/State.js

@@ -1,9 +1,5 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class State {
   constructor() {
-    _defineProperty(this, "state", void 0);
-
     this.state = {};
   }
 

package/es/library/custom-component/domain/entities/Style.js

@@ -1,18 +1,4 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class Style {
-  constructor() {
-    _defineProperty(this, "name", void 0);
-
-    _defineProperty(this, "label", void 0);
-
-    _defineProperty(this, "required", void 0);
-
-    _defineProperty(this, "defaultValue", void 0);
-
-    _defineProperty(this, "typeMetadata", void 0);
-  }
-
   getLabel() {
     return this.label;
   }

package/es/library/custom-component/frameworks/json-schema-validator/Validator.js

@@ -6,28 +6,89 @@ let jsonValidator = new Ajv({
 class Validator {
   static validate(schema, value) {
     let errors = [];
+    Validator.checkFunctionsRecursively(schema, value, '', '#', errors); // Use AJV for the rest of the validation, ignoring functions
 
-    if (schema.type === 'function' && typeof value === 'function') {
-      return {
-        isValid: true,
-        errors
-      };
-    } // validate is a type guard for MyData - type is inferred from schema type
+    const ajvSchema = JSON.parse(JSON.stringify(schema, (key, val) => val === 'function' ? undefined : val)); // validate is a type guard for MyData - type is inferred from schema type
+    // const validate = jsonValidator.compile(schema);
 
-
-    const validate = jsonValidator.compile(schema);
+    const validate = jsonValidator.compile(ajvSchema);
     const isValid = validate(value);
 
     if (!isValid) {
-      errors = validate.errors;
+      // errors = validate.errors;
+      errors.push(...(validate.errors || []));
     }
 
     return {
-      isValid,
+      isValid: isValid && errors.length === 0,
       errors
     };
   }
 
+  static checkFunctionsRecursively(schema, value) {
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let schemaPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#';
+    let errors = arguments.length > 4 ? arguments[4] : undefined;
+
+    if (schema.type === 'function') {
+      if (typeof value !== 'function') {
+        errors.push({
+          keyword: "type",
+          dataPath: path ? `.${path}` : "",
+          schemaPath: `${schemaPath}/type`,
+          params: {
+            type: "function"
+          },
+          message: "should be function"
+        });
+      }
+
+      return;
+    }
+
+    if (schema.type === 'object' && schema.properties && typeof value === 'object' && value !== null) {
+      for (const key in schema.properties) {
+        Validator.checkFunctionsRecursively(schema.properties[key], value[key], path ? `${path}.${key}` : key, `${schemaPath}/properties/${key}`, errors);
+      }
+    }
+
+    if (schema.type === 'array' && Array.isArray(value) && schema.items) {
+      value.forEach((item, index) => {
+        Validator.checkFunctionsRecursively(schema.items, item, `${path}[${index}]`, `${schemaPath}/items`, errors);
+      });
+    } // if (schema.anyOf && Array.isArray(schema.anyOf)) {
+    //   const subErrors = [];
+    //   const valid = schema.anyOf.some((subSchema, idx) => {
+    //     const tmpErrors = [];
+    //     Validator.checkFunctionsRecursively(subSchema, value, path, `${schemaPath}/anyOf/${idx}`, tmpErrors);
+    //     return tmpErrors.length === 0;
+    //   });
+    //   if (!valid) {
+    //     errors.push({ keyword: "anyOf", dataPath: path ? `.${path}` : "", schemaPath: `${schemaPath}/anyOf`, params: {}, message: "should match some schema in anyOf" });
+    //   }
+    //   return;
+    // }
+    // if (schema.allOf && Array.isArray(schema.allOf)) {
+    //   schema.allOf.forEach((subSchema, idx) => {
+    //     Validator.checkFunctionsRecursively(subSchema, value, path, `${schemaPath}/allOf/${idx}`, errors);
+    //   });
+    //   return;
+    // }
+    // if (schema.oneOf && Array.isArray(schema.oneOf)) {
+    //   let matchCount = 0;
+    //   schema.oneOf.forEach((subSchema, idx) => {
+    //     const tmpErrors = [];
+    //     Validator.checkFunctionsRecursively(subSchema, value, path, `${schemaPath}/oneOf/${idx}`, tmpErrors);
+    //     if (tmpErrors.length === 0) matchCount++;
+    //   });
+    //   if (matchCount !== 1) {
+    //     errors.push({ keyword: "oneOf", dataPath: path ? `.${path}` : "", schemaPath: `${schemaPath}/oneOf`, params: {}, message: "should match exactly one schema in oneOf" });
+    //   }
+    //   return;
+    // }
+
+  }
+
   static validatePropsAgainstSchema(schemaProps, props) {
     const warnings = [];
     const errors = [];

package/es/library/custom-component/frameworks/ui/ComponentRegistry.js

@@ -1,9 +1,7 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 class ComponentRegistry {
-  constructor() {
-    _defineProperty(this, "components", new Map());
-  }
+  components = new Map();
+
+  constructor() {}
 
   static getInstance() {
     if (!ComponentRegistry.instance) {
@@ -31,6 +29,4 @@ class ComponentRegistry {
 
 }
 
-_defineProperty(ComponentRegistry, "instance", void 0);
-
 export default ComponentRegistry.getInstance();

package/es/library/custom-component/frameworks/ui/CreateCustomComponent.js

@@ -1,5 +1,3 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { forwardRef } from 'react';
 import DependencyFactory from "./DependencyFactory";
 import Compare from "./Compare";
@@ -19,30 +17,6 @@ const createCustomComponent = input => {
   class Component extends React.Component {
     constructor(props) {
       super(props);
-
-      _defineProperty(this, "controller", void 0);
-
-      _defineProperty(this, "elementRef", void 0);
-
-      _defineProperty(this, "state", void 0);
-
-      _defineProperty(this, "presenter", void 0);
-
-      _defineProperty(this, "eventManager", void 0);
-
-      _defineProperty(this, "View", void 0);
-
-      _defineProperty(this, "helpers", void 0);
-
-      _defineProperty(this, "setRef", element => {
-        const {
-          setElement
-        } = this.eventManager;
-        setElement.bind(this.eventManager)(element);
-        this.eventManager.setElement(element);
-        this.props.getRef && this.props.getRef(element);
-      });
-
       this.state = null;
       let {
         controller,
@@ -105,6 +79,15 @@ const createCustomComponent = input => {
     componentDidUpdate() {// this.controller.updateProperties(this.props);
     }
 
+    setRef = element => {
+      const {
+        setElement
+      } = this.eventManager;
+      setElement.bind(this.eventManager)(element);
+      this.eventManager.setElement(element);
+      this.props.getRef && this.props.getRef(element);
+    };
+
     render() {
       let View = this.View;
       let {

package/es/library/custom-component/frameworks/ui/CreateSlotComponent.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, { Children } from "react";
 import ComponentRegistry from "./ComponentRegistry";
 
@@ -58,9 +60,9 @@ export function generateSlotChildren() {
       }
 
       if (View) {
-        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, _extends({}, finalisedProps, {
           key: `${name}_${elementName}_${index}`
-        }, childProps.children));
+        }), childProps.children));
       }
     });
   });

package/es/library/custom-component/frameworks/ui/CustomComponentFactory.js

@@ -40,7 +40,7 @@ function Component(props) {
   }, [props]);
   const View = /*#__PURE__*/forwardRef(input.View);
 
-  if (state !== null && state !== void 0 && state.error) {
+  if (state?.error) {
     console.log(state.error);
     return /*#__PURE__*/React.createElement("div", null, "error");
   } else {

package/es/library/dot/components/action-location/adapters/gateway/Repository.js

@@ -1,14 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import ActionLocationEntity from "../../entities/ActionLocationEntity";
 export default class Repository {
   constructor() {
-    _defineProperty(this, "element", void 0);
-
-    _defineProperty(this, "dispatch", void 0);
-
-    _defineProperty(this, "state", void 0);
-
     this.element = null;
   }
 

package/es/library/dot/components/action-location/adapters/presenters/Presenter.js

@@ -1,12 +1,4 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class Presenter {
-  constructor() {
-    _defineProperty(this, "updateState", void 0);
-
-    _defineProperty(this, "state", void 0);
-  }
-
   updateDependencies(state, updateState) {
     this.updateState = updateState;
     this.state = state;

package/es/library/dot/components/action-location/entities/ActionLocationEntity.js

@@ -40,18 +40,14 @@ export default class ActionLocationEntity {
   }
 
   listen(eventName) {
-    var _this$element;
-
     const handler = this.createEventHandlers(eventName);
     this.handlers[eventName] = handler;
-    (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.addEventListener(eventName, handler);
+    this.element?.addEventListener(eventName, handler);
   }
 
   unListen(eventName) {
-    var _this$element2;
-
     const handler = this.handlers[eventName];
-    (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.removeEventListener(eventName, handler);
+    this.element?.removeEventListener(eventName, handler);
     this.handlers[eventName] = undefined;
   }
 

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -8,6 +8,7 @@ import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filte
 import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown";
 import Breadcrumb from "../../../../legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb";
 import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui/IconButton";
+import HighlightedValue from "../../../../legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -18,6 +19,7 @@ const ActionComponentMapping = {
   ['TableSelectAll']: Checkbox,
   ['TableColumnFilter']: TableColumnFilter,
   ['Breadcrumb']: Breadcrumb,
-  ['IconButton']: IconButton
+  ['IconButton']: IconButton,
+  ['HighlightedValue']: HighlightedValue
 };
 export default ActionComponentMapping;