@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/ListToolbar/ListToolbar.js

@@ -1,9 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Actions from '../Actions';
-import Text from '../Text';
 import Button from '../Button';
-import { useBreakpoint, useConsolidatedRef, useI18n } from '../../hooks';
+import { useBreakpoint, useConfiguration, useConsolidatedRef, useEscape, useI18n, useTestIds } from '../../hooks';
 import Flex from '../Flex';
 import SearchInput from '../SearchInput';
 import Icon, { registerIcon } from '../Icon';
@@ -12,56 +11,56 @@ import * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';
 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 } from '../../utils';
+import { hasProp, withTestIds } from '../../utils';
+import FormDialog from '../Dialog/FormDialog';
+import { formatNumber } from '../Number';
 import MenuButton from '../MenuButton';
-import { Count } from '../Badges';
+import Avatar from '../Avatar';
 import PresetMenuPopover from './PresetMenuPopover';
-import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText } from './ListToolbar.styles';
-import QueryOptionPopover from './QueryOptionPopover';
+import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent } from './ListToolbar.styles';
+import helpers from './helpers';
+import { getListToolbarTestIds } from './ListToolbar.test-ids';
 registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
-const CountMeta = ({ count }) => {
+const CountMeta = ({ count, ...restProps }) => {
+    const { locale } = useConfiguration();
     const t = useI18n();
-    return (_jsxs(Text, { variant: 'secondary', children: [count.total !== undefined &&
-                t('results_count', [count.totalHasMore ? `${count.total}+` : count.total], {
+    const totalFormattedValue = formatNumber(count.total ?? 0, {
+        locale,
+        options: {
+            useGrouping: true
+        }
+    });
+    return (_jsx(StyledCountMeta, { variant: 'secondary', ...restProps, children: count.selected
+            ? t('selected_count', [formatNumber(count.selected, { locale, options: { useGrouping: true } })], { count: count.selected })
+            : count.total !== undefined &&
+                t('results_count', [count.totalHasMore ? `${totalFormattedValue}+` : totalFormattedValue], {
                     count: count.total
-                }), count.total !== undefined && count.selected !== undefined && ' ', count.selected !== undefined &&
-                `(${t('selected_count', [count.selected], { count: count.selected })})`] }));
+                }) }));
 };
-const QueryOptionButton = ({ id, queryOptionProps, iconOnly, onClick }) => {
-    const t = useI18n();
-    let i18nKey;
-    let icon;
-    if (id === 'filter') {
-        i18nKey = 'filter';
-        icon = 'filter';
-    }
-    else if (id === 'sort') {
-        i18nKey = 'sort';
-        icon = 'arrow-up-down';
-    }
-    else {
-        i18nKey = 'group';
-        icon = 'row';
-    }
-    const text = t(i18nKey);
-    const variant = iconOnly ? 'simple' : 'text';
-    if (hasProp(queryOptionProps, 'renderer')) {
-        return (_jsx("div", { children: _jsx(Button, { variant: variant, icon: iconOnly, label: iconOnly ? text : undefined, onClick: onClick, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: icon }), !iconOnly && text, !iconOnly && queryOptionProps.count && _jsx(Count, { children: queryOptionProps.count })] }) }) }));
-    }
-    if (hasProp(queryOptionProps, 'items')) {
-        return (_jsx("div", { children: _jsx(MenuButton, { variant: variant, text: text, icon: icon, iconOnly: iconOnly, count: queryOptionProps.count, onClick: onClick, menu: {
-                    mode: queryOptionProps.mode,
-                    items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),
-                    onItemClick: queryOptionProps.onItemClick
-                } }) }));
-    }
-    return null;
+const generateViewName = (view, texts, options) => {
+    return `${view.text} ${view.id === options.defaultId ? `(${texts.default})` : ''} ${view.id === options.appDefaultId ? `(${texts.appDefault})` : ''}`;
 };
