@zohodesk/components 1.4.11 → 1.4.13

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

@@ -1,134 +0,0 @@
-.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

@@ -1,48 +0,0 @@
-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 +0,0 @@
-export default {
-  size: 'medium',
-  hasStateIndication: true,
-  labelPlacement: 'start',
-  labelSize: 'medium',
-  customProps: {},
-  tagAttributes: {},
-  a11yAttributes: {},
-  i18nKeys: {},
-  customStyle: {}
-};

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

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-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,
-  hasStateIndication: PropTypes.bool,
-  label: PropTypes.string,
-  labelPlacement: PropTypes.oneOf(['start', 'end', 'top', 'bottom']),
-  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-  title: PropTypes.string,
-  customProps: PropTypes.shape({
-    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

@@ -1,33 +0,0 @@
-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 && onChange({
-      isChecked: !isChecked
-    }, e);
-  };
-
-  return {
-    isChecked,
-    handleChange
-  };
-};
-
-export default useSwitch;

package/es/v1/Tab/Tab.js

@@ -1,106 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../../utils/Common";
-import styles from "./v1Tab.module.css";
-const tabTypes = {
-  alpha: {
-    active: 'alphaActive',
-    tab: 'tabAlpha'
-  },
-  beta: {
-    active: 'betaActive',
-    tab: 'tabBeta'
-  },
-  delta: {
-    active: 'deltaActive',
-    tab: 'tabDelta'
-  }
-};
-export default function Tab(_ref) {
-  let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    dataSelectorId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    customProps
-  } = _ref;
-  let clickListener = useCallback(event => {
-    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
-      event && event.stopPropagation();
-      return;
-    }
-
-    event && event.preventDefault();
-    onSelect(id);
-    onClick && onClick(event);
-  }, [id, isLink, onSelect, onClick]);
-  let styleContent = useMemo(() => tabTypes[type] || {
-    active: 'active',
-    tab: 'tab'
-  }, [type]);
-  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
-  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
-  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
-  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, {
-    tourId: tourId,
-    tagName: isLink ? 'a' : 'div',
-    className: tabClass,
-    dataId: `${dataId}_Tab`,
-    onClick: !isDisabled ? clickListener : undefined,
-    style: style,
-    eleRef: getTab,
-    "data-title": title,
-    "data-title-position": titlePosition,
-    adjust: true,
-    href: isLink ? href : undefined,
-    "data-key": id,
-    role: "link",
-    "aria-controls": id,
-    "aria-selected": isActive ? true : false,
-    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
-    "aria-label": text ? text : null,
-    dataSelectorId: dataSelectorId,
-    ...customProps
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "both",
-    className: styles.textContainer
-  }, text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    adjust: true,
-    className: styles.tabText
-  }, text), children ? /*#__PURE__*/React.createElement(Box, {
-    shrink: true
-  }, children) : null));
-}
-Tab.defaultProps = Tab_defaultProps;
-Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
-//   Tab.docs = {
-//     componentGroup: 'Tab',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/Tab/TabContent.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./v1TabContent.module.css";
-/* eslint-disable react/forbid-component-props */
-
-const TabContent = _ref => {
-  let {
-    children,
-    scroll,
-    dataId,
-    id,
-    dataSelectorId
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Container, {
-    className: style.container,
-    scroll: scroll,
-    dataId: `${dataId}_TabContent`,
-    isScrollAttribute: true,
-    "aria-labelledby": id,
-    tabindex: "-1",
-    role: "tabpanel",
-    dataSelectorId: dataSelectorId
-  }, children);
-};
-
-TabContent.defaultProps = TabContent_defaultProps;
-TabContent.propTypes = TabContent_propTypes;
-export default TabContent;

package/es/v1/Tab/TabContentWrapper.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
-/* eslint-disable react/forbid-component-props */
-
-const TabContentWrapper = _ref => {
-  let {
-    style,
-    className,
-    children,
-    dataId,
-    selectedTab,
-    onScroll,
-    dataSelectorId,
-    tagName,
-    a11y
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    style: style,
-    dataId: dataId,
-    className: className,
-    onScroll: onScroll,
-    dataSelectorId: dataSelectorId,
-    tagName: tagName,
-    ...a11y
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
-};
-
-TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
-TabContentWrapper.propTypes = TabContentWrapper_propTypes;
-export default TabContentWrapper;

package/es/v1/Tab/TabWrapper.js

@@ -1,55 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-
-function TabWrapper(_ref) {
-  let {
-    defaultTab,
-    hookToDisableInternalState,
-    onSelect,
-    type,
-    isAnimate,
-    needTabBorder,
-    needBorder,
-    needPadding,
-    needAppearance,
-    align,
-    dataId,
-    children,
-    dataSelectorId
-  } = _ref;
-  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
-  const setSelectedTab = useCallback(id => {
-    if (!hookToDisableInternalState) {
-      setSelected(id);
-    }
-
-    onSelect && onSelect(id);
-  }, [hookToDisableInternalState, onSelect]);
-  return /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, React.Children.map(children, child => {
-    let TabsChild = child.type;
-    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
-    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
-    , { ...child.props,
-      selectedTab: selectedTab,
-      onSelect: setSelectedTab,
-      type: type,
-      isAnimate: isAnimate,
-      needTabBorder: needTabBorder,
-      needBorder: needBorder,
-      needPadding: needPadding,
-      needAppearance: needAppearance,
-      hookToDisableInternalState: hookToDisableInternalState,
-      align: align
-    });
-  }));
-}
-
-TabWrapper.propTypes = TabWrapper_propTypes;
-TabWrapper.defaultProps = TabWrapper_defaultProps;
-export default TabWrapper;