@zohodesk/components 1.2.12 → 1.2.14

package/es/Tag/Tag.module.css

@@ -22,9 +22,8 @@
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6
-)    ;
-  --tag_icon_margin: 0 0 0 var(--zd_size5) ;
+  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
+  --tag_icon_margin: 0 0 0 var(--zd_size5);
 }[dir=rtl] .varClass {
   --tag_closeicon_border_radius: 12px 0 0 12px;
   --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);

package/es/common/common.module.css

@@ -516,10 +516,10 @@
 
 .fitContWidth {
   width: fit-content ;
-  width: undefined ;
+  width: -moz-fit-content ;
 }
 
 .fitContHeight {
   height: fit-content ;
-  height: undefined ;
+  height: -moz-fit-content ;
 }

package/es/v1/DateTime/CalendarView.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Span_propTypes, CalendarView_propTypes } from '../../DateTime/props/propTypes';
-import { CalendarView_defaultProps, Span_defaultProps } from '../../DateTime/props/defaultProps';
+import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
+import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
 import style from '../../DateTime/DateTime.module.css';
 import { getMonthEnd } from '../../utils/datetime/common';
+import { getYearDetails } from '../../DateTime/dateFormatUtils/index';
 import DaysRow from './DaysRow';
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 
@@ -31,7 +32,9 @@ export default class CalendarView extends React.PureComponent {
       dayNamesShort,
       todayMonth,
       todayDate,
-      todayYear
+      todayYear,
+      startDate,
+      endDate
     } = this.props;
     const userSeeDate = new Date(year, month, 1);
     const userSeeDay = userSeeDate.getDay() + 1;
