npm - @pega/cosmos-react-core - Versions diffs - 5.0.0-dev.9.2 → 6.0.0 - Mend

@pega/cosmos-react-core 5.0.0-dev.9.2 → 6.0.0

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

Files changed (228) hide show

package/lib/components/Lightbox/Lightbox.test-ids.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const getLightboxTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination"]>;
+export declare const getLightboxTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
 //# sourceMappingURL=Lightbox.test-ids.d.ts.map

package/lib/components/Lightbox/Lightbox.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,~~iKASpB~~,CAAC"}
1	+ {"version":3,"file":"Lightbox.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,qMAWpB,CAAC"}

package/lib/components/Lightbox/Lightbox.test-ids.js CHANGED Viewed

@@ -7,6 +7,8 @@ export const getLightboxTestIds = createTestIds('lightbox', [
     'close',
     'prev',
     'next',
-    'pagination'
+    'pagination',
+    'non-previewable-download',
+    'link'
 ]);
 //# sourceMappingURL=Lightbox.test-ids.js.map

package/lib/components/Lightbox/Lightbox.test-ids.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.test-ids.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE;IAC1D,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAU;IACV,OAAO;IACP,MAAM;IACN,MAAM;IACN,YAAY;~~CACJ~~,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getLightboxTestIds = createTestIds('lightbox', [\n 'content',\n 'name',\n 'metadata',\n 'download',\n 'close',\n 'prev',\n 'next',\n 'pagination'\n] as const);\n"]}
1	+ {"version":3,"file":"Lightbox.test-ids.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,UAAU,EAAE;IAC1D,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAU;IACV,OAAO;IACP,MAAM;IACN,MAAM;IACN,YAAY;IACZ,0BAA0B;IAC1B,MAAM;CACE,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getLightboxTestIds = createTestIds('lightbox', [\n 'content',\n 'name',\n 'metadata',\n 'download',\n 'close',\n 'prev',\n 'next',\n 'pagination',\n 'non-previewable-download',\n 'link'\n] as const);\n"]}

package/lib/components/Lightbox/Lightbox.types.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import type { ReactNode, SyntheticEvent } from 'react';
+import type { ReactNode, Ref, SyntheticEvent } from 'react';
 import type { NoChildrenProp, BaseProps, TestIdProp } from '../../types';
 import type { BackdropProps } from '../Backdrop/Backdrop';
-import type { ImageProps } from '../Image';
+type MediaElement = HTMLImageElement | HTMLObjectElement;
 export interface LightboxProps extends NoChildrenProp, BaseProps, TestIdProp {
     /** A list of compatible content to present in the lightbox. */
     items: LightboxItem[];
@@ -10,12 +10,15 @@ export interface LightboxProps extends NoChildrenProp, BaseProps, TestIdProp {
      * @default 0
      */
     defaultIndex?: number;
-    /** Allow cycling through the items in either direction. */
-    cycle?: true;
+    /**
+     * Allow cycling through the items in either direction.
+     * @default false
+     */
+    cycle?: boolean;
     /** Called when an item's file is loaded. */
-    onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;
+    onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<MediaElement> | Event) => void;
     /** Called when an item's file encounters an error while loading. */
-    onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<HTMLImageElement>) => void;
+    onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<MediaElement> | Event) => void;
     /** Called when the user navigates between items. */
     onNavigate?: (id: LightboxItem['id'], index: number) => void;
     /** Called when a download action is triggered for an item's file. */
@@ -31,12 +34,20 @@ export interface LightboxItem {
     /** The item's name e.g. filename. */
     name: string;
     /** Text to describe the item. */
-    description: ImageProps['alt'];
+    description: string;
     /** URL for the item's binary file. Pass null for when src is not yet available. */
     src: string | null;
+    /** File extension. Use 'url' for link */
+    format: string | undefined;
+    /**
+     * Prop for showing Error state
+     * @default false
+     */
+    error?: boolean;
     /** Additional info about the item. */
     metadata?: ReactNode[];
     /** A ref to the item's underlying element. */
-    ref?: ImageProps['ref'];
+    ref?: Ref<MediaElement>;
 }
+export {};
 //# sourceMappingURL=Lightbox.types.d.ts.map

package/lib/components/Lightbox/Lightbox.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;~~AAEvD~~,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;~~AAC1D~~,~~OAAO,~~KAAK,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~MAAM~~,~~UAAU~~,CAAC;~~AAE3C~~,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS,EAAE,UAAU;IAC1E,+DAA+D;IAC/D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB~~,2DAA2D~~;~~IAC3D~~,KAAK,CAAC,EAAE,~~IAAI~~,CAAC;~~IACb~~,4CAA4C;IAC5C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,~~gBAAgB~~,CAAC,KAAK,IAAI,CAAC;~~IACnF~~,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,~~gBAAgB~~,CAAC,KAAK,IAAI,CAAC;~~IACpF~~,oDAAoD;IACpD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACrD,4DAA4D;IAC5D,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,WAAW,EAAE,~~UAAU~~,CAAC~~,KAAK,CAAC,CAAC~~;~~IAC/B~~,mFAAmF;IACnF,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,~~UAAU~~,CAAC,~~KAAK~~,CAAC,CAAC;CACzB"}
1	+ {"version":3,"file":"Lightbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,KAAK,YAAY,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAEzD,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS,EAAE,UAAU;IAC1E,+DAA+D;IAC/D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;IACvF,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;IACxF,oDAAoD;IACpD,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACrD,4DAA4D;IAC5D,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,yCAAyC;IACzC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;CACzB"}