-const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search, count, additionalActions, filter, sort, group, actions, actionsButtonRef, condensed }, ref) => {
+const ListToolbar = forwardRef(({ testId, name, headingTag = 'h3', viewSelector, formControlProps, createNew, search, count, additionalActions, filter, sort, group, actions, actionsButtonRef, ...restProps }, ref) => {
     const t = useI18n();
+    const testIds = useTestIds(testId, getListToolbarTestIds);
     const isSmallOrAbove = useBreakpoint('sm');
-    const isMediumOrAbove = useBreakpoint('md');
     const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);
+    const toolbarContentRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const searchWrapperRef = useRef(null);
+    const searchButtonRef = useRef(null);
+    const [isSearchOpen, setIsSearchOpen] = useState(!!search?.value);
+    const onSearchEscape = useCallback(() => {
+        if (!search?.value) {
+            setIsSearchOpen(false);
+        }
+        setTimeout(() => searchButtonRef.current?.focus());
+    }, [search?.value]);
+    useEffect(() => {
+        if (search?.value) {
+            setIsSearchOpen(true);
+        }
+    }, [search?.value]);
     const [currentQueryOptionId, setCurrentQueryOptionId] = useState(null);
     const queryOptionPopoverTarget = useRef();
     const [actionsQueryOptionPreset, setActionsQueryOptionPreset] = useState();
@@ -70,25 +69,37 @@ const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search,
         if (!createNew?.onClick)
             return null;
         const text = createNew.label ?? t('create_new');
-        return (_jsx(Button, { variant: isSmallOrAbove ? 'secondary' : 'simple', icon: !isSmallOrAbove, label: isSmallOrAbove ? undefined : text, "aria-label": text, onClick: createNew.onClick, children: isSmallOrAbove ? text : _jsx(Icon, { name: 'plus' }) }));
+        return (_jsx(Button, { variant: 'simple', icon: true, label: text, "aria-label": text, onClick: createNew.onClick, children: _jsx(Icon, { name: 'plus' }) }));
     }, [t, createNew, isSmallOrAbove]);
