@atlaskit/link-datasource 4.21.5 → 4.21.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 4.21.7
+
+### Patch Changes
+
+- [`ec1eda37975bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec1eda37975bf) -
+  Deep comparison on DatasourceTable parameter changes before trigger reset
+- Updated dependencies
+
+## 4.21.6
+
+### Patch Changes
+
+- [`5d0b8ba5e6f7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d0b8ba5e6f7f) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 4.21.5
 
 ### Patch Changes

package/dist/cjs/hooks/useDeepEffect.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepEffect = void 0;
+var _react = require("react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var useDeepEffect = exports.useDeepEffect = function useDeepEffect(callback, dependencies) {
+  var prevDependencies = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (!(0, _isEqual.default)(dependencies, prevDependencies.current)) {
+      callback();
+      prevDependencies.current = dependencies;
+    }
+  }, [dependencies, callback]);
+};

package/dist/cjs/ui/common/modal/content-container/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._1kl71x13{border-left:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
 ._1s7z1x13{border-right:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
+._n7zl1md5{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zl1x13{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
-._n7zl8e97{border-bottom:var(--ds-border-width-outline,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zlglyw{border-bottom:none}
 ._x3do1x13{border-top:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}._12vemgnk{background-repeat:no-repeat}
 ._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}

package/dist/cjs/ui/common/modal/content-container/index.js

@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var styles = {
   tableContainerStyles: "_n7zl1x13 _x3do1x13 _1kl71x13 _1s7z1x13 _13li1mok _qrwq1mok",
-  contentContainerStyles: "_1reo1wug _18m91wug _n7zl8e97 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
+  contentContainerStyles: "_1reo1wug _18m91wug _n7zl1md5 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
   contentContainerRemoveBorderStyles: "_n7zlglyw"
 };
 var ContentContainer = exports.ContentContainer = function ContentContainer(_ref) {

package/dist/cjs/ui/common/modal/popup-select/custom-checkbox-option.compiled.css

@@ -1,5 +1,5 @@
 
-._189eyh40{border-width:2px}
+._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsglyw{box-shadow:none}

package/dist/cjs/ui/common/modal/popup-select/custom-checkbox-option.js

@@ -24,6 +24,6 @@ var CustomCheckboxOption = exports.CustomCheckboxOption = function CustomCheckbo
   return /*#__PURE__*/React.createElement(_select.CheckboxOption
   // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
   , (0, _extends2.default)({}, props, {
-    className: (0, _runtime.ax)(["_189eyh40 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
+    className: (0, _runtime.ax)(["_189e1dm9 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
   }), children);
 };

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -22,6 +22,7 @@ var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/hook
 var _fetchMessagesForLocale = require("../../common/utils/locale/fetch-messages-for-locale");
 var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
+var _useDeepEffect = require("../../hooks/useDeepEffect");
 var _en = _interopRequireDefault(require("../../i18n/en"));
 var _state = require("../../state");
 var _assetsModal = require("../assets-modal");
@@ -80,12 +81,27 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   var hasColumns = !!columns.length;
   var isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
   visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
-  (0, _react.useEffect)(function () {
-    if (!isInitialRender.current) {
-      reset();
-    }
-    isInitialRender.current = false;
-  }, [reset, parameters]);
+  if ((0, _platformFeatureFlags.fg)('navx-1334-datasource-deep-compare-params')) {
+    // parameters is an object that we want to track, and when something inside it changes we want to
+    // call effect callback. Normal useEffect will not do deep comparison, but only reference one.
+    // This hook will do deep comparison making sure we don’t call reset() when only reference to an object
+    // has changed but not the content.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _useDeepEffect.useDeepEffect)(function () {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useEffect)(function () {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  }
   (0, _react.useEffect)(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);

package/dist/es2019/hooks/useDeepEffect.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+export const useDeepEffect = (callback, dependencies) => {
+  const prevDependencies = useRef();
+  useEffect(() => {
+    if (!isEqual(dependencies, prevDependencies.current)) {
+      callback();
+      prevDependencies.current = dependencies;
+    }
+  }, [dependencies, callback]);
+};

package/dist/es2019/ui/common/modal/content-container/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._1kl71x13{border-left:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
 ._1s7z1x13{border-right:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
+._n7zl1md5{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zl1x13{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
-._n7zl8e97{border-bottom:var(--ds-border-width-outline,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zlglyw{border-bottom:none}
 ._x3do1x13{border-top:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}._12vemgnk{background-repeat:no-repeat}
 ._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}

package/dist/es2019/ui/common/modal/content-container/index.js

@@ -7,7 +7,7 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 const styles = {
   tableContainerStyles: "_n7zl1x13 _x3do1x13 _1kl71x13 _1s7z1x13 _13li1mok _qrwq1mok",
-  contentContainerStyles: "_1reo1wug _18m91wug _n7zl8e97 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
+  contentContainerStyles: "_1reo1wug _18m91wug _n7zl1md5 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
   contentContainerRemoveBorderStyles: "_n7zlglyw"
 };
 export const ContentContainer = ({

package/dist/es2019/ui/common/modal/popup-select/custom-checkbox-option.compiled.css

@@ -1,5 +1,5 @@
 
-._189eyh40{border-width:2px}
+._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsglyw{box-shadow:none}

package/dist/es2019/ui/common/modal/popup-select/custom-checkbox-option.js

@@ -14,6 +14,6 @@ export const CustomCheckboxOption = ({
   return /*#__PURE__*/React.createElement(CheckboxOption
   // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
   , _extends({}, props, {
-    className: ax(["_189eyh40 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
+    className: ax(["_189e1dm9 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
   }), children);
 };

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -14,6 +14,7 @@ import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hoo
 import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
 import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { useDeepEffect } from '../../hooks/useDeepEffect';
 import i18nEN from '../../i18n/en';
 import { StoreContainer } from '../../state';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
@@ -72,12 +73,27 @@ const DatasourceTableViewWithoutAnalytics = ({
   const hasColumns = !!columns.length;
   const isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
   visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
-  useEffect(() => {
-    if (!isInitialRender.current) {
-      reset();
-    }
-    isInitialRender.current = false;
-  }, [reset, parameters]);
+  if (fg('navx-1334-datasource-deep-compare-params')) {
+    // parameters is an object that we want to track, and when something inside it changes we want to
+    // call effect callback. Normal useEffect will not do deep comparison, but only reference one.
+    // This hook will do deep comparison making sure we don’t call reset() when only reference to an object
+    // has changed but not the content.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDeepEffect(() => {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  }
   useEffect(() => {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);

package/dist/esm/hooks/useDeepEffect.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+export var useDeepEffect = function useDeepEffect(callback, dependencies) {
+  var prevDependencies = useRef();
+  useEffect(function () {
+    if (!isEqual(dependencies, prevDependencies.current)) {
+      callback();
+      prevDependencies.current = dependencies;
+    }
+  }, [dependencies, callback]);
+};

package/dist/esm/ui/common/modal/content-container/index.compiled.css

@@ -1,8 +1,8 @@
 
 ._1kl71x13{border-left:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
 ._1s7z1x13{border-right:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
+._n7zl1md5{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zl1x13{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}
-._n7zl8e97{border-bottom:var(--ds-border-width-outline,2px) solid var(--ds-border,#dfe1e6)}
 ._n7zlglyw{border-bottom:none}
 ._x3do1x13{border-top:var(--ds-border-width,1px) solid var(--ds-border,#dfe1e6)}._12vemgnk{background-repeat:no-repeat}
 ._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}

package/dist/esm/ui/common/modal/content-container/index.js

@@ -7,7 +7,7 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 var styles = {
   tableContainerStyles: "_n7zl1x13 _x3do1x13 _1kl71x13 _1s7z1x13 _13li1mok _qrwq1mok",
-  contentContainerStyles: "_1reo1wug _18m91wug _n7zl8e97 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
+  contentContainerStyles: "_1reo1wug _18m91wug _n7zl1md5 _1e0c11p5 _c71l1pna _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00",
   contentContainerRemoveBorderStyles: "_n7zlglyw"
 };
 export var ContentContainer = function ContentContainer(_ref) {

package/dist/esm/ui/common/modal/popup-select/custom-checkbox-option.compiled.css

@@ -1,5 +1,5 @@
 
-._189eyh40{border-width:2px}
+._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsglyw{box-shadow:none}

package/dist/esm/ui/common/modal/popup-select/custom-checkbox-option.js

@@ -15,6 +15,6 @@ export var CustomCheckboxOption = function CustomCheckboxOption(_ref) {
   return /*#__PURE__*/React.createElement(CheckboxOption
   // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
   , _extends({}, props, {
-    className: ax(["_189eyh40 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
+    className: ax(["_189e1dm9 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
   }), children);
 };

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -14,6 +14,7 @@ import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hoo
 import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
 import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { useDeepEffect } from '../../hooks/useDeepEffect';
 import i18nEN from '../../i18n/en';
 import { StoreContainer } from '../../state';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
@@ -71,12 +72,27 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   var hasColumns = !!columns.length;
   var isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
   visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
-  useEffect(function () {
-    if (!isInitialRender.current) {
-      reset();
-    }
-    isInitialRender.current = false;
-  }, [reset, parameters]);
+  if (fg('navx-1334-datasource-deep-compare-params')) {
+    // parameters is an object that we want to track, and when something inside it changes we want to
+    // call effect callback. Normal useEffect will not do deep comparison, but only reference one.
+    // This hook will do deep comparison making sure we don’t call reset() when only reference to an object
+    // has changed but not the content.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDeepEffect(function () {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      if (!isInitialRender.current) {
+        reset();
+      }
+      isInitialRender.current = false;
+    }, [reset, parameters]);
+  }
   useEffect(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);

package/dist/types/hooks/useDeepEffect.d.ts

@@ -0,0 +1,2 @@
+import { type DependencyList, type EffectCallback } from 'react';
+export declare const useDeepEffect: (callback: EffectCallback, dependencies?: DependencyList) => void;

package/dist/types-ts4.5/hooks/useDeepEffect.d.ts

@@ -0,0 +1,2 @@
+import { type DependencyList, type EffectCallback } from 'react';
+export declare const useDeepEffect: (callback: EffectCallback, dependencies?: DependencyList) => void;

package/examples-helpers/buildIssueLikeTableLoadingError.tsx

@@ -6,6 +6,7 @@ import { jsx, styled } from '@compiled/react';
 
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { SmartCardProvider } from '@atlaskit/link-provider';
+import { token } from '@atlaskit/tokens';
 
 import { fetchMessagesForLocale } from '../src/common/utils/locale/fetch-messages-for-locale';
 import { DatasourceExperienceIdProvider } from '../src/contexts/datasource-experience-id';
@@ -16,7 +17,7 @@ import SmartLinkClient from './smartLinkCustomClient';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TableViewWrapper = styled.div({
 	borderColor: 'grey',
-	borderWidth: '1px',
+	borderWidth: token('border.width'),
 	borderStyle: 'solid',
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.21.5",
+	"version": "4.21.7",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V src/**/*.{svg,png}"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.2.3",
+		"@atlaskit/adf-schema": "^51.0.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/atlassian-context": "^0.5.0",
 		"@atlaskit/avatar": "^25.1.0",
@@ -78,12 +78,12 @@
 		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/react-select": "^3.5.0",
 		"@atlaskit/select": "^21.2.0",
-		"@atlaskit/smart-card": "^40.20.0",
+		"@atlaskit/smart-card": "^40.22.0",
 		"@atlaskit/smart-user-picker": "^8.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tag": "^14.1.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/theme": "^20.0.0",
+		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -184,6 +184,9 @@
 		},
 		"navx-1483-a11y-close-button-in-modal-updates": {
 			"type": "boolean"
+		},
+		"navx-1334-datasource-deep-compare-params": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/9c893299-a527-4457-9b46-f3bc4c828766"