@pega/cosmos-react-core 3.0.0-dev.18.0 → 3.0.0-dev.19.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.
- package/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +44 -78
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +2 -2
- package/lib/components/AppShell/AppShell.styles.js +4 -4
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +8 -18
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/AppShellContext.d.ts +7 -7
- package/lib/components/AppShell/AppShellContext.d.ts.map +1 -1
- package/lib/components/AppShell/AppShellContext.js +5 -6
- package/lib/components/AppShell/AppShellContext.js.map +1 -1
- package/lib/components/AppShell/AppShellSearch.d.ts +0 -1
- package/lib/components/AppShell/AppShellSearch.d.ts.map +1 -1
- package/lib/components/AppShell/AppShellSearch.js +9 -10
- package/lib/components/AppShell/AppShellSearch.js.map +1 -1
- package/lib/components/AppShell/Drawer.d.ts +3 -1
- package/lib/components/AppShell/Drawer.d.ts.map +1 -1
- package/lib/components/AppShell/Drawer.js +7 -8
- package/lib/components/AppShell/Drawer.js.map +1 -1
- package/lib/components/AppShell/NavigationList.d.ts +2 -1
- package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationList.js +16 -19
- package/lib/components/AppShell/NavigationList.js.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.js +32 -41
- package/lib/components/AppShell/NavigationListItemWrapper.js.map +1 -1
- package/lib/components/AppShell/SkipNavigation.d.ts.map +1 -1
- package/lib/components/AppShell/SkipNavigation.js +5 -3
- package/lib/components/AppShell/SkipNavigation.js.map +1 -1
- package/lib/components/AppShell/index.d.ts +2 -2
- package/lib/components/AppShell/index.d.ts.map +1 -1
- package/lib/components/AppShell/index.js +1 -1
- package/lib/components/AppShell/index.js.map +1 -1
- package/lib/components/Avatar/Avatar.d.ts.map +1 -1
- package/lib/components/Avatar/Avatar.js +2 -0
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +1 -0
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/CompositeInput/CompositeInput.js +1 -1
- package/lib/components/CompositeInput/CompositeInput.js.map +1 -1
- package/lib/components/CompositeInput/CompositeInput.styles.d.ts.map +1 -1
- package/lib/components/CompositeInput/CompositeInput.styles.js +2 -1
- package/lib/components/CompositeInput/CompositeInput.styles.js.map +1 -1
- package/lib/components/Currency/utils.d.ts +1 -1
- package/lib/components/Currency/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Input/usePickerButton.d.ts +1 -1
- package/lib/components/DateTime/Input/usePickerButton.d.ts.map +1 -1
- package/lib/components/DateTime/Input/utils.d.ts +6 -6
- package/lib/components/DateTime/Input/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/utils.d.ts +1 -1
- package/lib/components/DateTime/Picker/utils.d.ts.map +1 -1
- package/lib/components/Dialog/Dialog.d.ts +1 -0
- package/lib/components/Dialog/Dialog.d.ts.map +1 -1
- package/lib/components/Dialog/Dialog.js +1 -1
- package/lib/components/Dialog/Dialog.js.map +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.d.ts.map +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.js +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.d.ts +11 -6
- package/lib/components/FieldValueList/FieldValueList.d.ts.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +8 -6
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/FieldValueList/index.d.ts +2 -4
- package/lib/components/FieldValueList/index.d.ts.map +1 -1
- package/lib/components/FieldValueList/index.js +2 -4
- package/lib/components/FieldValueList/index.js.map +1 -1
- package/lib/components/List/List.d.ts +1 -1
- package/lib/components/List/List.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +2 -2
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/Menu/helpers.d.ts +7 -7
- package/lib/components/Menu/helpers.d.ts.map +1 -1
- package/lib/components/Number/NumberInput.d.ts.map +1 -1
- package/lib/components/Number/NumberInput.js +3 -3
- package/lib/components/Number/NumberInput.js.map +1 -1
- package/lib/components/Number/utils.d.ts +1 -1
- package/lib/components/Number/utils.d.ts.map +1 -1
- package/lib/hooks/useAutoResize.d.ts +1 -1
- package/lib/hooks/useAutoResize.d.ts.map +1 -1
- package/lib/hooks/useBreakpoint.d.ts +3 -2
- package/lib/hooks/useBreakpoint.d.ts.map +1 -1
- package/lib/hooks/useBreakpoint.js +10 -13
- package/lib/hooks/useBreakpoint.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +5 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/hooks/useLongPress.d.ts +1 -1
- package/lib/hooks/useLongPress.d.ts.map +1 -1
- package/lib/hooks/useScrollStick.d.ts +1 -1
- package/lib/hooks/useScrollStick.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +5 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +5 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +6 -727
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/init.js +1 -1
- package/lib/init.js.map +1 -1
- package/lib/theme/index.d.ts +1 -0
- package/lib/theme/index.d.ts.map +1 -1
- package/lib/theme/index.js +1 -0
- package/lib/theme/index.js.map +1 -1
- package/lib/theme/themes/wssTheme.json +6 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { KeyboardEvent, MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { ImageProps } from '../Image';\nimport { SearchInputProps } from '../SearchInput';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n /** The primary text to render in the header. */\n appName: string;\n /** The source for a small application image or logo that is rendered in the nav bar. */\n imageSrc: ImageProps['src'];\n /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n fullImageSrc?: ImageProps['src'];\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n /** The secondary text to render in the header. */\n portalName?: string;\n /** Specifies where to open the link href. */\n target?: string;\n}\n\nexport interface AppShellProps extends BaseProps, AppShellDrawerProps, NoChildrenProp {\n /** Props related to the App Shell header. */\n appInfo: AppInfoProps;\n /** The content of the application. */\n main: ReactNode;\n /** The active user of the application. */\n operator: OperatorProps;\n /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n appHeader?: boolean;\n /** If true, the search results page will replace the search input in the app header with its own */\n searchPage?: boolean;\n /** Props related to the Search Input. */\n searchInput?: SearchInputProps;\n /**\n * The aria-label for the search input.\n * @default \"Sitewide\"\n */\n searchLabel?: string;\n /** A set of cases that will render in an expanded list within the App Shell. */\n caseTypes?: CaseTypeProps[];\n /** A set of links that will render as a flat list in the App Shell. */\n links?: LinkProps[];\n /** A set of cases that will render as a flat list in the App Shell. */\n cases?: CaseProps[];\n /** Used for alternate environments, such as \"dev\" or \"staging\". */\n environment?: {\n name: string;\n /** @default theme.base.colors.red['extra-light'] */\n color?: string;\n };\n /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n utils?: UtilItemProps[];\n /** Banners will render above the main content if they are provided. */\n banners?: ReactNode;\n defaultExpanded?: boolean;\n}\nexport interface CaseTypeProps {\n /** The display name of the case. */\n name: string;\n /** Click handler for the case. */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n /** Unique id */\n id: string;\n /** The display name of the link. */\n name: string;\n /** URL or DOM id to navigate to. */\n href: string;\n /** The name of the Cosmos Icon to render as a visual. */\n icon?: string;\n /** Determines if the link represents the active page. */\n active?: boolean;\n /** A set of nested links. */\n links?: LinkProps[];\n /** Click handler for the link. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps extends ForwardProps {\n /** Unique id */\n id: string;\n /** Name of the case or some primary information like title. */\n primary: string;\n /** Additional info of a case like timestamp. */\n secondary?: string;\n /** A visual element identifying the case. If not passed will render case-solid icon */\n visual?: ReactNode;\n /** Determines if the case represents the active page. */\n active?: boolean;\n /** Click handler for the case . */\n onClick?: MouseEventHandler<HTMLElement>;\n /** Dismiss handler for the case. */\n onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n /** A visual element identifying the operator. */\n avatar: ReactNode;\n /** A list of actions that will populate a menu attached to the operator. */\n actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n /** The name of the operator. */\n name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n /** The display name of an utility item. */\n name: string;\n /* Number when given displays on top-right of a given icon. */\n count?: number;\n /** View that renders on an appShell drawer onClick of an item */\n drawerView?: ReactNode;\n /** Heading for view that renders */\n drawerHeader?: string;\n /** Callback that fires on appshell drawer open */\n onDrawerOpen?: () => void;\n /** Callback that fires on appshell drawer close */\n onDrawerClose?: () => void;\n}\nexport interface UtilsProps {\n /** The active user of the application. */\n operator: AppShellProps['operator'];\n /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n items?: UtilItemProps[];\n appHeader?: boolean;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n items?: NavListItemProps[];\n nestedList?: boolean;\n collapsed?: boolean;\n id?: string;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n label: string;\n tooltipLabel: string;\n content?: ReactNode;\n items?: NavListItemProps[];\n onMenuToggle?: (state: 'open' | 'close') => void;\n navOpen: boolean;\n childrenElement: HTMLElement | null;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps {\n id?: string;\n visual?: ReactNode;\n primary: string;\n secondary?: string;\n href?: string;\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n active?: boolean;\n items?: NavListProps['items'];\n collapseItems?: boolean;\n actions?: OperatorProps['actions'];\n dismissible?: boolean;\n onDismiss?: MouseEventHandler<HTMLElement>;\n forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n isMenuItem?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n operator: AppShellProps['operator'];\n searchInput?: AppShellProps['searchInput'];\n searchLabel?: AppShellProps['searchLabel'];\n searchPage?: AppShellProps['searchPage'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n items: (DrawerItemProps & ForwardProps)[];\n loading?: boolean;\n viewAll?: {\n onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n href?: string;\n } & ForwardProps;\n newNotifications?: number;\n onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n onItemPinToggle?: (id: string) => void;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n}\n\nexport interface NotificationListProps {\n /** A list of notification items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Number of new notifications. */\n newNotifications?: DrawerListProps['newNotifications'];\n /** Callback function run when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n /** Callback function that runs after the Drawer opens. */\n onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n /** Callback function that runs after the Drawer closes. */\n onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface RecentsListProps {\n /** A list of recent activity items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Callback function that runs when an item pin is clicked. */\n onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n /** Callback function that runs when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n /** Callback function that runs after the Drawer opens. */\n onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n /** Callback function that runs after the Drawer closes. */\n onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface PinsListProps {\n /** A list of pinned items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Callback function that runs when an item pin is clicked. */\n onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n /** Callback function that runs when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n}\n\nexport interface AppShellDrawerProps {\n /** A list of notifications and handler functions. */\n notifications?: NotificationListProps;\n /** A list of recently visited items and handler functions. */\n recents?: RecentsListProps;\n /** A list of pinned items to display above recent items and handler functions. */\n pins?: PinsListProps;\n}\n\nexport interface DrawerItemProps 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 /** A flag indicating if the item has been pinned or not. */\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: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n /** The handler hat is called when a pin icon is toggled on an item. */\n onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n headingText?: string;\n emptyText: string;\n displayRecents: boolean;\n displayPins?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import {\n KeyboardEvent,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n RefObject\n} from 'react';\n\nimport { AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { ImageProps } from '../Image';\nimport { SearchInputProps } from '../SearchInput';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n /** The primary text to render in the header. */\n appName: string;\n /** The source for a small application image or logo that is rendered in the nav bar. */\n imageSrc: ImageProps['src'];\n /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n fullImageSrc?: ImageProps['src'];\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n /** The secondary text to render in the header. */\n portalName?: string;\n /** Specifies where to open the link href. */\n target?: string;\n}\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n /** Props related to the App Shell header. */\n appInfo: AppInfoProps;\n /** The content of the application. */\n main: ReactNode;\n /** The active user of the application. */\n operator: OperatorProps;\n /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n appHeader?: boolean;\n /** If true, the search results page will replace the search input in the app header with its own */\n searchPage?: boolean;\n /** Props related to the Search Input. */\n searchInput?: SearchInputProps;\n /**\n * The aria-label for the search input.\n * @default \"Sitewide\"\n */\n searchLabel?: string;\n /** A set of cases that will render in an expanded list within the App Shell. */\n caseTypes?: CaseTypeProps[];\n /** A set of links that will render as a flat list in the App Shell. */\n links?: LinkProps[];\n /** A set of cases that will render as a flat list in the App Shell. */\n cases?: CaseProps[];\n /** Used for alternate environments, such as \"dev\" or \"staging\". */\n environment?: {\n name: string;\n /** @default theme.base.colors.red['extra-light'] */\n color?: string;\n };\n /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n utils?: (UtilItemProps | ReactElement)[];\n /** Banners will render above the main content if they are provided. */\n banners?: ReactNode;\n defaultExpanded?: boolean;\n}\nexport interface CaseTypeProps {\n /** The display name of the case. */\n name: string;\n /** Click handler for the case. */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n /** Unique id */\n id: string;\n /** The display name of the link. */\n name: string;\n /** URL or DOM id to navigate to. */\n href: string;\n /** The name of the Cosmos Icon to render as a visual. */\n icon?: string;\n /** Determines if the link represents the active page. */\n active?: boolean;\n /** A set of nested links. */\n links?: LinkProps[];\n /** Click handler for the link. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps extends ForwardProps {\n /** Unique id */\n id: string;\n /** Name of the case or some primary information like title. */\n primary: string;\n /** Additional info of a case like timestamp. */\n secondary?: string;\n /** A visual element identifying the case. If not passed will render case-solid icon */\n visual?: ReactNode;\n /** Determines if the case represents the active page. */\n active?: boolean;\n /** Click handler for the case . */\n onClick?: MouseEventHandler<HTMLElement>;\n /** Dismiss handler for the case. */\n onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n /** A visual element identifying the operator. */\n avatar: ReactNode;\n /** A list of actions that will populate a menu attached to the operator. */\n actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n /** The name of the operator. */\n name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n /** The display name of an utility item. */\n name: string;\n /* Number when given displays on top-right of a given icon. */\n count?: number;\n /** View that renders on an appShell drawer onClick of an item */\n drawerView?: ReactNode;\n /** Heading for view that renders */\n drawerHeader?: string;\n /** Callback that fires on appshell drawer open */\n onDrawerOpen?: () => void;\n /** Callback that fires on appshell drawer close */\n onDrawerClose?: () => void;\n}\n\nexport interface UtilsProps {\n /** The active user of the application. */\n operator: AppShellProps['operator'];\n /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n items?: (UtilItemProps | ReactElement)[];\n appHeader?: boolean;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n items?: (NavListItemProps | ReactElement)[];\n nestedList?: boolean;\n collapsed?: boolean;\n id?: string;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n label: string;\n tooltipLabel: string;\n content?: ReactNode;\n items?: NavListItemProps[];\n onMenuToggle?: (state: 'open' | 'close') => void;\n childElementRef: RefObject<HTMLElement>;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {\n id?: string;\n visual?: ReactNode;\n primary: string;\n secondary?: string;\n href?: string;\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n items?: NavListItemProps[];\n collapseItems?: boolean;\n actions?: OperatorProps['actions'];\n dismissible?: boolean;\n onDismiss?: MouseEventHandler<HTMLElement>;\n forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n isMenuItem?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n operator: AppShellProps['operator'];\n searchInput?: AppShellProps['searchInput'];\n searchLabel?: AppShellProps['searchLabel'];\n searchPage?: AppShellProps['searchPage'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n items: (DrawerItemProps & ForwardProps)[];\n loading?: boolean;\n viewAll?: {\n onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n href?: string;\n } & ForwardProps;\n newNotifications?: number;\n onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n onItemPinToggle?: (id: string) => void;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n}\n\nexport interface NotificationListProps {\n /** A list of notification items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Number of new notifications. */\n newNotifications?: DrawerListProps['newNotifications'];\n /** Callback function run when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n /** Callback function that runs after the Drawer opens. */\n onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n /** Callback function that runs after the Drawer closes. */\n onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface RecentsListProps {\n /** A list of recent activity items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Callback function that runs when an item pin is clicked. */\n onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n /** Callback function that runs when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n /** Callback function that runs after the Drawer opens. */\n onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n /** Callback function that runs after the Drawer closes. */\n onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface PinsListProps {\n /** A list of pinned items. */\n items: DrawerListProps['items'];\n /**\n * If true, a loading indicator will render in place of the list.\n * @default false\n * */\n loading?: DrawerListProps['loading'];\n /**\n * A set of callback functions for the view all functionality, if provided.\n * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n viewAll?: DrawerListProps['viewAll'];\n /** Callback function that runs when an item pin is clicked. */\n onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n /** Callback function that runs when an item is clicked on. */\n onItemClick?: DrawerListProps['onItemClick'];\n}\n\nexport interface DrawerItemProps 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 /** A flag indicating if the item has been pinned or not. */\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: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n /** The handler hat is called when a pin icon is toggled on an item. */\n onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n headingText?: string;\n emptyText: string;\n displayRecents: boolean;\n displayPins?: boolean;\n}\n"]}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
2
|
import { openCloseStates } from '../../hooks/useTransitionState';
|
|
3
|
+
import { UtilItemProps } from './AppShell.types';
|
|
4
|
+
export interface AppShellDrawerContextValue {
|
|
5
|
+
drawerOpen: boolean;
|
|
6
|
+
openDrawer: (item: UtilItemProps) => void;
|
|
7
|
+
closeDrawer: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const AppShellDrawerContext: import("react").Context<AppShellDrawerContextValue>;
|
|
3
10
|
export interface AppShellContextValue {
|
|
4
11
|
navOpen: boolean;
|
|
5
|
-
menuOpen: boolean;
|
|
6
|
-
setMenuOpen: (open: boolean) => void;
|
|
7
12
|
navState: typeof openCloseStates[keyof typeof openCloseStates];
|
|
8
|
-
drawerOpen: boolean;
|
|
9
|
-
setDrawerOpen: (open: boolean) => void;
|
|
10
|
-
refocusEl: HTMLButtonElement | null;
|
|
11
|
-
setRefocusEl: (el: HTMLButtonElement | null) => void;
|
|
12
13
|
focusedImperatively: MutableRefObject<boolean>;
|
|
13
14
|
headerEl: HTMLDivElement | null;
|
|
14
15
|
previewTriggerRef: MutableRefObject<HTMLElement | null>;
|
|
15
16
|
searchContainerEl: HTMLElement | null;
|
|
16
17
|
setSearchContainerEl: (el: HTMLElement | null) => void;
|
|
17
18
|
}
|
|
18
|
-
export declare type DrawerContent = 'notifications' | 'recents';
|
|
19
19
|
declare const AppShellContext: import("react").Context<AppShellContextValue>;
|
|
20
20
|
export default AppShellContext;
|
|
21
21
|
//# sourceMappingURL=AppShellContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,
|
|
1
|
+
{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB,qDAIhC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,eAAe,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IAC/D,mBAAmB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxD,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,oBAAoB,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,QAAA,MAAM,eAAe,+CAkBnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
|
+
export const AppShellDrawerContext = createContext({
|
|
3
|
+
drawerOpen: false,
|
|
4
|
+
openDrawer: () => { },
|
|
5
|
+
closeDrawer: () => { }
|
|
6
|
+
});
|
|
2
7
|
const AppShellContext = createContext({
|
|
3
8
|
navOpen: false,
|
|
4
|
-
menuOpen: false,
|
|
5
|
-
setMenuOpen: () => { },
|
|
6
9
|
navState: 'closed',
|
|
7
|
-
drawerOpen: false,
|
|
8
|
-
setDrawerOpen: () => { },
|
|
9
|
-
refocusEl: null,
|
|
10
|
-
setRefocusEl: () => { },
|
|
11
10
|
focusedImperatively: {
|
|
12
11
|
get current() {
|
|
13
12
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,OAAO,CAAC;AAYxD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B;IAC7E,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;CACtB,CAAC,CAAC;AAYH,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;IAClB,mBAAmB,EAAE;QACnB,IAAI,OAAO;YACT,OAAO,KAAK,CAAC;QACf,CAAC;KACF;IACD,QAAQ,EAAE,IAAI;IACd,iBAAiB,EAAE;QACjB,IAAI,OAAO;YACT,OAAO,IAAI,CAAC;QACd,CAAC;QACD,gEAAgE;QAChE,IAAI,OAAO,CAAC,GAAG,IAAG,CAAC;KACpB;IACD,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext, MutableRefObject } from 'react';\n\nimport { openCloseStates } from '../../hooks/useTransitionState';\n\nimport { UtilItemProps } from './AppShell.types';\n\nexport interface AppShellDrawerContextValue {\n drawerOpen: boolean;\n openDrawer: (item: UtilItemProps) => void;\n closeDrawer: () => void;\n}\n\nexport const AppShellDrawerContext = createContext<AppShellDrawerContextValue>({\n drawerOpen: false,\n openDrawer: () => {},\n closeDrawer: () => {}\n});\n\nexport interface AppShellContextValue {\n navOpen: boolean;\n navState: typeof openCloseStates[keyof typeof openCloseStates];\n focusedImperatively: MutableRefObject<boolean>;\n headerEl: HTMLDivElement | null;\n previewTriggerRef: MutableRefObject<HTMLElement | null>;\n searchContainerEl: HTMLElement | null;\n setSearchContainerEl: (el: HTMLElement | null) => void;\n}\n\nconst AppShellContext = createContext<AppShellContextValue>({\n navOpen: false,\n navState: 'closed',\n focusedImperatively: {\n get current() {\n return false;\n }\n },\n headerEl: null,\n previewTriggerRef: {\n get current() {\n return null;\n },\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n set current(val) {}\n },\n searchContainerEl: null,\n setSearchContainerEl: () => {}\n});\n\nexport default AppShellContext;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellSearch.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"AppShellSearch.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAOxD,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAQ1E,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,CA2DlD,CAAC"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useBreakpoint, useI18n } from '../../hooks';
|
|
4
4
|
import Icon from '../Icon';
|
|
5
5
|
import SearchInput from '../SearchInput';
|
|
6
6
|
import NavigationListItemWrapper from './NavigationListItemWrapper';
|
|
7
|
-
import AppShellContext from './AppShellContext';
|
|
8
7
|
import { StyledAppShellSearchButton, StyledAppshellSearchContainer, StyledAppShellSearchDecoration, StyledSearchForm } from './AppShellSearch.styles';
|
|
9
|
-
export const AppShellSearch = ({ collapsed,
|
|
10
|
-
const
|
|
8
|
+
export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
|
|
9
|
+
const btnElRef = useRef(null);
|
|
11
10
|
const searchRef = useRef();
|
|
12
11
|
const t = useI18n();
|
|
13
12
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
14
|
-
const
|
|
13
|
+
const isMediumOrAbove = useBreakpoint('md');
|
|
15
14
|
const onMenuToggle = state => {
|
|
16
15
|
setMenuOpen(state === 'open');
|
|
17
16
|
};
|
|
@@ -22,11 +21,11 @@ export const AppShellSearch = ({ collapsed, isMediumOrAbove, searchLabel, search
|
|
|
22
21
|
searchRef.current?.focus();
|
|
23
22
|
}
|
|
24
23
|
};
|
|
25
|
-
|
|
24
|
+
btnElRef.current?.addEventListener('keydown', onTab);
|
|
26
25
|
return () => {
|
|
27
|
-
|
|
26
|
+
btnElRef.current?.removeEventListener('keydown', onTab);
|
|
28
27
|
};
|
|
29
|
-
}, [
|
|
30
|
-
return (_jsx(StyledSearchForm, { role: 'search', "aria-label": searchLabel, collapsed: collapsed, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: collapsed ? (_jsx(NavigationListItemWrapper, {
|
|
28
|
+
}, [searchRef, menuOpen]);
|
|
29
|
+
return (_jsx(StyledSearchForm, { role: 'search', "aria-label": searchLabel, collapsed: collapsed, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: collapsed ? (_jsx(NavigationListItemWrapper, { childElementRef: btnElRef, 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(StyledAppShellSearchButton, { ref: btnElRef, children: _jsx(StyledAppShellSearchDecoration, { children: _jsx(Icon, { name: 'search' }) }) }) })) : (_jsx(SearchInput, { ...searchInput })) }));
|
|
31
30
|
};
|
|
32
31
|
//# sourceMappingURL=AppShellSearch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellSearch.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,
|
|
1
|
+
{"version":3,"file":"AppShellSearch.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,8BAA8B,EAC9B,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EACX,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,EAAoB,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAA4C,KAAK,CAAC,EAAE;QACpE,WAAW,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACrD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,gBACD,WAAW,EACvB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAE/B,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,yBAAyB,IACxB,eAAe,EAAE,QAAQ,EACzB,KAAK,EAAE,CAAC,CAAC,4BAA4B,CAAC,EACtC,YAAY,EAAE,CAAC,CAAC,4BAA4B,CAAC,EAC7C,YAAY,EAAE,YAAY,EAC1B,OAAO,EACL,KAAC,6BAA6B,cAC5B,KAAC,WAAW,OAAK,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,GAAI,GACzC,YAGlC,KAAC,0BAA0B,IAAC,GAAG,EAAE,QAAQ,YACvC,KAAC,8BAA8B,cAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACS,GACN,GACH,CAC7B,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,OAAK,WAAW,GAAI,CACjC,GACgB,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useEffect, useRef, useState } 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 StyledSearchForm\n} from './AppShellSearch.styles';\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 searchRef = useRef<HTMLInputElement>();\n const t = useI18n();\n const [menuOpen, setMenuOpen] = useState(false);\n const isMediumOrAbove = useBreakpoint('md');\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 return (\n <StyledSearchForm\n role='search'\n aria-label={searchLabel}\n collapsed={collapsed}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n {collapsed ? (\n <NavigationListItemWrapper\n childElementRef={btnElRef}\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 <StyledAppShellSearchButton ref={btnElRef}>\n <StyledAppShellSearchDecoration>\n <Icon name='search' />\n </StyledAppShellSearchDecoration>\n </StyledAppShellSearchButton>\n </NavigationListItemWrapper>\n ) : (\n <SearchInput {...searchInput} />\n )}\n </StyledSearchForm>\n );\n};\n"]}
|
|
@@ -4,7 +4,9 @@ interface DrawerViewProps {
|
|
|
4
4
|
header: string;
|
|
5
5
|
onDrawerOpen?: () => void;
|
|
6
6
|
onDrawerClose?: () => void;
|
|
7
|
+
drawerOpen: boolean;
|
|
8
|
+
setDrawerOpen: (open: boolean) => void;
|
|
7
9
|
}
|
|
8
|
-
declare const _default: (
|
|
10
|
+
declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }: DrawerViewProps) => JSX.Element;
|
|
9
11
|
export default _default;
|
|
10
12
|
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -1 +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;
|
|
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;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBAyEE"}
|
|
@@ -13,9 +13,9 @@ import { tryCatch } from '../../utils';
|
|
|
13
13
|
import AppShellContext from './AppShellContext';
|
|
14
14
|
import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
|
|
15
15
|
registerIcon(arrowLeftIcon);
|
|
16
|
-
export default (
|
|
17
|
-
const {
|
|
18
|
-
const
|
|
16
|
+
export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
|
|
17
|
+
const { focusedImperatively } = useContext(AppShellContext);
|
|
18
|
+
const returnFocusRef = useRef();
|
|
19
19
|
const theme = useTheme();
|
|
20
20
|
const backButtonRef = useRef(null);
|
|
21
21
|
const appShellBg = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
@@ -33,18 +33,17 @@ export default (props) => {
|
|
|
33
33
|
};
|
|
34
34
|
const { ltr, rtl } = useDirection();
|
|
35
35
|
const t = useI18n();
|
|
36
|
-
return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true,
|
|
36
|
+
return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
|
|
37
|
+
returnFocusRef.current = document.activeElement ?? undefined;
|
|
38
|
+
}, onAfterOpen: () => {
|
|
37
39
|
if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
|
|
38
40
|
focusedImperatively.current = true;
|
|
39
41
|
backButtonRef.current.focus();
|
|
40
42
|
}
|
|
41
43
|
onDrawerOpen?.();
|
|
42
44
|
}, onAfterClose: () => {
|
|
43
|
-
if (refocusEl && document.activeElement !== refocusEl) {
|
|
44
|
-
focusedImperatively.current = true;
|
|
45
|
-
refocusEl.focus();
|
|
46
|
-
}
|
|
47
45
|
onDrawerClose?.();
|
|
46
|
+
returnFocusRef.current?.focus();
|
|
48
47
|
}, 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 })] }) }));
|
|
49
48
|
};
|
|
50
49
|
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAa,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,aAAa,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledDrawerBackButton,\n StyledDrawerHeading,\n StyledDrawerListContainer\n} from './Drawer.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n content: ReactNode;\n header: string;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen\n}: DrawerViewProps) => {\n const { focusedImperatively } = useContext(AppShellContext);\n const returnFocusRef = useRef<HTMLElement>();\n const theme = useTheme();\n\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const appShellBg = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const appShellTheme = {\n base: {\n palette: {\n 'primary-background': appShellBg,\n 'foreground-color': 'rgba(255, 255, 255, 0.7)',\n interactive: theme.base.colors.blue.light\n },\n shadow: {\n focus: theme.base.shadow['focus-inverted']\n }\n }\n };\n\n const { ltr, rtl } = useDirection();\n const t = useI18n();\n\n return (\n <Configuration theme={appShellTheme}>\n <Drawer\n as={StyledDrawerWrapper}\n position='fixed'\n placement='left'\n open={drawerOpen}\n nullWhenClosed\n onBeforeOpen={() => {\n returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n }}\n onAfterOpen={() => {\n if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n focusedImperatively.current = true;\n backButtonRef.current.focus();\n }\n onDrawerOpen?.();\n }}\n onAfterClose={() => {\n onDrawerClose?.();\n returnFocusRef.current?.focus();\n }}\n >\n <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n {rtl && <Text>{header}</Text>}\n <BareButton\n as={StyledDrawerBackButton}\n ref={backButtonRef}\n onClick={() => setDrawerOpen(false)}\n aria-label={t('close_noun', [header])}\n >\n <Icon name='arrow-left' />\n </BareButton>\n {ltr && <Text>{header}</Text>}\n </Flex>\n <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n {content}\n </Flex>\n </Drawer>\n </Configuration>\n );\n};\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { NavListProps } from './AppShell.types';
|
|
2
|
+
import { NavListItemProps, NavListProps } from './AppShell.types';
|
|
3
|
+
export declare const NavigationListItem: FC<NavListItemProps>;
|
|
3
4
|
declare const NavigationList: FC<NavListProps>;
|
|
4
5
|
export default NavigationList;
|
|
5
6
|
//# sourceMappingURL=NavigationList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,
|
|
1
|
+
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AAsBf,OAAO,EACL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AAmF1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAqHnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA6CpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
|
-
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
4
|
-
import { useTheme, useArrows, useConsolidatedRef, useDirection, useUID, useI18n,
|
|
3
|
+
import { isValidElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { useTheme, useArrows, useConsolidatedRef, useDirection, useUID, useI18n, useEscape } from '../../hooks';
|
|
5
5
|
import ExpandCollapse from '../ExpandCollapse';
|
|
6
6
|
import BareButton from '../Button/BareButton';
|
|
7
7
|
import Flex from '../Flex';
|
|
@@ -14,7 +14,7 @@ import { StyledNavList, StyledNestedNavList, StyledAppShellNavIcon, StyledNavLis
|
|
|
14
14
|
import AppShellContext from './AppShellContext';
|
|
15
15
|
const NavigationMenu = props => {
|
|
16
16
|
const { navOpen } = useContext(AppShellContext);
|
|
17
|
-
const { visual, primary, secondary, href, onClick, items, onDismiss,
|
|
17
|
+
const { visual, primary, secondary, href, onClick, items, onDismiss, actions, forwardedRef, ...restProps } = props;
|
|
18
18
|
const uid = useUID();
|
|
19
19
|
const [collapsed, setCollapsed] = useState(true);
|
|
20
20
|
const toggleCollapsed = useCallback((e) => {
|
|
@@ -22,25 +22,21 @@ const NavigationMenu = props => {
|
|
|
22
22
|
setCollapsed(state => !state);
|
|
23
23
|
}, [setCollapsed]);
|
|
24
24
|
const itemRef = useConsolidatedRef(forwardedRef);
|
|
25
|
-
const onKeyDown = useCallback(({ key }) => {
|
|
26
|
-
if (key === 'Escape') {
|
|
27
|
-
setCollapsed(true);
|
|
28
|
-
itemRef.current?.focus();
|
|
29
|
-
}
|
|
30
|
-
}, []);
|
|
31
25
|
const menuRef = useRef(null);
|
|
32
26
|
useArrows(menuRef, { selector: '[role="menuitem"]', cycle: true });
|
|
27
|
+
useEscape(() => {
|
|
28
|
+
setCollapsed(true);
|
|
29
|
+
itemRef.current?.focus();
|
|
30
|
+
}, menuRef);
|
|
33
31
|
const { end } = useDirection();
|
|
34
|
-
return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed,
|
|
32
|
+
return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, ref: menuRef },
|
|
35
33
|
_jsxs(BareButton, { id: uid, ref: itemRef, tabIndex: collapsed ? 0 : -1, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
|
|
36
34
|
_jsx(NavigationList, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
|
|
37
35
|
};
|
|
38
|
-
const NavigationListItem =
|
|
36
|
+
export const NavigationListItem = ({ visual, primary, secondary, href, onClick, items, collapseItems = false, dismissible = false, onDismiss, actions, forwardedRef, isMenuItem, ...restProps }) => {
|
|
39
37
|
const { navOpen } = useContext(AppShellContext);
|
|
40
|
-
const { visual, primary, secondary, href, onClick, items, collapseItems = false, dismissible = false, onDismiss, active, actions, forwardedRef, isMenuItem, ...restProps } = props;
|
|
41
38
|
const t = useI18n();
|
|
42
|
-
const
|
|
43
|
-
const listItemRef = useConsolidatedRef(forwardedRef, setListItemChildren);
|
|
39
|
+
const listItemRef = useConsolidatedRef(forwardedRef);
|
|
44
40
|
const hasItems = (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);
|
|
45
41
|
const compProps = {
|
|
46
42
|
onClick: (e) => {
|
|
@@ -82,16 +78,15 @@ const NavigationListItem = props => {
|
|
|
82
78
|
}, [navOpen]);
|
|
83
79
|
const { end } = useDirection();
|
|
84
80
|
return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: true },
|
|
85
|
-
_jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary,
|
|
81
|
+
_jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childElementRef: listItemRef, items: actions || items || caseItems, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem
|
|
86
82
|
? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }
|
|
87
83
|
: {}), children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), (hasItems || actions) && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }) }),
|
|
88
|
-
dismissible && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
|
|
84
|
+
dismissible && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
|
|
89
85
|
hasItems && (
|
|
90
86
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
91
87
|
_jsx(NavigationList, { nestedList: true, items: actions || items, collapsed: !navOpen || collapseItems }))));
|
|
92
88
|
};
|
|
93
|
-
const NavigationList =
|
|
94
|
-
const { items = [], nestedList, id, collapsed } = props;
|
|
89
|
+
const NavigationList = ({ items = [], nestedList, id, collapsed }) => {
|
|
95
90
|
let Component = StyledNavList;
|
|
96
91
|
let ItemComponent;
|
|
97
92
|
const { navOpen } = useContext(AppShellContext);
|
|
@@ -109,7 +104,9 @@ const NavigationList = props => {
|
|
|
109
104
|
};
|
|
110
105
|
Component = StyledNestedNavList;
|
|
111
106
|
}
|
|
112
|
-
return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items
|
|
107
|
+
return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items.map(item => {
|
|
108
|
+
if (isValidElement(item))
|
|
109
|
+
return item;
|
|
113
110
|
if (item.items && item.items.length > 0 && navOpen) {
|
|
114
111
|
ItemComponent = NavigationMenu;
|
|
115
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAKL,WAAW,EACX,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,OAAO,EACP,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAOpE,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,cAAc,GAAqB,KAAK,CAAC,EAAE;IAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,EACN,OAAO,EACP,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAgC,EAAE,EAAE;QACnC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEjD,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACvD,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC1B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEnE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,eAAC,iBAAiB,OACZ,SAAS,EACb,GAAG,EAAE,OAAO,EACZ,mBAAmB,EAAE,SAAS,EAC9B,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,OAAO;QAEZ,MAAC,UAAU,IACT,EAAE,EAAE,GAAG,EACP,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACb,CAAC,SAAS,mBACV,GAAG,GAAG,OAAO,gBAChB,OAAO,EACnB,OAAO,EAAE,eAAe,aAEvB,MAAM,EACN,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,aAC3D,yBAAO,OAAO,GAAQ,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,yBAAO,OAAO,GAAQ,CACvB,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,qBAAqB,GAAI,IAC9C;QAEb,KAAC,cAAc,IACb,EAAE,EAAE,GAAG,GAAG,OAAO,EACjB,UAAU,QACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,OAAO,IAAI,SAAS,GAChC,CACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAyB,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,MAAM,EACN,OAAO,EACP,YAAY,EACZ,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAC9E,MAAM,WAAW,GAAG,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAE1E,MAAM,QAAQ,GACZ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/F,MAAM,SAAS,GAMX;QACF,OAAO,EAAE,CAAC,CAAqE,EAAE,EAAE;YACjF,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;QACD,IAAI;QACJ,YAAY,EAAE,OAAO;KACtB,CAAC;IAEF,IAAI,SAAuD,CAAC;IAC5D,IAAI,SAAS,EAAE;QACb,SAAS,GAAG;YACV;gBACE,OAAO,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,CAAC;gBACnC,OAAO;aACR;YACD;gBACE,OAAO,EAAE,CAAC,CAAC,cAAc,CAAC;gBAC1B,OAAO,EAAE,SAAS;aACnB;SACF,CAAC;KACH;IAED,IAAI,SAAsB,CAAC;IAE3B,IAAI,IAAI,EAAE;QACR,SAAS,GAAG,IAAI,CAAC;KAClB;SAAM;QACL,SAAS,GAAG,UAAU,CAAC;KACxB;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE;YACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACtD,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,UAAU,IAAI,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,cAAc,CAAC;YACtF,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,eAAC,iBAAiB,OAAK,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,mBAAmB;QAEjE,KAAC,yBAAyB,IACxB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,OAAO,EAC7D,KAAK,EAAE,OAAO,EACd,eAAe,EAAE,gBAAgB,EACjC,KAAK,EAAE,OAAO,IAAI,KAAK,IAAI,SAAS,EACpC,OAAO,EAAE,OAAO,YAEhB,MAAC,SAAS,OACJ,SAAS,EACb,GAAG,EAAE,WAAkB,KACnB,CAAC,OAAO,IAAI,UAAU;oBACxB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE;oBAC3D,CAAC,CAAC,EAAE,CAAC,aAEN,MAAM,EACN,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,aAC3D,yBAAO,OAAO,GAAQ,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,yBAAO,OAAO,GAAQ,CACvB,EACA,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,qBAAqB,GAAI,IACzE,GACc;QAC3B,WAAW,IAAI,CACd,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,cAAc,CAAC,YAE7B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV;QACA,QAAQ,IAAI;QACX,mEAAmE;QACnE,KAAC,cAAc,IAAC,UAAU,QAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,CAAC,OAAO,IAAI,aAAa,GAAI,CAC7F,CACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAqB,KAAK,CAAC,EAAE;IAC/C,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxD,IAAI,SAAS,GAAgB,aAAa,CAAC;IAC3C,IAAI,aAA0B,CAAC;IAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEhD,IAAI,QAAQ,GAMR;QACF,SAAS,EAAE,CAAC,CAAC,SAAS;KACvB,CAAC;IAEF,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,QAAQ,EAAE,CAAC;IAEf,IAAI,UAAU,EAAE;QACd,QAAQ,GAAG;YACT,EAAE,EAAE,cAAc;YAClB,WAAW,EAAE,IAAI;YACjB,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK;YACtF,GAAG,QAAQ;SACZ,CAAC;QAEF,SAAS,GAAG,mBAAmB,CAAC;KACjC;IAED,OAAO,CACL,KAAC,SAAS,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAM,QAAQ,YAClE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YACjB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,EAAE;gBAClD,aAAa,GAAG,cAAc,CAAC;aAChC;iBAAM;gBACL,aAAa,GAAG,kBAAkB,CAAC;aACpC;YACD,OAAO,KAAC,aAAa,IAA+B,UAAU,EAAE,UAAU,KAAM,IAAI,IAAzD,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAAsC,CAAC;QAC3F,CAAC,CAAC,GACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n ElementType,\n FC,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useArrows,\n useConsolidatedRef,\n useDirection,\n useUID,\n useI18n,\n useElement\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n NavListItemProps,\n NavListItemWrapperProps,\n NavListProps,\n NavMenuProps\n} from './AppShell.types';\nimport {\n StyledNavList,\n StyledNestedNavList,\n StyledAppShellNavIcon,\n StyledNavListItem,\n StyledCaseClose\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n const { navOpen } = useContext(AppShellContext);\n const {\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n onDismiss,\n active,\n actions,\n forwardedRef,\n ...restProps\n } = props;\n\n const uid = useUID();\n\n const [collapsed, setCollapsed] = useState(true);\n\n const toggleCollapsed = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setCollapsed(state => !state);\n },\n [setCollapsed]\n );\n\n const itemRef = useConsolidatedRef(forwardedRef);\n\n const onKeyDown = useCallback(({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setCollapsed(true);\n itemRef.current?.focus();\n }\n }, []);\n\n const menuRef = useRef<HTMLLIElement>(null);\n\n useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n const { end } = useDirection();\n\n return (\n <StyledNavListItem\n {...restProps}\n key={primary}\n nestedListCollapsed={collapsed}\n onKeyDown={onKeyDown}\n ref={menuRef}\n >\n <BareButton\n id={uid}\n ref={itemRef}\n tabIndex={collapsed ? 0 : -1}\n aria-expanded={!collapsed}\n aria-controls={`${uid}-menu`}\n aria-label={primary}\n onClick={toggleCollapsed}\n >\n {visual}\n {secondary ? (\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <span>{primary}</span>\n <Text variant='secondary'>{secondary}</Text>\n </Flex>\n ) : (\n <span>{primary}</span>\n )}\n <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />\n </BareButton>\n {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n <NavigationList\n id={`${uid}-menu`}\n nestedList\n items={items}\n collapsed={!navOpen || collapsed}\n />\n </StyledNavListItem>\n );\n};\n\nconst NavigationListItem: FC<NavListItemProps> = props => {\n const { navOpen } = useContext(AppShellContext);\n const {\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n collapseItems = false,\n dismissible = false,\n onDismiss,\n active,\n actions,\n forwardedRef,\n isMenuItem,\n ...restProps\n } = props;\n\n const t = useI18n();\n const [listItemChildren, setListItemChildren] = useElement<HTMLElement>(null);\n const listItemRef = useConsolidatedRef(forwardedRef, setListItemChildren);\n\n const hasItems =\n (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n const compProps: {\n href?: string;\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n actions?: NavListItemProps['actions'];\n popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n 'aria-label'?: string;\n } = {\n onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n e.stopPropagation();\n onClick?.(e);\n },\n href,\n 'aria-label': primary\n };\n\n let caseItems: NavListItemWrapperProps['items'] | undefined;\n if (onDismiss) {\n caseItems = [\n {\n primary: t('go_to_noun', [primary]),\n onClick\n },\n {\n primary: t('dismiss_case'),\n onClick: onDismiss\n }\n ];\n }\n\n let Component: ElementType;\n\n if (href) {\n Component = Link;\n } else {\n Component = BareButton;\n }\n\n useEffect(() => {\n if (!navOpen && actions) {\n const node = document.getElementsByTagName('body')[0];\n const clickEvent = document.createEvent('MouseEvent');\n clickEvent.initEvent('mousedown', true, true);\n node.dispatchEvent(clickEvent);\n }\n if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n listItemRef.current?.focus();\n }, [navOpen]);\n\n const { end } = useDirection();\n\n return (\n <StyledNavListItem {...restProps} key={primary} nestedListCollapsed>\n {/* forwardedRef typed as 'any' due to ambiguity of Component element type */}\n <NavigationListItemWrapper\n tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n label={primary}\n childrenElement={listItemChildren}\n items={actions || items || caseItems}\n navOpen={navOpen}\n >\n <Component\n {...compProps}\n ref={listItemRef as any}\n {...(navOpen && isMenuItem\n ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }\n : {})}\n >\n {visual}\n {secondary ? (\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <span>{primary}</span>\n <Text variant='secondary'>{secondary}</Text>\n </Flex>\n ) : (\n <span>{primary}</span>\n )}\n {(hasItems || actions) && <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />}\n </Component>\n </NavigationListItemWrapper>\n {dismissible && (\n <Button\n icon\n variant='simple'\n as={StyledCaseClose}\n onClick={onDismiss}\n aria-label={t('dismiss_case')}\n >\n <Icon name='times' />\n </Button>\n )}\n {hasItems && (\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n )}\n </StyledNavListItem>\n );\n};\n\nconst NavigationList: FC<NavListProps> = props => {\n const { items = [], nestedList, id, collapsed } = props;\n let Component: ElementType = StyledNavList;\n let ItemComponent: ElementType;\n const { navOpen } = useContext(AppShellContext);\n\n let fwdProps: {\n as?: ElementType;\n forwardedAs?: ElementType;\n nullWhenCollapsed?: boolean;\n transitionSpeed?: string;\n collapsed: boolean;\n } = {\n collapsed: !!collapsed\n };\n\n const {\n base: { animation }\n } = useTheme();\n\n if (nestedList) {\n fwdProps = {\n as: ExpandCollapse,\n forwardedAs: 'ul',\n nullWhenCollapsed: true,\n transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n ...fwdProps\n };\n\n Component = StyledNestedNavList;\n }\n\n return (\n <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n {items?.map(item => {\n if (item.items && item.items.length > 0 && navOpen) {\n ItemComponent = NavigationMenu;\n } else {\n ItemComponent = NavigationListItem;\n }\n return <ItemComponent key={item.id || item.primary} isMenuItem={nestedList} {...item} />;\n })}\n </Component>\n );\n};\n\nexport default NavigationList;\n"]}
|
|
1
|
+
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ElementType,\n FC,\n isValidElement,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useArrows,\n useConsolidatedRef,\n useDirection,\n useUID,\n useI18n,\n useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n NavListItemProps,\n NavListItemWrapperProps,\n NavListProps,\n NavMenuProps\n} from './AppShell.types';\nimport {\n StyledNavList,\n StyledNestedNavList,\n StyledAppShellNavIcon,\n StyledNavListItem,\n StyledCaseClose\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n const { navOpen } = useContext(AppShellContext);\n const {\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n onDismiss,\n actions,\n forwardedRef,\n ...restProps\n } = props;\n\n const uid = useUID();\n\n const [collapsed, setCollapsed] = useState(true);\n\n const toggleCollapsed = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setCollapsed(state => !state);\n },\n [setCollapsed]\n );\n\n const itemRef = useConsolidatedRef(forwardedRef);\n\n const menuRef = useRef<HTMLLIElement>(null);\n\n useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n useEscape(() => {\n setCollapsed(true);\n itemRef.current?.focus();\n }, menuRef);\n\n const { end } = useDirection();\n\n return (\n <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n <BareButton\n id={uid}\n ref={itemRef}\n tabIndex={collapsed ? 0 : -1}\n aria-expanded={!collapsed}\n aria-controls={`${uid}-menu`}\n aria-label={primary}\n onClick={toggleCollapsed}\n >\n {visual}\n {secondary ? (\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <span>{primary}</span>\n <Text variant='secondary'>{secondary}</Text>\n </Flex>\n ) : (\n <span>{primary}</span>\n )}\n <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />\n </BareButton>\n {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n <NavigationList\n id={`${uid}-menu`}\n nestedList\n items={items}\n collapsed={!navOpen || collapsed}\n />\n </StyledNavListItem>\n );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n collapseItems = false,\n dismissible = false,\n onDismiss,\n actions,\n forwardedRef,\n isMenuItem,\n ...restProps\n}) => {\n const { navOpen } = useContext(AppShellContext);\n\n const t = useI18n();\n const listItemRef = useConsolidatedRef(forwardedRef);\n\n const hasItems =\n (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n const compProps: {\n href?: string;\n onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n actions?: NavListItemProps['actions'];\n popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n 'aria-label'?: string;\n } = {\n onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n e.stopPropagation();\n onClick?.(e);\n },\n href,\n 'aria-label': primary\n };\n\n let caseItems: NavListItemWrapperProps['items'] | undefined;\n if (onDismiss) {\n caseItems = [\n {\n primary: t('go_to_noun', [primary]),\n onClick\n },\n {\n primary: t('dismiss_case'),\n onClick: onDismiss\n }\n ];\n }\n\n let Component: ElementType;\n\n if (href) {\n Component = Link;\n } else {\n Component = BareButton;\n }\n\n useEffect(() => {\n if (!navOpen && actions) {\n const node = document.getElementsByTagName('body')[0];\n const clickEvent = document.createEvent('MouseEvent');\n clickEvent.initEvent('mousedown', true, true);\n node.dispatchEvent(clickEvent);\n }\n if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n listItemRef.current?.focus();\n }, [navOpen]);\n\n const { end } = useDirection();\n\n return (\n <StyledNavListItem {...restProps} key={primary} nestedListCollapsed>\n {/* forwardedRef typed as 'any' due to ambiguity of Component element type */}\n <NavigationListItemWrapper\n tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n label={primary}\n childElementRef={listItemRef}\n items={actions || items || caseItems}\n >\n <Component\n {...compProps}\n ref={listItemRef}\n {...(navOpen && isMenuItem\n ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }\n : {})}\n >\n {visual}\n {secondary ? (\n <Flex container={{ direction: 'column', alignItems: 'start' }}>\n <span>{primary}</span>\n <Text variant='secondary'>{secondary}</Text>\n </Flex>\n ) : (\n <span>{primary}</span>\n )}\n {(hasItems || actions) && <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />}\n </Component>\n </NavigationListItemWrapper>\n {dismissible && navOpen && (\n <Button\n icon\n variant='simple'\n as={StyledCaseClose}\n onClick={onDismiss}\n aria-label={t('dismiss_case')}\n >\n <Icon name='times' />\n </Button>\n )}\n {hasItems && (\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n )}\n </StyledNavListItem>\n );\n};\n\nconst NavigationList: FC<NavListProps> = ({ items = [], nestedList, id, collapsed }) => {\n let Component: ElementType = StyledNavList;\n let ItemComponent: ElementType;\n const { navOpen } = useContext(AppShellContext);\n\n let fwdProps: {\n as?: ElementType;\n forwardedAs?: ElementType;\n nullWhenCollapsed?: boolean;\n transitionSpeed?: string;\n collapsed: boolean;\n } = {\n collapsed: !!collapsed\n };\n\n const {\n base: { animation }\n } = useTheme();\n\n if (nestedList) {\n fwdProps = {\n as: ExpandCollapse,\n forwardedAs: 'ul',\n nullWhenCollapsed: true,\n transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n ...fwdProps\n };\n\n Component = StyledNestedNavList;\n }\n\n return (\n <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n {items.map(item => {\n if (isValidElement(item)) return item;\n\n if (item.items && item.items.length > 0 && navOpen) {\n ItemComponent = NavigationMenu;\n } else {\n ItemComponent = NavigationListItem;\n }\n return <ItemComponent key={item.id || item.primary} isMenuItem={nestedList} {...item} />;\n })}\n </Component>\n );\n};\n\nexport default NavigationList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AAWpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AA+B3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AAWpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AA+B3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAoHhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|