-    const filterButton = filter && (_jsx(QueryOptionButton, { id: 'filter', queryOptionProps: filter, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('filter');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
-    const sortButton = sort && (_jsx(QueryOptionButton, { id: 'sort', queryOptionProps: sort, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('sort');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
-    const groupButton = group && (_jsx(QueryOptionButton, { id: 'group', queryOptionProps: group, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('group');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
+    useEscape(onSearchEscape, searchButtonRef);
+    const searchInputWrapper = useMemo(() => (_jsx("div", { role: 'dialog', ref: searchWrapperRef, children: _jsx(SearchInput, { ...search, onSearchSubmit: (value) => {
+                search?.onSearchSubmit?.(value);
+                onSearchEscape();
+            }, onClick: (e) => {
+                e.preventDefault();
+            }, ref: searchInputRef }) })), [search, onSearchEscape]);
+    const searchLabel = t('search');
+    const searchButton = useMemo(() => {
+        return (_jsx(Button, { as: 'div', role: 'button', variant: 'simple', icon: true, label: !isSearchOpen ? searchLabel : undefined, "aria-label": searchLabel, onClick: () => {
+                setIsSearchOpen(true);
+                setTimeout(() => searchInputRef.current?.focus());
+            }, onKeyDown: (e) => {
+                if (e.target !== searchInputRef.current && (e.key === 'Enter' || e.key === ' ')) {
+                    setIsSearchOpen(true);
+                    setTimeout(() => {
+                        searchInputRef.current?.focus();
+                        searchInputRef.current?.select();
+                    });
+                }
+            }, tabIndex: 0, ref: searchButtonRef, children: isSearchOpen ? searchInputWrapper : _jsx(Icon, { name: 'search' }) }));
+    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInputWrapper]);
     let queryOptionPopover = null;
     if (currentQueryOptionId) {
         const queryOptionProps = { filter, sort, group }[currentQueryOptionId];
-        if (queryOptionProps && hasProp(queryOptionProps, 'renderer')) {
-            queryOptionPopover = (_jsx(QueryOptionPopover, { target: queryOptionPopoverTarget.current, heading: t(`${currentQueryOptionId}_by`), onCancel: () => {
+        if (queryOptionProps &&
+            hasProp(queryOptionProps, 'renderer') &&
+            queryOptionPopoverTarget.current) {
+            queryOptionPopover = (_jsx(FormDialog, { target: queryOptionPopoverTarget.current, heading: t(currentQueryOptionId), placement: 'bottom-end', onCancel: () => {
                     if (queryOptionProps.onCancel() === false)
                         return;
                     setCurrentQueryOptionId(null);
@@ -112,7 +123,7 @@ const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search,
                 }
                 if (hasProp(queryOptionProps, 'items')) {
                     setActionsQueryOptionPreset({
-                        heading: t(`${id}_by`),
+                        heading: t(id),
                         menu: {
                             mode: queryOptionProps.mode,
                             items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),
@@ -143,23 +154,52 @@ const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search,
         }
         return basicActions.length ? basicActions : undefined;
     }, [actions, filter, sort, group, getQueryOptionAction]);
-    return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, ref: ref, role: 'toolbar', children: [(heading ||
-                createNewButton ||
-                (condensed && (count || additionalActions || search || basicModeActions))) && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 2, wrap: 'wrap' }, children: [heading &&
-                                (typeof heading === 'string' ? (_jsx(StyledHeadingText, { variant: 'h3', required: formControlProps?.required, children: heading })) : (_jsx(StyledViewSelector, { variant: 'text', text: heading.views.find(view => view.selected)?.text ?? heading.views[0].text, menu: {
-                                        mode: 'single-select',
-                                        items: heading.views.map(view => ({
-                                            ...view,
-                                            primary: `${view.text}${view.id === heading.defaultId ? ` (${t('default')})` : ''}${view.id === heading.appDefaultId ? ` (${t('app_default')})` : ''}`
-                                        })),
-                                        onItemClick: heading.onViewSelect
-                                    }, required: formControlProps?.required }))), isSmallOrAbove && condensed && (_jsxs(_Fragment, { children: [count && _jsx(CountMeta, { count: count }), additionalActions] }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 2 }, children: [search && condensed && isSmallOrAbove && _jsx(SearchInput, { ...search }), createNewButton, condensed && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
+    let selectedViewName;
+    if (viewSelector) {
+        selectedViewName = helpers.getSelectedView(viewSelector.views)?.text;
+        selectedViewName ??= helpers.getViews(viewSelector.views)[0].text;
+    }
+    const labelText = viewSelector && viewSelector.views.length > 1 ? `${name}: ${selectedViewName}` : name;
+    return (_jsxs(Flex, { "data-testid": testIds.root, container: true, ...restProps, as: StyledListToolbar, ref: ref, children: [_jsxs(StyledListToolbarContent, { container: { direction: 'column', gap: 0.5 }, ref: toolbarContentRef, item: { grow: 1 }, children: [_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(StyledContainer, { container: {
+                                    alignItems: 'baseline',
+                                    gap: 1,
+                                    wrap: 'wrap'
+                                }, children: [_jsx(StyledHeadingText, { "data-testid": testIds.heading, variant: headingTag, required: viewSelector?.views?.length && formControlProps?.required, children: !viewSelector || viewSelector.views.length <= 1 ? (labelText) : (_jsx(MenuButton, { variant: 'text', text: labelText, as: StyledViewSelector, menu: {
+                                                mode: 'single-select',
+                                                items: viewSelector.views.map(view => {
+                                                    if (hasProp(view, 'items')) {
+                                                        return {
+                                                            id: view.text,
+                                                            label: view.text,
+                                                            items: view.items.map(groupedView => {
+                                                                return {
+                                                                    ...groupedView,
+                                                                    primary: generateViewName(groupedView, { default: t('default'), appDefault: t('app_default') }, {
+                                                                        defaultId: viewSelector.defaultId,
+                                                                        appDefaultId: viewSelector.appDefaultId
+                                                                    }),
+                                                                    visual: groupedView.visual ? (_jsx(Avatar, { ...groupedView.visual })) : undefined
+                                                                };
+                                                            })
+                                                        };
+                                                    }
+                                                    return {
+                                                        ...view,
+                                                        primary: generateViewName(view, { default: t('default'), appDefault: t('app_default') }, {
+                                                            defaultId: viewSelector.defaultId,
+                                                            appDefaultId: viewSelector.appDefaultId
+                                                        }),
+                                                        visual: view.visual ? _jsx(Avatar, { ...view.visual }) : undefined
+                                                    };
+                                                }),
+                                                onItemClick: viewSelector.onViewSelect
+                                            }, testId: testIds.viewSelector })) }), isSmallOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 0 }, children: [isSmallOrAbove && additionalActions, search && isSmallOrAbove && searchButton, isSmallOrAbove && createNewButton, isSmallOrAbove && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restActionProps }) => ({
+                                                visual: icon ? _jsx(Icon, { name: icon }) : undefined,
+                                                ...restActionProps
+                                            })), menuAt: 1, ref: consolidatedActionsButtonRef }) })), !isSmallOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] })] }), !isSmallOrAbove && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 1 }, children: [additionalActions, _jsx(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 1 }, item: { grow: 1 }, children: search && searchInputWrapper }), createNewButton, basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restActionProps }) => ({
                                         visual: icon ? _jsx(Icon, { name: icon }) : undefined,
-                                        ...restProps
-                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] })] })), (!condensed || !isSmallOrAbove) && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, item: { grow: 1 }, children: [search && _jsx(SearchInput, { ...search }), isSmallOrAbove && !condensed && (_jsxs(_Fragment, { children: [count && _jsx(CountMeta, { count: count }), additionalActions] }))] }), !condensed && (filterButton || sortButton || groupButton || actions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, md: { container: { gap: 2 } }, children: [_jsxs(_Fragment, { children: [filterButton, sortButton, groupButton] }), actions && (_jsx(Actions, { items: actions.map(({ icon, ...restProps }) => ({
-                                    visual: icon ? _jsx(Icon, { name: icon }) : undefined,
-                                    ...restProps
-                                })), menuAt: 1, ref: consolidatedActionsButtonRef }))] }))] })), !isSmallOrAbove && (count || additionalActions) && (_jsxs(Flex, { container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, children: [count && _jsx(CountMeta, { count: count }), additionalActions] })), queryOptionPopover, condensed && (_jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) }))] }));
+                                        ...restActionProps
+                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] }))] }), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
 });
