@pega/cosmos-react-core 3.0.0-dev.9.0 → 3.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode, KeyboardEvent } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as pinIcon from '../Icon/icons/pin.icon';\nimport * as pinSolidIcon from '../Icon/icons/pin-solid.icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationPrimary,\n  StyledNotificationSecondary,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll,\n  StyledNotificationVisual\n} from './AppShell.styles';\n\nregisterIcon(pinIcon, pinSolidIcon);\n\ntype ListInteractionEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: ListInteractionEvent) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: ListInteractionEvent) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          const onSummaryItemClick = (e: ListInteractionEvent) => {\n            onClick?.(id, e);\n            onItemClick?.(id, e);\n          };\n          return (\n            <li key={id}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                primary={\n                  <StyledNotificationPrimary unread={unread}>{primary}</StyledNotificationPrimary>\n                }\n                secondary={\n                  secondary?.length ? (\n                    <StyledNotificationSecondary unread={unread}>\n                      <MetaList as={StyledAppShellMetaList} items={secondary} />\n                    </StyledNotificationSecondary>\n                  ) : undefined\n                }\n                visual={\n                  visual || unread ? (\n                    <StyledNotificationVisual unread={unread} visualIncluded={!!visual}>\n                      {visual} <Alert variant='urgent' />\n                    </StyledNotificationVisual>\n                  ) : undefined\n                }\n                href={href}\n                onClick={onSummaryItemClick}\n                actions={\n                  displayPins ? (\n                    <Button\n                      icon\n                      as={StyledAppShellPinButton}\n                      forwardedAs='div'\n                      onClick={() => {\n                        onPinToggle?.(id);\n                        onItemPinToggle?.(id);\n                      }}\n                      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n                        if (e.key === 'Enter') {\n                          onPinToggle?.(id);\n                          onItemPinToggle?.(id);\n                        }\n                      }}\n                      role='button'\n                      tabIndex={0}\n                    >\n                      <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                    </Button>\n                  ) : undefined\n                }\n                tabIndex={0}\n              />\n            </li>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}
+{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  MouseEvent,\n  ReactNode,\n  KeyboardEvent,\n  useContext,\n  useRef\n} from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as pinIcon from '../Icon/icons/pin.icon';\nimport * as pinSolidIcon from '../Icon/icons/pin-solid.icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport { StyledLoading } from './AppShell.styles';\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationPrimary,\n  StyledNotificationSecondary,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledNotificationVisual\n} from './AppShellList.styles';\nimport { StyledDrawerViewAll } from './Drawer.styles';\nimport { AppShellDrawerContext } from './AppShellContext';\n\nregisterIcon(pinIcon, pinSolidIcon);\n\nexport type ListInteractionEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;\nexport interface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: ListInteractionEvent) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: ListInteractionEvent) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n  const { closeDrawer } = useContext(AppShellDrawerContext);\n  const pinButtons = useRef<Record<string, HTMLButtonElement>>({});\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          const onSummaryItemClick = (e: ListInteractionEvent) => {\n            onClick?.(id, e);\n            onItemClick?.(id, e);\n\n            if (!pinButtons.current[id]?.contains(e.target as Node)) {\n              closeDrawer();\n            }\n          };\n\n          return (\n            <li key={id}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                primary={\n                  <StyledNotificationPrimary unread={unread}>{primary}</StyledNotificationPrimary>\n                }\n                secondary={\n                  secondary?.length ? (\n                    <StyledNotificationSecondary unread={unread}>\n                      <MetaList as={StyledAppShellMetaList} items={secondary} />\n                    </StyledNotificationSecondary>\n                  ) : undefined\n                }\n                visual={\n                  visual || unread ? (\n                    <StyledNotificationVisual unread={unread} visualIncluded={!!visual}>\n                      {visual} <Alert variant='urgent' />\n                    </StyledNotificationVisual>\n                  ) : undefined\n                }\n                href={href}\n                onClick={onSummaryItemClick}\n                actions={\n                  displayPins ? (\n                    <Button\n                      ref={el => {\n                        if (!el) delete pinButtons.current[id];\n                        else pinButtons.current[id] = el;\n                      }}\n                      icon\n                      as={StyledAppShellPinButton}\n                      forwardedAs='div'\n                      onClick={() => {\n                        onPinToggle?.(id);\n                        onItemPinToggle?.(id);\n                      }}\n                      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {\n                        if (e.key === 'Enter') {\n                          onPinToggle?.(id);\n                          onItemPinToggle?.(id);\n                        }\n                      }}\n                      role='button'\n                      tabIndex={0}\n                    >\n                      <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                    </Button>\n                  ) : undefined\n                }\n                tabIndex={0}\n              />\n            </li>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}

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

