@redsift/design-system 6.0.0-alpha.11 → 6.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/_internal/ButtonLink.js +3 -1
- package/esm/_internal/ButtonLink.js.map +1 -1
- package/esm/_internal/SideNavigationMenu.js +10 -4
- package/esm/_internal/SideNavigationMenu.js.map +1 -1
- package/esm/_internal/SideNavigationMenuItem.js +11 -4
- package/esm/_internal/SideNavigationMenuItem.js.map +1 -1
- package/esm/_internal/app-side-panel.js +1 -0
- package/esm/_internal/app-side-panel.js.map +1 -1
- package/esm/_internal/side-navigation-menu-bar.js +2 -1
- package/esm/_internal/side-navigation-menu-bar.js.map +1 -1
- package/esm/_internal/side-navigation-menu-item.js +2 -1
- package/esm/_internal/side-navigation-menu-item.js.map +1 -1
- package/esm/_internal/side-navigation-menu.js +2 -1
- package/esm/_internal/side-navigation-menu.js.map +1 -1
- package/esm/_internal/useSideNavigationMenuBar.js +4 -2
- package/esm/_internal/useSideNavigationMenuBar.js.map +1 -1
- package/package.json +7 -4
- package/style/redsift.css +4 -4
- package/types.d.ts +4 -0
|
@@ -5,7 +5,7 @@ import { C as ColorPalette } from './types.js';
|
|
|
5
5
|
import { a as ButtonSize, B as ButtonVariant, S as StyledButton } from './styles.js';
|
|
6
6
|
import { a as Icon } from './Icon2.js';
|
|
7
7
|
|
|
8
|
-
const _excluded = ["children", "className", "color", "href", "isDisabled", "leftIcon", "rightIcon", "size", "target", "variant"];
|
|
8
|
+
const _excluded = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "rightIcon", "size", "target", "variant"];
|
|
9
9
|
const COMPONENT_NAME = 'RedSiftButtonLink';
|
|
10
10
|
const CLASSNAME = 'redsift-button-link';
|
|
11
11
|
const DEFAULT_PROPS = {
|
|
@@ -25,6 +25,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
25
25
|
const linkRef = ref || useRef();
|
|
26
26
|
|
|
27
27
|
const {
|
|
28
|
+
as,
|
|
28
29
|
children,
|
|
29
30
|
className,
|
|
30
31
|
color,
|
|
@@ -39,6 +40,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
39
40
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
40
41
|
|
|
41
42
|
return /*#__PURE__*/React.createElement(StyledButton, _extends({
|
|
43
|
+
as: as || 'a',
|
|
42
44
|
role: "link",
|
|
43
45
|
tabIndex: !isDisabled ? 0 : undefined
|
|
44
46
|
}, forwardedProps, {
|
|
@@ -1 +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,
|
|
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 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;;;;"}
|
|
@@ -2,10 +2,12 @@ import { _ as _taggedTemplateLiteral, c as _objectSpread2, a as _objectWithoutPr
|
|
|
2
2
|
import React, { forwardRef, useRef, useContext, useState, useReducer, useCallback, useMemo, useEffect } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { mdiChevronDown, mdiChevronRight } from '@redsift/icons';
|
|
5
|
+
import { C as ColorPalette } from './types.js';
|
|
5
6
|
import styled, { css } from 'styled-components';
|
|
6
7
|
import { a as SideNavigationMenuBarContext, S as SideNavigationMenuItem, b as SideNavigationMenuContext } from './SideNavigationMenuItem.js';
|
|
7
8
|
import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
|
|
8
9
|
import { a as Icon } from './Icon2.js';
|
|
10
|
+
import { a as Badge } from './Badge2.js';
|
|
9
11
|
|
|
10
12
|
/**
|
|
11
13
|
* Context props.
|
|
@@ -27,7 +29,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
27
29
|
/**
|
|
28
30
|
* Component style.
|
|
29
31
|
*/
|
|
30
|
-
const StyledSideNavigationMenu = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > button {\n background-color: var(--redsift-color-component-side-navigation-background);\n border: none;\n ", "\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ", "\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ", "\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ", "\n }\n"])), _ref => {
|
|
32
|
+
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 => {
|
|
31
33
|
let {
|
|
32
34
|
$isDisabled
|
|
33
35
|
} = _ref;
|
|
@@ -72,7 +74,7 @@ const SideNavigationMenuReducer = (state, action) => {
|
|
|
72
74
|
}
|
|
73
75
|
};
|
|
74
76
|
|
|
75
|
-
const _excluded = ["aria-label", "buttonProps", "buttonRef", "children", "className", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "withoutIcons"];
|
|
77
|
+
const _excluded = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
|
|
76
78
|
const COMPONENT_NAME = 'RedSiftSideNavigationMenu';
|
|
77
79
|
const CLASSNAME = 'redsift-side-navigation-menu';
|
|
78
80
|
const DEFAULT_PROPS = {};
|
|
@@ -89,6 +91,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
89
91
|
buttonRef = useRef(),
|
|
90
92
|
children,
|
|
91
93
|
className,
|
|
94
|
+
hasBadge,
|
|
92
95
|
icon,
|
|
93
96
|
iconProps,
|
|
94
97
|
iconRef = useRef(),
|
|
@@ -96,6 +99,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
96
99
|
isExpanded: propsIsExpanded,
|
|
97
100
|
menuProps = {},
|
|
98
101
|
menuRef = useRef(),
|
|
102
|
+
tabIndex,
|
|
99
103
|
withoutIcons
|
|
100
104
|
} = props,
|
|
101
105
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
@@ -377,14 +381,16 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
377
381
|
"aria-haspopup": "true",
|
|
378
382
|
ref: buttonRef,
|
|
379
383
|
role: "menuitem",
|
|
380
|
-
tabIndex: isFirstChild ? 0 : -1,
|
|
384
|
+
tabIndex: tabIndex !== undefined ? tabIndex : isFirstChild ? 0 : -1,
|
|
381
385
|
type: "button"
|
|
382
386
|
}, buttonEventHandler), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
|
|
383
387
|
color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
|
|
384
388
|
}, iconProps, {
|
|
385
389
|
icon: icon,
|
|
386
390
|
ref: iconRef
|
|
387
|
-
})) : null, /*#__PURE__*/React.createElement("span", null, ariaLabel), isExpanded ? /*#__PURE__*/React.createElement(
|
|
391
|
+
})) : null, /*#__PURE__*/React.createElement("span", null, ariaLabel), hasBadge && !isExpanded ? /*#__PURE__*/React.createElement(Badge, {
|
|
392
|
+
color: ColorPalette.error
|
|
393
|
+
}) : null, isExpanded ? /*#__PURE__*/React.createElement(Icon, {
|
|
388
394
|
icon: mdiChevronDown,
|
|
389
395
|
className: "".concat(SideNavigationMenu.className, "__expand-icon")
|
|
390
396
|
}) : /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigationMenu.js","sources":["../../../src/components/side-navigation-menu/types.ts","../../../src/components/side-navigation-menu/styles.ts","../../../src/components/side-navigation-menu/reducer.ts","../../../src/components/side-navigation-menu/SideNavigationMenu.tsx"],"sourcesContent":["import { ComponentProps, MutableRefObject } from 'react';\nimport { IconProps } from '~/components/icon';\n\n/**\n * Context props.\n */\n export type SideNavigationMenuContextProps = {\n menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n};\n\n/**\n * Reducer props.\n */\nexport type SideNavigationMenuReducerState = {\n isExpanded: boolean;\n currentIndex: number;\n previousIndex: number;\n};\n\nexport enum SideNavigationMenuReducerActionType {\n Expand = \"expand\",\n Collapse = \"collapse\",\n Move = \"move\"\n}\n\nexport type SideNavigationMenuReducerAction = {\n type: SideNavigationMenuReducerActionType;\n index?: number;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuProps extends ComponentProps<'div'> {\n /** Custom props to pass to the button. */\n buttonProps?: ComponentProps<'button'>;\n /** Custom ref to pass to the button. */\n buttonRef?: MutableRefObject<HTMLButtonElement>;\n /**\n * Icon path data (`d` property of the `path` SVG element).<br />\n * See <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />\n * Recommended path data come from mdi/js.<br />\n * See <a href=\"https://www.npmjs.com/package/@mdi/js\">https://www.npmjs.com/package/@mdi/js</a>.\n */\n icon?: string;\n /** Custom props to pass to the Icon component. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Custom ref to pass to the Icon component. */\n iconRef?: MutableRefObject<HTMLElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the menu is expanded or not. */\n isExpanded?: boolean;\n /** Custom props to pass to the menu. */\n menuProps?: ComponentProps<'ul'>;\n /** Custom ref to pass to the menu. */\n menuRef?: MutableRefObject<HTMLUListElement>;\n /** Whether the component should hide icons or not. */\n withoutIcons?: boolean;\n}\n\nexport type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded' | 'withoutIcons'> & {\n $isDisabled: SideNavigationMenuProps['isDisabled'];\n $isExpanded: SideNavigationMenuProps['isExpanded'];\n $withoutIcons: SideNavigationMenuProps['withoutIcons'];\n};\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenu = styled.div<StyledSideNavigationMenuProps>`\n > button {\n background-color: var(--redsift-color-component-side-navigation-background);\n border: none;\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 8px 16px;\n text-decoration: none;\n width: 100%;\n }\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n\n > button:hover,\n > button:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n cursor: pointer;\n\n .redsift-side-navigation-menu__expand-icon {\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n }\n ` : ''}\n }\n\n .redsift-side-navigation-menu__expand-icon {\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n width: 20px;\n height: 20px;\n font-size: 20px;\n line-height: 20px;\n margin-left: auto;\n }\n\n [dir=\"rtl\"] & {\n .redsift-side-navigation-menu__expand-icon {\n margin-left: unset;\n margin-right: auto;\n }\n }\n\n /**\n * Display children or not\n */\n\n > ul {\n ${({ $isExpanded }) => $isExpanded ? css`\n display: block;\n `: css`\n display: none;\n `}\n }\n`\n","import { SideNavigationMenuReducerState, SideNavigationMenuReducerAction, SideNavigationMenuReducerActionType } from './types';\n\nexport const SideNavigationMenuReducer = \n (state: SideNavigationMenuReducerState, action: SideNavigationMenuReducerAction): SideNavigationMenuReducerState => {\n switch (action.type) {\n case SideNavigationMenuReducerActionType.Expand:\n return { ...state, isExpanded: true };\n case SideNavigationMenuReducerActionType.Collapse:\n return {\n isExpanded: false,\n currentIndex: null!,\n previousIndex: null!\n };\n case SideNavigationMenuReducerActionType.Move:\n return {\n ...state,\n isExpanded: true,\n currentIndex: action.index!,\n previousIndex: state.currentIndex\n };\n }\n }","import React, {\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronDown, mdiChevronRight } from '@redsift/icons';\nimport { Comp } from '~/types';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { Icon } from '~/components/icon';\nimport { StyledSideNavigationMenu } from './styles';\nimport { SideNavigationMenuContextProps, SideNavigationMenuProps, SideNavigationMenuReducerActionType } from './types';\nimport { SideNavigationMenuContext } from './context';\nimport { SideNavigationMenuReducer } from './reducer';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenu';\nconst CLASSNAME = 'redsift-side-navigation-menu';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuProps> = {};\n\n/**\n * The SideNavigationMenu component.\n */\nexport const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement> = forwardRef((props, ref) => {\n const divRef = (ref || useRef<HTMLDivElement>()) as MutableRefObject<HTMLDivElement>;\n\n const {\n 'aria-label': ariaLabel,\n buttonProps = {},\n buttonRef = useRef<HTMLButtonElement>() as MutableRefObject<HTMLButtonElement>,\n children,\n className,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isDisabled,\n isExpanded: propsIsExpanded,\n menuProps = {},\n menuRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems: menubarItems } = sideNavigationMenuBarContext || {};\n\n /**\n * Create an array containing only valid children which can only be SideNavigationMenuItem.\n * This prevent the navigation menubar to have more than two levels.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, child => {\n if (React.isValidElement(child) && (child.type as Comp<SideNavigationMenuItemProps>).displayName === SideNavigationMenuItem.displayName) {\n childArray.push(child);\n }\n });\n const renderedMenuItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n icon: undefined, // Second-level item should not have icon\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n isSecondLevel: true,\n key: child.key ?? index,\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [state, dispatch] = useReducer(\n SideNavigationMenuReducer,\n {\n currentIndex: null!,\n isExpanded: Boolean(propsIsExpanded),\n previousIndex: null!\n }\n );\n const { isExpanded, currentIndex, previousIndex } = state;\n\n const first = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: 0 }),\n []\n );\n\n const last = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: menuItems.size - 1 }),\n [menuItems.size]\n );\n\n const move = useCallback(\n (index: number) => dispatch({ type: SideNavigationMenuReducerActionType.Move, index }),\n []\n );\n\n const open = useCallback(\n () => dispatch({ type: SideNavigationMenuReducerActionType.Expand }),\n []\n );\n\n const close = useCallback(\n (focusButton?: boolean) => {\n if (isExpanded) {\n if (focusButton) {\n buttonRef.current.focus();\n }\n\n dispatch({ type: SideNavigationMenuReducerActionType.Collapse });\n }\n },\n [isExpanded]\n );\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n move(index);\n };\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n move(index);\n };\n\n const match = (e: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return e.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n move(index);\n };\n\n const value = useMemo<SideNavigationMenuContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n const items = Array.from(menuItems);\n\n if (currentIndex !== previousIndex) {\n const currentNode = items[currentIndex] as HTMLElement;\n currentNode?.focus();\n }\n }, [menuItems, currentIndex, previousIndex]);\n\n useEffect(() => {\n if (!sideNavigationMenuBarContext) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (buttonRef as MutableRefObject<HTMLButtonElement>).current;\n\n if (menuItemNode) {\n menubarItems.add(menuItemNode);\n }\n\n return () => {\n menubarItems.delete(menuItemNode);\n };\n }, [menubarItems]);\n\n const keyDownOnButton = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'Enter':\n case 'Space':\n e.stopPropagation();\n currentNode.click();\n first();\n break;\n case 'ArrowRight':\n e.stopPropagation();\n first();\n break;\n case 'ArrowLeft':\n last();\n break;\n default:\n break;\n }\n };\n\n const buttonEventHandler = {\n onClick: (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n \n buttonProps.onClick?.(event);\n event.stopPropagation();\n if (isExpanded) {\n close();\n } else {\n open();\n }\n },\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n buttonProps.onKeyDown?.(event);\n keyDownOnButton(event);\n },\n };\n\n const keyDownOnMenuItemList = (e: KeyboardEvent<HTMLUListElement>) => {\n const currentNode = e.target as HTMLUListElement;\n\n switch (e.code) {\n case 'ArrowUp':\n e.stopPropagation();\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.stopPropagation();\n e.preventDefault();\n next();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n close(true);\n break;\n case 'ArrowRight':\n e.preventDefault();\n close(!sideNavigationMenuBarContext);\n break;\n case 'Home':\n e.stopPropagation();\n e.preventDefault();\n first();\n break;\n case 'End':\n e.stopPropagation();\n e.preventDefault();\n last();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n case 'Escape':\n e.stopPropagation();\n e.preventDefault();\n close(true);\n break;\n default:\n e.stopPropagation();\n match(e);\n break;\n }\n };\n\n const menuItemListEventHandler = {\n onKeyDown: (event: KeyboardEvent<HTMLUListElement>) => {\n menuProps.onKeyDown?.(event);\n keyDownOnMenuItemList(event);\n },\n onClick: (event: MouseEvent<HTMLUListElement>) => {\n if (isDisabled) {\n return;\n }\n menuProps.onClick?.(event);\n }\n };\n\n return (\n <StyledSideNavigationMenu\n {...forwardedProps}\n $isDisabled={isDisabled}\n $isExpanded={isExpanded}\n $withoutIcons={withoutIcons}\n className={classNames(SideNavigationMenu.className, className)}\n ref={divRef as MutableRefObject<HTMLDivElement>}\n tabIndex={undefined}\n >\n <SideNavigationMenuContext.Provider value={value}>\n <button\n {...buttonProps}\n aria-disabled={isDisabled}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-haspopup=\"true\"\n ref={buttonRef as MutableRefObject<HTMLButtonElement>}\n role=\"menuitem\"\n tabIndex={isFirstChild ? 0 : -1}\n type=\"button\"\n {...buttonEventHandler}\n >\n {icon ? \n <Icon\n color=\"var(--redsift-color-component-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n /> : null}\n <span>{ariaLabel}</span>\n {isExpanded ?\n <Icon icon={mdiChevronDown} className={`${SideNavigationMenu.className}__expand-icon`} /> :\n <Icon icon={mdiChevronRight} className={`${SideNavigationMenu.className}__expand-icon`} />\n }\n </button>\n <ul\n {...menuProps}\n aria-label={ariaLabel}\n aria-orientation=\"vertical\"\n hidden={!isExpanded}\n ref={menuRef as MutableRefObject<HTMLUListElement>}\n role=\"menu\"\n {...menuItemListEventHandler}\n >\n {renderedMenuItems}\n </ul>\n </SideNavigationMenuContext.Provider>\n </StyledSideNavigationMenu>\n );\n});\nSideNavigationMenu.className = CLASSNAME;\nSideNavigationMenu.defaultProps = DEFAULT_PROPS;\nSideNavigationMenu.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuReducerActionType","StyledSideNavigationMenu","styled","div","$isDisabled","css","$isExpanded","SideNavigationMenuReducer","state","action","type","Expand","_objectSpread","isExpanded","Collapse","currentIndex","previousIndex","Move","index","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenu","forwardRef","props","ref","divRef","useRef","ariaLabel","buttonProps","buttonRef","children","className","icon","iconProps","iconRef","isDisabled","propsIsExpanded","menuProps","menuRef","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","sideNavigationMenuBarContext","useContext","SideNavigationMenuBarContext","isFirstChild","setIsFirstChild","useState","menuItems","menubarItems","childArray","React","Children","forEach","child","isValidElement","displayName","SideNavigationMenuItem","push","renderedMenuItems","map","key","cloneElement","undefined","isSecondLevel","Set","current","dispatch","useReducer","Boolean","first","useCallback","last","size","move","open","close","focusButton","focus","previous","next","match","e","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","includes","findIndex","item","value","useMemo","useEffect","menuItemNode","add","delete","keyDownOnButton","target","code","stopPropagation","click","buttonEventHandler","onClick","event","onKeyDown","keyDownOnMenuItemList","preventDefault","menuItemListEventHandler","classNames","mdiChevronDown","mdiChevronRight","defaultProps"],"mappings":"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"}
|
|
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 /** 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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"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { _ as _taggedTemplateLiteral, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useRef, useContext, useEffect, useState } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import { C as ColorPalette } from './types.js';
|
|
4
5
|
import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
|
|
5
6
|
import { A as AppContainerContext } from './context.js';
|
|
6
7
|
import styled, { css } from 'styled-components';
|
|
8
|
+
import { a as Badge, B as BadgeVariant } from './Badge2.js';
|
|
7
9
|
import { a as Icon } from './Icon2.js';
|
|
8
10
|
|
|
9
11
|
const SideNavigationMenuBarContext = /*#__PURE__*/React.createContext(null);
|
|
@@ -30,7 +32,7 @@ const StyledSideNavigationMenuItem = styled.a(_templateObject || (_templateObjec
|
|
|
30
32
|
$isSecondLevel,
|
|
31
33
|
$withoutIcons
|
|
32
34
|
} = _ref3;
|
|
33
|
-
return !$isSecondLevel ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n "]))) : "\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ".concat(!$withoutIcons ? '50px' : '16px', ";\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n ");
|
|
35
|
+
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 ");
|
|
34
36
|
}, _ref4 => {
|
|
35
37
|
let {
|
|
36
38
|
$isCurrent,
|
|
@@ -39,7 +41,7 @@ const StyledSideNavigationMenuItem = styled.a(_templateObject || (_templateObjec
|
|
|
39
41
|
return $isCurrent && !$isDisabled ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-component-side-navigation-menu-item-active);\n "]))) : '';
|
|
40
42
|
});
|
|
41
43
|
|
|
42
|
-
const _excluded = ["children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "withoutIcons"];
|
|
44
|
+
const _excluded = ["badgeNumber", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
|
|
43
45
|
const COMPONENT_NAME = 'RedSiftSideNavigationMenuItem';
|
|
44
46
|
const CLASSNAME = 'redsift-side-navigation-menu-item';
|
|
45
47
|
const DEFAULT_PROPS = {};
|
|
@@ -51,6 +53,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
51
53
|
const menuItemRef = ref || useRef();
|
|
52
54
|
|
|
53
55
|
const {
|
|
56
|
+
badgeNumber,
|
|
54
57
|
children,
|
|
55
58
|
className,
|
|
56
59
|
href,
|
|
@@ -62,6 +65,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
62
65
|
isSecondLevel,
|
|
63
66
|
onClick,
|
|
64
67
|
onKeyDown,
|
|
68
|
+
tabIndex,
|
|
65
69
|
withoutIcons
|
|
66
70
|
} = props,
|
|
67
71
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
@@ -119,13 +123,16 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
119
123
|
onClick: isDisabled ? undefined : onClick,
|
|
120
124
|
onKeyDown: isDisabled ? undefined : onKeyDown,
|
|
121
125
|
ref: menuItemRef,
|
|
122
|
-
tabIndex: !sideNavigationMenuContext && isFirstChild ? 0 : -1
|
|
126
|
+
tabIndex: tabIndex !== undefined ? tabIndex : !sideNavigationMenuContext && isFirstChild ? 0 : -1
|
|
123
127
|
}), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
|
|
124
128
|
color: "var(--redsift-color-component-side-navigation-menu-item-text-resting)"
|
|
125
129
|
}, iconProps, {
|
|
126
130
|
icon: icon,
|
|
127
131
|
ref: iconRef
|
|
128
|
-
})) : null, /*#__PURE__*/React.createElement("span", null, children)
|
|
132
|
+
})) : null, /*#__PURE__*/React.createElement("span", null, children), badgeNumber ? /*#__PURE__*/React.createElement(Badge, {
|
|
133
|
+
variant: BadgeVariant.standard,
|
|
134
|
+
color: ColorPalette.error
|
|
135
|
+
}, badgeNumber) : null);
|
|
129
136
|
});
|
|
130
137
|
SideNavigationMenuItem.className = CLASSNAME;
|
|
131
138
|
SideNavigationMenuItem.defaultProps = DEFAULT_PROPS;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavigationMenuItem.js","sources":["../../../src/components/side-navigation-menu-bar/context.ts","../../../src/components/side-navigation-menu/context.ts","../../../src/components/side-navigation-menu-item/styles.ts","../../../src/components/side-navigation-menu-item/SideNavigationMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext = React.createContext<SideNavigationMenuBarContextProps>(null!);\n","import React from 'react';\nimport { SideNavigationMenuContextProps } from './types';\n\nexport const SideNavigationMenuContext = React.createContext<SideNavigationMenuContextProps>(null!);\n","import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuItem = styled.a<StyledSideNavigationMenuItemProps>`\n /**\n * Common style\n */\n ${({ $isDisabled }) => !$isDisabled ? css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-resting);\n ` : css`\n color: var(--redsift-color-component-side-navigation-menu-item-text-disabled);\n `}\n align-items: center;\n display: flex;\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n text-decoration: none;\n\n &:hover,\n &:focus-visible {\n outline: none;\n\n ${({ $isDisabled }) => !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-hover);\n color: var(--redsift-color-component-side-navigation-menu-item-text-hover);\n ` : ''}\n }\n\n ${({ $isSecondLevel, $withoutIcons }) => !$isSecondLevel ? css`\n /**\n * First-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-background);\n padding: 8px 16px;\n\n i:first-child {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n padding-right: 16px;\n width: 20px;\n }\n\n [dir=\"rtl\"] & {\n padding-right: unset;\n\n i:first-child {\n padding-left: 16px;\n padding-right: unset;\n }\n }\n `: `\n /**\n * Second-level items\n */\n\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-secondary);\n padding-bottom: 8px;\n padding-left: ${!$withoutIcons ? '50px' : '16px'};\n padding-top: 8px;\n\n [dir=\"rtl\"] & {\n padding-left: unset;\n padding-right: 16px;\n }\n `}\n\n ${({ $isCurrent, $isDisabled }) => $isCurrent && !$isDisabled ? css`\n background-color: var(--redsift-color-component-side-navigation-menu-item-background-active);\n box-shadow: inset -4px 0px 0px var(--redsift-color-component-side-navigation-menu-item-active);\n ` : ''}\n`\n","import React, {\n forwardRef,\n MutableRefObject,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { Icon } from '~/components/icon';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { SideNavigationMenuBarContext } from '~/components/side-navigation-menu-bar/context';\nimport { SideNavigationMenuContext } from '~/components/side-navigation-menu/context';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledSideNavigationMenuItem } from './styles';\nimport { SideNavigationMenuItemProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuItem';\nconst CLASSNAME = 'redsift-side-navigation-menu-item';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuItemProps> = {};\n\n/**\n * The SideNavigationMenuItem component.\n */\nexport const SideNavigationMenuItem: Comp<\n SideNavigationMenuItemProps,\n HTMLAnchorElement\n> = forwardRef((props, ref) => {\n const menuItemRef = ref || useRef<HTMLAnchorElement>();\n\n const {\n children,\n className,\n href,\n icon,\n iconProps,\n iconRef = useRef<HTMLElement>(),\n isCurrent,\n isDisabled,\n isSecondLevel,\n onClick,\n onKeyDown,\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children]);\n\n const appContainerState = useContext(AppContainerContext);\n useEffect(() => {\n if (appContainerState && isCurrent && typeof children === 'string') {\n appContainerState.setTitle(children);\n }\n\n return () => {\n if (appContainerState) {\n appContainerState.setTitle(undefined);\n }\n }\n }, [isCurrent]);\n\n const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n const sideNavigationMenuContext = useContext(SideNavigationMenuContext);\n const [isFirstChild, setIsFirstChild] = useState(false);\n const { menuItems } =\n sideNavigationMenuContext || sideNavigationMenuBarContext || {};\n\n useEffect(() => {\n if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {\n setIsFirstChild(true);\n return;\n }\n\n const menuItemNode = (menuItemRef as MutableRefObject<HTMLAnchorElement>)\n .current;\n\n if (menuItemNode) {\n if (!menuItems.size) {\n setIsFirstChild(true);\n }\n\n menuItems.add(menuItemNode);\n }\n\n return () => {\n menuItems.delete(menuItemNode);\n };\n }, [menuItems]);\n\n return (\n <StyledSideNavigationMenuItem\n role=\"menuitem\"\n {...forwardedProps}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $isSecondLevel={isSecondLevel}\n $withoutIcons={withoutIcons}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled}\n className={classNames(SideNavigationMenuItem.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={isDisabled ? undefined : onClick}\n onKeyDown={isDisabled ? undefined : onKeyDown}\n ref={menuItemRef as MutableRefObject<HTMLAnchorElement>}\n tabIndex={!sideNavigationMenuContext && isFirstChild ? 0 : -1}\n >\n {icon ? (\n <Icon\n color=\"var(--redsift-color-component-side-navigation-menu-item-text-resting)\"\n {...iconProps}\n icon={icon}\n ref={iconRef as MutableRefObject<HTMLElement>}\n />\n ) : null}\n <span>{children}</span>\n </StyledSideNavigationMenuItem>\n );\n});\nSideNavigationMenuItem.className = CLASSNAME;\nSideNavigationMenuItem.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuItem.displayName = COMPONENT_NAME;\n"],"names":["SideNavigationMenuBarContext","React","createContext","SideNavigationMenuContext","StyledSideNavigationMenuItem","styled","a","$isDisabled","css","$isSecondLevel","$withoutIcons","$isCurrent","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","SideNavigationMenuItem","forwardRef","props","ref","menuItemRef","useRef","children","className","href","icon","iconProps","iconRef","isCurrent","isDisabled","isSecondLevel","onClick","onKeyDown","withoutIcons","forwardedProps","warnIfNoAccessibleLabelFound","appContainerState","useContext","AppContainerContext","useEffect","setTitle","undefined","sideNavigationMenuBarContext","sideNavigationMenuContext","isFirstChild","setIsFirstChild","useState","menuItems","menuItemNode","current","size","add","delete","classNames","defaultProps","displayName"],"mappings":"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"}
|
|
1
|
+
{"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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-side-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-side-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
|
@@ -5,9 +5,10 @@ import 'classnames';
|
|
|
5
5
|
import './warnIfNoAccessibleLabelFound.js';
|
|
6
6
|
import 'styled-components';
|
|
7
7
|
import './SideNavigationMenuItem.js';
|
|
8
|
+
import './types.js';
|
|
8
9
|
import './context.js';
|
|
10
|
+
import './Badge2.js';
|
|
9
11
|
import './Icon2.js';
|
|
10
|
-
import './types.js';
|
|
11
12
|
import './SideNavigationMenu.js';
|
|
12
13
|
import '@redsift/icons';
|
|
13
14
|
//# sourceMappingURL=side-navigation-menu-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation-menu-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation-menu-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -2,9 +2,10 @@ export { S as SideNavigationMenuItem } from './SideNavigationMenuItem.js';
|
|
|
2
2
|
import './_rollupPluginBabelHelpers.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'classnames';
|
|
5
|
+
import './types.js';
|
|
5
6
|
import './warnIfNoAccessibleLabelFound.js';
|
|
6
7
|
import './context.js';
|
|
7
8
|
import 'styled-components';
|
|
9
|
+
import './Badge2.js';
|
|
8
10
|
import './Icon2.js';
|
|
9
|
-
import './types.js';
|
|
10
11
|
//# sourceMappingURL=side-navigation-menu-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation-menu-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation-menu-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -3,10 +3,11 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'classnames';
|
|
5
5
|
import '@redsift/icons';
|
|
6
|
+
import './types.js';
|
|
6
7
|
import 'styled-components';
|
|
7
8
|
import './SideNavigationMenuItem.js';
|
|
8
9
|
import './warnIfNoAccessibleLabelFound.js';
|
|
9
10
|
import './context.js';
|
|
11
|
+
import './Badge2.js';
|
|
10
12
|
import './Icon2.js';
|
|
11
|
-
import './types.js';
|
|
12
13
|
//# sourceMappingURL=side-navigation-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation-menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation-menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -92,7 +92,8 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
92
92
|
key: (_child$key2 = child.key) !== null && _child$key2 !== void 0 ? _child$key2 : index,
|
|
93
93
|
// First-level children should have icon, even empty one (except when withoutIcons is set to true)
|
|
94
94
|
icon: withoutIcons ? undefined : child.props.icon || 'M 0,0',
|
|
95
|
-
withoutIcons
|
|
95
|
+
withoutIcons,
|
|
96
|
+
tabIndex: index === 0 ? 0 : -1
|
|
96
97
|
}));
|
|
97
98
|
});
|
|
98
99
|
const menuItems = useRef(new Set()).current;
|
|
@@ -271,7 +272,8 @@ const useSideNavigationMenuBar = _ref => {
|
|
|
271
272
|
menuBarChildren.push( /*#__PURE__*/React.createElement(SideNavigationMenu, _extends({
|
|
272
273
|
key: title,
|
|
273
274
|
"aria-label": title,
|
|
274
|
-
isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined
|
|
275
|
+
isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined,
|
|
276
|
+
hasBadge: children.filter(child => child.badgeNumber).length > 0
|
|
275
277
|
}, rest, {
|
|
276
278
|
ref: ref
|
|
277
279
|
}), children.map(child => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-component-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-component-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-component-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-component-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [currentIndex, setCurrentIndex] = useState(0);\n const previousIndex = usePrevious(currentIndex);\n\n const first = () => setCurrentIndex(0);\n\n const last = () => setCurrentIndex(menuItems.size - 1);\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n setCurrentIndex(index);\n };\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n setCurrentIndex(index);\n };\n\n const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return event.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n setCurrentIndex(index);\n };\n\n const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n menubarProps.onKeyDown?.(e);\n e.stopPropagation();\n\n const currentNode = e.target as HTMLUListElement;\n // istanbul ignore next\n const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.preventDefault();\n next();\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (isFromSubmenu) {\n next();\n }\n break;\n case 'End':\n e.preventDefault();\n last();\n break;\n case 'Home':\n e.preventDefault();\n first();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n default:\n match(e);\n break;\n }\n };\n\n const value = useMemo<SideNavigationMenuBarContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n if (currentIndex !== previousIndex) {\n const items = Array.from(menuItems);\n const currentNode = items[currentIndex] as HTMLElement;\n const previousNode = items[previousIndex] as HTMLElement;\n\n // istanbul ignore next\n previousNode?.setAttribute('tabindex', '-1');\n currentNode?.setAttribute('tabindex', '0');\n currentNode?.focus();\n }\n }, [currentIndex, previousIndex, menuItems]);\n\n return (\n <StyledSideNavigationMenuBar\n {...forwardedProps}\n $isDisabled={isDisabled}\n $marginTop={top}\n $withoutIcons={withoutIcons}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={classNames(SideNavigationMenuBar.className, className)}\n ref={navRef as MutableRefObject<HTMLElement>}\n >\n <SideNavigationMenuBarContext.Provider value={value}>\n <ul\n {...menubarProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-orientation=\"vertical\"\n onKeyDown={keyDown}\n ref={menubarRef as MutableRefObject<HTMLUListElement>}\n role=\"menubar\"\n >\n {navItems}\n </ul>\n </SideNavigationMenuBarContext.Provider>\n </StyledSideNavigationMenuBar>\n );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n","import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem } from '~/components/side-navigation-menu-item';\nimport { MenuBarItems, MenuItem, Menu, SideNavigationMenuBarProps } from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n return (item as Menu).children !== undefined;\n}\n\nexport interface UseSideNavigationMenuBarProps {\n items: MenuBarItems;\n isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = (\n {\n items,\n isActive,\n }: UseSideNavigationMenuBarProps\n): Omit<SideNavigationMenuBarProps, 'ref'> => {\n const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n items.map((item) => {\n if (!isMenu(item)) {\n const { title, href, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenuItem\n key={title}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n href={href}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n } else {\n const { title, children, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenu\n key={title}\n aria-label={title}\n isExpanded={isActive ? children.filter(child => isActive(child.href!)).length > 0 : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n {children.map((child) => {\n const { title, href, ref, ...rest } = child;\n return (\n <SideNavigationMenuItem\n key={title}\n href={href}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n })}\n </SideNavigationMenu>\n );\n }\n })\n\n return {\n children: menuBarChildren,\n };\n}"],"names":["StyledSideNavigationMenuBar","styled","nav","$marginTop","css","useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","usePrevious","value","useRef","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","children","className","isDisabled","menubarProps","menubarRef","withoutIcons","forwardedProps","_excluded","warnIfNoAccessibleLabelFound","top","childArray","React","Children","forEach","child","isValidElement","SideNavigationMenu","displayName","SideNavigationMenuItem","includes","type","push","navItems","map","index","key","cloneElement","undefined","icon","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","findIndex","item","keyDown","e","onKeyDown","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","previousNode","setAttribute","focus","classNames","defaultProps","isMenu","useSideNavigationMenuBar","isActive","menuBarChildren","title","href","rest"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-component-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-component-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-component-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-component-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n 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
CHANGED
|
@@ -27,15 +27,16 @@
|
|
|
27
27
|
"prepare": "install-peers || exit 0",
|
|
28
28
|
"prepublishOnly": "yarn build",
|
|
29
29
|
"test": "NODE_ENV=test jest --verbose",
|
|
30
|
-
"build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
|
|
30
|
+
"build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json",
|
|
31
|
+
"version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
|
|
31
32
|
},
|
|
32
33
|
"types": "types.d.ts",
|
|
33
|
-
"version": "6.0.0-alpha.
|
|
34
|
+
"version": "6.0.0-alpha.12",
|
|
34
35
|
"dependencies": {
|
|
35
36
|
"@react-aria/button": "^3.5.0",
|
|
36
37
|
"@react-aria/focus": "^3.6.1",
|
|
37
38
|
"@react-types/button": "^3.5.0",
|
|
38
|
-
"@redsift/icons": "^6.0.0-alpha.
|
|
39
|
+
"@redsift/icons": "^6.0.0-alpha.12",
|
|
39
40
|
"classnames": "^2.3.1"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
@@ -72,6 +73,7 @@
|
|
|
72
73
|
"@typescript-eslint/parser": "^5.26.0",
|
|
73
74
|
"autoprefixer": "^9.7.4",
|
|
74
75
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
76
|
+
"changelog-verify": "^1.1.2",
|
|
75
77
|
"dts-bundle-generator": "^6.9.0",
|
|
76
78
|
"eslint": "^7.32.0",
|
|
77
79
|
"eslint-plugin-import": "^2.26.0",
|
|
@@ -106,6 +108,7 @@
|
|
|
106
108
|
"tsconfig-paths-webpack-plugin": "^3.5.2",
|
|
107
109
|
"typescript": "^4.6.4",
|
|
108
110
|
"typescript-strict-plugin": "^2.0.0",
|
|
111
|
+
"version-changelog": "^3.1.1",
|
|
109
112
|
"webpack": "^5.72.1",
|
|
110
113
|
"yargs": "^17.5.0",
|
|
111
114
|
"yarn": "^1.22.18"
|
|
@@ -115,5 +118,5 @@
|
|
|
115
118
|
"react-dom": "17 || 18",
|
|
116
119
|
"styled-components": "^5.3.3"
|
|
117
120
|
},
|
|
118
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "9a12739bdfd15f922fc719990eaa8a5daaec8485"
|
|
119
122
|
}
|
package/style/redsift.css
CHANGED
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
225
225
|
}/**
|
|
226
226
|
* Do not edit directly
|
|
227
|
-
* Generated on
|
|
227
|
+
* Generated on Wed, 28 Sep 2022 15:20:09 GMT
|
|
228
228
|
*/
|
|
229
229
|
|
|
230
230
|
:root {
|
|
@@ -248,9 +248,9 @@
|
|
|
248
248
|
--redsift-color-text-light-secondary: rgba(255, 255, 255, 0.9);
|
|
249
249
|
--redsift-color-link-primary: #02ac61;
|
|
250
250
|
--redsift-color-link-underline: rgba(2, 172, 97, 0.4);
|
|
251
|
-
--redsift-color-error-main: #
|
|
252
|
-
--redsift-color-error-dark: #
|
|
253
|
-
--redsift-color-error-light: #
|
|
251
|
+
--redsift-color-error-main: #e11010;
|
|
252
|
+
--redsift-color-error-dark: #b41010;
|
|
253
|
+
--redsift-color-error-light: #fce7e7;
|
|
254
254
|
--redsift-color-error-contrast: #ffffff;
|
|
255
255
|
--redsift-color-error-contained-hover: #e31b0c;
|
|
256
256
|
--redsift-color-error-outlined-hover: #e31b0c;
|
package/types.d.ts
CHANGED
|
@@ -239,6 +239,8 @@ export interface SideNavigationMenuProps extends ComponentProps<"div"> {
|
|
|
239
239
|
buttonProps?: ComponentProps<"button">;
|
|
240
240
|
/** Custom ref to pass to the button. */
|
|
241
241
|
buttonRef?: MutableRefObject<HTMLButtonElement>;
|
|
242
|
+
/** Whether or not the menu contains children that have a badge. */
|
|
243
|
+
hasBadge?: boolean;
|
|
242
244
|
/**
|
|
243
245
|
* Icon path data (`d` property of the `path` SVG element).<br />
|
|
244
246
|
* 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 />
|
|
@@ -276,6 +278,8 @@ export declare const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivEl
|
|
|
276
278
|
export interface SideNavigationMenuItemProps extends ComponentProps<"a"> {
|
|
277
279
|
/** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs Link component). */
|
|
278
280
|
as?: "a" | any;
|
|
281
|
+
/** Number that should be displayed inside a badge next to the menu item text. */
|
|
282
|
+
badgeNumber?: number;
|
|
279
283
|
/** Href is required for this component. */
|
|
280
284
|
href: ComponentProps<"a">["href"];
|
|
281
285
|
/**
|