@@ -61,7 +64,7 @@ export default class CalendarView extends React.PureComponent {
         const dayArr = [];
         let output = null;
 
-        for (let i = 1; i < 8; i++) {
+        for (let i = 1; i <= 7; i++) {
           let tdclass = `${style.datesStr} ${style.grid}`;
 
           if (i === 1) {
@@ -88,7 +91,9 @@ export default class CalendarView extends React.PureComponent {
               userSeeMonth: userSeeMonth,
               userSeeYear: userSeeYear,
               dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_date`,
-              isToday: isToday
+              isToday: isToday,
+              startDate: startDate,
+              endDate: endDate
             });
             incremday++;
           } else if (incremleti < userSeeDay) {
@@ -114,7 +119,9 @@ export default class CalendarView extends React.PureComponent {
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
               dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` // isToday={isToday}
-
+              ,
+              startDate: startDate,
+              endDate: endDate
             });
           } else if (incremleti > monthEnd) {
             let nextMonth = userSeeMonth + 1;
@@ -138,7 +145,9 @@ export default class CalendarView extends React.PureComponent {
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
               dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` //isToday={isToday}
-
+              ,
+              startDate: startDate,
+              endDate: endDate
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {
@@ -202,13 +211,37 @@ export class Span extends React.PureComponent {
       i,
       dataId,
       isActive,
-      isToday
+      isToday,
+      userSeeMonth,
+      userSeeYear,
+      startDate,
+      endDate
     } = this.props;
+    const userSeeDate = new Date(userSeeYear, userSeeMonth, incremday);
+    let startDateRange, endDateRange;
+
+    if (startDate && endDate) {
+      startDateRange = new Date(startDate);
+      endDateRange = new Date(endDate);
+    } else if (!startDate && endDate) {
+      startDateRange = new Date(getYearDetails(4).startPoint, 0, 1);
+      endDateRange = new Date(endDate);
+    } else if (!endDate && startDate) {
+      startDateRange = new Date(startDate);
+      endDateRange = new Date(getYearDetails(4).endPoint, 11, 31);
+    } else {
+      startDateRange = new Date(getYearDetails(4).startPoint, 0, 1);
+      endDateRange = new Date(getYearDetails(4).endPoint, 11, 31);
+    }
+
+    startDateRange = new Date(startDateRange.getFullYear(), startDateRange.getMonth(), startDateRange.getDate());
+    endDateRange = new Date(endDateRange.getFullYear(), endDateRange.getMonth(), endDateRange.getDate());
+    const isActiveDate = startDateRange <= userSeeDate && endDateRange >= userSeeDate;
     return /*#__PURE__*/React.createElement(Box, {
       dataId: dataId,
-      className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
+      className: `${tdclass} ${isActive && isActiveDate ? style.active : ''} ${isToday ? style.today : ''} ${!isActiveDate ? style.inActiveDate : ''}`,
       key: i,
-      onClick: this.handleSelectChild,
+      onClick: isActiveDate ? this.handleSelectChild : undefined,
       "aria-label": incremday
     }, incremday);
   }

package/es/v1/DateTime/DateTime.js

@@ -2,8 +2,8 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import { DateTime_propTypes } from '../../DateTime/props/propTypes';
-import { DateTime_defaultProps } from '../../DateTime/props/defaultProps';
+import { DateTime_propTypes } from './props/propTypes';
+import { DateTime_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
 import CalendarView from './CalendarView';
 import YearView from './YearView';
@@ -676,7 +676,9 @@ export default class DateTime extends React.PureComponent {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      startDate,
+      endDate
     } = this.props;
     const {
       timeText = 'Time',
@@ -717,7 +719,9 @@ export default class DateTime extends React.PureComponent {
       dayNamesShort: dayNamesShort,
       todayDate: todayDate,
       todayMonth: todayMonth,
-      todayYear: todayYear
+      todayYear: todayYear,
+      startDate: startDate,
+      endDate: endDate
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,

package/es/v1/DateTime/DateTimePopupFooter.js

@@ -2,8 +2,8 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupFooter_propTypes } from '../../DateTime/props/propTypes';
-import { DateTimePopupFooter_defaultProps } from '../../DateTime/props/defaultProps';
+import { DateTimePopupFooter_propTypes } from './props/propTypes';
+import { DateTimePopupFooter_defaultProps } from './props/defaultProps';
 /** ** Components *** */
 
 import { Container } from '../Layout';

package/es/v1/DateTime/DateTimePopupHeader.js

@@ -2,7 +2,7 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupHeader_propTypes } from '../../DateTime/props/propTypes';
+import { DateTimePopupHeader_propTypes } from './props/propTypes';
 /** ** Components *** */
 
 import { Container, Box } from '../Layout';

package/es/v1/DateTime/DateWidget.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import { DateWidget_propTypes } from '../../DateTime/props/propTypes';
-import { DateWidget_defaultProps } from '../../DateTime/props/defaultProps';
+import { DateWidget_propTypes } from './props/propTypes';
+import { DateWidget_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
 /**** Components ****/
 
@@ -983,7 +983,9 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId,
       a11y,
       boxSize,
-      onError
+      onError,
+      startDate,
+      endDate
     } = this.props;
     const {
       selected: value = '',
@@ -1073,7 +1075,9 @@ class DateWidgetComponent extends React.Component {
       isRestrictScroll: isRestrictScroll,
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
-      onError: onError
+      onError: onError,
+      startDate: startDate,
+      endDate: endDate
     }));
   }
 

package/es/v1/DateTime/DaysRow.js

@@ -2,7 +2,7 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DaysRow_propTypes } from '../../DateTime/props/propTypes';
+import { DaysRow_propTypes } from './props/propTypes';
 /** ** CSS *** */
 
 import style from '../../DateTime/DateTime.module.css';

package/es/v1/DateTime/Time.js

@@ -2,8 +2,8 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { Time_propTypes } from '../../DateTime/props/propTypes';
-import { Time_defaultProps } from '../../DateTime/props/defaultProps';
+import { Time_propTypes } from './props/propTypes';
+import { Time_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Container, Box } from '../Layout';

package/es/v1/DateTime/YearView.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import { YearView_propTypes } from '../../DateTime/props/propTypes';
-import { YearView_defaultProps } from '../../DateTime/props/defaultProps';
+import { YearView_propTypes } from './props/propTypes';
+import { YearView_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Virtualizer } from '@zohodesk/virtualizer';

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

@@ -0,0 +1,57 @@
+export const CalendarView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+export const Span_defaultProps = {
+  dataId: 'calendar-view'
+};
+export const DateTime_defaultProps = {
+  isDateTimeField: true,
+  dataId: 'dateTime',
+  needDefaultTime: true,
+  isAbsolute: true,
+  isAnimate: true,
+  needAction: true,
+  boxSize: 'large',
+  className: '',
+  innerClass: '',
+  dateFormat: 'dd/MM/yyyy',
+  isPadding: false,
+  i18nKeys: {},
+  is24Hour: false,
+  isDefaultPosition: false,
+  customDateFormat: null
+};
+export const DateWidget_defaultProps = {
+  borderColor: 'default',
+  dataId: 'dateWidget',
+  dateFormat: 'MM/dd/yyyy',
+  isDateTime: false,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needBorder: true,
+  needDefaultTime: true,
+  placeholder: '-None-',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  timeZone: null,
+  isPopupOpenOnClick: true,
+  isPopupCloseOnClick: false,
+  cantEditOnPopupOpen: true,
+  i18nKeys: {},
+  needErrorOnBlur: false,
+  isEditable: false,
+  iconOnHover: false,
+  is24Hour: false
+};
+export const YearView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+export const DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+export const Time_defaultProps = {
+  dataId: 'Time'
+};

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

@@ -0,0 +1,195 @@
+import PropTypes from 'prop-types';
+import { dataFormatList } from '../../../DateTime/dateFormatUtils/dateFormats';
+export const CalendarView_propTypes = {
+  dataId: PropTypes.string,
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.array,
+  todayMonth: PropTypes.string,
+  todayDate: PropTypes.string,
+  todayYear: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const Span_propTypes = {
+  dataId: PropTypes.string,
+  handleSelect: PropTypes.func,
+  i: PropTypes.number,
+  incremday: PropTypes.number,
+  isActive: PropTypes.bool,
+  tdclass: PropTypes.string,
+  userSeeMonth: PropTypes.number,
+  userSeeYear: PropTypes.number,
+  isToday: PropTypes.bool,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const DateTime_propTypes = {
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  defaultTime: PropTypes.string,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    timeText: PropTypes.string.isRequired,
+    submitText: PropTypes.string.isRequired,
+    cancelText: PropTypes.string.isRequired,
+    hourEmptyText: PropTypes.string.isRequired,
+    minuteEmptyText: PropTypes.string.isRequired,
+    nextMonthTitleText: PropTypes.string.isRequired,
+    prevMonthTitleText: PropTypes.string.isRequired
+  }),
+  innerClass: PropTypes.string,
+  isAbsolute: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDateTimeField: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isReady: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  needAction: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onDateSelect: PropTypes.func,
+  onError: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  is24Hour: PropTypes.bool,
+  isDefaultPosition: PropTypes.bool,
+  customDateFormat: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.string,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const DateWidget_propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  cantEditOnPopupOpen: PropTypes.bool,
+  children: PropTypes.object,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.oneOf([...dataFormatList]),
+  defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  defaultTime: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  id: PropTypes.string,
+  isDateTime: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isPopupCloseOnClick: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnClick: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needErrorOnBlur: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onFailValidation: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onPassValidation: PropTypes.func,
+  onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  togglePopup: PropTypes.func,
+  validation: PropTypes.shape({
+    validate: PropTypes.bool,
+    validateOn: PropTypes.string,
+    rulesOrder: PropTypes.arrayOf(PropTypes.string),
+    rules: PropTypes.object,
+    messages: PropTypes.object
+  }),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  htmlId: PropTypes.string,
+  iconOnHover: PropTypes.bool,
+  is24Hour: PropTypes.bool,
+  isHideCurrentYear: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  boxSize: PropTypes.string,
+  onError: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  a11y: PropTypes.object,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const YearView_propTypes = {
+  onSelectMonth: PropTypes.func,
+  onSelectYear: PropTypes.func,
+  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  viewedMonth: PropTypes.string,
+  monthNamesShort: PropTypes.array,
+  isMonthOpen: PropTypes.bool
+};
+export const DateTimePopupFooter_propTypes = {
+  submitText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  cancelText: PropTypes.string,
+  onCancel: PropTypes.func,
+  dataId: PropTypes.string
+};
+export const DateTimePopupHeader_propTypes = {
+  onOpenYearView: PropTypes.func,
+  showMonthTxt: PropTypes.string,
+  isYearView: PropTypes.bool,
+  prevMonthTitleText: PropTypes.string,
+  nextMonthTitleText: PropTypes.string,
+  onModifyCalendar: PropTypes.func
+};
+export const DaysRow_propTypes = {
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.object
+};
+export const Time_propTypes = {
+  timeText: PropTypes.string,
+  dataId: PropTypes.string,
+  hourSuggestions: PropTypes.array,
+  onHourSelect: PropTypes.func,
+  hours: PropTypes.string,
+  hourEmptyText: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  minSuggestions: PropTypes.array,
+  onMinutesSelect: PropTypes.func,
+  mins: PropTypes.string,
+  minuteEmptyText: PropTypes.string,
+  ampmSuggestions: PropTypes.array,
+  onAmPmSelect: PropTypes.func,
+  amPm: PropTypes.string,
+  is24Hour: PropTypes.bool
+};

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -1,7 +1,7 @@
 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); }
 
 /**** Libraries ****/
-import React from 'react';
+import React, { memo } from 'react';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import { ListItemWithAvatarDefaultProps } from '../../ListItem/props/defaultProps';
@@ -135,11 +135,10 @@ const ListItemWithAvatar = props => {
   })) : null);
 };
 
-export default ListItemWithAvatar;
 ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = ListItemWithAvatar_Props; // if (__DOCS__) {
-//   ListItemWithAvatar.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+const MemoizedListItemWithAvatar = /*#__PURE__*/memo(ListItemWithAvatar);
+MemoizedListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+MemoizedListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
+MemoizedListItemWithAvatar.displayName = 'ListItemWithAvatar';
+export default MemoizedListItemWithAvatar;

package/es/v1/Tag/Tag.js

@@ -129,6 +129,10 @@ function Tag(props) {
   }))));
 }
 
-export default /*#__PURE__*/memo(Tag);
 Tag.defaultProps = defaultProps;
-Tag.propTypes = propTypes;
+Tag.propTypes = propTypes;
+const MemoizedTag = /*#__PURE__*/memo(Tag);
+MemoizedTag.propTypes = propTypes;
+MemoizedTag.defaultProps = defaultProps;
+MemoizedTag.displayName = 'Tag';
+export default MemoizedTag;

package/es/v1/TextBox/TextBox.js

@@ -1,10 +1,11 @@
 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, { useRef, useCallback } from 'react';
+import React, { memo, useRef, useCallback } from 'react';
 import { defaultProps } from '../../TextBox/props/defaultProps';
 import { propTypes } from '../../TextBox/props/propTypes';
 import style from '../../TextBox/TextBox.module.css';
-export default function TextBox(props) {
+
+function TextBox(props) {
   let {
     type,
     name,
@@ -143,12 +144,11 @@ export default function TextBox(props) {
     onMouseDown: onMouseDown
   }, options.current, customProps));
 }
+
 TextBox.defaultProps = defaultProps;
-TextBox.propTypes = propTypes; // if (__DOCS__) {
-//   Textbox.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+TextBox.propTypes = propTypes;
+const MemoizedTextBox = /*#__PURE__*/memo(TextBox);
+MemoizedTextBox.propTypes = propTypes;
+MemoizedTextBox.defaultProps = defaultProps;
+MemoizedTextBox.displayName = 'TextBox';
+export default MemoizedTextBox;

package/es/v1/Typography/Typography.js

@@ -12,8 +12,8 @@ const Typography = props => {
     $i18n_dataTitle,
     testId,
     customId,
-    tagAttributes,
-    a11yAttributes,
+    $tagAttributes_text,
+    $a11yAttributes_text,
     customStyle
   } = props;
   const style = mergeStyle(defaultStyle, customStyle);
@@ -28,8 +28,8 @@ const Typography = props => {
     'data-title': $i18n_dataTitle,
     'data-id': customId,
     'data-test-id': testId,
-    ...tagAttributes,
-    ...a11yAttributes
+    ...$tagAttributes_text,
+    ...$a11yAttributes_text
   }, children);
 };
 

package/es/v1/Typography/css/Typography.module.css

@@ -106,6 +106,39 @@
   composes:dotted_clamp;
 }
 
+.wordBreak_breakAll{
+  word-break: break-all
+}
+.wordBreak_keepAll{
+  word-break: keep-all
+}
+.wordBreak_breakWord{
+  word-break: break-word
+}
+
+.wordWrap_normal{
+  word-wrap:normal;
+}
+.wordWrap_break{
+  word-wrap:break-word
+}
+
+.whiteSpace_normal{
+  white-space:normal
+}
+.whiteSpace_noWrap{
+  white-space:nowrap
+}
+.whiteSpace_pre{
+  white-space:pre
+}
+.whiteSpace_preLine{
+  white-space:pre-line
+}
+.whiteSpace_preWrap{
+  white-space:pre-wrap
+}
+
 
 
 /*...............Font Size Start.........*/