@@ -0,0 +1,19 @@
+export declare const StyledAppShellListWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellMetaList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellPinButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotificationVisual: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+    visualIncluded?: boolean | undefined;
+}, never>;
+export declare const StyledNotificationPrimary: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+}, never>;
+export declare const StyledNotificationSecondary: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    unread?: boolean | undefined;
+}, never>;
+export declare const EmptyStateColorContrast: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellListSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellListHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AppShellList.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,yBAAyB,yGAkBpC,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAI9C,eAAO,MAAM,yBAAyB,yGAsBpC,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAIlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,4GAiBlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;SAepC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;SAOpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAOnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,yGAUpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,wGAQpC,CAAC"}

package/lib/components/AppShell/AppShellList.styles.js

@@ -0,0 +1,141 @@
+import { lighten } from 'polished';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import { StyledAlert } from '../Badges/Alert';
+import { StyledEmptyState } from '../EmptyState';
+import { StyledSummaryItem } from '../SummaryItem';
+import { StyledText } from '../Text';
+/* AppShellList styles */
+export const StyledAppShellListWrapper = styled.div(({ theme }) => {
+    return css `
+    max-height: 100%;
+    white-space: nowrap;
+
+    ${StyledSummaryItem} {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: calc(100% - 0.03125rem);
+        inset-inline-end: 1rem;
+        inset-inline-start: 1rem;
+        height: 0.0625rem;
+        background-color: ${theme.base.colors.gray['extra-dark']};
+      }
+    }
+  `;
+});
+StyledAppShellListWrapper.defaultProps = defaultThemeProp;
+export const StyledAppShellList = styled.ul ``;
+StyledAppShellList.defaultProps = defaultThemeProp;
+export const StyledAppShellSummaryItem = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    text-align: start;
+    white-space: normal;
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledAppShellSummaryItem.defaultProps = defaultThemeProp;
+export const StyledAppShellMetaList = styled.ul `
+  li {
+    color: inherit;
+  }
+`;
+export const StyledAppShellPinButton = styled.button(({ theme }) => {
+    return css `
+    color: inherit;
+    border: none;
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledAppShellPinButton.defaultProps = defaultThemeProp;
+export const StyledNotificationVisual = styled.span(({ theme, unread, visualIncluded }) => {
+    return css `
+      position: relative;
+      ${StyledAlert} {
+        display: ${unread ? 'auto' : 'none'};
+        position: absolute;
+        inset-inline-start: -0.65625rem;
+        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};
+        background-color: ${theme.base.palette.light};
+        height: 0.3125rem;
+        width: 0.3125rem;
+      } ;
+    `;
+});
+StyledNotificationVisual.defaultProps = defaultThemeProp;
+export const StyledNotificationPrimary = styled.span(({ theme, unread }) => {
+    return css `
+    font-weight: ${unread
+        ? theme.base['font-weight'].bold
+        : theme.base['font-weight']['semi-bold']};
+    color: ${unread ? theme.base.palette.light : 'inherit'};
+  `;
+});
+StyledNotificationPrimary.defaultProps = defaultThemeProp;
+export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
+    return css `
+      ${StyledText} {
+        opacity: ${unread
+        ? theme.base.transparency['transparent-1']
+        : theme.base.transparency['transparent-3']};
+      }
+    `;
+});
+StyledNotificationSecondary.defaultProps = defaultThemeProp;
+export const EmptyStateColorContrast = styled.div `
+  ${StyledEmptyState} {
+    span,
+    svg {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+`;
+export const StyledAppShellListSection = styled.div(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    border-top: 0.0625rem solid ${borderColor};
+    min-height: max(20%, 8rem);
+    overflow-y: auto;
+  `;
+});
+StyledAppShellListSection.defaultProps = defaultThemeProp;
+export const StyledAppShellListHeading = styled.h3(({ theme }) => {
+    return css `
+    position: sticky;
+    top: 0;
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    background-color: hsl(207 14% 13% / 1);
+    z-index: 1;
+  `;
+});
+StyledAppShellListHeading.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppShellList.styles.js.map

package/lib/components/AppShell/AppShellList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellList.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledSummaryItem } from '../SummaryItem';\nimport { StyledText } from '../Text';\n\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div(({ theme }) => {\n  return css`\n    max-height: 100%;\n    white-space: nowrap;\n\n    ${StyledSummaryItem} {\n      position: relative;\n      &::after {\n        content: '';\n        position: absolute;\n        top: calc(100% - 0.03125rem);\n        inset-inline-end: 1rem;\n        inset-inline-start: 1rem;\n        height: 0.0625rem;\n        background-color: ${theme.base.colors.gray['extra-dark']};\n      }\n    }\n  `;\n});\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryItem = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    color: inherit;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    cursor: pointer;\n    text-align: start;\n    white-space: normal;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  return css`\n    color: inherit;\n    border: none;\n    background-color: transparent;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean; visualIncluded?: boolean }>(\n  ({ theme, unread, visualIncluded }) => {\n    return css`\n      position: relative;\n      ${StyledAlert} {\n        display: ${unread ? 'auto' : 'none'};\n        position: absolute;\n        inset-inline-start: -0.65625rem;\n        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};\n        background-color: ${theme.base.palette.light};\n        height: 0.3125rem;\n        width: 0.3125rem;\n      } ;\n    `;\n  }\n);\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n    color: ${unread ? theme.base.palette.light : 'inherit'};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div`\n  ${StyledEmptyState} {\n    span,\n    svg {\n      color: rgba(255, 255, 255, 0.7);\n    }\n  }\n`;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AppShellProps } from './AppShell.types';
+export interface AppShellSearchProps {
+    collapsed: boolean;
+    searchLabel: string;
+    searchInput: AppShellProps['searchInput'];
+}
+export declare const AppShellSearch: FC<AppShellSearchProps>;
+//# sourceMappingURL=AppShellSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellSearch.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAsD,MAAM,OAAO,CAAC;AAO/E,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAS1E,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAiElD,CAAC"}

package/lib/components/AppShell/AppShellSearch.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useContext } from 'react';
+import { useBreakpoint, useI18n } from '../../hooks';
+import Icon from '../Icon';
+import SearchInput from '../SearchInput';
+import NavigationListItemWrapper from './NavigationListItemWrapper';
+import { StyledAppShellSearchButton, StyledAppshellSearchContainer, StyledAppShellSearchDecoration, StyledSearch } from './AppShellSearch.styles';
+import AppShellContext from './AppShellContext';
+export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
+    const btnElRef = useRef(null);
+    const formElRef = useRef(null);
+    const searchRef = useRef();
+    const t = useI18n();
+    const [menuOpen, setMenuOpen] = useState(false);
+    const isMediumOrAbove = useBreakpoint('md');
+    const { navState, mobileNavOpen } = useContext(AppShellContext);
+    const onMenuToggle = state => {
+        setMenuOpen(state === 'open');
+    };
+    useEffect(() => {
+        const onTab = (e) => {
+            if (menuOpen && e.key === 'Tab') {
+                e.preventDefault();
+                searchRef.current?.focus();
+            }
+        };
+        btnElRef.current?.addEventListener('keydown', onTab);
+        return () => {
+            btnElRef.current?.removeEventListener('keydown', onTab);
+        };
+    }, [searchRef, menuOpen]);
+    const searchFormProps = {
+        role: 'search',
+        'aria-label': searchLabel,
+        onSubmit: (e) => e.preventDefault()
+    };
+    return (_jsx(StyledSearch, { collapsed: collapsed, isMediumOrAbove: isMediumOrAbove, children: navState === 'closed' && !mobileNavOpen ? (_jsx(NavigationListItemWrapper, { childElementRef: formElRef, label: t('search_placeholder_default'), tooltipLabel: t('search_placeholder_default'), onMenuToggle: onMenuToggle, content: _jsx(StyledAppshellSearchContainer, { children: _jsx(SearchInput, { ...searchInput, resultsPopover: false, ref: searchRef }) }), children: _jsx("form", { ...searchFormProps, ref: formElRef, children: _jsx(StyledAppShellSearchButton, { ref: btnElRef, children: _jsx(StyledAppShellSearchDecoration, { children: _jsx(Icon, { name: 'search' }) }) }) }) })) : (_jsx("form", { ...searchFormProps, children: _jsx(SearchInput, { ...searchInput }) })) }));
+};
+//# sourceMappingURL=AppShellSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellSearch.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useRef, useState, useContext, FormEvent } from 'react';\n\nimport { useBreakpoint, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport { AppShellProps, NavListItemWrapperProps } from './AppShell.types';\nimport {\n  StyledAppShellSearchButton,\n  StyledAppshellSearchContainer,\n  StyledAppShellSearchDecoration,\n  StyledSearch\n} from './AppShellSearch.styles';\nimport AppShellContext from './AppShellContext';\n\nexport interface AppShellSearchProps {\n  collapsed: boolean;\n  searchLabel: string;\n  searchInput: AppShellProps['searchInput'];\n}\n\nexport const AppShellSearch: FC<AppShellSearchProps> = ({\n  collapsed,\n  searchLabel,\n  searchInput\n}) => {\n  const btnElRef = useRef<HTMLButtonElement>(null);\n  const formElRef = useRef<HTMLFormElement>(null);\n  const searchRef = useRef<HTMLInputElement>();\n  const t = useI18n();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const isMediumOrAbove = useBreakpoint('md');\n  const { navState, mobileNavOpen } = useContext(AppShellContext);\n\n  const onMenuToggle: NavListItemWrapperProps['onMenuToggle'] = state => {\n    setMenuOpen(state === 'open');\n  };\n\n  useEffect(() => {\n    const onTab = (e: KeyboardEvent) => {\n      if (menuOpen && e.key === 'Tab') {\n        e.preventDefault();\n        searchRef.current?.focus();\n      }\n    };\n    btnElRef.current?.addEventListener('keydown', onTab);\n    return () => {\n      btnElRef.current?.removeEventListener('keydown', onTab);\n    };\n  }, [searchRef, menuOpen]);\n\n  const searchFormProps = {\n    role: 'search',\n    'aria-label': searchLabel,\n    onSubmit: (e: FormEvent) => e.preventDefault()\n  };\n\n  return (\n    <StyledSearch collapsed={collapsed} isMediumOrAbove={isMediumOrAbove}>\n      {navState === 'closed' && !mobileNavOpen ? (\n        <NavigationListItemWrapper\n          childElementRef={formElRef}\n          label={t('search_placeholder_default')}\n          tooltipLabel={t('search_placeholder_default')}\n          onMenuToggle={onMenuToggle}\n          content={\n            <StyledAppshellSearchContainer>\n              <SearchInput {...searchInput} resultsPopover={false} ref={searchRef} />\n            </StyledAppshellSearchContainer>\n          }\n        >\n          <form {...searchFormProps} ref={formElRef}>\n            <StyledAppShellSearchButton ref={btnElRef}>\n              <StyledAppShellSearchDecoration>\n                <Icon name='search' />\n              </StyledAppShellSearchDecoration>\n            </StyledAppShellSearchButton>\n          </form>\n        </NavigationListItemWrapper>\n      ) : (\n        <form {...searchFormProps}>\n          <SearchInput {...searchInput} />\n        </form>\n      )}\n    </StyledSearch>\n  );\n};\n"]}

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

@@ -0,0 +1,8 @@
+export declare const StyledSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    collapsed: boolean;
+    isMediumOrAbove: boolean;
+}, never>;
+export declare const StyledAppShellSearchDecoration: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellSearchButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppshellSearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AppShellSearch.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellSearch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,YAAY;eAA2B,OAAO;qBAAmB,OAAO;SA2JpF,CAAC;AAIF,eAAO,MAAM,8BAA8B,yGAYzC,CAAC;AAIH,eAAO,MAAM,0BAA0B,oNAQtC,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAIxC,CAAC"}

package/lib/components/AppShell/AppShellSearch.styles.js

@@ -0,0 +1,193 @@
+import { lighten, mix } from 'polished';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import BareButton from '../Button/BareButton';
+import { StyledLink } from '../Link';
+import { StyledMenuItem } from '../Menu';
+import { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';
+import { StyledSearchInput } from '../SearchInput';
+import { StyledCancelButton, StyledFiltersPopover, StyledResultsPopover, StyledSearchButton } from '../SearchInput/SearchInput.styles';
+import { StyledText } from '../Text';
+import { StyledBackdrop } from '../Backdrop';
+import { StyledEmptyState } from '../EmptyState';
+import { navWidth } from './AppShell.styles';
+export const StyledSearch = styled.div(({ theme, collapsed, isMediumOrAbove }) => {
+    const backgroundColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    const maxCollapsedSize = theme.components.input.height;
+    const activeColor = tryCatch(() => mix(0.85, theme.base.palette.dark, theme.base.palette.interactive));
+    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette.dark, theme.base.palette.interactive));
+    return css `
+      flex-shrink: 0;
+      justify-content: center;
+      --background-color: ${backgroundColor};
+
+      ${StyledMenuListContainer} {
+        background: transparent;
+      }
+
+      > form {
+        padding: ${theme.base.spacing} 0;
+      }
+
+      header {
+        ${StyledText} {
+          color: ${theme.base.palette.light};
+        }
+      }
+
+      ${StyledBackdrop} {
+        background: transparent;
+      }
+
+      ${StyledEmptyState} {
+        span,
+        svg {
+          color: ${theme.base.palette.light};
+        }
+      }
+
+      ${StyledMenu} {
+        &[data-active-scope='true'] [data-current='true'] {
+          background-color: ${activeColor};
+        }
+
+        ${StyledLink} {
+          color: ${theme.base.palette.light};
+        }
+      }
+
+      ${StyledMenuItem} {
+        color: ${theme.base.palette.light};
+
+        li {
+          color: ${theme.base.palette.light};
+        }
+
+        &:focus-within {
+          background-color: ${activeColor};
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: ${hoverColor};
+        }
+      }
+
+      ${StyledFiltersPopover}, ${StyledResultsPopover} {
+        background-color: ${backgroundColor};
+        z-index: calc(${theme.base['z-index'].backdrop} + 1);
+      }
+
+      ${StyledSearchInput} {
+        border: none;
+        background: transparent;
+
+        ${StyledSearchButton} {
+          transition: borderRadius calc(${theme.base.animation.speed} * 2);
+          border: none;
+        }
+
+        ${StyledCancelButton} {
+          color: rgba(255, 255, 255, 0.9);
+        }
+
+        input {
+          border-color: ${backgroundColor};
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+          }
+
+          &:focus:not([disabled]) {
+            border-color: ${backgroundColor};
+          }
+        }
+
+        input,
+        ${StyledSearchButton} {
+          background: ${backgroundColor};
+          color: rgba(255, 255, 255, 0.7);
+          border: transparent;
+
+          &:focus-within {
+            border: transparent;
+          }
+        }
+
+        &:focus-within {
+          ${StyledSearchButton} {
+            color: rgba(255, 255, 255, 0.9);
+          }
+        }
+      }
+
+      form > ${StyledSearchInput} {
+        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
+        ${collapsed &&
+        isMediumOrAbove &&
+        css `
+          overflow: hidden;
+        `}
+        background: ${backgroundColor};
+
+        ${collapsed &&
+        isMediumOrAbove &&
+        css `
+          ${StyledSearchButton} {
+            border-radius: calc(
+              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}
+            );
+            height: ${maxCollapsedSize};
+            width: ${maxCollapsedSize};
+            padding: 0;
+
+            > :not(:first-child) {
+              display: none;
+            }
+          }
+
+          input {
+            padding: 0;
+            max-width: 0;
+            overflow: hidden;
+          }
+
+          ${StyledCancelButton} {
+            display: none;
+          }
+        `}
+      }
+    `;
+});
+StyledSearch.defaultProps = defaultThemeProp;
+export const StyledAppShellSearchDecoration = styled.div(({ theme }) => {
+    return css `
+    width: ${theme.components.input.height};
+    height: ${theme.components.input.height};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--background-color);
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0 auto;
+  `;
+});
+StyledAppShellSearchDecoration.defaultProps = defaultThemeProp;
+export const StyledAppShellSearchButton = styled(BareButton) `
+  width: 100%;
+  &:focus {
+    ${StyledAppShellSearchDecoration} {
+      outline: none;
+      box-shadow: inset ${props => props.theme.base.shadow['focus-inverted']};
+    }
+  }
+`;
+StyledAppShellSearchButton.defaultProps = defaultThemeProp;
+export const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {
+    return css `
+    padding: ${base.spacing};
+  `;
+});
+StyledAppshellSearchContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppShellSearch.styles.js.map

package/lib/components/AppShell/AppShellSearch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledCancelButton,\n  StyledFiltersPopover,\n  StyledResultsPopover,\n  StyledSearchButton\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n  ({ theme, collapsed, isMediumOrAbove }) => {\n    const backgroundColor = tryCatch(() =>\n      lighten(0.1, theme.components['app-shell'].nav['background-color'])\n    );\n    const maxCollapsedSize = theme.components.input.height;\n    const activeColor = tryCatch(() =>\n      mix(0.85, theme.base.palette.dark, theme.base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, theme.base.palette.dark, theme.base.palette.interactive)\n    );\n\n    return css`\n      flex-shrink: 0;\n      justify-content: center;\n      --background-color: ${backgroundColor};\n\n      ${StyledMenuListContainer} {\n        background: transparent;\n      }\n\n      > form {\n        padding: ${theme.base.spacing} 0;\n      }\n\n      header {\n        ${StyledText} {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledBackdrop} {\n        background: transparent;\n      }\n\n      ${StyledEmptyState} {\n        span,\n        svg {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledMenu} {\n        &[data-active-scope='true'] [data-current='true'] {\n          background-color: ${activeColor};\n        }\n\n        ${StyledLink} {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledMenuItem} {\n        color: ${theme.base.palette.light};\n\n        li {\n          color: ${theme.base.palette.light};\n        }\n\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n      }\n\n      ${StyledFiltersPopover}, ${StyledResultsPopover} {\n        background-color: ${backgroundColor};\n        z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      }\n\n      ${StyledSearchInput} {\n        border: none;\n        background: transparent;\n\n        ${StyledSearchButton} {\n          transition: borderRadius calc(${theme.base.animation.speed} * 2);\n          border: none;\n        }\n\n        ${StyledCancelButton} {\n          color: rgba(255, 255, 255, 0.9);\n        }\n\n        input {\n          border-color: ${backgroundColor};\n\n          &::placeholder {\n            color: rgba(255, 255, 255, 0.4);\n          }\n\n          &:focus:not([disabled]) {\n            border-color: ${backgroundColor};\n          }\n        }\n\n        input,\n        ${StyledSearchButton} {\n          background: ${backgroundColor};\n          color: rgba(255, 255, 255, 0.7);\n          border: transparent;\n\n          &:focus-within {\n            border: transparent;\n          }\n        }\n\n        &:focus-within {\n          ${StyledSearchButton} {\n            color: rgba(255, 255, 255, 0.9);\n          }\n        }\n      }\n\n      form > ${StyledSearchInput} {\n        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          overflow: hidden;\n        `}\n        background: ${backgroundColor};\n\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          ${StyledSearchButton} {\n            border-radius: calc(\n              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n            );\n            height: ${maxCollapsedSize};\n            width: ${maxCollapsedSize};\n            padding: 0;\n\n            > :not(:first-child) {\n              display: none;\n            }\n          }\n\n          input {\n            padding: 0;\n            max-width: 0;\n            overflow: hidden;\n          }\n\n          ${StyledCancelButton} {\n            display: none;\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n  return css`\n    width: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--background-color);\n    color: rgba(255, 255, 255, 0.7);\n    margin: 0 auto;\n  `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n  width: 100%;\n  &:focus {\n    ${StyledAppShellSearchDecoration} {\n      outline: none;\n      box-shadow: inset ${props => props.theme.base.shadow['focus-inverted']};\n    }\n  }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    padding: ${base.spacing};\n  `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -4,7 +4,9 @@ interface DrawerViewProps {
     header: string;
     onDrawerOpen?: () => void;
     onDrawerClose?: () => void;
+    drawerOpen: boolean;
+    setDrawerOpen: (open: boolean) => void;
 }
-declare const _default: (props: DrawerViewProps) => JSX.Element;
+declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }: DrawerViewProps) => JSX.Element;
 export default _default;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;gCAEsB,eAAe;AAAtC,wBAkEE"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBA+EE"}

