@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/common/customscroll.module.css

@@ -0,0 +1,142 @@
+.scroll {
+  /*  Variable:Ignore  */
+  --zd-scroll-width: 12px;
+  /*  Variable:Ignore  */
+  --zd-scroll-height: 12px;
+  --zd-scroll-bg: var(--zdt_customscroll_default_bg);
+  --zd-scroll-corner-bg: transparent;
+  --zd-scroll-thump: var(--zdt_customscroll_thump_bg);
+  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
+  --zd-scroll-border: var(--zdt_customscroll_border);
+}
+
+.scroll[data-scroll-palette='dark'],
+.scroll [data-scroll-palette='dark'] {
+  --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
+  --zd-scroll-thump: var(--zdt_customscroll_thump_dark_bg);
+  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
+  --zd-scroll-border: var(--zdt_customscroll_dark_border);
+}
+
+.scroll,
+.scroll * {
+  /* css:theme-validation:ignore */
+  scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
+  scrollbar-width: thin;
+  /* css:theme-validation:ignore */
+  -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
+  /* css:theme-validation:ignore */
+  -ms-scrollbar-face-color: var(--zd-scroll-thump);
+}
+
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
+  background: var(--zd-scroll-corner-bg);
+}
+
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
+  background: var(--zd-scroll-bg);
+}
+
+.scroll::-webkit-scrollbar:horizontal,
+.scroll ::-webkit-scrollbar:horizontal {
+  height: var(--zd-scroll-height);
+}
+
+.scroll::-webkit-scrollbar:vertical,
+.scroll ::-webkit-scrollbar:vertical {
+  width: var(--zd-scroll-width);
+}
+
+.scroll::-webkit-scrollbar-button,
+.scroll ::-webkit-scrollbar-button {
+  display: none;
+  width: 0 ;
+  height: 0 ;
+}
+
+[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
+  border-color: var(--zd-scroll-border);
+}
+
+.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
+  border-color: var(--zd-scroll-border);
+}
+
+.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
+  background: inherit;
+}
+
+.scroll::-webkit-scrollbar-thumb,
+.scroll ::-webkit-scrollbar-thumb {
+  /* css:theme-validation:ignore */
+  /* display: none; */
+}
+
+.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: var(--zd-scroll-thump);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
+  background: var(--zd-scroll-thump-hoverbg);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+}
+
+/* .scroll:hover > ::-webkit-scrollbar-thumb,
+.scroll *:hover > ::-webkit-scrollbar-thumb {
+  display: block;
+} */
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
+  /* css:theme-validation:ignore */
+}
+.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
+  background: var(--zd-scroll-corner-bg);
+}
+
+.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
+  background: inherit;
+}

package/es/common/reset.module.css

@@ -0,0 +1,13 @@
+*,
+:after,
+:before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+html {
+  /*  Variable:Ignore  */
+  font-size: 16px;
+}

package/es/common/transition.module.css

