@zohodesk/components 1.6.27 → 1.6.29

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.6.29
+
+- Static CSS utility classes have been adopted across all CSS files using global composes.
+
+## 1.6.28
+
+- **DividerLine** - New component introduced
+- **DropDownSeparator** - Adopted `DividerLine` component
+- **SelectWithAvatar, SelectWithIcon** - `renderCustomSelectedValue` prop supported
+- **AdvancedMultiSelect, AdvancedGroupMultiSelect, SelectedOptions** - Fixed an issue where the remove option was displayed for selected values when disabled
+- **Tooltip** - Corrected the fallback behavior for nearby `data-title` attributes by ignoring empty values
+
 ## 1.6.27
 
 - **DateWidget** - RTL support: Date and time render order now correctly reversed in RTL direction for proper text flow alignment.

package/es/Avatar/Avatar.module.css

@@ -14,9 +14,8 @@
 
 .avatar {
   composes: varClass;
-  position: relative;
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   font-size: var(--avatar_font_size);
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
@@ -36,11 +35,8 @@
 }
 
 .shadow {
-  position: absolute;
-  height: 100% ;
-  width: 100% ;
+  composes: d-absolute d-size-full d-pointer-events-none from global;
   top: 0 ;
-  pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
@@ -69,9 +65,7 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
@@ -120,7 +114,7 @@
 }
 
 .none {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .default {
@@ -136,8 +130,8 @@
 }
 
 .initial {
+  composes: d-inline-block from global;
   text-transform: var(--avatar_text_transform);
-  display: inline-block;
 }
 
 .xxsmall {

package/es/AvatarTeam/AvatarTeam.module.css

@@ -16,10 +16,8 @@
   --avatarteam_top_top: var(--zd_size1);
 }
 .container {
-  position: relative;
-  display: inline-block;
+  composes: d-inline-block d-relative d-align-middle from global;
   font-size: 0 ;
-  vertical-align: middle;
 }
 .team {
   composes: varClass;

package/es/Button/css/Button.module.css

@@ -46,7 +46,7 @@
 .container {
   composes: native;
   composes: dotted from '../../common/common.module.css';
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
   font-weight: var(--button_font_weight);
@@ -94,17 +94,17 @@
 }
 
 .mediumBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size42);
   --button_min_width: var(--zd_size42);
   --button_font_size: var(--zd_font_size10);
-  text-align: center;
 }
 
 .smallBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size22);
   --button_min_width: var(--zd_size22);
   --button_font_size: var(--zd_font_size13);
-  text-align: center;
 }
 
 .smallBtnprimary,
@@ -272,10 +272,10 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
-  background: inherit;
+  background-color: inherit;
   border-radius: inherit;
 }
 
@@ -290,7 +290,7 @@
 }
 
 .loading {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   width: var(--zd_size20) ;
   height: var(--zd_size20) ;
@@ -311,12 +311,10 @@
 }
 
 .loadingelement {
+  composes: d-inline-block d-relative d-origin-center from global;
   height: inherit ;
   width: inherit ;
-  position: relative;
-  display: inline-block;
   border-radius: 50%;
-  transform-origin: 50%;
 }
 
 [dir=ltr] .loadingelement {

package/es/Card/Card.module.css

@@ -1,9 +1,9 @@
 .notScroll {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .scroll {
-  /* background: var(--dot_white);
+  /* background-color: var(--dot_white);
   position: relative; */
 }
 

package/es/CheckBox/CheckBox.module.css

@@ -23,10 +23,9 @@
   --checkbox_cursor: default;
 }
 .cbBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 .tickPath {
   composes: cbBox;
@@ -50,9 +49,8 @@
 }
 
 .checkbox {
-  position: relative;
+  composes: d-block d-relative from global;
   font-size: 0 ;
-  display: block;
 }
 .tick {
   position: absolute;

package/es/DateTime/DateTime.module.css

@@ -16,7 +16,7 @@
 .header {
   min-height: var(--zd_size36) ;
   composes: boxPadding;
-  text-align: center;
+  composes: d-text-center from global;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
@@ -27,10 +27,10 @@
 }
 
 .grid {
+  composes: d-text-center from global;
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
@@ -38,21 +38,18 @@
 
 .thArrow,
 .datesStr {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
 }
 
 .navigation {
@@ -89,8 +86,8 @@
   composes: dotted from '../common/common.module.css';
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
   composes: semibold;
+  composes: d-uppercase from global;
   width: var(--zd_size31) ;
 }
 
@@ -143,8 +140,8 @@
 }
 
 .inActiveDate {
+  composes: d-cursor-no-drop from global;
   color: var(--zdt_datetime_invalid_text);
-  cursor: no-drop;
 }
 
 .inActiveDate:hover {
@@ -167,11 +164,10 @@
 }
 
 .dropDown {
+  composes: d-inline-block d-relative from global;
   width: var(--zd_size60) ;
-  display: inline-block;
   margin-inline: var(--zd_size4) ;
   margin-block:0 ;
-  position: relative;
 }
 
 .footer {
@@ -185,7 +181,7 @@
 }
 
 .space {
-  display: inline-block;
+  composes: d-inline-block from global;
   width: var(--zd_size15) ;
 }
 
@@ -195,7 +191,7 @@
 }
 
 .dateText {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .dateText:hover .downArrow {
@@ -205,18 +201,15 @@
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11) ;
-  text-transform: uppercase;
   color: var(--zdt_datetime_text);
   margin-block-start: var(--zd_size14) ;
   composes: semibold;
-  display: block;
+  composes: d-block d-uppercase from global;
 }
 
 .yearContainer {
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
-  width: 100% ;
-  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
@@ -228,11 +221,11 @@
 }
 
 .subContainer {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .dropBox {
-  width: 100% ;
+  composes: d-w-full from global;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/es/DateTime/DateWidget.module.css

@@ -1,20 +1,22 @@
 /* $Id */
 .container {
-  position: relative;
   composes: offSelection from '../common/common.module.css';
+  composes: d-relative from global;
+}
+.datePickIcon {
+  composes: d-h-full from global;
 }
-.datePickIcon{height:100%  }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 .textBox {
-  position: relative;
+  composes: d-relative from global;
 }
 .inputLine {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);

package/es/DateTime/YearView.module.css

@@ -3,6 +3,7 @@
 }
 
 .month {
+  composes: d-text-center d-cursor-pointer from global;
   width: 30.333%;
   margin-block:0 var(--zd_size1) ;
   margin-inline:0 ;
@@ -10,8 +11,6 @@
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
-  text-align: center;
-  cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
@@ -34,9 +33,9 @@
 }
 
 .year {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size7) ;
   padding-inline:0 ;
-  cursor: pointer;
 }
 
 .year:hover .yearText,
@@ -55,7 +54,7 @@
 }
 
 .isActive {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 
 .isActive .yearText {
@@ -77,21 +76,19 @@
 }
 
 .container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
   composes: boxPadding;
+  composes: d-overflow-x-hidden d-overflow-y-auto d-h-full from global;
   background-color: var(--zdt_yearview_default_bg);
 }
 
 .yearContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size135) ;
