@zohodesk/components 1.3.2 → 1.3.4

package/README.md

@@ -2,6 +2,21 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+
+# 1.3.4
+
+- **MultiSelect** -  `renderCustomClearComponent` and `renderCustomToggleIndicator` props supported to customize the clear and toggle indicatior icon.
+- **Select** -  `renderCustomSearchClearComponent` and `renderCustomToggleIndicator` props supported to customize the search input clear and toggle indicatior icon.
+- **TextBoxIcon** -  `renderCustomClearComponent` prop supported to customize the input clear.  
+
+# 1.3.3
+
+- **Stencils**
+  - Added `isAnimated` prop to support Stencils without Animation.
+  - Added `square` shape in existing shape collection
+- **TabWrapper**
+  - Added `vertical-reverse, row-reverse` alignment suport in align propType
+
 # 1.3.2
 
 - **Popup**

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import Button from "../Button";
-import { render } from "@testing-library/react";
+import { render, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+afterEach(() => {
+  cleanup();
+});
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {
     const {
@@ -106,4 +111,132 @@ describe('Button component', () => {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
+});
+describe('Button - Unit Testing', () => {
+  test('Should render with text prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      text: "Click Me"
+    }));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should render with children prop', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should apply custom styles from customStyle prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customStyle: {
+        bold: 'customBoldClass'
+      }
+    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
+
+    expect(getByRole('button')).toHaveClass('customBoldClass');
+  });
+  test('Should apply custom classes from customClass prop', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customClass: {
+        customButton: 'customButtonClass'
+      }
+    }));
+    expect(getByRole('button')).toHaveClass('customButtonClass');
+  });
+  test('Should be disabled when disabled prop is true', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }));
+    expect(getByRole('button')).toBeDisabled();
+  });
+  test('Should expose element with getRef prop', () => {
+    const getRef = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      getRef: getRef
+    }));
+    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
+  });
+  test('Should trigger onClick function', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick
+    })); // fireEvent.click(getByRole('button'));
+
+    userEvent.click(getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should not trigger onClick when disabled', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true,
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render with correct data-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataId: "testButton"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
+  });
+  test('Should render with correct data-selector-id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      dataSelectorId: "testSelector"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
+  });
+  test('Should render with correct title attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      title: "Test Title"
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
+  });
+  test('Should render with correct id attribute', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      id: "buttonElement"
+    }));
+    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
+  });
+  test('Should apply a11y props correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      a11y: {
+        'aria-label': 'test'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
+  });
+  test('Should apply customProps correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
+  });
 });

package/es/DateTime/__tests__/YearView.spec.js

@@ -5,7 +5,6 @@ describe('YearView', () => {
   test('rendering the defult props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(YearView, null));
-    expect(asFragment()).toMatchSnapshot();
+    } = render( /*#__PURE__*/React.createElement(YearView, null)); // expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/MultiSelect/MultiSelect.js

@@ -882,7 +882,10 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
-      isFocus
+      isFocus,
+      isPopupReady,
+      renderCustomClearComponent,
+      renderCustomToggleIndicator
     } = this.props;
     let {
       isActive,
@@ -964,6 +967,12 @@ export class MultiSelectComponent extends React.Component {
         ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete,
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       isInline: true,
@@ -971,7 +980,11 @@ export class MultiSelectComponent extends React.Component {
       alignBox: "row",
       align: "vertical",
       className: style.rightPlaceholder
-    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, isShowClearIcon ? typeof renderCustomClearComponent === 'function' ? renderCustomClearComponent({
+      clearText,
+      isPopupOpened: isPopupReady,
+      handleClearAll: this.handleDeselectAll
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from "@testing-library/react";
+import { setGlobalId } from "../../Provider/IdProvider";
 import AdvancedMultiSelect from "../AdvancedMultiSelect";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('AdvancedMultiSelect', () => {
   test('rendering the defult props', () => {
     const mockOnChange = jest.fn();

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,9 @@ export const MultiSelect_propTypes = {
     TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  renderCustomClearComponent: PropTypes.func,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,

package/es/Provider/IdProvider.js

@@ -14,7 +14,7 @@ function getGlobalIdPrefix() {
   return globalPrefix;
 }
 
-function setGlobalId(id) {
+export function setGlobalId(id) {
   globalId = id;
 }
 

package/es/Select/Select.js

@@ -727,7 +727,9 @@ export class SelectComponent extends Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      renderCustomToggleIndicator,
+      renderCustomSearchClearComponent
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -807,14 +809,20 @@ export class SelectComponent extends Component {
           ...TextBoxProps
         }
       },
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       alignBox: "row",
       align: "both",
       className: style.rightPlaceholder
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: `${dataId}_downIcon`,
       "aria-hidden": true,
@@ -822,10 +830,10 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })), children ? /*#__PURE__*/React.createElement(Box, {
+    })) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: isPopupOpen ? style.rotate : '',
       dataId: `${dataId}_children`
-    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
+    }, children) : null) : null) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -916,7 +924,8 @@ export class SelectComponent extends Component {
         autoComplete: autoComplete,
         customProps: {
           TextBoxProps: DropdownSearchTextBoxProps
-        }
+        },
+        renderCustomClearComponent: renderCustomSearchClearComponent
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',