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

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
-import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -14,22 +13,29 @@ function TextBoxView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
+    required,
+    uiConfig,
+    labelActions,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_textbox",
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
-    className: style.fieldWrapper
-  }, /*#__PURE__*/React.createElement(Label, {
-    for: id,
+    id: id,
     label: label,
-    actions: actions,
-    isMandatory: required
-  }), /*#__PURE__*/React.createElement("div", {
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_textbox",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function TextBoxView(_ref, ref) {
     value: value,
     required: required,
     disabled: disabled,
-    readonly: readonly
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    readonly: readonly,
+    actions: actions
+  })));
 }
 
 export default TextBoxView;

package/es/library/dot/components/form-fields/url/frameworks/ui/Url.js

@@ -1,14 +1,13 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import UrlProperties from "../../../../../../../cc/fields/url/Properties";
 import UrlView from "./UrlView";
-import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 let Url = createCustomComponent({
   name: 'FormUrlField',
   View: UrlView,
-  transformState: TransformState,
   properties: UrlProperties,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  behaviours: [FocusFieldBehaviourFactory.create()]
 });
 export default Url;

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
-import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -14,22 +13,29 @@ function UrlView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
+    uiConfig,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_url",
+    required,
+    labelActions,
+    actions
+  } = state.properties;
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
-    className: style.fieldWrapper
-  }, /*#__PURE__*/React.createElement(Label, {
-    for: id,
+    id: id,
     label: label,
-    actions: actions,
-    isMandatory: required
-  }), /*#__PURE__*/React.createElement("div", {
+    labelActions: labelActions,
+    required: required,
+    size: size,
+    breakRow: breakRow,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_url"
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function UrlView(_ref, ref) {
     value: value,
     disabled: disabled,
     readonly: readonly,
-    required: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    required: required,
+    actions: actions
+  })));
 }
 
 export default UrlView;

package/es/library/dot/components/section/frameworks/ui/RenderField.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";
 export function renderField(field, key) {
@@ -12,8 +14,7 @@ export function renderField(field, key) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Component, {
-    key: key,
-    ...properties
-  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    key: key
+  }, properties));
 }

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowClickController.js

@@ -15,7 +15,7 @@ class KeyboardRowClickController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowSelectController.js

@@ -11,7 +11,7 @@ class KeyboardRowSelectController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -22,7 +22,7 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = sortBy?.name === header.name ? sortBy?.order : 'none';
       return { ...header,
         sortOrder
       };

package/es/library/dot/components/table-list/frameworks/ui/sub-components/ErrorState.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
-// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
-// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/es/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/es/version2/errorstate/Inconvenience/Inconvenience';
 
 /* @ts-ignore */
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Rows.js

@@ -1,8 +1,9 @@
+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 Row from "./row/Row";
 import { SortableElement } from 'react-sortable-hoc';
-const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
-}));
+const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, props));
 
 const Rows = _ref => {
   let {
@@ -21,12 +22,11 @@ const Rows = _ref => {
   return rows.map((row, index) => {
     const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
     const dropPosition = dropIndicator.position;
-    return /*#__PURE__*/React.createElement(SortableRow, {
+    return /*#__PURE__*/React.createElement(SortableRow, _extends({
       key: `${row.id}`,
       index: index,
-      disabled: isReOrderLoading,
-      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)
-    });
+      disabled: isReOrderLoading
+    }, getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)));
   });
 };
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/field/FieldComponent.js

@@ -16,8 +16,7 @@ const FieldComponent = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Component, { ...fieldProps
-  });
+  return /*#__PURE__*/React.createElement(Component, fieldProps);
 };
 
 export default FieldComponent;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/HeaderData.js

@@ -26,7 +26,7 @@ function HeaderData(_ref) {
     alignment,
     actions
   } = header;
