@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/README.md

@@ -8,7 +8,7 @@ Cosmos is a visual design system and UI component collection. Its goal is to emp
 
 The recommended approach for using Cosmos is individual component imports to bundle with a method of your choosing.
 
-```javascript
+```tsx
 import ReactDOM from 'react-dom';
 import { SomeComponent } from '@pega/cosmos-react-core';
 
@@ -70,8 +70,8 @@ This cmd will generate a directory at /packages/cosmos-core/components/YourCompo
 
 Inside **`YourComponent.tsx`** will be some initial boilerplate:
 
-```javascript
-import React, { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';
+```ts
+import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';
 import styled from 'styled-components';
 
 import { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';
@@ -98,9 +98,7 @@ export default YourComponent;
 
 The **`YourComponent.stories.tsx`** file will provide a hot reloading dev environment in Storybook:
 
-```javascript
-import React from 'react';
-
+```tsx
 import YourComponent from './YourComponent';
 
 // These are settings that storybook will use to render your component's stories

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnE,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA6C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnE,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA6C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Actions/Actions.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { useI18n } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
@@ -8,14 +9,14 @@ const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true }, ref) => {
     if (!items || items.length === 0) {
         return null;
     }
-    return items.length >= menuAt ? (React.createElement(MenuButton, { ref: ref, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
+    return items.length >= menuAt ? (_jsx(MenuButton, { ref: ref, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
             items: items.map(({ text, ...restProps }) => ({
                 primary: text,
                 ...restProps
             }))
-        } })) : (React.createElement(React.Fragment, null, items.map(({ id, icon, text, onClick, ...restProps }) => {
-        return (React.createElement(Button, { key: id, ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick(id, event), title: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps }, icon && iconOnly ? React.createElement(Icon, { name: icon }) : text));
-    })));
+        } }, void 0)) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
+            return (_jsx(Button, { ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }, void 0) : text }, id));
+        }) }, void 0));
 });
 export default Actions;
 //# sourceMappingURL=Actions.js.map

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAWvC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,0CACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;QACvD,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,IAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,CACxC,CACV,CAAC;IACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import React, { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              title={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAWvC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,WACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,CAAC,CAAC,CAAC,IAAI,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,WACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}

package/lib/components/AppShell/AppHeader.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../types';
+import { AppHeaderProps } from './AppShell.types';
+declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
+export default AppHeader;
+//# sourceMappingURL=AppHeader.d.ts.map

package/lib/components/AppShell/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAM7E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAuE/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import Flex from '../Flex';
+import Image from '../Image';
+import SearchInput from '../SearchInput';
+import { useBreakpoint, useFocusWithin } from '../../hooks';
+import AppShellOperator from './Operator';
+import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppShell.styles';
+const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, operator, searchInput, searchLabel }, ref) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const searchRef = useRef(null);
+    const [searchFocused, setSearchFocused] = useState(false);
+    useFocusWithin([searchRef], setSearchFocused);
+    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove && searchFocused, ref: ref, children: [_jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: href ? 'a' : 'div', href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }, void 0), (isMediumOrAbove || !searchFocused) && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { children: appName }, void 0), _jsx(StyledAppHeaderText, { variant: 'secondary', children: portalName }, void 0)] }, void 0))] }, void 0) }, void 0), searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: searchRef, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...searchInput }, void 0) }, void 0)) : (_jsx(StyledAppHeaderSpacer, {}, void 0)), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar }, void 0)] }, void 0));
+});
+export default AppHeader;
+//# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI5D,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,SAAS,GAAqD,UAAU,CAC5E,CACE,EACE,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACI,EACjB,GAAiB,EACjB,EAAE;IACF,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,cAAc,CAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,SAAS,EAAE,CAAC,eAAe,IAAI,aAAa,EAC5C,GAAG,EAAE,GAAG,aAER,KAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,YAAY,YAC5C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACzD,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,aAEd,KAAC,KAAK,IAAC,GAAG,EAAE,YAAY,IAAI,QAAQ,EAAE,GAAG,EAAC,EAAE,iBAAa,MAAM,WAAG,EACjE,CAAC,eAAe,IAAI,CAAC,aAAa,CAAC,IAAI,CACtC,8BACE,KAAC,mBAAmB,cAAE,OAAO,WAAuB,EACpD,KAAC,mBAAmB,IAAC,OAAO,EAAC,WAAW,YAAE,UAAU,WAAuB,YAC1E,CACJ,YACI,WACa,EAErB,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,yBAAyB,IACxB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACD,WAAW,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAEhC,KAAC,WAAW,OAAK,WAAW,WAAI,WACN,CAC7B,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,aAAG,CAC1B,EAED,KAAC,gBAAgB,IACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAErC,QAAQ,CAAC,MAAM,WACC,YACd,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef, useState } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useFocusWithin } from '../../hooks';\nimport { ForwardProps } from '../../types';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppShell.styles';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      appName,\n      fullImageSrc,\n      imageSrc,\n      href,\n      onClick,\n      portalName,\n      target,\n      operator,\n      searchInput,\n      searchLabel\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const searchRef = useRef(null);\n    const [searchFocused, setSearchFocused] = useState(false);\n\n    useFocusWithin([searchRef], setSearchFocused);\n\n    return (\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove && searchFocused}\n        ref={ref}\n      >\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={href ? 'a' : 'div'}\n            href={href}\n            onClick={onClick}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n            {(isMediumOrAbove || !searchFocused) && (\n              <>\n                <StyledAppHeaderText>{appName}</StyledAppHeaderText>\n                <StyledAppHeaderText variant='secondary'>{portalName}</StyledAppHeaderText>\n              </>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n\n        {searchInput ? (\n          <StyledAppHeaderSearchForm\n            ref={searchRef}\n            role='search'\n            aria-label={searchLabel}\n            onSubmit={e => e.preventDefault()}\n            isMediumOrAbove={isMediumOrAbove}\n          >\n            <SearchInput {...searchInput} />\n          </StyledAppHeaderSearchForm>\n        ) : (\n          <StyledAppHeaderSpacer />\n        )}\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/AppShell.d.ts

