@zohodesk/components 1.0.0-temp-219.3 → 1.0.0-temp-229

package/es/v1/Switch/__tests__/Switch.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Switch from "../Switch";
+describe('Switch', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Checked', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      id: "switch",
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      id: "switch",
+      isChecked: true,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch rendering the Switch with Checked 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the Switch with Disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked disabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        aria-disabled="true"
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/v1/Switch/contants/index.js

@@ -0,0 +1,24 @@
+export const OFF_LABEL_RADIUS = {
+  small: '35.7%',
+  medium: '37.5%',
+  large: '38.9%',
+  xlarge: '40%'
+};
+export const THUMB_RADIUS = {
+  small: '40%',
+  medium: '42.85%',
+  large: '44.45%',
+  xlarge: '45.45%'
+};
+export const ITEMS_DIRECTION = {
+  start: 'row',
+  end: 'rowReverse',
+  top: 'column',
+  bottom: 'columnReverse'
+};
+export const ALIGN_ITEMS = {
+  start: 'center',
+  end: 'center',
+  top: 'start',
+  bottom: 'start'
+};

package/es/v1/Switch/css/Switch_v1.module.css

@@ -0,0 +1,134 @@
+.container {
+    --local-switch-cursor: pointer;
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel);
+    gap: var(--zd_size6) ;
+}
+.small {
+    --local-switch-track-width: var(--zd_size22);
+    --local-switch-track-height: var(--zd_size12);
+    --local-switch-track-border-radius: 8px;
+    --local-switch-thumb-size: var(--zd_size10);
+    --local-switch-onLabel-height: var(--zd_size6);
+    --local-switch-onLabel-left: var(--zd_size5);
+    --local-switch-offLabel-size: var(--zd_size7);
+    --local-switch-offLabel-right: var(--zd_size2);
+    --local-switch-onLabel-scaleX: 1.2;
+}
+.medium {
+    --local-switch-track-width: var(--zd_size28);
+    --local-switch-track-height: var(--zd_size16);
+    --local-switch-track-border-radius: 16px;
+    --local-switch-thumb-size: var(--zd_size14);
+    --local-switch-onLabel-height: var(--zd_size8);
+    --local-switch-onLabel-left: var(--zd_size6);
+    --local-switch-offLabel-size: var(--zd_size8);
+    --local-switch-offLabel-right: var(--zd_size3);
+    --local-switch-onLabel-scaleX: 1.4;
+}
+.large {
+    --local-switch-track-width: var(--zd_size34);
+    --local-switch-track-height: var(--zd_size20);
+    --local-switch-track-border-radius: 10px;
+    --local-switch-thumb-size: var(--zd_size18);
+    --local-switch-onLabel-height: var(--zd_size10);
+    --local-switch-onLabel-left: var(--zd_size7);
+    --local-switch-offLabel-size: var(--zd_size9);
+    --local-switch-offLabel-right: var(--zd_size4);
+    --local-switch-onLabel-scaleX: 1.6;
+}
+.xlarge {
+    --local-switch-track-width: var(--zd_size40);
+    --local-switch-track-height: var(--zd_size24);
+    --local-switch-track-border-radius: 12px;
+    --local-switch-thumb-size: var(--zd_size22);
+    --local-switch-onLabel-height: var(--zd_size12);
+    --local-switch-onLabel-left: var(--zd_size8);
+    --local-switch-offLabel-size: var(--zd_size10);
+    --local-switch-offLabel-right: var(--zd_size5);
+    --local-switch-onLabel-scaleX: 1.8;
+}
+.disabled, .readonly {
+    --local-switch-cursor: not-allowed;
+}
+.checked.enabled > .trackWrapper:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
+}
+.unChecked.enabled > .trackWrapper:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
+}
+.enabled > .trackWrapper:hover {
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
+}
+.trackWrapper {
+    position: relative;
+}
+.disabled > .trackWrapper {
+    opacity: 0.4;
+}
+.track {
+    appearance: none;
+    display: block;
+    position: relative;
+    height: var(--local-switch-track-height);
+    width: var(--local-switch-track-width);
+    margin: 0 ;
+    border-radius: var(--local-switch-track-border-radius);
+    background-color: var(--local-switch-track-background-color);
+    cursor: var(--local-switch-cursor);
+}
+.commonSvg {
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    top: 50% ;
+}
+.thumb {
+    transition: transform var(--zd_transition2) cubic-bezier(0.4, 0, 0.2, 1);
+    fill: var(--zdt_v1_switch_thumb_bg);   
+    height: var(--local-switch-thumb-size);
+    width: var(--local-switch-thumb-size);
+    transform: translateX(var(--local-switch-thumb-translateX)) translateY(-50%);
+}
+[dir=ltr] .thumb {
+    left: var(--zd_size1) ;
+}
+[dir=rtl] .thumb {
+    right: var(--zd_size1) ;
+}
+.label {
+    max-width: 100% ;
+    cursor: var(--local-switch-cursor);
+}
+.onLabel {
+    height: var(--local-switch-onLabel-height);
+    fill: var(--zdt_v1_switch_onLabel);
+    width: var(--zd_size1) ;
+    transform: translateY(-50%) scaleX(var(--local-switch-onLabel-scaleX));
+}
+[dir=ltr] .onLabel {
+    left: var(--local-switch-onLabel-left);
+}
+[dir=rtl] .onLabel {
+    right: var(--local-switch-onLabel-left);
+}
+.offLabel {
+    height: var(--local-switch-offLabel-size);
+    width: var(--local-switch-offLabel-size);
+    fill: transparent;
+    stroke: var(--local-switch-offLabel-stroke);
+    transform: translateY(-50%);
+}
+[dir=ltr] .offLabel {
+    right: var(--local-switch-offLabel-right);
+}
+[dir=rtl] .offLabel {
+    left: var(--local-switch-offLabel-right);
+}
+.checked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
+    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px)
+}
+.unChecked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);
+    --local-switch-thumb-translateX: 0;
+}

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

