@zohodesk/library-platform 1.1.1 → 1.1.2

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
-
-import style from "./css/ActionIcon.module.css";
+import Constants from "../../../../../../cc/action-icon/Constants";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -12,16 +10,13 @@ export default function ActionIconView(_ref, ref) {
     icon,
     label,
     hoverVariant,
-    isDisabled,
-    isVisible
+    isDisabled
   } = state.properties;
   const {
     dispatch
   } = helpers;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
-    className: isVisible ? '' : style.hide
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
@@ -31,80 +26,5 @@ export default function ActionIconView(_ref, ref) {
         type: Constants.ACTION_ICON_CLICKED
       });
     } : null
-  }));
-} // NOTE: This is a sample of Button action component
-
-export function ButtonView(_ref2, ref) {
-  let {
-    state,
-    helpers
-  } = _ref2;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("button", {
-    ref: ref,
-    onClick: () => {
-      dispatch({
-        type: sourceEvent
-      });
-    }
-  }, value);
-} // NOTE: This is a sample of FilterDropdown action component
-
-export function FilterDropdownView(_ref3, ref) {
-  let {
-    state,
-    helpers
-  } = _ref3;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    options,
-    isMultiselectable
-  } = state.properties;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    fieldName: value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("select", {
-    "data-title": '',
-    ref: ref,
-    onChange: e => dispatch({
-      type: sourceEvent,
-      payload: {
-        sourcePayload: {
-          selectedValue: e.target.value
-        }
-      }
-    })
-  }, options.map((option, index) => /*#__PURE__*/React.createElement("option", {
-    key: index,
-    value: option.value
-  }, option.label)));
+  });
 }

package/es/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/Checkbox.js

@@ -1,11 +1,11 @@
 import { createCustomComponent } from "../../../../../custom-component";
-import { CheckboxProperties, CheckboxActions } from "../../../../../../cc";
+import { CheckboxProperties, CheckboxActions } from "../../../../../../cc/checkbox";
 import CheckboxView from "./CheckboxView";
 let Checkbox = createCustomComponent({
   name: "Checkbox",
   View: CheckboxView,
   properties: CheckboxProperties,
-  actions: CheckboxActions,
-  actionHandlers: {}
+  events: CheckboxActions,
+  eventHandlers: {}
 });
 export default Checkbox;

package/es/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/CheckboxView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import CheckBox from "@zohodesk/components/es/CheckBox/CheckBox";
-import { CheckboxConstants } from "../../../../../../cc";
+import { CheckboxConstants } from "../../../../../../cc/checkbox";
 
 function CheckboxView(_ref, ref) {
   let {
@@ -11,7 +11,9 @@ function CheckboxView(_ref, ref) {
     dispatch
   } = helpers;
   let {
+    id,
     checked,
+    required,
     disabled,
     readonly,
     label,
@@ -19,6 +21,7 @@ function CheckboxView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(CheckBox, {
     getContainerRef: ref,
+    id: id,
     checked: checked,
     disabled: disabled,
     isReadOnly: readonly,
@@ -29,6 +32,14 @@ function CheckboxView(_ref, ref) {
       dispatch({
         type: CheckboxConstants.CHECKBOX_TOGGLED
       });
+    } // NOTE: The checkbox is not rendered with input type. So, using the aria atributes.
+    ,
+    customProps: {
+      CheckBoxProps: {
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readonly
+      }
     }
   });
 }

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import DateProperties from "../../../../../../cc/date/Properties";
+import DateEvents from "../../../../../../cc/date/Events";
+import DateView from "./DateView";
+let Date = createCustomComponent({
+  name: "Date",
+  View: DateView,
+  properties: DateProperties,
+  events: DateEvents,
+  eventHandlers: {}
+});
+export default Date;

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

@@ -0,0 +1,56 @@
+import React from "react";
+import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
+import DateConstants from "../../../../../../cc/date/Constants";
+
+function DateView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    pattern,
+    isTimeInculded,
+    timeZone
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(DateWidget, {
+    onFocus: () => dispatch({
+      type: DateConstants.DATE_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: DateConstants.DATE_BLURED
+    }),
+    onSelect: val => dispatch({
+      type: DateConstants.DATE_CHANGED,
+      payload: {
+        value: val
+      }
+    }),
+    getRef: ref,
+    htmlId: id,
+    value: value,
+    isDateTime: isTimeInculded,
+    textBoxSize: "xmedium",
+    timeZone: timeZone,
+    dateFormat: pattern,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    isEditable: true,
+    customProps: {
+      TextBoxProps: {
+        TextBoxProps: {
+          required
+        }
+      }
+    }
+  });
+}
+
+export default DateView;

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

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import LabelProperties from "../../../../../../cc/label/Properties";
+import LabelView from "./LabelView";
+let WrapLabel = createCustomComponent({
+  name: "Label",
+  View: LabelView,
+  properties: LabelProperties,
+  eventHandlers: {}
+});
+export default WrapLabel;

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

@@ -0,0 +1,31 @@
+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 style from "./css/Label.module.css";
+ComponentRegistry.register(`LabelAction`, LabelAction);
+
+function LabelView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    label,
+    for: htmlFor,
+    isMandatory
+  } = state.properties; // const { actions }: LabelProperties = state.properties;
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    type: "subtitle",
+    htmlFor: htmlFor,
+    palette: isMandatory ? 'mandatory' : 'default',
+    customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
+  }));
+}
+
+export default LabelView;

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

