@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

package/README.md

@@ -32,6 +32,22 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.53
+
+- **CheckBox** - Disabled State CheckBox Color Fixed
+- **Radio** - ReadOnly State Radio Cursor and color Fixed
+- **Textarea** - isFocus Prop added
+- **AdvancedGroupMultiSelect** - isFocus Prop added
+- **AdvancedMultiSelect** - isFocus Prop added
+- **MultiSelect** - isFocus Prop added
+- **DateWidget** - onDropboxClose,renderCustomHeader,renderCustomFooter Props added
+- **DateTime** - renderCustomHeader,renderCustomFooter Props added
+- **GroupSelect** - customProps supported
+
+# 1.2.52
+
+- **Typography** - component added in v0
+
 # 1.2.51
 
 - **Popup** - Fixed issue: Error on unmount when target ref is not available.

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from './props/defaultProps';
-import { Accordion_propTypes } from './props/propTypes';
+import { Accordion_defaultProps } from "./props/defaultProps";
+import { Accordion_propTypes } from "./props/propTypes";
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from './props/defaultProps';
-import { AccordionItem_propTypes } from './props/propTypes';
-import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
-import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { AccordionItem_defaultProps } from "./props/defaultProps";
+import { AccordionItem_propTypes } from "./props/propTypes";
+import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
+import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Accordion from '../Accordion';
+import Accordion from "../Accordion";
 describe('Accordion', () => {
   test('rendering the defult props', () => {
     const {

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccordionItem from '../AccordionItem';
+import AccordionItem from "../AccordionItem";
 describe('AccordionItem', () => {
   test('rendering the defult props', () => {
     const mockOnClick = jest.fn();

package/es/Accordion/index.js

@@ -1,2 +1,2 @@
-export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
+export { default as Accordion } from "./Accordion";
+export { default as AccordionItem } from "./AccordionItem";

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from './utils';
+import { animationStyle } from "./utils";
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Animation from '../Animation';
+import Animation from "../Animation";
 describe('Animation', () => {
   test('rendering the defult props', () => {
     const {

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from '../common/transition.module.css';
+import style from "../common/transition.module.css";
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { Container, Box } from '../Layout';
-import Tooltip from '../Tooltip/Tooltip';
-import '../common/basic.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../Layout";
+import Tooltip from "../Tooltip/Tooltip";
+import "../common/basic.module.css";
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import '../common/a11y.module.css';
-import '../common/boxShadow.module.css';
-import style from './AppContainer.module.css';
-import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
+import "../common/a11y.module.css";
+import "../common/boxShadow.module.css";
+import style from "./AppContainer.module.css";
+import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);

package/es/AppContainer/__tests__/AppContainer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AppContainer from '../AppContainer.js';
+import AppContainer from "../AppContainer.js";
 describe('AppContainer', () => {
   test('rendering the defult props', () => {
     const {

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getInitial } from '../utils/getInitial';
-import AvatarSize from '../Provider/AvatarSize';
-import style from './Avatar.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getInitial } from "../utils/getInitial";
+import AvatarSize from "../Provider/AvatarSize";
+import style from "./Avatar.module.css";
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props

package/es/Avatar/__tests__/Avatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Avatar from '../Avatar.js';
+import Avatar from "../Avatar.js";
 describe('Avatar', () => {
   test('rendering the defult props', () => {
     const {

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Avatar from '../Avatar/Avatar';
-import style from './AvatarTeam.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Avatar from "../Avatar/Avatar";
+import style from "./AvatarTeam.module.css";
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarTeam from '../AvatarTeam.js';
+import AvatarTeam from "../AvatarTeam.js";
 describe('AvatarTeam', () => {
   test('rendering the defult props', () => {
     const {

package/es/Button/Button.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import cssJSLogic from './css/cssJSLogic';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import style from './css/Button.module.css';
+import style from "./css/Button.module.css";
 /*
 Button text and children props?
 use children for both cases

package/es/Button/__tests__/Button.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../Button';
+import Button from "../Button";
 import { render } from "@testing-library/react";
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {

package/es/Button/index.js

@@ -1,2 +1,2 @@
-export { default as Button } from './Button';
-export { default as ButtonPropTypes } from './props/propTypes';
+export { default as Button } from "./Button";
+export { default as ButtonPropTypes } from "./props/propTypes";

package/es/Button/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { dummyFunction } from '../../utils/dummyFunction';
+import { dummyFunction } from "../../utils/dummyFunction";
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './Buttongroup.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./Buttongroup.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Buttongroup from '../Buttongroup.js';
+import Buttongroup from "../Buttongroup.js";
 import { render } from "@testing-library/react";
 describe('Buttongrop - ', () => {
   test('rendering the default props', () => {

package/es/Card/Card.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
-import { Container, Box } from '../Layout';
-import { getLibraryConfig } from '../Provider/Config';
-import style from './Card.module.css';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
+import { Container, Box } from "../Layout";
+import { getLibraryConfig } from "../Provider/Config";
+import style from "./Card.module.css";
 /* eslint-disable react/forbid-component-props */
 
 /*

package/es/Card/__tests__/Card.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Card from '../Card';
+import Card from "../Card";
 describe('Card', () => {
   test('rendering the defult props', () => {
     const {

package/es/Card/index.js

@@ -1,4 +1,4 @@
-export { default as Card } from './Card';
-export { CardHeader } from './Card';
-export { CardContent } from './Card';
-export { CardFooter } from './Card';
+export { default as Card } from "./Card";
+export { CardHeader } from "./Card";
+export { CardContent } from "./Card";
+export { CardFooter } from "./Card";

package/es/CheckBox/CheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps';
-import Label from '../Label/Label';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import style from './CheckBox.module.css';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import Label from "../Label/Label";
+import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./CheckBox.module.css";
 export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);
@@ -74,17 +74,18 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
+    const isEditable = !(isReadOnly || disabled);
     return /*#__PURE__*/React.createElement(Container, {
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
       alignBox: "row",
       align: "vertical",
-      className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
-        ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
+      className: `${style.container} ${accessMode} ${!isEditable ? '' : `${style[palette]}`} 
+        ${checked ? `${style[`checked${palette}`]}` : ''}  ${customCheckBox}`,
       "data-title": toolTip,
-      onClick: isReadOnly || disabled ? null : this.onChange,
-      tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+      onClick: !isEditable ? null : this.onChange,
+      tabIndex: !isEditable || ariaHidden ? '-1' : '0',
       "aria-checked": ariaChecked,
       eleRef: this.handleGetContainerRef,
       role: role,
@@ -94,7 +95,7 @@ export default class CheckBox extends React.Component {
       "data-selector-id": dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
+      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,

package/es/CheckBox/CheckBox.module.css

@@ -97,10 +97,10 @@
   margin-right: var(--zd_size6) ;
 }
 
-.checkedprimary,
+ .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-}
+} 
 .primary:hover
 /* .primary:focus  */
 {
@@ -138,6 +138,9 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+.disabled {
+  opacity: 0.7
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckBox from '../CheckBox';
+import CheckBox from "../CheckBox";
 import { render } from "@testing-library/react";
 describe('CheckBox component', () => {
   test('Should be render with the basic set of default props', () => {