package/lib/components/Lightbox/Lightbox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.types.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, SyntheticEvent } from 'react';\n\nimport type { NoChildrenProp, BaseProps, TestIdProp } from '../../types';\nimport type { BackdropProps } from '../Backdrop/Backdrop';\~~nimport~~ ~~type~~ { ~~ImageProps~~ } ~~from '../Image'~~;\n\nexport interface LightboxProps extends NoChildrenProp, BaseProps, TestIdProp {\n /** A list of compatible content to present in the lightbox. /\n items: LightboxItem[];\n /\n The index of the item to present on mount.\n * @default 0\n /\n defaultIndex?: number;\n /* Allow cycling through the items in either direction. /\n cycle?: ~~true~~;\n /* Called when an item's file is loaded. /\n onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<~~HTMLImageElement~~>) => void;\n /* Called when an item's file encounters an error while loading. /\n onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<~~HTMLImageElement~~>) => void;\n /* Called when the user navigates between items. /\n onNavigate?: (id: LightboxItem['id'], index: number) => void;\n /* Called when a download action is triggered for an item's file. /\n onItemDownload?: (id: LightboxItem['id']) => void;\n /* Called after the lightbox has transitioned out. /\n onAfterClose?: BackdropProps['onAfterTransitionOut'];\n /* A ref to the underlying root element of the lightbox. /\n ref?: BackdropProps['ref'];\n}\n\nexport interface LightboxItem {\n /* A unique identifier for the item. /\n id: string;\n /* The item's name e.g. filename. /\n name: string;\n /* Text to describe the item. /\n description: ~~ImageProps['alt']~~;\n /* URL for the item's binary file. Pass null for when src is not yet available. /\n src: string \| null;\n /* Additional info about the item. /\n metadata?: ReactNode[];\n /* A ref to the item's underlying element. */\n ref?: ~~ImageProps['ref'];\~~n}\n"]}
1	+ {"version":3,"file":"Lightbox.types.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, SyntheticEvent } from 'react';\n\nimport type { NoChildrenProp, BaseProps, TestIdProp } from '../../types';\nimport type { BackdropProps } from '../Backdrop/Backdrop';\n\ntype MediaElement = HTMLImageElement \| HTMLObjectElement;\n\nexport interface LightboxProps extends NoChildrenProp, BaseProps, TestIdProp {\n /** A list of compatible content to present in the lightbox. /\n items: LightboxItem[];\n /\n The index of the item to present on mount.\n * @default 0\n /\n defaultIndex?: number;\n /\n Allow cycling through the items in either direction.\n * @default false\n /\n cycle?: boolean;\n /* Called when an item's file is loaded. /\n onItemLoad?: (id: LightboxItem['id'], e: SyntheticEvent<MediaElement> \| Event) => void;\n /* Called when an item's file encounters an error while loading. /\n onItemError?: (id: LightboxItem['id'], e: SyntheticEvent<MediaElement> \| Event) => void;\n /* Called when the user navigates between items. /\n onNavigate?: (id: LightboxItem['id'], index: number) => void;\n /* Called when a download action is triggered for an item's file. /\n onItemDownload?: (id: LightboxItem['id']) => void;\n /* Called after the lightbox has transitioned out. /\n onAfterClose?: BackdropProps['onAfterTransitionOut'];\n /* A ref to the underlying root element of the lightbox. /\n ref?: BackdropProps['ref'];\n}\n\nexport interface LightboxItem {\n /* A unique identifier for the item. /\n id: string;\n /* The item's name e.g. filename. /\n name: string;\n /* Text to describe the item. /\n description: string;\n /* URL for the item's binary file. Pass null for when src is not yet available. /\n src: string \| null;\n /* File extension. Use 'url' for link /\n format: string \| undefined;\n /\n Prop for showing Error state\n * @default false\n /\n error?: boolean;\n /* Additional info about the item. /\n metadata?: ReactNode[];\n /* A ref to the item's underlying element. */\n ref?: Ref<MediaElement>;\n}\n"]}

package/lib/components/ListToolbar/ListToolbar.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { ListToolbarProps } from './ListToolbar.types';
 declare const _default: FunctionComponent<ListToolbarProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["view-selector", "count", "heading"]>;
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["view-selector", "count", "heading", "info"]>;
 };
 export default _default;
 //# sourceMappingURL=ListToolbar.d.ts.map

package/lib/components/ListToolbar/ListToolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA8C,MAAM,OAAO,CAAC;~~AAI3F~~,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAmCxD~~,OAAO,KAAK,EACV,gBAAgB,EAMjB,MAAM,qBAAqB,CAAC;;;;~~AA6Y7B~~,wBAA+D"}
1	+ {"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAuCxD,OAAO,KAAK,EACV,gBAAgB,EAMjB,MAAM,qBAAqB,CAAC;;;;AA6a7B,wBAA+D"}

