@pega/cosmos-react-core 4.0.0-dev.24.0 → 4.0.0-dev.25.0

package/lib/components/Backdrop/Backdrop.d.ts

@@ -1,6 +1,10 @@
 import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
 import { BaseProps, ForwardProps, ExcludeStrict } from '../../types';
 import { FlexProps } from '../Flex';
+interface BackdropContextValue {
+    el: HTMLDivElement | null;
+}
+export declare const BackdropContext: import("react").Context<BackdropContextValue>;
 export interface BackdropProps extends BaseProps {
     /**
      * Opacity of the Backdrop.

package/lib/components/Backdrop/Backdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAKT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACxF,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAmCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAwF5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAOT,GAAG,EACH,UAAU,EAEX,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAqB,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACxF,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,UAAU,oBAAoB;IAC5B,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,+CAE1B,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc;aAAqD,CAAC,GAAG,CAAC;SAmCnF,CAAC;AAMH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0F5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Backdrop/Backdrop.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useCallback, forwardRef } from 'react';
+import { useEffect, useState, useCallback, useMemo, forwardRef, createContext } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { reflow } from '../../utils';
 import Flex from '../Flex';
-import { useConsolidatedRef } from '../../hooks';
+import { useConsolidatedRef, useElement } from '../../hooks';
+export const BackdropContext = createContext({
+    el: null
+});
 const transitionSpeedToTheme = {
     slow: 2,
     medium: 1,
@@ -43,10 +46,10 @@ export const StyledBackdrop = styled.div(props => {
   `;
 });
 StyledBackdrop.defaultProps = defaultThemeProp;
-const Backdrop = forwardRef(function Backdrop(props, ref) {
-    const { children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps } = props;
-    const cRef = useConsolidatedRef(ref);
+const Backdrop = forwardRef(function Backdrop({ children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps }, ref) {
     const [state, setState] = useState('closed');
+    const [backdropEl, setBackdropEl] = useElement();
+    const backdropRef = useConsolidatedRef(ref, setBackdropEl);
     const onTransitionEnd = useCallback((e) => {
         if (e.propertyName !== 'opacity' || e.target !== e.currentTarget)
             return;
@@ -76,9 +79,9 @@ const Backdrop = forwardRef(function Backdrop(props, ref) {
     }, [open]);
     // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.
     useEffect(() => {
-        if (!cRef.current)
+        if (!backdropRef.current)
             return;
-        const opacity = window.getComputedStyle(cRef.current).opacity;
+        const opacity = window.getComputedStyle(backdropRef.current).opacity;
         // If the opacity is already at the destination value, sync the state value.
         if (state === 'closing' && opacity === '0') {
             // Since the transition never ran, we have to pretend it did and call the callback.
@@ -92,7 +95,8 @@ const Backdrop = forwardRef(function Backdrop(props, ref) {
             setState('open');
         }
     }, [state]);
-    return !open && state === 'closed' ? null : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: cRef, ...restProps, children: children }));
+    const ctxValue = useMemo(() => ({ el: backdropEl }), [backdropEl]);
+    return !open && state === 'closed' ? null : (_jsx(BackdropContext.Provider, { value: ctxValue, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center', ...container }, as: StyledBackdrop, transitionSpeed: transitionSpeed, opacity: state === 'opening' || state === 'open' ? 1 : 0, alpha: alpha, variant: variant, position: position, onTransitionEnd: onTransitionEnd, ref: backdropRef, ...restProps, children: children }) }));
 });
 export default Backdrop;
 //# sourceMappingURL=Backdrop.js.map

package/lib/components/Backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps, ExcludeStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport { useConsolidatedRef } from '../../hooks';\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /** Any React Node to be rendered on top of the Backdrop component. */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default 'dark'\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default 'medium'\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default 'fixed'\n   */\n  position?: 'absolute' | 'fixed';\n  /** Accepts a callback function for click event on Backdrop. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /** Accepts a callback that gets invoked before opening Backdrop. */\n  onBeforeTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked after opening Backdrop. */\n  onAfterTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked before closing Backdrop. */\n  onBeforeTransitionOut?: () => void;\n  /** Accepts a callback that gets invoked after closing Backdrop */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(function Backdrop(\n  props: PropsWithoutRef<BackdropProps>,\n  ref: BackdropProps['ref']\n) {\n  const {\n    children,\n    container,\n    open = false,\n    variant = 'dark',\n    transitionSpeed = 'medium',\n    alpha = 0.6,\n    position = 'fixed',\n    onBeforeTransitionIn,\n    onAfterTransitionIn,\n    onBeforeTransitionOut,\n    onAfterTransitionOut,\n    ...restProps\n  } = props;\n\n  const cRef = useConsolidatedRef(ref);\n\n  const [state, setState] = useState<State>('closed');\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent) => {\n      if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n      let nextState: State;\n\n      if (state === 'closing') {\n        nextState = 'closed';\n        onAfterTransitionOut?.();\n      } else {\n        nextState = 'open';\n        onAfterTransitionIn?.();\n      }\n\n      setState(nextState);\n    },\n    [state, onAfterTransitionOut, onAfterTransitionIn]\n  );\n\n  useEffect(() => {\n    if (open) {\n      if (state === 'closed' || state === 'closing') {\n        onBeforeTransitionIn?.();\n        reflow();\n        setState('opening');\n      }\n    } else if (state === 'open' || state === 'opening') {\n      onBeforeTransitionOut?.();\n      setState('closing');\n    }\n  }, [open]);\n\n  // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n  useEffect(() => {\n    if (!cRef.current) return;\n    const opacity = window.getComputedStyle(cRef.current).opacity;\n    // If the opacity is already at the destination value, sync the state value.\n    if (state === 'closing' && opacity === '0') {\n      // Since the transition never ran, we have to pretend it did and call the callback.\n      // TODO: This maybe can be fixed with the animation api\n      onAfterTransitionOut?.();\n      setState('closed');\n    }\n    if (state === 'opening' && opacity === '1') {\n      // ditto, see above...\n      onAfterTransitionIn?.();\n      setState('open');\n    }\n  }, [state]);\n\n  return !open && state === 'closed' ? null : (\n    <Flex\n      container={{ justify: 'center', alignItems: 'center', ...container }}\n      as={StyledBackdrop}\n      transitionSpeed={transitionSpeed}\n      opacity={state === 'opening' || state === 'open' ? 1 : 0}\n      alpha={alpha}\n      variant={variant}\n      position={position}\n      onTransitionEnd={onTransitionEnd}\n      ref={cRef}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Backdrop;\n"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  createContext,\n  Ref,\n  MouseEvent,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow } from '../../utils';\nimport { BaseProps, PropsWithDefaults, ForwardProps, ExcludeStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement } from '../../hooks';\n\ninterface BackdropContextValue {\n  el: HTMLDivElement | null;\n}\n\nexport const BackdropContext = createContext<BackdropContextValue>({\n  el: null\n});\n\nexport interface BackdropProps extends BaseProps {\n  /**\n   * Opacity of the Backdrop.\n   * @default 0.4\n   */\n  alpha?: number;\n  /** Any React Node to be rendered on top of the Backdrop component. */\n  children?: ReactNode;\n  /** Props passed to Flex container. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /**\n   * Toggles visibility of Backdrop.\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Determines the color of the Backdrop.\n   * @default 'dark'\n   */\n  variant?: 'dark' | 'light';\n  /**\n   * Transition speed of Backdrop animation.\n   * @default 'medium'\n   */\n  transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n  /**\n   * The position of the Backdrop.\n   * @default 'fixed'\n   */\n  position?: 'absolute' | 'fixed';\n  /** Accepts a callback function for click event on Backdrop. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  /** Accepts a callback that gets invoked before opening Backdrop. */\n  onBeforeTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked after opening Backdrop. */\n  onAfterTransitionIn?: () => void;\n  /** Accepts a callback that gets invoked before closing Backdrop. */\n  onBeforeTransitionOut?: () => void;\n  /** Accepts a callback that gets invoked after closing Backdrop */\n  onAfterTransitionOut?: () => void;\n  /** Ref for a Backdrop's root div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled.div<BackdropPropsWithDefaults & { opacity: 0 | 1 }>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nconst Backdrop: FunctionComponent<BackdropProps & ForwardProps> = forwardRef(function Backdrop(\n  {\n    children,\n    container,\n    open = false,\n    variant = 'dark',\n    transitionSpeed = 'medium',\n    alpha = 0.6,\n    position = 'fixed',\n    onBeforeTransitionIn,\n    onAfterTransitionIn,\n    onBeforeTransitionOut,\n    onAfterTransitionOut,\n    ...restProps\n  }: PropsWithoutRef<BackdropProps>,\n  ref: BackdropProps['ref']\n) {\n  const [state, setState] = useState<State>('closed');\n  const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n  const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent) => {\n      if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n      let nextState: State;\n\n      if (state === 'closing') {\n        nextState = 'closed';\n        onAfterTransitionOut?.();\n      } else {\n        nextState = 'open';\n        onAfterTransitionIn?.();\n      }\n\n      setState(nextState);\n    },\n    [state, onAfterTransitionOut, onAfterTransitionIn]\n  );\n\n  useEffect(() => {\n    if (open) {\n      if (state === 'closed' || state === 'closing') {\n        onBeforeTransitionIn?.();\n        reflow();\n        setState('opening');\n      }\n    } else if (state === 'open' || state === 'opening') {\n      onBeforeTransitionOut?.();\n      setState('closing');\n    }\n  }, [open]);\n\n  // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n  useEffect(() => {\n    if (!backdropRef.current) return;\n    const opacity = window.getComputedStyle(backdropRef.current).opacity;\n    // If the opacity is already at the destination value, sync the state value.\n    if (state === 'closing' && opacity === '0') {\n      // Since the transition never ran, we have to pretend it did and call the callback.\n      // TODO: This maybe can be fixed with the animation api\n      onAfterTransitionOut?.();\n      setState('closed');\n    }\n    if (state === 'opening' && opacity === '1') {\n      // ditto, see above...\n      onAfterTransitionIn?.();\n      setState('open');\n    }\n  }, [state]);\n\n  const ctxValue = useMemo(() => ({ el: backdropEl }), [backdropEl]);\n\n  return !open && state === 'closed' ? null : (\n    <BackdropContext.Provider value={ctxValue}>\n      <Flex\n        container={{ justify: 'center', alignItems: 'center', ...container }}\n        as={StyledBackdrop}\n        transitionSpeed={transitionSpeed}\n        opacity={state === 'opening' || state === 'open' ? 1 : 0}\n        alpha={alpha}\n        variant={variant}\n        position={position}\n        onTransitionEnd={onTransitionEnd}\n        ref={backdropRef}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    </BackdropContext.Provider>\n  );\n});\n\nexport default Backdrop;\n"]}

package/lib/components/ListToolbar/ListToolbar.js

@@ -12,12 +12,11 @@ import * as rowIcon from '../Icon/icons/row.icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import * as moreIcon from '../Icon/icons/more.icon';
 import { hasProp, withTestIds } from '../../utils';
-import FormDialog from '../Dialog/FormDialog';
 import { formatNumber } from '../Number';
 import MenuButton from '../MenuButton';
 import Avatar from '../Avatar';
 import PresetMenuPopover from './PresetMenuPopover';
-import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent } from './ListToolbar.styles';
+import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent, StyledListToolbarDialog } from './ListToolbar.styles';
 import helpers from './helpers';
 import { getListToolbarTestIds } from './ListToolbar.test-ids';
 registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
