@zohodesk/components 1.0.0-temp-195.1 → 1.0.0-temp-197

package/es/index.js

@@ -1,42 +1,42 @@
-export * from "./Accordion";
-export { default as Animation } from "./Animation/Animation";
-export { default as AppContainer } from "./AppContainer/AppContainer";
-export { default as Avatar } from "./Avatar/Avatar";
-export { default as AvatarTeam } from "./AvatarTeam/AvatarTeam";
-export { default as Button } from "./Button/Button";
-export { default as Buttongroup } from "./Buttongroup/Buttongroup";
-export * from "./Card";
-export { default as CheckBox } from "./CheckBox/CheckBox";
-export * from "./DateTime";
-export { default as DropBox } from "./DropBox/DropBox";
-export * from "./DropDown";
-export { default as Heading } from "./Heading/Heading";
-export { default as Label } from "./Label/Label";
-export * from "./Layout";
-export * from "./ListItem";
-export { default as Modal } from "./Modal/Modal";
-export * from "./MultiSelect";
-import * as _PopOver from "./PopOver";
+export * from './Accordion';
+export { default as Animation } from './Animation/Animation';
+export { default as AppContainer } from './AppContainer/AppContainer';
+export { default as Avatar } from './Avatar/Avatar';
+export { default as AvatarTeam } from './AvatarTeam/AvatarTeam';
+export { default as Button } from './Button/Button';
+export { default as Buttongroup } from './Buttongroup/Buttongroup';
+export * from './Card';
+export { default as CheckBox } from './CheckBox/CheckBox';
+export * from './DateTime';
+export { default as DropBox } from './DropBox/DropBox';
+export * from './DropDown';
+export { default as Heading } from './Heading/Heading';
+export { default as Label } from './Label/Label';
+export * from './Layout';
+export * from './ListItem';
+export { default as Modal } from './Modal/Modal';
+export * from './MultiSelect';
+import * as _PopOver from './PopOver';
 export { _PopOver as PopOver };
-export { default as Popup } from "./Popup/Popup";
-import * as _Providers from "./Provider";
+export { default as Popup } from './Popup/Popup';
+import * as _Providers from './Provider';
 export { _Providers as Providers };
-export { default as Radio } from "./Radio/Radio";
-export * from "./Responsive";
-export { default as ResponsiveDropBox } from "./ResponsiveDropBox/ResponsiveDropBox";
-export { default as Ribbon } from "./Ribbon/Ribbon";
-export { default as RippleEffect } from "./RippleEffect/RippleEffect";
-export * from "./Select";
-export { default as Stencils } from "./Stencils/Stencils";
-export { default as Switch } from "./Switch/Switch";
-export * from "./Tab";
-export { default as Tag } from "./Tag/Tag";
-export { default as Textarea } from "./Textarea/Textarea";
-export { default as TextBox } from "./TextBox/TextBox";
-export { default as TextBoxIcon } from "./TextBoxIcon/TextBoxIcon";
-export { default as Tooltip } from "./Tooltip/Tooltip";
-import * as _utils from "./utils";
+export { default as Radio } from './Radio/Radio';
+export * from './Responsive';
+export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
+export { default as Ribbon } from './Ribbon/Ribbon';
+export { default as RippleEffect } from './RippleEffect/RippleEffect';
+export * from './Select';
+export { default as Stencils } from './Stencils/Stencils';
+export { default as Switch } from './Switch/Switch';
+export * from './Tab';
+export { default as Tag } from './Tag/Tag';
+export { default as Textarea } from './Textarea/Textarea';
+export { default as TextBox } from './TextBox/TextBox';
+export { default as TextBoxIcon } from './TextBoxIcon/TextBoxIcon';
+export { default as Tooltip } from './Tooltip/Tooltip';
+import * as _utils from './utils';
 export { _utils as utils };
-export * from "./VelocityAnimation";
-export * from "./semantic";
-export { default as Typography } from "./v1/Typography/Typography";
+export * from './VelocityAnimation';
+export * from './semantic';
+export { default as Typography } from './v1/Typography/Typography';

