npm - @dynatrace/strato-components - Versions diffs - 3.11.1 → 3.11.2 - Mend

@dynatrace/strato-components 3.11.1 → 3.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1717) hide show

package/esm/layouts/app-header/ActionItems.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/ActionItems.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n  Children,\n  Fragment,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport {\n  ActionButton,\n  isAppHeaderActionButton,\n  type AppHeaderActionButtonOwnProps,\n} from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport type { TooltipProps } from '../../overlays/tooltip/tooltip.types.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\nfunction getSlots(children: ReactNode) {\n  const actions: ReactElement<AppHeaderActionButtonOwnProps | TooltipProps>[] =\n    [];\n  const actionGroups: {\n    [groupId: string]: ReactElement<\n      AppHeaderActionButtonOwnProps | TooltipProps\n    >[];\n  } = {};\n  const custom: ReactNode[] = [];\n\n  let groupCounter = 0;\n\n  for (const child of Children.toArray(children)) {\n    if (!isElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, ActionItemGroup)) {\n      groupCounter++;\n      actionGroups[groupCounter] = [];\n      const actionGroup = actionGroups[groupCounter];\n\n      const validChildren = Children.toArray(child.props.children).filter(\n        (\n          validChild,\n        ): validChild is ReactElement<\n          AppHeaderActionButtonOwnProps | TooltipProps\n        > =>\n          (isSlot(validChild, Tooltip) &&\n            isSlot(validChild.props.children, ActionButton)) ||\n          isSlot(validChild, ActionButton),\n      );\n\n      validChildren.forEach((validChild) => actionGroup.push(validChild));\n    } else if (isAppHeaderActionButton(child)) {\n      const childWithKey = cloneElement<AppHeaderActionButtonOwnProps>(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      actions.push(childWithKey);\n    } else if (\n      isSlot(child, Tooltip) &&\n      isSlot(child.props.children, ActionButton)\n    ) {\n      actions.push(child);\n    } else {\n      const childWithKey = cloneElement(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      custom.push(childWithKey);\n    }\n  }\n  return { actions, actionGroups, custom };\n}\n\nfunction useCollapse() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * @public\n */\nexport interface AppHeaderActionItemsProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n\n/**\n * The action items section of the AppHeader, which collapses into an overlay on small screen sizes.\n * @public\n */\nexport const ActionItems = forwardRef<\n  HTMLDivElement,\n  AppHeaderActionItemsProps\n>(({ children, className, style, 'data-testid': dataTestId, ...rest }, ref) => {\n  const slots = useMemo(() => getSlots(children), [children]);\n  const collapse = useCollapse();\n  const intl = useIntl();\n\n  const hasActions = slots.actions.length > 0;\n  const hasGroups = Object.entries(slots.actionGroups).length > 0;\n\n  const isCollapsedIntoMenu =\n    collapse.isOverflowing && (hasActions || hasGroups);\n\n  return (\n    <>\n      <Flex\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"flex-end\"\n        flexGrow={1}\n        flexShrink={0}\n        flexBasis={hasActions || hasGroups ? 0 : 'auto'}\n        minWidth={0}\n        style={style}\n        className={className}\n        data-testid={dataTestId}\n      >\n        <Flex\n          {...rest}\n          ref={collapse.containerRef}\n          justifyContent=\"flex-end\"\n          alignItems=\"center\"\n          flexGrow={1}\n          minWidth={0}\n          hidden={collapse.isOverflowing}\n          style={{\n            visibility: collapse.isOverflowing ? 'hidden' : undefined,\n            flexBasis: collapse.isOverflowing ? 0 : undefined,\n          }}\n        >\n          <Flex\n            gap={4}\n            style={{ minWidth: 'max-content' }}\n            ref={collapse.contentRef}\n            alignItems=\"center\"\n          >\n            {/**\n             * `slots.custom` is intentionally rendered conditionally even if the parent is hidden.\n             * This ensures correct flex sizing calculations to determine whether the actions can fit or need to collapse.\n             */}\n            {collapse.isOverflowing ? null : slots.custom}\n            {slots.actions.map((action) => {\n              if (isSlot(action, ActionButton)) {\n                const { prefixIcon, children, showLabel, ...rest } =\n                  action.props;\n\n                return (\n                  <Button {...rest} key={action.key} variant=\"emphasized\">\n                    {prefixIcon ? (\n                      <Button.Prefix>{prefixIcon}</Button.Prefix>\n                    ) : null}\n                    {children}\n                  </Button>\n                );\n              } else if (\n                isSlot(action, Tooltip) &&\n                isSlot(action.props.children, ActionButton)\n              ) {\n                return action;\n              }\n\n              return null;\n            })}\n\n            {hasActions && hasGroups ? (\n              <Divider\n                orientation=\"vertical\"\n                flexItem={false}\n                style={{ height: 20 }}\n              />\n            ) : null}\n\n            {Object.entries(slots.actionGroups).map(\n              ([key, actions], actionGroupIndex) => (\n                <Fragment key={key}>\n                  {actionGroupIndex !== 0 && (\n                    <Divider\n                      orientation=\"vertical\"\n                      flexItem={false}\n                      style={{ height: 20 }}\n                    />\n                  )}\n                  {actions.map((action) => {\n                    if (isSlot(action, ActionButton)) {\n                      const { prefixIcon, children, showLabel, ...rest } =\n                        action.props;\n\n                      return (\n                        <Button {...rest} key={action.key} variant=\"emphasized\">\n                          {prefixIcon ? (\n                            <Button.Prefix>{prefixIcon}</Button.Prefix>\n                          ) : null}\n                          {children}\n                        </Button>\n                      );\n                    } else if (\n                      isSlot(action, Tooltip) &&\n                      isSlot(action.props.children, ActionButton)\n                    ) {\n                      return action;\n                    }\n\n                    return null;\n                  })}\n                </Fragment>\n              ),\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n      {collapse.isOverflowing ? (\n        <Flex gap={4} alignItems=\"center\">\n          {slots.custom}\n        </Flex>\n      ) : null}\n      {isCollapsedIntoMenu ? (\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              variant=\"default\"\n              aria-label={intl.formatMessage({\n                id: 'L/D6X7Ee5PYWzl3i',\n                defaultMessage: 'Show more actions',\n              })}\n            >\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            <Menu.Group>\n              {slots.actions.map((action) => {\n                if (isSlot(action, ActionButton)) {\n                  const { prefixIcon, children, showLabel, onClick, ...rest } =\n                    action.props;\n\n                  return (\n                    <Menu.Item\n                      {...rest}\n                      key={action.key}\n                      onSelect={\n                        (onClick ? onClick : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                    >\n                      {prefixIcon ? (\n                        <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                      ) : null}\n                      {children}\n                    </Menu.Item>\n                  );\n                } else if (\n                  isSlot(action, Tooltip) &&\n                  isSlot(action.props.children, ActionButton)\n                ) {\n                  return (\n                    <Menu.Item\n                      onSelect={\n                        (action.props.children.props.onClick\n                          ? action.props.children.props.onClick\n                          : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      {...action.props.children}\n                    >\n                      {action.props.children.props.prefixIcon ? (\n                        <Menu.Prefix>\n                          {action.props.children.props.prefixIcon}\n                        </Menu.Prefix>\n                      ) : null}\n                      {action.props.children.props.children}\n                      <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                    </Menu.Item>\n                  );\n                }\n\n                return null;\n              })}\n            </Menu.Group>\n            {Object.entries(slots.actionGroups).map(([groupId, actions]) => (\n              <Menu.Group key={groupId}>\n                {actions.map((action) => {\n                  if (isSlot(action, ActionButton)) {\n                    const {\n                      prefixIcon,\n                      children,\n                      showLabel,\n                      onClick,\n                      ...rest\n                    } = action.props;\n\n                    return (\n                      <Menu.Item\n                        {...rest}\n                        key={action.key}\n                        onSelect={\n                          (onClick ? onClick : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      >\n                        {prefixIcon ? (\n                          <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                        ) : null}\n                        {children}\n                      </Menu.Item>\n                    );\n                  } else if (\n                    isSlot(action, Tooltip) &&\n                    isSlot(action.props.children, ActionButton)\n                  ) {\n                    return (\n                      <Menu.Item\n                        onSelect={\n                          (action.props.children.props.onClick\n                            ? action.props.children.props.onClick\n                            : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                        {...action.props.children}\n                      >\n                        {action.props.children.props.prefixIcon ? (\n                          <Menu.Prefix>\n                            {action.props.children.props.prefixIcon}\n                          </Menu.Prefix>\n                        ) : null}\n                        {action.props.children.props.children}\n                        <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                      </Menu.Item>\n                    );\n                  }\n\n                  return null;\n                })}\n              </Menu.Group>\n            ))}\n          </Menu.Content>\n        </Menu>\n      ) : null}\n    </>\n  );\n});\n\n(ActionItems as typeof ActionItems & { displayName: string }).displayName =\n  'AppHeader.ActionItems';\n"],
-  "mappings": "AA+HI,mBA6CkB,KAyBN,YAtEZ;AA2Cc;AA1KlB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA,YAAAA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAIjC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,SAAS,eAAe;AACxB,SAAS,YAAY;AAErB,SAAS,SAAS,UAAqB;AACrC,QAAM,UACJ,CAAC;AACH,QAAM,eAIF,CAAC;AACL,QAAM,SAAsB,CAAC;AAE7B,MAAI,eAAe;AAEnB,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,CAAC,UAAU,KAAK,GAAG;AACrB;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,eAAe,GAAG;AAClC;AACA,mBAAa,YAAY,IAAI,CAAC;AAC9B,YAAM,cAAc,aAAa,YAAY;AAE7C,YAAM,gBAAgB,SAAS,QAAQ,MAAM,MAAM,QAAQ,EAAE;AAAA,QAC3D,CACE,eAIC,OAAO,YAAY,OAAO,KACzB,OAAO,WAAW,MAAM,UAAU,YAAY,KAChD,OAAO,YAAY,YAAY;AAAA,MACnC;AAEA,oBAAc,QAAQ,CAAC,eAAe,YAAY,KAAK,UAAU,CAAC;AAAA,IACpE,WAAW,wBAAwB,KAAK,GAAG;AACzC,YAAM,eAAe,aAA4C,OAAO;AAAA,QACtE,KAAK,MAAM,OAAO,OAAO,WAAW;AAAA,MACtC,CAAC;AACD,cAAQ,KAAK,YAAY;AAAA,IAC3B,WACE,OAAO,OAAO,OAAO,KACrB,OAAO,MAAM,MAAM,UAAU,YAAY,GACzC;AACA,cAAQ,KAAK,KAAK;AAAA,IACpB,OAAO;AACL,YAAM,eAAe,aAAa,OAAO;AAAA,QACvC,KAAK,MAAM,OAAO,OAAO,WAAW;AAAA,MACtC,CAAC;AACD,aAAO,KAAK,YAAY;AAAA,IAC1B;AAAA,EACF;AACA,SAAO,EAAE,SAAS,cAAc,OAAO;AACzC;AAEA,SAAS,cAAc;AACrB,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,gBAAgB,iBAAiB,YAAY;AACnD,QAAM,cAAc,iBAAiB,UAAU;AAE/C,SAAO;AAAA,IACL,eAAe,YAAY,QAAQ,cAAc;AAAA,IACjD;AAAA,IACA;AAAA,EACF;AACF;AAcO,MAAM,cAAc,WAGzB,CAAC,EAAE,UAAU,WAAW,OAAO,eAAe,YAAY,GAAG,KAAK,GAAG,QAAQ;AAC7E,QAAM,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAC1D,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,aAAa,MAAM,QAAQ,SAAS;AAC1C,QAAM,YAAY,OAAO,QAAQ,MAAM,YAAY,EAAE,SAAS;AAE9D,QAAM,sBACJ,SAAS,kBAAkB,cAAc;AAE3C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,WAAW,cAAc,YAAY,IAAI;AAAA,QACzC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,KAAK,SAAS;AAAA,YACd,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,UAAU;AAAA,YACV,UAAU;AAAA,YACV,QAAQ,SAAS;AAAA,YACjB,OAAO;AAAA,cACL,YAAY,SAAS,gBAAgB,WAAW;AAAA,cAChD,WAAW,SAAS,gBAAgB,IAAI;AAAA,YAC1C;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,OAAO,EAAE,UAAU,cAAc;AAAA,gBACjC,KAAK,SAAS;AAAA,gBACd,YAAW;AAAA,gBAMV;AAAA,2BAAS,gBAAgB,OAAO,MAAM;AAAA,kBACtC,MAAM,QAAQ,IAAI,CAAC,WAAW;AAC7B,wBAAI,OAAO,QAAQ,YAAY,GAAG;AAChC,4BAAM,EAAE,YAAY,UAAAC,WAAU,WAAW,GAAGC,MAAK,IAC/C,OAAO;AAET,6BACE,8BAAC,UAAQ,GAAGA,OAAM,KAAK,OAAO,KAAK,SAAQ,gBACxC,aACC,oBAAC,OAAO,QAAP,EAAe,sBAAW,IACzB,MACHD,SACH;AAAA,oBAEJ,WACE,OAAO,QAAQ,OAAO,KACtB,OAAO,OAAO,MAAM,UAAU,YAAY,GAC1C;AACA,6BAAO;AAAA,oBACT;AAEA,2BAAO;AAAA,kBACT,CAAC;AAAA,kBAEA,cAAc,YACb;AAAA,oBAAC;AAAA;AAAA,sBACC,aAAY;AAAA,sBACZ,UAAU;AAAA,sBACV,OAAO,EAAE,QAAQ,GAAG;AAAA;AAAA,kBACtB,IACE;AAAA,kBAEH,OAAO,QAAQ,MAAM,YAAY,EAAE;AAAA,oBAClC,CAAC,CAAC,KAAK,OAAO,GAAG,qBACf,qBAACD,WAAA,EACE;AAAA,2CAAqB,KACpB;AAAA,wBAAC;AAAA;AAAA,0BACC,aAAY;AAAA,0BACZ,UAAU;AAAA,0BACV,OAAO,EAAE,QAAQ,GAAG;AAAA;AAAA,sBACtB;AAAA,sBAED,QAAQ,IAAI,CAAC,WAAW;AACvB,4BAAI,OAAO,QAAQ,YAAY,GAAG;AAChC,gCAAM,EAAE,YAAY,UAAAC,WAAU,WAAW,GAAGC,MAAK,IAC/C,OAAO;AAET,iCACE,8BAAC,UAAQ,GAAGA,OAAM,KAAK,OAAO,KAAK,SAAQ,gBACxC,aACC,oBAAC,OAAO,QAAP,EAAe,sBAAW,IACzB,MACHD,SACH;AAAA,wBAEJ,WACE,OAAO,QAAQ,OAAO,KACtB,OAAO,OAAO,MAAM,UAAU,YAAY,GAC1C;AACA,iCAAO;AAAA,wBACT;AAEA,+BAAO;AAAA,sBACT,CAAC;AAAA,yBA7BY,GA8Bf;AAAA,kBAEJ;AAAA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,SAAS,gBACR,oBAAC,QAAK,KAAK,GAAG,YAAW,UACtB,gBAAM,QACT,IACE;AAAA,IACH,sBACC,qBAAC,QACC;AAAA,0BAAC,KAAK,SAAL,EACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,cAAY,KAAK,cAAc;AAAA,YAC7B,IAAI;AAAA,YACJ,gBAAgB;AAAA,UAClB,CAAC;AAAA,UAED,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA;AAAA,MACF,GACF;AAAA,MACA,qBAAC,KAAK,SAAL,EACC;AAAA,4BAAC,KAAK,OAAL,EACE,gBAAM,QAAQ,IAAI,CAAC,WAAW;AAC7B,cAAI,OAAO,QAAQ,YAAY,GAAG;AAChC,kBAAM,EAAE,YAAY,UAAAA,WAAU,WAAW,SAAS,GAAGC,MAAK,IACxD,OAAO;AAET,mBACE;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACE,GAAGA;AAAA,gBACJ,KAAK,OAAO;AAAA,gBACZ,UACG,UAAU,UAAU,MAAM;AAAA;AAAA,cAG5B,aACC,oBAAC,KAAK,QAAL,EAAa,sBAAW,IACvB;AAAA,cACHD;AAAA,YACH;AAAA,UAEJ,WACE,OAAO,QAAQ,OAAO,KACtB,OAAO,OAAO,MAAM,UAAU,YAAY,GAC1C;AACA,mBACE;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,UACG,OAAO,MAAM,SAAS,MAAM,UACzB,OAAO,MAAM,SAAS,MAAM,UAC5B,MAAM;AAAA,gBAEX,GAAG,OAAO,MAAM;AAAA,gBAEhB;AAAA,yBAAO,MAAM,SAAS,MAAM,aAC3B,oBAAC,KAAK,QAAL,EACE,iBAAO,MAAM,SAAS,MAAM,YAC/B,IACE;AAAA,kBACH,OAAO,MAAM,SAAS,MAAM;AAAA,kBAC7B,oBAAC,KAAK,aAAL,EAAkB,iBAAO,MAAM,MAAK;AAAA;AAAA;AAAA,YACvC;AAAA,UAEJ;AAEA,iBAAO;AAAA,QACT,CAAC,GACH;AAAA,QACC,OAAO,QAAQ,MAAM,YAAY,EAAE,IAAI,CAAC,CAAC,SAAS,OAAO,MACxD,oBAAC,KAAK,OAAL,EACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAI,OAAO,QAAQ,YAAY,GAAG;AAChC,kBAAM;AAAA,cACJ;AAAA,cACA,UAAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA,GAAGC;AAAA,YACL,IAAI,OAAO;AAEX,mBACE;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACE,GAAGA;AAAA,gBACJ,KAAK,OAAO;AAAA,gBACZ,UACG,UAAU,UAAU,MAAM;AAAA;AAAA,cAG5B,aACC,oBAAC,KAAK,QAAL,EAAa,sBAAW,IACvB;AAAA,cACHD;AAAA,YACH;AAAA,UAEJ,WACE,OAAO,QAAQ,OAAO,KACtB,OAAO,OAAO,MAAM,UAAU,YAAY,GAC1C;AACA,mBACE;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,UACG,OAAO,MAAM,SAAS,MAAM,UACzB,OAAO,MAAM,SAAS,MAAM,UAC5B,MAAM;AAAA,gBAEX,GAAG,OAAO,MAAM;AAAA,gBAEhB;AAAA,yBAAO,MAAM,SAAS,MAAM,aAC3B,oBAAC,KAAK,QAAL,EACE,iBAAO,MAAM,SAAS,MAAM,YAC/B,IACE;AAAA,kBACH,OAAO,MAAM,SAAS,MAAM;AAAA,kBAC7B,oBAAC,KAAK,aAAL,EAAkB,iBAAO,MAAM,MAAK;AAAA;AAAA;AAAA,YACvC;AAAA,UAEJ;AAEA,iBAAO;AAAA,QACT,CAAC,KAlDc,OAmDjB,CACD;AAAA,SACH;AAAA,OACF,IACE;AAAA,KACN;AAEJ,CAAC;AAEA,YAA6D,cAC5D;",
+  "sourcesContent": ["import {\n  forwardRef,\n  isValidElement,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n  Children,\n  Fragment,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport {\n  ActionButton,\n  isAppHeaderActionButton,\n  type AppHeaderActionButtonOwnProps,\n} from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport type { TooltipProps } from '../../overlays/tooltip/tooltip.types.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\nfunction getSlots(children: ReactNode) {\n  const actions: ReactElement<AppHeaderActionButtonOwnProps | TooltipProps>[] =\n    [];\n  const actionGroups: {\n    [groupId: string]: ReactElement<\n      AppHeaderActionButtonOwnProps | TooltipProps\n    >[];\n  } = {};\n  const custom: ReactNode[] = [];\n\n  let groupCounter = 0;\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, ActionItemGroup)) {\n      groupCounter++;\n      actionGroups[groupCounter] = [];\n      const actionGroup = actionGroups[groupCounter];\n\n      const validChildren = Children.toArray(child.props.children).filter(\n        (\n          validChild,\n        ): validChild is ReactElement<\n          AppHeaderActionButtonOwnProps | TooltipProps\n        > =>\n          (isSlot(validChild, Tooltip) &&\n            isSlot(validChild.props.children, ActionButton)) ||\n          isSlot(validChild, ActionButton),\n      );\n\n      validChildren.forEach((validChild) => actionGroup.push(validChild));\n    } else if (isAppHeaderActionButton(child)) {\n      const childWithKey = cloneElement<AppHeaderActionButtonOwnProps>(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      actions.push(childWithKey);\n    } else if (\n      isSlot(child, Tooltip) &&\n      isSlot(child.props.children, ActionButton)\n    ) {\n      actions.push(child);\n    } else {\n      const childWithKey = cloneElement(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      custom.push(childWithKey);\n    }\n  }\n  return { actions, actionGroups, custom };\n}\n\nfunction useCollapse() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * @public\n */\nexport interface AppHeaderActionItemsProps\n  extends WithChildren, StylingProps, DataTestId {}\n\n/**\n * The action items section of the AppHeader, which collapses into an overlay on small screen sizes.\n * @public\n */\nexport const ActionItems = forwardRef<\n  HTMLDivElement,\n  AppHeaderActionItemsProps\n>(({ children, className, style, 'data-testid': dataTestId, ...rest }, ref) => {\n  const slots = useMemo(() => getSlots(children), [children]);\n  const collapse = useCollapse();\n  const intl = useIntl();\n\n  const hasActions = slots.actions.length > 0;\n  const hasGroups = Object.entries(slots.actionGroups).length > 0;\n\n  const isCollapsedIntoMenu =\n    collapse.isOverflowing && (hasActions || hasGroups);\n\n  return (\n    <>\n      <Flex\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"flex-end\"\n        flexGrow={1}\n        flexShrink={0}\n        flexBasis={hasActions || hasGroups ? 0 : 'auto'}\n        minWidth={0}\n        style={style}\n        className={className}\n        data-testid={dataTestId}\n      >\n        <Flex\n          {...rest}\n          ref={collapse.containerRef}\n          justifyContent=\"flex-end\"\n          alignItems=\"center\"\n          flexGrow={1}\n          minWidth={0}\n          hidden={collapse.isOverflowing}\n          style={{\n            visibility: collapse.isOverflowing ? 'hidden' : undefined,\n            flexBasis: collapse.isOverflowing ? 0 : undefined,\n          }}\n        >\n          <Flex\n            gap={4}\n            style={{ minWidth: 'max-content' }}\n            ref={collapse.contentRef}\n            alignItems=\"center\"\n          >\n            {/**\n             * `slots.custom` is intentionally rendered conditionally even if the parent is hidden.\n             * This ensures correct flex sizing calculations to determine whether the actions can fit or need to collapse.\n             */}\n            {collapse.isOverflowing ? null : slots.custom}\n            {slots.actions.map((action) => {\n              if (isSlot(action, ActionButton)) {\n                const { prefixIcon, children, showLabel, ...rest } =\n                  action.props;\n\n                return (\n                  <Button {...rest} key={action.key} variant=\"emphasized\">\n                    {prefixIcon ? (\n                      <Button.Prefix>{prefixIcon}</Button.Prefix>\n                    ) : null}\n                    {children}\n                  </Button>\n                );\n              } else if (\n                isSlot(action, Tooltip) &&\n                isSlot(action.props.children, ActionButton)\n              ) {\n                return action;\n              }\n\n              return null;\n            })}\n\n            {hasActions && hasGroups ? (\n              <Divider\n                orientation=\"vertical\"\n                flexItem={false}\n                style={{ height: 20 }}\n              />\n            ) : null}\n\n            {Object.entries(slots.actionGroups).map(\n              ([key, actions], actionGroupIndex) => (\n                <Fragment key={key}>\n                  {actionGroupIndex !== 0 && (\n                    <Divider\n                      orientation=\"vertical\"\n                      flexItem={false}\n                      style={{ height: 20 }}\n                    />\n                  )}\n                  {actions.map((action) => {\n                    if (isSlot(action, ActionButton)) {\n                      const { prefixIcon, children, showLabel, ...rest } =\n                        action.props;\n\n                      return (\n                        <Button {...rest} key={action.key} variant=\"emphasized\">\n                          {prefixIcon ? (\n                            <Button.Prefix>{prefixIcon}</Button.Prefix>\n                          ) : null}\n                          {children}\n                        </Button>\n                      );\n                    } else if (\n                      isSlot(action, Tooltip) &&\n                      isSlot(action.props.children, ActionButton)\n                    ) {\n                      return action;\n                    }\n\n                    return null;\n                  })}\n                </Fragment>\n              ),\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n      {collapse.isOverflowing ? (\n        <Flex gap={4} alignItems=\"center\">\n          {slots.custom}\n        </Flex>\n      ) : null}\n      {isCollapsedIntoMenu ? (\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              variant=\"default\"\n              aria-label={intl.formatMessage({\n                id: 'L/D6X7Ee5PYWzl3i',\n                defaultMessage: 'Show more actions',\n              })}\n            >\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            <Menu.Group>\n              {slots.actions.map((action) => {\n                if (isSlot(action, ActionButton)) {\n                  const { prefixIcon, children, showLabel, onClick, ...rest } =\n                    action.props;\n\n                  return (\n                    <Menu.Item\n                      {...rest}\n                      key={action.key}\n                      onSelect={\n                        (onClick ? onClick : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                    >\n                      {prefixIcon ? (\n                        <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                      ) : null}\n                      {children}\n                    </Menu.Item>\n                  );\n                } else if (\n                  isSlot(action, Tooltip) &&\n                  isSlot(action.props.children, ActionButton)\n                ) {\n                  return (\n                    <Menu.Item\n                      onSelect={\n                        (action.props.children.props.onClick\n                          ? action.props.children.props.onClick\n                          : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      {...action.props.children}\n                    >\n                      {action.props.children.props.prefixIcon ? (\n                        <Menu.Prefix>\n                          {action.props.children.props.prefixIcon}\n                        </Menu.Prefix>\n                      ) : null}\n                      {action.props.children.props.children}\n                      <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                    </Menu.Item>\n                  );\n                }\n\n                return null;\n              })}\n            </Menu.Group>\n            {Object.entries(slots.actionGroups).map(([groupId, actions]) => (\n              <Menu.Group key={groupId}>\n                {actions.map((action) => {\n                  if (isSlot(action, ActionButton)) {\n                    const {\n                      prefixIcon,\n                      children,\n                      showLabel,\n                      onClick,\n                      ...rest\n                    } = action.props;\n\n                    return (\n                      <Menu.Item\n                        {...rest}\n                        key={action.key}\n                        onSelect={\n                          (onClick ? onClick : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      >\n                        {prefixIcon ? (\n                          <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                        ) : null}\n                        {children}\n                      </Menu.Item>\n                    );\n                  } else if (\n                    isSlot(action, Tooltip) &&\n                    isSlot(action.props.children, ActionButton)\n                  ) {\n                    return (\n                      <Menu.Item\n                        onSelect={\n                          (action.props.children.props.onClick\n                            ? action.props.children.props.onClick\n                            : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                        {...action.props.children}\n                      >\n                        {action.props.children.props.prefixIcon ? (\n                          <Menu.Prefix>\n                            {action.props.children.props.prefixIcon}\n                          </Menu.Prefix>\n                        ) : null}\n                        {action.props.children.props.children}\n                        <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                      </Menu.Item>\n                    );\n                  }\n\n                  return null;\n                })}\n              </Menu.Group>\n            ))}\n          </Menu.Content>\n        </Menu>\n      ) : null}\n    </>\n  );\n});\n\n(ActionItems as typeof ActionItems & { displayName: string }).displayName =\n  'AppHeader.ActionItems';\n"],
+  "mappings": "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",
   "names": ["Fragment", "children", "rest"]
 }