@@ -0,0 +1,146 @@
+.zoomInEnter,
+.zoomInLeave.zoomInLeaveActive {
+  opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
+  transform: perspective(1px) scale(1.5) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.zoomInEnter.zoomInEnterActive,
+.zoomInLeave {
+  opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
+  transform: perspective(1px) scale(1) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.scaleInEnter,
+.scaleInLeave.scaleInLeaveActive {
+  opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.scaleInEnter.scaleInEnterActive,
+.scaleInLeave {
+  opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter,
+.fadeInLeave.fadeInLeaveActive {
+  opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter.fadeInEnterActive,
+.fadeInLeave {
+  opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideLeftEnter,
+.slideLeftLeave.slideLeftLeaveActive {
+  opacity: 0;
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
+.slideLeftEnter.slideLeftEnterActive,
+.slideLeftLeave {
+  opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
+  transform: translateX(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter,
+.slideDownLeave.slideDownLeaveActive {
+  opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
+  transform: translateY(-100%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter.slideDownEnterActive,
+.slideDownLeave {
+  opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
+  transform: translateY(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.skewInEnter,
+.skewInLeave.skewInLeaveActive {
+  opacity: 0;
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter.skewInEnterActive,
+.skewInLeave {
+  opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
+  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.defaultEnter,
+.defaultLeave.defaultLeaveActive {
+  display: none;
+}
+.defaultEnter.defaultEnterActive,
+.defaultLeave {
+  display: block;
+}

package/es/components_layer.module.css

@@ -0,0 +1 @@
+@layer dot-components, dot-components.theme, dot-components.core, dot-components.reset, dot-components.base, dot-components.animation, dot-components.transition, dot-components.utility, dot-components.layout, dot-components.semantic, dot-components.atom, dot-components.molecule, dot-components.organism, dot-components.page, dot-components.effect;

package/es/css.js

@@ -0,0 +1,41 @@
+import "./common/reset.module.css";
+import "./common/basic.module.css";
+import '@zohodesk/variables/lib/colorVariables.module.css';
+import '@zohodesk/variables/lib/sizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/icons/lib/Icon/Icon.module.css';
+import "./common/animation.module.css";
+import "./common/transition.module.css";
+import "./common/common.module.css";
+import "./Layout/Layout.module.css";
+import "./Avatar/Avatar.module.css";
+import "./AvatarTeam/AvatarTeam.module.css";
+import "./Button/Button.module.css";
+import "./Switch/Switch.module.css";
+import "./TextBox/TextBox.module.css";
+import "./Radio/Radio.module.css";
+import "./Label/Label.module.css";
+import "./Label/LabelColors.module.css";
+import "./CheckBox/CheckBox.module.css";
+import "./Textarea/Textarea.module.css";
+import "./Tooltip/Tooltip.module.css";
+import "./Tab/Tab.module.css";
+import "./Tab/Tabs.module.css";
+import "./Tab/TabContent.module.css";
+import "./TextBoxIcon/TextBoxIcon.module.css";
+import "./Ribbon/Ribbon.module.css";
+import "./MultiSelect/MultiSelect.module.css";
+import "./Select/Select.module.css";
+import "./ListItem/ListItem.module.css";
+import "./Tag/Tag.module.css";
+import "./Stencils/Stencils.module.css";
+import "./PopOver/PopOver.module.css";
+import "./DropDown/DropDown.module.css";
+import "./DropBox/css/DropBox.module.css";
+import "./DropBox/DropBoxElement/css/DropBoxElement.module.css";
+import "./DateTime/DateTime.module.css";
+import "./DateTime/DateWidget.module.css";
+import "./Card/Card.module.css";
+import "./Buttongroup/Buttongroup.module.css";
+import "./AppContainer/AppContainer.module.css";
+import "./RippleEffect/RippleEffect.module.css";

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { propTypes, RefElement_propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps"; //Components
+
+import Modal from "../../Modal/Modal";
+let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
+  let {
+    Element,
+    elementProps,
+    renderChildren,
+    isChildrenRestrictionNeeded = true,
+    isActive
+  } = props;
+  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    forwardRef: ref
+  })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    isActive,
+    forwardRef: ref
+  }));
+});
+RefElement.propTypes = RefElement_propTypes;
+export { RefElement };
+export default class PortalLayer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: this.props.initialState
+    };
+    this.updateState = this.updateState.bind(this);
+    this.getState = this.getState.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props,
+        {
+      isActive: prevActive
+    } = prevProps;
+    isActive = Boolean(isActive), prevActive = Boolean(prevActive);
+
+    if (typeof isActive !== 'undefined' && isActive != prevActive && Boolean(this.state.isOpen) != isActive) {
+      this.setState({
+        isOpen: isActive
+      });
+    }
+  }
+
+  updateState(alertState) {
+    if (typeof alertState === 'boolean') {
+      this.setState({
+        isOpen: alertState
+      });
+    } else {
+      this.setState(alertState);
+    }
+  }
+
+  getState() {
+    return Object.keys(this.state).length == 1 ? this.state.isOpen : this.state;
+  }
+
+  componentDidMount() {
+    let {
+      saveUpdateFunction,
+      saveGetFunction,
+      name
+    } = this.props;
+    saveUpdateFunction && saveUpdateFunction(this.updateState, name);
+    saveGetFunction && saveGetFunction(this.getState, name);
+  }
+
+  render() {
+    let {
+      children,
+      renderChildren,
+      portalId,
+      autoZIndexNeeded,
+      isChildrenRestrictionNeeded
+    } = this.props,
+        {
+      isOpen = false
+    } = this.state;
+    let Element = children && children.type,
+        elementProps = children && children.props;
+    return /*#__PURE__*/React.createElement(Modal, {
+      autoZIndexNeeded: autoZIndexNeeded,
+      portalId: portalId,
+      isActive: isOpen
+    }, /*#__PURE__*/React.createElement(RefElement, {
+      Element: Element,
+      elementProps: elementProps,
+      renderChildren: renderChildren,
+      isChildrenRestrictionNeeded: isChildrenRestrictionNeeded,
+      isActive: isOpen
+    }));
+  }
+
+}
+PortalLayer.defaultProps = defaultProps;
+PortalLayer.propTypes = propTypes; // if (__DOCS__) {
+//   PortalLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/deprecated/PortalLayer/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  autoZIndexNeeded: true,
+  isChildrenRestrictionNeeded: false,
+  portalId: 'portal1'
+};

package/es/deprecated/PortalLayer/props/propTypes.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoZIndexNeeded: PropTypes.bool,
+  children: PropTypes.element,
+  initialState: PropTypes.bool,
+  isChildrenRestrictionNeeded: PropTypes.bool,
+  portalId: PropTypes.string,
+  renderChildren: PropTypes.func,
+  saveGetFunction: PropTypes.func,
+  saveUpdateFunction: PropTypes.func,
+  isActive: PropTypes.bool,
+  name: PropTypes.string
+};
+export const RefElement_propTypes = {
+  Element: PropTypes.node,
+  elementProps: PropTypes.object,
+  renderChildren: PropTypes.func,
+  isChildrenRestrictionNeeded: PropTypes.bool,
+  isActive: PropTypes.bool
+};

package/es/deprecated/Switch/Switch.js

@@ -0,0 +1,94 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../../v1/Layout";
+import Label from "../../v1/Label/Label";
+import style from "../../Switch/Switch.module.css";
+
+const Switch = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    size,
+    text,
+    labelSize,
+    labelPalette,
+    title,
+    disableTitle,
+    dataId,
+    dataSelectorId,
+    customClass,
+    customProps
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    SwitchProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customSwitchWrap = '',
+    customSwitch = '',
+    customSwitchSize = '',
+    customLabel = ''
+  } = customClass;
+  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    isInline: true,
+    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
+    "data-title": disabled ? disableTitle : title,
+    "aria-checked": checked,
+    role: "switch",
+    dataSelectorId: dataSelectorId
+  }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
+    className: `${style[size]} ${customSwitchSize}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${style.input} ${checked ? style.checked : ''}`,
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    readOnly: isReadOnly,
+    onClick: !disabled || !isReadOnly ? onChange : null
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
+  })), text && /*#__PURE__*/React.createElement(Label, _extends({
+    text: text,
+    palette: labelPalette,
+    id: id,
+    size: labelSize,
+    type: "subtitle",
+    onClick: !disabled || !isReadOnly ? onChange : null,
+    customClass: customLabel
+  }, LabelProps)));
+};
+
+Switch.defaultProps = defaultProps;
+Switch.propTypes = propTypes;
+export default Switch; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

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

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};

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

@@ -0,0 +1,28 @@
+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']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  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
+  })
+};

package/es/index.js

@@ -0,0 +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 { _PopOver as PopOver };
+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 { _utils as utils };
+export * from "./VelocityAnimation";
+export * from "./semantic";
+export { default as Typography } from "./Typography/Typography";