@zohodesk/library-platform 1.1.9 → 1.1.10

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/actions-renderer/frameworks/ui/ActionsRendererView.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 ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 import ActionComponentMapping from "../../../action-location/frameworks/ui/ActionComponentMapping";
@@ -23,13 +25,13 @@ function ActionsRendererView(_ref, ref) {
     /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
 
     const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
-    return /*#__PURE__*/React.createElement(ActionUiType, {
-      key: index,
-      ...properties,
+    return /*#__PURE__*/React.createElement(ActionUiType, _extends({
+      key: index
+    }, properties, {
       appendToActionPayload: {
         eventMappings
       }
-    });
+    }));
   }));
 }
 

package/es/library/dot/components/form/frameworks/ui/DefaultComponentRegister.js

@@ -1,6 +1,6 @@
 import { DefaultFormSectionUIType } from "../../../../../../cc/fields/field/FormDefaultUIType";
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
+import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox, LookUp } from "../../../form-fields";
 import Section from "../../../section/frameworks/ui/Section";
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
@@ -20,5 +20,6 @@ export function registerDefaultComponents() {
   ComponentRegistry.register('Date', Date);
   ComponentRegistry.register('DateTime', DateTime);
   ComponentRegistry.register('Checkbox', Checkbox);
+  ComponentRegistry.register('LookUp', LookUp);
   ComponentRegistry.register(DefaultFormSectionUIType, Section);
 }

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -20,10 +20,12 @@ function FormView(_ref, ref) {
     isFooterEnabled
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
-    $ui_tagName: "form",
     $ui_displayMode: "flex",
     $ui_direction: "column",
     $flag_fullsize: true,
+    $a11y_attributes: {
+      role: 'form'
+    },
     ref: ref
   }, /*#__PURE__*/React.createElement(Header, {
     hasHeader: isHeaderEnabled,

package/es/library/dot/components/form/frameworks/ui/__test__/Form.test.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 { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -24,8 +26,7 @@ describe('Form Sections', () => {
   test('Sections are vertically aligned', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(getByText('Address Information')).toBeInTheDocument();
   });
@@ -42,24 +43,21 @@ describe('Form Sections', () => {
     const {
       getByText,
       queryByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...singleSectionProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, singleSectionProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(queryByText('Address Information')).not.toBeInTheDocument();
   });
   test('Multiple sections in a layout', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(getByText('Address Information')).toBeInTheDocument();
   });
   test('Maintain section order during rendering', () => {
     const {
       getAllByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -68,8 +66,7 @@ describe('Form Sections', () => {
     const {
       getAllByText,
       rerender
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -94,8 +91,7 @@ describe('Form Sections', () => {
         isVisible: true
       }]
     };
-    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
-    }));
+    rerender( /*#__PURE__*/React.createElement(Form, updatedProperties));
     const updatedSections = getAllByText(/Details|Summary|Information/);
     expect(updatedSections[0]).toHaveTextContent('User Details');
     expect(updatedSections[1]).toHaveTextContent('Order Summary');
@@ -107,8 +103,7 @@ describe('Form Sections', () => {
       getByText,
       queryByText,
       rerender
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -121,8 +116,7 @@ describe('Form Sections', () => {
         isVisible: true
       }]
     };
-    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
-    }));
+    rerender( /*#__PURE__*/React.createElement(Form, updatedProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(queryByText('Address Information')).not.toBeInTheDocument();
   }); // Loading tests
@@ -130,17 +124,17 @@ describe('Form Sections', () => {
   test('Display loading indicator during form loading', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+    } = render( /*#__PURE__*/React.createElement(Form, _extends({}, formProperties, {
       isLoading: true
-    }));
+    })));
     expect(getByText('Loading...')).toBeInTheDocument();
   });
   test('No loading indicator when form is not loading', () => {
     const {
       queryByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+    } = render( /*#__PURE__*/React.createElement(Form, _extends({}, formProperties, {
       isLoading: false
-    }));
+    })));
     expect(queryByText('Loading...')).not.toBeInTheDocument();
   });
 });

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -15,9 +15,6 @@
     max-width: 100% ;
     gap: var(--zd_size8) 
 }