-  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
+  const hasActions = Boolean(actions?.length);
   return (
     /*#__PURE__*/
     // @ts-ignore

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/RowData.js

@@ -18,7 +18,7 @@ export default function RowData(_ref) {
     actions,
     ...props
   } = field;
-  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
+  const hasActions = Boolean(actions?.length);
   return /*#__PURE__*/React.createElement(TableData, {
     $ui_align: hasActions ? null : alignment,
     $data_width: width,

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -26,7 +26,7 @@ export default function ActionIconView(_ref, ref) {
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
-    hasPadding: hasPadding,
+    $flag_hasPadding: hasPadding,
     customStyle: hoverVariant === 'default' ? {
       icon: style.cursor_default
     } : undefined,

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/DateView.js

@@ -1,6 +1,9 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import DateConstants from "../../../../../../cc/date/Constants";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator"; // @ts-ignore
+
+import style from "./css/DateView.module.css";
 
 function DateView(_ref, ref) {
   let {
@@ -18,8 +21,19 @@ function DateView(_ref, ref) {
     readonly,
     pattern,
     isTimeInculded,
-    timeZone
+    timeZone,
+    actions
   } = state.properties;
+
+  const renderRightFieldActions = () => {
+    if (!actions?.length) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(DateWidget, {
     onFocus: () => dispatch({
       type: DateConstants.DATE_FOCUSED
@@ -48,6 +62,9 @@ function DateView(_ref, ref) {
         TextBoxProps: {
           required
         }
+      },
+      TextBoxIconProps: {
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
     }
   });

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/css/DateView.module.css

@@ -0,0 +1,3 @@
+.actionContainer {
+    margin-top: var(--zd_size2) ;
+}

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValueView.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StatusBox from "@zohodesk-private/desk-components/es/table/StatusBox/StatusBox";
 import { HighlightedValueConstants } from "../../../../../../cc";
+import style from "./css/HighlightedValue.module.css";
 
 function HighlightedValueView(_ref, ref) {
   let {
@@ -13,7 +14,8 @@ function HighlightedValueView(_ref, ref) {
   let {
     text,
     color,
-    tooltip
+    tooltip,
+    cursor
   } = state.properties;
   return /*#__PURE__*/React.createElement(StatusBox, {
     $customProps_container: {
@@ -22,6 +24,9 @@ function HighlightedValueView(_ref, ref) {
     $ui_color: color,
     $i18n_text: text,
     $i18n_tooltip: tooltip,
+    customStyle: {
+      pointer: cursor === "default" && style.default
+    },
     $event_onClick: () => {
       dispatch({
         type: HighlightedValueConstants.HIGHLIGHTED_VALUE_CLICKED

package/es/library/dot/{components/form-fields/ephi-tag/frameworks/ui/css/EPHITag.module.css → legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css}

@@ -1,3 +1,3 @@
-.tag {
+.default {
     cursor: default
 }

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/LabelView.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import Label from '@zohodesk/components/es/Label/Label'; // import ActionLocation from '@library/dot/components/action-location/frameworks/ui/ActionLocation';
-
-import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import LabelAction from "./sub-components/ui/LabelAction"; // @ts-ignore
-
+import Label from '@zohodesk/components/es/Label/Label';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+// @ts-ignore
 import style from "./css/Label.module.css";
-ComponentRegistry.register(`LabelAction`, LabelAction);
 
 function LabelView(_ref, ref) {
   let {
@@ -14,18 +13,23 @@ function LabelView(_ref, ref) {
   let {
     label,
     for: htmlFor,
-    isMandatory
-  } = state.properties; // const { actions }: LabelProperties = state.properties;
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
+    isMandatory,
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center"
   }, /*#__PURE__*/React.createElement(Label, {
     text: label,
     type: "subtitle",
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }));
+  }), actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions,
+    gap: ActionViewGap.XMEDIUM
+  }) : null);
 }
 
 export default LabelView;

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/css/Label.module.css

@@ -1,11 +1,9 @@
 .label {
-    --label_cursor: inherit;
-    display: inline;
-    vertical-align: middle
+    --label_cursor: inherit
 }[dir=ltr] .label {
-    padding-right: var(--zd_size4) 
+    padding-right: var(--zd_size6) 
 }[dir=rtl] .label {
-    padding-left: var(--zd_size4) 
+    padding-left: var(--zd_size6) 
 }
 
 .mandatory::after {

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelectView.js

@@ -1,6 +1,9 @@
 import React from "react";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
-import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+import { MultiSelectConstants } from "../../../../../../cc/multi-select"; // @ts-ignore
+
+import style from "./css/MultiSelectView.module.css";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -18,8 +21,19 @@ function MultiSelectView(_ref, ref) {
     hasSelectAll,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
+
+  const renderRightFieldActions = () => {
+    if (!actions?.length) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(MultiSelect, {
     getRef: ref,
     options: options,
@@ -35,12 +49,18 @@ function MultiSelectView(_ref, ref) {
     textBoxSize: "xmedium",
     customProps: {
       TextBoxIconProps: {
-        required
+        customClass: {
+          customTBoxWrap: style.custmInputWrapper,
+          customTBoxIcon: style.clearIconContainer
+        },
+        'aria-required': required,
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
     },
     selectAllText: "Select All",
     emptyMessage: "No options to select",
     searchEmptyMessage: "No Results Found",
+    customChildrenClass: `${actions?.length >= 2 ? style[`paddingRight${actions.length === 2 ? 64 : 96}`] : ''}`,
     onChange: selectedValues => {
       dispatch({
         type: MultiSelectConstants.MULTISELECT_CHANGED,

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -0,0 +1,37 @@
+.actionContainer {
+    margin-top: var(--zd_size4) ;
+}
+
+.custmInputWrapper {
+    position: absolute;
+    top: 0 ;
+    width: 100% ;
+}
+
+[dir=ltr] .custmInputWrapper {
+    left: 0 ;
+}
+
+[dir=rtl] .custmInputWrapper {
+    right: 0 ;
+}
+
+.clearIconContainer {
+    --textboxicon_icon_margin: 0;
+}
+
+[dir=ltr] .paddingRight64 {
+    padding-right: var(--zd_size64) ;
+}
+
+[dir=rtl] .paddingRight64 {
+    padding-left: var(--zd_size64) ;
+}
+
+[dir=ltr] .paddingRight96 {
+    padding-right: var(--zd_size96) ;
+}
+
+[dir=rtl] .paddingRight96 {
+    padding-left: var(--zd_size96) ;
+}

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 
 function SelectView(_ref, ref) {
   let {
@@ -17,12 +18,20 @@ function SelectView(_ref, ref) {
     placeholder,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
   const transformedOptions = options.map(option => ({
     id: option.value,
     text: option.value
   }));
+
+  const renderRightFieldActions = () => {
+    return actions?.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }) : null;
+  };
+
   return /*#__PURE__*/React.createElement(Select, {
     getRef: ref,
     options: transformedOptions,
@@ -44,10 +53,13 @@ function SelectView(_ref, ref) {
     customProps: {
       TextBoxProps: {
         role: 'combobox',
-        required
+        'aria-required': required
+      },
+      // HACK: The select is not rendered with "combobox" role.
+      TextBoxIconProps: {
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
-    } // HACK: The select is not rendered with "combobox" role.
-    ,
+    },
     needSearch: transformedOptions.length > 4,
     isDefaultSelectValue: false,
     searchBoxPlaceHolder: "Search",

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.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 SingleSelectFilter from '@zohodesk-private/desk-components/es/SingleSelectFilter/SingleSelectFilter';
 import MultiSelectFilter from '@zohodesk-private/desk-components/es/MultiSelectFilter/MultiSelectFilter';
@@ -95,11 +97,11 @@ function TableColumnFilterView(_ref, ref) {
     onClear: handleClear,
     onSearch: handleSearch
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMultiSelect ? /*#__PURE__*/React.createElement(MultiSelectFilter, { ...commonProps,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMultiSelect ? /*#__PURE__*/React.createElement(MultiSelectFilter, _extends({}, commonProps, {
     selectedOptions: selectedOptions
-  }) : /*#__PURE__*/React.createElement(SingleSelectFilter, { ...commonProps,
+  })) : /*#__PURE__*/React.createElement(SingleSelectFilter, _extends({}, commonProps, {
     selectedOption: selectedOptions
-  }));
+  })));
 }
 
 export default TableColumnFilterView;

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -1,6 +1,9 @@
 import React from "react";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
-import TextAreaConstants from "../../../../../../cc/textarea/Constants";
+import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
+
+import style from "./css/TextAreaView.module.css";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -17,9 +20,10 @@ function TextAreaView(_ref, ref) {
     value,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement(Textarea, {
+  const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
     htmlId: id,
     maxLength: maxLength,
@@ -29,8 +33,9 @@ function TextAreaView(_ref, ref) {
     isDisabled: disabled,
     animated: !readonly && !disabled,
     size: "xsmall",
+    resize: "vertical",
     customAttributes: {
-      required
+      'aria-required': required
     },
     onFocus: () => dispatch({
       type: TextAreaConstants.TEXTAREA_FOCUSED
@@ -45,8 +50,21 @@ function TextAreaView(_ref, ref) {
           value
         }
       });
-    }
+    },
+    customClass: `${actions?.length ? style[`paddingRight${actions.length === 1 ? 32 : actions.length === 2 ? 64 : 96}`] : ''}`
   });
+
+  if (!actions?.length) {
+    return textAreaRenderer;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.hasChildren
+  }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
+    className: style.rightPlaceholder
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions
+  })));
 }
 
 export default TextAreaView;