@redsift/design-system 6.0.0-alpha.10 → 6.0.0-alpha.12

package/esm/_internal/AppBar.js

@@ -12,7 +12,7 @@ var _templateObject, _templateObject2, _templateObject3;
 /**
  * Component style.
  */
-const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-content: center;\n  align-items: center;\n  background-color: var(--redsift-color-primary-main);\n  color: var(--redsift-color-primary-contrast);\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-primary-contrast);\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-primary-contained-hover);\n  }\n\n  .redsift-app-bar__right {\n    display: inline-flex;\n    margin: 16px;\n  }\n"])), _ref => {
+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 => {
   let {
     $isSidePanelCollapsed
   } = _ref;

package/esm/_internal/AppBar.js.map

@@ -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-primary-main);\n  color: var(--redsift-color-primary-contrast);\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-primary-contrast);\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-primary-contained-hover);\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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"}
+{"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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"}

package/esm/_internal/AppContent.js

@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3;
 /**
  * Component style.
  */
-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 => {
+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 => {
   let {
     $isSidePanelCollapsed
   } = _ref;

package/esm/_internal/AppContent.js.map

@@ -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,CAKzB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,+EAAA,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,CALyB,EAazB,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,CAbyB,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;;;;"}
+{"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;;;;"}

package/esm/_internal/AppSidePanel.js

@@ -11,7 +11,7 @@ var _templateObject;
 /**
  * Component style.
  */
-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 => {
+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 => {
   let {
     $isCollapsed
   } = _ref;

package/esm/_internal/AppSidePanel.js.map

@@ -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":"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"}
+{"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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"}

package/esm/_internal/ButtonLink.js

@@ -5,7 +5,7 @@ import { C as ColorPalette } from './types.js';
 import { a as ButtonSize, B as ButtonVariant, S as StyledButton } from './styles.js';
 import { a as Icon } from './Icon2.js';
 
-const _excluded = ["children", "className", "color", "href", "isDisabled", "leftIcon", "rightIcon", "size", "target", "variant"];
+const _excluded = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "rightIcon", "size", "target", "variant"];
 const COMPONENT_NAME = 'RedSiftButtonLink';
 const CLASSNAME = 'redsift-button-link';
 const DEFAULT_PROPS = {
@@ -25,6 +25,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
   const linkRef = ref || useRef();
 
   const {
+    as,
     children,
     className,
     color,
@@ -39,6 +40,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
         forwardedProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    as: as || 'a',
     role: "link",
     tabIndex: !isDisabled ? 0 : undefined
   }, forwardedProps, {

package/esm/_internal/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.js","sources":["../../../src/components/button-link/ButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ColorPalette, Comp } from '~/types';\nimport { Icon } from '~/components/icon';\nimport { ButtonSize, ButtonVariant, StyledButton } from '~/components/button';\nimport { ButtonLinkProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftButtonLink';\nconst CLASSNAME = 'redsift-button-link';\nconst DEFAULT_PROPS: Partial<ButtonLinkProps> = {\n  color: ColorPalette.primary,\n  size: ButtonSize.large,\n  variant: ButtonVariant.contained,\n};\n\n/**\n * The ButtonLink is a semantic link that looks like a button.\n * \n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const linkRef = ref || useRef<HTMLAnchorElement>();\n\n  const {\n    children,\n    className,\n    color,\n    href,\n    isDisabled,\n    leftIcon,\n    rightIcon,\n    size,\n    target,\n    variant,\n    ...forwardedProps\n  } = props;\n\n  return (\n    <StyledButton\n      role=\"link\"\n      tabIndex={!isDisabled ? 0 : undefined}\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled}\n      $size={size}\n      $variant={variant}\n      className={classNames(ButtonLink.className, className)}\n      href={!isDisabled ? href : undefined}\n      ref={linkRef as RefObject<HTMLAnchorElement>}\n      target={target}\n    >\n      {leftIcon ? <Icon icon={leftIcon} /> : null}\n      {children && <span>{children}</span>}\n      {rightIcon ? <Icon icon={rightIcon} /> : null}\n    </StyledButton>\n  );\n});\nButtonLink.className = CLASSNAME;\nButtonLink.defaultProps = DEFAULT_PROPS;\nButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","color","ColorPalette","primary","size","ButtonSize","large","variant","ButtonVariant","contained","ButtonLink","forwardRef","props","ref","linkRef","useRef","children","className","href","isDisabled","leftIcon","rightIcon","target","forwardedProps","undefined","classNames","defaultProps","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,mBAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,qBAAlB,CAAA;AACA,MAAMC,aAAuC,GAAG;EAC9CC,KAAK,EAAEC,YAAY,CAACC,OAD0B;EAE9CC,IAAI,EAAEC,UAAU,CAACC,KAF6B;EAG9CC,OAAO,EAAEC,aAAa,CAACC,SAAAA;AAHuB,CAAhD,CAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC7F,EAAA,MAAMC,OAAO,GAAGD,GAAG,IAAIE,MAAM,EAA7B,CAAA;;EAEA,MAAM;IACJC,QADI;IAEJC,SAFI;IAGJhB,KAHI;IAIJiB,IAJI;IAKJC,UALI;IAMJC,QANI;IAOJC,SAPI;IAQJjB,IARI;IASJkB,MATI;AAUJf,IAAAA,OAAAA;AAVI,GAAA,GAYFK,KAZJ;QAWKW,cAXL,4BAYIX,KAZJ,EAAA,SAAA,CAAA,CAAA;;AAcA,EAAA,oBACE,oBAAC,YAAD,EAAA,QAAA,CAAA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,QAAQ,EAAE,CAACO,UAAD,GAAc,CAAd,GAAkBK,SAAAA;AAF9B,GAAA,EAGMD,cAHN,EAAA;AAIE,IAAA,MAAM,EAAEtB,KAJV;AAKE,IAAA,WAAW,EAAEkB,UALf;AAME,IAAA,KAAK,EAAEf,IANT;AAOE,IAAA,QAAQ,EAAEG,OAPZ;IAQE,SAAS,EAAEkB,UAAU,CAACf,UAAU,CAACO,SAAZ,EAAuBA,SAAvB,CARvB;AASE,IAAA,IAAI,EAAE,CAACE,UAAD,GAAcD,IAAd,GAAqBM,SAT7B;AAUE,IAAA,GAAG,EAAEV,OAVP;AAWE,IAAA,MAAM,EAAEQ,MAAAA;GAEPF,CAAAA,EAAAA,QAAQ,gBAAG,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAEA,QAAAA;AAAZ,GAAA,CAAH,GAA8B,IAbzC,EAcGJ,QAAQ,iBAAI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOA,QAAP,CAdf,EAeGK,SAAS,gBAAG,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAEA,SAAAA;GAAf,CAAA,GAA+B,IAf3C,CADF,CAAA;AAmBD,CApC6E,EAAvE;AAqCPX,UAAU,CAACO,SAAX,GAAuBlB,SAAvB,CAAA;AACAW,UAAU,CAACgB,YAAX,GAA0B1B,aAA1B,CAAA;AACAU,UAAU,CAACiB,WAAX,GAAyB7B,cAAzB;;;;"}
+{"version":3,"file":"ButtonLink.js","sources":["../../../src/components/button-link/ButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ColorPalette, Comp } from '~/types';\nimport { Icon } from '~/components/icon';\nimport { ButtonSize, ButtonVariant, StyledButton } from '~/components/button';\nimport { ButtonLinkProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftButtonLink';\nconst CLASSNAME = 'redsift-button-link';\nconst DEFAULT_PROPS: Partial<ButtonLinkProps> = {\n  color: ColorPalette.primary,\n  size: ButtonSize.large,\n  variant: ButtonVariant.contained,\n};\n\n/**\n * The ButtonLink is a semantic link that looks like a button.\n * \n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const linkRef = ref || useRef<HTMLAnchorElement>();\n\n  const {\n    as,\n    children,\n    className,\n    color,\n    href,\n    isDisabled,\n    leftIcon,\n    rightIcon,\n    size,\n    target,\n    variant,\n    ...forwardedProps\n  } = props;\n\n  return (\n    <StyledButton\n      as={as || 'a'}\n      role=\"link\"\n      tabIndex={!isDisabled ? 0 : undefined}\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled}\n      $size={size}\n      $variant={variant}\n      className={classNames(ButtonLink.className, className)}\n      href={!isDisabled ? href : undefined}\n      ref={linkRef as RefObject<HTMLAnchorElement>}\n      target={target}\n    >\n      {leftIcon ? <Icon icon={leftIcon} /> : null}\n      {children && <span>{children}</span>}\n      {rightIcon ? <Icon icon={rightIcon} /> : null}\n    </StyledButton>\n  );\n});\nButtonLink.className = CLASSNAME;\nButtonLink.defaultProps = DEFAULT_PROPS;\nButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","color","ColorPalette","primary","size","ButtonSize","large","variant","ButtonVariant","contained","ButtonLink","forwardRef","props","ref","linkRef","useRef","as","children","className","href","isDisabled","leftIcon","rightIcon","target","forwardedProps","undefined","classNames","defaultProps","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,mBAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,qBAAlB,CAAA;AACA,MAAMC,aAAuC,GAAG;EAC9CC,KAAK,EAAEC,YAAY,CAACC,OAD0B;EAE9CC,IAAI,EAAEC,UAAU,CAACC,KAF6B;EAG9CC,OAAO,EAAEC,aAAa,CAACC,SAAAA;AAHuB,CAAhD,CAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC7F,EAAA,MAAMC,OAAO,GAAGD,GAAG,IAAIE,MAAM,EAA7B,CAAA;;EAEA,MAAM;IACJC,EADI;IAEJC,QAFI;IAGJC,SAHI;IAIJjB,KAJI;IAKJkB,IALI;IAMJC,UANI;IAOJC,QAPI;IAQJC,SARI;IASJlB,IATI;IAUJmB,MAVI;AAWJhB,IAAAA,OAAAA;AAXI,GAAA,GAaFK,KAbJ;QAYKY,cAZL,4BAaIZ,KAbJ,EAAA,SAAA,CAAA,CAAA;;AAeA,EAAA,oBACE,oBAAC,YAAD,EAAA,QAAA,CAAA;IACE,EAAE,EAAEI,EAAE,IAAI,GADZ;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,QAAQ,EAAE,CAACI,UAAD,GAAc,CAAd,GAAkBK,SAAAA;AAH9B,GAAA,EAIMD,cAJN,EAAA;AAKE,IAAA,MAAM,EAAEvB,KALV;AAME,IAAA,WAAW,EAAEmB,UANf;AAOE,IAAA,KAAK,EAAEhB,IAPT;AAQE,IAAA,QAAQ,EAAEG,OARZ;IASE,SAAS,EAAEmB,UAAU,CAAChB,UAAU,CAACQ,SAAZ,EAAuBA,SAAvB,CATvB;AAUE,IAAA,IAAI,EAAE,CAACE,UAAD,GAAcD,IAAd,GAAqBM,SAV7B;AAWE,IAAA,GAAG,EAAEX,OAXP;AAYE,IAAA,MAAM,EAAES,MAAAA;GAEPF,CAAAA,EAAAA,QAAQ,gBAAG,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAEA,QAAAA;AAAZ,GAAA,CAAH,GAA8B,IAdzC,EAeGJ,QAAQ,iBAAI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOA,QAAP,CAff,EAgBGK,SAAS,gBAAG,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAEA,SAAAA;GAAf,CAAA,GAA+B,IAhB3C,CADF,CAAA;AAoBD,CAtC6E,EAAvE;AAuCPZ,UAAU,CAACQ,SAAX,GAAuBnB,SAAvB,CAAA;AACAW,UAAU,CAACiB,YAAX,GAA0B3B,aAA1B,CAAA;AACAU,UAAU,CAACkB,WAAX,GAAyB9B,cAAzB;;;;"}

package/esm/_internal/SideNavigationMenu.js

@@ -2,10 +2,12 @@ import { _ as _taggedTemplateLiteral, c as _objectSpread2, a as _objectWithoutPr
 import React, { forwardRef, useRef, useContext, useState, useReducer, useCallback, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import { mdiChevronDown, mdiChevronRight } from '@redsift/icons';
+import { C as ColorPalette } from './types.js';
 import styled, { css } from 'styled-components';
 import { a as SideNavigationMenuBarContext, S as SideNavigationMenuItem, b as SideNavigationMenuContext } from './SideNavigationMenuItem.js';
 import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
 import { a as Icon } from './Icon2.js';
+import { a as Badge } from './Badge2.js';
 
 /**
  * Context props.
@@ -27,21 +29,21 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /**
  * Component style.
  */
-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 => {
+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  span {\n    padding-right: 12px;\n  }\n\n  .redsift-badge-dot {\n    position: relative;\n    top: -6px;\n  }\n\n  [dir=\"rtl\"] & {\n    i:first-child {\n      padding-left: 16px;\n      padding-right: unset;\n    }\n\n    span {\n      padding-left: 12px;\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 => {
   let {
     $isDisabled
   } = _ref;
-  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    "])));
+  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    "])));
 }, _ref2 => {
   let {
     $isDisabled
   } = _ref2;
-  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    "]))) : '';
+  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    "]))) : '';
 }, _ref3 => {
   let {
     $isDisabled
   } = _ref3;
-  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    "])));
+  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    "])));
 }, _ref4 => {
   let {
     $isExpanded
@@ -72,7 +74,7 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded = ["aria-label", "buttonProps", "buttonRef", "children", "className", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "withoutIcons"];
+const _excluded = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
 const COMPONENT_NAME = 'RedSiftSideNavigationMenu';
 const CLASSNAME = 'redsift-side-navigation-menu';
 const DEFAULT_PROPS = {};
@@ -89,6 +91,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     buttonRef = useRef(),
     children,
     className,
+    hasBadge,
     icon,
     iconProps,
     iconRef = useRef(),
@@ -96,6 +99,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     isExpanded: propsIsExpanded,
     menuProps = {},
     menuRef = useRef(),
+    tabIndex,
     withoutIcons
   } = props,
         forwardedProps = _objectWithoutProperties(props, _excluded);
@@ -377,14 +381,16 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-haspopup": "true",
     ref: buttonRef,
     role: "menuitem",
-    tabIndex: isFirstChild ? 0 : -1,
+    tabIndex: tabIndex !== undefined ? tabIndex : isFirstChild ? 0 : -1,
     type: "button"
   }, buttonEventHandler), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    color: "var(--redsift-color-side-navigation-menu-item-text-resting)"
+    color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
   }, iconProps, {
     icon: icon,
     ref: iconRef
-  })) : null, /*#__PURE__*/React.createElement("span", null, ariaLabel), isExpanded ? /*#__PURE__*/React.createElement(Icon, {
+  })) : null, /*#__PURE__*/React.createElement("span", null, ariaLabel), hasBadge && !isExpanded ? /*#__PURE__*/React.createElement(Badge, {
+    color: ColorPalette.error
+  }) : null, isExpanded ? /*#__PURE__*/React.createElement(Icon, {
     icon: mdiChevronDown,
     className: "".concat(SideNavigationMenu.className, "__expand-icon")
   }) : /*#__PURE__*/React.createElement(Icon, {

package/esm/_internal/SideNavigationMenu.js.map

@@ -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":";;;;;;;;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAOA,IAAYA,oCAAZ;;WAAYA;EAAAA;EAAAA;EAAAA;AAAAA,CAAAA,EAAAA,wCAAAA;;;;AChBZ;AACA;AACA;AACO,MAAMC,wBAAwB,GAAGC,MAAM,CAACC,GAAV,CAI/B,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,iHAAA,EAAA,kwBAAA,EAAA,+DAAA,EAAA,6TAAA,EAAA,SAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,WAAAA;GAAH,GAAA,IAAA,CAAA;AAAA,EAAA,OAAqB,CAACA,WAAD,GAAeC,GAAf,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,mFAAA,CAAA,CAAA,CAAA,CAAA,GAEnBA,GAFmB,CAArB,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,oFAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAJ+B,EA6C/B,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,WAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAqB,CAACA,WAAD,GAAeC,GAAf,qZAQnB,EARF,CAAA;AAAA,CA7C+B,EAyD/B,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,WAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAqB,CAACA,WAAD,GAAeC,GAAf,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,mFAAA,CAAA,CAAA,CAAA,CAAA,GAEnBA,GAFmB,CAArB,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,oFAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAzD+B,EAiF/B,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,WAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAqBA,WAAW,GAAGD,GAAH,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,+BAAA,CAAA,CAAA,CAAA,CAAA,GAE/BA,GAF+B,CAAhC,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,8BAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAjF+B,CAA9B;;ACJA,MAAME,yBAAyB,GACpC,CAACC,KAAD,EAAwCC,MAAxC,KAAoH;EAClH,QAAQA,MAAM,CAACC,IAAf;IACE,KAAKV,mCAAmC,CAACW,MAAzC;AACE,MAAA,OAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAYJ,KAAZ,CAAA,EAAA,EAAA,EAAA;AAAmBK,QAAAA,UAAU,EAAE,IAAA;AAA/B,OAAA,CAAA,CAAA;;IACF,KAAKb,mCAAmC,CAACc,QAAzC;MACE,OAAO;AACLD,QAAAA,UAAU,EAAE,KADP;AAELE,QAAAA,YAAY,EAAE,IAFT;AAGLC,QAAAA,aAAa,EAAE,IAAA;OAHjB,CAAA;;IAKF,KAAKhB,mCAAmC,CAACiB,IAAzC;AACE,MAAA,OAAAL,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKJ,KADL,CAAA,EAAA,EAAA,EAAA;AAEEK,QAAAA,UAAU,EAAE,IAFd;QAGEE,YAAY,EAAEN,MAAM,CAACS,KAHvB;QAIEF,aAAa,EAAER,KAAK,CAACO,YAAAA;AAJvB,OAAA,CAAA,CAAA;AAVJ,GAAA;AAiBD,CAnBI;;;ACwBP,MAAMI,cAAc,GAAG,2BAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,8BAAlB,CAAA;AACA,MAAMC,aAA+C,GAAG,EAAxD,CAAA;AAEA;AACA;AACA;;AACO,MAAMC,kBAAiE,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC1G,EAAA,MAAMC,MAAM,GAAID,GAAG,IAAIE,MAAM,EAA7B,CAAA;;EAEA,MAAM;AACJ,IAAA,YAAA,EAAcC,SADV;AAEJC,IAAAA,WAAW,GAAG,EAFV;IAGJC,SAAS,GAAGH,MAAM,EAHd;IAIJI,QAJI;IAKJC,SALI;IAMJC,IANI;IAOJC,SAPI;IAQJC,OAAO,GAAGR,MAAM,EARZ;IASJS,UATI;AAUJvB,IAAAA,UAAU,EAAEwB,eAVR;AAWJC,IAAAA,SAAS,GAAG,EAXR;IAYJC,OAAO,GAAGZ,MAAM,EAZZ;AAaJa,IAAAA,YAAAA;AAbI,GAAA,GAeFhB,KAfJ;QAcKiB,cAdL,4BAeIjB,KAfJ,EAAA,SAAA,CAAA,CAAA;;EAiBAkB,4BAA4B,CAAClB,KAAD,CAA5B,CAAA;AAEA,EAAA,MAAMmB,4BAA4B,GAAGC,UAAU,CAACC,4BAAD,CAA/C,CAAA;EACA,MAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCC,QAAQ,CAAC,KAAD,CAAhD,CAAA;EACA,MAAM;AAAEC,IAAAA,SAAS,EAAEC,YAAAA;GAAiBP,GAAAA,4BAA4B,IAAI,EAApE,CAAA;AAEA;AACF;AACA;AACA;;EACE,MAAMQ,UAA0B,GAAG,EAAnC,CAAA;EACAC,KAAK,CAACC,QAAN,CAAeC,OAAf,CAAuBvB,QAAvB,EAAiCwB,KAAK,IAAI;AACxC,IAAA,kBAAIH,KAAK,CAACI,cAAN,CAAqBD,KAArB,CAAgCA,IAAAA,KAAK,CAAC7C,IAAP,CAAkD+C,WAAlD,KAAkEC,sBAAsB,CAACD,WAA5H,EAAyI;MACvIN,UAAU,CAACQ,IAAX,CAAgBJ,KAAhB,CAAA,CAAA;AACD,KAAA;GAHH,CAAA,CAAA;EAKA,MAAMK,iBAAiB,GAAGT,UAAU,CAACU,GAAX,CAAe,CAACN,KAAD,EAAQrC,KAAR,KAAkB;AAAA,IAAA,IAAA,UAAA,EAAA,WAAA,CAAA;;IACzD,oBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAI,MAAA,GAAG,EAAEqC,CAAAA,UAAAA,GAAAA,KAAK,CAACO,GAAR,mDAAe5C,KAAtB;AAA6B,MAAA,IAAI,EAAC,MAAA;AAAlC,KAAA,eACGkC,KAAK,CAACW,YAAN,CAAmBR,KAAnB,EAA0B;AACzBtB,MAAAA,IAAI,EAAE+B,SADmB;AACR;MACjB5B,UAAU,EAAEmB,KAAK,CAAC/B,KAAN,CAAYY,UAAZ,IAA0BA,UAA1B,IAAwC4B,SAF3B;AAGzBC,MAAAA,aAAa,EAAE,IAHU;AAIzBH,MAAAA,GAAG,EAAEP,CAAAA,WAAAA,GAAAA,KAAK,CAACO,GAAR,qDAAe5C,KAJO;AAKzBsB,MAAAA,YAAAA;AALyB,KAA1B,CADH,CADF,CAAA;AAWD,GAZyB,CAA1B,CAAA;EAcA,MAAMS,SAAS,GAAGtB,MAAM,CAA6C,IAAIuC,GAAJ,EAA7C,CAAN,CAA8DC,OAAhF,CAAA;EACA,MAAM,CAAC3D,KAAD,EAAQ4D,QAAR,IAAoBC,UAAU,CAClC9D,yBADkC,EAElC;AACEQ,IAAAA,YAAY,EAAE,IADhB;AAEEF,IAAAA,UAAU,EAAEyD,OAAO,CAACjC,eAAD,CAFrB;AAGErB,IAAAA,aAAa,EAAE,IAAA;AAHjB,GAFkC,CAApC,CAAA;EAQA,MAAM;IAAEH,UAAF;IAAcE,YAAd;AAA4BC,IAAAA,aAAAA;AAA5B,GAAA,GAA8CR,KAApD,CAAA;AAEA,EAAA,MAAM+D,KAAK,GAAGC,WAAW,CACvB,MAAMJ,QAAQ,CAAC;IAAE1D,IAAI,EAAEV,mCAAmC,CAACiB,IAA5C;AAAkDC,IAAAA,KAAK,EAAE,CAAA;GAA1D,CADS,EAEvB,EAFuB,CAAzB,CAAA;AAKA,EAAA,MAAMuD,IAAI,GAAGD,WAAW,CACtB,MAAMJ,QAAQ,CAAC;IAAE1D,IAAI,EAAEV,mCAAmC,CAACiB,IAA5C;AAAkDC,IAAAA,KAAK,EAAE+B,SAAS,CAACyB,IAAV,GAAiB,CAAA;AAA1E,GAAD,CADQ,EAEtB,CAACzB,SAAS,CAACyB,IAAX,CAFsB,CAAxB,CAAA;AAKA,EAAA,MAAMC,IAAI,GAAGH,WAAW,CACrBtD,KAAD,IAAmBkD,QAAQ,CAAC;IAAE1D,IAAI,EAAEV,mCAAmC,CAACiB,IAA5C;AAAkDC,IAAAA,KAAAA;GAAnD,CADL,EAEtB,EAFsB,CAAxB,CAAA;AAKA,EAAA,MAAM0D,IAAI,GAAGJ,WAAW,CACtB,MAAMJ,QAAQ,CAAC;IAAE1D,IAAI,EAAEV,mCAAmC,CAACW,MAAAA;GAA7C,CADQ,EAEtB,EAFsB,CAAxB,CAAA;AAKA,EAAA,MAAMkE,KAAK,GAAGL,WAAW,CACtBM,WAAD,IAA2B;AACzB,IAAA,IAAIjE,UAAJ,EAAgB;AACd,MAAA,IAAIiE,WAAJ,EAAiB;QACfhD,SAAS,CAACqC,OAAV,CAAkBY,KAAlB,EAAA,CAAA;AACD,OAAA;;AAEDX,MAAAA,QAAQ,CAAC;QAAE1D,IAAI,EAAEV,mCAAmC,CAACc,QAAAA;AAA5C,OAAD,CAAR,CAAA;AACD,KAAA;AACF,GATsB,EAUvB,CAACD,UAAD,CAVuB,CAAzB,CAAA;;EAaA,MAAMmE,QAAQ,GAAG,MAAM;AACrB,IAAA,MAAM9D,KAAK,GAAGH,YAAY,KAAK,CAAjB,GAAqBkC,SAAS,CAACyB,IAAV,GAAiB,CAAtC,GAA0C3D,YAAY,GAAG,CAAvE,CAAA;IACA4D,IAAI,CAACzD,KAAD,CAAJ,CAAA;GAFF,CAAA;;EAKA,MAAM+D,IAAI,GAAG,MAAM;AACjB,IAAA,MAAM/D,KAAK,GAAGH,YAAY,KAAKkC,SAAS,CAACyB,IAAV,GAAiB,CAAlC,GAAsC,CAAtC,GAA0C3D,YAAY,GAAG,CAAvE,CAAA;IACA4D,IAAI,CAACzD,KAAD,CAAJ,CAAA;GAFF,CAAA;;EAKA,MAAMgE,KAAK,GAAIC,CAAD,IAA8C;IAC1D,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWrC,SAAX,CAAd,CAD0D;;IAI1D,MAAMsC,cAAc,GAAG,CACrB,GAAGH,KAAK,CAACI,KAAN,CAAYzE,YAAZ,CADkB,EAErB,GAAGqE,KAAK,CAACI,KAAN,CAAY,CAAZ,EAAezE,YAAf,CAFkB,CAAvB,CAJ0D;;AAU1D,IAAA,MAAM0E,OAAO,GAAGF,cAAc,CAACG,MAAf,CAAuBC,QAAD,IAAc;MAClD,MAAM;AAAEC,QAAAA,WAAAA;OAAgBD,GAAAA,QAAxB,CADkD;;AAGlD,MAAA,MAAME,WAAW,GAAGD,WAAH,KAAA,IAAA,IAAGA,WAAH,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAGA,WAAW,CAAEE,WAAb,EAAA,CAA2BC,MAA3B,CAAkC,CAAlC,CAApB,CAAA;AACA,MAAA,OAAOZ,CAAC,CAACrB,GAAF,KAAU+B,WAAjB,CAAA;KAJc,CAAhB,CAV0D;;AAkB1D,IAAA,IAAI,CAACJ,OAAO,CAACO,MAAb,EAAqB;AACnB,MAAA,OAAA;AACD,KApByD;AAuB1D;;;AACA,IAAA,MAAMC,WAAW,GAAGb,KAAK,CAACrE,YAAD,CAAzB,CAAA;AACA,IAAA,MAAMmF,SAAS,GAAGT,OAAO,CAACU,QAAR,CAAiBF,WAAjB,CAAA,GAAgCR,OAAO,CAAC,CAAD,CAAvC,GAA6CA,OAAO,CAAC,CAAD,CAAtE,CAAA;AACA,IAAA,MAAMvE,KAAK,GAAGkE,KAAK,CAACgB,SAAN,CAAiBC,IAAD,IAAU;MACtC,OAAOA,IAAI,KAAKH,SAAhB,CAAA;AACD,KAFa,CAAd,CAAA;IAIAvB,IAAI,CAACzD,KAAD,CAAJ,CAAA;GA9BF,CAAA;;AAiCA,EAAA,MAAMoF,KAAK,GAAGC,OAAO,CACnB,OAAO;AAAEtD,IAAAA,SAAAA;AAAF,GAAP,CADmB,EAEnB,CAACA,SAAD,CAFmB,CAArB,CAAA;AAKAuD,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,MAAMpB,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWrC,SAAX,CAAd,CAAA;;IAEA,IAAIlC,YAAY,KAAKC,aAArB,EAAoC;AAClC,MAAA,MAAMiF,WAAW,GAAGb,KAAK,CAACrE,YAAD,CAAzB,CAAA;AACAkF,MAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAElB,KAAb,EAAA,CAAA;AACD,KAAA;GANM,EAON,CAAC9B,SAAD,EAAYlC,YAAZ,EAA0BC,aAA1B,CAPM,CAAT,CAAA;AASAwF,EAAAA,SAAS,CAAC,MAAM;IACd,IAAI,CAAC7D,4BAAL,EAAmC;MACjCI,eAAe,CAAC,IAAD,CAAf,CAAA;AACA,MAAA,OAAA;AACD,KAAA;;AAED,IAAA,MAAM0D,YAAY,GAAI3E,SAAD,CAAmDqC,OAAxE,CAAA;;AAEA,IAAA,IAAIsC,YAAJ,EAAkB;MAChBvD,YAAY,CAACwD,GAAb,CAAiBD,YAAjB,CAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAO,MAAM;MACXvD,YAAY,CAACyD,MAAb,CAAoBF,YAApB,CAAA,CAAA;KADF,CAAA;AAGD,GAfQ,EAeN,CAACvD,YAAD,CAfM,CAAT,CAAA;;EAiBA,MAAM0D,eAAe,GAAIzB,CAAD,IAAyC;AAC/D,IAAA,IAAI/C,UAAJ,EAAgB;AACd,MAAA,OAAA;AACD,KAAA;;AACD,IAAA,MAAM6D,WAAW,GAAGd,CAAC,CAAC0B,MAAtB,CAAA;;IAEA,QAAQ1B,CAAC,CAAC2B,IAAV;AACE,MAAA,KAAK,OAAL,CAAA;AACA,MAAA,KAAK,OAAL;AACE3B,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACAd,QAAAA,WAAW,CAACe,KAAZ,EAAA,CAAA;QACAzC,KAAK,EAAA,CAAA;AACL,QAAA,MAAA;;AACF,MAAA,KAAK,YAAL;AACEY,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;QACAxC,KAAK,EAAA,CAAA;AACL,QAAA,MAAA;;AACF,MAAA,KAAK,WAAL;QACEE,IAAI,EAAA,CAAA;AACJ,QAAA,MAAA;AAbJ,KAAA;GANF,CAAA;;AAyBA,EAAA,MAAMwC,kBAAkB,GAAG;IACzBC,OAAO,EAAGC,KAAD,IAA0C;AAAA,MAAA,IAAA,oBAAA,CAAA;;AACjD,MAAA,IAAI/E,UAAJ,EAAgB;AACd,QAAA,OAAA;AACD,OAAA;;AAED,MAAA,CAAA,oBAAA,GAAAP,WAAW,CAACqF,OAAZ,mFAAArF,WAAW,EAAWsF,KAAX,CAAX,CAAA;AACAA,MAAAA,KAAK,CAACJ,eAAN,EAAA,CAAA;;AACA,MAAA,IAAIlG,UAAJ,EAAgB;QACdgE,KAAK,EAAA,CAAA;AACN,OAFD,MAEO;QACLD,IAAI,EAAA,CAAA;AACL,OAAA;KAZsB;IAczBwC,SAAS,EAAGD,KAAD,IAA6C;AAAA,MAAA,IAAA,qBAAA,CAAA;;AACtD,MAAA,CAAA,qBAAA,GAAAtF,WAAW,CAACuF,SAAZ,qFAAAvF,WAAW,EAAasF,KAAb,CAAX,CAAA;MACAP,eAAe,CAACO,KAAD,CAAf,CAAA;AACD,KAAA;GAjBH,CAAA;;EAoBA,MAAME,qBAAqB,GAAIlC,CAAD,IAAwC;AACpE,IAAA,MAAMc,WAAW,GAAGd,CAAC,CAAC0B,MAAtB,CAAA;;IAEA,QAAQ1B,CAAC,CAAC2B,IAAV;AACE,MAAA,KAAK,SAAL;AACE3B,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACA5B,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACAtC,QAAQ,EAAA,CAAA;AACR,QAAA,MAAA;;AACF,MAAA,KAAK,WAAL;AACEG,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACA5B,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACArC,IAAI,EAAA,CAAA;AACJ,QAAA,MAAA;;AACF,MAAA,KAAK,WAAL;AACEE,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;AACAnC,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;QACAlC,KAAK,CAAC,IAAD,CAAL,CAAA;AACA,QAAA,MAAA;;AACF,MAAA,KAAK,YAAL;AACEM,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACAzC,KAAK,CAAC,CAAClC,4BAAF,CAAL,CAAA;AACA,QAAA,MAAA;;AACF,MAAA,KAAK,MAAL;AACEwC,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACA5B,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACA/C,KAAK,EAAA,CAAA;AACL,QAAA,MAAA;;AACF,MAAA,KAAK,KAAL;AACEY,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACA5B,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACA7C,IAAI,EAAA,CAAA;AACJ,QAAA,MAAA;;AACF,MAAA,KAAK,OAAL,CAAA;AACA,MAAA,KAAK,OAAL;AACEU,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;AACArB,QAAAA,WAAW,CAACe,KAAZ,EAAA,CAAA;AACA,QAAA,MAAA;;AACF,MAAA,KAAK,QAAL;AACE7B,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;AACA5B,QAAAA,CAAC,CAACmC,cAAF,EAAA,CAAA;QACAzC,KAAK,CAAC,IAAD,CAAL,CAAA;AACA,QAAA,MAAA;;AACF,MAAA;AACEM,QAAAA,CAAC,CAAC4B,eAAF,EAAA,CAAA;QACA7B,KAAK,CAACC,CAAD,CAAL,CAAA;AACA,QAAA,MAAA;AA3CJ,KAAA;GAHF,CAAA;;AAkDA,EAAA,MAAMoC,wBAAwB,GAAG;IAC/BH,SAAS,EAAGD,KAAD,IAA4C;AAAA,MAAA,IAAA,oBAAA,CAAA;;AACrD,MAAA,CAAA,oBAAA,GAAA7E,SAAS,CAAC8E,SAAV,mFAAA9E,SAAS,EAAa6E,KAAb,CAAT,CAAA;MACAE,qBAAqB,CAACF,KAAD,CAArB,CAAA;KAH6B;IAK/BD,OAAO,EAAGC,KAAD,IAAyC;AAAA,MAAA,IAAA,kBAAA,CAAA;;AAChD,MAAA,IAAI/E,UAAJ,EAAgB;AACd,QAAA,OAAA;AACD,OAAA;;AACD,MAAA,CAAA,kBAAA,GAAAE,SAAS,CAAC4E,OAAV,+EAAA5E,SAAS,EAAW6E,KAAX,CAAT,CAAA;AACD,KAAA;GAVH,CAAA;EAaA,oBACE,KAAA,CAAA,aAAA,CAAC,wBAAD,EAAA,QAAA,CAAA,EAAA,EACM1E,cADN,EAAA;AAEE,IAAA,WAAW,EAAEL,UAFf;AAGE,IAAA,WAAW,EAAEvB,UAHf;AAIE,IAAA,aAAa,EAAE2B,YAJjB;IAKE,SAAS,EAAEgF,UAAU,CAAClG,kBAAkB,CAACU,SAApB,EAA+BA,SAA/B,CALvB;AAME,IAAA,GAAG,EAAEN,MANP;AAOE,IAAA,QAAQ,EAAEsC,SAAAA;GAEV,CAAA,eAAA,KAAA,CAAA,aAAA,CAAC,yBAAD,CAA2B,QAA3B,EAAA;AAAoC,IAAA,KAAK,EAAEsC,KAAAA;AAA3C,GAAA,eACE,2CACMzE,WADN,EAAA;AAEE,IAAA,eAAA,EAAeO,UAFjB;AAGE,IAAA,eAAA,EAAevB,UAAU,GAAG,MAAH,GAAY,OAHvC;AAIE,IAAA,eAAA,EAAc,MAJhB;AAKE,IAAA,GAAG,EAAEiB,SALP;AAME,IAAA,IAAI,EAAC,UANP;AAOE,IAAA,QAAQ,EAAEgB,YAAY,GAAG,CAAH,GAAO,CAAC,CAPhC;AAQE,IAAA,IAAI,EAAC,QAAA;AARP,GAAA,EASMmE,kBATN,CAAA,EAWGhF,IAAI,gBACH,oBAAC,IAAD,EAAA,QAAA,CAAA;AACE,IAAA,KAAK,EAAC,6DAAA;AADR,GAAA,EAEMC,SAFN,EAAA;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,GAAG,EAAEE,OAAAA;GALJ,CAAA,CAAA,GAMA,IAjBP,eAkBE,KAAOP,CAAAA,aAAAA,CAAAA,MAAAA,EAAAA,IAAAA,EAAAA,SAAP,CAlBF,EAmBGf,UAAU,gBACT,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAE4G,cAAZ;IAA4B,SAAS,EAAA,EAAA,CAAA,MAAA,CAAKnG,kBAAkB,CAACU,SAAxB,EAAA,eAAA,CAAA;GAD5B,CAAA,gBAET,oBAAC,IAAD,EAAA;AAAM,IAAA,IAAI,EAAE0F,eAAZ;IAA6B,SAAS,EAAA,EAAA,CAAA,MAAA,CAAKpG,kBAAkB,CAACU,SAAxB,EAAA,eAAA,CAAA;GArB1C,CAAA,CADF,eAyBE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAA,EACMM,SADN,EAAA;AAEE,IAAA,YAAA,EAAYV,SAFd;AAGE,IAAA,kBAAA,EAAiB,UAHnB;IAIE,MAAM,EAAE,CAACf,UAJX;AAKE,IAAA,GAAG,EAAE0B,OALP;AAME,IAAA,IAAI,EAAC,MAAA;AANP,GAAA,EAOMgF,wBAPN,CAAA,EASG3D,iBATH,CAzBF,CATF,CADF,CAAA;AAiDD,CArU0F,EAApF;AAsUPtC,kBAAkB,CAACU,SAAnB,GAA+BZ,SAA/B,CAAA;AACAE,kBAAkB,CAACqG,YAAnB,GAAkCtG,aAAlC,CAAA;AACAC,kBAAkB,CAACmC,WAAnB,GAAiCtC,cAAjC;;;;"}
+{"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  /** Whether or not the menu contains children that have a badge. */\n  hasBadge?: boolean;\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  span {\n    padding-right: 12px;\n  }\n\n  .redsift-badge-dot {\n    position: relative;\n    top: -6px;\n  }\n\n  [dir=\"rtl\"] & {\n    i:first-child {\n      padding-left: 16px;\n      padding-right: unset;\n    }\n\n    span {\n      padding-left: 12px;\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 { ColorPalette, Comp } from '~/types';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { Icon } from '~/components/icon';\nimport { Badge } from '~/components/badge';\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    hasBadge,\n    icon,\n    iconProps,\n    iconRef = useRef<HTMLElement>(),\n    isDisabled,\n    isExpanded: propsIsExpanded,\n    menuProps = {},\n    menuRef = useRef<HTMLUListElement>(),\n    tabIndex,\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={tabIndex !== undefined ? 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          {hasBadge && !isExpanded ? <Badge color={ColorPalette.error} /> : null}\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","hasBadge","icon","iconProps","iconRef","isDisabled","propsIsExpanded","menuProps","menuRef","tabIndex","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","ColorPalette","error","mdiChevronDown","mdiChevronRight","defaultProps"],"mappings":"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"}

package/esm/_internal/SideNavigationMenuItem.js

@@ -1,9 +1,11 @@
 import { _ as _taggedTemplateLiteral, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useRef, useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { C as ColorPalette } from './types.js';
 import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
 import { A as AppContainerContext } from './context.js';
 import styled, { css } from 'styled-components';
+import { a as Badge, B as BadgeVariant } from './Badge2.js';
 import { a as Icon } from './Icon2.js';
 
 const SideNavigationMenuBarContext = /*#__PURE__*/React.createContext(null);
@@ -19,27 +21,27 @@ const StyledSideNavigationMenuItem = styled.a(_templateObject || (_templateObjec
   let {
     $isDisabled
   } = _ref;
-  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  "])));
+  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  "])));
 }, _ref2 => {
   let {
     $isDisabled
   } = _ref2;
-  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    "]))) : '';
+  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    "]))) : '';
 }, _ref3 => {
   let {
     $isSecondLevel,
     $withoutIcons
   } = _ref3;
-  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  ");
+  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    span {\n      padding-right: 12px;\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      span {\n        padding-left: 12px;\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    span {\n      padding-right: 12px;\n    }\n\n    [dir=\"rtl\"] & {\n      padding-left: unset;\n      padding-right: 16px;\n\n      span {\n        padding-left: 12px;\n        padding-right: unset;\n      }\n    }\n  ");
 }, _ref4 => {
   let {
     $isCurrent,
     $isDisabled
   } = _ref4;
-  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  "]))) : '';
+  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  "]))) : '';
 });
 
-const _excluded = ["children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "withoutIcons"];
+const _excluded = ["badgeNumber", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
 const COMPONENT_NAME = 'RedSiftSideNavigationMenuItem';
 const CLASSNAME = 'redsift-side-navigation-menu-item';
 const DEFAULT_PROPS = {};
@@ -51,6 +53,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const menuItemRef = ref || useRef();
 
   const {
+    badgeNumber,
     children,
     className,
     href,
@@ -62,6 +65,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     isSecondLevel,
     onClick,
     onKeyDown,
+    tabIndex,
     withoutIcons
   } = props,
         forwardedProps = _objectWithoutProperties(props, _excluded);
@@ -119,13 +123,16 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: isDisabled ? undefined : onClick,
     onKeyDown: isDisabled ? undefined : onKeyDown,
     ref: menuItemRef,
-    tabIndex: !sideNavigationMenuContext && isFirstChild ? 0 : -1
+    tabIndex: tabIndex !== undefined ? tabIndex : !sideNavigationMenuContext && isFirstChild ? 0 : -1
   }), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    color: "var(--redsift-color-side-navigation-menu-item-text-resting)"
+    color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
   }, iconProps, {
     icon: icon,
     ref: iconRef
-  })) : null, /*#__PURE__*/React.createElement("span", null, children));
+  })) : null, /*#__PURE__*/React.createElement("span", null, children), badgeNumber ? /*#__PURE__*/React.createElement(Badge, {
+    variant: BadgeVariant.standard,
+    color: ColorPalette.error
+  }, badgeNumber) : null);
 });
 SideNavigationMenuItem.className = CLASSNAME;
 SideNavigationMenuItem.defaultProps = DEFAULT_PROPS;