-.checkboxWrapper {
-    margin-top: var(--zd_size3) 
-}
 
 .cursor_pointer {
     cursor: pointer

package/es/library/dot/components/form/frameworks/ui/sub-components/SectionsWithRightPanelLayout.js

@@ -25,8 +25,7 @@ export default function SectionsWithRightPanelLayout(_ref) {
   }, children), /*#__PURE__*/React.createElement(Flex, {
     $flag_shrink: false,
     $ui_className: style.rightPanel
-  }, /*#__PURE__*/React.createElement(RightPanelComponent, { ...properties
-  })));
+  }, /*#__PURE__*/React.createElement(RightPanelComponent, properties)));
 }
 
 function updateRightPanelHeight(ref) {

package/es/library/dot/components/form-fields/checkbox/adapters/presenter/TransformState.js

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -64,15 +64,13 @@ function CheckboxView(_ref2, ref) {
         type: CheckboxConstants.CHECKBOX_TOGGLED
       })
     } : undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.checkboxWrapper
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: id,
     checked: value,
     required: required,
     disabled: disabled,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(Label, {
+  }), /*#__PURE__*/React.createElement(Label, {
     for: id,
     label: label,
     actions: labelActions,

package/es/library/dot/components/form-fields/currency/adapters/presenter/TransformState.js

@@ -0,0 +1,81 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+function isValidInteger() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const rejexPattern = new RegExp('^(\\d+\\.?\\d*|\\.\\d+)$');
+  const isValidInt = rejexPattern.test(value);
+  return isValidInt;
+}
+
+function formatCurrency(amount) {
+  let symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let currencyLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'US';
+  const isFormatNeeded = typeof amount === 'string' && amount.match(/(e|E)/) != null;
+  let number = isFormatNeeded ? Number(amount) : amount;
+  const isValidInt = isValidInteger(number);
+
+  if (isValidInt && symbol) {
+    number = number.toString();
+    const currencyArr = new Intl.NumberFormat(`en-${currencyLocale}`).formatToParts(number);
+    let currencyVal = '';
+    currencyArr.map(val => {
+      if (val.type == 'group') {
+        currencyVal += ',';
+      } else if (val.type == 'integer') {
+        currencyVal += val.value;
+      }
+    });
+
+    if (number.indexOf('.') != -1) {
+      const fractionVal = number.split(".")[1];
+
+      for (let i = fractionVal.length - 1; i >= 0; i--) {
+        if (fractionVal[i] != 0) {
+          currencyVal += `.${fractionVal.slice(0, i + 1)}`;
+          break;
+        }
+      }
+    }
+
+    return `${symbol}${currencyVal}`;
+  }
+
+  return number || amount;
+}
+
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip,
+    value,
+    currencySymbol,
+    currencyLocale
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  const formattedValue = formatCurrency(value, currencySymbol, currencyLocale);
+  return { ...state,
+    formattedValue,
+    properties: { ...state.properties,
+      actions,
+      value
+    }
+  };
+}

package/es/library/dot/components/form-fields/currency/frameworks/ui/CurrencyView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
-import FieldItem from "../../../field/FieldItem"; // @ts-ignore
+import FieldItem from "../../../field/FieldItem";
+import { formatCurrency } from "../../../../../../translator-common"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -8,6 +9,10 @@ function CurrencyView(_ref, ref) {
   let {
     state
   } = _ref;
+  const {
+    isFocused,
+    properties
+  } = state;
   const {
     id,
     label,
@@ -17,14 +22,21 @@ function CurrencyView(_ref, ref) {
     disabled,
     readonly,
     required,
+    currencyLocale,
+    currencySymbol,
     labelActions,
     actions,
     uiConfig
-  } = state.properties;
+  } = properties;
   const {
     size,
     breakRow
   } = uiConfig;
+  const formattedValue = isFocused ? value : formatCurrency({
+    value,
+    symbol: currencySymbol,
+    locale: currencyLocale
+  });
   return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
     id: id,
@@ -39,7 +51,7 @@ function CurrencyView(_ref, ref) {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
-    value: value,
+    value: formattedValue,
     placeholder: placeholder,
     disabled: disabled,
     readonly: readonly,

package/es/library/dot/components/form-fields/currency/frameworks/ui/EventHandlerFactory.js

@@ -13,8 +13,12 @@ class EventHandlersFactory {
   static handleTextBoxFocused(_ref) {
     let {
       state,
+      updateState,
       dispatch
     } = _ref;
+    updateState({ ...state,
+      isFocused: true
+    });
     const {
       name
     } = state.properties;
@@ -30,8 +34,12 @@ class EventHandlersFactory {
   static handleTextBoxBlurred(_ref2) {
     let {
       state,
+      updateState,
       dispatch
     } = _ref2;
+    updateState({ ...state,
+      isFocused: false
+    });
     const {
       name
     } = state.properties;