@zohodesk/components 1.0.0-temp-166 → 1.0.0-temp-168

package/es/DateTime/YearView.module.css

@@ -1,99 +1,99 @@
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
-}
-
-.month {
-  width: 30.333%;
-  font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
-  height: var(--zd_size26) ;
-  color: var(--zdt_yearview_month_text);
-  text-align: center;
-  margin: 0 0 var(--zd_size1) ;
-  cursor: pointer;
-  background-color: var(--zdt_yearview_month_bg);
-  border-radius: 20px;
-}
-
-.month:hover {
-  background-color: var(--zdt_yearview_month_hover_bg);
-}
-
-.currentMonth,
-.currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-
-.currentMonth, .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
-}
-
-.yearBox {
-  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
-}
-
-.year {
-  padding: var(--zd_size7) 0 ;
-  cursor: pointer;
-}
-
-.year:hover .yearText,
-.year:hover .arrow {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-.yearText {
-  color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrow {
-  color: var(--zdt_yearview_yeartext_text);
-  transition: transform var(--zd_transition1);
-}
-
-.isActive {
-  cursor: default;
-}
-
-.isActive .yearText {
-  font-family: var(--zd_semibold);
-  color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-[dir=ltr] .arrowActive {
-  transform: rotate(180deg);
-}
-
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
-
-.container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
-  composes: boxPadding;
-  background-color: var(--zdt_yearview_default_bg);
-}
-
-.yearContainer {
-  height: var(--zd_size135) ;
-  overflow: hidden;
-  transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
-}
-
-.toggleYear {
-  height: 0 ;
-  padding: 0 ;
+[dir=ltr] .boxPadding {
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
+}[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
+}
+
+.month {
+  width: 30.333%;
+  font-size: var(--zd_font_size12) ;
+  line-height: var(--zd_size26);
+  height: var(--zd_size26) ;
+  color: var(--zdt_yearview_month_text);
+  text-align: center;
+  margin: 0 0 var(--zd_size1) ;
+  cursor: pointer;
+  background-color: var(--zdt_yearview_month_bg);
+  border-radius: 20px;
+}
+
+.month:hover {
+  background-color: var(--zdt_yearview_month_hover_bg);
+}
+
+.currentMonth,
+.currentMonth:hover {
+  color: var(--zdt_yearview_currentmonth_text);
+}
+
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+
+.yearBox {
+  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
+}
+
+.year {
+  padding: var(--zd_size7) 0 ;
+  cursor: pointer;
+}
+
+.year:hover .yearText,
+.year:hover .arrow {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+.yearText {
+  color: var(--zdt_yearview_yeartext_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrow {
+  color: var(--zdt_yearview_yeartext_text);
+  transition: transform var(--zd_transition1);
+}
+
+.isActive {
+  cursor: default;
+}
+
+.isActive .yearText {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+
+.container {
+  height: 100% ;
+  overflow-y: auto;
+  overflow-x: hidden;
+  composes: boxPadding;
+  background-color: var(--zdt_yearview_default_bg);
+}
+
+.yearContainer {
+  height: var(--zd_size135) ;
+  overflow: hidden;
+  transition: height var(--zd_transition1);
+  padding-bottom: var(--zd_size5) ;
+}
+
+.toggleYear {
+  height: 0 ;
+  padding: 0 ;
 }

package/es/DateTime/props/defaultProps.js

@@ -48,4 +48,10 @@ export const DateWidget_defaultProps = {
 export const YearView_defaultProps = {
   dataId: 'dateContainer',
   needBorder: true
+};
+export const DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+export const Time_defaultProps = {
+  dataId: 'Time'
 };

package/es/DateTime/props/propTypes.js

@@ -6,7 +6,12 @@ export const CalendarView_propTypes = {
   month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   needBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.array,
+  todayMonth: PropTypes.string,
+  todayDate: PropTypes.string,
+  todayYear: PropTypes.string
 };
 export const Span_propTypes = {
   dataId: PropTypes.string,
@@ -63,7 +68,11 @@ export const DateTime_propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   is24Hour: PropTypes.bool,
   isDefaultPosition: PropTypes.bool,
-  isToday: PropTypes.bool
+  customDateFormat: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.string,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -124,12 +133,55 @@ export const DateWidget_propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   boxSize: PropTypes.string,
-  onError: PropTypes.func
+  onError: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  a11y: PropTypes.object
 };
 export const YearView_propTypes = {
-  dataId: PropTypes.string,
-  needBorder: PropTypes.bool,
   onSelectMonth: PropTypes.func,
   onSelectYear: PropTypes.func,
-  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  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/DropBox/DropBox.js

@@ -12,7 +12,7 @@ import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
-  const focusRef = useRef(null);
+  const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);
   const {
     needResponsive,
@@ -21,8 +21,19 @@ export default function DropBox(props) {
     isAbsolutePositioningNeeded,
     isRestrictScroll,
     needFocusScope,
-    onClose
+    onClose,
+    customProps
   } = props;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = true,
+    needTabLoop = false,
+    enableEnterAction = true
+  } = focusScopeProps;
   const {
     direction
   } = DropBoxContext || {};
@@ -41,22 +52,23 @@ export default function DropBox(props) {
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-    focusClose: onClose,
-    elementRef: focusRef,
-    autoFocus: true,
-    restoreFocus: true,
-    focusArrowLoop: true,
-    enableEnterAction: true
-  }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    needArrowLoop: needArrowLoop,
+    needTabLoop: needTabLoop,
+    enableEnterAction: enableEnterAction
+  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: focusRef
+    subContainerRef: dropBoxRef
   }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    subContainerRef: focusRef,
+    subContainerRef: dropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -4,7 +4,7 @@ import cssJSLogic from './css/cssJSLogic';
 import { positionMapping } from '../DropBoxPositionMapping.json';
 import { DropBoxElementDefaultProps } from './props/defaultProps';
 import { DropBoxElementPropTypes } from './props/propTypes';
-import { mergeStyle } from '../../utils';
+import { mergeStyle } from '@zohodesk/utils';
 import style from './css/DropBoxElement.module.css';
 export default function DropBoxElement(props) {
   let {