package/esm/layouts/app-header/AppHeader.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._8j2khp0-3-11-1 {
+._8j2khp0-3-11-2 {
   position: relative;
   display: flex;
   align-items: center;

package/esm/layouts/app-header/AppHeader.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./AppHeader.css";
-var header = "_8j2khp0-3-11-1";
+var header = "_8j2khp0-3-11-2";
 export {
   header
 };

package/esm/layouts/app-header/AppHeader.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.css.ts"],
-  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-11-1';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/app-header/Menus.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { jsxs } from "react/jsx-runtime";
-import { Children } from "react";
-import { isElement } from "react-is";
-import { isDev } from "../../core/utils/is-node-environment.js";
+import {
+  isValidElement,
+  Children
+} from "react";
 import { isSlot } from "../../core/utils/is-slot.js";
+import { devLog } from "../../core/utils/logging.js";
 import { Flex } from "../flex/Flex.js";
 import { HelpMenu } from "../help-menu/HelpMenu.js";
 function getItemSlots(children) {
@@ -11,14 +13,14 @@ function getItemSlots(children) {
     custom: null
   };
   for (const child of Children.toArray(children)) {
-    if (isElement(child)) {
+    if (isValidElement(child)) {
       if (isSlot(child, HelpMenu)) {
         slots.helpMenu = child;
       } else {
         slots.custom = child;
       }
-    } else if (isDev()) {
-      console.warn("The used child is not supported by the AppHeader.");
+    } else {
+      devLog("The used child is not supported by the AppHeader.");
     }
   }
   return slots;

package/esm/layouts/app-header/Menus.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Menus.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactNode, Children } from 'react';\nimport { isElement } from 'react-is';\n\n\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../flex/Flex.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\ntype Slots = {\n  custom: ReactNode | null;\n  helpMenu: ReactNode | null;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    helpMenu: null,\n    custom: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isElement(child)) {\n      if (isSlot(child, HelpMenu)) {\n        slots.helpMenu = child;\n      } else {\n        slots.custom = child;\n      }\n    } else if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the AppHeader.');\n    }\n  }\n\n  return slots;\n}\n\n/**\n * An `AppHeader` slot for menus like the `HelpMenu`.\n * @returns\n */\nexport const Menus = (props: PropsWithChildren) => {\n  const slots = getItemSlots(props.children);\n\n  return (\n    <Flex alignItems=\"center\" gap={4}>\n      {slots.custom}\n      {slots.helpMenu}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AA4CI;AA5CJ,SAAiD,gBAAgB;AACjE,SAAS,iBAAiB;AAG1B,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAOzB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,UAAU,KAAK,GAAG;AACpB,UAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,cAAM,WAAW;AAAA,MACnB,OAAO;AACL,cAAM,SAAS;AAAA,MACjB;AAAA,IACF,WAAW,MAAM,GAAG;AAElB,cAAQ,KAAK,mDAAmD;AAAA,IAClE;AAAA,EACF;AAEA,SAAO;AACT;AAMO,MAAM,QAAQ,CAAC,UAA6B;AACjD,QAAM,QAAQ,aAAa,MAAM,QAAQ;AAEzC,SACE,qBAAC,QAAK,YAAW,UAAS,KAAK,GAC5B;AAAA,UAAM;AAAA,IACN,MAAM;AAAA,KACT;AAEJ;",
+  "sourcesContent": ["import {\n  type PropsWithChildren,\n  isValidElement,\n  type ReactNode,\n  Children,\n} from 'react';\n\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Flex } from '../flex/Flex.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\ntype Slots = {\n  custom: ReactNode | null;\n  helpMenu: ReactNode | null;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    helpMenu: null,\n    custom: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isValidElement(child)) {\n      if (isSlot(child, HelpMenu)) {\n        slots.helpMenu = child;\n      } else {\n        slots.custom = child;\n      }\n    } else {\n      devLog('The used child is not supported by the AppHeader.');\n    }\n  }\n\n  return slots;\n}\n\n/**\n * An `AppHeader` slot for menus like the `HelpMenu`.\n * @returns\n */\nexport const Menus = (props: PropsWithChildren) => {\n  const slots = getItemSlots(props.children);\n\n  return (\n    <Flex alignItems=\"center\" gap={4}>\n      {slots.custom}\n      {slots.helpMenu}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AA8CI;AA9CJ;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAOzB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,eAAe,KAAK,GAAG;AACzB,UAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,cAAM,WAAW;AAAA,MACnB,OAAO;AACL,cAAM,SAAS;AAAA,MACjB;AAAA,IACF,OAAO;AACL,aAAO,mDAAmD;AAAA,IAC5D;AAAA,EACF;AAEA,SAAO;AACT;AAMO,MAAM,QAAQ,CAAC,UAA6B;AACjD,QAAM,QAAQ,aAAa,MAAM,QAAQ;AAEzC,SACE,qBAAC,QAAK,YAAW,UAAS,KAAK,GAC5B;AAAA,UAAM;AAAA,IACN,MAAM;AAAA,KACT;AAEJ;",
   "names": []
 }

package/esm/layouts/app-header/Navigation.css CHANGED Viewed

@@ -1,13 +1,13 @@
-._swz1ff2-3-11-1 {
+._swz1ff2-3-11-2 {
   position: relative;
 }
-._swz1ff2-3-11-1:is(._swz1ff0-3-11-1,.active):not(._swz1ff1-3-11-1) {
+._swz1ff2-3-11-2:is(._swz1ff0-3-11-2,.active):not(._swz1ff1-3-11-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-11-1:is(._swz1ff0-3-11-1,.active):not(._swz1ff1-3-11-1):hover {
+._swz1ff2-3-11-2:is(._swz1ff0-3-11-2,.active):not(._swz1ff1-3-11-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-11-1:is(._swz1ff0-3-11-1,.active)::after {
+._swz1ff2-3-11-2:is(._swz1ff0-3-11-2,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-11-1 {
+._swz1ff3-3-11-2 {
   position: relative;
 }
-._swz1ff3-3-11-1:is(._swz1ff0-3-11-1,.active):not(._swz1ff1-3-11-1) {
+._swz1ff3-3-11-2:is(._swz1ff0-3-11-2,.active):not(._swz1ff1-3-11-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-11-1:is(._swz1ff0-3-11-1,.active):not(._swz1ff1-3-11-1):hover {
+._swz1ff3-3-11-2:is(._swz1ff0-3-11-2,.active):not(._swz1ff1-3-11-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-11-1:is(._swz1ff0-3-11-1,.active)::after {
+._swz1ff3-3-11-2:is(._swz1ff0-3-11-2,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-11-1 {
+._swz1ff4-3-11-2 {
   min-width: max-content;
 }

package/esm/layouts/app-header/Navigation.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { createElement } from "react";
 import clsx from "clsx";
 import {
   forwardRef,
+  isValidElement,
   useMemo,
   useRef,
   Children
 } from "react";
 import { useIntl } from "react-intl";
-import { isElement } from "react-is";
 import { MenuIcon } from "@dynatrace/strato-icons";
 import { Logo } from "./Logo.js";
 import * as styles from "./Navigation.sty.js";
@@ -21,7 +21,7 @@ function getSlots(children) {
   const linksProps = [];
   let logo;
   for (const child of Children.toArray(children)) {
-    if (!isElement(child)) {
+    if (!isValidElement(child)) {
       continue;
     }
     if (isSlot(child, NavigationItem)) {

package/esm/layouts/app-header/Navigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useMemo,\n  useRef,\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { MenuIcon } from '@dynatrace/strato-icons';\n\nimport { Logo } from './Logo.js';\nimport * as styles from './Navigation.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Flex } from '../flex/Flex.js';\n\n/**\n * @public\n */\nexport interface AppHeaderNavigationProps\n  extends StylingProps,\n    DataTestId,\n    WithChildren {}\n\nfunction getSlots(children: ReactNode) {\n  const linksProps: AppHeaderNavigationItemProps<ElementType>[] = [];\n  let logo: ReactNode;\n\n  for (const child of Children.toArray(children)) {\n    if (!isElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, NavigationItem)) {\n      const key = child.key ?? crypto.randomUUID();\n      const propsWithKey = Object.assign({}, child.props, { key });\n      linksProps.push(propsWithKey);\n    } else if (isSlot(child, Logo)) {\n      logo = child;\n    }\n  }\n\n  return { linksProps, logo };\n}\n\nfunction useCollapsingNav() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * Container for AppHeader navigation items\n * @public\n */\nexport const Navigation = forwardRef<HTMLDivElement, AppHeaderNavigationProps>(\n  (props, ref) => {\n    const {\n      'data-testid': dataTestId,\n      style,\n      className,\n      children,\n      ...rest\n    } = props;\n\n    const slots = useMemo(() => getSlots(children), [children]);\n    const collapsingNav = useCollapsingNav();\n    const intl = useIntl();\n\n    return (\n      <>\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Open app navigation',\n                id: 'WCZAUtmjwNCm5iwa',\n                description:\n                  'Label for the menu trigger to open app-header navigation.',\n              })}\n              style={{\n                display: collapsingNav.isOverflowing ? undefined : 'none',\n              }}\n            >\n              <Button.Prefix>\n                <MenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            {slots.linksProps.map((linkProps) => {\n              const {\n                isSelected,\n                disabled,\n                className: navItemClassName,\n                ...rest\n              } = linkProps;\n              return (\n                <Menu.Link\n                  {...rest}\n                  key={linkProps.key}\n                  className={clsx(\n                    styles.menuLink,\n                    {\n                      [styles.isSelected]: isSelected,\n                      [styles.isDisabled]: disabled,\n                    },\n                    navItemClassName,\n                  )}\n                  disabled={disabled}\n                />\n              );\n            })}\n          </Menu.Content>\n        </Menu>\n        <Flex\n          {...rest}\n          ref={ref}\n          gap={4}\n          alignItems=\"center\"\n          flexShrink={1}\n          minWidth={0}\n          style={style}\n          className={className}\n          data-testid={dataTestId}\n        >\n          {slots.logo || <Logo />}\n          <Flex\n            ref={collapsingNav.containerRef}\n            flexGrow={1}\n            minWidth={0}\n            hidden={collapsingNav.isOverflowing}\n            style={{\n              visibility: collapsingNav.isOverflowing ? 'hidden' : undefined,\n              flexBasis: collapsingNav.isOverflowing ? 0 : undefined,\n            }}\n          >\n            <Flex\n              as=\"nav\"\n              gap={4}\n              className={styles.inlineNav}\n              ref={collapsingNav.contentRef}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'App navigation',\n                id: 'oA42meteX3Ww5Zo5',\n              })}\n            >\n              {slots.linksProps.map((linkProps) => {\n                const {\n                  isSelected,\n                  disabled,\n                  as = 'a',\n                  className: navItemClassName,\n                  ...rest\n                } = linkProps;\n\n                return (\n                  <Button\n                    {...rest}\n                    key={linkProps.key}\n                    as={as}\n                    className={clsx(\n                      styles.button,\n                      {\n                        [styles.isSelected]: isSelected,\n                        [styles.isDisabled]: disabled,\n                      },\n                      navItemClassName,\n                    )}\n                    disabled={disabled}\n                  />\n                );\n              })}\n            </Flex>\n          </Flex>\n        </Flex>\n      </>\n    );\n  },\n);\n(Navigation as typeof Navigation & { displayName: string }).displayName =\n  'AppHeader.Navigation';\n\n/**\n * @public\n */\nexport interface AppHeaderNavigationItemOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  href?: string;\n  disabled?: boolean;\n  isSelected?: boolean;\n}\n\n/**\n * @public\n */\nexport type AppHeaderNavigationItemProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderNavigationItemOwnProps>;\n\n/**\n * Used to configure desktop and mobile navigation items\n * @public\n */\nexport const NavigationItem: <E extends ElementType = 'a'>(\n  props: AppHeaderNavigationItemProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderNavigationItemProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => <div ref={forwardedRef} {...props} />,\n);\n(\n  NavigationItem as typeof NavigationItem & { displayName: string }\n).displayName = 'AppHeader.NavigationItem';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  isValidElement,\n  useMemo,\n  useRef,\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { MenuIcon } from '@dynatrace/strato-icons';\n\nimport { Logo } from './Logo.js';\nimport * as styles from './Navigation.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Flex } from '../flex/Flex.js';\n\n/**\n * @public\n */\nexport interface AppHeaderNavigationProps\n  extends StylingProps, DataTestId, WithChildren {}\n\nfunction getSlots(children: ReactNode) {\n  const linksProps: AppHeaderNavigationItemProps<ElementType>[] = [];\n  let logo: ReactNode;\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, NavigationItem)) {\n      const key = child.key ?? crypto.randomUUID();\n      const propsWithKey = Object.assign({}, child.props, { key });\n      linksProps.push(propsWithKey);\n    } else if (isSlot(child, Logo)) {\n      logo = child;\n    }\n  }\n\n  return { linksProps, logo };\n}\n\nfunction useCollapsingNav() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * Container for AppHeader navigation items\n * @public\n */\nexport const Navigation = forwardRef<HTMLDivElement, AppHeaderNavigationProps>(\n  (props, ref) => {\n    const {\n      'data-testid': dataTestId,\n      style,\n      className,\n      children,\n      ...rest\n    } = props;\n\n    const slots = useMemo(() => getSlots(children), [children]);\n    const collapsingNav = useCollapsingNav();\n    const intl = useIntl();\n\n    return (\n      <>\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Open app navigation',\n                id: 'WCZAUtmjwNCm5iwa',\n                description:\n                  'Label for the menu trigger to open app-header navigation.',\n              })}\n              style={{\n                display: collapsingNav.isOverflowing ? undefined : 'none',\n              }}\n            >\n              <Button.Prefix>\n                <MenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            {slots.linksProps.map((linkProps) => {\n              const {\n                isSelected,\n                disabled,\n                className: navItemClassName,\n                ...rest\n              } = linkProps;\n              return (\n                <Menu.Link\n                  {...rest}\n                  key={linkProps.key}\n                  className={clsx(\n                    styles.menuLink,\n                    {\n                      [styles.isSelected]: isSelected,\n                      [styles.isDisabled]: disabled,\n                    },\n                    navItemClassName,\n                  )}\n                  disabled={disabled}\n                />\n              );\n            })}\n          </Menu.Content>\n        </Menu>\n        <Flex\n          {...rest}\n          ref={ref}\n          gap={4}\n          alignItems=\"center\"\n          flexShrink={1}\n          minWidth={0}\n          style={style}\n          className={className}\n          data-testid={dataTestId}\n        >\n          {slots.logo || <Logo />}\n          <Flex\n            ref={collapsingNav.containerRef}\n            flexGrow={1}\n            minWidth={0}\n            hidden={collapsingNav.isOverflowing}\n            style={{\n              visibility: collapsingNav.isOverflowing ? 'hidden' : undefined,\n              flexBasis: collapsingNav.isOverflowing ? 0 : undefined,\n            }}\n          >\n            <Flex\n              as=\"nav\"\n              gap={4}\n              className={styles.inlineNav}\n              ref={collapsingNav.contentRef}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'App navigation',\n                id: 'oA42meteX3Ww5Zo5',\n              })}\n            >\n              {slots.linksProps.map((linkProps) => {\n                const {\n                  isSelected,\n                  disabled,\n                  as = 'a',\n                  className: navItemClassName,\n                  ...rest\n                } = linkProps;\n\n                return (\n                  <Button\n                    {...rest}\n                    key={linkProps.key}\n                    as={as}\n                    className={clsx(\n                      styles.button,\n                      {\n                        [styles.isSelected]: isSelected,\n                        [styles.isDisabled]: disabled,\n                      },\n                      navItemClassName,\n                    )}\n                    disabled={disabled}\n                  />\n                );\n              })}\n            </Flex>\n          </Flex>\n        </Flex>\n      </>\n    );\n  },\n);\n(Navigation as typeof Navigation & { displayName: string }).displayName =\n  'AppHeader.Navigation';\n\n/**\n * @public\n */\nexport interface AppHeaderNavigationItemOwnProps\n  extends WithChildren, StylingProps, DataTestId {\n  href?: string;\n  disabled?: boolean;\n  isSelected?: boolean;\n}\n\n/**\n * @public\n */\nexport type AppHeaderNavigationItemProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderNavigationItemOwnProps>;\n\n/**\n * Used to configure desktop and mobile navigation items\n * @public\n */\nexport const NavigationItem: <E extends ElementType = 'a'>(\n  props: AppHeaderNavigationItemProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderNavigationItemProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => <div ref={forwardedRef} {...props} />,\n);\n(\n  NavigationItem as typeof NavigationItem & { displayName: string }\n).displayName = 'AppHeader.NavigationItem';\n"],
+  "mappings": "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",
   "names": ["rest"]
 }

package/esm/layouts/app-header/Navigation.sty.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-11-1";
-var inlineNav = "_swz1ff4-3-11-1";
-var isDisabled = "_swz1ff1-3-11-1";
-var isSelected = "_swz1ff0-3-11-1";
-var menuLink = "_swz1ff3-3-11-1";
+var button = "_swz1ff2-3-11-2";
+var inlineNav = "_swz1ff4-3-11-2";
+var isDisabled = "_swz1ff1-3-11-2";
+var isSelected = "_swz1ff0-3-11-2";
+var menuLink = "_swz1ff3-3-11-2";
 export {
   button,
   inlineNav,

package/esm/layouts/app-header/Navigation.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.css.ts"],
-  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-11-1';\nexport var inlineNav = '_swz1ff4-3-11-1';\nexport var isDisabled = '_swz1ff1-3-11-1';\nexport var isSelected = '_swz1ff0-3-11-1';\nexport var menuLink = '_swz1ff3-3-11-1';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-11-2';\nexport var inlineNav = '_swz1ff4-3-11-2';\nexport var isDisabled = '_swz1ff1-3-11-2';\nexport var isSelected = '_swz1ff0-3-11-2';\nexport var menuLink = '_swz1ff3-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionButton.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._otmjah0-3-11-1 {
+._otmjah0-3-11-2 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-11-1:hover {
+._otmjah0-3-11-2:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   text-decoration: none;
 }
-._otmjah0-3-11-1:active {
+._otmjah0-3-11-2:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   text-decoration: none;
 }
-._otmjah0-3-11-1:after {
+._otmjah0-3-11-2:after {
   content: " ";
   width: 16px;
   height: 2px;
@@ -34,50 +34,50 @@
   transform: translateX(-50%) translateY(var(--dt-spacings-size-0, 0));
   transition: width var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), opacity var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), transform var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
 }
-._otmjah1-3-11-1._otmjah1-3-11-1 {
+._otmjah1-3-11-2._otmjah1-3-11-2 {
   gap: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._otmjah2-3-11-1._otmjah2-3-11-1 {
+._otmjah2-3-11-2._otmjah2-3-11-2 {
   gap: var(--dt-spacings-size-6, 6px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._otmjah3-3-11-1 {
+._otmjah3-3-11-2 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-11-1:hover {
+._otmjah3-3-11-2:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-11-1.active {
+._otmjah4-3-11-2.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-11-1._otmjah3-3-11-1.active {
+._otmjah4-3-11-2._otmjah3-3-11-2.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-11-1:not(._otmjah3-3-11-1).active:hover {
+._otmjah4-3-11-2:not(._otmjah3-3-11-2).active:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
   text-decoration: none;
 }
-._otmjah4-3-11-1:not([role="menuitem"]).active:active {
+._otmjah4-3-11-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
   text-decoration: none;
 }
-._otmjah4-3-11-1._otmjah3-3-11-1._otmjah4-3-11-1:not([role="menuitem"]).active:active {
+._otmjah4-3-11-2._otmjah3-3-11-2._otmjah4-3-11-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-11-1.active::after {
+._otmjah4-3-11-2.active::after {
   content: " ";
   width: 20px;
   height: 2px;
@@ -90,10 +90,10 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._otmjah4-3-11-1._otmjah3-3-11-1.active::after {
+._otmjah4-3-11-2._otmjah3-3-11-2.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-11-1[role="menuitem"].active::after {
+._otmjah4-3-11-2[role="menuitem"].active::after {
   display: block;
   height: calc(100% - 2 * var(--dt-spacings-size-6, 6px));
   width: var(--dt-spacings-size-2, 2px);
@@ -102,7 +102,7 @@
   transform: translate(4px);
   bottom: unset;
 }
-._otmjah4-3-11-1 a {
+._otmjah4-3-11-2 a {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/esm/layouts/app-header/action-group/ActionButton.sty.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import "./ActionButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabled = "_otmjah3-3-11-1";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-11-1", variantClassNames: { density: { "default": "_otmjah1-3-11-1", condensed: "_otmjah2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-11-1";
+var disabled = "_otmjah3-3-11-2";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-11-2", variantClassNames: { density: { "default": "_otmjah1-3-11-2", condensed: "_otmjah2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-11-2";
 export {
   disabled,
   navItem,

package/esm/layouts/app-header/action-group/ActionButton.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionButton.css.ts"],
-  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-11-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-11-1',variantClassNames:{density:{'default':'_otmjah1-3-11-1',condensed:'_otmjah2-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-11-1';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-11-2';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-11-2',variantClassNames:{density:{'default':'_otmjah1-3-11-2',condensed:'_otmjah2-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtL,IAAI,wBAAwB;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionGroup.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-11-1 {
+._1d2ks7u0-3-11-2 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

package/esm/layouts/app-header/action-group/ActionGroup.js CHANGED Viewed

@@ -6,12 +6,12 @@ import {
   cloneElement,
   forwardRef,
   Fragment,
+  isValidElement,
   useEffect,
   useMemo,
   useRef,
   useState
 } from "react";
-import { isElement } from "react-is";
 import { ActionButton } from "./ActionButton.js";
 import { actionGroupHiddenItemCSS } from "./ActionGroup.sty.js";
 import { CollapsedActionGroup } from "./CollapsedActionGroup.js";
@@ -28,7 +28,7 @@ import { Divider } from "../../divider/Divider.js";
 import { Flex } from "../../flex/Flex.js";
 const COMPONENT_NAME = "ActionGroup";
 function itemIsPinned(child) {
-  return isElement(child) && typeof child.props === "object" && child.props !== null && "pin" in child.props && child.props.pin === true;
+  return isValidElement(child) && typeof child.props === "object" && child.props !== null && "pin" in child.props && child.props.pin === true;
 }
 const ActionGroupRoot = forwardRef(
   (props, forwardedRef) => {
@@ -77,7 +77,7 @@ const ActionGroupRoot = forwardRef(
             // measured children array. If collapsing from the end, the index needs to be shifted back by 1.
             childIndex + (isOverflowing && collapseFrom === "end" ? -1 : 0)
           ];
-          if (isElement(childNode) && itemIsPinned(childNode)) {
+          if (isValidElement(childNode) && itemIsPinned(childNode)) {
           } else {
             let childKeyIndex = childIndex;
             if (isOverflowing) {
@@ -97,7 +97,7 @@ const ActionGroupRoot = forwardRef(
       let pinnedItems = 0;
       measuredChildren.current = [];
       for (const [index, child] of childrenArray.entries()) {
-        if (!isElement(child)) {
+        if (!isValidElement(child)) {
           continue;
         }
         const childKey = index + groupCount;