@@ -0,0 +1,48 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    size,
+    isChecked,
+    isDisabled,
+    isReadOnly
+  } = props;
+  let containerClass = compileClassNames({
+    [style.container]: true,
+    [style[size]]: !!style[size],
+    [style.checked]: isChecked,
+    [style.unChecked]: !isChecked,
+    [style.disabled]: isDisabled,
+    [style.enabled]: !isDisabled,
+    [style.readonly]: isReadOnly
+  });
+  let trackClass = compileClassNames({
+    [style.track]: true
+  });
+  let labelClass = compileClassNames({
+    [style.label]: true
+  });
+  let trackWrapperClass = compileClassNames({
+    [style.trackWrapper]: true
+  });
+  let thumbClass = compileClassNames({
+    [style.thumb]: true,
+    [style.commonSvg]: true
+  });
+  let labelIndicationClass = compileClassNames({
+    [style.onLabel]: isChecked,
+    [style.offLabel]: !isChecked,
+    [style.commonSvg]: true
+  });
+  return {
+    containerClass,
+    trackClass,
+    labelClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  };
+}

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

@@ -1,11 +1,11 @@
-export const defaultProps = {
-  checked: false,
-  disabled: false,
-  labelPalette: 'primary',
-  labelSize: 'medium',
+export default {
   size: 'medium',
-  isReadOnly: false,
-  customClass: {},
+  hasStateIndication: true,
+  labelPlacement: 'start',
+  labelSize: 'medium',
   customProps: {},
-  dataSelectorId: 'switch'
+  tagAttributes: {},
+  a11yAttributes: {},
+  i18nKeys: {},
+  customStyle: {}
 };

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

@@ -1,28 +1,36 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  checked: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disableTitle: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  isReadOnly: PropTypes.bool,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+export default {
   name: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  isChecked: PropTypes.bool,
+  isDefaultChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   onChange: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium']),
-  text: PropTypes.string,
+  hasStateIndication: PropTypes.bool,
+  label: PropTypes.string,
+  labelPlacement: PropTypes.oneOf(['start', 'end', 'top', 'bottom']),
+  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   title: PropTypes.string,
-  value: PropTypes.bool,
-  customClass: PropTypes.shape({
-    customSwitchWrap: PropTypes.string,
-    customSwitch: PropTypes.string,
-    customSwitchSize: PropTypes.string,
-    customLabel: PropTypes.string
-  }),
   customProps: PropTypes.shape({
-    SwitchProps: PropTypes.object,
-    LabelProps: PropTypes.object
-  })
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object,
+    label: PropTypes.object
+  }),
+  i18nKeys: PropTypes.shape({
+    readOnlyAriaLabel: PropTypes.string
+  }),
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object
 };