@@ -0,0 +1,21 @@
+.label {
+    --label_cursor: inherit;
+    display: inline;
+    vertical-align: middle
+}[dir=ltr] .label {
+    padding-right: var(--zd_size4) 
+}[dir=rtl] .label {
+    padding-left: var(--zd_size4) 
+}
+
+.mandatory::after {
+    content: '*'
+}
+
+[dir=ltr] .mandatory::after {
+    padding-left: var(--zd_size2) 
+}
+
+[dir=rtl] .mandatory::after {
+    padding-right: var(--zd_size2) 
+}

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/sub-components/ui/LabelAction.js

@@ -0,0 +1,9 @@
+import { createCustomComponent } from "../../../../../../../custom-component";
+import ActionLocationProperties from "../../../../../../../../cc/action-location/Properties";
+import LabelActionView from "./LabelActionView";
+export default createCustomComponent({
+  name: 'LabelAction',
+  properties: ActionLocationProperties,
+  eventHandlers: {},
+  View: LabelActionView
+});

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/sub-components/ui/LabelActionView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ComponentRegistry from "../../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../../../../components/action-location/frameworks/ui/ActionComponentMapping"; // @ts-ignore
+
+import style from "./css/LabelAction.module.css";
+
+function LabelActionView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: style.container
+  }, actions.map((action, index) => {
+    const {
+      type,
+      properties,
+      eventMappings
+    } = action;
+    const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(ActionUiType, {
+      key: index,
+      ...properties,
+      appendToActionPayload: {
+        eventMappings
+      }
+    });
+  }));
+}
+
+;
+export default LabelActionView;

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

@@ -0,0 +1,4 @@
+.container {
+    vertical-align: middle;
+    gap: var(--zd_size4) 
+}

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

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { MultiSelectProperties, MultiSelectEvents } from "../../../../../../cc/multi-select";
+import MultiSelectView from "./MultiSelectView";
+const MultiSelect = createCustomComponent({
+  name: "MultiSelect",
+  View: MultiSelectView,
+  properties: MultiSelectProperties,
+  events: MultiSelectEvents,
+  eventHandlers: {}
+});
+export default MultiSelect;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
+import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+
+function MultiSelectView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    id,
+    options,
+    value,
+    placeholder,
+    hasSelectAll,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(MultiSelect, {
+    getRef: ref,
+    options: options,
+    selectedOptions: value,
+    htmlId: id,
+    placeHolder: placeholder,
+    isDisabled: disabled,
+    isReadOnly: readonly,
+    textField: "value",
+    valueField: "value",
+    needSelectAll: hasSelectAll,
+    size: "xmedium",
+    textBoxSize: "xmedium",
+    customProps: {
+      TextBoxIconProps: {
+        required
+      }
+    },
+    selectAllText: "Select All",
+    emptyMessage: "No options to select",
+    searchEmptyMessage: "No Results Found",
+    onChange: selectedValues => {
+      dispatch({
+        type: MultiSelectConstants.MULTISELECT_CHANGED,
+        payload: {
+          value: selectedValues
+        }
+      });
+    }
+  });
+}
+
+export default MultiSelectView;

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import SelectProperties from "../../../../../../cc/select/Properties";
+import SelectEvents from "../../../../../../cc/select/Events";
+import SelectView from "./SelectView";
+let Select = createCustomComponent({
+  name: "Select",
+  View: SelectView,
+  properties: SelectProperties,
+  events: SelectEvents,
+  eventHandlers: {}
+});
+export default Select;

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