package/lib/components/AppShell/Drawer.js

@@ -7,15 +7,16 @@ import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
 import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
 import Text from '../Text';
-import { useDirection, useI18n, useTheme } from '../../hooks';
+import { useDirection, useElement, useI18n, useOuterEvent, useTheme } from '../../hooks';
 import Configuration from '../Configuration';
 import { tryCatch } from '../../utils';
 import AppShellContext from './AppShellContext';
-import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './AppShell.styles';
+import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
 registerIcon(arrowLeftIcon);
-export default (props) => {
-    const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);
-    const { content, header, onDrawerOpen, onDrawerClose } = props;
+export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
+    const { focusedImperatively } = useContext(AppShellContext);
+    const returnFocusRef = useRef();
+    const [drawerEl, setDrawerEl] = useElement();
     const theme = useTheme();
     const backButtonRef = useRef(null);
     const appShellBg = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
@@ -33,18 +34,20 @@ export default (props) => {
     };
     const { ltr, rtl } = useDirection();
     const t = useI18n();
-    return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'absolute', placement: 'right', open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
+    useOuterEvent('click', [drawerEl], () => {
+        setDrawerOpen(false);
+    });
+    return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
+                returnFocusRef.current = document.activeElement ?? undefined;
+            }, onAfterOpen: () => {
                 if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
                     focusedImperatively.current = true;
                     backButtonRef.current.focus();
                 }
                 onDrawerOpen?.();
             }, onAfterClose: () => {
-                if (refocusEl && document.activeElement !== refocusEl) {
-                    focusedImperatively.current = true;
-                    refocusEl.focus();
-                }
                 onDrawerClose?.();
-            }, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && _jsx(Text, { children: header }), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && _jsx(Text, { children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, children: content })] }) }));
+                returnFocusRef.current?.focus();
+            }, ref: setDrawerEl, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && _jsx(Text, { children: header }), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && _jsx(Text, { children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, children: content })] }) }));
 };
 //# sourceMappingURL=Drawer.js.map