@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/DateTime/dateFormatUtils/index.js

@@ -9,9 +9,7 @@ import { getDateText } from "./dateFormat";
 export function convertYearToTwoDigit(year) {
   return parseInt(year.toString().slice(-2));
 }
-export function addZero() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let length = arguments.length > 1 ? arguments[1] : undefined;
+export function addZero(value = '', length) {
   let newValue = value.toString();
 
   for (let i = 0; i < length; i++) {
@@ -98,9 +96,7 @@ export function getYearDetails(yearLength) {
     currentYear: year
   };
 }
-export function convertTwoDigitToYear() {
-  let digitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let selectedYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function convertTwoDigitToYear(digitValue = '', selectedYear = '') {
   const dateObj = new Date();
   let year = dateObj.getFullYear();
   const digitValueStr = addZero(digitValue.toString(), 2);
@@ -224,12 +220,11 @@ export function getIsEmptyYear(value, yearLength) {
   } = getYearDetails(yearLength);
   return getIsEmptyValue(value, startPoint, endPoint);
 }
-export function getIsCurrentYear(_ref) {
-  let {
-    isDateTime,
-    value,
-    timeZone
-  } = _ref;
+export function getIsCurrentYear({
+  isDateTime,
+  value,
+  timeZone
+}) {
   let isCurrentYear = false;
 
   if (value && value !== INVALID_DATE) {

package/es/DateTime/dateFormatUtils/timeChange.js

@@ -1,10 +1,9 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
 import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
-export function getChangedHour(values, event, focusOrders, keyActions) {
-  let {
-    is24Hour = false
-  } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+export function getChangedHour(values, event, focusOrders, keyActions, {
+  is24Hour = false
+} = {}) {
   const {
     keyCode,
     which

package/es/DateTime/dateFormatUtils/yearChange.js

@@ -1,10 +1,9 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from "./index";
 import { getKeyValue } from "../../utils/Common";
-export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
-  let {
-    yearInfo
-  } = _ref;
+export function getChangedYear(values, event, focusOrders, keyActions, {
+  yearInfo
+}) {
   const {
     keyCode,
     which

package/es/DropBox/DropBox.js

@@ -11,6 +11,7 @@ import { DropBoxDefaultProps } from "./props/defaultProps";
 import { DropBoxPropTypes } from "./props/propTypes";
 import { stopPropagation } from "./../utils/Common";
 import isMobilePopover from "./utils/isMobilePopover";
+import { cn } from "@dot-system/css-utility";
 import style from "./css/DropBox.module.css";
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -23,8 +24,15 @@ export default function DropBox(props) {
     isRestrictScroll,
     needFocusScope,
     onClose,
-    customProps
+    customProps,
+    getSubContainerRef
   } = props;
+
+  const setDropBoxRef = ele => {
+    getSubContainerRef && getSubContainerRef(ele);
+    dropBoxRef.current = ele;
+  };
+
   const {
     focusScopeProps = {}
   } = customProps;
@@ -55,10 +63,10 @@ export default function DropBox(props) {
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: dropBoxRef
+    getSubContainerRef: setDropBoxRef
   }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    subContainerRef: dropBoxRef,
+    getSubContainerRef: setDropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle
@@ -66,13 +74,13 @@ export default function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `${style.freezeLayer} ${style.freeze}`,
+    className: cn(`${style.freezeLayer} ${style.freeze}`),
     style: zIndexStyle,
     onClick: stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
-    className: style.freezeLayer,
+    className: cn(style.freezeLayer),
     style: zIndexStyle,
     onClick: stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,12 @@
 /* eslint-disable react/no-unknown-property */
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
 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';
+import { cn } from "@dot-system/css-utility";
 import style from "./css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
@@ -27,13 +28,15 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
+    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
   let isAbsolute = isAbsolutePositioningNeeded;
+  const internalSubContainerRef = useRef(null);
 
   const FireOnAnimationEnd = () => {
-    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
     let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
     animationStyles.split(' ').map(rmStyle => {
       if (eleClassList && eleClassList.contains(rmStyle)) {
@@ -54,6 +57,16 @@ export default function DropBoxElement(props) {
     }
   };
 
+  const setSubContainerRef = useCallback(ele => {
+    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.
+
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  }, [subContainerRef, getSubContainerRef]);
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -95,7 +108,7 @@ export default function DropBoxElement(props) {
     }
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
+    className: cn(boxClassName),
     "data-id": `${dataId}`,
     "data-test-id": `${dataId}`,
     "data-selector-id": dataSelectorId,
@@ -115,22 +128,22 @@ export default function DropBoxElement(props) {
     "dot-ui-element": "dropbox"
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
-    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    className: cn(`${subContainerClass} ${style[`${palette}Palette`]}`),
     onClick: onClick,
     "data-id": `${dataId}_subcontainer`,
     "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
-    className: style.closeBar
+    className: cn(style.closeBar)
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-    className: style.arrowPosition,
+    className: cn(style.arrowPosition),
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
     "data-test-id": `${dataId}_arrow`,
     "data-selector-id": `${dataSelectorId}_arrow`
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.arrowShape
+    className: cn(style.arrowShape)
   })), children));
 }
 DropBoxElement.propTypes = DropBoxElementPropTypes;

package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropBoxElement rendering the defult props 1`] = `
 <DocumentFragment>

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,12 +1,11 @@
 import { useContext } from 'react';
 import LibraryContext from "../../../Provider/LibraryContextInit";
 import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style,
-    customState
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style,
+  customState
+}) {
   const DropBoxElementContext = useContext(LibraryContext);
   const {
     boxPosition,
@@ -46,26 +45,26 @@ export default function cssJSLogic(_ref) {
     [style.main]: true,
     [style.hidden]: !isActive,
     [style.responsive]: !!isModel,
-    [customMobileDropBoxWrap]: !!isModel,
-    [customDropBoxWrap]: !isModel,
     [style.container]: isAbsolute && !isModel,
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
     [style.boxDirection]: !isModel && isActive && isArrow,
     [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
-    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
+    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding,
+    [customMobileDropBoxWrap]: !!isModel,
+    [customDropBoxWrap]: !isModel
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
-    [customMobileDropBox]: !!isModel,
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
-    [customDropBox]: !isModel,
     [style.shadow]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
-    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle
+    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle,
+    [customMobileDropBox]: !!isModel,
+    [customDropBox]: !isModel
   });
   let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 

package/es/DropBox/DropBoxElement/props/propTypes.js

@@ -47,5 +47,6 @@ export const DropBoxElementPropTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   zIndexStyle: PropTypes.object,
-  subContainerRef: PropTypes.func
+  subContainerRef: PropTypes.func,
+  getSubContainerRef: PropTypes.func
 };

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropBox rendering the defult props 1`] = `
 <DocumentFragment>

package/es/DropDown/DropDown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
 import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDown.module.css";
 import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
@@ -62,7 +63,7 @@ export class DropDownItemContainer extends React.Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.listGroup,
+      className: cn(style.listGroup),
       onScroll: this.onScroll,
       ref: this.getRef,
       "data-id": dataId,

package/es/DropDown/DropDownHeading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDownHeading_propTypes } from "./props/propTypes";
 import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownHeading.module.css";
 export default class DropDownHeading extends React.Component {
   render() {
@@ -21,7 +22,7 @@ export default class DropDownHeading extends React.Component {
       ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style[palette]} ${customClass}`,
+      className: cn(`${style[palette]} ${customClass}`),
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,

package/es/DropDown/DropDownItem.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DropDownItem_propTypes } from "./props/propTypes";
 import { DropDownItem_defaultProps } from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownItem.module.css";
 export default class DropDownItem extends React.Component {
   constructor(props) {
@@ -54,20 +55,20 @@ export default class DropDownItem extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+      className: cn(`${style.list}  ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''} ${customClass}`),
       onClick: this.onClick,
       onMouseOver: this.onHover,
       ref: this.getRef,
       "data-id": dataId,
       "data-test-id": dataId
     }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
-      className: style.value
+      className: cn(style.value)
     }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
-      className: style.user
+      className: cn(style.user)
     }, " ", children[1], " ") : '');
   }
 

package/es/DropDown/DropDownSearch.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropDownSearch_propTypes } from "./props/propTypes";
 import { DropDownSearch_defaultProps } from "./props/defaultProps";
 import TextBox from "../TextBox/TextBox";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownSearch.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
@@ -45,7 +46,7 @@ export default class DropDownSearch extends React.Component {
       customTextBox = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`,
+      className: cn(`${style.search} ${style[`${size}Search`]} ${searchClass}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement(TextBox, {

package/es/DropDown/DropDownSeparator.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DropDownSeparator_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./DropDownSeparator.module.css";
 export default class DropDownSeparator extends React.Component {
   render() {
@@ -7,7 +8,7 @@ export default class DropDownSeparator extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.separator} ${customClass}`
+      className: cn(`${style.separator} ${customClass}`)
     });
   }
 

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDown rendering the defult props 1`] = `
 <DocumentFragment>
@@ -31,13 +31,13 @@ exports[`DropDown rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="flex rowdir"
+          class="flex row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOn scrolly"
+            class="flexible basis_zero shrink scroll_vertical"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownHeading rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="light "
+    class="light"
     data-id="DropDownHeading"
     data-selector-id="dropdownHeading"
     data-test-id="DropDownHeading"

package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownItem rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="list   "
+    class="list"
     data-id="dropDwnItemContainer"
     data-test-id="dropDwnItemContainer"
   />

package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -1,14 +1,14 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="search mediumSearch "
+    class="search mediumSearch"
     data-id="DropDownSearch"
     data-test-id="DropDownSearch"
   >
     <input
-      class="  container medium  default border effect  borderColor_default  "
+      class="container medium default border effect borderColor_default"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="separator "
+    class="separator"
   />
 </DocumentFragment>
 `;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_breakSpaces "
+    class="reset whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_normal "
+    class="reset whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_nowrap "
+    class="reset whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_pre "
+    class="reset whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preLine "
+    class="reset whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preWrap "
+    class="reset whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset  "
+    class="reset"
   />
 </DocumentFragment>
 `;

package/es/Label/Label.js

@@ -8,6 +8,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./Label.module.css";
 import colors from "./LabelColors.module.css";
 export default class Label extends React.Component {
@@ -38,8 +39,8 @@ export default class Label extends React.Component {
       tabIndex
     } = a11y;
     const labelElement = /*#__PURE__*/React.createElement("label", {
-      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+      className: cn(`${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass}`),
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,