@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Tag/Tag.js

@@ -0,0 +1,134 @@
+import React, { memo } from 'react';
+import { defaultProps } from '../../Tag/props/defaultProps';
+import { propTypes } from '../../Tag/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { useUniqueId } from '../../Provider/IdProvider';
+import style from '../../Tag/Tag.module.css';
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
+ */
+
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
+ */
+
+function Tag(props) {
+  let {
+    imageURL,
+    hasAvatar,
+    text,
+    onRemove,
+    initial,
+    active,
+    size,
+    rounded,
+    palette,
+    disabled,
+    closePalette,
+    onSelectTag,
+    closeTitle,
+    dataId,
+    dataSelectorId,
+    iconName,
+    iconSize,
+    tooltip,
+    avatarPalette,
+    customClass,
+    a11y,
+    needEffect,
+    isReadOnly,
+    id
+  } = props;
+
+  const handleSelect = e => {
+    e && e.preventDefault();
+    e.stopPropagation && e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+    onSelectTag && onSelectTag(id, e);
+  };
+
+  const handleRemove = e => {
+    e && e.preventDefault();
+    e.stopPropagation && e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+    onRemove && onRemove(id);
+  };
+
+  const getRef = el => {
+    let {
+      getRef
+    } = props;
+    getRef && getRef(el, id);
+  };
+
+  let {
+    customTag = '',
+    customTagClose = '',
+    customTagIcon = '',
+    customAvatar = ''
+  } = customClass;
+  let textSizes = size === 'small' ? style.smalltext : style.mediumtext;
+  const getNextAriaId = useUniqueId();
+  const getAriaId = getNextAriaId();
+  let {
+    clearLabel = 'Delete'
+  } = a11y;
+  let isDarkPalette = palette === 'dark';
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+    "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
+    "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
+    onClick: handleSelect,
+    ref: getRef,
+    "data-title": tooltip ? tooltip : text,
+    tabIndex: disabled ? '-1' : '0',
+    "aria-labelledby": getAriaId,
+    "data-selector-id": dataSelectorId
+  }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
+    className: style.avatar
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    palette: isDarkPalette ? 'info' : avatarPalette,
+    name: initial,
+    size: "small",
+    src: imageURL,
+    textPalette: isDarkPalette ? 'white' : '',
+    customClass: customAvatar
+  })) : null, iconName ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.icon} ${customTagIcon}`,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: `${style.text} ${textSizes}`,
+    "aria-hidden": true,
+    id: getAriaId
+  }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
+    customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
+          ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
+          ${customTagClose} ${style[`close${closePalette}`]}`,
+    dataId: `${dataId}_RemoveTag`,
+    "data-title": closeTitle,
+    onClick: handleRemove,
+    a11y: {
+      ariaLabel: clearLabel
+    }
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: "ZD-close2",
+    size: "8"
+  }))));
+}
+
+export default /*#__PURE__*/memo(Tag);
+Tag.defaultProps = defaultProps;
+Tag.propTypes = propTypes;

package/es/v1/TextBox/TextBox.js