-export default ListToolbar;
+export default withTestIds(ListToolbar, getListToolbarTestIds);
 //# sourceMappingURL=ListToolbar.js.map

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  MouseEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport Actions from '../Actions';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { Action, ForwardProps } from '../../types';\nimport { useBreakpoint, useConsolidatedRef, useI18n } 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 } from '../../utils';\nimport MenuButton from '../MenuButton';\nimport { Count } from '../Badges';\n\nimport PresetMenuPopover, { PresetMenuPopoverProps } from './PresetMenuPopover';\nimport {\n  StyledViewSelector,\n  StyledSearchForm,\n  StyledListToolbar,\n  StyledHeadingText\n} from './ListToolbar.styles';\nimport {\n  ListToolbarProps,\n  PresetMenuProps,\n  QueryOptionDialogProps,\n  QueryOptionId\n} from './ListToolbar.types';\nimport QueryOptionPopover from './QueryOptionPopover';\n\nregisterIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);\n\nconst CountMeta = ({ count }: { count: NonNullable<ListToolbarProps['count']> }) => {\n  const t = useI18n();\n  return (\n    <Text variant='secondary'>\n      {count.total !== undefined &&\n        t('results_count', [count.totalHasMore ? `${count.total}+` : count.total], {\n          count: count.total\n        })}\n      {count.total !== undefined && count.selected !== undefined && ' '}\n      {count.selected !== undefined &&\n        `(${t('selected_count', [count.selected], { count: count.selected })})`}\n    </Text>\n  );\n};\n\nconst QueryOptionButton = ({\n  id,\n  queryOptionProps,\n  iconOnly,\n  onClick\n}: {\n  id: QueryOptionId;\n  queryOptionProps: QueryOptionDialogProps | PresetMenuProps;\n  iconOnly: boolean;\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}) => {\n  const t = useI18n();\n  let i18nKey: 'filter' | 'sort' | 'group';\n  let icon: 'filter' | 'arrow-up-down' | 'row';\n\n  if (id === 'filter') {\n    i18nKey = 'filter';\n    icon = 'filter';\n  } else if (id === 'sort') {\n    i18nKey = 'sort';\n    icon = 'arrow-up-down';\n  } else {\n    i18nKey = 'group';\n    icon = 'row';\n  }\n\n  const text = t(i18nKey);\n  const variant = iconOnly ? 'simple' : 'text';\n\n  if (hasProp(queryOptionProps, 'renderer')) {\n    return (\n      <div>\n        <Button\n          variant={variant}\n          icon={iconOnly}\n          label={iconOnly ? text : undefined}\n          onClick={onClick}\n        >\n          <Flex container={{ inline: true, alignItems: 'center', gap: 1 }} as='span'>\n            <Icon name={icon} />\n            {!iconOnly && text}\n            {!iconOnly && queryOptionProps.count && <Count>{queryOptionProps.count}</Count>}\n          </Flex>\n        </Button>\n      </div>\n    );\n  }\n\n  if (hasProp(queryOptionProps, 'items')) {\n    return (\n      <div>\n        <MenuButton\n          variant={variant}\n          text={text}\n          icon={icon}\n          iconOnly={iconOnly}\n          count={queryOptionProps.count}\n          onClick={onClick}\n          menu={{\n            mode: queryOptionProps.mode,\n            items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),\n            onItemClick: queryOptionProps.onItemClick\n          }}\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      formControlProps,\n      createNew,\n      search,\n      count,\n      additionalActions,\n      filter,\n      sort,\n      group,\n      actions,\n      actionsButtonRef,\n      condensed\n    }: PropsWithoutRef<ListToolbarProps>,\n    ref: ListToolbarProps['ref']\n  ) => {\n    const t = useI18n();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const isMediumOrAbove = useBreakpoint('md');\n    const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);\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\n          variant={isSmallOrAbove ? 'secondary' : 'simple'}\n          icon={!isSmallOrAbove}\n          label={isSmallOrAbove ? undefined : text}\n          aria-label={text}\n          onClick={createNew.onClick}\n        >\n          {isSmallOrAbove ? text : <Icon name='plus' />}\n        </Button>\n      );\n    }, [t, createNew, isSmallOrAbove]);\n\n    const filterButton = filter && (\n      <QueryOptionButton\n        id='filter'\n        queryOptionProps={filter}\n        iconOnly={!isMediumOrAbove}\n        onClick={e => {\n          setCurrentQueryOptionId('filter');\n          queryOptionPopoverTarget.current = e.currentTarget;\n        }}\n      />\n    );\n\n    const sortButton = sort && (\n      <QueryOptionButton\n        id='sort'\n        queryOptionProps={sort}\n        iconOnly={!isMediumOrAbove}\n        onClick={e => {\n          setCurrentQueryOptionId('sort');\n          queryOptionPopoverTarget.current = e.currentTarget;\n        }}\n      />\n    );\n\n    const groupButton = group && (\n      <QueryOptionButton\n        id='group'\n        queryOptionProps={group}\n        iconOnly={!isMediumOrAbove}\n        onClick={e => {\n          setCurrentQueryOptionId('group');\n          queryOptionPopoverTarget.current = e.currentTarget;\n        }}\n      />\n    );\n\n    let queryOptionPopover = null;\n    if (currentQueryOptionId) {\n      const queryOptionProps = { filter, sort, group }[currentQueryOptionId];\n      if (queryOptionProps && hasProp(queryOptionProps, 'renderer')) {\n        queryOptionPopover = (\n          <QueryOptionPopover\n            target={queryOptionPopoverTarget.current}\n            heading={t(`${currentQueryOptionId}_by`)}\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          </QueryOptionPopover>\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}_by`),\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    return (\n      <Flex\n        as={StyledListToolbar}\n        container={{ direction: 'column', gap: 2 }}\n        item={{ grow: 1 }}\n        ref={ref}\n        role='toolbar'\n      >\n        {(heading ||\n          createNewButton ||\n          (condensed && (count || additionalActions || search || basicModeActions))) && (\n          <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n            <Flex container={{ alignItems: 'center', gap: 2, wrap: 'wrap' }}>\n              {heading &&\n                (typeof heading === 'string' ? (\n                  <StyledHeadingText variant='h3' required={formControlProps?.required}>\n                    {heading}\n                  </StyledHeadingText>\n                ) : (\n                  <StyledViewSelector\n                    variant='text'\n                    text={heading.views.find(view => view.selected)?.text ?? heading.views[0].text}\n                    menu={{\n                      mode: 'single-select',\n                      items: heading.views.map(view => ({\n                        ...view,\n                        primary: `${view.text}${\n                          view.id === heading.defaultId ? ` (${t('default')})` : ''\n                        }${view.id === heading.appDefaultId ? ` (${t('app_default')})` : ''}`\n                      })),\n                      onItemClick: heading.onViewSelect\n                    }}\n                    required={formControlProps?.required}\n                  />\n                ))}\n              {isSmallOrAbove && condensed && (\n                <>\n                  {count && <CountMeta count={count} />}\n                  {additionalActions}\n                </>\n              )}\n            </Flex>\n            <Flex container={{ alignItems: 'center', gap: 2 }}>\n              {search && condensed && isSmallOrAbove && <SearchInput {...search} />}\n              {createNewButton}\n              {condensed && basicModeActions && (\n                <span>\n                  <Actions\n                    items={basicModeActions.map(({ icon, ...restProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                </span>\n              )}\n            </Flex>\n          </Flex>\n        )}\n        {(!condensed || !isSmallOrAbove) && (\n          <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n            <Flex\n              as={StyledSearchForm}\n              container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}\n              item={{ grow: 1 }}\n            >\n              {search && <SearchInput {...search} />}\n              {isSmallOrAbove && !condensed && (\n                <>\n                  {count && <CountMeta count={count} />}\n                  {additionalActions}\n                </>\n              )}\n            </Flex>\n            {!condensed && (filterButton || sortButton || groupButton || actions) && (\n              <Flex container={{ alignItems: 'center', gap: 1 }} md={{ container: { gap: 2 } }}>\n                <>\n                  {filterButton}\n                  {sortButton}\n                  {groupButton}\n                </>\n                {actions && (\n                  <Actions\n                    items={actions.map(({ icon, ...restProps }) => ({\n                      visual: icon ? <Icon name={icon} /> : undefined,\n                      ...restProps\n                    }))}\n                    menuAt={1}\n                    ref={consolidatedActionsButtonRef}\n                  />\n                )}\n              </Flex>\n            )}\n          </Flex>\n        )}\n        {!isSmallOrAbove && (count || additionalActions) && (\n          <Flex container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}>\n            {count && <CountMeta count={count} />}\n            {additionalActions}\n          </Flex>\n        )}\n\n        {queryOptionPopover}\n\n        {condensed && (\n          <PresetMenuPopover\n            buttonRef={consolidatedActionsButtonRef}\n            heading={actionsQueryOptionPreset?.heading}\n            menu={actionsQueryOptionPreset?.menu}\n            isOpen={optionPresetMenuOpen}\n            onClose={() => setOptionPresetMenuOpen(false)}\n          />\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ListToolbar;\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 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  (\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"]}

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

@@ -1,5 +1,12 @@
 export declare const StyledSearchForm: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledViewSelector: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledViewSelector: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    required: boolean;
+}, never>;
 export declare const StyledListToolbar: import("styled-components").StyledComponent<"div", 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, {}, 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;
+}, never>;
+export declare const StyledCountMeta: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=ListToolbar.styles.d.ts.map

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":"AASA,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6MA0B7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,iMAkB5B,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,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"}

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

@@ -1,17 +1,18 @@
 import styled, { css } from 'styled-components';
+import Flex from '../Flex';
 import { StyledSearchInput } from '../SearchInput';
-import MenuButton from '../MenuButton';
 import Text, { StyledText } from '../Text';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import { StyledButton } from '../Button';
+import { StyledFormDialog } from '../Dialog/FormDialog';
 export const StyledSearchForm = styled.div `
   ${StyledSearchInput} {
     flex-grow: 1;
     max-width: min(100%, 40ch);
   }
 `;
-export const StyledViewSelector = styled(MenuButton)(({ theme, required }) => {
+export const StyledViewSelector = styled.button(({ theme, required }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { urgent } = theme.base.palette;
     const hitAreaMouse = theme.base['hit-area']['mouse-min'];
@@ -38,18 +39,36 @@ export const StyledViewSelector = styled(MenuButton)(({ theme, required }) => {
   `;
 });
 StyledViewSelector.defaultProps = defaultThemeProp;