package/lib/components/ListToolbar/ListToolbar.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 import Actions from '../Actions';
 import Button from '../Button';
-import { useBreakpoint, useConfiguration, useConsolidatedRef, useEscape, useI18n, useTestIds } from '../../hooks';
+import { useBreakpoint, useConfiguration, useConsolidatedRef, useEscape, useI18n, useTestIds, useUID } from '../../hooks';
 import Flex from '../Flex';
 import SearchInput from '../SearchInput';
 import Icon, { registerIcon } from '../Icon';
@@ -17,7 +18,7 @@ import MenuButton from '../MenuButton';
 import Avatar from '../Avatar';
 import AdditionalInfo from '../AdditionalInfo';
 import PresetMenuPopover from './PresetMenuPopover';
-import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent, StyledListToolbarDialog } from './ListToolbar.styles';
+import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer, StyledListToolbarContent, StyledListToolbarDialog, StyledErrorIcon, StyledInfo, StyledSearchContainer } from './ListToolbar.styles';
 import helpers from './helpers';
 import { getListToolbarTestIds } from './ListToolbar.test-ids';
 registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
@@ -41,13 +42,13 @@ const generateViewName = (view, texts, options) => {
     return `${view.text} ${view.id === options.defaultId ? `(${texts.default})` : ''} ${view.id === options.appDefaultId ? `(${texts.appDefault})` : ''}`;
 };
 const ListToolbar = forwardRef(function ListToolbar({ testId, name, headingTag = 'h3', viewSelector, formControlProps, createNew, search, count, additionalActions, filter, sort, group, actions, actionsButtonRef, ...restProps }, ref) {
+    const uid = useUID();
     const t = useI18n();
     const testIds = useTestIds(testId, getListToolbarTestIds);
-    const isMediumOrAbove = useBreakpoint('md');
+    const isSmallOrAbove = useBreakpoint('sm');
     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 = () => {
@@ -70,17 +71,21 @@ const ListToolbar = forwardRef(function ListToolbar({ testId, name, headingTag =
             return null;
         const text = createNew.label ?? t('create_new');
         return (_jsx(Button, { variant: 'simple', icon: true, label: text, "aria-label": text, onClick: createNew.onClick, children: _jsx(Icon, { name: 'plus' }) }));
-    }, [t, createNew, isMediumOrAbove]);
+    }, [t, createNew, isSmallOrAbove]);
     useEscape(onSearchEscape, searchInputRef);
-    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 searchInput = useMemo(() => (_jsx(SearchInput, { ...search, onSearchSubmit: (value) => {
+            search?.onSearchSubmit?.(value);
+            onSearchEscape();
+        }, onClick: (e) => {
+            e.preventDefault();
+        }, onBlur: () => {
+            if (!search?.value) {
+                setIsSearchOpen(false);
+            }
+        }, ref: searchInputRef })), [search, onSearchEscape]);
     const searchLabel = t('search');
     const expandableSearch = useMemo(() => {
-        return isSearchOpen ? (searchInputWrapper) : (_jsx(Button, { variant: 'simple', icon: true, label: searchLabel, onClick: () => {
+        return isSearchOpen ? (searchInput) : (_jsx(Button, { variant: 'simple', icon: true, label: searchLabel, onClick: () => {
                 setIsSearchOpen(true);
                 setTimeout(() => searchInputRef.current?.focus());
             }, onKeyDown: (e) => {
@@ -92,7 +97,7 @@ const ListToolbar = forwardRef(function ListToolbar({ testId, name, headingTag =
                     });
                 }
             }, ref: searchButtonRef, children: _jsx(Icon, { name: 'search' }) }));
-    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInputWrapper]);
+    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInput]);
     let queryOptionPopover = null;
     if (currentQueryOptionId) {
         const queryOptionProps = { filter, sort, group }[currentQueryOptionId];
@@ -162,46 +167,51 @@ const ListToolbar = forwardRef(function ListToolbar({ testId, name, headingTag =
             labelText = `${name}: ${selectedViewName}`;
         }
     }
-    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: {
+    return (_jsxs(Flex, { "data-testid": testIds.root, container: true, ...restProps, as: StyledListToolbar, ref: ref, children: [_jsxs(StyledListToolbarContent, { container: { direction: 'column' }, ref: toolbarContentRef, item: { grow: 1 }, children: [_jsxs(Flex, { container: {
+                            alignItems: 'start',
+                            justify: 'between',
+                            gap: 0.5
+                        }, children: [_jsxs(StyledContainer, { container: {
                                     alignItems: 'center',
-                                    gap: 1,
-                                    wrap: 'wrap'
-                                }, children: [_jsx(StyledHeadingText, { "data-testid": testIds.heading, variant: headingTag, required: 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')) {
+                                    gap: 1
+                                }, children: [_jsxs(StyledHeadingText, { "data-testid": testIds.heading, variant: headingTag, required: formControlProps?.required, "aria-describedby": formControlProps?.info ? `${uid}-info` : undefined, children: [formControlProps?.info && formControlProps.status === 'error' && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(VisuallyHiddenText, { children: ` ${t('error')} ` })] })), !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 {
-                                                            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
-                                                                };
-                                                            })
+                                                            ...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
                                                         };
-                                                    }
-                                                    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 })) }), formControlProps?.additionalInfo && (_jsx(AdditionalInfo, { heading: formControlProps.additionalInfo.heading, children: formControlProps.additionalInfo.content })), isMediumOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [isMediumOrAbove && additionalActions, search && isMediumOrAbove && expandableSearch, isMediumOrAbove && createNewButton, isMediumOrAbove && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restActionProps }) => ({
-                                                visual: icon ? _jsx(Icon, { name: icon }) : undefined,
-                                                ...restActionProps
-                                            })), menuAt: 1, ref: consolidatedActionsButtonRef }) })), !isMediumOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] })] }), !isMediumOrAbove && (_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,
-                                        ...restActionProps
-                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] }))] }), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
+                                                    }),
+                                                    onItemClick: viewSelector.onViewSelect
+                                                }, testId: testIds.viewSelector }))] }), formControlProps?.additionalInfo && (_jsx(AdditionalInfo, { heading: formControlProps.additionalInfo.heading, contextualLabel: labelText, children: formControlProps.additionalInfo.content })), isSmallOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [isSmallOrAbove && additionalActions, search && isSmallOrAbove && expandableSearch, isSmallOrAbove && createNewButton, isSmallOrAbove && basicModeActions && (_jsx(Actions, { items: basicModeActions.map(({ icon, ...restActionProps }) => ({
+                                            ...restActionProps,
+                                            visual: icon && _jsx(Icon, { name: icon })
+                                        })), menuAt: 1, ref: consolidatedActionsButtonRef })), !isSmallOrAbove && count && _jsx(CountMeta, { "data-testid": testIds.count, count: count })] })] }), !isSmallOrAbove && (_jsxs(_Fragment, { children: [!!count?.selected && additionalActions, _jsxs(StyledSearchContainer, { container: { alignItems: 'start', justify: 'between', gap: 1 }, children: [_jsx(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 1 }, item: { grow: 1 }, children: search && searchInput }), createNewButton, basicModeActions && (_jsx(Actions, { items: basicModeActions.map(({ icon, ...restActionProps }) => ({
+                                            ...restActionProps,
+                                            visual: icon && _jsx(Icon, { name: icon })
+                                        })), menuAt: 1, ref: consolidatedActionsButtonRef }))] })] })), formControlProps?.info && (_jsx(StyledInfo, { role: formControlProps.status === 'error' || formControlProps.status === 'warning'
+                            ? 'alert'
+                            : undefined, id: `${uid}-info`, "data-testid": testIds.info, status: formControlProps.status, children: formControlProps.info }))] }), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
 });
 export default withTestIds(ListToolbar, getListToolbarTestIds);
 //# sourceMappingURL=ListToolbar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, KeyboardEvent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport Actions from '../Actions';\nimport Button from '../Button';\nimport type { 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';\nimport AdditionalInfo from '../AdditionalInfo';\n\nimport PresetMenuPopover from './PresetMenuPopover';\nimport type { 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 isMediumOrAbove = useBreakpoint('md');\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 = () => {\n if (!search?.value) {\n setIsSearchOpen(false);\n }\n setTimeout(() => searchButtonRef.current?.focus());\n };\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, isMediumOrAbove]);\n\n useEscape(onSearchEscape, searchInputRef);\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 expandableSearch = useMemo(() => {\n return isSearchOpen ? (\n searchInputWrapper\n ) : (\n <Button\n variant='simple'\n icon\n 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 ref={searchButtonRef}\n >\n <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 labelText = name;\n\n if (viewSelector) {\n const viewItems = helpers.getViews(viewSelector.views);\n\n if (viewItems.length > 1) {\n const selectedViewName =\n helpers.getSelectedView(viewSelector.views)?.text ?? viewItems[0].text;\n\n labelText = `${name}: ${selectedViewName}`;\n }\n }\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: 'center',\n gap: 1,\n wrap: 'wrap'\n }}\n >\n <StyledHeadingText\n data-testid={testIds.heading}\n variant={headingTag}\n required={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 {formControlProps?.additionalInfo && (\n <AdditionalInfo heading={formControlProps.additionalInfo.heading}>\n {formControlProps.additionalInfo.content}\n </AdditionalInfo>\n )}\n {isMediumOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n </StyledContainer>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {isMediumOrAbove && additionalActions}\n {search && isMediumOrAbove && expandableSearch}\n {isMediumOrAbove && createNewButton}\n {isMediumOrAbove && 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 {!isMediumOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n </Flex>\n </Flex>\n {!isMediumOrAbove && (\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"]}