@@ -0,0 +1,154 @@
+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, { useRef, useCallback } from 'react';
+import { defaultProps } from '../../TextBox/props/defaultProps';
+import { propTypes } from '../../TextBox/props/propTypes';
+import style from '../../TextBox/TextBox.module.css';
+export default function TextBox(props) {
+  let {
+    type,
+    name,
+    id,
+    maxLength,
+    placeHolder,
+    size,
+    onKeyUp,
+    isReadOnly,
+    isDisabled,
+    onKeyDown,
+    variant,
+    onClick,
+    needBorder,
+    value,
+    dataId,
+    autofocus,
+    needReadOnlyStyle,
+    needAppearance,
+    isClickable,
+    onKeyPress,
+    needEffect,
+    autoComplete,
+    borderColor,
+    onMouseDown,
+    htmlId,
+    a11y,
+    customClass,
+    isFocus,
+    customProps,
+    dataSelectorId,
+    onFocus,
+    onBlur,
+    onChange,
+    inputRef
+  } = props;
+  let {
+    ariaLabel,
+    ariaAutocomplete,
+    ariaControls,
+    ariaExpanded,
+    role,
+    ariaDescribedby,
+    ariaHaspopup,
+    ariaRequired,
+    ariaLabelledby,
+    ariaInvalid,
+    ariaOwns,
+    ariaActivedescendant,
+    ariaReadonly,
+    ariaMultiselectable
+  } = a11y;
+  let inputEle = useRef();
+  let options = useRef({});
+
+  if (isReadOnly) {
+    options.current.readOnly = true;
+  }
+
+  if (isDisabled) {
+    options.current.disabled = true;
+  }
+
+  if (autofocus) {
+    options.current.autoFocus = true;
+  }
+
+  if (!autoComplete) {
+    options.current.autoComplete = 'off';
+  }
+
+  const handleFocus = () => {
+    onFocus && onFocus(id, value, name);
+  };
+
+  const handleBlur = () => {
+    onBlur && onBlur(id, value, name);
+  };
+
+  const handleRef = useCallback(ref => {
+    inputEle.current = ref;
+    inputRef && inputRef(ref);
+  }, []);
+
+  const setFocus = () => {
+    if (inputEle.current) {
+      inputEle.current.focus({
+        preventScroll: true
+      });
+    }
+  };
+
+  const handleChange = e => {
+    e.preventDefault();
+    let {
+      value
+    } = e.target;
+    onChange && !isReadOnly && onChange(value, e);
+  };
+
+  let classList = needAppearance ? `${style.container} ${style[size]}  ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
+  value = value === null || value === undefined ? '' : value;
+  return /*#__PURE__*/React.createElement("input", _extends({
+    "aria-label": ariaLabel,
+    "aria-invalid": ariaInvalid,
+    "aria-autocomplete": ariaAutocomplete,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-describedby": ariaDescribedby,
+    role: role,
+    "aria-haspopup": ariaHaspopup,
+    "aria-required": ariaRequired,
+    "aria-labelledby": ariaLabelledby,
+    "aria-owns": ariaOwns,
+    "aria-activedescendant": ariaActivedescendant,
+    "aria-readonly": ariaReadonly,
+    "aria-multiselectable": ariaMultiselectable,
+    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
+    "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    id: htmlId || id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onClick: onClick,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    placeholder: placeHolder,
+    ref: handleRef,
+    type: type,
+    value: value,
+    onKeyPress: onKeyPress,
+    onMouseDown: onMouseDown
+  }, options.current, customProps));
+}
+TextBox.defaultProps = defaultProps;
+TextBox.propTypes = propTypes; // if (__DOCS__) {
+//   Textbox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -0,0 +1,158 @@
+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, { useState, useRef, useCallback } from 'react';
+import { defaultProps } from '../../TextBoxIcon/props/defaultProps';
+import { propTypes } from '../../TextBoxIcon/props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
+/* eslint-disable react/forbid-component-props */
+
+export default function TextBoxIcon(props) {
+  const {
+    type,
+    name,
+    id,
+    maxLength,
+    placeHolder,
+    size,
+    onKeyUp,
+    isReadOnly,
+    isDisabled,
+    children,
+    onKeyDown,
+    onClick,
+    value,
+    iconRotated,
+    needBorder,
+    variant,
+    onClear,
+    onChange,
+    title,
+    dataId,
+    dataSelectorId,
+    needReadOnlyStyle,
+    isClickable,
+    needEffect,
+    onKeyPress,
+    borderColor,
+    onMouseDown,
+    showClearIcon,
+    htmlId,
+    i18nKeys,
+    customClass,
+    iconOnHover,
+    isFocus,
+    onClearMouseDown,
+    customProps,
+    inputRef,
+    onFocus,
+    onBlur
+  } = props;
+  const {
+    customTBoxWrap = '',
+    customTextBox = '',
+    customTBoxIcon = '',
+    customTBoxLine = ''
+  } = customClass;
+  const {
+    clearText = 'Clear'
+  } = i18nKeys;
+  let {
+    TextBoxProps = {}
+  } = customProps;
+  const [isActive, setActive] = useState(false);
+  const inputEle = useRef();
+  const handleRef = useCallback(ele => {
+    inputEle.current = ele;
+    inputRef && inputRef(ele);
+  }, []);
+
+  const handleClear = () => {
+    onClear && onClear();
+    inputEle.current && inputEle.current.focus({
+      preventScroll: true
+    });
+  };
+
+  const handleFocus = e => {
+    if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
+      setActive(true);
+      onFocus && onFocus(e);
+    }
+  };
+
+  const handleBlur = e => {
+    setActive(false);
+    onBlur && onBlur(e);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+    dataSelectorId: dataSelectorId,
+    "data-title": isDisabled ? title : null
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBox, _extends({}, props, {
+    dataId: dataId,
+    size: size,
+    variant: variant,
+    type: type,
+    value: value,
+    name: name,
+    id: id,
+    htmlId: htmlId,
+    maxLength: maxLength,
+    placeHolder: placeHolder,
+    onKeyUp: onKeyUp,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    onBlur: handleBlur,
+    onClick: onClick,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled,
+    inputRef: handleRef,
+    needReadOnlyStyle: needReadOnlyStyle,
+    isClickable: isClickable,
+    onKeyPress: onKeyPress,
+    onMouseDown: onMouseDown,
+    needBorder: false,
+    customClass: customTextBox,
+    customProps: TextBoxProps
+  }))), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.iconContainer} ${customTBoxIcon}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row"
+  }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    className: `${btnStyle.buttonReset} ${style.icon}`,
+    onClick: handleClear,
+    dataId: `${dataId}_ClearIcon`,
+    "data-title": clearText,
+    tagName: "button"
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    "aria-hidden": true,
+    onMouseDown: onClearMouseDown
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-delete",
+    size: "14"
+  }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.icon} ${iconRotated ? style.rotated : ''}`
+  }, children) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
+    className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
+  }));
+}
+TextBoxIcon.defaultProps = defaultProps;
+TextBoxIcon.propTypes = propTypes; // if (__DOCS__) {
+//   TextBoxIcon.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/Textarea/Textarea.js