package/esm/_internal/SideNavigationMenuItem.js.map

@@ -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":";;;;;;;;AAGO,MAAMA,4BAA4B,gBAAGC,KAAK,CAACC,aAAN,CAAuD,IAAvD;;ACArC,MAAMC,yBAAyB,gBAAGF,KAAK,CAACC,aAAN,CAAoD,IAApD;;;;ACAzC;AACA;AACA;AACO,MAAME,4BAA4B,GAAGC,MAAM,CAACC,CAAV,CAIrC,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,uCAAA,EAAA,iXAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,WAAAA;GAAH,GAAA,IAAA,CAAA;AAAA,EAAA,OAAqB,CAACA,WAAD,GAAeC,GAAf,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,+EAAA,CAAA,CAAA,CAAA,CAAA,GAEnBA,GAFmB,CAArB,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,gFAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAJqC,EAqBnC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,WAAAA;GAAH,GAAA,KAAA,CAAA;AAAA,EAAA,OAAqB,CAACA,WAAD,GAAeC,GAAf,mPAGnB,EAHF,CAAA;AAAA,CArBmC,EA2BrC,KAAA,IAAA;EAAA,IAAC;IAAEC,cAAF;AAAkBC,IAAAA,aAAAA;GAAnB,GAAA,KAAA,CAAA;EAAA,OAAuC,CAACD,cAAD,GAAkBD,GAAlB,CAAA,gBAAA,KAAA,gBAAA,GAAA,sBAAA,CAAA,CAAA,ocAAA,CAAA,CAAA,CAAA,CAAA,GAAA,2LAAA,CAAA,MAAA,CA+BvB,CAACE,aAAD,GAAiB,MAAjB,GAA0B,MA/BH,EAAvC,sHAAA,CAAA,CAAA;AAAA,CA3BqC,EAmErC,KAAA,IAAA;EAAA,IAAC;IAAEC,UAAF;AAAcJ,IAAAA,WAAAA;GAAf,GAAA,KAAA,CAAA;AAAA,EAAA,OAAiCI,UAAU,IAAI,CAACJ,WAAf,GAA6BC,GAA7B,kQAG/B,EAHF,CAAA;AAAA,CAnEqC,CAAlC;;;ACYP,MAAMI,cAAc,GAAG,+BAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,mCAAlB,CAAA;AACA,MAAMC,aAAmD,GAAG,EAA5D,CAAA;AAEA;AACA;AACA;;AACO,MAAMC,sBAGZ,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC7B,EAAA,MAAMC,WAAW,GAAGD,GAAG,IAAIE,MAAM,EAAjC,CAAA;;EAEA,MAAM;IACJC,QADI;IAEJC,SAFI;IAGJC,IAHI;IAIJC,IAJI;IAKJC,SALI;IAMJC,OAAO,GAAGN,MAAM,EANZ;IAOJO,SAPI;IAQJC,UARI;IASJC,aATI;IAUJC,OAVI;IAWJC,SAXI;AAYJC,IAAAA,YAAAA;AAZI,GAAA,GAcFf,KAdJ;QAaKgB,cAbL,4BAcIhB,KAdJ,EAAA,SAAA,CAAA,CAAA;;AAgBAiB,EAAAA,4BAA4B,CAACjB,KAAD,EAAQ,CAACI,QAAD,CAAR,CAA5B,CAAA;AAEA,EAAA,MAAMc,iBAAiB,GAAGC,UAAU,CAACC,mBAAD,CAApC,CAAA;AACAC,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIH,iBAAiB,IAAIR,SAArB,IAAkC,OAAON,QAAP,KAAoB,QAA1D,EAAoE;MAClEc,iBAAiB,CAACI,QAAlB,CAA2BlB,QAA3B,CAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAO,MAAM;AACX,MAAA,IAAIc,iBAAJ,EAAuB;QACrBA,iBAAiB,CAACI,QAAlB,CAA2BC,SAA3B,CAAA,CAAA;AACD,OAAA;KAHH,CAAA;AAKD,GAVQ,EAUN,CAACb,SAAD,CAVM,CAAT,CAAA;AAYA,EAAA,MAAMc,4BAA4B,GAAGL,UAAU,CAACpC,4BAAD,CAA/C,CAAA;AACA,EAAA,MAAM0C,yBAAyB,GAAGN,UAAU,CAACjC,yBAAD,CAA5C,CAAA;EACA,MAAM,CAACwC,YAAD,EAAeC,eAAf,IAAkCC,QAAQ,CAAC,KAAD,CAAhD,CAAA;EACA,MAAM;AAAEC,IAAAA,SAAAA;AAAF,GAAA,GACJJ,yBAAyB,IAAID,4BAA7B,IAA6D,EAD/D,CAAA;AAGAH,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAI,EAAEI,yBAAyB,IAAID,4BAA/B,CAAJ,EAAkE;MAChEG,eAAe,CAAC,IAAD,CAAf,CAAA;AACA,MAAA,OAAA;AACD,KAAA;;AAED,IAAA,MAAMG,YAAY,GAAI5B,WAAD,CAClB6B,OADH,CAAA;;AAGA,IAAA,IAAID,YAAJ,EAAkB;AAChB,MAAA,IAAI,CAACD,SAAS,CAACG,IAAf,EAAqB;QACnBL,eAAe,CAAC,IAAD,CAAf,CAAA;AACD,OAAA;;MAEDE,SAAS,CAACI,GAAV,CAAcH,YAAd,CAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAO,MAAM;MACXD,SAAS,CAACK,MAAV,CAAiBJ,YAAjB,CAAA,CAAA;KADF,CAAA;AAGD,GApBQ,EAoBN,CAACD,SAAD,CApBM,CAAT,CAAA;AAsBA,EAAA,oBACE,oBAAC,4BAAD,EAAA,QAAA,CAAA;AACE,IAAA,IAAI,EAAC,UAAA;AADP,GAAA,EAEMb,cAFN,EAAA;AAGE,IAAA,UAAU,EAAEN,SAHd;AAIE,IAAA,WAAW,EAAEC,UAJf;AAKE,IAAA,cAAc,EAAEC,aALlB;AAME,IAAA,aAAa,EAAEG,YANjB;AAOE,IAAA,cAAA,EAAcL,SAAS,GAAG,MAAH,GAAYa,SAPrC;AAQE,IAAA,eAAA,EAAeZ,UARjB;IASE,SAAS,EAAEwB,UAAU,CAACrC,sBAAsB,CAACO,SAAxB,EAAmCA,SAAnC,CATvB;AAUE,IAAA,IAAI,EAAE,CAACM,UAAD,GAAcL,IAAd,GAAqBiB,SAV7B;AAWE,IAAA,OAAO,EAAEZ,UAAU,GAAGY,SAAH,GAAeV,OAXpC;AAYE,IAAA,SAAS,EAAEF,UAAU,GAAGY,SAAH,GAAeT,SAZtC;AAaE,IAAA,GAAG,EAAEZ,WAbP;IAcE,QAAQ,EAAE,CAACuB,yBAAD,IAA8BC,YAA9B,GAA6C,CAA7C,GAAiD,CAAC,CAAA;GAE3DnB,CAAAA,EAAAA,IAAI,gBACH,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA,QAAA,CAAA;AACE,IAAA,KAAK,EAAC,6DAAA;AADR,GAAA,EAEMC,SAFN,EAAA;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,GAAG,EAAEE,OAAAA;AAJP,GAAA,CAAA,CADG,GAOD,IAvBN,eAwBE,KAAOL,CAAAA,aAAAA,CAAAA,MAAAA,EAAAA,IAAAA,EAAAA,QAAP,CAxBF,CADF,CAAA;AA4BD,CA1Fa,EAHP;AA8FPN,sBAAsB,CAACO,SAAvB,GAAmCT,SAAnC,CAAA;AACAE,sBAAsB,CAACsC,YAAvB,GAAsCvC,aAAtC,CAAA;AACAC,sBAAsB,CAACuC,WAAvB,GAAqC1C,cAArC;;;;"}
+{"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    span {\n      padding-right: 12px;\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      span {\n        padding-left: 12px;\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    span {\n      padding-right: 12px;\n    }\n\n    [dir=\"rtl\"] & {\n      padding-left: unset;\n      padding-right: 16px;\n\n      span {\n        padding-left: 12px;\n        padding-right: unset;\n      }\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 { ColorPalette, 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';\nimport { Badge, BadgeVariant } from '~/components/badge';\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    badgeNumber,\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    tabIndex,\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={tabIndex !== undefined ? 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      {badgeNumber ? <Badge variant={BadgeVariant.standard} color={ColorPalette.error}>{badgeNumber}</Badge> : null}\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","badgeNumber","children","className","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","tabIndex","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","appContainerState","useContext","AppContainerContext","useEffect","setTitle","undefined","sideNavigationMenuBarContext","sideNavigationMenuContext","isFirstChild","setIsFirstChild","useState","menuItems","menuItemNode","current","size","add","delete","classNames","BadgeVariant","standard","ColorPalette","error","defaultProps","displayName"],"mappings":"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"}