-  overflow: hidden;
   transition: height var(--zd_transition1);
   padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
+  composes: d-p-0 from global;
   height: 0 ;
-  padding: 0 ;
 }

package/es/DividerLine/DividerLine.js

@@ -0,0 +1,40 @@
+import { cn } from "@dot-system/css-utility";
+
+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 cssJSLogic from "./css/cssJSLogic";
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes";
+const DividerLine = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    customId,
+    testId,
+    orientation,
+    customAttributes,
+    a11yAttributes
+  } = props;
+  const {
+    wrapperClass
+  } = cssJSLogic({
+    props
+  });
+  const {
+    wrapper: wrapperTagAttrs
+  } = customAttributes;
+  const {
+    wrapper: wrapperA11yAttrs
+  } = a11yAttributes;
+  return /*#__PURE__*/React.createElement("hr", _extends({}, wrapperTagAttrs, {
+    "aria-orientation": orientation
+  }, wrapperA11yAttrs, {
+    ref: ref,
+    className: cn(wrapperClass),
+    "data-id": customId,
+    "data-test-id": testId
+  }));
+});
+DividerLine.displayName = 'DividerLine';
+DividerLine.defaultProps = defaultProps;
+DividerLine.propTypes = propTypes;
+export default DividerLine;

package/es/DividerLine/__tests__/DividerLine.spec.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import DividerLine from "../DividerLine";
+describe('DividerLine - Snapshot', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['horizontal', 'vertical'])('Render with orientation as %s', orientation => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      orientation: orientation
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['solid', 'dashed', 'dotted'])('Render with lineStyle as %s', lineStyle => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      lineStyle: lineStyle
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['default', 'secondary', 'tertiary', 'brand'])('Render with color as %s', color => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      color: color
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customId: "divider-line-customId",
+      testId: "divider-line-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customAttributes: {
+        wrapper: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      a11yAttributes: {
+        wrapper: {
+          'aria-label': 'Section divider'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customClass: {
+        wrapper: 'my-divider-line'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/DividerLine/__tests__/__snapshots__/DividerLine.spec.js.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`DividerLine - Snapshot Render with a11yAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-label="Section divider"
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as brand 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorBrand"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as default 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as secondary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorSecondary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as tertiary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorTertiary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-custom-attr="true"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault my-divider-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-id="divider-line-customId"
+    data-test-id="divider-line-testId"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dashed 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dashed colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dotted 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dotted colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as solid 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as horizontal 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as vertical 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="vertical"
+    class="wrapper vertical solid colorDefault"
+  />
+</DocumentFragment>
+`;

package/es/DividerLine/constants/index.js

@@ -0,0 +1,29 @@
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+export const LINE_STYLE = {
+  SOLID: 'solid',
+  DASHED: 'dashed',
+  DOTTED: 'dotted'
+};
+export const LINE_STYLE_CLASS_MAP = {
+  [LINE_STYLE.SOLID]: 'solid',
+  [LINE_STYLE.DASHED]: 'dashed',
+  [LINE_STYLE.DOTTED]: 'dotted'
+};
+export const COLOR = {
+  DEFAULT: 'default',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  BRAND: 'brand'
+};
+export const COLOR_CLASS_MAP = {
+  [COLOR.DEFAULT]: 'colorDefault',
+  [COLOR.SECONDARY]: 'colorSecondary',
+  [COLOR.TERTIARY]: 'colorTertiary',
+  [COLOR.BRAND]: 'colorBrand'
+};
+export const DEFAULT_ORIENTATION = ORIENTATION.HORIZONTAL;
+export const DEFAULT_LINE_STYLE = LINE_STYLE.SOLID;
+export const DEFAULT_COLOR = COLOR.DEFAULT;