@zohodesk/components 1.0.0-temp-180 → 1.0.0-temp-182

package/lib/v1/Tab/props/defaultProps.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs_defaultProps = exports.Tab_defaultProps = exports.TabWrapper_defaultProps = exports.TabContent_defaultProps = exports.TabContentWrapper_defaultProps = void 0;
+var Tab_defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {},
+  dataSelectorId: 'tab'
+};
+exports.Tab_defaultProps = Tab_defaultProps;
+var TabContent_defaultProps = {
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
+};
+exports.TabContent_defaultProps = TabContent_defaultProps;
+var TabContentWrapper_defaultProps = {
+  children: [],
+  dataSelectorId: 'tabContentWrapper'
+};
+exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
+var Tabs_defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {},
+  dataSelectorId: 'tabs'
+};
+exports.Tabs_defaultProps = Tabs_defaultProps;
+var TabWrapper_defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
+};
+exports.TabWrapper_defaultProps = TabWrapper_defaultProps;

package/lib/v1/Tab/props/propTypes.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes = exports.TabContent_propTypes = exports.TabContentWrapper_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Tab_propTypes = {
+  activeClass: _propTypes["default"].string,
+  align: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getTabRef: _propTypes["default"].func,
+  href: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isLink: _propTypes["default"].bool,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  style: _propTypes["default"].object,
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  titlePosition: _propTypes["default"].oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  customProps: _propTypes["default"].object,
+  isVirtual: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
+};
+exports.Tab_propTypes = Tab_propTypes;
+var TabContent_propTypes = {
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: _propTypes["default"].string
+};
+exports.TabContent_propTypes = TabContent_propTypes;
+var TabContentWrapper_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  onScroll: _propTypes["default"].func,
+  selectedTab: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  dataSelectorId: _propTypes["default"].string
+};
+exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
+var Tabs_propTypes = {
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  boxPosition: _propTypes["default"].string,
+  childType: _propTypes["default"].elementType,
+  children: _propTypes["default"].array,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getContainerRef: _propTypes["default"].func,
+  highlightClass: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  isAnimate: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isResponsive: _propTypes["default"].bool,
+  itemActiveClass: _propTypes["default"].string,
+  itemClass: _propTypes["default"].string,
+  maxTabsCount: _propTypes["default"].number,
+  menuItemClass: _propTypes["default"].string,
+  minTabsCount: _propTypes["default"].number,
+  moreBoxClass: _propTypes["default"].string,
+  moreButtonActiveClass: _propTypes["default"].string,
+  moreButtonClass: _propTypes["default"].string,
+  moreContainerClass: _propTypes["default"].string,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needPadding: _propTypes["default"].bool,
+  needTabBorder: _propTypes["default"].bool,
+  onScroll: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  position: _propTypes["default"].string,
+  removeClose: _propTypes["default"].func,
+  selectedTab: _propTypes["default"].string,
+  showTitleInMoreOptions: _propTypes["default"].bool,
+  style: _propTypes["default"].object,
+  togglePopup: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  getTargetRef: _propTypes["default"].func,
+  containerClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    DropBoxProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object,
+    MoreButtonProps: _propTypes["default"].object
+  }),
+  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func,
+  dataSelectorId: _propTypes["default"].string
+};
+exports.Tabs_propTypes = Tabs_propTypes;
+var TabWrapper_propTypes = {
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  defaultTab: _propTypes["default"].string,
+  hookToDisableInternalState: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needPadding: _propTypes["default"].bool,
+  needTabBorder: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  dataSelectorId: _propTypes["default"].string
+};
+exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/v1/Tab/v1Tab.module.css