@@ -1,132 +1,7 @@
-import { FunctionComponent, Ref, ReactNode, EventHandler, MouseEvent } from 'react';
-import { SearchInputProps } from '../SearchInput';
-import { ImageProps } from '../Image';
-import type { BaseProps, ForwardProps, AsProp, Action } from '../../types';
-export interface AppShellProps extends BaseProps {
-    /** Props related to the App Shell header. */
-    appInfo: AppInfoProps;
-    /** Props related to the Search Input. */
-    searchInput?: SearchInputProps;
-    /**
-     * The aria-label for the search input.
-     * @default "Sitewide"
-     */
-    searchLabel?: string;
-    /** A set of cases that will render in an expanded list within the App Shell. */
-    caseTypes?: CaseTypeProps[];
-    /** A set of links that will render as a flat list in the App Shell. */
-    links?: LinkProps[];
-    /** A set of cases that will render as a flat list in the App Shell. */
-    cases?: CaseProps[];
-    /** The active user of the application. */
-    operator: OperatorProps;
-    /** Used for alternate environments, such as "dev" or "staging". */
-    environment?: {
-        name: string;
-        /** @default theme.base.colors.red['extra-light'] */
-        color?: string;
-    };
-    /** The content of the application. */
-    main: ReactNode;
-    /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */
-    utils?: UtilItemProps[];
-    /** Banners will render above the main content if they are provided. */
-    banners?: ReactNode;
-}
-declare type OnClick<E = HTMLElement> = EventHandler<MouseEvent<E>>;
-interface AppInfoProps {
-    /** The primary text to render in the header. */
-    appName: string;
-    /** The source for the application image or logo that is rendered in the header. */
-    imageSrc: ImageProps['src'];
-    /** URL or DOM id to navigate to. */
-    href?: string;
-    /** Click handler for the header. */
-    onClick?: EventHandler<MouseEvent>;
-    /** The secondary text to render in the header. */
-    portalName?: string;
-    /** Specifies where to open the link href. */
-    target?: string;
-}
-interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {
-    /**  The display name of an utility item. */
-    name: string;
-    count?: number;
-    /**  View that renders on an appShell drawer onClick of an item */
-    drawerView?: ReactNode;
-    /** Heading for view that renders */
-    drawerHeader?: string;
-    /** Callback that fires on appshell drawer open */
-    onDrawerOpen?(): void;
-    /** Callback that fires on appshell drawer close */
-    onDrawerClose?(): void;
-}
-interface CaseTypeProps {
-    /** The display name of the case. */
-    name: string;
-    /** Click handler for the case. */
-    onClick?: OnClick<HTMLButtonElement>;
-}
-interface LinkProps {
-    /** Unique id */
-    id: string;
-    /** The display name of the link. */
-    name: string;
-    /** URL or DOM id to navigate to. */
-    href: string;
-    /** The name of the Cosmos Icon to render as a visual. */
-    icon?: string;
-    /** Determines if the link represents the active page. */
-    active?: boolean;
-    /** A set of nested links. */
-    links?: LinkProps[];
-    /** Click handler for the link. */
-    onClick?: OnClick<HTMLAnchorElement>;
-}
-interface CaseProps {
-    /** Unique id */
-    id: string;
-    /** Name of the case or some primary information like title. */
-    primary: string;
-    /** Additional info of a case like timestamp. */
-    secondary?: string;
-    /** A visual element identifying the case. If not passed will render case-solid icon */
-    visual?: ReactNode;
-    /** Determines if the case represents the active page. */
-    active?: boolean;
-    /** Click handler for the case . */
-    onClick?: OnClick<HTMLButtonElement>;
-    /** Dismiss handler for the case. */
-    onDismiss?: OnClick<HTMLButtonElement>;
-}
-interface OperatorProps {
-    /** A visual element identifying the operator. */
-    avatar: ReactNode;
-    /** A list of actions that will populate a menu attached to the operator. */
-    actions: Action[];
-    /** The name of the operator. */
-    name: string;
-}
-interface NavListProps extends AsProp, BaseProps {
-    items?: NavListItemProps[];
-    nestedList?: boolean;
-    collapsed?: boolean;
-}
-interface NavListItemProps extends AsProp, BaseProps {
-    id?: string;
-    visual?: ReactNode;
-    primary: string;
-    secondary?: string;
-    href?: string;
-    onClick?: OnClick<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;
-    active?: boolean;
-    items?: NavListProps['items'];
-    collapseItems?: boolean;
-    actions?: OperatorProps['actions'];
-    dismissible?: boolean;
-    onDismiss?: OnClick<HTMLButtonElement>;
-    forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
-}
+import { FunctionComponent, FC } from 'react';
+import type { ForwardProps } from '../../types';
+import { AppShellProps, UtilsProps } from './AppShell.types';
+export declare const Utils: FC<UtilsProps>;
 declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
 export default AppShell;
 //# sourceMappingURL=AppShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EAGjB,GAAG,EAKH,SAAS,EACT,YAAY,EACZ,UAAU,EAMX,MAAM,OAAO,CAAC;AAMf,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAgC3E,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,6CAA6C;IAC7C,OAAO,EAAE,YAAY,CAAC;IACtB,yCAAyC;IACzC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,oDAAoD;QACpD,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,gGAAgG;IAChG,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,aAAK,OAAO,CAAC,CAAC,GAAG,WAAW,IAAI,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5D,UAAU,YAAY;IACpB,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,QAAQ,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC5B,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACtF,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,IAAI,IAAI,CAAC;CACxB;AAOD,UAAU,aAAa;IACrB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACrC,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACxC;AAED,UAAU,aAAa;IACrB,iDAAiD;IACjD,MAAM,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,YAAa,SAAQ,MAAM,EAAE,SAAS;IAC9C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,UAAU,gBAAiB,SAAQ,MAAM,EAAE,SAAS;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAC5E;AAsZD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0I7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAGH,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AA2C5D,OAAO,EACL,aAAa,EAOb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAwR1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmGhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAuP7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}