1	+ {"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtF,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,kCAAkC,CAAC;AACpE,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC;AAClD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,wBAAwB,EACxB,uBAAuB,EACvB,eAAe,EACf,UAAU,EACV,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAS9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,YAAY,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAEvE,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,GAAG,SAAS,EACqD,EAAE,EAAE;IACrE,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,mBAAmB,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE;QACzD,MAAM;QACN,OAAO,EAAE;YACP,WAAW,EAAE,IAAI;SAClB;KACF,CAAC,CAAC;IACH,OAAO,CACL,KAAC,eAAe,IAAC,OAAO,EAAC,WAAW,KAAK,SAAS,YAC/C,KAAK,CAAC,QAAQ;YACb,CAAC,CAAC,CAAC,CACC,gBAAgB,EAChB,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,EAC1E,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAC1B;YACH,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS;gBACzB,CAAC,CACC,eAAe,EACf,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,EACtE;oBACE,KAAK,EAAE,KAAK,CAAC,KAAK;iBACnB,CACF,GACW,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CACvB,IAAe,EACf,KAA8C,EAC9C,OAGC,EACD,EAAE;IACF,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,IAC9E,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAC/D,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,MAAM,EACN,IAAI,EACJ,UAAU,GAAG,IAAI,EACjB,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,MAAM,EACN,KAAK,EACL,iBAAiB,EACjB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC1E,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAElE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE;YAClB,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;QACD,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,KAAK,EAAE;YACjB,eAAe,CAAC,IAAI,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpB,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAuB,IAAI,CAAC,CAAC;IAC7F,MAAM,wBAAwB,GAAG,MAAM,EAAqB,CAAC;IAE7D,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC3D,QAAQ,EAAoD,CAAC;IAC/D,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,SAAS,EAAE,OAAO;YAAE,OAAO,IAAI,CAAC;QACrC,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;QAEhD,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,KAAK,EAAE,IAAI,gBAAc,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,YACrF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CACJ,KAAC,WAAW,OACN,MAAM,EACV,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;YAChC,MAAM,EAAE,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC;YAChC,cAAc,EAAE,CAAC;QACnB,CAAC,EACD,OAAO,EAAE,CAAC,CAA+B,EAAE,EAAE;YAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE;gBAClB,eAAe,CAAC,KAAK,CAAC,CAAC;aACxB;QACH,CAAC,EACD,GAAG,EAAE,cAAc,GACnB,CACH,EACD,CAAC,MAAM,EAAE,cAAc,CAAC,CACzB,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,YAAY,CAAC,CAAC,CAAC,CACpB,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YACpD,CAAC,EACD,SAAS,EAAE,CAAC,CAA6B,EAAE,EAAE;gBAC3C,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;oBAC/E,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtB,UAAU,CAAC,GAAG,EAAE;wBACd,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAChC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;oBACnC,CAAC,CAAC,CAAC;iBACJ;YACH,CAAC,EACD,GAAG,EAAE,eAAe,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACf,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9D,IAAI,kBAAkB,GAAG,IAAI,CAAC;IAC9B,IAAI,oBAAoB,EAAE;QACxB,MAAM,gBAAgB,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,oBAAoB,CAAC,CAAC;QACvE,IACE,gBAAgB;YAChB,OAAO,CAAC,gBAAgB,EAAE,UAAU,CAAC;YACrC,wBAAwB,CAAC,OAAO,EAChC;YACA,kBAAkB,GAAG,CACnB,KAAC,uBAAuB,IACtB,MAAM,EAAE,wBAAwB,CAAC,OAAO,EACxC,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAChC,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,GAAG,EAAE;oBACb,IAAI,gBAAgB,CAAC,QAAQ,EAAE,KAAK,KAAK;wBAAE,OAAO;oBAClD,uBAAuB,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;oBACb,IAAI,gBAAgB,CAAC,QAAQ,EAAE,KAAK,KAAK;wBAAE,OAAO;oBAClD,uBAAuB,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC,YAED,KAAC,gBAAgB,CAAC,QAAQ,KAAG,GACL,CAC3B,CAAC;SACH;KACF;IAED,MAAM,oBAAoB,GAAG,WAAW,CACtC,CACE,EAA+B,EAC/B,IAAY,EACZ,gBAA0D,EAC1D,EAAE;QACF,OAAO;YACL,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC;YACX,EAAE;YACF,IAAI;YACJ,KAAK,EAAE,gBAAgB,CAAC,KAAK;YAC7B,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,OAAO,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE;oBACzC,uBAAuB,CAAC,EAAE,CAAC,CAAC;oBAC5B,wBAAwB,CAAC,OAAO,GAAG,4BAA4B,CAAC,OAAO,IAAI,SAAS,CAAC;iBACtF;gBACD,IAAI,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAE;oBACtC,2BAA2B,CAAC;wBAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;wBACd,IAAI,EAAE;4BACJ,IAAI,EAAE,gBAAgB,CAAC,IAAI;4BAC3B,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;4BAC5E,WAAW,EAAE,gBAAgB,CAAC,WAAW;yBAC1C;qBACF,CAAC,CAAC;oBACH,uBAAuB,CAAC,IAAI,CAAC,CAAC;iBAC/B;YACH,CAAC;SACF,CAAC;IACJ,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,YAAY,GAAa,EAAE,CAAC;QAChC,IAAI,MAAM,EAAE;YACV,MAAM,YAAY,GAAW,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC9E,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACjC;QACD,IAAI,IAAI,EAAE;YACR,MAAM,UAAU,GAAW,oBAAoB,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;YAC/E,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC/B;QACD,IAAI,KAAK,EAAE;YACT,MAAM,WAAW,GAAW,oBAAoB,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;YACxE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAChC;QACD,IAAI,OAAO,EAAE;YACX,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SAC7C;QAED,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEzD,IAAI,SAAS,GAAG,IAAI,CAAC;IAErB,IAAI,YAAY,EAAE;QAChB,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAEvD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,MAAM,gBAAgB,GACpB,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEzE,SAAS,GAAG,GAAG,IAAI,KAAK,gBAAgB,EAAE,CAAC;SAC5C;KACF;IAED,OAAO,CACL,MAAC,IAAI,mBAAc,OAAO,CAAC,IAAI,EAAE,SAAS,WAAK,SAAS,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,wBAAwB,IACvB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEjB,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,UAAU,EAAE,OAAO;4BACnB,OAAO,EAAE,SAAS;4BAClB,GAAG,EAAE,GAAG;yBACT,aAED,MAAC,eAAe,IACd,SAAS,EAAE;oCACT,UAAU,EAAE,QAAQ;oCACpB,GAAG,EAAE,CAAC;iCACP,aAED,MAAC,iBAAiB,mBACH,OAAO,CAAC,OAAO,EAC5B,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,sBAClB,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,aAEnE,gBAAgB,EAAE,IAAI,IAAI,gBAAgB,CAAC,MAAM,KAAK,OAAO,IAAI,CAChE,8BACE,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,EACrC,KAAC,kBAAkB,cAAE,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,GAAsB,IAC3D,CACJ,EACA,CAAC,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACjD,SAAS,CACV,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,SAAS,EACf,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE;oDACJ,IAAI,EAAE,eAAe;oDACrB,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wDACnC,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;4DAC1B,OAAO;gEACL,EAAE,EAAE,IAAI,CAAC,IAAI;gEACb,KAAK,EAAE,IAAI,CAAC,IAAI;gEAChB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oEAClC,OAAO;wEACL,GAAG,WAAW;wEACd,OAAO,EAAE,gBAAgB,CACvB,WAAW,EACX,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,EACvD;4EACE,SAAS,EAAE,YAAY,CAAC,SAAS;4EACjC,YAAY,EAAE,YAAY,CAAC,YAAY;yEACxC,CACF;wEACD,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,KAAC,MAAM,OAAK,WAAW,CAAC,MAAM,GAAI,CACnC,CAAC,CAAC,CAAC,SAAS;qEACd,CAAC;gEACJ,CAAC,CAAC;6DACH,CAAC;yDACH;wDAED,OAAO;4DACL,GAAG,IAAI;4DACP,OAAO,EAAE,gBAAgB,CACvB,IAAI,EACJ,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,EACvD;gEACE,SAAS,EAAE,YAAY,CAAC,SAAS;gEACjC,YAAY,EAAE,YAAY,CAAC,YAAY;6DACxC,CACF;4DACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,OAAK,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,SAAS;yDAC9D,CAAC;oDACJ,CAAC,CAAC;oDACF,WAAW,EAAE,YAAY,CAAC,YAAY;iDACvC,EACD,MAAM,EAAE,OAAO,CAAC,YAAY,GAC5B,CACH,IACiB,EACnB,gBAAgB,EAAE,cAAc,IAAI,CACnC,KAAC,cAAc,IACb,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,OAAO,EAChD,eAAe,EAAE,SAAS,YAEzB,gBAAgB,CAAC,cAAc,CAAC,OAAO,GACzB,CAClB,EACA,cAAc,IAAI,KAAK,IAAI,KAAC,SAAS,mBAAc,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,IACnE,EAClB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,cAAc,IAAI,iBAAiB,EACnC,MAAM,IAAI,cAAc,IAAI,gBAAgB,EAC5C,cAAc,IAAI,eAAe,EACjC,cAAc,IAAI,gBAAgB,IAAI,CACrC,KAAC,OAAO,IACN,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;4CAC7D,GAAG,eAAe;4CAClB,MAAM,EAAE,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI;yCACrC,CAAC,CAAC,EACH,MAAM,EAAE,CAAC,EACT,GAAG,EAAE,4BAA4B,GACjC,CACH,EACA,CAAC,cAAc,IAAI,KAAK,IAAI,KAAC,SAAS,mBAAc,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,IAC/E,IACF,EACN,CAAC,cAAc,IAAI,CAClB,8BACG,CAAC,CAAC,KAAK,EAAE,QAAQ,IAAI,iBAAiB,EACvC,MAAC,qBAAqB,IACpB,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,aAE9D,KAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EACzD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAEhB,MAAM,IAAI,WAAW,GACjB,EACN,eAAe,EACf,gBAAgB,IAAI,CACnB,KAAC,OAAO,IACN,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;4CAC7D,GAAG,eAAe;4CAClB,MAAM,EAAE,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI;yCACrC,CAAC,CAAC,EACH,MAAM,EAAE,CAAC,EACT,GAAG,EAAE,4BAA4B,GACjC,CACH,IACqB,IACvB,CACJ,EACA,gBAAgB,EAAE,IAAI,IAAI,CACzB,KAAC,UAAU,IACT,IAAI,EACF,gBAAgB,CAAC,MAAM,KAAK,OAAO,IAAI,gBAAgB,CAAC,MAAM,KAAK,SAAS;4BAC1E,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,SAAS,EAEf,EAAE,EAAE,GAAG,GAAG,OAAO,iBACJ,OAAO,CAAC,IAAI,EACzB,MAAM,EAAE,gBAAgB,CAAC,MAAM,YAE9B,gBAAgB,CAAC,IAAI,GACX,CACd,IACwB,EAE1B,kBAAkB,EAEnB,KAAC,iBAAiB,IAChB,SAAS,EAAE,4BAA4B,EACvC,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAC1C,IAAI,EAAE,wBAAwB,EAAE,IAAI,EACpC,MAAM,EAAE,oBAAoB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,GAC7C,IACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, KeyboardEvent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Actions from '../Actions';\nimport Button from '../Button';\nimport type { Action, ForwardProps } from '../../types';\nimport {\n useBreakpoint,\n useConfiguration,\n useConsolidatedRef,\n useEscape,\n useI18n,\n useTestIds,\n useUID\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';\nimport AdditionalInfo from '../AdditionalInfo';\n\nimport PresetMenuPopover from './PresetMenuPopover';\nimport type { PresetMenuPopoverProps } from './PresetMenuPopover';\nimport {\n StyledViewSelector,\n StyledSearchForm,\n StyledListToolbar,\n StyledHeadingText,\n StyledCountMeta,\n StyledContainer,\n StyledListToolbarContent,\n StyledListToolbarDialog,\n StyledErrorIcon,\n StyledInfo,\n StyledSearchContainer\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 uid = useUID();\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 searchButtonRef = useRef<HTMLButtonElement>(null);\n const [isSearchOpen, setIsSearchOpen] = useState(!!search?.value);\n\n const onSearchEscape = () => {\n if (!search?.value) {\n setIsSearchOpen(false);\n }\n setTimeout(() => searchButtonRef.current?.focus());\n };\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, searchInputRef);\n const searchInput = useMemo(\n () => (\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 onBlur={() => {\n if (!search?.value) {\n setIsSearchOpen(false);\n }\n }}\n ref={searchInputRef}\n />\n ),\n [search, onSearchEscape]\n );\n\n const searchLabel = t('search');\n const expandableSearch = useMemo(() => {\n return isSearchOpen ? (\n searchInput\n ) : (\n <Button\n variant='simple'\n icon\n 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 ref={searchButtonRef}\n >\n <Icon name='search' />\n </Button>\n );\n }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInput]);\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 labelText = name;\n\n if (viewSelector) {\n const viewItems = helpers.getViews(viewSelector.views);\n\n if (viewItems.length > 1) {\n const selectedViewName =\n helpers.getSelectedView(viewSelector.views)?.text ?? viewItems[0].text;\n\n labelText = `${name}: ${selectedViewName}`;\n }\n }\n\n return (\n <Flex data-testid={testIds.root} container {...restProps} as={StyledListToolbar} ref={ref}>\n <StyledListToolbarContent\n container={{ direction: 'column' }}\n ref={toolbarContentRef}\n item={{ grow: 1 }}\n >\n <Flex\n container={{\n alignItems: 'start',\n justify: 'between',\n gap: 0.5\n }}\n >\n <StyledContainer\n container={{\n alignItems: 'center',\n gap: 1\n }}\n >\n <StyledHeadingText\n data-testid={testIds.heading}\n variant={headingTag}\n required={formControlProps?.required}\n aria-describedby={formControlProps?.info ? `${uid}-info` : undefined}\n >\n {formControlProps?.info && formControlProps.status === 'error' && (\n <>\n <StyledErrorIcon name='warn-solid' />\n <VisuallyHiddenText>{` ${t('error')} `}</VisuallyHiddenText>\n </>\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 {formControlProps?.additionalInfo && (\n <AdditionalInfo\n heading={formControlProps.additionalInfo.heading}\n contextualLabel={labelText}\n >\n {formControlProps.additionalInfo.content}\n </AdditionalInfo>\n )}\n {isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n </StyledContainer>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {isSmallOrAbove && additionalActions}\n {search && isSmallOrAbove && expandableSearch}\n {isSmallOrAbove && createNewButton}\n {isSmallOrAbove && basicModeActions && (\n <Actions\n items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n ...restActionProps,\n visual: icon && <Icon name={icon} />\n }))}\n menuAt={1}\n ref={consolidatedActionsButtonRef}\n />\n )}\n {!isSmallOrAbove && count && <CountMeta data-testid={testIds.count} count={count} />}\n </Flex>\n </Flex>\n {!isSmallOrAbove && (\n <>\n {!!count?.selected && additionalActions}\n <StyledSearchContainer\n container={{ alignItems: 'start', justify: 'between', gap: 1 }}\n >\n <Flex\n as={StyledSearchForm}\n container={{ alignItems: 'center', wrap: 'wrap', gap: 1 }}\n item={{ grow: 1 }}\n >\n {search && searchInput}\n </Flex>\n {createNewButton}\n {basicModeActions && (\n <Actions\n items={basicModeActions.map(({ icon, ...restActionProps }) => ({\n ...restActionProps,\n visual: icon && <Icon name={icon} />\n }))}\n menuAt={1}\n ref={consolidatedActionsButtonRef}\n />\n )}\n </StyledSearchContainer>\n </>\n )}\n {formControlProps?.info && (\n <StyledInfo\n role={\n formControlProps.status === 'error' \|\| formControlProps.status === 'warning'\n ? 'alert'\n : undefined\n }\n id={`${uid}-info`}\n data-testid={testIds.info}\n status={formControlProps.status}\n >\n {formControlProps.info}\n </StyledInfo>\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 CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { FormControlProps } from '../FormControl';
 export declare const StyledSearchForm: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledViewSelector: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     required: boolean;
@@ -5,9 +6,12 @@ export declare const StyledViewSelector: import("styled-components").StyledCompo
 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" | "content" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "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 StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, 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>;
+export declare const StyledInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
+export declare const StyledSearchContainer: 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"~~AAWA~~,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;SA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAI9C,eAAO,MAAM,uBAAuB,uuJAKlC,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"}
1	+ {"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;cAA6B,OAAO;SA0BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAI9C,eAAO,MAAM,uBAAuB,uuJAKlC,CAAC;AAIH,eAAO,MAAM,wBAAwB,iMAQnC,CAAC;AAIH,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAgC5B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAW1B,CAAC;AAIH,eAAO,MAAM,eAAe,iMAc1B,CAAC;AAIH,eAAO,MAAM,UAAU,uIAatB,CAAC;AAIF,eAAO,MAAM,qBAAqB,iMASjC,CAAC"}

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

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import Icon from '../Icon';
 import Flex from '../Flex';
 import { StyledSearchInput } from '../SearchInput';
 import Text, { StyledText } from '../Text';