@@ -0,0 +1,59 @@
+import React from "react";
+import Select from '@zohodesk/components/es/Select/Select';
+import SelectConstants from "../../../../../../cc/select/Constants";
+
+function SelectView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    options,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  const transformedOptions = options.map(option => ({
+    id: option.value,
+    text: option.value
+  }));
+  return /*#__PURE__*/React.createElement(Select, {
+    getRef: ref,
+    options: transformedOptions,
+    onChange: value => dispatch({
+      type: SelectConstants.SELECT_CHANGED,
+      payload: {
+        value
+      }
+    }),
+    selectedValue: value,
+    i18nKeys: {
+      TextBox_ally_label: ''
+    },
+    textBoxSize: "xmedium",
+    htmlId: id,
+    placeHolder: placeholder,
+    isDisabled: disabled,
+    isReadOnly: readonly,
+    customProps: {
+      TextBoxProps: {
+        role: 'combobox',
+        required
+      }
+    } // HACK: The select is not rendered with "combobox" role.
+    ,
+    needSearch: transformedOptions.length > 4,
+    isDefaultSelectValue: false,
+    searchBoxPlaceHolder: "Search",
+    emptyMessage: "No Options Available",
+    searchEmptyMessage: "No Results Found"
+  });
+}
+
+export default SelectView;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import TableColumnFilterProperties from "../../../../../../cc/table-column-filter/Properties";
+import TableColumnFilterEvents from "../../../../../../cc/table-column-filter/Events";
+import TableColumnFilterView from "./TableColumnFilterView";
+const TableColumnFilter = createCustomComponent({
+  name: 'TableColumnFilter',
+  View: TableColumnFilterView,
+  properties: TableColumnFilterProperties,
+  events: TableColumnFilterEvents,
+  eventHandlers: {}
+});
+export default TableColumnFilter;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import SingleSelectFilter from '@zohodesk-private/desk-components/es/SingleSelectFilter/SingleSelectFilter';
+import MultiSelectFilter from '@zohodesk-private/desk-components/es/MultiSelectFilter/MultiSelectFilter';
+import { TableColumnFilterConstants } from "../../../../../../cc/table-column-filter"; // @ts-ignore
+
+import style from "./css/TableColumnFilter.module.css";
+
+function TableColumnFilterView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    isMultiSelect,
+    options,
+    selectedOptions,
+    heading,
+    hasSearch,
+    searchPlaceholder,
+    hasClearButton,
+    isClearButtonDisabled,
+    clearFilterLabel,
+    optionTagLabel,
+    taggedOption
+  } = state.properties;
+
+  const handleFilter = (_ref2, e) => {
+    let {
+      id,
+      value
+    } = _ref2;
+    dispatch({
+      type: TableColumnFilterConstants.FILTER_OPTION_CLICKED,
+      payload: {
+        id,
+        value
+      }
+    });
+  };
+
+  const handleClear = () => {
+    dispatch({
+      type: TableColumnFilterConstants.FILTER_CLEARED
+    });
+  };
+
+  const handleSearch = searchText => {
+    dispatch({
+      type: TableColumnFilterConstants.FILTER_SEARCHED,
+      payload: {
+        searchText
+      }
+    });
+  }; // For SingleSelectFilter, pass selectedOption (object)
+  // For MultiSelectFilter, pass selectedOptions (array)
+
+
+  const commonProps = {
+    customProps: {
+      filterDropdownProps: {
+        customProps: {
+          dropdownProps: {
+            $tagAttributes_container: {
+              ref: ref
+            },
+            $customProps_dropbox: {
+              customClass: {
+                customDropBoxWrap: style.filterDropbox
+              }
+            },
+            customStyle: {
+              container: `${style.container} ${(isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0) ? style.active : ''}`
+            }
+          }
+        }
+      }
+    },
+    dropdownHeading: heading,
+    options,
+    hasSearch,
+    searchPlaceholder,
+    hasClearButton,
+    isClearButtonDisabled,
+    clearFilterLabel,
+    optionTagLabel,
+    taggedOption,
+    onFilter: handleFilter,
+    onClear: handleClear,
+    onSearch: handleSearch
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMultiSelect ? /*#__PURE__*/React.createElement(MultiSelectFilter, { ...commonProps,
+    selectedOptions: selectedOptions
+  }) : /*#__PURE__*/React.createElement(SingleSelectFilter, { ...commonProps,
+    selectedOption: selectedOptions
+  }));
+}
+
+export default TableColumnFilterView;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/css/TableColumnFilter.module.css

@@ -0,0 +1,15 @@
+.container {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:global(.GLOBAL_ZDDC_tableHead:hover) .container,
+:global(.GLOBAL_ZDDC_tableHead):has(.filterDropbox) .container,
+.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+.filterDropbox {
+  /* ** */
+}

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TableColumnSortProperties } from "../../../../../../cc/table-column-sort";
+import TableColumnSortView from "./TableColumnSortView";
+const TableColumnSort = createCustomComponent({
+  name: 'TableColumnSort',
+  View: TableColumnSortView,
+  properties: TableColumnSortProperties,
+  events: [],
+  eventHandlers: {}
+});
+export default TableColumnSort;