-export const StyledListToolbar = styled.div `
-  ${StyledButton} + ${StyledButton} {
-    margin-inline-start: 0;
-  }
-`;
+export const StyledListToolbar = styled.div(({ theme }) => {
+    return css `
+    ${StyledFormDialog} {
+      min-width: min(${theme.base['content-width'].lg}, calc(100% - 2rem));
+      max-width: calc(100vw - 4 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledListToolbar.defaultProps = defaultThemeProp;
+export const StyledListToolbarContent = styled(Flex)(({ theme }) => {
+    return css `
+    ${StyledButton} + ${StyledButton} {
+      margin-inline-start: 0;
+    }
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+  `;
+});
+StyledListToolbarContent.defaultProps = defaultThemeProp;
 export const StyledHeadingText = styled(Text)(({ theme, required }) => {
     const { urgent } = theme.base.palette;
     const hitAreaMouse = theme.base['hit-area']['mouse-min'];
     const hitAreaFinger = theme.base['hit-area']['finger-min'];
     return css `
+    position: relative;
     line-height: ${hitAreaMouse};
     word-break: break-word;
+    ${required &&
+        css `
+      padding-inline-end: calc(1.5 * ${theme.base.spacing});
+    `}
     @media (pointer: coarse) {
       line-height: ${hitAreaFinger};
     }
@@ -58,8 +77,34 @@ export const StyledHeadingText = styled(Text)(({ theme, required }) => {
       content: '\\00a0*';
       vertical-align: top;
       color: ${urgent};
+      position: absolute;
+      inset-inline-end: 0;
+      inset-block-start: 0;
     }
   `;
 });
 StyledHeadingText.defaultProps = defaultThemeProp;
+export const StyledCountMeta = styled(Text)(({ theme }) => {
+    const hitAreaMouse = theme.base['hit-area']['mouse-min'];
+    const hitAreaFinger = theme.base['hit-area']['finger-min'];
+    return css `
+    line-height: ${hitAreaMouse};
+
+    @media (pointer: coarse) {
+      line-height: ${hitAreaFinger};
+    }
+  `;
+});
+StyledCountMeta.defaultProps = defaultThemeProp;
+export const StyledContainer = styled(Flex) `
+  @media (pointer: coarse) {
+    overflow: hidden;
+
+    ${StyledHeadingText}, ${StyledViewSelector} ${StyledText} {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
 //# sourceMappingURL=ListToolbar.styles.js.map

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":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACvF,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,OAAO,GAAG,CAAA;;;MAGN,UAAU;mBACG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;qBACvC,YAAY;;;uBAGV,aAAa;;;;MAI9B,UAAU;iBACC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;;;eAGpC,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IACvC,YAAY,MAAM,YAAY;;;CAGjC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,OAAO,GAAG,CAAA;mBACO,YAAY;;;qBAGV,aAAa;;;iBAGjB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;;;eAG9B,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSearchInput } from '../SearchInput';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\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(MenuButton)(({ 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  ${StyledButton} + ${StyledButton} {\n    margin-inline-start: 0;\n  }\n`;\n\nexport const StyledHeadingText = styled(Text)(({ 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    line-height: ${hitAreaMouse};\n    word-break: break-word;\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    }\n  `;\n});\n\nStyledHeadingText.defaultProps = defaultThemeProp;\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 { 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"]}

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

@@ -0,0 +1,2 @@
+export declare const getListToolbarTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["view-selector", "count", "heading"]>;
+//# sourceMappingURL=ListToolbar.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oHAIvB,CAAC"}

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

@@ -0,0 +1,7 @@
+import { createTestIds } from '../../utils';
+export const getListToolbarTestIds = createTestIds('list-toolbar', [
+    'view-selector',
+    'count',
+    'heading'
+]);
+//# sourceMappingURL=ListToolbar.test-ids.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.test-ids.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE;IACjE,eAAe;IACf,OAAO;IACP,SAAS;CACD,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getListToolbarTestIds = createTestIds('list-toolbar', [\n  'view-selector',\n  'count',\n  'heading'\n] as const);\n"]}