@@ -0,0 +1,100 @@
+.tab {
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.vertical {
+  height: 100% ;
+}
+.horizontal {
+  width: 100% ;
+  max-width: 100% ;
+}
+.textContainer,
+.tabText {
+  max-width: inherit ;
+}
+.tabText {
+  composes: dotted from '../../common/common.module.css';
+}
+.disabled {
+  cursor: not-allowed;
+}
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
+}
+
+.alpha,
+.beta,
+.delta {
+  transition: all var(--zd_transition2);
+}
+.alpha {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size18) ;
+}
+.tabAlpha {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_text);
+}
+.alphaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+  background-color: var(--zdt_tab_alpha_hover_bg);
+}
+.alphaActive {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_active_text);
+}
+.alphaActive_border, .betaActive_border {
+  border-color: var(--zdt_tab_alpha_active_border);
+}
+.deltaActive_border {
+  border-color: var(--zdt_tab_delta_active_border);
+}
+.beta {
+  font-size: var(--zd_font_size14) ;
+  line-height: 4.2857;
+  text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
+}
+.tabBeta {
+  composes: beta;
+  color: var(--zdt_tab_alpha_text);
+}
+.betaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.betaActive {
+  composes: beta;
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.delta {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
+}
+.tabDelta {
+  composes: delta;
+  color: var(--zdt_tab_alpha_text);
+}
+.deltaHover:hover {
+  color: var(--zdt_tab_alpha_active_text);
+}
+.deltaActive {
+  composes: delta;
+  color: var(--zdt_tab_alpha_active_text);
+}

package/lib/v1/Tab/v1TabContent.module.css

@@ -0,0 +1,4 @@
+/* $Id$ */
+.container {
+  position: relative;
+}

package/lib/v1/Tab/v1Tabs.module.css

@@ -0,0 +1,137 @@
+.tab {
+  position: relative;
+  z-index: 1;
+  --tab_position_gap: 22px;
+}
+
+.alpha {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .alpha_padding {
+  padding-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15) ;
+}
+
+.alpha_border {
+  border-width: 0 0 1px 0;
+  border-color: var(--zdt_tabs_alpha_border);
+  border-style: solid;
+}
+
+.alpha::after {
+  content: '';
+  position: absolute;
+  z-index: -2;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
+  border-radius: 100px / 5px;
+  box-shadow: var(--zd_bs_tabs_shadow);
+}
+
+[dir=ltr] .alpha::after {
+  left: 12% ;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12% ;
+}
+
+.alpha:before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
+  background: inherit;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
+}
+
+.beta {
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .beta_padding {
+  padding-left: var(--zd_size13) ;
+}
+
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13) ;
+}
+
+.beta_border {
+  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
+}
+
+.delta {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .delta_padding {
+  padding-left: var(--zd_size10) ;
+}
+
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10) ;
+}
+
+.delta_border {
+  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
+}
+
+.delta .highlight {
+  border-color: var(--zdt_tabs_delta_border);
+}
+
+.maxWidth {
+  max-width: 100% ;
+}
+
+.highlight {
+  position: absolute;
+  bottom: 0 ;
+  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
+}
+
+.lineAnimate {
+  transition: transform var(--zd_transition3) linear;
+}
+
+.menu {
+  position: relative;
+  cursor: pointer;
+}
+
+.menuBox {
+  max-height: var(--zd_size220) ;
+}
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+  right: calc(var(--tab_position_gap) * -1); 
+}
+
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+  left: calc(var(--tab_position_gap) * -1); 
+}
+
+.hidden {
+  visibility: hidden;
+}

package/lib/v1/Tag/Tag.js

@@ -9,9 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("../../Tag/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../Tag/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 

package/lib/v1/Tag/props/defaultProps.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  active: false,
+  closePalette: 'danger',
+  hasAvatar: false,
+  palette: 'default',
+  rounded: true,
+  size: 'medium',
+  dataId: 'tag',
+  customClass: {},
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false,
+  dataSelectorId: 'tag'
+};
+exports.defaultProps = defaultProps;

package/lib/v1/Tag/props/propTypes.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  active: _propTypes["default"].bool,
+  avatarPalette: _propTypes["default"].string,
+  closePalette: _propTypes["default"].oneOf(['danger', 'primary']),
+  closeTitle: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  getRef: _propTypes["default"].func,
+  hasAvatar: _propTypes["default"].bool,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  imageURL: _propTypes["default"].string,
+  initial: _propTypes["default"].string,
+  onRemove: _propTypes["default"].func,
+  onSelectTag: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink']),
+  rounded: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['small', 'medium']),
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  tooltip: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    customTag: _propTypes["default"].string,
+    customTagClose: _propTypes["default"].string,
+    customTagIcon: _propTypes["default"].string,
+    customAvatar: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    clearLabel: _propTypes["default"].string
+  }),
+  needEffect: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/lib/v1/TextBox/TextBox.js

