@atlaskit/popup 1.17.1 → 1.18.0

package/codemods/utils/helpers.tsx

@@ -1,260 +1,256 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
-  ASTPath,
-  ImportDeclaration,
-  JSXAttribute,
-  JSXElement,
-  Node,
+import { type NodePath } from 'ast-types/lib/node-path';
+import {
+	type ASTPath,
+	type default as core,
+	type ImportDeclaration,
+	type JSXAttribute,
+	type JSXElement,
+	type Node,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 
 export function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: string,
-  importPath: string,
+	j: core.JSCodeshift,
+	source: string,
+	importPath: string,
 ): boolean {
-  return (
-    j(source)
-      .find(j.ImportDeclaration)
-      .filter(
-        (path: ASTPath<ImportDeclaration>) =>
-          path.node.source.value === importPath,
-      ).length > 0
-  );
+	return (
+		j(source)
+			.find(j.ImportDeclaration)
+			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === importPath).length >
+		0
+	);
 }
 
 export function getDefaultSpecifierName({
-  j,
-  base,
-  packageName,
+	j,
+	base,
+	packageName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  packageName: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	packageName: string;
 }): Nullable<string> {
-  const specifiers = base
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packageName)
-    .find(j.ImportDefaultSpecifier);
+	const specifiers = base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === packageName)
+		.find(j.ImportDefaultSpecifier);
 
-  if (!specifiers.length) {
-    return null;
-  }
-  return specifiers.nodes()[0]!.local!.name;
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
 }
 
 export function getSpecifierName({
-  j,
-  base,
-  packageName,
-  component,
+	j,
+	base,
+	packageName,
+	component,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  packageName: string;
-  component: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	packageName: string;
+	component: string;
 }): Nullable<string> {
-  const specifiers = base
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packageName)
-    .find(j.ImportSpecifier);
+	const specifiers = base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === packageName)
+		.find(j.ImportSpecifier);
 