package/esm/_internal/app-side-panel.js

@@ -13,5 +13,6 @@ import './warnIfNoAccessibleLabelFound.js';
 import './Icon2.js';
 import './useSideNavigationMenuBar.js';
 import './SideNavigationMenuItem.js';
+import './Badge2.js';
 import './SideNavigationMenu.js';
 //# sourceMappingURL=app-side-panel.js.map

package/esm/_internal/app-side-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-side-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"app-side-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/_internal/side-navigation-menu-bar.js

@@ -5,9 +5,10 @@ import 'classnames';
 import './warnIfNoAccessibleLabelFound.js';
 import 'styled-components';
 import './SideNavigationMenuItem.js';
+import './types.js';
 import './context.js';
+import './Badge2.js';
 import './Icon2.js';
-import './types.js';
 import './SideNavigationMenu.js';
 import '@redsift/icons';
 //# sourceMappingURL=side-navigation-menu-bar.js.map

package/esm/_internal/side-navigation-menu-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation-menu-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"side-navigation-menu-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/side-navigation-menu-item.js

@@ -2,9 +2,10 @@ export { S as SideNavigationMenuItem } from './SideNavigationMenuItem.js';
 import './_rollupPluginBabelHelpers.js';
 import 'react';
 import 'classnames';
+import './types.js';
 import './warnIfNoAccessibleLabelFound.js';
 import './context.js';
 import 'styled-components';