@@ -9,9 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("../../TextBox/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../TextBox/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _TextBoxModule = _interopRequireDefault(require("../../TextBox/TextBox.module.css"));
 

package/lib/v1/TextBox/props/defaultProps.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  dataId: 'textBox',
+  needReadOnlyStyle: true,
+  needAppearance: true,
+  isClickable: false,
+  needEffect: true,
+  autoComplete: true,
+  borderColor: 'default',
+  a11y: {},
+  isFocus: false,
+  customProps: {},
+  dataSelectorId: 'textBox'
+};
+exports.defaultProps = defaultProps;

package/lib/v1/TextBox/props/propTypes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _propTypes;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var propTypes = (_propTypes = {
+  autofocus: _propTypes2["default"].bool,
+  borderColor: _propTypes2["default"].oneOf(['transparent', 'default']),
+  dataId: _propTypes2["default"].string,
+  htmlId: _propTypes2["default"].string,
+  id: _propTypes2["default"].string,
+  inputRef: _propTypes2["default"].func,
+  isClickable: _propTypes2["default"].bool,
+  isDisabled: _propTypes2["default"].bool,
+  isReadOnly: _propTypes2["default"].bool,
+  maxLength: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+  name: _propTypes2["default"].string,
+  needAppearance: _propTypes2["default"].bool,
+  needBorder: _propTypes2["default"].bool,
+  needEffect: _propTypes2["default"].bool,
+  needReadOnlyStyle: _propTypes2["default"].bool,
+  onBlur: _propTypes2["default"].func,
+  onChange: _propTypes2["default"].func,
+  onClick: _propTypes2["default"].func,
+  onFocus: _propTypes2["default"].func,
+  onKeyDown: _propTypes2["default"].func,
+  onKeyPress: _propTypes2["default"].func,
+  onKeyUp: _propTypes2["default"].func,
+  onMouseDown: _propTypes2["default"].func,
+  placeHolder: _propTypes2["default"].string,
+  size: _propTypes2["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  type: _propTypes2["default"].oneOf(['text', 'password', 'number']),
+  value: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+  variant: _propTypes2["default"].oneOf(['primary', 'secondary', 'default', 'light'])
+}, _defineProperty(_propTypes, "htmlId", _propTypes2["default"].string), _defineProperty(_propTypes, "customClass", _propTypes2["default"].string), _defineProperty(_propTypes, "htmlId", _propTypes2["default"].string), _defineProperty(_propTypes, "a11y", _propTypes2["default"].shape({
+  role: _propTypes2["default"].string,
+  ariaAutocomplete: _propTypes2["default"].string,
+  ariaControls: _propTypes2["default"].string,
+  ariaDescribedby: _propTypes2["default"].string,
+  ariaExpanded: _propTypes2["default"].bool,
+  ariaLabel: _propTypes2["default"].string,
+  autoComplete: _propTypes2["default"].bool,
+  ariaHaspopup: _propTypes2["default"].bool,
+  ariaRequired: _propTypes2["default"].bool,
+  ariaLabelledby: _propTypes2["default"].string,
+  ariaInvalid: _propTypes2["default"].bool,
+  ariaOwns: _propTypes2["default"].string,
+  ariaActivedescendant: _propTypes2["default"].string,
+  ariaReadonly: _propTypes2["default"].bool,
+  ariaMultiselectable: _propTypes2["default"].bool
+})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _defineProperty(_propTypes, "autoComplete", _propTypes2["default"].bool), _propTypes);
+exports.propTypes = propTypes;

package/lib/v1/TextBoxIcon/TextBoxIcon.js

@@ -9,9 +9,9 @@ exports["default"] = TextBoxIcon;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("../../TextBoxIcon/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../TextBoxIcon/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 

package/lib/v1/TextBoxIcon/props/defaultProps.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  iconRotated: false,
+  maxLength: '250',
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  needReadOnlyStyle: true,
+  isClickable: false,
+  needEffect: true,
+  dataId: 'textBoxIcon',
+  borderColor: 'default',
+  showClearIcon: false,
+  i18nKeys: {},
+  customClass: {},
+  iconOnHover: false,
+  isFocus: false,
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
+};
+exports.defaultProps = defaultProps;