@@ -0,0 +1,102 @@
+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, { useRef } from 'react';
+import { defaultProps } from '../../Textarea/props/defaultProps';
+import { propTypes } from '../../Textarea/props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
+export default function Textarea(props) {
+  let {
+    size,
+    placeHolder,
+    needBorder,
+    text,
+    isDisabled,
+    resize,
+    maxLength,
+    animated,
+    variant,
+    getRef,
+    onFocus,
+    dataId,
+    dataSelectorId,
+    isReadOnly,
+    needAppearance,
+    needReadOnlyStyle,
+    borderColor,
+    needEffect,
+    autoFocus,
+    htmlId,
+    a11y,
+    customClass,
+    onChange,
+    onBlur,
+    onKeyDown
+  } = props;
+  let {
+    ariaLabel,
+    ariaLabelledby
+  } = a11y;
+
+  const handleChange = e => {
+    e && e.preventDefault();
+    onChange && onChange(e.target.value, e);
+  };
+
+  const handleBlur = e => {
+    e && e.preventDefault();
+    onBlur && onBlur(e.target.value, e);
+  };
+
+  const handleKeyDown = e => {
+    onKeyDown && onKeyDown(e);
+  };
+
+  let resizes = useRef({
+    horizontal: 'resizeX',
+    vertical: 'resizeY',
+    both: 'resizeboth',
+    none: 'noresize'
+  });
+  let options = useRef({});
+
+  if (isReadOnly) {
+    options.current.readOnly = 'readOnly';
+  }
+
+  if (isDisabled) {
+    options.current.disabled = 'disabled';
+  }
+
+  if (autoFocus) {
+    options.current.autoFocus = true;
+  }
+
+  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]}  ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
+  return /*#__PURE__*/React.createElement("textarea", _extends({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
+    placeholder: placeHolder
+  }, options.current, {
+    "data-id": dataId,
+    "data-test-id": dataId,
+    maxLength: maxLength,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: handleBlur,
+    ref: getRef,
+    value: text,
+    id: htmlId,
+    "data-selector-id": dataSelectorId
+  }));
+}
+Textarea.defaultProps = defaultProps;
+Textarea.propTypes = propTypes; // if (__DOCS__) {
+//   Textarea.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }