@kaizen/components 1.80.2 → 1.80.3

package/codemods/utils/updateJsxElementTagName.spec.ts

@@ -0,0 +1,129 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { updateJsxElementTagName, type ComponentRenameConfig } from './updateJsxElementTagName'
+
+const componentRenameMap = new Map<string, ComponentRenameConfig>([
+  [
+    'Pancakes',
+    {
+      newName: 'Beer',
+      fromModule: '@kaizen/components/next',
+      toModule: '@kaizen/components',
+    },
+  ],
+  ['Bart', { newName: 'Bender', fromModule: '@kaizen/components', toModule: '@kaizen/components' }],
+  [
+    'EatMyShorts',
+    { newName: 'MeatBags', fromModule: '@kaizen/components', toModule: '@kaizen/components' },
+  ],
+])
+
+describe('updateJsxElementTagName()', () => {
+  const factory = ts.factory
+
+  it('should ignore nodes not in componentMap', () => {
+    const elem = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Cowabunga'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, elem, 'Cowabunga', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Cowabunga')
+  })
+
+  it('should update self closing tag', () => {
+    const elem = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, elem, 'Beer', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Beer')
+  })
+
+  it('should handle Component.SubComponent when in Component is found in componentMap', () => {
+    const source = `<Bart.Shorts />`
+    const sourceFile = parseJsx(source)
+    const statement = sourceFile.statements[0] as ts.ExpressionStatement
+    const elem = statement.expression as ts.JsxSelfClosingElement
+
+    const result = updateJsxElementTagName(factory, elem, 'ignored', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect(ts.isPropertyAccessExpression(result.tagName)).toBe(true)
+
+    const tagName = result.tagName as ts.PropertyAccessExpression
+    expect((tagName.expression as ts.Identifier).text).toBe('Bender')
+    expect(tagName.name.text).toBe('Shorts')
+  })
+
+  it('should ignore Component.SubComponent when in Component is not in componentMap', () => {
+    const source = `<Not.Here />`
+    const sourceFile = parseJsx(source)
+    const statement = sourceFile.statements[0] as ts.ExpressionStatement
+    const elem = statement.expression as ts.JsxSelfClosingElement
+
+    const result = updateJsxElementTagName(factory, elem, 'ignored', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect(ts.isPropertyAccessExpression(result.tagName)).toBe(true)
+
+    const tagName = result.tagName as ts.PropertyAccessExpression
+    expect((tagName.expression as ts.Identifier).text).toBe('Not')
+    expect(tagName.name.text).toBe('Here')
+  })
+
+  it('should update JSX opening element tag name', () => {
+    const openingElement = factory.createJsxOpeningElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      factory.createJsxAttributes([]),
+    )
+
+    const result = updateJsxElementTagName(factory, openingElement, 'Pizza', componentRenameMap)
+
+    expect(ts.isJsxOpeningElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Pizza')
+  })
+
+  it('should update JSX closing element tag name', () => {
+    const closingElement = factory.createJsxClosingElement(factory.createIdentifier('EatMyShorts'))
+
+    const result = updateJsxElementTagName(factory, closingElement, 'MeatBags', componentRenameMap)
+
+    expect(ts.isJsxClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('MeatBags')
+  })
+
+  it('should preserve attributes when updating JSX elements', () => {
+    const attributes = factory.createJsxAttributes([
+      factory.createJsxAttribute(
+        factory.createIdentifier('className'),
+        factory.createStringLiteral('test-class'),
+      ),
+    ])
+
+    const element = factory.createJsxSelfClosingElement(
+      factory.createIdentifier('Pancakes'),
+      undefined,
+      attributes,
+    )
+
+    const result = updateJsxElementTagName(factory, element, 'Pizza', componentRenameMap)
+
+    expect(ts.isJsxSelfClosingElement(result)).toBe(true)
+    expect((result.tagName as ts.Identifier).text).toBe('Pizza')
+    expect((result as ts.JsxSelfClosingElement).attributes.properties.length).toBe(1)
+
+    const attribute = (result as ts.JsxSelfClosingElement).attributes
+      .properties[0] as ts.JsxAttribute
+    expect((attribute.name as ts.Identifier).text).toBe('className')
+    expect((attribute.initializer as ts.StringLiteral).text).toBe('test-class')
+  })
+})

package/codemods/utils/updateJsxElementTagName.ts

@@ -0,0 +1,56 @@
+import ts from 'typescript'
+
+export type ComponentRenameConfig = {
+  newName: string
+  fromModule: string
+  toModule: string
+}
+
+export const updateJsxElementTagName = (
+  factory: ts.NodeFactory,
+  node: ts.JsxOpeningElement | ts.JsxClosingElement | ts.JsxSelfClosingElement,
+  newTagName: string,
+  componentRenameMap: Map<string, ComponentRenameConfig>,
+): ts.JsxOpeningElement | ts.JsxClosingElement | ts.JsxSelfClosingElement => {
+  let newTagNameExpr: ts.JsxTagNameExpression
+
+  if (ts.isPropertyAccessExpression(node.tagName)) {
+    const baseComponentName = node.tagName.expression.getText()
+    const rename = componentRenameMap.get(baseComponentName)
+
+    if (rename) {
+      newTagNameExpr = factory.createPropertyAccessExpression(
+        factory.createIdentifier(rename.newName),
+        node.tagName.name,
+      ) as ts.JsxTagNameExpression
+    } else {
+      newTagNameExpr = node.tagName
+    }
+  } else {
+    newTagNameExpr = factory.createIdentifier(newTagName)
+  }
+
+  if (ts.isJsxSelfClosingElement(node)) {
+    return factory.updateJsxSelfClosingElement(
+      node,
+      newTagNameExpr,
+      node.typeArguments,
+      node.attributes,
+    )
+  }
+
+  if (ts.isJsxOpeningElement(node)) {
+    return factory.updateJsxOpeningElement(
+      node,
+      newTagNameExpr,
+      node.typeArguments,
+      node.attributes,
+    )
+  }
+
+  if (ts.isJsxClosingElement(node)) {
+    return factory.updateJsxClosingElement(node, newTagNameExpr)
+  }
+
+  return node
+}

package/codemods/utils/updateKaioImports.spec.ts

@@ -200,6 +200,88 @@ describe('updateKaioImports()', () => {
           }),
         ).toEqual(printAst(outputAst))
       })
+
+      describe('type-only imports', () => {
+        it('creates a new type-only import declaration', () => {
+          const inputAst = parseJsx(`
+          import { Well } from "@kaizen/components"
+        `)
+          const outputAst = parseJsx(`
+          import { Well } from "@kaizen/components"
+          import type { Card } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['Card', { componentName: 'Card', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds type-only import to existing regular imports', () => {
+          const inputAst = parseJsx(`
+          import { Select } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import { Select, type Card } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['Card', { componentName: 'Card', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds type-only import to existing type-only imports', () => {
+          const inputAst = parseJsx(`
+          import type { CardProps } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import type { CardProps, type ButtonProps } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([['ButtonProps', { componentName: 'ButtonProps', isTypeOnly: true }]]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+
+        it('adds mix of type-only and regular imports', () => {
+          const inputAst = parseJsx(`
+          import { Select } from "@kaizen/components/next"
+        `)
+          const outputAst = parseJsx(`
+          import { Select, type CardProps, Button } from "@kaizen/components/next"
+        `)
+          expect(
+            transformInput(inputAst)({
+              importsToAdd: new Map([
+                [
+                  '@kaizen/components/next',
+                  new Map([
+                    ['CardProps', { componentName: 'CardProps', isTypeOnly: true }],
+                    ['Button', { componentName: 'Button', isTypeOnly: false }],
+                  ]),
+                ],
+              ]),
+            }),
+          ).toEqual(printAst(outputAst))
+        })
+      })
     })
   })
 })

package/codemods/utils/updateKaioImports.ts

@@ -34,7 +34,7 @@ const removeNamedImports = (
   return node
 }
 
-type NewImportAttributes = { componentName: string; alias?: string }
+type NewImportAttributes = { componentName: string; alias?: string; isTypeOnly?: boolean }
 type ImportsToAdd = Map<string, NewImportAttributes>
 
 const createImportDeclaration = (
@@ -42,9 +42,12 @@ const createImportDeclaration = (
   importsToAdd: ImportsToAdd,
   moduleSpecifier: string,
 ): ts.ImportDeclaration => {
-  const namedImports = Array.from(importsToAdd.values()).map(({ componentName, alias }) =>
+  const imports = Array.from(importsToAdd.values())
+  const allTypeOnly = imports.every(({ isTypeOnly }) => isTypeOnly)
+
+  const namedImports = imports.map(({ componentName, alias, isTypeOnly }) =>
     factory.createImportSpecifier(
-      false,
+      allTypeOnly ? false : (isTypeOnly ?? false),
       alias ? factory.createIdentifier(componentName) : undefined,
       factory.createIdentifier(alias ?? componentName),
     ),
@@ -52,7 +55,7 @@ const createImportDeclaration = (
 
   return factory.createImportDeclaration(
     undefined,
-    factory.createImportClause(false, undefined, factory.createNamedImports(namedImports)),
+    factory.createImportClause(allTypeOnly, undefined, factory.createNamedImports(namedImports)),
     factory.createStringLiteral(moduleSpecifier),
   )
 }
@@ -75,9 +78,13 @@ const updateNamedImports = (
     })
   }
 
-  Array.from(importsToAdd.values()).forEach(({ alias, componentName }) => {
+  const newImports = Array.from(importsToAdd.values())
+  const allNewTypeOnly = newImports.every(({ isTypeOnly }) => isTypeOnly)
+  const hasExistingImports = importSpecifiers.length > 0
+
+  newImports.forEach(({ alias, componentName, isTypeOnly }) => {
     const newImport = factory.createImportSpecifier(
-      false,
+      !allNewTypeOnly || hasExistingImports ? (isTypeOnly ?? false) : false,
       alias ? factory.createIdentifier(componentName) : undefined,
       factory.createIdentifier(alias ?? componentName),
     )
@@ -87,12 +94,14 @@ const updateNamedImports = (
     }
   })
 
+  const isModuleLevelTypeOnly = allNewTypeOnly && !hasExistingImports
+
   return factory.updateImportDeclaration(
     node,
     node.modifiers,
     factory.updateImportClause(
       node.importClause,
-      node.importClause.isTypeOnly,
+      isModuleLevelTypeOnly || node.importClause.isTypeOnly,
       node.importClause.name,
       factory.createNamedImports(importSpecifiers),
     ),

package/dist/cjs/src/__alpha__/SingleSelect/SingleSelect.cjs

@@ -2,31 +2,84 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var select = require('@react-stately/select');
 var reactAriaComponents = require('react-aria-components');
+var SingleSelectContext = require('./context/SingleSelectContext.cjs');
 var List = require('./subcomponents/List/List.cjs');
 var ListSection = require('./subcomponents/ListSection/ListSection.cjs');
 var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
 var Trigger = require('./subcomponents/Trigger/Trigger.cjs');
-var SingleSelect_module = require('./SingleSelect.module.css.cjs');
+var Popover = require('./subcomponents/Popover/Popover.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var SingleSelect = function (_a) {
-  var classNameOverride = _a.classNameOverride,
-    children = _a.children,
-    restProps = tslib.__rest(_a, ["classNameOverride", "children"]);
-  return React__default.default.createElement(reactAriaComponents.Select, tslib.__assign({
-    className: classNameOverride,
-    placeholder: ""
-  }, restProps), React__default.default.createElement(Trigger.Trigger, null), React__default.default.createElement(reactAriaComponents.Popover, {
-    className: SingleSelect_module.popover
-  }, children));
-};
-SingleSelect.displayName = 'SingleSelect';
-SingleSelect.List = List.List;
-SingleSelect.ListItem = ListItem.ListItem;
-SingleSelect.ListSection = ListSection.ListSection;
+const SingleSelect = /*#__PURE__*/function () {
+  const SingleSelect = function (_a) {
+    var items = _a.items,
+      onSelectionChange = _a.onSelectionChange,
+      children = _a.children,
+      restProps = tslib.__rest(_a, ["items", "onSelectionChange", "children"]);
+    var buttonRef = React__default.default.useRef(null);
+    var popoverRef = React__default.default.useRef(null);
+    var racPopoverRef = React__default.default.useRef(null);
+    var uniqueId = React.useId();
+    var anchorName = "--trigger-".concat(uniqueId);
+    var state = select.useSelectState({
+      items: items
+    });
+    var handleOnSelectionChange = React__default.default.useCallback(function (keys) {
+      var key = null;
+      if (keys instanceof Set && keys.size > 0) {
+        key = Array.from(keys)[0];
+      }
+      state.setSelectedKey(key);
+      if (onSelectionChange) {
+        onSelectionChange(key);
+      }
+    }, [state, onSelectionChange]);
+    // Cloning children here to allow users to pass in a custom ListItem or ListSection
+    // and still have the SingleSelect handle selection state
+    var injectedChildren = React.useMemo(function () {
+      if (!React.isValidElement(children)) return null;
+      var selectedKeys = state.selectedKey ? new Set([state.selectedKey]) : new Set();
+      return React.cloneElement(children, {
+        selectionMode: 'single',
+        selectedKeys: selectedKeys,
+        onSelectionChange: handleOnSelectionChange,
+        autoFocus: 'first'
+      });
+    }, [children, handleOnSelectionChange, state.selectedKey]);
+    return React__default.default.createElement(SingleSelectContext.SingleSelectContext.Provider, {
+      value: {
+        isOpen: state.isOpen,
+        setOpen: state.setOpen,
+        selectedKey: state.selectedKey,
+        items: items,
+        anchorName: anchorName
+      }
+    }, React__default.default.createElement(reactAriaComponents.Select
+    // TODO: allow user to pass in label
+    , tslib.__assign({
+      "aria-label": 'single-select',
+      onSelectionChange: function (key) {
+        return handleOnSelectionChange(key != null ? new Set([key]) : new Set());
+      },
+      placeholder: ""
+    }, restProps), React__default.default.createElement(Trigger.Trigger, {
+      buttonRef: buttonRef
+    }), state.isOpen && React__default.default.createElement(Popover.Popover, {
+      buttonRef: buttonRef,
+      popoverRef: popoverRef,
+      racPopoverRef: racPopoverRef
+    }, injectedChildren)));
+  };
+  SingleSelect.displayName = 'SingleSelect';
+  SingleSelect.List = List.List;
+  SingleSelect.ListItem = ListItem.ListItem;
+  SingleSelect.ListSection = ListSection.ListSection;
+  return SingleSelect;
+}();
 exports.SingleSelect = SingleSelect;

package/dist/cjs/src/__alpha__/SingleSelect/context/SingleSelectContext.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var SingleSelectContext = React.createContext(undefined);
+var useSingleSelectContext = function () {
+  var context = React.useContext(SingleSelectContext);
+  if (!context) {
+    throw new Error('useSingleSelectContext must be used within a SingleSelectContext.Provider');
+  }
+  return context;
+};
+exports.SingleSelectContext = SingleSelectContext;
+exports.useSingleSelectContext = useSingleSelectContext;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var usePositioningStyles = require('./utils/usePositioningStyles.cjs');
+var Popover_module = require('./Popover.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Popover = function (_a) {
+  var buttonRef = _a.buttonRef,
+    popoverRef = _a.popoverRef,
+    racPopoverRef = _a.racPopoverRef,
+    children = _a.children;
+  var _b = SingleSelectContext.useSingleSelectContext(),
+    isOpen = _b.isOpen,
+    setOpen = _b.setOpen,
+    anchorName = _b.anchorName;
+  var _c = usePositioningStyles.usePositioningStyles(buttonRef, popoverRef, anchorName),
+    popoverStyle = _c.popoverStyle,
+    isPositioned = _c.isPositioned;
+  var shouldShowPopover = React.useMemo(function () {
+    return isOpen && isPositioned;
+  }, [isOpen, isPositioned]);
+  React.useLayoutEffect(function () {
+    var popover = popoverRef.current;
+    if (!(popover === null || popover === void 0 ? void 0 : popover.showPopover) || !(popover === null || popover === void 0 ? void 0 : popover.hidePopover)) return;
+    if (shouldShowPopover) {
+      popover.showPopover();
+    } else {
+      popover.hidePopover();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldShowPopover]);
+  return React__default.default.createElement(reactAriaComponents.Popover, {
+    shouldUpdatePosition: false,
+    trigger: "manual",
+    isOpen: isOpen,
+    onOpenChange: setOpen,
+    ref: racPopoverRef
+  }, React__default.default.createElement("div", {
+    // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
+    popover: "manual",
+    ref: popoverRef,
+    className: Popover_module.popover,
+    style: popoverStyle
+  }, children));
+};
+Popover.displayName = 'SingleSelect.Popover';
+exports.Popover = Popover;

package/dist/cjs/src/__alpha__/SingleSelect/{SingleSelect.module.css.cjs → subcomponents/Popover/Popover.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "popover": "SingleSelect-module_popover__ZjL9n"
+  "popover": "Popover-module_popover__BjY2S"
 };
 module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+function usePopoverPositioning(_a) {
+  var triggerRef = _a.triggerRef,
+    popoverRef = _a.popoverRef,
+    _b = _a.direction,
+    direction = _b === void 0 ? 'ltr' : _b,
+    _c = _a.offset,
+    offset = _c === void 0 ? 4 : _c,
+    _d = _a.preferredPlacement,
+    preferredPlacement = _d === void 0 ? 'bottom' : _d;
+  var _e = React.useState({
+      top: preferredPlacement === 'bottom' ? offset : 'auto',
+      bottom: preferredPlacement === 'top' ? offset : 'auto',
+      insetInlineStart: 0,
+      maxHeight: 300 // TODO: update this based on designs
+    }),
+    position = _e[0],
+    setPosition = _e[1];
+  var _f = React.useState(true),
+    isPositioned = _f[0],
+    setIsPositioned = _f[1];
+  var mountedRef = React.useRef(false);
+  var isSSR = typeof window === 'undefined';
+  var updatePosition = React.useCallback(function () {
+    var _a;
+    if (isSSR) return;
+    var trigger = triggerRef.current;
+    var popover = popoverRef.current;
+    if (!mountedRef.current || !trigger || !(popover === null || popover === void 0 ? void 0 : popover.isConnected)) {
+      return;
+    }
+    var triggerRect = trigger.getBoundingClientRect();
+    if (!triggerRect) return;
+    var doc = trigger.ownerDocument;
+    var win = (_a = doc === null || doc === void 0 ? void 0 : doc.defaultView) !== null && _a !== void 0 ? _a : window;
+    var isRTL = direction === 'rtl';
+    var inlineStart = isRTL ? win.innerWidth - triggerRect.right : triggerRect.left;
+    var triggerTop = triggerRect.top;
+    var triggerBottom = triggerRect.bottom;
+    var viewportHeight = win.innerHeight;
+    var spaceAbove = triggerTop;
+    var spaceBelow = viewportHeight - triggerBottom;
+    var shouldFlip = preferredPlacement === 'bottom' && spaceBelow < 200 && spaceAbove > spaceBelow;
+    var top;
+    var bottom;
+    var maxHeight;
+    if (shouldFlip) {
+      top = 'auto';
+      bottom = viewportHeight - triggerTop + offset;
+      maxHeight = Math.max(0, spaceAbove - offset);
+    } else {
+      top = triggerBottom + offset;
+      bottom = 'auto';
+      maxHeight = Math.max(0, spaceBelow - offset);
+    }
+    var newPosition = {
+      top: top,
+      bottom: bottom,
+      insetInlineStart: inlineStart,
+      maxHeight: maxHeight
+    };
+    setPosition(newPosition);
+    setIsPositioned(true);
+  }, [triggerRef, popoverRef, direction, offset, preferredPlacement, isSSR]);
+  React.useEffect(function () {
+    if (typeof window === 'undefined') return;
+    mountedRef.current = true;
+    var triggerEl = triggerRef.current;
+    updatePosition();
+    var resizeObserver = new ResizeObserver(function () {
+      updatePosition();
+    });
+    if (triggerEl) resizeObserver.observe(triggerEl);
+    var onWindowResize = function () {
+      return updatePosition();
+    };
+    window.addEventListener('resize', onWindowResize, {
+      passive: true
+    });
+    return function () {
+      mountedRef.current = false;
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', onWindowResize);
+      setIsPositioned(false);
+    };
+  }, [updatePosition, triggerRef]);
+  return tslib.__assign(tslib.__assign({}, position), {
+    isPositioned: isPositioned
+  });
+}
+exports.usePopoverPositioning = usePopoverPositioning;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var i18n = require('@react-aria/i18n');
+var usePopoverPositioning = require('./usePopoverPositioning.cjs');
+var useSupportsAnchorPositioning = require('./useSupportsAnchorPositioning.cjs');
+var CSS_PROPS = {
+  POSITION_ANCHOR: '--position-anchor',
+  POSITION_AREA: '--position-area'
+};
+var DEFAULTS = {
+  MAX_HEIGHT: '300px'
+};
+/**
+ * Generates manual positioning styles for browsers without anchor positioning support or SSR
+ */
+var getManualPositioningStyles = function (positionData) {
+  return {
+    top: positionData.top,
+    bottom: positionData.bottom,
+    insetInlineStart: positionData.insetInlineStart,
+    maxHeight: positionData.maxHeight,
+    left: 'auto',
+    right: 'auto',
+    position: 'fixed'
+  };
+};
+var getAnchorPositioningStyles = function (anchorName, positionData) {
+  var _a;
+  var _b;
+  var styles = (_a = {
+    maxHeight: (_b = positionData.maxHeight) !== null && _b !== void 0 ? _b : DEFAULTS.MAX_HEIGHT
+  }, _a[CSS_PROPS.POSITION_ANCHOR] = anchorName, _a[CSS_PROPS.POSITION_AREA] = positionData.top === 'auto' ? 'top' : 'bottom', _a);
+  return styles;
+};
+var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
+  var direction = i18n.useLocale().direction;
+  var hasAnchorSupport = useSupportsAnchorPositioning.useSupportsAnchorPositioning();
+  var _a = usePopoverPositioning.usePopoverPositioning({
+      triggerRef: buttonRef,
+      popoverRef: popoverRef,
+      direction: direction,
+      preferredPlacement: 'bottom'
+    }),
+    top = _a.top,
+    bottom = _a.bottom,
+    insetInlineStart = _a.insetInlineStart,
+    maxHeight = _a.maxHeight,
+    isPositioned = _a.isPositioned;
+  var positionData = React.useMemo(function () {
+    return {
+      top: top,
+      bottom: bottom,
+      insetInlineStart: insetInlineStart,
+      maxHeight: maxHeight
+    };
+  }, [top, bottom, insetInlineStart, maxHeight]);
+  var popoverStyle = React.useMemo(function () {
+    if (hasAnchorSupport === null || !hasAnchorSupport) {
+      return getManualPositioningStyles(positionData);
+    }
+    return getAnchorPositioningStyles(anchorName, positionData);
+  }, [hasAnchorSupport, anchorName, positionData]);
+  return {
+    popoverStyle: popoverStyle,
+    isPositioned: isPositioned
+  };
+};
+exports.usePositioningStyles = usePositioningStyles;