package/es/v1/Switch/useSwitch.js

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+const useSwitch = props => {
+  const {
+    isChecked: isCheckedProp,
+    isDefaultChecked,
+    onChange,
+    isReadOnly,
+    isDisabled
+  } = props;
+  const isControlled = isCheckedProp !== undefined;
+  const [internalChecked, setInternalChecked] = useState(isDefaultChecked);
+  const isChecked = isControlled ? isCheckedProp : internalChecked;
+
+  const handleChange = e => {
+    if (isReadOnly || isDisabled) return;
+
+    if (!isControlled) {
+      setInternalChecked(!isChecked);
+    }
+
+    onChange?.({
+      isChecked: !isChecked
+    }, e);
+  };
+
+  return {
+    isChecked,
+    handleChange
+  };
+};
+
+export default useSwitch;

package/lib/AppContainer/AppContainer.js

@@ -148,14 +148,15 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
       if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+        this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
-        (0, _Config.setLibraryConfig)({
-          getTooltipContainer: function getTooltipContainer() {
-            return null;
-          }
-        });
       }
+
+      (0, _Config.setLibraryConfig)({
+        getTooltipContainer: function getTooltipContainer() {
+          return null;
+        }
+      });
     }
   }, {
     key: "render",

package/lib/Card/Card.js

@@ -175,7 +175,9 @@ var Card = /*#__PURE__*/function (_Component3) {
     _this2.to = from + 3 * limit;
     _this2.isFetching = false;
     _this2.lastScrollTop = 0;
-    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2)); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2));
+    _this2.setScrollRef = _this2.setScrollRef.bind(_assertThisInitialized(_this2));
+    _this2.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
 
     return _this2;
