@atlaskit/inline-dialog - npm Package Compare versions

Comparing version 13.0.11 to 13.1.0

CHANGELOG.md

 # @atlaskit/inline-dialog
 
+## 13.1.0
+
+### Minor Changes
+
+- [`5a049f800d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a049f800d3) - Integrates the new tokens package to add support for our new theming solution. This change is fully backwards compatible with our existing theming solution
+- [`caec2cee6e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/caec2cee6e0) - Removes `styled-components` dependency from the package. Also uses ThemeV2 API now. There should be no visual or UX change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.11
@@ -4,0 +15,0 @@

dist/cjs/InlineDialog/index.js

@@ -28,2 +28,4 @@ "use strict";
 
+var _core = require("@emotion/core");
+
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
@@ -35,3 +37,3 @@
 
-var _styled = require("./styled");
+var _container = require("./styled/container");
 
@@ -47,3 +49,3 @@ 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); }
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.0.11";
+var packageVersion = "13.1.0";
 
@@ -98,4 +100,7 @@ var InlineDialog = /*#__PURE__*/function (_Component) {
         return;
-      }
+      } // added here to clean up component unmounting, which is not done in ref
 
+
+      this.containerRef = null;
+
       if (!prevProps.isOpen && this.props.isOpen) {
@@ -141,27 +146,29 @@ window.addEventListener('click', this.handleClickOutside, true);
           testId = _this$props2.testId;
-      var popper = isOpen ? /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+      var popper = isOpen ? (0, _core.jsx)(_popper.Popper, {
         placement: placement
       }, function (_ref) {
-        var ref = _ref.ref,
+        var _ref2 = _ref.ref,
             style = _ref.style;
-        return /*#__PURE__*/_react.default.createElement(_styled.Container, {
+        return (0, _core.jsx)(_container.Container, {
           onBlur: onContentBlur,
           onFocus: onContentFocus,
           onClick: onContentClick,
-          innerRef: function innerRef(node) {
-            _this2.containerRef = node;
+          ref: function ref(node) {
+            if (node) {
+              _this2.containerRef = node;
 
-            if (typeof ref === 'function') {
-              ref(node);
-            } else {
-              ref.current = node;
+              if (typeof _ref2 === 'function') {
+                _ref2(node);
+              } else {
+                _ref2.current = node;
+              }
             }
           },
           style: style,
-          "data-testid": testId
+          testId: testId
         }, content);
       }) : null;
-      return /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref2) {
-        var ref = _ref2.ref;
-        return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+      return (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref3) {
+        var ref = _ref3.ref;
+        return (0, _core.jsx)(_reactNodeResolver.default, {
           innerRef: function innerRef(node) {
@@ -168,0 +175,0 @@ _this2.triggerRef = node;

dist/cjs/version.json

 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.0.11",
+	"version": "13.1.0",
 	"sideEffects": false
 }

dist/es2019/InlineDialog/index.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React, { Component } from 'react';
+import { jsx } from '@emotion/core';
 import NodeResolver from 'react-node-resolver';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { Container } from './styled';
+import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.0.11";
+const packageVersion = "13.1.0";
 
@@ -47,4 +50,7 @@ class InlineDialog extends Component {
       return;
-    }
+    } // added here to clean up component unmounting, which is not done in ref
 
+
+    this.containerRef = null;
+
     if (!prevProps.isOpen && this.props.isOpen) {
@@ -86,3 +92,3 @@ window.addEventListener('click', this.handleClickOutside, true);
     } = this.props;
-    const popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
+    const popper = isOpen ? jsx(Popper, {
       placement: placement
@@ -92,21 +98,23 @@ }, ({
       style
-    }) => /*#__PURE__*/React.createElement(Container, {
+    }) => jsx(Container, {
       onBlur: onContentBlur,
       onFocus: onContentFocus,
       onClick: onContentClick,
-      innerRef: node => {
-        this.containerRef = node;
+      ref: node => {
+        if (node) {
+          this.containerRef = node;
 
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
+          if (typeof ref === 'function') {
+            ref(node);
+          } else {
+            ref.current = node;
+          }
         }
       },
       style: style,
-      "data-testid": testId
+      testId: testId
     }, content)) : null;
-    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
+    return jsx(Manager, null, jsx(Reference, null, ({
       ref
-    }) => /*#__PURE__*/React.createElement(NodeResolver, {
+    }) => jsx(NodeResolver, {
       innerRef: node => {
@@ -113,0 +121,0 @@ this.triggerRef = node;

dist/es2019/version.json

 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.0.11",
+	"version": "13.1.0",
 	"sideEffects": false
 }

dist/esm/InlineDialog/index.js

@@ -13,9 +13,11 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 
+/** @jsx jsx */
 import React, { Component } from 'react';
+import { jsx } from '@emotion/core';
 import NodeResolver from 'react-node-resolver';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-import { Container } from './styled';
+import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.0.11";
+var packageVersion = "13.1.0";
 
@@ -72,4 +74,7 @@ var InlineDialog = /*#__PURE__*/function (_Component) {
         return;
-      }
+      } // added here to clean up component unmounting, which is not done in ref
 
+
+      this.containerRef = null;
+
       if (!prevProps.isOpen && this.props.isOpen) {
@@ -115,27 +120,29 @@ window.addEventListener('click', this.handleClickOutside, true);
           testId = _this$props2.testId;
-      var popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
+      var popper = isOpen ? jsx(Popper, {
         placement: placement
       }, function (_ref) {
-        var ref = _ref.ref,
+        var _ref2 = _ref.ref,
             style = _ref.style;
-        return /*#__PURE__*/React.createElement(Container, {
+        return jsx(Container, {
           onBlur: onContentBlur,
           onFocus: onContentFocus,
           onClick: onContentClick,
-          innerRef: function innerRef(node) {
-            _this2.containerRef = node;
+          ref: function ref(node) {
+            if (node) {
+              _this2.containerRef = node;
 
-            if (typeof ref === 'function') {
-              ref(node);
-            } else {
-              ref.current = node;
+              if (typeof _ref2 === 'function') {
+                _ref2(node);
+              } else {
+                _ref2.current = node;
+              }
             }
           },
           style: style,
-          "data-testid": testId
+          testId: testId
         }, content);
       }) : null;
-      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
-        var ref = _ref2.ref;
-        return /*#__PURE__*/React.createElement(NodeResolver, {
+      return jsx(Manager, null, jsx(Reference, null, function (_ref3) {
+        var ref = _ref3.ref;
+        return jsx(NodeResolver, {
           innerRef: function innerRef(node) {
@@ -142,0 +149,0 @@ _this2.triggerRef = node;

dist/esm/version.json

 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.0.11",
+	"version": "13.1.0",
 	"sideEffects": false
 }

dist/types/InlineDialog/index.d.ts

@@ -0,4 +1,5 @@
+/** @jsx jsx */
 import React, { Component } from 'react';
-import { Placement, Props } from '../types';
-declare class InlineDialog extends Component<Props, {}> {
+import { InlineDialogProps, Placement } from '../types';
+declare class InlineDialog extends Component<InlineDialogProps> {
     static defaultProps: {
@@ -12,5 +13,5 @@ isOpen: boolean;
     };
-    containerRef?: HTMLElement;
+    containerRef?: HTMLElement | null;
     triggerRef?: HTMLElement;
-    componentDidUpdate(prevProps: Props): void;
+    componentDidUpdate(prevProps: InlineDialogProps): void;
     componentDidMount(): void;
@@ -22,3 +23,3 @@ componentWillUnmount(): void;
 export { InlineDialog as InlineDialogWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<Props, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "testId">, "children" | "content" | "testId"> & Partial<Pick<Pick<Props, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "testId">, "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<InlineDialogProps, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement">, "content" | "children" | "testId"> & Partial<Pick<Pick<InlineDialogProps, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement">, "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement">> & Partial<Pick<{
     isOpen: boolean;
@@ -30,3 +31,3 @@ onContentBlur: () => void;
     placement: Placement;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "testId" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

dist/types/types.d.ts

 import { ReactNode } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
-export interface Props extends WithAnalyticsEventsProps {
-    /** The elements that the InlineDialog will be positioned relative to. */
+export interface InlineDialogProps extends WithAnalyticsEventsProps {
+    /**
+     * The elements that the InlineDialog will be positioned relative to.
+     */
     children: ReactNode;
-    /** The elements to be displayed within the InlineDialog. */
+    /**
+     * The elements to be displayed within the InlineDialog.
+     */
     content: ReactNode;
-    /** Sets whether to show or hide the dialog. */
+    /**
+     * Sets whether to show or hide the dialog.
+     */
     isOpen?: boolean;
-    /** Function called when you lose focus on the object. */
+    /**
+     * Function called when you lose focus on the object.
+     */
     onContentBlur?: () => void;
-    /** Function called when you click on the open dialog. */
+    /**
+     * Function called when user clicks on the open dialog.
+     */
     onContentClick?: () => void;
-    /** Function called when you focus on the open dialog. */
+    /**
+     * Function called when user focuses on the open dialog.
+     */
     onContentFocus?: () => void;
-    /** Function called when the dialog is open and a click occurs anywhere outside
-     the dialog. */
+    /**
+     * Function called when the dialog is open and a click occurs anywhere outside
+     * the dialog.
+     */
     onClose?: (obj: {
@@ -23,6 +37,10 @@ isOpen: boolean;
     }) => void;
-    /** Where the dialog should appear, relative to the contents of the children. */
+    /**
+     * Where the dialog should appear, relative to the contents of the children.
+     */
     placement?: Placement;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
     testId?: string;
 }

package.json

 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.0.11",
+  "version": "13.1.0",
   "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
@@ -16,3 +16,3 @@ "publishConfig": {
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -30,16 +30,18 @@ "team": "Design System Team",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/tokens": "^0.1.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
     "react-node-resolver": "^1.0.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
-    "@atlaskit/datetime-picker": "^10.4.0",
+    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/datetime-picker": "^11.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
@@ -66,2 +68,12 @@ "@atlaskit/single-select": "^10.0.0",
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "analytics": "analytics-next",
+      "theming": [
+        "new-theming-api",
+        "tokens"
+      ],
+      "styling": "emotion",
+      "design-system": "v1",
+      "deprecation": "no-deprecated-imports"
     }
@@ -68,0 +80,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

74810

increased by12.44%

Lines of code

840

increased by30.64%

Worsened metrics

Dependency count

8

increased by14.29%

Dev dependency count

18

increased by5.88%

Dependency changes

• + Added@atlaskit/tokens@^0.1.0

• + Added@emotion/core@^10.0.9

• + Added@atlaskit/tokens@0.1.1(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.9(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.9(transitive)

• + Added@babel/template@7.26.9(transitive)

• + Added@babel/traverse@7.26.9(transitive)

• + Added@babel/types@7.26.9(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/core@10.3.1(transitive)

• + Added@emotion/css@10.0.27(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.1(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedyaml@1.10.2(transitive)

• Updated@atlaskit/theme@^11.4.0