@zohodesk/components 1.5.4 → 1.5.6

package/README.md

@@ -2,6 +2,22 @@
 
 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.5.6
+
+- **ListItemWithRadio, ListItemWithCheckBox**
+  - `needBorder` prop supported
+
+- **ArrowIcon**
+  - Fixes of visible state and color from the container hover
+
+- **AppContainer**  
+  - The --zd-font-family variable now includes an empty string ('') as its fallback font-family value.
+
+# 1.5.5
+
+- **Popup**
+  - Refactored to use the `Popup` component from `dotkit@1.0.5`.
+
 # 1.5.4
 
 - **Tag**
@@ -26,6 +42,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - Font Family Migrated to Font-weight across all css  (Impacted)
 
+
 # 1.4.23
 
 - **Typography**

package/es/AppContainer/AppContainer.module.css

@@ -10,7 +10,7 @@
 }
 .container, .container button, .container input, .container textarea ,.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
-import { positionMapping } from "../DropBoxPositionMapping.js";
+import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/utils/isMobilePopover.js

@@ -1,17 +1,6 @@
 import { getLibraryConfig } from "../../Provider/Config";
+import { isMobilePopover as isMobile } from '@zohodesk/dotkit/es/utils/device.js';
 export default function isMobilePopover(needResponsive) {
-  //   let { needResponsive } = props;
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
-  return isModel ? true : false;
+  const mobileWidth = getLibraryConfig('mobileWidth');
+  return isMobile(needResponsive, mobileWidth);
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -52,6 +52,7 @@ export default class ListItemWithCheckBox extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       dataId,
       dataSelectorId,
       title,
@@ -88,6 +89,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       dataSelectorId: dataSelectorId,

package/es/ListItem/ListItemWithRadio.js

@@ -52,6 +52,7 @@ export default class ListItemWithRadio extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       id,
       dataId,
       dataSelectorId,
@@ -89,6 +90,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: dataId,
       dataSelectorId: dataSelectorId,

package/es/ListItem/props/defaultProps.js

@@ -56,6 +56,7 @@ export const ListItemWithCheckBoxDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',
@@ -91,6 +92,7 @@ export const ListItemWithRadioDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',

package/es/ListItem/props/propTypes.js

@@ -137,6 +137,7 @@ export const ListItemWithCheckBox_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
@@ -213,6 +214,7 @@ export const ListItemWithRadio_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),