package/es/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./semanticButton.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './semanticButton.module.css';
 export default class Button extends React.Component {
   constructor(props) {
     super(props);

package/es/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from "./Button/Button";
+export { default as SemanticButton } from './Button/Button';

package/es/utils/Common.js

@@ -1,5 +1,5 @@
 //$Id$//
-import viewPort from "../Popup/viewPort";
+import viewPort from '../Popup/viewPort';
 const {
   frameRelativeRects
 } = viewPort;

package/es/utils/ContextOptimizer.js

@@ -1,7 +1,7 @@
 /** ** Libraries *** */
 import { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
-import shallowEqual from "./shallowEqual"; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
+import shallowEqual from './shallowEqual'; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
 // Because below componends only rerender when children or calculation are changed, unless no changes will update below
 // this component logic based on return same children reference to stop rerender.
 // Think before change logic

package/es/utils/datetime/common.js

@@ -1,4 +1,4 @@
-import { offsetMap } from "./GMTZones.js";
+import { offsetMap } from './GMTZones.js';
 let dateFormat = {
   dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

package/es/utils/dropDownUtils.js

@@ -1,6 +1,6 @@
 /***** Libraries *****/
 import { createSelector } from 'reselect';
-import { getIsEmptyValue, getSearchString } from "./Common";
+import { getIsEmptyValue, getSearchString } from './Common';
 export const dummyArray = [];
 export const dummyObj = {};
 export const getOptions = props => props.options || dummyArray;
@@ -104,6 +104,7 @@ export const extractOptionId = id => {
     };
   }
 };
+export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
 export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
   const revampOptions = [];
   const remvampOptionIds = [];
@@ -156,7 +157,9 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         }
 
         normalizedFormatOptions[id] = optionDetails;
-        normalizedAllOptions[id] = option;
+        normalizedAllOptions[id] = { ...option,
+          groupId: prefixText
+        };
         revampOptions.push(optionDetails);
       }
     }

package/es/utils/index.js

@@ -1 +1 @@
-export { stopAllEventPropagation, capitalize, getFullName, bytesToSize, getMemSize, checkIsImageFile, getFullDateString, format12Hour, getDateOnly, doAfterScrollEnd, debounce, throttle, getElementSpace, getSearchString, findScrollEnd, isTextSelected } from "./Common";
+export { stopAllEventPropagation, capitalize, getFullName, bytesToSize, getMemSize, checkIsImageFile, getFullDateString, format12Hour, getDateOnly, doAfterScrollEnd, debounce, throttle, getElementSpace, getSearchString, findScrollEnd, isTextSelected } from './Common';

