@zohodesk/components 1.6.17 → 1.6.19

package/README.md

@@ -2,6 +2,17 @@
 
 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.6.19
+
+- **DropBoxElement**
+  - `getSubContainerRef` prop supported to get the sub-container element reference.
+- **Popup**
+  - Popup Unmount Memory Leak Issue Resolved  .
+
+# 1.6.18
+
+- buttonComponentVersion temproary support given in LibraryContext , will remove once app is migrated
+
 # 1.6.17
 
 - Updated `@zohodesk-private/color-variable-preprocessor@1.3.3` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.

package/es/DropBox/DropBox.js

@@ -23,8 +23,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 +62,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

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,5 +1,5 @@
 /* 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';
@@ -27,13 +27,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 +56,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;
   }
@@ -120,7 +132,7 @@ export default function DropBoxElement(props) {
     "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
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {

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/Provider/LibraryContext.js

@@ -12,7 +12,8 @@ const LibraryContextProvider = ({
   shouldStrikeThroughDisabledButton,
   labelRequiredType,
   shouldHighlightRequiredLabel,
-  children
+  children,
+  buttonComponentVersion
 }) => {
   const [value, setValue] = useState({
     isReducedMotion,
@@ -21,6 +22,7 @@ const LibraryContextProvider = ({
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    buttonComponentVersion,
     labelRequiredType,
     shouldHighlightRequiredLabel
   });
@@ -48,6 +50,7 @@ LibraryContextProvider.propTypes = {
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
   shouldStrikeThroughDisabledButton: PropTypes.bool,
+  buttonComponentVersion: PropTypes.oneOf(['default', 'v1']),
   labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
   shouldHighlightRequiredLabel: PropTypes.bool
 };
@@ -58,6 +61,7 @@ LibraryContextProvider.defaultProps = {
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
   shouldStrikeThroughDisabledButton: false,
+  buttonComponentVersion: 'v1',
   labelRequiredType: 'asterisk',
   shouldHighlightRequiredLabel: true
 };

package/lib/DropBox/DropBox.js

@@ -47,7 +47,14 @@ function DropBox(props) {
       isRestrictScroll = props.isRestrictScroll,
       needFocusScope = props.needFocusScope,
       onClose = props.onClose,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      getSubContainerRef = props.getSubContainerRef;
+
+  var setDropBoxRef = function setDropBoxRef(ele) {
+    getSubContainerRef && getSubContainerRef(ele);
+    dropBoxRef.current = ele;
+  };
+
   var _customProps$focusSco = customProps.focusScopeProps,
       focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
   var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -82,10 +89,10 @@ function DropBox(props) {
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: dropBoxRef
+    getSubContainerRef: setDropBoxRef
   }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
-    subContainerRef: dropBoxRef,
+    getSubContainerRef: setDropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = DropBoxElement;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"));
 
@@ -23,6 +25,10 @@ var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /* eslint-disable react/no-unknown-property */
 function DropBoxElement(props) {
   var children = props.children,
@@ -43,12 +49,14 @@ function DropBoxElement(props) {
       tabIndex = props.tabIndex,
       palette = props.palette,
       subContainerRef = props.subContainerRef,
+      getSubContainerRef = props.getSubContainerRef,
       customStyle = props.customStyle,
       animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
+  var internalSubContainerRef = (0, _react.useRef)(null);
 
   var FireOnAnimationEnd = function FireOnAnimationEnd() {
-    var eleClassList = subContainerRef && subContainerRef.current.classList;
+    var eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
     var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
     animationStyles.split(' ').map(function (rmStyle) {
       if (eleClassList && eleClassList.contains(rmStyle)) {
@@ -67,6 +75,16 @@ function DropBoxElement(props) {
     }
   };
 
+  var setSubContainerRef = (0, _react.useCallback)(function (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;
   }
@@ -132,7 +150,7 @@ function DropBoxElement(props) {
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -57,6 +57,7 @@ var DropBoxElementPropTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   zIndexStyle: _propTypes["default"].object,
-  subContainerRef: _propTypes["default"].func
+  subContainerRef: _propTypes["default"].func,
+  getSubContainerRef: _propTypes["default"].func
 };
 exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/Provider/LibraryContext.js

@@ -48,7 +48,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
       labelRequiredType = _ref.labelRequiredType,
       shouldHighlightRequiredLabel = _ref.shouldHighlightRequiredLabel,
-      children = _ref.children;
+      children = _ref.children,
+      buttonComponentVersion = _ref.buttonComponentVersion;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
@@ -57,6 +58,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     hasTagColorInheritedToText: hasTagColorInheritedToText,
     shouldIndicateSwitchState: shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton,
+    buttonComponentVersion: buttonComponentVersion,
     labelRequiredType: labelRequiredType,
     shouldHighlightRequiredLabel: shouldHighlightRequiredLabel
   }),
@@ -85,6 +87,7 @@ LibraryContextProvider.propTypes = {
   direction: _propTypes["default"].string,
   shouldIndicateSwitchState: _propTypes["default"].bool,
   shouldStrikeThroughDisabledButton: _propTypes["default"].bool,
+  buttonComponentVersion: _propTypes["default"].oneOf(['default', 'v1']),
   labelRequiredType: _propTypes["default"].oneOf(['asterisk', 'text']),
   shouldHighlightRequiredLabel: _propTypes["default"].bool
 };
@@ -95,6 +98,7 @@ LibraryContextProvider.defaultProps = {
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
   shouldStrikeThroughDisabledButton: false,
+  buttonComponentVersion: 'v1',
   labelRequiredType: 'asterisk',
   shouldHighlightRequiredLabel: true
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.17",
+  "version": "1.6.19",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -76,15 +76,15 @@
     "@dot-system/css-audit-tool": "1.0.0",
     "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.14",
+    "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.3",
+    "@zohodesk/icons": "1.3.6",
     "@zohodesk/layout": "3.2.0",
-    "@zohodesk/svg": "1.3.6",
+    "@zohodesk/svg": "1.3.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -103,9 +103,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.3",
+    "@zohodesk/icons": "1.3.6",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.6",
+    "@zohodesk/svg": "1.3.8",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -113,7 +113,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/layout": "3.2.0",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"
   }