-  if (!specifiers.length) {
-    return null;
-  }
-  const specifierNode = specifiers
-    .nodes()
-    .find((node) => node.imported.name === component);
-  if (!specifierNode) {
-    return null;
-  }
-  // @ts-ignore
-  return specifierNode.local.name;
+	if (!specifiers.length) {
+		return null;
+	}
+	const specifierNode = specifiers.nodes().find((node) => node.imported.name === component);
+	if (!specifierNode) {
+		return null;
+	}
+	// @ts-ignore
+	return specifierNode.local.name;
 }
 
 export function getJSXAttributesByName({
-  j,
-  element,
-  attributeName,
+	j,
+	element,
+	attributeName,
 }: {
-  j: core.JSCodeshift;
-  element: JSXElement | ASTPath<JSXElement>;
-  attributeName: string;
+	j: core.JSCodeshift;
+	element: JSXElement | ASTPath<JSXElement>;
+	attributeName: string;
 }): Collection<JSXAttribute> {
-  return j(element)
-    .find(j.JSXOpeningElement)
-    .find(j.JSXAttribute)
-    .filter((attribute) => {
-      const matches = j(attribute)
-        .find(j.JSXIdentifier)
-        .filter((identifier) => identifier.value.name === attributeName);
-      return Boolean(matches.length);
-    });
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
 }
 
 export function hasJSXAttributesByName({
-  j,
-  element,
-  attributeName,
+	j,
+	element,
+	attributeName,
 }: {
-  j: core.JSCodeshift;
-  element: JSXElement;
-  attributeName: string;
+	j: core.JSCodeshift;
+	element: JSXElement;
+	attributeName: string;
 }): boolean {
-  return getJSXAttributesByName({ j, element, attributeName }).length > 0;
+	return getJSXAttributesByName({ j, element, attributeName }).length > 0;
 }
 
 export function isUsingSupportedSpread({
-  j,
-  base,
-  element,
+	j,
+	base,
+	element,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  element: NodePath<JSXElement, JSXElement>;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	element: NodePath<JSXElement, JSXElement>;
 }): boolean {
-  const isUsingSpread: boolean =
-    j(element).find(j.JSXSpreadAttribute).length > 0;
+	const isUsingSpread: boolean = j(element).find(j.JSXSpreadAttribute).length > 0;
 
-  if (!isUsingSpread) {
-    return true;
-  }
+	if (!isUsingSpread) {
+		return true;
+	}
 
-  return (
-    j(element)
-      .find(j.JSXSpreadAttribute)
-      .filter((spread) => {
-        const argument = spread.value.argument;
-        // in place expression is supported
-        if (argument.type === 'ObjectExpression') {
-          return true;
-        }
+	return (
+		j(element)
+			.find(j.JSXSpreadAttribute)
+			.filter((spread) => {
+				const argument = spread.value.argument;
+				// in place expression is supported
+				if (argument.type === 'ObjectExpression') {
+					return true;
+				}
 
-        // Supporting identifiers that point to an a local object expression
-        if (argument.type === 'Identifier') {
-          return (
-            base.find(j.VariableDeclarator).filter((declarator): boolean => {
-              return (
-                declarator.value.id.type === 'Identifier' &&
-                // @ts-ignore
-                declarator.value.init.type === 'ObjectExpression'
-              );
-            }).length > 0
-          );
-        }
+				// Supporting identifiers that point to an a local object expression
+				if (argument.type === 'Identifier') {
+					return (
+						base.find(j.VariableDeclarator).filter((declarator): boolean => {
+							return (
+								declarator.value.id.type === 'Identifier' &&
+								// @ts-ignore
+								declarator.value.init.type === 'ObjectExpression'
+							);
+						}).length > 0
+					);
+				}
 
-        // We don't support anything else
-        return false;
-      }).length > 0
-  );
+				// We don't support anything else
+				return false;
+			}).length > 0
+	);
 }
 
 export function isUsingThroughSpread({
-  j,
-  base,
-  element,
-  propName,
+	j,
+	base,
+	element,
+	propName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  element: NodePath<JSXElement, JSXElement>;
-  propName: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	element: NodePath<JSXElement, JSXElement>;
+	propName: string;
 }): boolean {
-  if (!isUsingSupportedSpread({ j, base, element })) {
-    return false;
-  }
+	if (!isUsingSupportedSpread({ j, base, element })) {
+		return false;
+	}
 
-  const isUsedThroughExpression: boolean =
-    j(element)
-      .find(j.JSXSpreadAttribute)
-      .find(j.ObjectExpression)
-      .filter((item) => {
-        const match: boolean =
-          item.value.properties.filter(
-            (property) =>
-              property.type === 'ObjectProperty' &&
-              property.key.type === 'Identifier' &&
-              property.key.name === propName,
-          ).length > 0;
+	const isUsedThroughExpression: boolean =
+		j(element)
+			.find(j.JSXSpreadAttribute)
+			.find(j.ObjectExpression)
+			.filter((item) => {
+				const match: boolean =
+					item.value.properties.filter(
+						(property) =>
+							property.type === 'ObjectProperty' &&
+							property.key.type === 'Identifier' &&
+							property.key.name === propName,
+					).length > 0;
 
-        return match;
-      }).length > 0;
+				return match;
+			}).length > 0;
 
-  if (isUsedThroughExpression) {
-    return true;
-  }
+	if (isUsedThroughExpression) {
+		return true;
+	}
 
-  const isUsedThroughIdentifier: boolean =
-    j(element)
-      .find(j.JSXSpreadAttribute)
-      .find(j.Identifier)
-      .filter((identifier): boolean => {
-        return (
-          base
-            .find(j.VariableDeclarator)
-            .filter(
-              (declarator) =>
-                declarator.value.id.type === 'Identifier' &&
-                declarator.value.id.name === identifier.value.name,
-            )
-            .filter((declarator) => {
-              const value = declarator.value;
-              if (value.id.type !== 'Identifier') {
-                return false;
-              }
+	const isUsedThroughIdentifier: boolean =
+		j(element)
+			.find(j.JSXSpreadAttribute)
+			.find(j.Identifier)
+			.filter((identifier): boolean => {
+				return (
+					base
+						.find(j.VariableDeclarator)
+						.filter(
+							(declarator) =>
+								declarator.value.id.type === 'Identifier' &&
+								declarator.value.id.name === identifier.value.name,
+						)
+						.filter((declarator) => {
+							const value = declarator.value;
+							if (value.id.type !== 'Identifier') {
+								return false;
+							}
 
-              if (value.id.name !== identifier.value.name) {
-                return false;
-              }
-              // @ts-ignore
-              if (value.init.type !== 'ObjectExpression') {
-                return false;
-              }
+							if (value.id.name !== identifier.value.name) {
+								return false;
+							}
+							// @ts-ignore
+							if (value.init.type !== 'ObjectExpression') {
+								return false;
+							}
 
-              const match: boolean =
-                // @ts-ignore
-                value.init.properties.filter(
-                  // @ts-ignore
-                  (property) =>
-                    property.type === 'ObjectProperty' &&
-                    property.key.type === 'Identifier' &&
-                    property.key.name === propName,
-                ).length > 0;
+							const match: boolean =
+								// @ts-ignore
+								value.init.properties.filter(
+									// @ts-ignore
+									(property) =>
+										property.type === 'ObjectProperty' &&
+										property.key.type === 'Identifier' &&
+										property.key.name === propName,
+								).length > 0;
 
-              return match;
-            }).length > 0
-        );
-      }).length > 0;
+							return match;
+						}).length > 0
+				);
+			}).length > 0;
 
-  return isUsedThroughIdentifier;
+	return isUsedThroughIdentifier;
 }
 
 export function isUsingProp({
-  j,
-  base,
-  element,
-  propName,
+	j,
+	base,
+	element,
+	propName,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<any>;
-  element: NodePath<JSXElement, JSXElement>;
-  propName: string;
+	j: core.JSCodeshift;
+	base: Collection<any>;
+	element: NodePath<JSXElement, JSXElement>;
+	propName: string;
 }): boolean {
-  return (
-    hasJSXAttributesByName({
-      j,
-      element: element.value,
-      attributeName: propName,
-    }) ||
-    isUsingThroughSpread({
-      j,
-      base,
-      element,
-      propName,
-    })
-  );
+	return (
+		hasJSXAttributesByName({
+			j,
+			element: element.value,
+			attributeName: propName,
+		}) ||
+		isUsingThroughSpread({
+			j,
+			base,
+			element,
+			propName,
+		})
+	);
 }
 
 // not replacing newlines (which \s does)
