@zohodesk/components 1.4.12 → 1.4.14

package/es/DateTime/DateWidget.module.css

@@ -1,39 +0,0 @@
-/* $Id */
-.container {
-  position: relative;
-  composes: offSelection from '../common/common.module.css';
-}
-.datePickIcon{height:100% }
-.readOnly, .readOnly > input, .disabled {
-  cursor: not-allowed;
-}
-.enabled {
-  cursor: pointer;
-}
-.textBox {
-  position: relative;
-}
-.inputLine {
-  position: absolute;
-  bottom: 0 ;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
-  left: 0 ;
-  right: 0 ;
-}
-[dir=rtl] .inputLine {
-  right: 0 ;
-  left: 0 ;
-}
-.enabled:hover .inputLine {
-  border-bottom-color: var(--zdt_datewidget_enabled_border);
-}
-.textBoxFocus .inputLine {
-  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
-}
-
-.placeHolder input {
-  color: var(--zdt_datewidget_placeholder_text);
-}

package/es/DateTime/DaysRow.js

@@ -1,32 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-import { DaysRow_propTypes } from "./props/propTypes";
-/** ** CSS *** */
-
-import style from "./DateTime.module.css";
-/** ** Components *** */
-
-import { Container, Box } from "../Layout";
-export default class DaysRow extends PureComponent {
-  render() {
-    const {
-      dayNames,
-      dayNamesShort,
-      holidays
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "center",
-      className: style.days
-    }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
-      key: dayName,
-      className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
-      "data-title": dayName,
-      "aria-label": dayName
-    }, dayNamesShort[index])));
-  }
-
-}
-DaysRow.propTypes = DaysRow_propTypes;

package/es/DateTime/Time.js

@@ -1,181 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-/** ** Libraries *** */
-import React, { PureComponent } from 'react';
-import { Time_propTypes } from "./props/propTypes";
-import { Time_defaultProps } from "./props/defaultProps";
-/**** Components ****/
-
-import { Container, Box } from "../Layout";
-import Select from "../Select/Select";
-/** ** CSS *** */
-
-import style from "./DateTime.module.css";
-export default class Time extends PureComponent {
-  render() {
-    const {
-      timeText,
-      dataId,
-      hourSuggestions,
-      onHourSelect,
-      hours,
-      hourEmptyText,
-      needResponsive,
-      minSuggestions,
-      onMinutesSelect,
-      mins,
-      minuteEmptyText,
-      ampmSuggestions,
-      onAmPmSelect,
-      amPm,
-      is24Hour,
-      customProps = {}
-    } = this.props;
-    const {
-      HourSelectProps = {},
-      MinuteSelectProps = {},
-      AmPmSelectProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: style.text
-    }, timeText), /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical",
-      className: style.timesection,
-      isCover: false,
-      dataId: `${dataId}_timeContainer`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(Hour, {
-      hourSuggestions: hourSuggestions,
-      onHourSelect: onHourSelect,
-      hours: hours,
-      needResponsive: needResponsive,
-      hourEmptyText: hourEmptyText,
-      customProps: HourSelectProps
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(Minute, {
-      minSuggestions: minSuggestions,
-      onMinutesSelect: onMinutesSelect,
-      mins: mins,
-      minuteEmptyText: minuteEmptyText,
-      needResponsive: needResponsive,
-      customProps: MinuteSelectProps
-    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.dropDownContainer
-    }, /*#__PURE__*/React.createElement(AmPm, {
-      ampmSuggestions: ampmSuggestions,
-      onAmPmSelect: onAmPmSelect,
-      amPm: amPm,
-      needResponsive: needResponsive,
-      customProps: AmPmSelectProps
-    })) : null));
-  }
-
-}
-Time.propTypes = Time_propTypes;
-Time.defaultProps = Time_defaultProps;
-
-class Hour extends React.PureComponent {
-  render() {
-    const {
-      hourSuggestions,
-      onHourSelect,
-      hours,
-      needResponsive,
-      hourEmptyText,
-      customProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: hourSuggestions,
-      onChange: onHourSelect,
-      selectedValue: hours,
-      needSearch: true,
-      emptyMessage: hourEmptyText,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      searchBoxSize: "xmedium",
-      searchBoxPlaceHolder: "",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "hourField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
-  }
-
-}
-
-class Minute extends React.PureComponent {
-  render() {
-    const {
-      minSuggestions,
-      onMinutesSelect,
-      mins,
-      minuteEmptyText,
-      needResponsive,
-      customProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: minSuggestions,
-      onChange: onMinutesSelect,
-      selectedValue: mins,
-      needSearch: true,
-      emptyMessage: minuteEmptyText,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      searchBoxSize: "xmedium",
-      searchBoxPlaceHolder: "",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "minuteField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
-  }
-
-}
-
-class AmPm extends React.PureComponent {
-  render() {
-    const {
-      ampmSuggestions,
-      onAmPmSelect,
-      amPm,
-      needResponsive,
-      customProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
-      options: ampmSuggestions,
-      onChange: onAmPmSelect,
-      selectedValue: amPm,
-      animationStyle: "bounce",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      maxLength: "2",
-      popupGroup: "calender",
-      size: "small",
-      dataId: "ampmField",
-      needResponsive: needResponsive,
-      needListBorder: true,
-      needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
-  }
-
-}

package/es/DateTime/YearView.js

@@ -1,264 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { YearView_propTypes } from "./props/propTypes";
-import { YearView_defaultProps } from "./props/defaultProps";
-/**** Components ****/
-
-import { Virtualizer } from '@zohodesk/virtualizer';
-import { Container, Box } from "../Layout";
-import { Icon } from '@zohodesk/icons';
-import Heading from "../Heading/Heading";
-/**** CSS ****/
-
-import style from "./YearView.module.css";
-/**** Methods ****/
-
-import { getYearDetails } from "./dateFormatUtils";
-const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-function getYears() {
-  const years = [];
-  const {
-    startPoint,
-    endPoint
-  } = getYearDetails();
-
-  for (let i = startPoint; i <= endPoint; i++) {
-    years.push(i);
-  }
-
-  return years;
-}
-
-class Year extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const {
-      year,
-      onClick
-    } = this.props;
-    onClick && onClick(year);
-  }
-
-  render() {
-    const {
-      year,
-      isActive,
-      isOpen
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      className: `${style.year} ${isActive ? style.isActive : ''}`,
-      onClick: this.handleClick,
-      dataId: isActive ? `yearAtv_${year}` : `year_${year}`
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical"
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Heading, {
-      className: style.yearText,
-      title: year,
-      a11y: {
-        tabindex: '0'
-      },
-      tagName: "h4"
-    })), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-arrowDownSingle",
-      size: "7",
-      isBold: true,
-      iconClass: isOpen ? `${style.arrow} ${style.arrowActive}` : style.arrow
-    })));
-  }
-
-}
-
-class Month extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const {
-      month,
-      onClick
-    } = this.props;
-    let monthIndex = monthNamesData.indexOf(month);
-    monthIndex = monthIndex === -1 ? 0 : monthIndex;
-    onClick && onClick(monthIndex);
-  }
-
-  render() {
-    const {
-      month,
-      isActive,
-      displayText,
-      hoverText
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      dataId: `month_${month}`,
-      className: `${style.month} ${isActive ? style.currentMonth : ''}`,
-      onClick: this.handleClick,
-      "data-title": hoverText,
-      "aria-label": month
-    }, displayText);
-  }
-
-}
-
-export default class YearView extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.renderListItem = this.renderListItem.bind(this);
-    this.handleMonthClick = this.handleMonthClick.bind(this);
-    this.handleYearClick = this.handleYearClick.bind(this);
-    this.getPublicMethods = this.getPublicMethods.bind(this);
-    this.handleScrollToYear = this.handleScrollToYear.bind(this);
-    this.handleUpdateLocalYear = this.handleUpdateLocalYear.bind(this);
-    this.years = getYears();
-    this.state = {
-      localYear: ''
-    };
-  }
-
-  componentDidMount() {
-    this.handleScrollToYear(this.props);
-    this.handleUpdateLocalYear(this.props);
-  }
-
-  componentDidUpdate(prevProps) {
-    let {
-      viewedYear
-    } = this.props;
-    viewedYear = parseInt(viewedYear) || 0;
-    let {
-      viewedYear: oldViewedYear
-    } = prevProps;
-    oldViewedYear = parseInt(oldViewedYear) || 0;
-
-    if (viewedYear !== oldViewedYear) {
-      this.handleScrollToYear(this.props);
-      this.handleUpdateLocalYear(this.props);
-    }
-  }
-
-  handleUpdateLocalYear(props) {
-    let {
-      viewedYear
-    } = props;
-    viewedYear = parseInt(viewedYear) || 0;
-    setTimeout(() => {
-      this.setState({
-        localYear: viewedYear
-      });
-    }, 150);
-  }
-
-  handleScrollToYear(props) {
-    const {
-      years = [],
-      scrollToIndex
-    } = this;
-    let {
-      viewedYear
-    } = props;
-    viewedYear = parseInt(viewedYear) || 0;
-    const yearIndex = years.indexOf(viewedYear);
-    yearIndex >= 0 && scrollToIndex && scrollToIndex(yearIndex, 0, {
-      duration: 0
-    });
-  }
-
-  getPublicMethods(methods) {
-    const {
-      scrollToIndex
-    } = methods;
-    this.scrollToIndex = scrollToIndex;
-  }
-
-  handleMonthClick(month) {
-    const {
-      onSelectMonth
-    } = this.props;
-    onSelectMonth && onSelectMonth(month);
-  }
-
-  handleYearClick(year) {
-    const {
-      onSelectYear
-    } = this.props;
-    onSelectYear && onSelectYear(year);
-  }
-
-  renderListItem(_ref) {
-    let {
-      index,
-      style: virtualizerStyle,
-      ref
-    } = _ref;
-    const {
-      years
-    } = this;
-    const year = years[index];
-    let {
-      viewedYear,
-      viewedMonth,
-      monthNamesShort,
-      isMonthOpen
-    } = this.props;
-    viewedYear = parseInt(viewedYear) || 0;
-    let {
-      localYear
-    } = this.state;
-    localYear = parseInt(localYear) || 0;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      className: style.yearBox,
-      eleRef: ref,
-      style: virtualizerStyle
-    }, /*#__PURE__*/React.createElement(Year, {
-      year: year,
-      onClick: this.handleYearClick,
-      isActive: viewedYear === year,
-      isOpen: isMonthOpen
-    }), viewedYear === year && isMonthOpen ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      wrap: "wrap",
-      align: "between",
-      className: `${style.yearContainer} ${viewedYear !== localYear && viewedYear === year ? style.toggleYear : ''}`
-    }, monthNamesData.map((month, index) => {
-      const monthIndex = monthNamesData.indexOf(month);
-      return /*#__PURE__*/React.createElement(Month, {
-        key: month,
-        month: month,
-        onClick: this.handleMonthClick,
-        isActive: monthIndex === viewedMonth,
-        displayText: monthNamesShort[index] // hoverText={monthNames[index]}
-
-      });
-    }))) : null);
-  }
-
-  render() {
-    const {
-      years = []
-    } = this;
-    return /*#__PURE__*/React.createElement(Virtualizer, {
-      elementRenderer: this.renderListItem,
-      elementsCount: years.length,
-      className: style.container,
-      getExposedPublicMethods: this.getPublicMethods,
-      isElementsFixedHeight: false,
-      dataId: "yearList"
-    });
-  }
-
-}
-YearView.propTypes = YearView_propTypes;
-YearView.defaultProps = YearView_defaultProps;

package/es/DateTime/YearView.module.css

@@ -1,99 +0,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: 2.1667;
-  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/__tests__/CalendarView.spec.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import CalendarView from "../CalendarView";
-describe('CalendarView', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(CalendarView, {
-      dayNames: []
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/DateTime/__tests__/DateTime.spec.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DateTime from "../DateTime";
-describe('DateTime', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DateTime, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the isActive is true and isDefaultPosition is true', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DateTime, {
-      isActive: true,
-      isDefaultPosition: true,
-      value: "2023-07-29T20:20:20.000"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/DateTime/__tests__/DateTimePopupFooter.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DateTimePopupFooter from "../DateTimePopupFooter";
-describe('DateTimePopupFooter', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DateTimePopupFooter, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/DateTime/__tests__/DateTimePopupHeader.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DateTimePopupHeader from "../DateTimePopupHeader";
-describe('DateTimePopupHeader', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DateTimePopupHeader, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/DateTime/__tests__/DateWidget.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DateWidget from "../DateWidget";
-describe('DateWidget', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DateWidget, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/DateTime/__tests__/DaysRow.spec.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DaysRow from "../DaysRow";
-describe('DaysRow', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(DaysRow, {
-      dayNames: []
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});