@@ -99,7 +98,7 @@ const ListToolbar = forwardRef(function ListToolbar({ testId, name, headingTag =
         if (queryOptionProps &&
             hasProp(queryOptionProps, 'renderer') &&
             queryOptionPopoverTarget.current) {
-            queryOptionPopover = (_jsx(FormDialog, { target: queryOptionPopoverTarget.current, heading: t(currentQueryOptionId), placement: 'bottom-end', onCancel: () => {
+            queryOptionPopover = (_jsx(StyledListToolbarDialog, { target: queryOptionPopoverTarget.current, heading: t(currentQueryOptionId), placement: 'bottom-end', onCancel: () => {
                     if (queryOptionProps.onCancel() === false)
                         return;
                     setCurrentQueryOptionId(null);

package/lib/components/ListToolbar/ListToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\n\nimport Actions from '../Actions';\nimport Button from '../Button';\nimport { Action, ForwardProps } from '../../types';\nimport {\n  useBreakpoint,\n  useConfiguration,\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useTestIds\n} from '../../hooks';\nimport Flex from '../Flex';\nimport SearchInput from '../SearchInput';\nimport Icon, { registerIcon } from '../Icon';\nimport * as filterIcon from '../Icon/icons/filter.icon';\nimport * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';\nimport * as rowIcon from '../Icon/icons/row.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as moreIcon from '../Icon/icons/more.icon';\nimport { hasProp, withTestIds } from '../../utils';\nimport FormDialog from '../Dialog/FormDialog';\nimport { formatNumber } from '../Number';\nimport MenuButton from '../MenuButton';\nimport Avatar from '../Avatar';\n\nimport PresetMenuPopover, { PresetMenuPopoverProps } from './PresetMenuPopover';\nimport {\n  StyledViewSelector,\n  StyledSearchForm,\n  StyledListToolbar,\n  StyledHeadingText,\n  StyledCountMeta,\n  StyledContainer,\n  StyledListToolbarContent\n} from './ListToolbar.styles';\nimport type {\n  ListToolbarProps,\n  PresetMenuProps,\n  QueryOptionDialogProps,\n  QueryOptionId,\n  ViewProps,\n  ViewSelectorProps\n} from './ListToolbar.types';\nimport helpers from './helpers';\nimport { getListToolbarTestIds } from './ListToolbar.test-ids';\n\nregisterIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);\n\nconst CountMeta = ({\n  count,\n  ...restProps\n}: { count: NonNullable<ListToolbarProps['count']> } & ForwardProps) => {\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const totalFormattedValue = formatNumber(count.total ?? 0, {\n    locale,\n    options: {\n      useGrouping: true\n    }\n  });\n  return (\n    <StyledCountMeta variant='secondary' {...restProps}>\n      {count.selected\n        ? t(\n            'selected_count',\n            [formatNumber(count.selected, { locale, options: { useGrouping: true } })],\n            { count: count.selected }\n          )\n        : count.total !== undefined &&\n          t(\n            'results_count',\n            [count.totalHasMore ? `${totalFormattedValue}+` : totalFormattedValue],\n            {\n              count: count.total\n            }\n          )}\n    </StyledCountMeta>\n  );\n};\n\nconst generateViewName = (\n  view: ViewProps,\n  texts: { default: string; appDefault: string },\n  options: {\n    defaultId?: ViewSelectorProps['defaultId'];\n    appDefaultId?: ViewSelectorProps['appDefaultId'];\n  }\n) => {\n  return `${view.text} ${view.id === options.defaultId ? `(${texts.default})` : ''} ${\n    view.id === options.appDefaultId ? `(${texts.appDefault})` : ''\n  }`;\n};\n\nconst ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps> = forwardRef(\n  function ListToolbar(\n    {\n      testId,\n      name,\n      headingTag = 'h3',\n      viewSelector,\n      formControlProps,\n      createNew,\n      search,\n      count,\n      additionalActions,\n      filter,\n      sort,\n      group,\n      actions,\n      actionsButtonRef,\n      ...restProps\n    }: PropsWithoutRef<ListToolbarProps>,\n    ref: ListToolbarProps['ref']\n  ) {\n    const t = useI18n();\n    const testIds = useTestIds(testId, getListToolbarTestIds);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n    const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);\n    const toolbarContentRef = useRef<HTMLDivElement>(null);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const searchWrapperRef = useRef<HTMLDivElement>(null);\n    const searchButtonRef = useRef<HTMLButtonElement>(null);\n    const [isSearchOpen, setIsSearchOpen] = useState(!!search?.value);\n\n    const onSearchEscape = useCallback(() => {\n      if (!search?.value) {\n        setIsSearchOpen(false);\n      }\n      setTimeout(() => searchButtonRef.current?.focus());\n    }, [search?.value]);\n\n    useEffect(() => {\n      if (search?.value) {\n        setIsSearchOpen(true);\n      }\n    }, [search?.value]);\n\n    const [currentQueryOptionId, setCurrentQueryOptionId] = useState<QueryOptionId | null>(null);\n    const queryOptionPopoverTarget = useRef<HTMLButtonElement>();\n\n    const [actionsQueryOptionPreset, setActionsQueryOptionPreset] =\n      useState<Pick<PresetMenuPopoverProps, 'heading' | 'menu'>>();\n    const [optionPresetMenuOpen, setOptionPresetMenuOpen] = useState(false);\n\n    const createNewButton = useMemo(() => {\n      if (!createNew?.onClick) return null;\n      const text = createNew.label ?? t('create_new');\n\n      return (\n        <Button variant='simple' icon label={text} aria-label={text} onClick={createNew.onClick}>\n          <Icon name='plus' />\n        </Button>\n      );\n    }, [t, createNew, isSmallOrAbove]);\n\n    useEscape(onSearchEscape, searchButtonRef);\n    const searchInputWrapper = useMemo(\n      () => (\n        <div role='dialog' ref={searchWrapperRef}>\n          <SearchInput\n            {...search}\n            onSearchSubmit={(value: string) => {\n              search?.onSearchSubmit?.(value);\n              onSearchEscape();\n            }}\n            onClick={(e: MouseEvent<HTMLInputElement>) => {\n              e.preventDefault();\n            }}\n            ref={searchInputRef}\n          />\n        </div>\n      ),\n      [search, onSearchEscape]\n    );\n\n    const searchLabel = t('search');\n    const searchButton = useMemo(() => {\n      return (\n        <Button\n          as='div'\n          role='button'\n          variant='simple'\n          icon\n          label={!isSearchOpen ? searchLabel : undefined}\n          aria-label={searchLabel}\n          onClick={() => {\n            setIsSearchOpen(true);\n            setTimeout(() => searchInputRef.current?.focus());\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n            if (e.target !== searchInputRef.current && (e.key === 'Enter' || e.key === ' ')) {\n              setIsSearchOpen(true);\n              setTimeout(() => {\n                searchInputRef.current?.focus();\n                searchInputRef.current?.select();\n              });\n            }\n          }}\n          tabIndex={0}\n          ref={searchButtonRef}\n        >\n          {isSearchOpen ? searchInputWrapper : <Icon name='search' />}\n        </Button>\n      );\n    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInputWrapper]);\n\n    let queryOptionPopover = null;\n    if (currentQueryOptionId) {\n      const queryOptionProps = { filter, sort, group }[currentQueryOptionId];\n      if (\n        queryOptionProps &&\n        hasProp(queryOptionProps, 'renderer') &&\n        queryOptionPopoverTarget.current\n      ) {\n        queryOptionPopover = (\n          <FormDialog\n            target={queryOptionPopoverTarget.current}\n            heading={t(currentQueryOptionId)}\n            placement='bottom-end'\n            onCancel={() => {\n              if (queryOptionProps.onCancel() === false) return;\n              setCurrentQueryOptionId(null);\n            }}\n            onSubmit={() => {\n              if (queryOptionProps.onSubmit() === false) return;\n              setCurrentQueryOptionId(null);\n            }}\n          >\n            <queryOptionProps.renderer />\n          </FormDialog>\n        );\n      }\n    }\n\n    const getQueryOptionAction = useCallback(\n      (\n        id: 'sort' | 'group' | 'filter',\n        icon: string,\n        queryOptionProps: QueryOptionDialogProps | PresetMenuProps\n      ) => {\n        return {\n          text: t(id),\n          id,\n          icon,\n          count: queryOptionProps.count,\n          onClick: () => {\n            if (hasProp(queryOptionProps, 'renderer')) {\n              setCurrentQueryOptionId(id);\n              queryOptionPopoverTarget.current = consolidatedActionsButtonRef.current ?? undefined;\n            }\n            if (hasProp(queryOptionProps, 'items')) {\n              setActionsQueryOptionPreset({\n                heading: t(id),\n                menu: {\n                  mode: queryOptionProps.mode,\n                  items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),\n                  onItemClick: queryOptionProps.onItemClick\n                }\n              });\n              setOptionPresetMenuOpen(true);\n            }\n          }\n        };\n      },\n      []\n    );\n\n    const basicModeActions = useMemo(() => {\n      let basicActions: Action[] = [];\n      if (filter) {\n        const filterAction: Action = getQueryOptionAction('filter', 'filter', filter);\n        basicActions.push(filterAction);\n      }\n      if (sort) {\n        const sortAction: Action = getQueryOptionAction('sort', 'arrow-up-down', sort);\n        basicActions.push(sortAction);\n      }\n      if (group) {\n        const groupAction: Action = getQueryOptionAction('group', 'row', group);\n        basicActions.push(groupAction);\n      }\n      if (actions) {\n        basicActions = basicActions.concat(actions);\n      }\n\n      return basicActions.length ? basicActions : undefined;\n    }, [actions, filter, sort, group, getQueryOptionAction]);\n\n    let selectedViewName: string | undefined;\n    if (viewSelector) {\n      selectedViewName = helpers.getSelectedView(viewSelector.views)?.text;\n      selectedViewName ??= helpers.getViews(viewSelector.views)[0].text;\n    }\n\n    const labelText =\n      viewSelector && viewSelector.views.length > 1 ? `${name}: ${selectedViewName}` : name;\n\n    return (\n      <Flex data-testid={testIds.root} container {...restProps} as={StyledListToolbar} ref={ref}>\n        <StyledListToolbarContent\n          container={{ direction: 'column', gap: 0.5 }}\n          ref={toolbarContentRef}\n          item={{ grow: 1 }}\n        >\n          <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n            <StyledContainer\n              container={{\n                alignItems: 'baseline',\n                gap: 1,\n                wrap: 'wrap'\n              }}\n            >\n              <StyledHeadingText\n                data-testid={testIds.heading}\n                variant={headingTag}\n                required={viewSelector?.views?.length && formControlProps?.required}\n              >\n                {!viewSelector || viewSelector.views.length <= 1 ? (\n                  labelText\n                ) : (\n                  <MenuButton\n                    variant='text'\n                    text={labelText}\n                    as={StyledViewSelector}\n                    menu={{\n                      mode: 'single-select',\n                      items: viewSelector.views.map(view => {\n                        if (hasProp(view, 'items')) {\n                          return {\n                            id: view.text,\n                            label: view.text,\n                            items: view.items.map(groupedView => {\n                              return {\n                                ...groupedView,\n                                primary: generateViewName(\n                                  groupedView,\n                                  { default: t('default'), appDefault: t('app_default') },\n                                  {\n                                    defaultId: viewSelector.defaultId,\n                                    appDefaultId: viewSelector.appDefaultId\n                                  }\n                                ),\n                                visual: groupedView.visual ? (\n                                  <Avatar {...groupedView.visual} />\n                                ) : undefined\n                              };\n                            })\n                          };\n                        }\n\n                        return {\n                          ...view,\n                          primary: generateViewName(\n                            view,\n                            { default: t('default'), appDefault: t('app_default') },\n                            {\n                              defaultId: viewSelector.defaultId,\n                              appDefaultId: viewSelector.appDefaultId\n                            }\n                          ),\n                          visual: view.visual ? <Avatar {...view.visual} /> : undefined\n                        };\n                      }),\n                      onItemClick: viewSelector.onViewSelect\n                    }}\n                    testId={testIds.viewSelector}\n                  />\n                )}\n              </StyledHeadingText>\n              {isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n            </StyledContainer>\n            <Flex container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 0 }}>\n              {isSmallOrAbove && additionalActions}\n              {search && isSmallOrAbove && searchButton}\n              {isSmallOrAbove && createNewButton}\n              {isSmallOrAbove && basicModeActions && (\n                <span>\n                  <Actions\n                    items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restActionProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                </span>\n              )}\n              {!isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n            </Flex>\n          </Flex>\n          {!isSmallOrAbove && (\n            <Flex container={{ alignItems: 'start', justify: 'between', gap: 1 }}>\n              {additionalActions}\n              <Flex\n                as={StyledSearchForm}\n                container={{ alignItems: 'center', wrap: 'wrap', gap: 1 }}\n                item={{ grow: 1 }}\n              >\n                {search && searchInputWrapper}\n              </Flex>\n              {createNewButton}\n              {basicModeActions && (\n                <span>\n                  <Actions\n                    items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restActionProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                </span>\n              )}\n            </Flex>\n          )}\n        </StyledListToolbarContent>\n\n        {queryOptionPopover}\n\n        <PresetMenuPopover\n          buttonRef={consolidatedActionsButtonRef}\n          heading={actionsQueryOptionPreset?.heading}\n          menu={actionsQueryOptionPreset?.menu}\n          isOpen={optionPresetMenuOpen}\n          onClose={() => setOptionPresetMenuOpen(false)}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default withTestIds(ListToolbar, getListToolbarTestIds);\n"]}
+{"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\n\nimport Actions from '../Actions';\nimport Button from '../Button';\nimport { Action, ForwardProps } from '../../types';\nimport {\n  useBreakpoint,\n  useConfiguration,\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useTestIds\n} from '../../hooks';\nimport Flex from '../Flex';\nimport SearchInput from '../SearchInput';\nimport Icon, { registerIcon } from '../Icon';\nimport * as filterIcon from '../Icon/icons/filter.icon';\nimport * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';\nimport * as rowIcon from '../Icon/icons/row.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as moreIcon from '../Icon/icons/more.icon';\nimport { hasProp, withTestIds } from '../../utils';\nimport { formatNumber } from '../Number';\nimport MenuButton from '../MenuButton';\nimport Avatar from '../Avatar';\n\nimport PresetMenuPopover, { PresetMenuPopoverProps } from './PresetMenuPopover';\nimport {\n  StyledViewSelector,\n  StyledSearchForm,\n  StyledListToolbar,\n  StyledHeadingText,\n  StyledCountMeta,\n  StyledContainer,\n  StyledListToolbarContent,\n  StyledListToolbarDialog\n} from './ListToolbar.styles';\nimport type {\n  ListToolbarProps,\n  PresetMenuProps,\n  QueryOptionDialogProps,\n  QueryOptionId,\n  ViewProps,\n  ViewSelectorProps\n} from './ListToolbar.types';\nimport helpers from './helpers';\nimport { getListToolbarTestIds } from './ListToolbar.test-ids';\n\nregisterIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);\n\nconst CountMeta = ({\n  count,\n  ...restProps\n}: { count: NonNullable<ListToolbarProps['count']> } & ForwardProps) => {\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const totalFormattedValue = formatNumber(count.total ?? 0, {\n    locale,\n    options: {\n      useGrouping: true\n    }\n  });\n  return (\n    <StyledCountMeta variant='secondary' {...restProps}>\n      {count.selected\n        ? t(\n            'selected_count',\n            [formatNumber(count.selected, { locale, options: { useGrouping: true } })],\n            { count: count.selected }\n          )\n        : count.total !== undefined &&\n          t(\n            'results_count',\n            [count.totalHasMore ? `${totalFormattedValue}+` : totalFormattedValue],\n            {\n              count: count.total\n            }\n          )}\n    </StyledCountMeta>\n  );\n};\n\nconst generateViewName = (\n  view: ViewProps,\n  texts: { default: string; appDefault: string },\n  options: {\n    defaultId?: ViewSelectorProps['defaultId'];\n    appDefaultId?: ViewSelectorProps['appDefaultId'];\n  }\n) => {\n  return `${view.text} ${view.id === options.defaultId ? `(${texts.default})` : ''} ${\n    view.id === options.appDefaultId ? `(${texts.appDefault})` : ''\n  }`;\n};\n\nconst ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps> = forwardRef(\n  function ListToolbar(\n    {\n      testId,\n      name,\n      headingTag = 'h3',\n      viewSelector,\n      formControlProps,\n      createNew,\n      search,\n      count,\n      additionalActions,\n      filter,\n      sort,\n      group,\n      actions,\n      actionsButtonRef,\n      ...restProps\n    }: PropsWithoutRef<ListToolbarProps>,\n    ref: ListToolbarProps['ref']\n  ) {\n    const t = useI18n();\n    const testIds = useTestIds(testId, getListToolbarTestIds);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n    const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);\n    const toolbarContentRef = useRef<HTMLDivElement>(null);\n    const searchInputRef = useRef<HTMLInputElement>(null);\n    const searchWrapperRef = useRef<HTMLDivElement>(null);\n    const searchButtonRef = useRef<HTMLButtonElement>(null);\n    const [isSearchOpen, setIsSearchOpen] = useState(!!search?.value);\n\n    const onSearchEscape = useCallback(() => {\n      if (!search?.value) {\n        setIsSearchOpen(false);\n      }\n      setTimeout(() => searchButtonRef.current?.focus());\n    }, [search?.value]);\n\n    useEffect(() => {\n      if (search?.value) {\n        setIsSearchOpen(true);\n      }\n    }, [search?.value]);\n\n    const [currentQueryOptionId, setCurrentQueryOptionId] = useState<QueryOptionId | null>(null);\n    const queryOptionPopoverTarget = useRef<HTMLButtonElement>();\n\n    const [actionsQueryOptionPreset, setActionsQueryOptionPreset] =\n      useState<Pick<PresetMenuPopoverProps, 'heading' | 'menu'>>();\n    const [optionPresetMenuOpen, setOptionPresetMenuOpen] = useState(false);\n\n    const createNewButton = useMemo(() => {\n      if (!createNew?.onClick) return null;\n      const text = createNew.label ?? t('create_new');\n\n      return (\n        <Button variant='simple' icon label={text} aria-label={text} onClick={createNew.onClick}>\n          <Icon name='plus' />\n        </Button>\n      );\n    }, [t, createNew, isSmallOrAbove]);\n\n    useEscape(onSearchEscape, searchButtonRef);\n    const searchInputWrapper = useMemo(\n      () => (\n        <div role='dialog' ref={searchWrapperRef}>\n          <SearchInput\n            {...search}\n            onSearchSubmit={(value: string) => {\n              search?.onSearchSubmit?.(value);\n              onSearchEscape();\n            }}\n            onClick={(e: MouseEvent<HTMLInputElement>) => {\n              e.preventDefault();\n            }}\n            ref={searchInputRef}\n          />\n        </div>\n      ),\n      [search, onSearchEscape]\n    );\n\n    const searchLabel = t('search');\n    const searchButton = useMemo(() => {\n      return (\n        <Button\n          as='div'\n          role='button'\n          variant='simple'\n          icon\n          label={!isSearchOpen ? searchLabel : undefined}\n          aria-label={searchLabel}\n          onClick={() => {\n            setIsSearchOpen(true);\n            setTimeout(() => searchInputRef.current?.focus());\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n            if (e.target !== searchInputRef.current && (e.key === 'Enter' || e.key === ' ')) {\n              setIsSearchOpen(true);\n              setTimeout(() => {\n                searchInputRef.current?.focus();\n                searchInputRef.current?.select();\n              });\n            }\n          }}\n          tabIndex={0}\n          ref={searchButtonRef}\n        >\n          {isSearchOpen ? searchInputWrapper : <Icon name='search' />}\n        </Button>\n      );\n    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInputWrapper]);\n\n    let queryOptionPopover = null;\n    if (currentQueryOptionId) {\n      const queryOptionProps = { filter, sort, group }[currentQueryOptionId];\n      if (\n        queryOptionProps &&\n        hasProp(queryOptionProps, 'renderer') &&\n        queryOptionPopoverTarget.current\n      ) {\n        queryOptionPopover = (\n          <StyledListToolbarDialog\n            target={queryOptionPopoverTarget.current}\n            heading={t(currentQueryOptionId)}\n            placement='bottom-end'\n            onCancel={() => {\n              if (queryOptionProps.onCancel() === false) return;\n              setCurrentQueryOptionId(null);\n            }}\n            onSubmit={() => {\n              if (queryOptionProps.onSubmit() === false) return;\n              setCurrentQueryOptionId(null);\n            }}\n          >\n            <queryOptionProps.renderer />\n          </StyledListToolbarDialog>\n        );\n      }\n    }\n\n    const getQueryOptionAction = useCallback(\n      (\n        id: 'sort' | 'group' | 'filter',\n        icon: string,\n        queryOptionProps: QueryOptionDialogProps | PresetMenuProps\n      ) => {\n        return {\n          text: t(id),\n          id,\n          icon,\n          count: queryOptionProps.count,\n          onClick: () => {\n            if (hasProp(queryOptionProps, 'renderer')) {\n              setCurrentQueryOptionId(id);\n              queryOptionPopoverTarget.current = consolidatedActionsButtonRef.current ?? undefined;\n            }\n            if (hasProp(queryOptionProps, 'items')) {\n              setActionsQueryOptionPreset({\n                heading: t(id),\n                menu: {\n                  mode: queryOptionProps.mode,\n                  items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),\n                  onItemClick: queryOptionProps.onItemClick\n                }\n              });\n              setOptionPresetMenuOpen(true);\n            }\n          }\n        };\n      },\n      []\n    );\n\n    const basicModeActions = useMemo(() => {\n      let basicActions: Action[] = [];\n      if (filter) {\n        const filterAction: Action = getQueryOptionAction('filter', 'filter', filter);\n        basicActions.push(filterAction);\n      }\n      if (sort) {\n        const sortAction: Action = getQueryOptionAction('sort', 'arrow-up-down', sort);\n        basicActions.push(sortAction);\n      }\n      if (group) {\n        const groupAction: Action = getQueryOptionAction('group', 'row', group);\n        basicActions.push(groupAction);\n      }\n      if (actions) {\n        basicActions = basicActions.concat(actions);\n      }\n\n      return basicActions.length ? basicActions : undefined;\n    }, [actions, filter, sort, group, getQueryOptionAction]);\n\n    let selectedViewName: string | undefined;\n    if (viewSelector) {\n      selectedViewName = helpers.getSelectedView(viewSelector.views)?.text;\n      selectedViewName ??= helpers.getViews(viewSelector.views)[0].text;\n    }\n\n    const labelText =\n      viewSelector && viewSelector.views.length > 1 ? `${name}: ${selectedViewName}` : name;\n\n    return (\n      <Flex data-testid={testIds.root} container {...restProps} as={StyledListToolbar} ref={ref}>\n        <StyledListToolbarContent\n          container={{ direction: 'column', gap: 0.5 }}\n          ref={toolbarContentRef}\n          item={{ grow: 1 }}\n        >\n          <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n            <StyledContainer\n              container={{\n                alignItems: 'baseline',\n                gap: 1,\n                wrap: 'wrap'\n              }}\n            >\n              <StyledHeadingText\n                data-testid={testIds.heading}\n                variant={headingTag}\n                required={viewSelector?.views?.length && formControlProps?.required}\n              >\n                {!viewSelector || viewSelector.views.length <= 1 ? (\n                  labelText\n                ) : (\n                  <MenuButton\n                    variant='text'\n                    text={labelText}\n                    as={StyledViewSelector}\n                    menu={{\n                      mode: 'single-select',\n                      items: viewSelector.views.map(view => {\n                        if (hasProp(view, 'items')) {\n                          return {\n                            id: view.text,\n                            label: view.text,\n                            items: view.items.map(groupedView => {\n                              return {\n                                ...groupedView,\n                                primary: generateViewName(\n                                  groupedView,\n                                  { default: t('default'), appDefault: t('app_default') },\n                                  {\n                                    defaultId: viewSelector.defaultId,\n                                    appDefaultId: viewSelector.appDefaultId\n                                  }\n                                ),\n                                visual: groupedView.visual ? (\n                                  <Avatar {...groupedView.visual} />\n                                ) : undefined\n                              };\n                            })\n                          };\n                        }\n\n                        return {\n                          ...view,\n                          primary: generateViewName(\n                            view,\n                            { default: t('default'), appDefault: t('app_default') },\n                            {\n                              defaultId: viewSelector.defaultId,\n                              appDefaultId: viewSelector.appDefaultId\n                            }\n                          ),\n                          visual: view.visual ? <Avatar {...view.visual} /> : undefined\n                        };\n                      }),\n                      onItemClick: viewSelector.onViewSelect\n                    }}\n                    testId={testIds.viewSelector}\n                  />\n                )}\n              </StyledHeadingText>\n              {isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n            </StyledContainer>\n            <Flex container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 0 }}>\n              {isSmallOrAbove && additionalActions}\n              {search && isSmallOrAbove && searchButton}\n              {isSmallOrAbove && createNewButton}\n              {isSmallOrAbove && basicModeActions && (\n                <span>\n                  <Actions\n                    items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restActionProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                </span>\n              )}\n              {!isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n            </Flex>\n          </Flex>\n          {!isSmallOrAbove && (\n            <Flex container={{ alignItems: 'start', justify: 'between', gap: 1 }}>\n              {additionalActions}\n              <Flex\n                as={StyledSearchForm}\n                container={{ alignItems: 'center', wrap: 'wrap', gap: 1 }}\n                item={{ grow: 1 }}\n              >\n                {search && searchInputWrapper}\n              </Flex>\n              {createNewButton}\n              {basicModeActions && (\n                <span>\n                  <Actions\n                    items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restActionProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                </span>\n              )}\n            </Flex>\n          )}\n        </StyledListToolbarContent>\n\n        {queryOptionPopover}\n\n        <PresetMenuPopover\n          buttonRef={consolidatedActionsButtonRef}\n          heading={actionsQueryOptionPreset?.heading}\n          menu={actionsQueryOptionPreset?.menu}\n          isOpen={optionPresetMenuOpen}\n          onClose={() => setOptionPresetMenuOpen(false)}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default withTestIds(ListToolbar, getListToolbarTestIds);\n"]}

package/lib/components/ListToolbar/ListToolbar.styles.d.ts

@@ -3,6 +3,7 @@ export declare const StyledViewSelector: import("styled-components").StyledCompo
     required: boolean;
 }, never>;
 export declare const StyledListToolbar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledListToolbarDialog: import("styled-components").StyledComponent<import("react").FC<import("../Dialog").FormDialogProps & Pick<import("react").HTMLAttributes<HTMLDivElement>, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledListToolbarContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHeadingText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
     required?: boolean | undefined;

package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;SA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAO5B,CAAC;AAIH,eAAO,MAAM,wBAAwB,iMAOnC,CAAC;AAIH,eAAO,MAAM,iBAAiB;;SA0B5B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAW1B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAU3B,CAAC"}
+{"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;SA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAI9C,eAAO,MAAM,uBAAuB,mrJAKlC,CAAC;AAIH,eAAO,MAAM,wBAAwB,iMAOnC,CAAC;AAIH,eAAO,MAAM,iBAAiB;;SA0B5B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAW1B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAU3B,CAAC"}

package/lib/components/ListToolbar/ListToolbar.styles.js

@@ -5,7 +5,7 @@ import Text, { StyledText } from '../Text';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import { StyledButton } from '../Button';
-import { StyledFormDialog } from '../Dialog/FormDialog';
+import FormDialog from '../Dialog/FormDialog';
 export const StyledSearchForm = styled.div `
   ${StyledSearchInput} {
     flex-grow: 1;
@@ -39,15 +39,15 @@ export const StyledViewSelector = styled.button(({ theme, required }) => {
   `;
 });
 StyledViewSelector.defaultProps = defaultThemeProp;
-export const StyledListToolbar = styled.div(({ theme }) => {
+export const StyledListToolbar = styled.div ``;
+StyledListToolbar.defaultProps = defaultThemeProp;
+export const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {
     return css `
-    ${StyledFormDialog} {
-      min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));
-      max-width: calc(100vw - 4 * ${theme.base.spacing});
-    }
+    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));
+    max-width: calc(100vw - 4 * ${theme.base.spacing});
   `;
 });
-StyledListToolbar.defaultProps = defaultThemeProp;
+StyledListToolbarDialog.defaultProps = defaultThemeProp;
 export const StyledListToolbarContent = styled(Flex)(({ theme }) => {
     return css `
     ${StyledButton} + ${StyledButton} {

package/lib/components/ListToolbar/ListToolbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport Text, { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\nimport { StyledFormDialog } from '../Dialog/FormDialog';\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    ${StyledText} {\n      font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h3['font-weight']};\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div(({ theme }) => {\n  return css`\n    ${StyledFormDialog} {\n      min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n      max-width: calc(100vw - 4 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledHeadingText = styled(Text)<{ required?: boolean }>(({ theme, required }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    position: relative;\n    line-height: ${hitAreaMouse};\n    word-break: break-word;\n    ${required &&\n    css`\n      padding-inline-end: calc(1.5 * ${theme.base.spacing});\n    `}\n    @media (pointer: coarse) {\n      line-height: ${hitAreaFinger};\n    }\n    &::after {\n      display: ${required ? 'inline' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n    }\n  `;\n});\n\nStyledHeadingText.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(Text)(({ theme }) => {\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    line-height: ${hitAreaMouse};\n\n    @media (pointer: coarse) {\n      line-height: ${hitAreaFinger};\n    }\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled(Flex)`\n  @media (pointer: coarse) {\n    overflow: hidden;\n\n    ${StyledHeadingText}, ${StyledViewSelector} ${StyledText} {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledSearchInput } from '../SearchInput';\nimport Text, { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\nimport FormDialog from '../Dialog/FormDialog';\n\nexport const StyledSearchForm = styled.div`\n  ${StyledSearchInput} {\n    flex-grow: 1;\n    max-width: min(100%, 40ch);\n  }\n`;\n\nexport const StyledViewSelector = styled.button<{ required: boolean }>(({ theme, required }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    flex-shrink: initial;\n    white-space: initial;\n    ${StyledText} {\n      font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h3['font-weight']};\n      line-height: ${hitAreaMouse};\n      word-break: break-word;\n      @media (pointer: coarse) {\n        line-height: ${hitAreaFinger};\n      }\n    }\n\n    ${StyledText}::after {\n      display: ${required ? 'inline-block' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div``;\n\nStyledListToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarDialog = styled(FormDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));\n    max-width: calc(100vw - 4 * ${theme.base.spacing});\n  `;\n});\n\nStyledListToolbarDialog.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbarContent = styled(Flex)(({ theme }) => {\n  return css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledListToolbarContent.defaultProps = defaultThemeProp;\n\nexport const StyledHeadingText = styled(Text)<{ required?: boolean }>(({ theme, required }) => {\n  const { urgent } = theme.base.palette;\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    position: relative;\n    line-height: ${hitAreaMouse};\n    word-break: break-word;\n    ${required &&\n    css`\n      padding-inline-end: calc(1.5 * ${theme.base.spacing});\n    `}\n    @media (pointer: coarse) {\n      line-height: ${hitAreaFinger};\n    }\n    &::after {\n      display: ${required ? 'inline' : 'none'};\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-start: 0;\n    }\n  `;\n});\n\nStyledHeadingText.defaultProps = defaultThemeProp;\n\nexport const StyledCountMeta = styled(Text)(({ theme }) => {\n  const hitAreaMouse = theme.base['hit-area']['mouse-min'];\n  const hitAreaFinger = theme.base['hit-area']['finger-min'];\n\n  return css`\n    line-height: ${hitAreaMouse};\n\n    @media (pointer: coarse) {\n      line-height: ${hitAreaFinger};\n    }\n  `;\n});\n\nStyledCountMeta.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled(Flex)`\n  @media (pointer: coarse) {\n    overflow: hidden;\n\n    ${StyledHeadingText}, ${StyledViewSelector} ${StyledText} {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n`;\n"]}

package/lib/components/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import { MenuProps } from './Menu.types';
 declare const _default: FunctionComponent<MenuProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["create-new"]>;
 };
 export default _default;
 //# sourceMappingURL=Menu.d.ts.map

package/lib/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EAEL,SAAS,EAGV,MAAM,cAAc,CAAC;;;;AA8WtB,wBAAiD"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,EAEL,SAAS,EAGV,MAAM,cAAc,CAAC;;;;AAyXtB,wBAAiD"}

package/lib/components/Menu/Menu.js

@@ -3,6 +3,8 @@ import { forwardRef, useCallback, useEffect, useState, useRef, useMemo } from 'r
 import { useConsolidatedRef, useUID, useActiveDescendant, useLazyDescendant, useI18n, usePrevious, useDirection, useTestIds } from '../../hooks';
 import { cap, withTestIds } from '../../utils';
 import VisuallyHiddenText from '../VisuallyHiddenText';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 import FlyoutMenuList from './FlyoutMenuList';
 import MenuContext from './Menu.context';
 import { StyledMenu, StyledMenuListWrapper } from './Menu.styles';
@@ -10,7 +12,7 @@ import { getMenuTestIds } from './Menu.test-ids';
 import MenuList from './MenuList';
 const Menu = forwardRef(function Menu(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, items = [], mode = 'action', accent, scrollAt = 7, emptyText, onItemClick, onItemActive, onItemExpand, loadMore, onItemCollapse, loading = false, currentItemId, header, footer, variant = 'drill-down', focusControlEl, arrowNavigationUnsupported, 'aria-describedby': ariaDescribedBy, 'aria-label': label, role = 'menu', listId, pauseDescendantEvaluation, ...restProps } = props;
+    const { testId, id = uid, items = [], onCreateNew, mode = 'action', accent, scrollAt = 7, emptyText, onItemClick, onItemActive, onItemExpand, loadMore, onItemCollapse, loading = false, currentItemId, header, footer, variant = 'drill-down', focusControlEl, arrowNavigationUnsupported, 'aria-describedby': ariaDescribedBy, 'aria-label': label, role = 'menu', listId, pauseDescendantEvaluation, ...restProps } = props;
     const testIds = useTestIds(testId, getMenuTestIds);
     const t = useI18n();
     const { end: endDirection, start: startDirection } = useDirection();
@@ -242,7 +244,7 @@ const Menu = forwardRef(function Menu(props, ref) {
         flyOutActiveIdStack,
         updateParentDescendantStack
     ]);
-    return (_jsxs(StyledMenu, { "data-testid": testIds.root, id: id, "aria-describedby": menuAsFocusControl ? `${id}-menuDescription` : undefined, ...restProps, ref: menuRef, tabIndex: menuAsFocusControl ? 0 : undefined, children: [menuAsFocusControl && (_jsx("span", { id: `${id}-menuDescription`, hidden: true, children: (`${t('menu_selection_instructions')} ` && ariaDescribedBy) || '' })), label && _jsx(VisuallyHiddenText, { id: `${id}-menuLabel`, children: label }), header && _jsx("header", { children: header }), _jsx(StyledMenuListWrapper, { children: _jsx(MenuContext.Provider, { value: contextValue, children: variant === 'drill-down' ? (_jsx(MenuList, { items: items, id: listId, menuRole: role, "aria-labelledby": label ? `${id}-menuLabel` : undefined })) : (_jsx(FlyoutMenuList, { items: items, menuRole: role })) }) }), footer && _jsx("footer", { children: footer })] }));
+    return (_jsxs(StyledMenu, { "data-testid": testIds.root, id: id, "aria-describedby": menuAsFocusControl ? `${id}-menuDescription` : undefined, ...restProps, ref: menuRef, tabIndex: menuAsFocusControl ? 0 : undefined, children: [menuAsFocusControl && (_jsx("span", { id: `${id}-menuDescription`, hidden: true, children: (`${t('menu_selection_instructions')} ` && ariaDescribedBy) || '' })), label && _jsx(VisuallyHiddenText, { id: `${id}-menuLabel`, children: label }), header && _jsx("header", { children: header }), _jsx(StyledMenuListWrapper, { children: _jsx(MenuContext.Provider, { value: contextValue, children: variant === 'drill-down' ? (_jsx(MenuList, { items: items, id: listId, menuRole: role, "aria-labelledby": label ? `${id}-menuLabel` : undefined })) : (_jsx(FlyoutMenuList, { items: items, menuRole: role })) }) }), (onCreateNew || footer) && (_jsx("footer", { children: onCreateNew ? (_jsxs(Button, { "data-testid": testIds.createNew, variant: 'link', onClick: onCreateNew, children: [_jsx(Icon, { name: 'plus' }), " ", t('create_new')] })) : (footer) }))] }));
 });
 export default withTestIds(Menu, getMenuTestIds);
 //# sourceMappingURL=Menu.js.map

package/lib/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  useMemo,\n  MouseEvent\n} from 'react';\n\nimport {\n  useConsolidatedRef,\n  useUID,\n  useActiveDescendant,\n  useLazyDescendant,\n  useI18n,\n  usePrevious,\n  useDirection,\n  useTestIds\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { getMenuTestIds } from './Menu.test-ids';\nimport {\n  MenuContextProps,\n  MenuProps,\n  MenuItemProps,\n  AcceptedMouseEventElement\n} from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(function Menu(\n  props: PropsWithoutRef<MenuProps>,\n  ref: MenuProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    items = [],\n    mode = 'action',\n    accent,\n    scrollAt = 7,\n    emptyText,\n    onItemClick,\n    onItemActive,\n    onItemExpand,\n    loadMore,\n    onItemCollapse,\n    loading = false,\n    currentItemId,\n    header,\n    footer,\n    variant = 'drill-down',\n    focusControlEl,\n    arrowNavigationUnsupported,\n    'aria-describedby': ariaDescribedBy,\n    'aria-label': label,\n    role = 'menu',\n    listId,\n    pauseDescendantEvaluation,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getMenuTestIds);\n\n  const t = useI18n();\n\n  const { end: endDirection, start: startDirection } = useDirection();\n  const radioName = useUID();\n  const menuRef = useConsolidatedRef(ref);\n  const previousItemCount = useRef(0);\n  const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n  const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n  const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState<string[]>([id]);\n  const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n  const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n  const [flyoutFocusReturnStack, setFlyoutFocusReturnStack] = useState<(HTMLElement | null)[]>([]);\n\n  const menuAsFocusControl = !focusControlEl;\n\n  const activeFlyoutSelector = useMemo(\n    () => `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n    [flyOutActiveIdStack]\n  );\n\n  const focusControl = useMemo(() => {\n    return focusControlEl || menuRef.current;\n  }, [focusControlEl, menuRef.current]);\n\n  const pushFlyoutId = useCallback(\n    (flyoutId: string) => {\n      setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n    },\n    [flyOutActiveIdStack]\n  );\n\n  useEffect(() => {\n    setFlyoutActiveIdStack([...flyOutActiveIdStack, id]);\n  }, [id]);\n\n  const updateParentDescendantStack = useCallback(\n    (item: HTMLElement | null) => {\n      setFlyoutFocusReturnStack([...flyoutFocusReturnStack, item]);\n    },\n    [flyoutFocusReturnStack]\n  );\n\n  const getScopedItemId = useCallback(\n    (itemId: string) => {\n      return `${id}-item-${itemId}`;\n    },\n    [id]\n  );\n\n  const getUnscopedItemId = useCallback(\n    (itemId: string) => {\n      return itemId.split(`${id}-item-`)[1];\n    },\n    [id]\n  );\n\n  const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n    ({ preventScroll = false } = {}) => {\n      setPreventInitialScroll(preventScroll);\n      setActiveDescendantUpdateId(Math.random());\n    },\n    []\n  );\n\n  const uadConfig = useMemo(\n    () => ({\n      focusEl: focusControl,\n      scope: menuRef.current,\n      scopeSelector:\n        variant === 'drill-down'\n          ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n          : activeFlyoutSelector,\n      selector: `[role=\"${\n        role === 'menu' ? 'menuitem' : 'option'\n      }\"], legend` as keyof HTMLElementTagNameMap,\n      focusDescendantEl: focusDescendant,\n      clearFocusDescendant: () => {\n        setFocusDescendant(null);\n      },\n      focusReturnEl,\n      clearFocusReturn: () => {\n        setFocusReturnEl(null);\n      },\n      currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n      preventInitialScroll,\n      clearPreventScroll: () => {\n        setPreventInitialScroll(false);\n      },\n      pauseDescendantEvaluation\n    }),\n    [\n      focusControl,\n      menuRef.current,\n      activeFlyoutSelector,\n      focusReturnEl,\n      focusDescendant,\n      currentItemId,\n      preventInitialScroll,\n      pauseDescendantEvaluation\n    ]\n  );\n\n  const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n    activeDescendantUpdateId\n  ]);\n\n  const previousActiveDescendant = usePrevious(activeDescendant);\n\n  useLazyDescendant({\n    loading,\n    descendants,\n    previousActiveDescendant,\n    activeDescendant,\n    focusReturnEl,\n    setFocusReturnEl,\n    scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')\n  });\n\n  // ## Bind Menu-specific navigation keyDown.\n  useEffect(() => {\n    const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n      if (activeDescendant) {\n        // expand\n        if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n          activeDescendant.querySelector<HTMLSpanElement>('span[aria-hidden=\"true\"]')?.click();\n          return;\n        }\n\n        // collapse\n        if (action !== 'expand') {\n          if (\n            variant === 'flyout' &&\n            flyOutActiveIdStack.length > 1 &&\n            flyoutFocusReturnStack.length > 0\n          ) {\n            setFlyoutActiveIdStack([...flyOutActiveIdStack].slice(0, -1));\n\n            const parentDescendant = flyoutFocusReturnStack.pop();\n            if (parentDescendant !== undefined) setFocusReturnEl(parentDescendant);\n            updateActiveDescendants();\n          } else if (activeDescendant.dataset.collapse === 'true') activeDescendant.click();\n        }\n      }\n    };\n\n    const additionalKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case `Arrow${cap(endDirection)}`: {\n          if (arrowNavigationUnsupported) break;\n          expandOrCollapse('expand');\n          break;\n        }\n        case `Arrow${cap(startDirection)}`: {\n          if (arrowNavigationUnsupported) break;\n          expandOrCollapse('collapse');\n          break;\n        }\n        case 'Escape': {\n          if (\n            variant === 'flyout' &&\n            flyOutActiveIdStack.length > 1 &&\n            flyoutFocusReturnStack.length > 0\n          ) {\n            e.preventDefault();\n            e.stopPropagation();\n\n            setFlyoutActiveIdStack([...flyOutActiveIdStack].slice(0, -1));\n            const parentDescendant = flyoutFocusReturnStack.pop();\n            if (parentDescendant !== undefined) setFocusReturnEl(parentDescendant);\n            updateActiveDescendants();\n          }\n          break;\n        }\n        default:\n          break;\n      }\n\n      if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n        e.preventDefault();\n        expandOrCollapse();\n      }\n    };\n\n    if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n    focusControl?.addEventListener('keydown', additionalKeydown);\n\n    return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n  }, [focusControl, activeDescendant, flyOutActiveIdStack]);\n\n  // ## Update useActiveDescendant on change of items, not selection of items.\n  useEffect(() => {\n    // Next tick for DOM updates.\n    const timeoutId = setTimeout(() => {\n      if (items.length === previousItemCount.current) {\n        const previousDescendantIds = descendants?.map(node => node.id);\n        const newDescendants = uadConfig.scope\n          ?.querySelector(uadConfig.scopeSelector)\n          ?.querySelectorAll(uadConfig.selector);\n\n        if (!newDescendants) {\n          updateActiveDescendants();\n          return;\n        }\n\n        const scopedDescendants = Array.from(newDescendants);\n\n        if (scopedDescendants?.length !== previousDescendantIds?.length) {\n          updateActiveDescendants();\n          return;\n        }\n\n        const itemsUnchanged = scopedDescendants.every(\n          (node, index) => node.id === previousDescendantIds[index]\n        );\n\n        if (!itemsUnchanged) {\n          updateActiveDescendants();\n        }\n\n        return;\n      }\n\n      previousItemCount.current = items.length;\n      updateActiveDescendants();\n    }, 0);\n\n    return () => clearTimeout(timeoutId);\n  }, [items]);\n\n  const contextValue = useMemo(() => {\n    return {\n      componentId: id,\n      'aria-label': label,\n      mode,\n      arrowNavigationUnsupported,\n      onItemClick: (\n        clickedId: MenuItemProps['id'],\n        event: MouseEvent<AcceptedMouseEventElement>\n      ) => {\n        if (menuAsFocusControl) {\n          menuRef.current?.focus();\n        }\n\n        onItemClick?.(clickedId, event);\n      },\n      onItemActive,\n      onItemExpand,\n      onItemCollapse,\n      accent,\n      scrollAt,\n      emptyText,\n      radioName,\n      loadMore,\n      loading,\n      variant,\n      focusControl,\n      updateActiveDescendants,\n      setFocusReturnEl,\n      setFocusDescendant,\n      getScopedItemId,\n      pushFlyoutId,\n      flyOutActiveIdStack,\n      updateParentDescendantStack\n    };\n  }, [\n    id,\n    label,\n    mode,\n    arrowNavigationUnsupported,\n    onItemClick,\n    onItemActive,\n    onItemExpand,\n    onItemCollapse,\n    accent,\n    scrollAt,\n    emptyText,\n    radioName,\n    loadMore,\n    loading,\n    variant,\n    focusControl,\n    updateActiveDescendants,\n    setFocusReturnEl,\n    setFocusDescendant,\n    getScopedItemId,\n    pushFlyoutId,\n    flyOutActiveIdStack,\n    updateParentDescendantStack\n  ]);\n\n  return (\n    <StyledMenu\n      data-testid={testIds.root}\n      id={id}\n      aria-describedby={menuAsFocusControl ? `${id}-menuDescription` : undefined}\n      {...restProps}\n      ref={menuRef}\n      tabIndex={menuAsFocusControl ? 0 : undefined}\n    >\n      {menuAsFocusControl && (\n        <span id={`${id}-menuDescription`} hidden>\n          {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n        </span>\n      )}\n      {label && <VisuallyHiddenText id={`${id}-menuLabel`}>{label}</VisuallyHiddenText>}\n\n      {header && <header>{header}</header>}\n\n      <StyledMenuListWrapper>\n        <MenuContext.Provider value={contextValue}>\n          {variant === 'drill-down' ? (\n            <MenuList\n              items={items}\n              id={listId}\n              menuRole={role}\n              aria-labelledby={label ? `${id}-menuLabel` : undefined}\n            />\n          ) : (\n            <FlyoutMenuList items={items} menuRole={role} />\n          )}\n        </MenuContext.Provider>\n      </StyledMenuListWrapper>\n      {footer && <footer>{footer}</footer>}\n    </StyledMenu>\n  );\n});\n\nexport default withTestIds(Menu, getMenuTestIds);\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  useMemo,\n  MouseEvent\n} from 'react';\n\nimport {\n  useConsolidatedRef,\n  useUID,\n  useActiveDescendant,\n  useLazyDescendant,\n  useI18n,\n  usePrevious,\n  useDirection,\n  useTestIds\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Button from '../Button/Button';\nimport Icon from '../Icon/Icon';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { getMenuTestIds } from './Menu.test-ids';\nimport {\n  MenuContextProps,\n  MenuProps,\n  MenuItemProps,\n  AcceptedMouseEventElement\n} from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(function Menu(\n  props: PropsWithoutRef<MenuProps>,\n  ref: MenuProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    items = [],\n    onCreateNew,\n    mode = 'action',\n    accent,\n    scrollAt = 7,\n    emptyText,\n    onItemClick,\n    onItemActive,\n    onItemExpand,\n    loadMore,\n    onItemCollapse,\n    loading = false,\n    currentItemId,\n    header,\n    footer,\n    variant = 'drill-down',\n    focusControlEl,\n    arrowNavigationUnsupported,\n    'aria-describedby': ariaDescribedBy,\n    'aria-label': label,\n    role = 'menu',\n    listId,\n    pauseDescendantEvaluation,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getMenuTestIds);\n\n  const t = useI18n();\n\n  const { end: endDirection, start: startDirection } = useDirection();\n  const radioName = useUID();\n  const menuRef = useConsolidatedRef(ref);\n  const previousItemCount = useRef(0);\n  const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n  const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n  const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState<string[]>([id]);\n  const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n  const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n  const [flyoutFocusReturnStack, setFlyoutFocusReturnStack] = useState<(HTMLElement | null)[]>([]);\n\n  const menuAsFocusControl = !focusControlEl;\n\n  const activeFlyoutSelector = useMemo(\n    () => `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n    [flyOutActiveIdStack]\n  );\n\n  const focusControl = useMemo(() => {\n    return focusControlEl || menuRef.current;\n  }, [focusControlEl, menuRef.current]);\n\n  const pushFlyoutId = useCallback(\n    (flyoutId: string) => {\n      setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n    },\n    [flyOutActiveIdStack]\n  );\n\n  useEffect(() => {\n    setFlyoutActiveIdStack([...flyOutActiveIdStack, id]);\n  }, [id]);\n\n  const updateParentDescendantStack = useCallback(\n    (item: HTMLElement | null) => {\n      setFlyoutFocusReturnStack([...flyoutFocusReturnStack, item]);\n    },\n    [flyoutFocusReturnStack]\n  );\n\n  const getScopedItemId = useCallback(\n    (itemId: string) => {\n      return `${id}-item-${itemId}`;\n    },\n    [id]\n  );\n\n  const getUnscopedItemId = useCallback(\n    (itemId: string) => {\n      return itemId.split(`${id}-item-`)[1];\n    },\n    [id]\n  );\n\n  const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n    ({ preventScroll = false } = {}) => {\n      setPreventInitialScroll(preventScroll);\n      setActiveDescendantUpdateId(Math.random());\n    },\n    []\n  );\n\n  const uadConfig = useMemo(\n    () => ({\n      focusEl: focusControl,\n      scope: menuRef.current,\n      scopeSelector:\n        variant === 'drill-down'\n          ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n          : activeFlyoutSelector,\n      selector: `[role=\"${\n        role === 'menu' ? 'menuitem' : 'option'\n      }\"], legend` as keyof HTMLElementTagNameMap,\n      focusDescendantEl: focusDescendant,\n      clearFocusDescendant: () => {\n        setFocusDescendant(null);\n      },\n      focusReturnEl,\n      clearFocusReturn: () => {\n        setFocusReturnEl(null);\n      },\n      currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n      preventInitialScroll,\n      clearPreventScroll: () => {\n        setPreventInitialScroll(false);\n      },\n      pauseDescendantEvaluation\n    }),\n    [\n      focusControl,\n      menuRef.current,\n      activeFlyoutSelector,\n      focusReturnEl,\n      focusDescendant,\n      currentItemId,\n      preventInitialScroll,\n      pauseDescendantEvaluation\n    ]\n  );\n\n  const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n    activeDescendantUpdateId\n  ]);\n\n  const previousActiveDescendant = usePrevious(activeDescendant);\n\n  useLazyDescendant({\n    loading,\n    descendants,\n    previousActiveDescendant,\n    activeDescendant,\n    focusReturnEl,\n    setFocusReturnEl,\n    scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')\n  });\n\n  // ## Bind Menu-specific navigation keyDown.\n  useEffect(() => {\n    const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n      if (activeDescendant) {\n        // expand\n        if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n          activeDescendant.querySelector<HTMLSpanElement>('span[aria-hidden=\"true\"]')?.click();\n          return;\n        }\n\n        // collapse\n        if (action !== 'expand') {\n          if (\n            variant === 'flyout' &&\n            flyOutActiveIdStack.length > 1 &&\n            flyoutFocusReturnStack.length > 0\n          ) {\n            setFlyoutActiveIdStack([...flyOutActiveIdStack].slice(0, -1));\n\n            const parentDescendant = flyoutFocusReturnStack.pop();\n            if (parentDescendant !== undefined) setFocusReturnEl(parentDescendant);\n            updateActiveDescendants();\n          } else if (activeDescendant.dataset.collapse === 'true') activeDescendant.click();\n        }\n      }\n    };\n\n    const additionalKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case `Arrow${cap(endDirection)}`: {\n          if (arrowNavigationUnsupported) break;\n          expandOrCollapse('expand');\n          break;\n        }\n        case `Arrow${cap(startDirection)}`: {\n          if (arrowNavigationUnsupported) break;\n          expandOrCollapse('collapse');\n          break;\n        }\n        case 'Escape': {\n          if (\n            variant === 'flyout' &&\n            flyOutActiveIdStack.length > 1 &&\n            flyoutFocusReturnStack.length > 0\n          ) {\n            e.preventDefault();\n            e.stopPropagation();\n\n            setFlyoutActiveIdStack([...flyOutActiveIdStack].slice(0, -1));\n            const parentDescendant = flyoutFocusReturnStack.pop();\n            if (parentDescendant !== undefined) setFocusReturnEl(parentDescendant);\n            updateActiveDescendants();\n          }\n          break;\n        }\n        default:\n          break;\n      }\n\n      if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n        e.preventDefault();\n        expandOrCollapse();\n      }\n    };\n\n    if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n    focusControl?.addEventListener('keydown', additionalKeydown);\n\n    return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n  }, [focusControl, activeDescendant, flyOutActiveIdStack]);\n\n  // ## Update useActiveDescendant on change of items, not selection of items.\n  useEffect(() => {\n    // Next tick for DOM updates.\n    const timeoutId = setTimeout(() => {\n      if (items.length === previousItemCount.current) {\n        const previousDescendantIds = descendants?.map(node => node.id);\n        const newDescendants = uadConfig.scope\n          ?.querySelector(uadConfig.scopeSelector)\n          ?.querySelectorAll(uadConfig.selector);\n\n        if (!newDescendants) {\n          updateActiveDescendants();\n          return;\n        }\n\n        const scopedDescendants = Array.from(newDescendants);\n\n        if (scopedDescendants?.length !== previousDescendantIds?.length) {\n          updateActiveDescendants();\n          return;\n        }\n\n        const itemsUnchanged = scopedDescendants.every(\n          (node, index) => node.id === previousDescendantIds[index]\n        );\n\n        if (!itemsUnchanged) {\n          updateActiveDescendants();\n        }\n\n        return;\n      }\n\n      previousItemCount.current = items.length;\n      updateActiveDescendants();\n    }, 0);\n\n    return () => clearTimeout(timeoutId);\n  }, [items]);\n\n  const contextValue = useMemo(() => {\n    return {\n      componentId: id,\n      'aria-label': label,\n      mode,\n      arrowNavigationUnsupported,\n      onItemClick: (\n        clickedId: MenuItemProps['id'],\n        event: MouseEvent<AcceptedMouseEventElement>\n      ) => {\n        if (menuAsFocusControl) {\n          menuRef.current?.focus();\n        }\n\n        onItemClick?.(clickedId, event);\n      },\n      onItemActive,\n      onItemExpand,\n      onItemCollapse,\n      accent,\n      scrollAt,\n      emptyText,\n      radioName,\n      loadMore,\n      loading,\n      variant,\n      focusControl,\n      updateActiveDescendants,\n      setFocusReturnEl,\n      setFocusDescendant,\n      getScopedItemId,\n      pushFlyoutId,\n      flyOutActiveIdStack,\n      updateParentDescendantStack\n    };\n  }, [\n    id,\n    label,\n    mode,\n    arrowNavigationUnsupported,\n    onItemClick,\n    onItemActive,\n    onItemExpand,\n    onItemCollapse,\n    accent,\n    scrollAt,\n    emptyText,\n    radioName,\n    loadMore,\n    loading,\n    variant,\n    focusControl,\n    updateActiveDescendants,\n    setFocusReturnEl,\n    setFocusDescendant,\n    getScopedItemId,\n    pushFlyoutId,\n    flyOutActiveIdStack,\n    updateParentDescendantStack\n  ]);\n\n  return (\n    <StyledMenu\n      data-testid={testIds.root}\n      id={id}\n      aria-describedby={menuAsFocusControl ? `${id}-menuDescription` : undefined}\n      {...restProps}\n      ref={menuRef}\n      tabIndex={menuAsFocusControl ? 0 : undefined}\n    >\n      {menuAsFocusControl && (\n        <span id={`${id}-menuDescription`} hidden>\n          {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n        </span>\n      )}\n      {label && <VisuallyHiddenText id={`${id}-menuLabel`}>{label}</VisuallyHiddenText>}\n\n      {header && <header>{header}</header>}\n\n      <StyledMenuListWrapper>\n        <MenuContext.Provider value={contextValue}>\n          {variant === 'drill-down' ? (\n            <MenuList\n              items={items}\n              id={listId}\n              menuRole={role}\n              aria-labelledby={label ? `${id}-menuLabel` : undefined}\n            />\n          ) : (\n            <FlyoutMenuList items={items} menuRole={role} />\n          )}\n        </MenuContext.Provider>\n      </StyledMenuListWrapper>\n      {(onCreateNew || footer) && (\n        <footer>\n          {onCreateNew ? (\n            <Button data-testid={testIds.createNew} variant='link' onClick={onCreateNew}>\n              <Icon name='plus' /> {t('create_new')}\n            </Button>\n          ) : (\n            footer\n          )}\n        </footer>\n      )}\n    </StyledMenu>\n  );\n});\n\nexport default withTestIds(Menu, getMenuTestIds);\n"]}

package/lib/components/Menu/Menu.test-ids.d.ts

@@ -1,3 +1,3 @@
-export declare const getMenuTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getMenuTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["create-new"]>;
 export declare const getMenuItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
 //# sourceMappingURL=Menu.test-ids.d.ts.map

package/lib/components/Menu/Menu.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iFAAqC,CAAC;AAEjE,eAAO,MAAM,kBAAkB,iFAA0C,CAAC"}
+{"version":3,"file":"Menu.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,6FAAiD,CAAC;AAE7E,eAAO,MAAM,kBAAkB,iFAA0C,CAAC"}

package/lib/components/Menu/Menu.test-ids.js

@@ -1,4 +1,4 @@
 import { createTestIds } from '../../utils';
-export const getMenuTestIds = createTestIds('menu', []);
+export const getMenuTestIds = createTestIds('menu', ['create-new']);
 export const getMenuItemTestIds = createTestIds('menu-item', []);
 //# sourceMappingURL=Menu.test-ids.js.map

package/lib/components/Menu/Menu.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.test-ids.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,EAAW,CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getMenuTestIds = createTestIds('menu', [] as const);\n\nexport const getMenuItemTestIds = createTestIds('menu-item', [] as const);\n"]}
+{"version":3,"file":"Menu.test-ids.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,YAAY,CAAU,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getMenuTestIds = createTestIds('menu', ['create-new'] as const);\n\nexport const getMenuItemTestIds = createTestIds('menu-item', [] as const);\n"]}

package/lib/components/Menu/Menu.types.d.ts

@@ -74,6 +74,8 @@ export interface MenuListProps {
 export interface MenuProps extends TestIdProp, BaseProps, NoChildrenProp {
     /** An array of MenuItemProps. */
     items: (MenuItemProps | MenuGroupProps)[];
+    /** Renders a create new action below the menu. */
+    onCreateNew?: () => void;
     /** ID placed on the menu's list element. */
     listId?: string;
     /**