package/es/v1/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default function Accordion(props) {
   const {
     className,

package/es/v1/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default function AccordionItem(props) {
   let {
     id,

package/es/v1/Accordion/index.js

@@ -1,2 +1,2 @@
-export { default as Accordion } from "./Accordion";
-export { default as AccordionItem } from "./AccordionItem";
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

package/es/v1/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
+import { animationStyle } from './utils';
 export default function Animation(props) {
   let {
     name,

package/es/v1/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from "../../common/transition.module.css";
+import style from '../../common/transition.module.css';
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/v1/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useLayoutEffect } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../../common/basic.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../../common/basic.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,9 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../../common/a11y.module.css";
-import "../../common/boxShadow.module.css";
-import style from "../../AppContainer/AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../../Provider/Config";
+import '../../common/a11y.module.css';
+import style from '../../AppContainer/AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
 export default function AppContainer(props) {
   let {
     className,

package/es/v1/Avatar/Avatar.js

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getInitial } from "../../utils/getInitial";
-import AvatarSize from "../../Provider/AvatarSize";
-import style from "../../Avatar/Avatar.module.css";
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getInitial } from '../../utils/getInitial';
+import AvatarSize from '../../Provider/AvatarSize';
+import style from '../../Avatar/Avatar.module.css';
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
 function Avatar(props) {

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Avatar from "../Avatar/Avatar";
-import style from "../../AvatarTeam/AvatarTeam.module.css";
-/* once avatar support firstname lastname and pattern
-pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
-
-Not going to export to external then can kept inside supportapp
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from '../../AvatarTeam/AvatarTeam.module.css';
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
 */
 
 export default function AvatarTeam(props) {

package/es/v1/Button/Button.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "../../Button/css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from '../../Button/css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "../../Button/css/Button.module.css";
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+import style from '../../Button/css/Button.module.css';
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 
 export default function Button(props) {

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

@@ -1,4 +1,4 @@
-import { dummyFunction } from "../../../utils/dummyFunction";
+import { dummyFunction } from '../../../utils/dummyFunction';
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/v1/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Buttongroup/Buttongroup.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Buttongroup/Buttongroup.module.css';
 export default function Buttongroup(props) {
   const {
     children,

package/es/v1/Card/Card.js

@@ -1,16 +1,16 @@
 import React, { useRef, useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import { getLibraryConfig } from "../../Provider/Config";
-import style from "../../Card/Card.module.css";
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
+import { Container, Box } from '../Layout';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Card/Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */

package/es/v1/Card/index.js

@@ -1,4 +1,4 @@
-export { default as Card } from "./Card";
-export { CardHeader } from "./Card";
-export { CardContent } from "./Card";
-export { CardFooter } from "./Card";
+export { default as Card } from './Card';
+export { CardHeader } from './Card';
+export { CardContent } from './Card';
+export { CardFooter } from './Card';

package/es/v1/CheckBox/CheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { propTypes } from "./props/propTypes";
-import { defaultProps } from "./props/defaultProps";
-import Label from "../Label/Label";
-import { Container, Box } from "../Layout";
-import CssProvider from "../../Provider/CssProvider";
-import style from "../../CheckBox/CheckBox.module.css";
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../CheckBox/CheckBox.module.css';
 
 const CheckBox = props => {
   let {

package/es/v1/DateTime/CalendarView.js

@@ -1,11 +1,11 @@
 import React from 'react';
-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";
+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'] }] */
 
 export default class CalendarView extends React.PureComponent {

package/es/v1/DateTime/DateTime.js

@@ -2,22 +2,22 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import { DateTime_propTypes } from "./props/propTypes";
-import { DateTime_defaultProps } from "./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";
-import DateTimePopupHeader from "./DateTimePopupHeader";
-import DateTimePopupFooter from "./DateTimePopupFooter";
-import Time from "./Time";
-import style from "../../DateTime/DateTime.module.css";
-import { formatDate, getMonthEnd } from "../../utils/datetime/common";
-import { getIsEmptyValue } from "../../utils/Common";
-import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from "../../DateTime/constants";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { Box } from "../Layout";
-import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "../../DateTime/dateFormatUtils";
-import { getDateText } from "./../../DateTime/dateFormatUtils/dateFormat";
+import CalendarView from './CalendarView';
+import YearView from './YearView';
+import DateTimePopupHeader from './DateTimePopupHeader';
+import DateTimePopupFooter from './DateTimePopupFooter';
+import Time from './Time';
+import style from '../../DateTime/DateTime.module.css';
+import { formatDate, getMonthEnd } from '../../utils/datetime/common';
+import { getIsEmptyValue } from '../../utils/Common';
+import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from '../../DateTime/constants';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { Box } from '../Layout';
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from '../../DateTime/dateFormatUtils';
+import { getDateText } from './../../DateTime/dateFormatUtils/dateFormat';
 
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
@@ -651,8 +651,12 @@ export default class DateTime extends React.PureComponent {
       isRestrictScroll,
       dropBoxPortalId,
       startDate,
-      endDate
+      endDate,
+      customProps = {}
     } = this.props;
+    const {
+      TimeProps = {}
+    } = customProps;
     const {
       timeText = 'Time',
       submitText = 'Set',
@@ -710,7 +714,8 @@ export default class DateTime extends React.PureComponent {
       ampmSuggestions: this.ampmSuggestions,
       onAmPmSelect: this.amPmSelect,
       amPm: amPm,
-      is24Hour: is24Hour
+      is24Hour: is24Hour,
+      customProps: TimeProps
     }) : null, needAction ? /*#__PURE__*/React.createElement(DateTimePopupFooter, {
       submitText: submitText,
       onSubmit: this.handleSelect,

package/es/v1/DateTime/DateTimePopupFooter.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupFooter_propTypes } from "./props/propTypes";
-import { DateTimePopupFooter_defaultProps } from "./props/defaultProps";
+import { DateTimePopupFooter_propTypes } from './props/propTypes';
+import { DateTimePopupFooter_defaultProps } from './props/defaultProps';
 /** ** Components *** */
 
-import { Container } from "../Layout";
-import Button from "../Button/Button";
+import { Container } from '../Layout';
+import Button from '../Button/Button';
 /** ** CSS *** */
 
-import style from "../../DateTime/DateTime.module.css";
+import style from '../../DateTime/DateTime.module.css';
 export default class DateTimePopupFooter extends PureComponent {
   render() {
     const {

package/es/v1/DateTime/DateTimePopupHeader.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupHeader_propTypes } from "./props/propTypes";
+import { DateTimePopupHeader_propTypes } from './props/propTypes';
 /** ** Components *** */
 
-import { Container, Box } from "../Layout";
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import Heading from "../Heading/Heading";
+import Heading from '../Heading/Heading';
 /** ** CSS *** */
 
-import style from "../../DateTime/DateTime.module.css";
+import style from '../../DateTime/DateTime.module.css';
 
 class Span extends React.PureComponent {
   constructor(props) {