@@ -262,82 +258,76 @@ const spacesAndTabs: RegExp = /[ \t]{2,}/g;
 const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
 
 function clean(value: string): string {
-  return (
-    value
-      .replace(spacesAndTabs, ' ')
-      .replace(lineStartWithSpaces, '')
-      // using .trim() to clear the any newlines before the first text and after last text
-      .trim()
-  );
+	return (
+		value
+			.replace(spacesAndTabs, ' ')
+			.replace(lineStartWithSpaces, '')
+			// using .trim() to clear the any newlines before the first text and after last text
+			.trim()
+	);
 }
 
 export function addCommentToStartOfFile({
-  j,
-  base,
-  message,
+	j,
+	base,
+	message,
 }: {
-  j: core.JSCodeshift;
-  base: Collection<Node>;
-  message: string;
+	j: core.JSCodeshift;
+	base: Collection<Node>;
+	message: string;
 }) {
-  addCommentBefore({
-    j,
-    // @ts-ignore
-    target: base.find(j.Program),
-    message,
-  });
+	addCommentBefore({
+		j,
+		// @ts-ignore
+		target: base.find(j.Program),
+		message,
+	});
 }
 
 export function addCommentBefore({
-  j,
-  target,
-  message,
+	j,
+	target,
+	message,
 }: {
-  j: core.JSCodeshift;
-  target: Collection<Node>;
-  message: string;
+	j: core.JSCodeshift;
+	target: Collection<Node>;
+	message: string;
 }) {
-  const content: string = ` TODO: (from codemod) ${clean(message)} `;
-  target.forEach((path) => {
-    path.value.comments = path.value.comments || [];
+	const content: string = ` TODO: (from codemod) ${clean(message)} `;
+	target.forEach((path) => {
+		path.value.comments = path.value.comments || [];
 
-    const exists = path.value.comments.find(
-      (comment) => comment.value === content,
-    );
+		const exists = path.value.comments.find((comment) => comment.value === content);
 
-    // avoiding duplicates of the same comment
-    if (exists) {
-      return;
-    }
+		// avoiding duplicates of the same comment
+		if (exists) {
+			return;
+		}
 
-    path.value.comments.push(j.commentBlock(content));
-  });
+		path.value.comments.push(j.commentBlock(content));
+	});
 }
 
 export function updateRenderProps(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  oldProperty: string,
-  newProperty: string,
+	j: core.JSCodeshift,
+	source: Collection<any>,
+	specifier: string,
+	oldProperty: string,
+	newProperty: string,
 ) {
-  source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
-    j(element)
-      .find(j.ArrowFunctionExpression)
-      .find(j.ObjectPattern)
-      .find(j.ObjectProperty)
-      .filter(
-        // @ts-ignore
-        (path: ASTPath<ObjectProperty>) => path.value.key.name === oldProperty,
-      )
-      .forEach((path) => {
-        j(path).replaceWith(
-          j.property(
-            'init',
-            j.identifier(newProperty),
-            j.identifier(oldProperty),
-          ),
-        );
-      });
-  });
+	source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
+		j(element)
+			.find(j.ArrowFunctionExpression)
+			.find(j.ObjectPattern)
+			.find(j.ObjectProperty)
+			.filter(
+				// @ts-ignore
+				(path: ASTPath<ObjectProperty>) => path.value.key.name === oldProperty,
+			)
+			.forEach((path) => {
+				j(path).replaceWith(
+					j.property('init', j.identifier(newProperty), j.identifier(oldProperty)),
+				);
+			});
+	});
 }

