@zohodesk/components 1.0.0-temp-231 → 1.0.0-temp-232

package/es/MultiSelect/constants.js

@@ -0,0 +1,6 @@
+export const MULTISELECT_I18N_KEYS = {
+  limitReachedMessage: 'Limit reached',
+  searchText: 'Searching...',
+  clearText: 'Clear all',
+  loadingText: 'Loading'
+};

package/es/MultiSelect/props/propTypes.js

@@ -37,11 +37,13 @@ export const MultiSelect_propTypes = {
   getRef: PropTypes.func,
   getTargetRef: PropTypes.func,
   i18nKeys: PropTypes.shape({
+    searchText: PropTypes.string,
     clearText: PropTypes.string,
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
     noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
@@ -116,7 +118,8 @@ export const MultiSelect_propTypes = {
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
-  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  limit: PropTypes.number
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -153,7 +156,8 @@ export const SelectedOptions_propTypes = {
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
   palette: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  limit: PropTypes.number
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({
@@ -183,7 +187,9 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  limit: PropTypes.number,
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -201,7 +207,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
     noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
@@ -255,7 +262,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  limit: PropTypes.number
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -269,68 +277,20 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
   selectedOptionsLimit: PropTypes.number,
   getSelectedOptionDetails: PropTypes.func,
-  emptyMessage: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  searchEmptyMessage: PropTypes.string,
-  placeHolder: PropTypes.string,
-  selectAllText: PropTypes.string,
-  textField: PropTypes.string,
-  valueField: PropTypes.string,
   imageField: PropTypes.string,
   iconName: PropTypes.string,
   prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  needEffect: PropTypes.bool,
   secondaryField: PropTypes.string,
-  animationStyle: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  isAnimate: PropTypes.bool,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
   dataIdClearIcon: PropTypes.string,
   dataIdLoading: PropTypes.string,
   dataIdMultiSelectComp: PropTypes.string,
   dataIdSelectAllEle: PropTypes.string,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
   listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  htmlId: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: PropTypes.bool,
-  isSearchClearOnSelect: PropTypes.bool,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customClass: PropTypes.object,
-  isFocus: PropTypes.bool
+  customClass: PropTypes.object
 };

package/es/Select/SelectWithIcon.js

@@ -193,7 +193,7 @@ class SelectWithIcon extends Component {
     } = this.props;
 
     if (options.length) {
-      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
+      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim()));
     }
 
     return datas;

package/es/utils/Common.js

@@ -376,7 +376,7 @@ export function getElementSpace(elementRef) {
 }
 export function getSearchString() {
   let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 export function findScrollEnd(element) {
   let {

package/es/utils/dropDownUtils.js

@@ -7,6 +7,8 @@ export const getOptions = props => props.options || dummyArray;
 
 const getOptionsOrder = props => props.optionsOrder || dummyArray;
 
+const getLimit = props => props.limit || 0;
+
 const getSelectedOptionsSel = props => props.selectedOptions || dummyArray;
 
 const getSearchStr = props => props.searchStr || '';
@@ -206,10 +208,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
-  const output = [];
-  const revampSelectedOptions = [];
-  const normalizedSelectedOptions = {};
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) => {
+  let output = [];
+  let revampSelectedOptions = [];
+  let normalizedSelectedOptions = {};
   selectedOptionsLength = !getIsEmptyValue(selectedOptionsLength) ? selectedOptionsLength : selectedOptions.length;
 
   for (let i = 0; i < selectedOptionsLength; i++) {
@@ -234,6 +236,12 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
     }
   }
 
+  if (limit && limit > 0) {
+    output = output.slice(0, limit);
+    revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+    normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+  }
+
   return {
     formatSelectedOptions: output,
     normalizedSelectedOptions,
@@ -423,7 +431,8 @@ export const filterSelectedOptions = function () {
   let {
     selectedOptions = dummyArray,
     propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray
+    disabledOptions = dummyArray,
+    limit
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -445,8 +454,18 @@ export const filterSelectedOptions = function () {
 
     return true;
   });
+  const totalSelectedOptions = [...oldValidSelectedOptions, ...newlyAddedOptions];
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
+    newSelectedOptions: totalSelectedOptions
   };
 };
 export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {

package/es/v1/Label/Label.js

@@ -1,40 +1,89 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+import React, { useContext, useEffect, useState } from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils'; // component registry
+
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import defaultStyle from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
-    customClass,
-    id,
-    a11y = {}
+    text,
+    customId,
+    testId,
+    customStyle,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    isInlineField,
+    requiredType,
+    shouldHighlightRequired
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__PURE__*/React.createElement("label", {
-    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    labelClass,
+    requiredClass
+  } = cssJSLogic({
+    props: { ...props,
+      requiredType,
+      shouldHighlightRequired,
+      isRequired,
+      isInlineField
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $tagAttributes_container: {
+      'data-selector-id': customId,
+      ...tagAttributes_container
+    },
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    ...customProps_container
+  }, /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $tagAttributes_text: {
+      htmlFor: htmlFor,
+      onClick: onClick,
+      ...tagAttributes_label
+    },
+    $a11yAttributes_text: a11yAttributes_label,
+    ...customProps_label
+  }, text), isRequired && requiredType === 'text' ? /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass
+  }, "(Required)") : '');
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;

package/es/v1/Label/css/Label_v1.module.css

@@ -0,0 +1,47 @@
+.label {
+    font-size: var(--zd_font_size14) ;
+    color: var(--zdt_v1_label_text);
+    cursor: pointer;
+}
+
+.dotted {
+    composes: dotted from '../../../common/common.module.css';
+}
+
+.required {
+    color: var(--zdt_v1_label_mandatory_text);
+}
+
+.asterisk:after {
+    content: "*";
+    color: var(--zdt_v1_label_mandatory_text);
+}
+
+[dir=ltr] .asterisk:after {
+    padding-left: var(--zd_size2) ;
+}
+
+[dir=rtl] .asterisk:after {
+    padding-right: var(--zd_size2) ;
+}
+
+.requiredTxt {
+    color: var(--zdt_v1_label_mandatory_text);
+    font-size: var(--zd_font_size14) ;
+}
+
+[dir=ltr] .requiredTxt {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .requiredTxt {
+    margin-right: var(--zd_size5) ;
+}
+
+[dir=ltr] .inlineField {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .inlineField {
+    margin-right: var(--zd_size5) ;
+}

package/es/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,29 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    clipped,
+    requiredType,
+    shouldHighlightRequired,
+    isRequired,
+    isInlineField
+  } = props; // const shouldHighlightMandatory = localStorage?.getItem('mandatoryAppearance') === 'true';
+
+  let labelClass = compileClassNames({
+    [style.label]: true,
+    [style.dotted]: clipped,
+    [style.asterisk]: isRequired && requiredType === 'asterisk',
+    [style.required]: isRequired && shouldHighlightRequired,
+    [style.inlineField]: isInlineField
+  });
+  let requiredClass = compileClassNames({
+    [style.requiredTxt]: true
+  });
+  return {
+    labelClass,
+    requiredClass
+  };
+}

package/es/v1/Label/props/defaultProps.js

@@ -1,11 +1,9 @@
-export const defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
-  size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+export default {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customStyle: {},
+  shouldHighlightRequired: false,
+  isInlineField: false // clipped: true
+
 };

package/es/v1/Label/props/propTypes.js

@@ -1,19 +1,27 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  clipped: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
+export default {
   htmlFor: PropTypes.string,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['title', 'subtitle']),
-  variant: PropTypes.oneOf(['primary', 'default']),
-  customClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    tabIndex: PropTypes.string
+  onClick: PropTypes.func,
+  // tabIndex: PropTypes.number,
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
   }),
-  id: PropTypes.string
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object,
+  requiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequired: PropTypes.bool,
+  // clipped: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isInlineField: PropTypes.bool
 };