@redsift/design-system 6.0.0-alpha.10 → 6.0.0-alpha.11
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/esm/_internal/AppBar.js +1 -1
- package/esm/_internal/AppBar.js.map +1 -1
- package/esm/_internal/AppContent.js +1 -1
- package/esm/_internal/AppContent.js.map +1 -1
- package/esm/_internal/AppSidePanel.js +1 -1
- package/esm/_internal/AppSidePanel.js.map +1 -1
- package/esm/_internal/SideNavigationMenu.js +5 -5
- package/esm/_internal/SideNavigationMenu.js.map +1 -1
- package/esm/_internal/SideNavigationMenuItem.js +5 -5
- package/esm/_internal/SideNavigationMenuItem.js.map +1 -1
- package/esm/_internal/types.js.map +1 -1
- package/esm/_internal/useSideNavigationMenuBar.js +1 -1
- package/esm/_internal/useSideNavigationMenuBar.js.map +1 -1
- package/package.json +4 -4
- package/style/redsift.css +16 -11
- package/types.d.ts +3 -2
package/esm/_internal/AppBar.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
12
12
|
/**
|
|
13
13
|
* Component style.
|
|
14
14
|
*/
|
|
15
|
-
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-
|
|
15
|
+
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-component-app-bar-background);\n color: var(--redsift-color-component-app-bar-text);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ", "\n \n ", "\n\n h1 {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-component-app-bar-expand-icon-resting);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-component-app-bar-expand-icon-background-hover);\n \n i {\n color: var(--redsift-color-component-app-bar-expand-icon-hover);\n }\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n"])), _ref => {
|
|
16
16
|
let {
|
|
17
17
|
$isSidePanelCollapsed
|
|
18
18
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-
|
|
1
|
+
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-component-app-bar-background);\n color: var(--redsift-color-component-app-bar-text);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n h1 {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-component-app-bar-expand-icon-resting);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-component-app-bar-expand-icon-background-hover);\n \n i {\n color: var(--redsift-color-component-app-bar-expand-icon-hover);\n }\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { mdiMenu } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppBar';\nconst CLASSNAME = 'redsift-app-bar';\nconst DEFAULT_PROPS: Partial<AppBarProps> = {};\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n const barRef = ref || useRef<HTMLHeadingElement>();\n\n const {\n children,\n className,\n fallbackTitle,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n title: propsTitle,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppBar\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppBar.className, className)}\n ref={barRef as RefObject<HTMLHeadingElement>}\n >\n <div className={`${AppBar.className}__left`}>\n {appContainerState && appContainerState.isSidePanelCollapsed ? (\n <IconButton\n className={`${AppBar.className}-left__expand-button`}\n {...iconButtonProps}\n aria-label=\"Expand left side panel\"\n icon={mdiMenu}\n onPress={appContainerState.expandSidePanel}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null}\n {propsTitle && typeof propsTitle !== 'string' ? (\n <>{propsTitle}</>\n ) : typeof propsTitle === 'string' ? (\n <h1>{propsTitle}</h1>\n ) : appContainerState && appContainerState.title ? (\n <h1>{appContainerState.title}</h1>\n ) : fallbackTitle ? (\n <h1>{fallbackTitle}</h1>\n ) : null}\n </div>\n <div className={`${AppBar.className}__right`}>\n {children}\n </div>\n </StyledAppBar>\n );\n});\nAppBar.className = CLASSNAME;\nAppBar.defaultProps = DEFAULT_PROPS;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["StyledAppBar","styled","header","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppBar","forwardRef","props","ref","barRef","useRef","children","className","fallbackTitle","iconButtonProps","iconButtonRef","title","propsTitle","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","mdiMenu","expandSidePanel","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
10
10
|
/**
|
|
11
11
|
* Component style.
|
|
12
12
|
*/
|
|
13
|
-
const StyledAppContent = styled.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-sizing: border-box;\n margin-top: 72px;\n padding: 16px 32px;\n\n ", "\n\n ", "\n"])), _ref => {
|
|
13
|
+
const StyledAppContent = styled.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-sizing: border-box;\n margin-top: 72px;\n min-height: calc(100vh - 72px);\n padding: 16px 32px;\n\n ", "\n\n ", "\n"])), _ref => {
|
|
14
14
|
let {
|
|
15
15
|
$isSidePanelCollapsed
|
|
16
16
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppContent.js","sources":["../../../src/components/app-content/styles.ts","../../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n box-sizing: border-box;\n margin-top: 72px;\n padding: 16px 32px;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n\n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppContent';\nconst CLASSNAME = 'redsift-app-content';\nconst DEFAULT_PROPS: Partial<AppContentProps> = {};\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n const contentRef = ref || useRef<HTMLElement>();\n\n const {\n children,\n className,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppContent\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppContent.className, className)}\n ref={contentRef as RefObject<HTMLElement>}\n >\n {children}\n </StyledAppContent>\n );\n});\nAppContent.className = CLASSNAME;\nAppContent.defaultProps = DEFAULT_PROPS;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppContent","forwardRef","props","ref","contentRef","useRef","children","className","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","defaultProps","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAAV,
|
|
1
|
+
{"version":3,"file":"AppContent.js","sources":["../../../src/components/app-content/styles.ts","../../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n box-sizing: border-box;\n margin-top: 72px;\n min-height: calc(100vh - 72px);\n padding: 16px 32px;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n\n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppContent';\nconst CLASSNAME = 'redsift-app-content';\nconst DEFAULT_PROPS: Partial<AppContentProps> = {};\n\n/**\n * The AppContent component.\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n const contentRef = ref || useRef<HTMLElement>();\n\n const {\n children,\n className,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppContent\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppContent.className, className)}\n ref={contentRef as RefObject<HTMLElement>}\n >\n {children}\n </StyledAppContent>\n );\n});\nAppContent.className = CLASSNAME;\nAppContent.defaultProps = DEFAULT_PROPS;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppContent","forwardRef","props","ref","contentRef","useRef","children","className","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","defaultProps","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAAV,CAMzB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,kHAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,qBAAAA;GAAH,GAAA,IAAA,CAAA;AAAA,EAAA,OAA+B,CAACA,qBAAD,GAAyBC,GAAzB,CAA/B,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,wEAAA,CAAA,CAAA,CAAA,CAAA,GAAA,wDAAA,CAAA;AAAA,CANyB,EAczB,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAmBA,SAAS,GAAGD,GAAH,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,qEAAA,CAAA,CAAA,CAAA,CAAA,GAE3B,EAFD,CAAA;AAAA,CAdyB,CAAtB;;;ACEP,MAAME,cAAc,GAAG,mBAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,qBAAlB,CAAA;AACA,MAAMC,aAAuC,GAAG,EAAhD,CAAA;AAEA;AACA;AACA;;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvF,EAAA,MAAMC,UAAU,GAAGD,GAAG,IAAIE,MAAM,EAAhC,CAAA;;EAEA,MAAM;IACJC,QADI;AAEJC,IAAAA,SAAAA;AAFI,GAAA,GAIFL,KAJJ;QAGKM,cAHL,4BAIIN,KAJJ,EAAA,SAAA,CAAA,CAAA;;EAMA,MAAM;AAAEO,IAAAA,QAAAA;AAAF,GAAA,GAAeC,WAAW,EAAhC,CAAA;AACA,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAD,CAApC,CAAA;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAA,QAAA,CAAA,EAAA,EACML,cADN,EAAA;AAEE,IAAA,SAAS,EAAEC,QAFb;AAGE,IAAA,qBAAqB,EAAEE,iBAAiB,GAAGA,iBAAiB,CAACG,oBAArB,GAA4C,IAHtF;IAIE,SAAS,EAAEC,UAAU,CAACf,UAAU,CAACO,SAAZ,EAAuBA,SAAvB,CAJvB;AAKE,IAAA,GAAG,EAAEH,UAAAA;AALP,GAAA,CAAA,EAOGE,QAPH,CADF,CAAA;AAWD,CAvBuE,EAAjE;AAwBPN,UAAU,CAACO,SAAX,GAAuBT,SAAvB,CAAA;AACAE,UAAU,CAACgB,YAAX,GAA0BjB,aAA1B,CAAA;AACAC,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;;;;"}
|
|
@@ -11,7 +11,7 @@ var _templateObject;
|
|
|
11
11
|
/**
|
|
12
12
|
* Component style.
|
|
13
13
|
*/
|
|
14
|
-
const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
|
|
14
|
+
const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-component-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
|
|
15
15
|
let {
|
|
16
16
|
$isCollapsed
|
|
17
17
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { mdiChevronLeft } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAGC,MAAM,CAACC,GAAV,CAShB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-component-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { mdiChevronLeft } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -27,21 +27,21 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
27
27
|
/**
|
|
28
28
|
* Component style.
|
|
29
29
|
*/
|
|
30
|
-
const StyledSideNavigationMenu = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > button {\n background-color: var(--redsift-color-side-navigation-background);\n border: none;\n ", "\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ", "\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ", "\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ", "\n }\n"])), _ref => {
|
|
30
|
+
const StyledSideNavigationMenu = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > button {\n background-color: var(--redsift-color-component-side-navigation-background);\n border: none;\n ", "\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ", "\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ", "\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ", "\n }\n"])), _ref => {
|
|
31
31
|
let {
|
|
32
32
|
$isDisabled
|
|
33
33
|
} = _ref;
|
|
34
|
-
return !$isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n "])));
|
|
34
|
+
return !$isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n "])));
|
|
35
35
|
}, _ref2 => {
|
|
36
36
|
let {
|
|
37
37
|
$isDisabled
|
|
38
38
|
} = _ref2;
|
|
39
|
-
return !$isDisabled ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n cursor: pointer;\n\n .redsift-side-navigation-menu__expand-icon {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n "]))) : '';
|
|
39
|
+
return !$isDisabled ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n cursor: pointer;\n\n .redsift-side-navigation-menu__expand-icon {\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n }\n "]))) : '';
|
|
40
40
|
}, _ref3 => {
|
|
41
41
|
let {
|
|
42
42
|
$isDisabled
|
|
43
43
|
} = _ref3;
|
|
44
|
-
return !$isDisabled ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n "])));
|
|
44
|
+
return !$isDisabled ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n "])));
|
|
45
45
|
}, _ref4 => {
|
|
46
46
|
let {
|
|
47
47
|
$isExpanded
|
|
@@ -380,7 +380,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
380
380
|
tabIndex: isFirstChild ? 0 : -1,
|
|
381
381
|
type: "button"
|
|
382
382
|
}, buttonEventHandler), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
|
|
383
|
-
color: "var(--redsift-color-side-navigation-menu-item-text-resting)"
|
|
383
|
+
color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
|
|
384
384
|
}, iconProps, {
|
|
385
385
|
icon: icon,
|
|
386
386
|
ref: iconRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigationMenu.js","sources":["../../../src/components/side-navigation-menu/types.ts","../../../src/components/side-navigation-menu/styles.ts","../../../src/components/side-navigation-menu/reducer.ts","../../../src/components/side-navigation-menu/SideNavigationMenu.tsx"],"sourcesContent":["import { ComponentProps, MutableRefObject } from 'react';\nimport { IconProps } from '~/components/icon';\n\n/**\n * Context props.\n */\n export type SideNavigationMenuContextProps = {\n menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n};\n\n/**\n * Reducer props.\n */\nexport type SideNavigationMenuReducerState = {\n isExpanded: boolean;\n currentIndex: number;\n previousIndex: number;\n};\n\nexport enum SideNavigationMenuReducerActionType {\n Expand = \"expand\",\n Collapse = \"collapse\",\n Move = \"move\"\n}\n\nexport type SideNavigationMenuReducerAction = {\n type: SideNavigationMenuReducerActionType;\n index?: number;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuProps extends ComponentProps<'div'> {\n /** Custom props to pass to the button. */\n buttonProps?: ComponentProps<'button'>;\n /** Custom ref to pass to the button. */\n buttonRef?: MutableRefObject<HTMLButtonElement>;\n /**\n * Icon path data (`d` property of the `path` SVG element).<br />\n * See <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />\n * Recommended path data come from mdi/js.<br />\n * See <a href=\"https://www.npmjs.com/package/@mdi/js\">https://www.npmjs.com/package/@mdi/js</a>.\n */\n icon?: string;\n /** Custom props to pass to the Icon component. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Custom ref to pass to the Icon component. */\n iconRef?: MutableRefObject<HTMLElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the menu is expanded or not. */\n isExpanded?: boolean;\n /** Custom props to pass to the menu. */\n menuProps?: ComponentProps<'ul'>;\n /** Custom ref to pass to the menu. */\n menuRef?: MutableRefObject<HTMLUListElement>;\n /** Whether the component should hide icons or not. */\n withoutIcons?: boolean;\n}\n\nexport type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded' | 'withoutIcons'> & {\n $isDisabled: SideNavigationMenuProps['isDisabled'];\n $isExpanded: SideNavigationMenuProps['isExpanded'];\n $withoutIcons: SideNavigationMenuProps['withoutIcons'];\n};\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenu = styled.div<StyledSideNavigationMenuProps>`\n > button {\n background-color: var(--redsift-color-side-navigation-background);\n border: none;\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n cursor: pointer;\n\n .redsift-side-navigation-menu__expand-icon {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n ` : ''}\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n `}\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ${({ $isExpanded }) => $isExpanded ? css`\n display: block;\n `: css`\n display: none;\n `}\n }\n`\n","import { SideNavigationMenuReducerState, SideNavigationMenuReducerAction, SideNavigationMenuReducerActionType } from './types';\n\nexport const SideNavigationMenuReducer = \n (state: SideNavigationMenuReducerState, action: SideNavigationMenuReducerAction): SideNavigationMenuReducerState => {\n switch (action.type) {\n case SideNavigationMenuReducerActionType.Expand:\n return { ...state, isExpanded: true };\n case SideNavigationMenuReducerActionType.Collapse:\n return {\n isExpanded: false,\n currentIndex: null!,\n previousIndex: null!\n };\n case SideNavigationMenuReducerActionType.Move:\n return {\n ...state,\n isExpanded: true,\n currentIndex: action.index!,\n previousIndex: state.currentIndex\n };\n }\n }","import React, {\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronDown, mdiChevronRight } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { Icon } from '~/components/icon';\nimport { StyledSideNavigationMenu } from './styles';\nimport { SideNavigationMenuContextProps, SideNavigationMenuProps, SideNavigationMenuReducerActionType } from './types';\nimport { SideNavigationMenuContext } from './context';\nimport { SideNavigationMenuReducer } from './reducer';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenu';\nconst CLASSNAME = 'redsift-side-navigation-menu';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuProps> = {};\n\n/**\n * The SideNavigationMenu component.\n */\nexport const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement> = forwardRef((props, ref) => {\n const divRef = (ref || useRef<HTMLDivElement>()) as MutableRefObject<HTMLDivElement>;\n\n const {\n 'aria-label': ariaLabel,\n buttonProps = {},\n buttonRef = useRef<HTMLButtonElement>() as MutableRefObject<HTMLButtonElement>,\n children,\n className,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isDisabled,\n isExpanded: propsIsExpanded,\n menuProps = {},\n menuRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems: menubarItems } = sideNavigationMenuBarContext || {};\n\n /**\n * Create an array containing only valid children which can only be SideNavigationMenuItem.\n * This prevent the navigation menubar to have more than two levels.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, child => {\n if (React.isValidElement(child) && (child.type as Comp<SideNavigationMenuItemProps>).displayName === SideNavigationMenuItem.displayName) {\n childArray.push(child);\n }\n });\n const renderedMenuItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n icon: undefined, // Second-level item should not have icon\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n isSecondLevel: true,\n key: child.key ?? index,\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [state, dispatch] = useReducer(\n SideNavigationMenuReducer,\n {\n currentIndex: null!,\n isExpanded: Boolean(propsIsExpanded),\n previousIndex: null!\n }\n );\n const { isExpanded, currentIndex, previousIndex } = state;\n\n const first = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: 0 }),\n []\n );\n\n const last = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: menuItems.size - 1 }),\n [menuItems.size]\n );\n\n const move = useCallback(\n (index: number) => dispatch({ type: SideNavigationMenuReducerActionType.Move, index }),\n []\n );\n\n const open = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Expand }),\n []\n );\n\n const close = useCallback(\n (focusButton?: boolean) => {\n if (isExpanded) {\n if (focusButton) {\n buttonRef.current.focus();\n }\n\n dispatch({ type: SideNavigationMenuReducerActionType.Collapse });\n }\n },\n [isExpanded]\n );\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n move(index);\n };\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n move(index);\n };\n\n const match = (e: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return e.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n move(index);\n };\n\n const value = useMemo<SideNavigationMenuContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n const items = Array.from(menuItems);\n\n if (currentIndex !== previousIndex) {\n const currentNode = items[currentIndex] as HTMLElement;\n currentNode?.focus();\n }\n }, [menuItems, currentIndex, previousIndex]);\n\n useEffect(() => {\n if (!sideNavigationMenuBarContext) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (buttonRef as MutableRefObject<HTMLButtonElement>).current;\n\n if (menuItemNode) {\n menubarItems.add(menuItemNode);\n }\n\n return () => {\n menubarItems.delete(menuItemNode);\n };\n }, [menubarItems]);\n\n const keyDownOnButton = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'Enter':\n case 'Space':\n e.stopPropagation();\n currentNode.click();\n first();\n break;\n case 'ArrowRight':\n e.stopPropagation();\n first();\n break;\n case 'ArrowLeft':\n last();\n break;\n default:\n break;\n }\n };\n\n const buttonEventHandler = {\n onClick: (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n \n buttonProps.onClick?.(event);\n event.stopPropagation();\n if (isExpanded) {\n close();\n } else {\n open();\n }\n },\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n buttonProps.onKeyDown?.(event);\n keyDownOnButton(event);\n },\n };\n\n const keyDownOnMenuItemList = (e: KeyboardEvent<HTMLUListElement>) => {\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'ArrowUp':\n e.stopPropagation();\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.stopPropagation();\n e.preventDefault();\n next();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n close(true);\n break;\n case 'ArrowRight':\n e.preventDefault();\n close(!sideNavigationMenuBarContext);\n break;\n case 'Home':\n e.stopPropagation();\n e.preventDefault();\n first();\n break;\n case 'End':\n e.stopPropagation();\n e.preventDefault();\n last();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n case 'Escape':\n e.stopPropagation();\n e.preventDefault();\n close(true);\n break;\n default:\n e.stopPropagation();\n match(e);\n break;\n }\n };\n\n const menuItemListEventHandler = {\n onKeyDown: (event: KeyboardEvent<HTMLUListElement>) => {\n menuProps.onKeyDown?.(event);\n keyDownOnMenuItemList(event);\n },\n onClick: (event: MouseEvent<HTMLUListElement>) => {\n if (isDisabled) {\n return;\n }\n menuProps.onClick?.(event);\n }\n };\n\n return (\n <StyledSideNavigationMenu\n {...forwardedProps}\n $isDisabled={isDisabled}\n $isExpanded={isExpanded}\n $withoutIcons={withoutIcons}\n className={classNames(SideNavigationMenu.className, className)}\n ref={divRef as MutableRefObject<HTMLDivElement>}\n tabIndex={undefined}\n >\n <SideNavigationMenuContext.Provider value={value}>\n <button\n {...buttonProps}\n aria-disabled={isDisabled}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-haspopup=\"true\"\n ref={buttonRef as MutableRefObject<HTMLButtonElement>}\n role=\"menuitem\"\n tabIndex={isFirstChild ? 0 : -1}\n type=\"button\"\n {...buttonEventHandler}\n >\n {icon ? \n <Icon\n color=\"var(--redsift-color-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n /> : null}\n <span>{ariaLabel}</span>\n {isExpanded ?\n <Icon icon={mdiChevronDown} className={`${SideNavigationMenu.className}__expand-icon`} /> :\n <Icon icon={mdiChevronRight} className={`${SideNavigationMenu.className}__expand-icon`} />\n }\n </button>\n <ul\n {...menuProps}\n aria-label={ariaLabel}\n aria-orientation=\"vertical\"\n hidden={!isExpanded}\n ref={menuRef as MutableRefObject<HTMLUListElement>}\n role=\"menu\"\n {...menuItemListEventHandler}\n >\n {renderedMenuItems}\n </ul>\n </SideNavigationMenuContext.Provider>\n </StyledSideNavigationMenu>\n );\n});\nSideNavigationMenu.className = CLASSNAME;\nSideNavigationMenu.defaultProps = DEFAULT_PROPS;\nSideNavigationMenu.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuReducerActionType","StyledSideNavigationMenu","styled","div","$isDisabled","css","$isExpanded","SideNavigationMenuReducer","state","action","type","Expand","_objectSpread","isExpanded","Collapse","currentIndex","previousIndex","Move","index","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenu","forwardRef","props","ref","divRef","useRef","ariaLabel","buttonProps","buttonRef","children","className","icon","iconProps","iconRef","isDisabled","propsIsExpanded","menuProps","menuRef","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","SideNavigationMenuBarContext","isFirstChild","setIsFirstChild","useState","menuItems","menubarItems","childArray","React","Children","forEach","child","isValidElement","displayName","SideNavigationMenuItem","push","renderedMenuItems","map","key","cloneElement","undefined","isSecondLevel","Set","current","dispatch","useReducer","Boolean","first","useCallback","last","size","move","open","close","focusButton","focus","previous","next","match","e","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","includes","findIndex","item","value","useMemo","useEffect","menuItemNode","add","delete","keyDownOnButton","target","code","stopPropagation","click","buttonEventHandler","onClick","event","onKeyDown","keyDownOnMenuItemList","preventDefault","menuItemListEventHandler","classNames","mdiChevronDown","mdiChevronRight","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SideNavigationMenu.js","sources":["../../../src/components/side-navigation-menu/types.ts","../../../src/components/side-navigation-menu/styles.ts","../../../src/components/side-navigation-menu/reducer.ts","../../../src/components/side-navigation-menu/SideNavigationMenu.tsx"],"sourcesContent":["import { ComponentProps, MutableRefObject } from 'react';\nimport { IconProps } from '~/components/icon';\n\n/**\n * Context props.\n */\n export type SideNavigationMenuContextProps = {\n menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n};\n\n/**\n * Reducer props.\n */\nexport type SideNavigationMenuReducerState = {\n isExpanded: boolean;\n currentIndex: number;\n previousIndex: number;\n};\n\nexport enum SideNavigationMenuReducerActionType {\n Expand = \"expand\",\n Collapse = \"collapse\",\n Move = \"move\"\n}\n\nexport type SideNavigationMenuReducerAction = {\n type: SideNavigationMenuReducerActionType;\n index?: number;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuProps extends ComponentProps<'div'> {\n /** Custom props to pass to the button. */\n buttonProps?: ComponentProps<'button'>;\n /** Custom ref to pass to the button. */\n buttonRef?: MutableRefObject<HTMLButtonElement>;\n /**\n * Icon path data (`d` property of the `path` SVG element).<br />\n * See <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />\n * Recommended path data come from mdi/js.<br />\n * See <a href=\"https://www.npmjs.com/package/@mdi/js\">https://www.npmjs.com/package/@mdi/js</a>.\n */\n icon?: string;\n /** Custom props to pass to the Icon component. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Custom ref to pass to the Icon component. */\n iconRef?: MutableRefObject<HTMLElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the menu is expanded or not. */\n isExpanded?: boolean;\n /** Custom props to pass to the menu. */\n menuProps?: ComponentProps<'ul'>;\n /** Custom ref to pass to the menu. */\n menuRef?: MutableRefObject<HTMLUListElement>;\n /** Whether the component should hide icons or not. */\n withoutIcons?: boolean;\n}\n\nexport type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded' | 'withoutIcons'> & {\n $isDisabled: SideNavigationMenuProps['isDisabled'];\n $isExpanded: SideNavigationMenuProps['isExpanded'];\n $withoutIcons: SideNavigationMenuProps['withoutIcons'];\n};\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenu = styled.div<StyledSideNavigationMenuProps>`\n > button {\n background-color: var(--redsift-color-component-side-navigation-background);\n border: none;\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n cursor: pointer;\n\n .redsift-side-navigation-menu__expand-icon {\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n }\n ` : ''}\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ${({ $isExpanded }) => $isExpanded ? css`\n display: block;\n `: css`\n display: none;\n `}\n }\n`\n","import { SideNavigationMenuReducerState, SideNavigationMenuReducerAction, SideNavigationMenuReducerActionType } from './types';\n\nexport const SideNavigationMenuReducer = \n (state: SideNavigationMenuReducerState, action: SideNavigationMenuReducerAction): SideNavigationMenuReducerState => {\n switch (action.type) {\n case SideNavigationMenuReducerActionType.Expand:\n return { ...state, isExpanded: true };\n case SideNavigationMenuReducerActionType.Collapse:\n return {\n isExpanded: false,\n currentIndex: null!,\n previousIndex: null!\n };\n case SideNavigationMenuReducerActionType.Move:\n return {\n ...state,\n isExpanded: true,\n currentIndex: action.index!,\n previousIndex: state.currentIndex\n };\n }\n }","import React, {\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronDown, mdiChevronRight } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { Icon } from '~/components/icon';\nimport { StyledSideNavigationMenu } from './styles';\nimport { SideNavigationMenuContextProps, SideNavigationMenuProps, SideNavigationMenuReducerActionType } from './types';\nimport { SideNavigationMenuContext } from './context';\nimport { SideNavigationMenuReducer } from './reducer';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenu';\nconst CLASSNAME = 'redsift-side-navigation-menu';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuProps> = {};\n\n/**\n * The SideNavigationMenu component.\n */\nexport const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement> = forwardRef((props, ref) => {\n const divRef = (ref || useRef<HTMLDivElement>()) as MutableRefObject<HTMLDivElement>;\n\n const {\n 'aria-label': ariaLabel,\n buttonProps = {},\n buttonRef = useRef<HTMLButtonElement>() as MutableRefObject<HTMLButtonElement>,\n children,\n className,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isDisabled,\n isExpanded: propsIsExpanded,\n menuProps = {},\n menuRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems: menubarItems } = sideNavigationMenuBarContext || {};\n\n /**\n * Create an array containing only valid children which can only be SideNavigationMenuItem.\n * This prevent the navigation menubar to have more than two levels.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, child => {\n if (React.isValidElement(child) && (child.type as Comp<SideNavigationMenuItemProps>).displayName === SideNavigationMenuItem.displayName) {\n childArray.push(child);\n }\n });\n const renderedMenuItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n icon: undefined, // Second-level item should not have icon\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n isSecondLevel: true,\n key: child.key ?? index,\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [state, dispatch] = useReducer(\n SideNavigationMenuReducer,\n {\n currentIndex: null!,\n isExpanded: Boolean(propsIsExpanded),\n previousIndex: null!\n }\n );\n const { isExpanded, currentIndex, previousIndex } = state;\n\n const first = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: 0 }),\n []\n );\n\n const last = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: menuItems.size - 1 }),\n [menuItems.size]\n );\n\n const move = useCallback(\n (index: number) => dispatch({ type: SideNavigationMenuReducerActionType.Move, index }),\n []\n );\n\n const open = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Expand }),\n []\n );\n\n const close = useCallback(\n (focusButton?: boolean) => {\n if (isExpanded) {\n if (focusButton) {\n buttonRef.current.focus();\n }\n\n dispatch({ type: SideNavigationMenuReducerActionType.Collapse });\n }\n },\n [isExpanded]\n );\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n move(index);\n };\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n move(index);\n };\n\n const match = (e: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return e.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n move(index);\n };\n\n const value = useMemo<SideNavigationMenuContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n const items = Array.from(menuItems);\n\n if (currentIndex !== previousIndex) {\n const currentNode = items[currentIndex] as HTMLElement;\n currentNode?.focus();\n }\n }, [menuItems, currentIndex, previousIndex]);\n\n useEffect(() => {\n if (!sideNavigationMenuBarContext) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (buttonRef as MutableRefObject<HTMLButtonElement>).current;\n\n if (menuItemNode) {\n menubarItems.add(menuItemNode);\n }\n\n return () => {\n menubarItems.delete(menuItemNode);\n };\n }, [menubarItems]);\n\n const keyDownOnButton = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'Enter':\n case 'Space':\n e.stopPropagation();\n currentNode.click();\n first();\n break;\n case 'ArrowRight':\n e.stopPropagation();\n first();\n break;\n case 'ArrowLeft':\n last();\n break;\n default:\n break;\n }\n };\n\n const buttonEventHandler = {\n onClick: (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n \n buttonProps.onClick?.(event);\n event.stopPropagation();\n if (isExpanded) {\n close();\n } else {\n open();\n }\n },\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n buttonProps.onKeyDown?.(event);\n keyDownOnButton(event);\n },\n };\n\n const keyDownOnMenuItemList = (e: KeyboardEvent<HTMLUListElement>) => {\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'ArrowUp':\n e.stopPropagation();\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.stopPropagation();\n e.preventDefault();\n next();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n close(true);\n break;\n case 'ArrowRight':\n e.preventDefault();\n close(!sideNavigationMenuBarContext);\n break;\n case 'Home':\n e.stopPropagation();\n e.preventDefault();\n first();\n break;\n case 'End':\n e.stopPropagation();\n e.preventDefault();\n last();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n case 'Escape':\n e.stopPropagation();\n e.preventDefault();\n close(true);\n break;\n default:\n e.stopPropagation();\n match(e);\n break;\n }\n };\n\n const menuItemListEventHandler = {\n onKeyDown: (event: KeyboardEvent<HTMLUListElement>) => {\n menuProps.onKeyDown?.(event);\n keyDownOnMenuItemList(event);\n },\n onClick: (event: MouseEvent<HTMLUListElement>) => {\n if (isDisabled) {\n return;\n }\n menuProps.onClick?.(event);\n }\n };\n\n return (\n <StyledSideNavigationMenu\n {...forwardedProps}\n $isDisabled={isDisabled}\n $isExpanded={isExpanded}\n $withoutIcons={withoutIcons}\n className={classNames(SideNavigationMenu.className, className)}\n ref={divRef as MutableRefObject<HTMLDivElement>}\n tabIndex={undefined}\n >\n <SideNavigationMenuContext.Provider value={value}>\n <button\n {...buttonProps}\n aria-disabled={isDisabled}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-haspopup=\"true\"\n ref={buttonRef as MutableRefObject<HTMLButtonElement>}\n role=\"menuitem\"\n tabIndex={isFirstChild ? 0 : -1}\n type=\"button\"\n {...buttonEventHandler}\n >\n {icon ? \n <Icon\n color=\"var(--redsift-color-component-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n /> : null}\n <span>{ariaLabel}</span>\n {isExpanded ?\n <Icon icon={mdiChevronDown} className={`${SideNavigationMenu.className}__expand-icon`} /> :\n <Icon icon={mdiChevronRight} className={`${SideNavigationMenu.className}__expand-icon`} />\n }\n </button>\n <ul\n {...menuProps}\n aria-label={ariaLabel}\n aria-orientation=\"vertical\"\n hidden={!isExpanded}\n ref={menuRef as MutableRefObject<HTMLUListElement>}\n role=\"menu\"\n {...menuItemListEventHandler}\n >\n {renderedMenuItems}\n </ul>\n </SideNavigationMenuContext.Provider>\n </StyledSideNavigationMenu>\n );\n});\nSideNavigationMenu.className = CLASSNAME;\nSideNavigationMenu.defaultProps = DEFAULT_PROPS;\nSideNavigationMenu.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuReducerActionType","StyledSideNavigationMenu","styled","div","$isDisabled","css","$isExpanded","SideNavigationMenuReducer","state","action","type","Expand","_objectSpread","isExpanded","Collapse","currentIndex","previousIndex","Move","index","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenu","forwardRef","props","ref","divRef","useRef","ariaLabel","buttonProps","buttonRef","children","className","icon","iconProps","iconRef","isDisabled","propsIsExpanded","menuProps","menuRef","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","SideNavigationMenuBarContext","isFirstChild","setIsFirstChild","useState","menuItems","menubarItems","childArray","React","Children","forEach","child","isValidElement","displayName","SideNavigationMenuItem","push","renderedMenuItems","map","key","cloneElement","undefined","isSecondLevel","Set","current","dispatch","useReducer","Boolean","first","useCallback","last","size","move","open","close","focusButton","focus","previous","next","match","e","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","includes","findIndex","item","value","useMemo","useEffect","menuItemNode","add","delete","keyDownOnButton","target","code","stopPropagation","click","buttonEventHandler","onClick","event","onKeyDown","keyDownOnMenuItemList","preventDefault","menuItemListEventHandler","classNames","mdiChevronDown","mdiChevronRight","defaultProps"],"mappings":"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"}
|
|
@@ -19,24 +19,24 @@ const StyledSideNavigationMenuItem = styled.a(_templateObject || (_templateObjec
|
|
|
19
19
|
let {
|
|
20
20
|
$isDisabled
|
|
21
21
|
} = _ref;
|
|
22
|
-
return !$isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n "])));
|
|
22
|
+
return !$isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n "])));
|
|
23
23
|
}, _ref2 => {
|
|
24
24
|
let {
|
|
25
25
|
$isDisabled
|
|
26
26
|
} = _ref2;
|
|
27
|
-
return !$isDisabled ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n "]))) : '';
|
|
27
|
+
return !$isDisabled ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n "]))) : '';
|
|
28
28
|
}, _ref3 => {
|
|
29
29
|
let {
|
|
30
30
|
$isSecondLevel,
|
|
31
31
|
$withoutIcons
|
|
32
32
|
} = _ref3;
|
|
33
|
-
return !$isSecondLevel ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n "]))) : "\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ".concat(!$withoutIcons ? '50px' : '16px', ";\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n ");
|
|
33
|
+
return !$isSecondLevel ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n "]))) : "\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ".concat(!$withoutIcons ? '50px' : '16px', ";\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n ");
|
|
34
34
|
}, _ref4 => {
|
|
35
35
|
let {
|
|
36
36
|
$isCurrent,
|
|
37
37
|
$isDisabled
|
|
38
38
|
} = _ref4;
|
|
39
|
-
return $isCurrent && !$isDisabled ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-side-navigation-menu-item-active);\n "]))) : '';
|
|
39
|
+
return $isCurrent && !$isDisabled ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-component-side-navigation-menu-item-active);\n "]))) : '';
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
const _excluded = ["children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "withoutIcons"];
|
|
@@ -121,7 +121,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
121
121
|
ref: menuItemRef,
|
|
122
122
|
tabIndex: !sideNavigationMenuContext && isFirstChild ? 0 : -1
|
|
123
123
|
}), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
|
|
124
|
-
color: "var(--redsift-color-side-navigation-menu-item-text-resting)"
|
|
124
|
+
color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
|
|
125
125
|
}, iconProps, {
|
|
126
126
|
icon: icon,
|
|
127
127
|
ref: iconRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigationMenuItem.js","sources":["../../../src/components/side-navigation-menu-bar/context.ts","../../../src/components/side-navigation-menu/context.ts","../../../src/components/side-navigation-menu-item/styles.ts","../../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext = React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext = React.createContext<SideNavigationMenuContextProps>(null!);\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n /**\n * Common style\n */\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n text-decoration: none;\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n ` : ''}\n }\n\n ${({ $isSecondLevel, $withoutIcons }) => !$isSecondLevel ? css`\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n `: `\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ${!$withoutIcons ? '50px' : '16px'};\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n `}\n\n ${({ $isCurrent, $isDisabled }) => $isCurrent && !$isDisabled ? css`\n background-color: var(--redsift-color-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-side-navigation-menu-item-active);\n ` : ''}\n`\n","import React, {\n forwardRef,\n MutableRefObject,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { Icon } from '~/components/icon';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '~/components/side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '~/components/side-navigation-menu/context';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledSideNavigationMenuItem } from './styles';\nimport { SideNavigationMenuItemProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuItemProps> = {};\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<\n SideNavigationMenuItemProps,\n HTMLAnchorElement\n> = forwardRef((props, ref) => {\n const menuItemRef = ref || useRef<HTMLAnchorElement>();\n\n const {\n children,\n className,\n href,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isCurrent,\n isDisabled,\n isSecondLevel,\n onClick,\n onKeyDown,\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children]);\n\n const appContainerState = useContext(AppContainerContext);\n useEffect(() => {\n if (appContainerState && isCurrent && typeof children === 'string') {\n appContainerState.setTitle(children);\n }\n\n return () => {\n if (appContainerState) {\n appContainerState.setTitle(undefined);\n }\n }\n }, [isCurrent]);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems } =\n sideNavigationMenuContext || sideNavigationMenuBarContext || {};\n\n useEffect(() => {\n if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>)\n .current;\n\n if (menuItemNode) {\n if (!menuItems.size) {\n setIsFirstChild(true);\n }\n\n menuItems.add(menuItemNode);\n }\n\n return () => {\n menuItems.delete(menuItemNode);\n };\n }, [menuItems]);\n\n return (\n <StyledSideNavigationMenuItem\n role=\"menuitem\"\n {...forwardedProps}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $isSecondLevel={isSecondLevel}\n $withoutIcons={withoutIcons}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled}\n className={classNames(SideNavigationMenuItem.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={isDisabled ? undefined : onClick}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n tabIndex={!sideNavigationMenuContext && isFirstChild ? 0 : -1}\n >\n {icon ? (\n <Icon\n color=\"var(--redsift-color-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n />\n ) : null}\n <span>{children}</span>\n </StyledSideNavigationMenuItem>\n );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItem","styled","a","$isDisabled","css","$isSecondLevel","$withoutIcons","$isCurrent","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","children","className","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","appContainerState","useContext","AppContainerContext","useEffect","setTitle","undefined","sideNavigationMenuBarContext","sideNavigationMenuContext","isFirstChild","setIsFirstChild","useState","menuItems","menuItemNode","current","size","add","delete","classNames","defaultProps","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SideNavigationMenuItem.js","sources":["../../../src/components/side-navigation-menu-bar/context.ts","../../../src/components/side-navigation-menu/context.ts","../../../src/components/side-navigation-menu-item/styles.ts","../../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext = React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext = React.createContext<SideNavigationMenuContextProps>(null!);\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n /**\n * Common style\n */\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n text-decoration: none;\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n ` : ''}\n }\n\n ${({ $isSecondLevel, $withoutIcons }) => !$isSecondLevel ? css`\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n `: `\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ${!$withoutIcons ? '50px' : '16px'};\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n `}\n\n ${({ $isCurrent, $isDisabled }) => $isCurrent && !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-component-side-navigation-menu-item-active);\n ` : ''}\n`\n","import React, {\n forwardRef,\n MutableRefObject,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { Icon } from '~/components/icon';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '~/components/side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '~/components/side-navigation-menu/context';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledSideNavigationMenuItem } from './styles';\nimport { SideNavigationMenuItemProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuItemProps> = {};\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<\n SideNavigationMenuItemProps,\n HTMLAnchorElement\n> = forwardRef((props, ref) => {\n const menuItemRef = ref || useRef<HTMLAnchorElement>();\n\n const {\n children,\n className,\n href,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isCurrent,\n isDisabled,\n isSecondLevel,\n onClick,\n onKeyDown,\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children]);\n\n const appContainerState = useContext(AppContainerContext);\n useEffect(() => {\n if (appContainerState && isCurrent && typeof children === 'string') {\n appContainerState.setTitle(children);\n }\n\n return () => {\n if (appContainerState) {\n appContainerState.setTitle(undefined);\n }\n }\n }, [isCurrent]);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems } =\n sideNavigationMenuContext || sideNavigationMenuBarContext || {};\n\n useEffect(() => {\n if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>)\n .current;\n\n if (menuItemNode) {\n if (!menuItems.size) {\n setIsFirstChild(true);\n }\n\n menuItems.add(menuItemNode);\n }\n\n return () => {\n menuItems.delete(menuItemNode);\n };\n }, [menuItems]);\n\n return (\n <StyledSideNavigationMenuItem\n role=\"menuitem\"\n {...forwardedProps}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $isSecondLevel={isSecondLevel}\n $withoutIcons={withoutIcons}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled}\n className={classNames(SideNavigationMenuItem.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={isDisabled ? undefined : onClick}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n tabIndex={!sideNavigationMenuContext && isFirstChild ? 0 : -1}\n >\n {icon ? (\n <Icon\n color=\"var(--redsift-color-component-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n />\n ) : null}\n <span>{children}</span>\n </StyledSideNavigationMenuItem>\n );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItem","styled","a","$isDisabled","css","$isSecondLevel","$withoutIcons","$isCurrent","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","children","className","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","appContainerState","useContext","AppContainerContext","useEffect","setTitle","undefined","sideNavigationMenuBarContext","sideNavigationMenuContext","isFirstChild","setIsFirstChild","useState","menuItems","menuItemNode","current","size","add","delete","classNames","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/types.ts"],"sourcesContent":["import { ReactElement, Ref } from 'react';\n\n/** Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/types.ts"],"sourcesContent":["import { ReactElement, Ref } from 'react';\n\n/** Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n (props: P & { ref?: Ref<T> }): ReactElement | null;\n /** React component type. */\n readonly $$typeof: symbol;\n /** Component default props. */\n defaultProps?: Partial<P>;\n /** Component name. */\n displayName?: string;\n /** Component base class name. */\n className?: string;\n};\n\n/**\n * JS falsy values.\n * (excluding `NaN` as it can't be distinguished from `number`)\n */\nexport type Falsy = false | undefined | null | 0 | '';\n\n/** Get types of the values of a record. */\nexport type ValueOf<T extends Record<any, any>> = T[keyof T];\n\n/**\n * Color palette.\n */\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n error: 'error',\n warning: 'warning',\n info: 'info',\n success: 'success',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * Theme\n */\nexport const Theme = {\n dark: 'dark',\n light: 'light',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;"],"names":["ColorPalette","primary","secondary","error","warning","info","success","Theme","dark","light"],"mappings":"AAEA;;AAaA;AACA;AACA;AACA;;AAGA;;AAGA;AACA;AACA;AACO,MAAMA,YAAY,GAAG;AACxBC,EAAAA,OAAO,EAAE,SADe;AAExBC,EAAAA,SAAS,EAAE,WAFa;AAGxBC,EAAAA,KAAK,EAAE,OAHiB;AAIxBC,EAAAA,OAAO,EAAE,SAJe;AAKxBC,EAAAA,IAAI,EAAE,MALkB;AAMxBC,EAAAA,OAAO,EAAE,SAAA;AANe,EAArB;;AAWP;AACA;AACA;AACO,MAAMC,KAAK,GAAG;AACjBC,EAAAA,IAAI,EAAE,MADW;AAEjBC,EAAAA,KAAK,EAAE,OAAA;AAFU;;;;"}
|
|
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2;
|
|
|
11
11
|
/**
|
|
12
12
|
* Component style.
|
|
13
13
|
*/
|
|
14
|
-
const StyledSideNavigationMenuBar = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ", "\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n"])), _ref => {
|
|
14
|
+
const StyledSideNavigationMenuBar = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-component-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ", "\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-component-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-component-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-component-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n"])), _ref => {
|
|
15
15
|
let {
|
|
16
16
|
$marginTop = 0
|
|
17
17
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [currentIndex, setCurrentIndex] = useState(0);\n const previousIndex = usePrevious(currentIndex);\n\n const first = () => setCurrentIndex(0);\n\n const last = () => setCurrentIndex(menuItems.size - 1);\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n setCurrentIndex(index);\n };\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n setCurrentIndex(index);\n };\n\n const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return event.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n setCurrentIndex(index);\n };\n\n const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n menubarProps.onKeyDown?.(e);\n e.stopPropagation();\n\n const currentNode = e.target as HTMLUListElement;\n // istanbul ignore next\n const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.preventDefault();\n next();\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (isFromSubmenu) {\n next();\n }\n break;\n case 'End':\n e.preventDefault();\n last();\n break;\n case 'Home':\n e.preventDefault();\n first();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n default:\n match(e);\n break;\n }\n };\n\n const value = useMemo<SideNavigationMenuBarContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n if (currentIndex !== previousIndex) {\n const items = Array.from(menuItems);\n const currentNode = items[currentIndex] as HTMLElement;\n const previousNode = items[previousIndex] as HTMLElement;\n\n // istanbul ignore next\n previousNode?.setAttribute('tabindex', '-1');\n currentNode?.setAttribute('tabindex', '0');\n currentNode?.focus();\n }\n }, [currentIndex, previousIndex, menuItems]);\n\n return (\n <StyledSideNavigationMenuBar\n {...forwardedProps}\n $isDisabled={isDisabled}\n $marginTop={top}\n $withoutIcons={withoutIcons}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={classNames(SideNavigationMenuBar.className, className)}\n ref={navRef as MutableRefObject<HTMLElement>}\n >\n <SideNavigationMenuBarContext.Provider value={value}>\n <ul\n {...menubarProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-orientation=\"vertical\"\n onKeyDown={keyDown}\n ref={menubarRef as MutableRefObject<HTMLUListElement>}\n role=\"menubar\"\n >\n {navItems}\n </ul>\n </SideNavigationMenuBarContext.Provider>\n </StyledSideNavigationMenuBar>\n );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n","import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem } from '~/components/side-navigation-menu-item';\nimport { MenuBarItems, MenuItem, Menu, SideNavigationMenuBarProps } from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n return (item as Menu).children !== undefined;\n}\n\nexport interface UseSideNavigationMenuBarProps {\n items: MenuBarItems;\n isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = (\n {\n items,\n isActive,\n }: UseSideNavigationMenuBarProps\n): Omit<SideNavigationMenuBarProps, 'ref'> => {\n const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n items.map((item) => {\n if (!isMenu(item)) {\n const { title, href, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenuItem\n key={title}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n href={href}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n } else {\n const { title, children, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenu\n key={title}\n aria-label={title}\n isExpanded={isActive ? children.filter(child => isActive(child.href!)).length > 0 : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n {children.map((child) => {\n const { title, href, ref, ...rest } = child;\n return (\n <SideNavigationMenuItem\n key={title}\n href={href}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n })}\n </SideNavigationMenu>\n );\n }\n })\n\n return {\n children: menuBarChildren,\n };\n}"],"names":["StyledSideNavigationMenuBar","styled","nav","$marginTop","css","useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","usePrevious","value","useRef","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","children","className","isDisabled","menubarProps","menubarRef","withoutIcons","forwardedProps","_excluded","warnIfNoAccessibleLabelFound","top","childArray","React","Children","forEach","child","isValidElement","SideNavigationMenu","displayName","SideNavigationMenuItem","includes","type","push","navItems","map","index","key","cloneElement","undefined","icon","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","findIndex","item","keyDown","e","onKeyDown","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","previousNode","setAttribute","focus","classNames","defaultProps","isMenu","useSideNavigationMenuBar","isActive","menuBarChildren","title","href","rest"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-component-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-component-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-component-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-component-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [currentIndex, setCurrentIndex] = useState(0);\n const previousIndex = usePrevious(currentIndex);\n\n const first = () => setCurrentIndex(0);\n\n const last = () => setCurrentIndex(menuItems.size - 1);\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n setCurrentIndex(index);\n };\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n setCurrentIndex(index);\n };\n\n const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return event.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n setCurrentIndex(index);\n };\n\n const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n menubarProps.onKeyDown?.(e);\n e.stopPropagation();\n\n const currentNode = e.target as HTMLUListElement;\n // istanbul ignore next\n const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.preventDefault();\n next();\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (isFromSubmenu) {\n next();\n }\n break;\n case 'End':\n e.preventDefault();\n last();\n break;\n case 'Home':\n e.preventDefault();\n first();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n default:\n match(e);\n break;\n }\n };\n\n const value = useMemo<SideNavigationMenuBarContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n if (currentIndex !== previousIndex) {\n const items = Array.from(menuItems);\n const currentNode = items[currentIndex] as HTMLElement;\n const previousNode = items[previousIndex] as HTMLElement;\n\n // istanbul ignore next\n previousNode?.setAttribute('tabindex', '-1');\n currentNode?.setAttribute('tabindex', '0');\n currentNode?.focus();\n }\n }, [currentIndex, previousIndex, menuItems]);\n\n return (\n <StyledSideNavigationMenuBar\n {...forwardedProps}\n $isDisabled={isDisabled}\n $marginTop={top}\n $withoutIcons={withoutIcons}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={classNames(SideNavigationMenuBar.className, className)}\n ref={navRef as MutableRefObject<HTMLElement>}\n >\n <SideNavigationMenuBarContext.Provider value={value}>\n <ul\n {...menubarProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-orientation=\"vertical\"\n onKeyDown={keyDown}\n ref={menubarRef as MutableRefObject<HTMLUListElement>}\n role=\"menubar\"\n >\n {navItems}\n </ul>\n </SideNavigationMenuBarContext.Provider>\n </StyledSideNavigationMenuBar>\n );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n","import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem } from '~/components/side-navigation-menu-item';\nimport { MenuBarItems, MenuItem, Menu, SideNavigationMenuBarProps } from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n return (item as Menu).children !== undefined;\n}\n\nexport interface UseSideNavigationMenuBarProps {\n items: MenuBarItems;\n isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = (\n {\n items,\n isActive,\n }: UseSideNavigationMenuBarProps\n): Omit<SideNavigationMenuBarProps, 'ref'> => {\n const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n items.map((item) => {\n if (!isMenu(item)) {\n const { title, href, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenuItem\n key={title}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n href={href}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n } else {\n const { title, children, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenu\n key={title}\n aria-label={title}\n isExpanded={isActive ? children.filter(child => isActive(child.href!)).length > 0 : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n {children.map((child) => {\n const { title, href, ref, ...rest } = child;\n return (\n <SideNavigationMenuItem\n key={title}\n href={href}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n })}\n </SideNavigationMenu>\n );\n }\n })\n\n return {\n children: menuBarChildren,\n };\n}"],"names":["StyledSideNavigationMenuBar","styled","nav","$marginTop","css","useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","usePrevious","value","useRef","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","children","className","isDisabled","menubarProps","menubarRef","withoutIcons","forwardedProps","_excluded","warnIfNoAccessibleLabelFound","top","childArray","React","Children","forEach","child","isValidElement","SideNavigationMenu","displayName","SideNavigationMenuItem","includes","type","push","navItems","map","index","key","cloneElement","undefined","icon","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","findIndex","item","keyDown","e","onKeyDown","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","previousNode","setAttribute","focus","classNames","defaultProps","isMenu","useSideNavigationMenuBar","isActive","menuBarChildren","title","href","rest"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "rollup -c && yarn generate:types",
|
|
24
|
-
"generate:types": "dts-bundle-generator
|
|
24
|
+
"generate:types": "dts-bundle-generator -o dist/types.d.ts src/index.ts",
|
|
25
25
|
"lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
|
|
26
26
|
"check-types": "tsc && tsc-strict",
|
|
27
27
|
"prepare": "install-peers || exit 0",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
|
|
31
31
|
},
|
|
32
32
|
"types": "types.d.ts",
|
|
33
|
-
"version": "6.0.0-alpha.
|
|
33
|
+
"version": "6.0.0-alpha.11",
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@react-aria/button": "^3.5.0",
|
|
36
36
|
"@react-aria/focus": "^3.6.1",
|
|
37
37
|
"@react-types/button": "^3.5.0",
|
|
38
|
-
"@redsift/icons": "^6.0.0-alpha.
|
|
38
|
+
"@redsift/icons": "^6.0.0-alpha.11",
|
|
39
39
|
"classnames": "^2.3.1"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
@@ -115,5 +115,5 @@
|
|
|
115
115
|
"react-dom": "17 || 18",
|
|
116
116
|
"styled-components": "^5.3.3"
|
|
117
117
|
},
|
|
118
|
-
"gitHead": "
|
|
118
|
+
"gitHead": "cb57cc2f3e487cc840375b5011a10ba15399b415"
|
|
119
119
|
}
|
package/style/redsift.css
CHANGED
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
225
225
|
}/**
|
|
226
226
|
* Do not edit directly
|
|
227
|
-
* Generated on
|
|
227
|
+
* Generated on Thu, 22 Sep 2022 19:57:41 GMT
|
|
228
228
|
*/
|
|
229
229
|
|
|
230
230
|
:root {
|
|
@@ -290,16 +290,21 @@
|
|
|
290
290
|
--redsift-color-action-disabled: #a8a8a8;
|
|
291
291
|
--redsift-color-action-disabled-background: #e4e4e4;
|
|
292
292
|
--redsift-color-action-focus: #e4e4e4;
|
|
293
|
-
--redsift-color-side-navigation-background: #
|
|
294
|
-
--redsift-color-side-navigation-menu-item-text-resting:
|
|
295
|
-
--redsift-color-side-navigation-menu-item-text-disabled: #
|
|
296
|
-
--redsift-color-side-navigation-menu-item-text-hover: #
|
|
297
|
-
--redsift-color-side-navigation-menu-item-background-hover: #
|
|
298
|
-
--redsift-color-side-navigation-menu-item-background-secondary: #333340;
|
|
299
|
-
--redsift-color-side-navigation-menu-item-background-active: #
|
|
300
|
-
--redsift-color-side-navigation-menu-item-active: #
|
|
301
|
-
--redsift-color-side-navigation-scrollbar-resting: #
|
|
302
|
-
--redsift-color-side-navigation-scrollbar-hover: #5d5d73;
|
|
293
|
+
--redsift-color-component-side-navigation-background: #2D2D34;
|
|
294
|
+
--redsift-color-component-side-navigation-menu-item-text-resting: #FFFFFFB3;
|
|
295
|
+
--redsift-color-component-side-navigation-menu-item-text-disabled: #76767A;
|
|
296
|
+
--redsift-color-component-side-navigation-menu-item-text-hover: #FFFFFF;
|
|
297
|
+
--redsift-color-component-side-navigation-menu-item-background-hover: #4C4C64;
|
|
298
|
+
--redsift-color-component-side-navigation-menu-item-background-secondary: #333340;
|
|
299
|
+
--redsift-color-component-side-navigation-menu-item-background-active: #39394C;
|
|
300
|
+
--redsift-color-component-side-navigation-menu-item-active: #02AC61;
|
|
301
|
+
--redsift-color-component-side-navigation-scrollbar-resting: #4C4C64;
|
|
302
|
+
--redsift-color-component-side-navigation-scrollbar-hover: #5d5d73;
|
|
303
|
+
--redsift-color-component-app-bar-background: var(--redsift-color-primary-main);
|
|
304
|
+
--redsift-color-component-app-bar-text: var(--redsift-color-primary-contrast);
|
|
305
|
+
--redsift-color-component-app-bar-expand-icon-resting: var(--redsift-color-primary-contrast);
|
|
306
|
+
--redsift-color-component-app-bar-expand-icon-hover: var(--redsift-color-primary-contrast);
|
|
307
|
+
--redsift-color-component-app-bar-expand-icon-background-hover: var(--redsift-color-primary-contained-hover);
|
|
303
308
|
--redsift-typography-font-family-raleway: 'Raleway', sans-serif;
|
|
304
309
|
--redsift-typography-font-family-electrolize: 'electrolize', sans-serif;
|
|
305
310
|
--redsift-typography-font-family-source-code-pro: 'Source Code Pro', sans-serif;
|
package/types.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
// Generated by dts-bundle-generator v6.12.0
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
import { PressEvent } from '@react-types/shared';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { ChangeEvent, ComponentProps, MutableRefObject, ReactElement, Ref, RefObject } from 'react';
|
|
4
6
|
|
|
5
7
|
/** Component Type. */
|
|
6
8
|
export declare type Comp<P, T = HTMLElement> = {
|
|
7
9
|
(props: P & {
|
|
8
|
-
children?: any;
|
|
9
10
|
ref?: Ref<T>;
|
|
10
11
|
}): ReactElement | null;
|
|
11
12
|
/** React component type. */
|