@zohodesk/library-platform 1.1.11 → 1.1.12-exp.1

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

@@ -22,6 +22,7 @@ function TableColumnFilterView(_ref, ref) {
     heading,
     hasSearch,
     searchPlaceholder,
+    hasClearButton,
     clearFilterLabel,
     optionTagLabel,
     taggedOption
@@ -86,7 +87,7 @@ function TableColumnFilterView(_ref, ref) {
     options,
     hasSearch,
     searchPlaceholder,
-    hasClearButton: true,
+    hasClearButton,
     isClearButtonDisabled: !isFiltered,
     clearFilterLabel,
     optionTagLabel,

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/CheckboxField.js

@@ -1,12 +1,22 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
+import CheckboxProperties from "../../../../../../../cc/checkbox/Properties";
 import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
 import CheckboxFieldView from "./CheckboxFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
 const CheckboxField = createCustomComponent({
   name: 'CheckboxField',
   View: CheckboxFieldView,
-  properties: BooleanProperties,
+  properties: { ...CheckboxProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
   events: BooleanEvents,
   eventHandlers: EventHandlersFactory.create()
 });

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/CheckboxFieldView.js

@@ -5,14 +5,17 @@ export default function CheckboxFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    checked,
+    disabled,
+    readonly,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Checkbox, {
     getRef: ref,
-    checked: value,
-    disabled: false,
-    readonly: false,
+    checked: checked,
+    disabled: disabled,
+    readonly: readonly,
     label: "",
-    tooltip: ""
+    tooltip: tooltip
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/EventHandlersFactory.js

@@ -8,10 +8,10 @@ export class EventHandlersFactory {
         dispatch
       } = input;
       const {
-        name: fieldName,
-        value: currentValue
+        fieldName,
+        checked
       } = state.properties;
-      const toggledValue = !currentValue;
+      const toggledValue = !checked;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {

package/es/library/dot/legacy-to-new-arch/table-field-components/email-field/frameworks/ui/EmailField.js

@@ -1,12 +1,12 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import EmailProperties from "../../../../../../../cc/fields/email/Properties";
-import EmailEvents from "../../../../../../../cc/fields/email/Events";
+import EmailProperties from "../../../../../../../cc/email/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
 import { EmailFieldView } from "./EmailFieldView";
 const EmailField = createCustomComponent({
   name: 'EmailField',
   View: EmailFieldView,
   properties: EmailProperties,
-  events: EmailEvents,
+  events: FieldEvents,
   eventHandlers: {}
 });
 export default EmailField;

package/es/library/dot/legacy-to-new-arch/table-field-components/email-field/frameworks/ui/EmailFieldView.js

@@ -5,14 +5,16 @@ export function EmailFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value,
-    textOverflowMode,
-    isRead
+    email,
+    isDotted,
+    weight,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Email, {
     getRef: ref,
-    email: value,
-    isDotted: textOverflowMode === 'clip',
-    weight: isRead ? undefined : 'bold'
+    email: email,
+    isDotted: isDotted,
+    weight: weight,
+    tooltip: tooltip
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import HighlightedValueConstants from "../../../../../../../cc/highlighted-value/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [HighlightedValueConstants.HIGHLIGHTED_VALUE_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import HighlightedValueProperties from "../../../../../../../cc/highlighted-value/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import HighlightedValueFieldView from "./HighlightedValueFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const HighlightedValueField = createCustomComponent({
+  name: 'HighlightedValueField',
+  View: HighlightedValueFieldView,
+  properties: { ...HighlightedValueProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default HighlightedValueField;

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueFieldView.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import HighlightedValue from "../../../../highlighted-value/frameworks/ui/HighlightedValue";
+export default function HighlightedValueFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    text,
+    color,
+    tooltip,
+    weight,
+    isDotted,
+    cursor
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(HighlightedValue, {
+    getRef: ref,
+    text: text,
+    color: color,
+    tooltip: tooltip,
+    cursor: cursor,
+    weight: weight,
+    isDotted: isDotted
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/index.js

@@ -1,7 +1,6 @@
 import FieldTypes from "../../../../cc/fields/field/Types";
 import PrimaryField from "./primary-field/frameworks/ui/PrimaryField";
 import CheckboxField from "./checkbox-field/frameworks/ui/CheckboxField";
-import SwitchField from "./switch-field/frameworks/ui/SwitchField";
 import SingleLineField from "./singleline-field/frameworks/ui/SingleLineField";
 import EmailField from "./email-field/frameworks/ui/EmailField";
 import UrlField from "./url-field/frameworks/ui/UrlField";
@@ -17,11 +16,18 @@ import DateTimeField from "./datetime-field/frameworks/ui/DateTimeField";
 import NumberField from "./number-field/frameworks/ui/NumberField";
 import DecimalField from "./decimal-field/frameworks/ui/DecimalField";
 import MultiSelectField from "./multiselect-field/frameworks/ui/MultiSelectField";
+import TextField from "./text-field/frameworks/ui/TextField";
+import SwitchField from "./switch-field/frameworks/ui/SwitchField";
+import LinkField from "./link-field/frameworks/ui/LinkField";
+import TagField from "./tag-field/frameworks/ui/TagField";
+import TagsField from "./tags-field/frameworks/ui/TagsField";
+import TagsListDropdownField from "./tags-list-dropdown-field/frameworks/ui/TagsListDropdownField";
+import RadioDropdownField from "./radio-dropdown-field/frameworks/ui/RadioDropdownField";
+import LabeledAvatarField from "./labeled-avatar-field/frameworks/ui/LabeledAvatarField";
+import HighlightedValueField from "./highlighted-value-field/frameworks/ui/HighlightedValueField";
 const FieldComponents = {
+  // Default Field Variants
   [FieldTypes.PrimaryField]: PrimaryField,
-  [FieldTypes.CheckboxField]: CheckboxField,
-  [FieldTypes.SwitchField]: SwitchField,
-  // TODO: Need to register SwitchField
   [FieldTypes.SingleLineField]: SingleLineField,
   [FieldTypes.EmailField]: EmailField,
   [FieldTypes.URLField]: UrlField,
@@ -36,6 +42,17 @@ const FieldComponents = {
   [FieldTypes.DateTimeField]: DateTimeField,
   [FieldTypes.NumberField]: NumberField,
   [FieldTypes.DecimalField]: DecimalField,
-  [FieldTypes.MultiSelectField]: MultiSelectField
+  [FieldTypes.MultiSelectField]: MultiSelectField,
+  // Custom Field Variants
+  [FieldTypes.TextField]: TextField,
+  [FieldTypes.CheckboxField]: CheckboxField,
+  [FieldTypes.SwitchField]: SwitchField,
+  [FieldTypes.LinkField]: LinkField,
+  [FieldTypes.TagField]: TagField,
+  [FieldTypes.TagsField]: TagsField,
+  [FieldTypes.TagsListDropdownField]: TagsListDropdownField,
+  [FieldTypes.RadioDropdownField]: RadioDropdownField,
+  [FieldTypes.LabeledAvatarField]: LabeledAvatarField,
+  [FieldTypes.HighlightedValueField]: HighlightedValueField
 };
 export default FieldComponents;

package/es/library/dot/legacy-to-new-arch/table-field-components/labeled-avatar-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import AvatarConstants from "../../../../../../../cc/avatar/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [AvatarConstants.AVATAR_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/labeled-avatar-field/frameworks/ui/LabeledAvatarField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import AvatarProperties from "../../../../../../../cc/avatar/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import LabeledAvatarFieldView from "./LabeledAvatarFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const LabeledAvatarField = createCustomComponent({
+  name: 'LabeledAvatarField',
+  View: LabeledAvatarFieldView,
+  properties: { ...AvatarProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default LabeledAvatarField;

package/es/library/dot/legacy-to-new-arch/table-field-components/labeled-avatar-field/frameworks/ui/LabeledAvatarFieldView.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Avatar } from "../../../..";
+export default function LabeledAvatarFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    name,
+    imageSrc,
+    size,
+    label,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Avatar, {
+    getRef: ref,
+    name: name,
+    imageSrc: imageSrc,
+    size: size,
+    label: label,
+    tooltip: tooltip
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/link-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import LinkConstants from "../../../../../../../cc/link/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [LinkConstants.LINK_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/link-field/frameworks/ui/LinkField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import LinkProperties from "../../../../../../../cc/link/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import LinkFieldView from "./LinkFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const LinkField = createCustomComponent({
+  name: 'LinkField',
+  View: LinkFieldView,
+  properties: { ...LinkProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default LinkField;

package/es/library/dot/legacy-to-new-arch/table-field-components/link-field/frameworks/ui/LinkFieldView.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from "../../../../link/frameworks/ui/Link";
+export default function LinkFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    text,
+    variant,
+    isDotted,
+    weight,
+    href,
+    tooltip,
+    opensNewTab
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Link, {
+    getRef: ref,
+    text: text,
+    variant: variant,
+    href: href,
+    isDotted: isDotted,
+    weight: weight,
+    tooltip: tooltip,
+    opensNewTab: opensNewTab
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/lookup-field/frameworks/ui/LookupFieldView.js

@@ -15,7 +15,7 @@ export function LookupFieldView(_ref, ref) {
   } = value;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: name,
+    text: name,
     variant: "secondary",
     href: url,
     isDotted: textOverflowMode === 'clip',

package/es/library/dot/legacy-to-new-arch/table-field-components/phone-field/frameworks/ui/PhoneFieldView.js

@@ -13,7 +13,7 @@ function PhoneFieldView(_ref, ref) {
   const href = `tel:${value}`;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: value,
+    text: value,
     href: href,
     variant: "secondary",
     weight: isRead ? undefined : 'bold',

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,32 @@
+import RadioDropdownConstants from "../../../../../../../cc/radio-dropdown/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const changeHandler = input => {
+      const {
+        state,
+        dispatch,
+        action
+      } = input;
+      const {
+        fieldName,
+        fieldType
+      } = state.properties;
+      const {
+        id
+      } = action.payload;
+      dispatch({
+        type: FieldConstants.FIELD_CHANGED,
+        payload: {
+          fieldName,
+          value: fieldType === 'Boolean' ? id === 'true' : id
+        }
+      });
+    };
+
+    return {
+      [RadioDropdownConstants.RADIO_DROPDOWN_VALUE_CHANGED]: changeHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownField.js

@@ -0,0 +1,32 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import RadioDropdownProperties from "../../../../../../../cc/radio-dropdown/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import RadioDropdownFieldView from "./RadioDropdownFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const RadioDropdownField = createCustomComponent({
+  name: 'RadioDropdownField',
+  View: RadioDropdownFieldView,
+  properties: { ...RadioDropdownProperties,
+    fieldType: {
+      required: false,
+      defaultValue: 'Picklist',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default RadioDropdownField;

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownFieldView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import RadioDropdown from "../../../../radio-dropdown/frameworks/ui/RadioDropdown"; // @ts-ignore
+
+import style from "./css/RadioDropdownField.module.css";
+export default function RadioDropdownFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    options,
+    color,
+    isDotted,
+    weight,
+    selectedId,
+    selectedValue,
+    dropdownHeading,
+    hasSearch,
+    searchPlaceholder,
+    emptyStateTitle,
+    isDisabled,
+    isReadOnly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $ui_className: color === 'none' ? style.wrapper : ''
+  }, /*#__PURE__*/React.createElement(RadioDropdown, {
+    getRef: ref,
+    hoverVariant: "border",
+    options: options,
+    selectedId: selectedId,
+    selectedValue: selectedValue,
+    color: color,
+    isDotted: isDotted,
+    weight: weight,
+    dropdownHeading: dropdownHeading,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    emptyStateTitle: emptyStateTitle,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }));
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/css/RadioDropdownField.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+    margin-inline-start: calc( var(--zd_size11) * -1 ) 
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/EventHandlersFactory.js

@@ -8,10 +8,10 @@ export class EventHandlersFactory {
         dispatch
       } = input;
       const {
-        name: fieldName,
-        value: currentValue
+        fieldName,
+        checked
       } = state.properties;
-      const toggledValue = !currentValue;
+      const toggledValue = !checked;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {

package/es/library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchField.js

@@ -1,13 +1,23 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
-import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
+import SwitchProperties from "../../../../../../../cc/switch/Properties";
+import BooleanFieldEvents from "../../../../../../../cc/fields/boolean/Events";
 import SwitchFieldView from "./SwitchFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
 const SwitchField = createCustomComponent({
   name: 'SwitchField',
   View: SwitchFieldView,
-  properties: BooleanProperties,
-  events: BooleanEvents,
+  properties: { ...SwitchProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: BooleanFieldEvents,
   eventHandlers: EventHandlersFactory.create()
 });
 export default SwitchField;

package/es/library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchFieldView.js

@@ -5,12 +5,16 @@ export default function SwitchFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    checked,
+    disabled,
+    size,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Switch, {
     getRef: ref,
-    checked: value,
-    disabled: false,
-    tooltip: ""
+    checked: checked,
+    disabled: disabled,
+    size: size,
+    tooltip: tooltip
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/tag-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import TagConstants from "../../../../../../../cc/tag/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [TagConstants.TAG_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/tag-field/frameworks/ui/TagField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import TagProperties from "../../../../../../../cc/tag/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import TagFieldView from "./TagFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const TagField = createCustomComponent({
+  name: 'TagField',
+  View: TagFieldView,
+  properties: { ...TagProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default TagField;