+import './Badge2.js';
 import './Icon2.js';
-import './types.js';
 //# sourceMappingURL=side-navigation-menu-item.js.map

package/esm/_internal/side-navigation-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation-menu-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"side-navigation-menu-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/esm/_internal/side-navigation-menu.js

@@ -3,10 +3,11 @@ import './_rollupPluginBabelHelpers.js';
 import 'react';
 import 'classnames';
 import '@redsift/icons';
+import './types.js';
 import 'styled-components';
 import './SideNavigationMenuItem.js';
 import './warnIfNoAccessibleLabelFound.js';
 import './context.js';
+import './Badge2.js';
 import './Icon2.js';
-import './types.js';
 //# sourceMappingURL=side-navigation-menu.js.map

package/esm/_internal/side-navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation-menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"side-navigation-menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/types.js.map

@@ -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    // eslint-disable-next-line no-unused-vars\n    (props: P & { children?: any; 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;;AAcA;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;;;;"}
+{"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;;;;"}

package/esm/_internal/useSideNavigationMenuBar.js

@@ -11,7 +11,7 @@ var _templateObject, _templateObject2;
 /**
  * Component style.
  */
-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 => {
+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 => {
   let {
     $marginTop = 0
   } = _ref;
@@ -92,7 +92,8 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       key: (_child$key2 = child.key) !== null && _child$key2 !== void 0 ? _child$key2 : index,
       // First-level children should have icon, even empty one (except when withoutIcons is set to true)
       icon: withoutIcons ? undefined : child.props.icon || 'M 0,0',
-      withoutIcons
+      withoutIcons,
+      tabIndex: index === 0 ? 0 : -1
     }));
   });
   const menuItems = useRef(new Set()).current;