@@ -204,7 +206,8 @@ var Card = /*#__PURE__*/function (_Component3) {
           noMoreData = _this$props3.noMoreData,
           scrollAt = _this$props3.scrollAt,
           noNeedUpScroll = _this$props3.noNeedUpScroll,
-          isPercentageScroll = _this$props3.isPercentageScroll;
+          isPercentageScroll = _this$props3.isPercentageScroll,
+          isRecentOnTop = _this$props3.isRecentOnTop;
 
       if (scrollTop > this.lastScrollTop) {
         this.scrollDirection = 'down';
@@ -215,9 +218,12 @@ var Card = /*#__PURE__*/function (_Component3) {
       this.lastScrollTop = scrollTop;
 
       if (fetchData && !this.isFetching) {
-        if (this.scrollDirection === 'down' && !noMoreData) {
+        var nextFetchDirection = isRecentOnTop ? 'down' : 'up';
+
+        if (this.scrollDirection === nextFetchDirection && !noMoreData) {
           var scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-          var prefetch = isPercentageScroll ? scrollingPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+          var scrolledUpPercentage = (scrollHeight - scrollTop) / (scrollHeight - scrollAt) * 100;
+          var prefetch = isRecentOnTop ? isPercentageScroll ? scrollingPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight : isPercentageScroll ? scrolledUpPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit') : scrollTop <= scrollAt;
 
           if (prefetch) {
             this.isFetching = true;
@@ -229,7 +235,9 @@ var Card = /*#__PURE__*/function (_Component3) {
             });
           }
         } else {
-          if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+          var _prefetch = isRecentOnTop ? 0 >= scrollTop - scrollAt : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
+          if (_prefetch && this.from !== 0 && !noNeedUpScroll) {
             this.isFetching = true;
             fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(function () {
               _this3.to = _this3.to - _this3.limit;
@@ -242,9 +250,12 @@ var Card = /*#__PURE__*/function (_Component3) {
       }
 
       if (fetchData && !noNeedUpScroll) {
-        if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        var topFetch = isRecentOnTop ? !noNeedUpScroll : !noMoreData;
+        var bottomFetch = isRecentOnTop ? !noMoreData : !noNeedUpScroll;
+
+        if (this.from !== 0 && scrollTop === 0 && topFetch) {
           scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-        } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+        } else if (scrollHeight === scrollTop + offsetHeight && bottomFetch) {
           scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
         }
       } // if (isScrollShadow) {
@@ -262,21 +273,36 @@ var Card = /*#__PURE__*/function (_Component3) {
     //   }
     // }
 
+  }, {
+    key: "setScrollRef",
+    value: function setScrollRef(el) {
+      var _this$props4 = this.props,
+          scrollAt = _this$props4.scrollAt,
+          isRecentOnTop = _this$props4.isRecentOnTop;
+
+      if (el && !isRecentOnTop) {
+        requestAnimationFrame(function () {
+          el.scrollTop = el.scrollHeight + Number(scrollAt);
+        });
+      }
+
+      this.childEleRef && this.childEleRef(el);
+    }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
 
-      var _this$props4 = this.props,
-          onClick = _this$props4.onClick,
-          children = _this$props4.children,
-          isScrollAttribute = _this$props4.isScrollAttribute,
-          dataId = _this$props4.dataId,
-          eleRef = _this$props4.eleRef,
-          _this$props4$customCl = _this$props4.customClass,
-          customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl,
-          htmlId = _this$props4.htmlId,
-          a11y = _this$props4.a11y;
+      var _this$props5 = this.props,
+          onClick = _this$props5.onClick,
+          children = _this$props5.children,
+          isScrollAttribute = _this$props5.isScrollAttribute,
+          dataId = _this$props5.dataId,
+          eleRef = _this$props5.eleRef,
+          _this$props5$customCl = _this$props5.customClass,
+          customClass = _this$props5$customCl === void 0 ? '' : _this$props5$customCl,
+          htmlId = _this$props5.htmlId,
+          a11y = _this$props5.a11y;
       var isScroll = this.state.isScroll;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -295,6 +321,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             isScroll: isScroll
           });
         } else if (child.type === CardContent || _this4.props.childTypes && child.type === _this4.props.childTypes.cardContent) {
+          _this4.childEleRef = child.props.eleRef;
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             id: htmlId,
             role: role,
@@ -302,7 +329,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             scroll: child.props.scroll,
             preventParentScroll: child.props.preventParentScroll,
             onScroll: _this4.onScroll,
-            eleRef: child.props.eleRef,
+            eleRef: _this4.setScrollRef,
             isScrollAttribute: child.props.isScrollAttribute,
             dataId: child.props.dataId,
             shrink: child.props.shrink,
@@ -344,11 +371,11 @@ var CardFooter = /*#__PURE__*/function (_Component4) {
   _createClass(CardFooter, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          children = _this$props5.children,
-          dataId = _this$props5.dataId,
-          customClass = _this$props5.customClass,
-          dataSelectorId = _this$props5.dataSelectorId;
+      var _this$props6 = this.props,
+          children = _this$props6.children,
+          dataId = _this$props6.dataId,
+          customClass = _this$props6.customClass,
+          dataSelectorId = _this$props6.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(customClass),
         dataId: dataId,

package/lib/Card/props/defaultProps.js

@@ -10,7 +10,8 @@ var Card_defaultProps = {
   onClick: null,
   scrollAt: '10',
   a11y: {},
-  isPercentageScroll: false
+  isPercentageScroll: false,
+  isRecentOnTop: true
 };
 exports.Card_defaultProps = Card_defaultProps;
 var CardHeader_defaultProps = {

package/lib/Card/props/propTypes.js

@@ -50,7 +50,8 @@ var Card_propTypes = {
     role: _propTypes["default"].string
   }),
   isPercentageScroll: _propTypes["default"].bool,
-  eleRef: _propTypes["default"].func
+  eleRef: _propTypes["default"].func,
+  isRecentOnTop: _propTypes["default"].bool
 };
 exports.Card_propTypes = Card_propTypes;
 var CardFooter_propTypes = {