@@ -54,9 +55,14 @@ export const StyledListToolbarContent = styled(Flex)(({ theme }) => {
       margin-inline-start: 0;
     }
     border-radius: calc(0.25 * ${theme.base['border-radius']});
+    margin-block-start: ${theme.base.spacing};
   `;
 });
 StyledListToolbarContent.defaultProps = defaultThemeProp;
+export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
+    color: ${theme.base.palette.urgent};
+  `);
+StyledErrorIcon.defaultProps = defaultThemeProp;
 export const StyledHeadingText = styled(Text)(({ theme, required }) => {
     const { urgent } = theme.base.palette;
     const hitAreaMouse = theme.base['hit-area']['mouse-min'];
@@ -65,6 +71,8 @@ export const StyledHeadingText = styled(Text)(({ theme, required }) => {
     position: relative;
     line-height: ${hitAreaMouse};
     word-break: break-word;
+    display: flex;
+    align-items: center;
     ${required &&
         css `
       padding-inline-end: calc(1.5 * ${theme.base.spacing});
@@ -81,6 +89,10 @@ export const StyledHeadingText = styled(Text)(({ theme, required }) => {
       inset-inline-end: 0;
       inset-block-start: 0;
     }
+    ${StyledErrorIcon} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+    }
   `;
 });
 StyledHeadingText.defaultProps = defaultThemeProp;
@@ -96,15 +108,36 @@ export const StyledCountMeta = styled(Text)(({ theme }) => {
   `;
 });
 StyledCountMeta.defaultProps = defaultThemeProp;
-export const StyledContainer = styled(Flex) `
-  @media (pointer: coarse) {
-    overflow: hidden;
+export const StyledContainer = styled(Flex)(({ theme }) => {
+    return css `
+    margin-block-end: ${theme.base.spacing};
-    ${StyledHeadingText}, ${StyledViewSelector} ${StyledText} {
-      white-space: nowrap;
+    @media (pointer: coarse) {
       overflow: hidden;
-      text-overflow: ellipsis;
+      ${StyledHeadingText}, ${StyledViewSelector} ${StyledText} {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
-  }
-`;
+  `;
+});
+StyledContainer.defaultProps = defaultThemeProp;
+export const StyledInfo = styled.div(({ status, theme: { components: { 'form-field': formField } } }) => css `
+    ${status &&
+    formField[status] &&
+    css `
+      color: ${formField[status]['status-color']};
+    `}
+  `);
+StyledInfo.defaultProps = defaultThemeProp;
+export const StyledSearchContainer = styled(Flex)(({ theme }) => css `
+      margin-block: ${theme.base.spacing};
+      ${StyledSearchInput} {
+        max-width: 100%;
+      }
+    `);
+StyledSearchContainer.defaultProps = defaultThemeProp;
 //# sourceMappingURL=ListToolbar.styles.js.map