@@ -271,7 +272,8 @@ const useSideNavigationMenuBar = _ref => {
       menuBarChildren.push( /*#__PURE__*/React.createElement(SideNavigationMenu, _extends({
         key: title,
         "aria-label": title,
-        isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined
+        isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined,
+        hasBadge: children.filter(child => child.badgeNumber).length > 0
       }, rest, {
         ref: ref
       }), children.map(child => {

package/esm/_internal/useSideNavigationMenuBar.js.map

@@ -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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"}
+{"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          tabIndex: index === 0 ? 0 : -1,\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          hasBadge={children.filter(child => child.badgeNumber).length > 0}\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","tabIndex","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","badgeNumber"],"mappings":"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"}

package/package.json

@@ -21,21 +21,22 @@
   "sideEffects": false,
   "scripts": {
     "build": "rollup -c && yarn generate:types",
-    "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=@mdi/js -o dist/types.d.ts src/index.ts",
+    "generate:types": "dts-bundle-generator -o dist/types.d.ts src/index.ts",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
     "check-types": "tsc && tsc-strict",
     "prepare": "install-peers || exit 0",
     "prepublishOnly": "yarn build",
     "test": "NODE_ENV=test jest --verbose",
-    "build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
+    "build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json",
+    "version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
   },
   "types": "types.d.ts",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.12",
   "dependencies": {
     "@react-aria/button": "^3.5.0",
     "@react-aria/focus": "^3.6.1",
     "@react-types/button": "^3.5.0",
-    "@redsift/icons": "^6.0.0-alpha.10",
+    "@redsift/icons": "^6.0.0-alpha.12",
     "classnames": "^2.3.1"
   },
   "devDependencies": {
@@ -72,6 +73,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "autoprefixer": "^9.7.4",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "changelog-verify": "^1.1.2",
     "dts-bundle-generator": "^6.9.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.26.0",
@@ -106,6 +108,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.4",
     "typescript-strict-plugin": "^2.0.0",
+    "version-changelog": "^3.1.1",
     "webpack": "^5.72.1",
     "yargs": "^17.5.0",
     "yarn": "^1.22.18"
@@ -115,5 +118,5 @@
     "react-dom": "17 || 18",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "131dfabfa6785c031ec1a4fa0a17c824f778e456"
+  "gitHead": "9a12739bdfd15f922fc719990eaa8a5daaec8485"
 }

package/style/redsift.css

@@ -224,7 +224,7 @@
   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;
 }/**
  * Do not edit directly
- * Generated on Mon, 19 Sep 2022 10:32:01 GMT
+ * Generated on Wed, 28 Sep 2022 15:20:09 GMT
  */
 
 :root {
@@ -248,9 +248,9 @@
   --redsift-color-text-light-secondary: rgba(255, 255, 255, 0.9);
   --redsift-color-link-primary: #02ac61;
   --redsift-color-link-underline: rgba(2, 172, 97, 0.4);
-  --redsift-color-error-main: #e06354;
-  --redsift-color-error-dark: #e31b0c;
-  --redsift-color-error-light: #ffe3e0;
+  --redsift-color-error-main: #e11010;
+  --redsift-color-error-dark: #b41010;
+  --redsift-color-error-light: #fce7e7;
   --redsift-color-error-contrast: #ffffff;
   --redsift-color-error-contained-hover: #e31b0c;
   --redsift-color-error-outlined-hover: #e31b0c;
@@ -290,16 +290,21 @@
   --redsift-color-action-disabled: #a8a8a8;
   --redsift-color-action-disabled-background: #e4e4e4;
   --redsift-color-action-focus: #e4e4e4;
-  --redsift-color-side-navigation-background: #2d2d34;
-  --redsift-color-side-navigation-menu-item-text-resting: rgba(255, 255, 255, 0.7);
-  --redsift-color-side-navigation-menu-item-text-disabled: #76767a;
-  --redsift-color-side-navigation-menu-item-text-hover: #ffffff;
-  --redsift-color-side-navigation-menu-item-background-hover: #4c4c64;
-  --redsift-color-side-navigation-menu-item-background-secondary: #333340;
-  --redsift-color-side-navigation-menu-item-background-active: #39394c;
-  --redsift-color-side-navigation-menu-item-active: #02ac61;
-  --redsift-color-side-navigation-scrollbar-resting: #4c4c64;
-  --redsift-color-side-navigation-scrollbar-hover: #5d5d73;
+  --redsift-color-component-side-navigation-background: #2D2D34;
+  --redsift-color-component-side-navigation-menu-item-text-resting: #FFFFFFB3;
+  --redsift-color-component-side-navigation-menu-item-text-disabled: #76767A;
+  --redsift-color-component-side-navigation-menu-item-text-hover: #FFFFFF;
+  --redsift-color-component-side-navigation-menu-item-background-hover: #4C4C64;
+  --redsift-color-component-side-navigation-menu-item-background-secondary: #333340;
+  --redsift-color-component-side-navigation-menu-item-background-active: #39394C;
+  --redsift-color-component-side-navigation-menu-item-active: #02AC61;
+  --redsift-color-component-side-navigation-scrollbar-resting: #4C4C64;
+  --redsift-color-component-side-navigation-scrollbar-hover: #5d5d73;
+  --redsift-color-component-app-bar-background: var(--redsift-color-primary-main);
+  --redsift-color-component-app-bar-text: var(--redsift-color-primary-contrast);
+  --redsift-color-component-app-bar-expand-icon-resting: var(--redsift-color-primary-contrast);
+  --redsift-color-component-app-bar-expand-icon-hover: var(--redsift-color-primary-contrast);
+  --redsift-color-component-app-bar-expand-icon-background-hover: var(--redsift-color-primary-contained-hover);
   --redsift-typography-font-family-raleway: 'Raleway', sans-serif;
   --redsift-typography-font-family-electrolize: 'electrolize', sans-serif;
   --redsift-typography-font-family-source-code-pro: 'Source Code Pro', sans-serif;

package/types.d.ts

@@ -1,11 +1,12 @@
 // Generated by dts-bundle-generator v6.12.0
 
-/// <reference types="react" />
+import { PressEvent } from '@react-types/shared';
+import React from 'react';
+import { ChangeEvent, ComponentProps, MutableRefObject, ReactElement, Ref, RefObject } from 'react';
 
 /** Component Type. */
 export declare type Comp<P, T = HTMLElement> = {
 	(props: P & {
-		children?: any;
 		ref?: Ref<T>;
 	}): ReactElement | null;
 	/** React component type. */
@@ -238,6 +239,8 @@ export interface SideNavigationMenuProps extends ComponentProps<"div"> {
 	buttonProps?: ComponentProps<"button">;
 	/** Custom ref to pass to the button. */
 	buttonRef?: MutableRefObject<HTMLButtonElement>;
+	/** Whether or not the menu contains children that have a badge. */
+	hasBadge?: boolean;
 	/**
 	 * Icon path data (`d` property of the `path` SVG element).<br />
 	 * 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 />
@@ -275,6 +278,8 @@ export declare const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivEl
 export interface SideNavigationMenuItemProps extends ComponentProps<"a"> {
 	/** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs Link component). */
 	as?: "a" | any;
+	/** Number that should be displayed inside a badge next to the menu item text. */
+	badgeNumber?: number;
 	/** Href is required for this component. */
 	href: ComponentProps<"a">["href"];
 	/**