package/dist/cjs/popper-wrapper.js

@@ -20,9 +20,13 @@ var _tokens = require("@atlaskit/tokens");
 var _repositionOnUpdate = require("./reposition-on-update");
 var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
-var _excluded = ["shouldRenderToParent", "children"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
 var _css;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
+var popupFullWidthStyles = (0, _react2.css)({
+  width: '100%'
+});
 var popupStyles = (0, _react2.css)((_css = {
   display: 'block',
   boxSizing: 'border-box',
@@ -31,7 +35,7 @@ var popupStyles = (0, _react2.css)((_css = {
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
-}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
+}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, '&:focus', {
   outline: 'none'
 }), _css));
 var popupOverflowStyles = (0, _react2.css)({
@@ -41,17 +45,18 @@ var popupOverflowStyles = (0, _react2.css)({
 // disables iframe pointer events while popup is open, except if iframe is nested inside popup
 // solves an issue of popup not being closed on iframe click
 var blockPointerEventsOnExternalIframeStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'iframe:not([data-ds--level] iframe)': {
     pointerEvents: 'none'
   }
 });
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
+    shouldFitContainer = props.shouldFitContainer,
     children = props.children,
     htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -76,6 +81,7 @@ function PopperWrapper(_ref) {
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
+    shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
     strategy = _ref.strategy,
     role = _ref.role,
@@ -146,13 +152,16 @@ function PopperWrapper(_ref) {
           }
           setPopupRef(node);
         }
-      },
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: style
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
       tabIndex: autoFocus ? 0 : undefined,
-      shouldRenderToParent: shouldRenderToParent
+      shouldRenderToParent: shouldRenderToParent,
+      shouldFitContainer: shouldFitContainer
     }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {