@redsift/design-system 6.0.0-alpha.3 → 6.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/_internal/AppBar.js +1 -1
- package/esm/_internal/AppBar.js.map +1 -1
- package/esm/_internal/AppSidePanel.js +1 -1
- package/esm/_internal/AppSidePanel.js.map +1 -1
- package/esm/_internal/BreadcrumbItem.js +21 -9
- package/esm/_internal/BreadcrumbItem.js.map +1 -1
- package/esm/_internal/Breadcrumbs2.js +13 -6
- package/esm/_internal/Breadcrumbs2.js.map +1 -1
- package/esm/_internal/breadcrumb-item.js +1 -1
- package/esm/_internal/breadcrumbs.js +1 -1
- package/esm/_internal/types.js +9 -1
- package/esm/_internal/types.js.map +1 -1
- package/esm/_internal/useSideNavigationMenuBar.js +1 -1
- package/esm/_internal/useSideNavigationMenuBar.js.map +1 -1
- package/esm/index.js +1 -1
- package/package.json +2 -2
- package/style/redsift.css +4 -1
- package/types.d.ts +14 -0
package/esm/_internal/AppBar.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
12
12
|
/**
|
|
13
13
|
* Component style.
|
|
14
14
|
*/
|
|
15
|
-
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height:
|
|
15
|
+
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ", "\n \n ", "\n\n & {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n"])), _ref => {
|
|
16
16
|
let {
|
|
17
17
|
$isSidePanelCollapsed
|
|
18
18
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height:
|
|
1
|
+
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n & {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiMenu } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppBar';\nconst CLASSNAME = 'redsift-app-bar';\nconst DEFAULT_PROPS: Partial<AppBarProps> = {};\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n const barRef = ref || useRef<HTMLHeadingElement>();\n\n const {\n children,\n className,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n title: propsTitle,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppBar\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppBar.className, className)}\n ref={barRef as RefObject<HTMLHeadingElement>}\n >\n <div className={`${AppBar.className}__left`}>\n {appContainerState && appContainerState.isSidePanelCollapsed ? (\n <IconButton\n className={`${AppBar.className}-left__expand-button`}\n {...iconButtonProps}\n aria-label=\"Expand left side panel\"\n icon={mdiMenu}\n onPress={appContainerState.expandSidePanel}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null}\n {appContainerState && appContainerState.title ? (\n <h1>{appContainerState.title}</h1>\n ) : propsTitle ? (\n <h1>{propsTitle}</h1>\n ) : null}\n </div>\n <div className={`${AppBar.className}__right`}>\n {children}\n </div>\n </StyledAppBar>\n );\n});\nAppBar.className = CLASSNAME;\nAppBar.defaultProps = DEFAULT_PROPS;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["StyledAppBar","styled","header","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppBar","forwardRef","props","ref","barRef","useRef","children","className","iconButtonProps","iconButtonRef","title","propsTitle","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","mdiMenu","expandSidePanel","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ var _templateObject;
|
|
|
11
11
|
/**
|
|
12
12
|
* Component style.
|
|
13
13
|
*/
|
|
14
|
-
const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
|
|
14
|
+
const StyledAppSidePanel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ", ";\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ", ";\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n"])), _ref => {
|
|
15
15
|
let {
|
|
16
16
|
$isCollapsed
|
|
17
17
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiChevronLeft } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAGC,MAAM,CAACC,GAAV,CAShB,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,6NAAA,EAAA,qFAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"AppSidePanel.js","sources":["../../../src/components/app-side-panel/styles.ts","../../../src/components/app-side-panel/AppSidePanel.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppSidePanelProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppSidePanel = styled.div<StyledAppSidePanelProps>`\n align-items: center;\n background-color: var(--redsift-color-side-navigation-background);\n flex-direction: column;\n height: 100%;\n left: 0px;\n overflow: hidden;\n position: fixed;\n top: 0;\n transform: ${({ $isCollapsed }) => !$isCollapsed ? 'translate(0px)' : 'translate(-240px)'};\n transition: transform .25s ease-out, visibility .25s ease-out;\n visibility: ${({ $isCollapsed }) => !$isCollapsed ? 'visible' : 'hidden'};\n width: 240px;\n z-index: 1;\n\n .redsift-app-side-panel__header {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n gap: 8px;\n justify-content: space-between;\n padding: 16px;\n width: 100%;\n height: 72px;\n }\n\n .redsift-app-side-panel__header > img {\n max-height: 36px;\n max-width: 160px;\n }\n\n .redsift-app-side-panel-header__collapse-button {\n padding: 4px;\n \n i {\n color: var(--redsift-color-side-navigation-menu-item-text-resting);\n }\n }\n\n .redsift-app-side-panel-header__collapse-button:hover,\n .redsift-app-side-panel-header__collapse-button:focus-visible {\n background-color: var(--redsift-color-side-navigation-menu-item-background-hover);\n\n i {\n color: var(--redsift-color-side-navigation-menu-item-text-hover);\n }\n }\n\n .redsift-app-side-panel__featured {\n box-sizing: border-box;\n margin-bottom: 16px;\n padding: 0px 16px;\n width: 100%;\n }\n\n [dir=\"rtl\"] & {\n left: unset;\n right: 0px;\n transform: unset;\n transition: unset;\n\n .redsift-app-side-panel-header__collapse-button {\n margin-left: unset;\n margin-right: auto;\n }\n }\n`","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiChevronLeft } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { StyledAppSidePanel } from './styles';\nimport { AppSidePanelProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppSidePanel';\nconst CLASSNAME = 'redsift-app-side-panel';\nconst DEFAULT_PROPS: Partial<AppSidePanelProps> = {};\n\n/**\n * The AppSidePanel component.\n */\nexport const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const panelRef = (ref || useRef<HTMLDivElement>()) as RefObject<HTMLDivElement>;\n\n const {\n children,\n className,\n featuredElements,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n isCollapsed = false,\n logo,\n onClose,\n ...forwardedProps\n } = props;\n\n const appContainerState = useContext(AppContainerContext);\n\n const handleClose = (event: PressEvent) => {\n onClose?.(event);\n appContainerState?.collapseSidePanel();\n }\n\n return (\n <StyledAppSidePanel\n {...forwardedProps}\n $isCollapsed={!!(isCollapsed || appContainerState?.isSidePanelCollapsed)}\n className={classNames(AppSidePanel.className, className)}\n ref={panelRef as RefObject<HTMLDivElement>}\n >\n {logo || (onClose || appContainerState) ? (\n <div className={`${AppSidePanel.className}__header`}>\n {logo ? (\n React.isValidElement(logo) ? logo : <img src={logo.src} alt={logo.alt} />\n ) : null}\n {(onClose || appContainerState) ? (\n <IconButton\n aria-label=\"Collapse left side panel\"\n {...iconButtonProps}\n className={`${AppSidePanel.className}-header__collapse-button`}\n icon={mdiChevronLeft}\n onPress={handleClose}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null }\n </div>\n ) : null}\n {featuredElements ? (\n <div className={`${AppSidePanel.className}__featured`}>\n {featuredElements}\n </div>\n ) : null}\n {children}\n </StyledAppSidePanel>\n );\n});\nAppSidePanel.className = CLASSNAME;\nAppSidePanel.defaultProps = DEFAULT_PROPS;\nAppSidePanel.displayName = COMPONENT_NAME;\n"],"names":["StyledAppSidePanel","styled","div","$isCollapsed","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppSidePanel","forwardRef","props","ref","panelRef","useRef","children","className","featuredElements","iconButtonProps","iconButtonRef","isCollapsed","logo","onClose","forwardedProps","appContainerState","useContext","AppContainerContext","handleClose","event","collapseSidePanel","isSidePanelCollapsed","classNames","React","isValidElement","src","alt","mdiChevronLeft","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -1,32 +1,42 @@
|
|
|
1
1
|
import { _ as _taggedTemplateLiteral, c as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import { T as Theme } from './types.js';
|
|
4
5
|
import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
|
|
5
6
|
import styled, { css } from 'styled-components';
|
|
6
7
|
import { a as Icon } from './Icon2.js';
|
|
7
8
|
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
9
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Component style.
|
|
12
13
|
*/
|
|
13
|
-
const StyledBreadcrumbItem = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: none;\n border: none;\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: 4px;\n text-decoration: none;\n\n ", "\n \n &:focus-visible {\n outline: 2px solid var(--redsift-color-text-primary);\n }\n \n i {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n margin-right: 4px;\n vertical-align: -1.5px;\n width: 20px;\n\n ", "\n }\n\n"])), _ref => {
|
|
14
|
+
const StyledBreadcrumbItem = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: none;\n border: none;\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: 4px;\n text-decoration: none;\n\n ", "\n \n &:focus-visible {\n outline: 2px solid var(--redsift-color-text-", "primary);\n }\n \n i {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n margin-right: 4px;\n vertical-align: -1.5px;\n width: 20px;\n\n ", "\n }\n\n"])), _ref => {
|
|
14
15
|
let {
|
|
15
16
|
$isDisabled,
|
|
16
|
-
$isCurrent
|
|
17
|
+
$isCurrent,
|
|
18
|
+
$theme
|
|
17
19
|
} = _ref;
|
|
18
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n
|
|
20
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n "])), $theme === Theme.dark ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), $isDisabled ? "\n color: var(--redsift-color-text-disabled);\n " : $isCurrent ? "\n color: var(--redsift-color-text-primary);\n " : "\n color: var(--redsift-color-text-secondary);\n ", !$isDisabled && !$isCurrent && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &:hover,\n &:focus-visible {\n cursor: pointer;\n color: var(--redsift-color-text-primary);\n }\n "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), $isDisabled ? "\n color: var(--redsift-color-text-light-disabled);\n " : $isCurrent ? "\n color: var(--redsift-color-text-light-secondary);\n " : "\n color: var(--redsift-color-text-light-primary);\n ", !$isDisabled && !$isCurrent && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n &:hover,\n &:focus-visible {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n "])))));
|
|
19
21
|
}, _ref2 => {
|
|
20
22
|
let {
|
|
21
|
-
$
|
|
23
|
+
$theme
|
|
22
24
|
} = _ref2;
|
|
23
|
-
return $
|
|
25
|
+
return $theme === Theme.light ? 'light' : '';
|
|
26
|
+
}, _ref3 => {
|
|
27
|
+
let {
|
|
28
|
+
$isDisabled,
|
|
29
|
+
$theme
|
|
30
|
+
} = _ref3;
|
|
31
|
+
return $isDisabled ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-disabled);\n "]))) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-", ");\n "])), $theme === Theme.dark ? 'secondary' : 'light-primary');
|
|
24
32
|
});
|
|
25
33
|
|
|
26
|
-
const _excluded = ["children", "className", "href", "icon", "isCurrent", "isDisabled"];
|
|
34
|
+
const _excluded = ["children", "className", "href", "icon", "isCurrent", "isDisabled", "theme"];
|
|
27
35
|
const COMPONENT_NAME = 'RedSiftBreadcrumbItem';
|
|
28
36
|
const CLASSNAME = 'redsift-breadcrumb-item';
|
|
29
|
-
const DEFAULT_PROPS = {
|
|
37
|
+
const DEFAULT_PROPS = {
|
|
38
|
+
theme: Theme.dark
|
|
39
|
+
};
|
|
30
40
|
/**
|
|
31
41
|
* The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
|
|
32
42
|
*/
|
|
@@ -40,7 +50,8 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
40
50
|
href,
|
|
41
51
|
icon,
|
|
42
52
|
isCurrent,
|
|
43
|
-
isDisabled
|
|
53
|
+
isDisabled,
|
|
54
|
+
theme
|
|
44
55
|
} = props,
|
|
45
56
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
46
57
|
|
|
@@ -51,6 +62,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
51
62
|
}, forwardedProps, {
|
|
52
63
|
$isCurrent: isCurrent,
|
|
53
64
|
$isDisabled: isDisabled,
|
|
65
|
+
$theme: theme,
|
|
54
66
|
"aria-current": isCurrent ? 'page' : undefined,
|
|
55
67
|
"aria-disabled": isDisabled || isCurrent,
|
|
56
68
|
className: classNames(BreadcrumbItem.className, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.js","sources":["../../../src/components/breadcrumb-item/styles.ts","../../../src/components/breadcrumb-item/BreadcrumbItem.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledBreadcrumbItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbItem = styled.a<StyledBreadcrumbItemProps>`\n background: none;\n border: none;\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: 4px;\n text-decoration: none;\n\n ${({ $isDisabled, $isCurrent }) => css`\n ${$isDisabled ? `\n
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.js","sources":["../../../src/components/breadcrumb-item/styles.ts","../../../src/components/breadcrumb-item/BreadcrumbItem.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Theme } from '~/types';\nimport { StyledBreadcrumbItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbItem = styled.a<StyledBreadcrumbItemProps>`\n background: none;\n border: none;\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: 4px;\n text-decoration: none;\n\n ${({ $isDisabled, $isCurrent, $theme }) => css`\n ${$theme === Theme.dark ? css`\n ${$isDisabled ? `\n color: var(--redsift-color-text-disabled);\n ` : $isCurrent ? `\n color: var(--redsift-color-text-primary);\n ` : `\n color: var(--redsift-color-text-secondary);\n `}\n\n ${!$isDisabled && !$isCurrent && css`\n &:hover,\n &:focus-visible {\n cursor: pointer;\n color: var(--redsift-color-text-primary);\n }\n `}\n ` : css`\n ${$isDisabled ? `\n color: var(--redsift-color-text-light-disabled);\n ` : $isCurrent ? `\n color: var(--redsift-color-text-light-secondary);\n ` : `\n color: var(--redsift-color-text-light-primary);\n `}\n\n ${!$isDisabled && !$isCurrent && css`\n &:hover,\n &:focus-visible {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n `}\n `}\n `}\n \n &:focus-visible {\n outline: 2px solid var(--redsift-color-text-${({ $theme }) => $theme === Theme.light ? 'light' : ''}primary);\n }\n \n i {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n margin-right: 4px;\n vertical-align: -1.5px;\n width: 20px;\n\n ${({ $isDisabled, $theme }) => $isDisabled ? css`\n color: var(--redsift-color-text-disabled);\n ` : css`\n color: var(--redsift-color-text-${$theme === Theme.dark ? 'secondary' : 'light-primary'});\n `}\n }\n\n`","import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp, Theme } from '~/types';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { Icon } from '~/components/icon';\nimport { StyledBreadcrumbItem } from './styles';\nimport { BreadcrumbItemProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftBreadcrumbItem';\nconst CLASSNAME = 'redsift-breadcrumb-item';\nconst DEFAULT_PROPS: Partial<BreadcrumbItemProps> = {\n theme: Theme.dark,\n};\n\n/**\n * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.\n */\nexport const BreadcrumbItem: Comp<BreadcrumbItemProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const linkRef = ref || useRef<HTMLAnchorElement>();\n\n const {\n children,\n className,\n href,\n icon,\n isCurrent,\n isDisabled,\n theme,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props, [children]);\n\n return (\n <StyledBreadcrumbItem\n role=\"link\"\n tabIndex={!isDisabled && !isCurrent ? 0 : undefined}\n {...forwardedProps}\n $isCurrent={isCurrent}\n $isDisabled={isDisabled}\n $theme={theme}\n aria-current={isCurrent ? 'page' : undefined}\n aria-disabled={isDisabled || isCurrent}\n className={classNames(BreadcrumbItem.className, className)}\n href={!isDisabled && !isCurrent ? href : undefined}\n ref={linkRef as RefObject<HTMLAnchorElement>}\n >\n {icon ? <Icon icon={icon} /> : null}\n {children}\n </StyledBreadcrumbItem>\n );\n});\nBreadcrumbItem.className = CLASSNAME;\nBreadcrumbItem.defaultProps = DEFAULT_PROPS;\nBreadcrumbItem.displayName = COMPONENT_NAME;\n"],"names":["StyledBreadcrumbItem","styled","a","$isDisabled","$isCurrent","$theme","css","Theme","dark","light","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","theme","BreadcrumbItem","forwardRef","props","ref","linkRef","useRef","children","className","href","icon","isCurrent","isDisabled","forwardedProps","warnIfNoAccessibleLabelFound","undefined","classNames","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { _ as _taggedTemplateLiteral, c as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import { T as Theme } from './types.js';
|
|
4
5
|
import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
|
|
5
6
|
import styled, { css } from 'styled-components';
|
|
6
7
|
import { B as BreadcrumbItem } from './BreadcrumbItem.js';
|
|
@@ -12,15 +13,18 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
12
13
|
*/
|
|
13
14
|
const StyledBreadcrumbs = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ol {\n display: inline-flex;\n list-style: none;\n padding: unset;\n }\n\n .redsift-breadcrumbs__separator {\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 margin: 0px 4px;\n\n &, i {\n ", "\n }\n\n i {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n vertical-align: -2.5px;\n width: 20px;\n }\n }\n"])), _ref => {
|
|
14
15
|
let {
|
|
15
|
-
$isDisabled
|
|
16
|
+
$isDisabled,
|
|
17
|
+
$theme
|
|
16
18
|
} = _ref;
|
|
17
|
-
return $isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-disabled);\n "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-
|
|
19
|
+
return $isDisabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-", "disabled);\n "])), $theme === Theme.light ? 'light' : '') : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--redsift-color-text-", ");\n "])), $theme === Theme.light ? 'light-primary' : 'secondary');
|
|
18
20
|
});
|
|
19
21
|
|
|
20
|
-
const _excluded = ["children", "className", "icon", "isDisabled", "separator"];
|
|
22
|
+
const _excluded = ["children", "className", "icon", "isDisabled", "separator", "theme"];
|
|
21
23
|
const COMPONENT_NAME = 'RedSiftBreadcrumbs';
|
|
22
24
|
const CLASSNAME = 'redsift-breadcrumbs';
|
|
23
|
-
const DEFAULT_PROPS = {
|
|
25
|
+
const DEFAULT_PROPS = {
|
|
26
|
+
theme: Theme.dark
|
|
27
|
+
};
|
|
24
28
|
/**
|
|
25
29
|
* The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
|
|
26
30
|
*/
|
|
@@ -33,7 +37,8 @@ const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
33
37
|
className,
|
|
34
38
|
icon,
|
|
35
39
|
isDisabled,
|
|
36
|
-
separator
|
|
40
|
+
separator,
|
|
41
|
+
theme
|
|
37
42
|
} = props,
|
|
38
43
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
39
44
|
|
|
@@ -55,13 +60,15 @@ const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
55
60
|
isDisabled: child.props.isDisabled || isDisabled || undefined
|
|
56
61
|
}, child.props, {
|
|
57
62
|
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
|
|
58
|
-
isCurrent: isCurrent
|
|
63
|
+
isCurrent: isCurrent,
|
|
64
|
+
theme: theme
|
|
59
65
|
})), isCurrent === false ? /*#__PURE__*/React.createElement("span", {
|
|
60
66
|
className: "".concat(Breadcrumbs.className, "__separator")
|
|
61
67
|
}, separator ? separator : '/') : null);
|
|
62
68
|
});
|
|
63
69
|
return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({}, forwardedProps, {
|
|
64
70
|
$isDisabled: isDisabled,
|
|
71
|
+
$theme: theme,
|
|
65
72
|
className: classNames(Breadcrumbs.className, className),
|
|
66
73
|
ref: linkRef
|
|
67
74
|
}), /*#__PURE__*/React.createElement("ol", null, breadcrumbItems));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs2.js","sources":["../../../src/components/breadcrumbs/styles.ts","../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledBreadcrumbsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbs = styled.nav<StyledBreadcrumbsProps>`\n ol {\n display: inline-flex;\n list-style: none;\n padding: unset;\n }\n\n .redsift-breadcrumbs__separator {\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 margin: 0px 4px;\n\n &, i {\n ${({ $isDisabled }) => $isDisabled ? css`\n color: var(--redsift-color-text
|
|
1
|
+
{"version":3,"file":"Breadcrumbs2.js","sources":["../../../src/components/breadcrumbs/styles.ts","../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Theme } from '~/types';\nimport { StyledBreadcrumbsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledBreadcrumbs = styled.nav<StyledBreadcrumbsProps>`\n ol {\n display: inline-flex;\n list-style: none;\n padding: unset;\n }\n\n .redsift-breadcrumbs__separator {\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 margin: 0px 4px;\n\n &, i {\n ${({ $isDisabled, $theme }) => $isDisabled ? css`\n color: var(--redsift-color-text-${$theme === Theme.light ? 'light' : ''}disabled);\n `: css`\n color: var(--redsift-color-text-${$theme === Theme.light ? 'light-primary' : 'secondary'});\n `}\n }\n\n i {\n font-size: 20px;\n height: 20px;\n line-height: 20px;\n vertical-align: -2.5px;\n width: 20px;\n }\n }\n`\n","import React, { forwardRef, ReactElement, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp, Theme } from '~/types';\nimport { BreadcrumbItem } from '~/components/breadcrumb-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledBreadcrumbs } from './styles';\nimport { BreadcrumbsProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftBreadcrumbs';\nconst CLASSNAME = 'redsift-breadcrumbs';\nconst DEFAULT_PROPS: Partial<BreadcrumbsProps> = {\n theme: Theme.dark,\n};\n\n/**\n * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.\n */\nexport const Breadcrumbs: Comp<BreadcrumbsProps, HTMLElement> = forwardRef((props, ref) => {\n const linkRef = ref || useRef<HTMLElement>();\n\n const {\n children,\n className,\n icon,\n isDisabled,\n separator,\n theme,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n\n const breadcrumbItems = childArray.map((child, index) => {\n const isCurrent = index === childArray.length - 1;\n\n return (\n <li key={index}>\n <BreadcrumbItem\n icon={child.props.icon || icon || undefined}\n isDisabled={child.props.isDisabled || isDisabled || undefined}\n {...child.props}\n key={child.key ?? index}\n isCurrent={isCurrent}\n theme={theme}\n />\n {isCurrent === false ?\n <span className={`${Breadcrumbs.className}__separator`}>\n {separator ? separator : '/'}\n </span> :\n null}\n </li>\n )\n })\n\n return (\n <StyledBreadcrumbs\n {...forwardedProps}\n $isDisabled={isDisabled}\n $theme={theme}\n className={classNames(Breadcrumbs.className, className)}\n ref={linkRef as RefObject<HTMLElement>}\n >\n <ol>\n {breadcrumbItems}\n </ol>\n </StyledBreadcrumbs>\n );\n});\nBreadcrumbs.className = CLASSNAME;\nBreadcrumbs.defaultProps = DEFAULT_PROPS;\nBreadcrumbs.displayName = COMPONENT_NAME;\n"],"names":["StyledBreadcrumbs","styled","nav","$isDisabled","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","theme","dark","Breadcrumbs","forwardRef","props","ref","linkRef","useRef","children","className","icon","isDisabled","separator","forwardedProps","warnIfNoAccessibleLabelFound","childArray","React","Children","forEach","child","isValidElement","push","breadcrumbItems","map","index","isCurrent","length","undefined","key","classNames","defaultProps","displayName"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@ export { B as BreadcrumbItem } from './BreadcrumbItem.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 'styled-components';
|
|
7
8
|
import './Icon2.js';
|
|
8
|
-
import './types.js';
|
|
9
9
|
//# sourceMappingURL=breadcrumb-item.js.map
|
|
@@ -2,9 +2,9 @@ export { B as Breadcrumbs } from './Breadcrumbs2.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 'styled-components';
|
|
7
8
|
import './BreadcrumbItem.js';
|
|
8
9
|
import './Icon2.js';
|
|
9
|
-
import './types.js';
|
|
10
10
|
//# sourceMappingURL=breadcrumbs.js.map
|
package/esm/_internal/types.js
CHANGED
|
@@ -19,5 +19,13 @@ const ColorPalette = {
|
|
|
19
19
|
success: 'success'
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Theme
|
|
24
|
+
*/
|
|
25
|
+
const Theme = {
|
|
26
|
+
dark: 'dark',
|
|
27
|
+
light: 'light'
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { ColorPalette as C, Theme as T };
|
|
23
31
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/types.ts"],"sourcesContent":["import { ReactElement, Ref } from 'react';\n\n/** Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n // eslint-disable-next-line no-unused-vars\n (props: P & { ref?: Ref<T> }): ReactElement | null;\n /** React component type. */\n readonly $$typeof: symbol;\n /** Component default props. */\n defaultProps?: Partial<P>;\n /** Component name. */\n displayName?: string;\n /** Component base class name. */\n className?: string;\n};\n\n/**\n * JS falsy values.\n * (excluding `NaN` as it can't be distinguished from `number`)\n */\nexport type Falsy = false | undefined | null | 0 | '';\n\n/** Get types of the values of a record. */\nexport type ValueOf<T extends Record<any, any>> = T[keyof T];\n\n/**\n * Color palette.\n */\
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/types.ts"],"sourcesContent":["import { ReactElement, Ref } from 'react';\n\n/** Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n // eslint-disable-next-line no-unused-vars\n (props: P & { ref?: Ref<T> }): ReactElement | null;\n /** React component type. */\n readonly $$typeof: symbol;\n /** Component default props. */\n defaultProps?: Partial<P>;\n /** Component name. */\n displayName?: string;\n /** Component base class name. */\n className?: string;\n};\n\n/**\n * JS falsy values.\n * (excluding `NaN` as it can't be distinguished from `number`)\n */\nexport type Falsy = false | undefined | null | 0 | '';\n\n/** Get types of the values of a record. */\nexport type ValueOf<T extends Record<any, any>> = T[keyof T];\n\n/**\n * Color palette.\n */\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n error: 'error',\n warning: 'warning',\n info: 'info',\n success: 'success',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * Theme\n */\nexport const Theme = {\n dark: 'dark',\n light: 'light',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;"],"names":["ColorPalette","primary","secondary","error","warning","info","success","Theme","dark","light"],"mappings":"AAEA;;AAcA;AACA;AACA;AACA;;AAGA;;AAGA;AACA;AACA;AACO,MAAMA,YAAY,GAAG;AACxBC,EAAAA,OAAO,EAAE,SADe;AAExBC,EAAAA,SAAS,EAAE,WAFa;AAGxBC,EAAAA,KAAK,EAAE,OAHiB;AAIxBC,EAAAA,OAAO,EAAE,SAJe;AAKxBC,EAAAA,IAAI,EAAE,MALkB;AAMxBC,EAAAA,OAAO,EAAE,SAAA;AANe,EAArB;;AAWP;AACA;AACA;AACO,MAAMC,KAAK,GAAG;AACjBC,EAAAA,IAAI,EAAE,MADW;AAEjBC,EAAAA,KAAK,EAAE,OAAA;AAFU;;;;"}
|
|
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2;
|
|
|
11
11
|
/**
|
|
12
12
|
* Component style.
|
|
13
13
|
*/
|
|
14
|
-
const StyledSideNavigationMenuBar = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ", "\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n"])), _ref => {
|
|
14
|
+
const StyledSideNavigationMenuBar = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ", "\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n"])), _ref => {
|
|
15
15
|
let {
|
|
16
16
|
$marginTop = 0
|
|
17
17
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [currentIndex, setCurrentIndex] = useState(0);\n const previousIndex = usePrevious(currentIndex);\n\n const first = () => setCurrentIndex(0);\n\n const last = () => setCurrentIndex(menuItems.size - 1);\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n setCurrentIndex(index);\n };\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n setCurrentIndex(index);\n };\n\n const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return event.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n setCurrentIndex(index);\n };\n\n const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n menubarProps.onKeyDown?.(e);\n e.stopPropagation();\n\n const currentNode = e.target as HTMLUListElement;\n // istanbul ignore next\n const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.preventDefault();\n next();\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (isFromSubmenu) {\n next();\n }\n break;\n case 'End':\n e.preventDefault();\n last();\n break;\n case 'Home':\n e.preventDefault();\n first();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n default:\n match(e);\n break;\n }\n };\n\n const value = useMemo<SideNavigationMenuBarContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n if (currentIndex !== previousIndex) {\n const items = Array.from(menuItems);\n const currentNode = items[currentIndex] as HTMLElement;\n const previousNode = items[previousIndex] as HTMLElement;\n\n // istanbul ignore next\n previousNode?.setAttribute('tabindex', '-1');\n currentNode?.setAttribute('tabindex', '0');\n currentNode?.focus();\n }\n }, [currentIndex, previousIndex, menuItems]);\n\n return (\n <StyledSideNavigationMenuBar\n {...forwardedProps}\n $isDisabled={isDisabled}\n $marginTop={top}\n $withoutIcons={withoutIcons}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={classNames(SideNavigationMenuBar.className, className)}\n ref={navRef as MutableRefObject<HTMLElement>}\n >\n <SideNavigationMenuBarContext.Provider value={value}>\n <ul\n {...menubarProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-orientation=\"vertical\"\n onKeyDown={keyDown}\n ref={menubarRef as MutableRefObject<HTMLUListElement>}\n role=\"menubar\"\n >\n {navItems}\n </ul>\n </SideNavigationMenuBarContext.Provider>\n </StyledSideNavigationMenuBar>\n );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n","import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem } from '~/components/side-navigation-menu-item';\nimport { MenuBarItems, MenuItem, Menu, SideNavigationMenuBarProps } from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n return (item as Menu).children !== undefined;\n}\n\nexport interface UseSideNavigationMenuBarProps {\n items: MenuBarItems;\n isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = (\n {\n items,\n isActive,\n }: UseSideNavigationMenuBarProps\n): Omit<SideNavigationMenuBarProps, 'ref'> => {\n const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n items.map((item) => {\n if (!isMenu(item)) {\n const { title, href, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenuItem\n key={title}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n href={href}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n } else {\n const { title, children, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenu\n key={title}\n aria-label={title}\n isExpanded={isActive ? children.filter(child => isActive(child.href!)).length > 0 : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n {children.map((child) => {\n const { title, href, ref, ...rest } = child;\n return (\n <SideNavigationMenuItem\n key={title}\n href={href}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n })}\n </SideNavigationMenu>\n );\n }\n })\n\n return {\n children: menuBarChildren,\n };\n}"],"names":["StyledSideNavigationMenuBar","styled","nav","$marginTop","css","useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","usePrevious","value","useRef","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","children","className","isDisabled","menubarProps","menubarRef","withoutIcons","forwardedProps","_excluded","warnIfNoAccessibleLabelFound","top","childArray","React","Children","forEach","child","isValidElement","SideNavigationMenu","displayName","SideNavigationMenuItem","includes","type","push","navItems","map","index","key","cloneElement","undefined","icon","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","findIndex","item","keyDown","e","onKeyDown","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","previousNode","setAttribute","focus","classNames","defaultProps","isMenu","useSideNavigationMenuBar","isActive","menuBarChildren","title","href","rest"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts","../../../src/hooks/useBoundingRect.ts","../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx","../../../src/components/side-navigation-menu-bar/useSideNavigationMenuBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n background-color: var(--redsift-color-side-navigation-background);\n overflow-y: auto;\n width: 240px;\n\n ${({ $marginTop = 0 }) => $marginTop ? css`\n height: calc(100% - ${$marginTop}px);\n ` : ''}\n\n ul {\n list-style: none;\n margin: unset;\n padding: unset;\n }\n\n scrollbar-color: var(--redsift-color-side-navigation-scrollbar-resting) transparent;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n block-size: 9px;\n inline-size: 9px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n background-color: var(--redsift-color-side-navigation-scrollbar-resting);\n border-radius: 0px;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-thumb:horizontal,\n &::-webkit-scrollbar-thumb:vertical {\n &:hover {\n background-color: var(--redsift-color-side-navigation-scrollbar-hover);\n }\n }\n\n &::-webkit-scrollbar-corner {\n visibility: hidden;\n }\n`\n","import { useState, useEffect, MutableRefObject } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (ref: MutableRefObject<HTMLElement>, deps?: any[]) => {\n const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n useEffect(() => {\n if (ref.current) {\n setBoundingRect(ref.current.getBoundingClientRect());\n }\n }, deps);\n\n return boundingRect;\n};\n","import React, {\n forwardRef,\n KeyboardEvent,\n MutableRefObject,\n ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { SideNavigationMenu, SideNavigationMenuProps } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem, SideNavigationMenuItemProps } from '~/components/side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '~/utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '~/hooks/useBoundingRect';\n\nconst COMPONENT_NAME = 'RedSiftSideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\nconst DEFAULT_PROPS: Partial<SideNavigationMenuBarProps> = {};\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n const ref = useRef(0);\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n isDisabled,\n menubarProps = {},\n menubarRef = useRef<HTMLUListElement>(),\n withoutIcons,\n ...forwardedProps\n } = props;\n\n warnIfNoAccessibleLabelFound(props);\n const { top } = useBoundingClientRect(navRef, [children]);\n\n /**\n * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n */\n const childArray: ReactElement[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) &&\n [SideNavigationMenu.displayName, SideNavigationMenuItem.displayName].includes(\n (child.type as Comp<SideNavigationMenuProps | SideNavigationMenuItemProps>).displayName\n )\n ) {\n childArray.push(child);\n }\n });\n const navItems = childArray.map((child, index) => {\n return (\n <li key={child.key ?? index} role=\"none\">\n {React.cloneElement(child, {\n isDisabled: child.props.isDisabled || isDisabled || undefined,\n key: child.key ?? index,\n // First-level children should have icon, even empty one (except when withoutIcons is set to true)\n icon: withoutIcons ? undefined : (child.props.icon || 'M 0,0'),\n withoutIcons,\n })}\n </li>\n );\n });\n\n const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n const [currentIndex, setCurrentIndex] = useState(0);\n const previousIndex = usePrevious(currentIndex);\n\n const first = () => setCurrentIndex(0);\n\n const last = () => setCurrentIndex(menuItems.size - 1);\n\n const next = () => {\n const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n setCurrentIndex(index);\n };\n\n const previous = () => {\n const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n setCurrentIndex(index);\n };\n\n const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n const items = Array.from(menuItems);\n\n // Reorder the array, starting with the currentNode\n const reorderedItems = [\n ...items.slice(currentIndex),\n ...items.slice(0, currentIndex)\n ];\n\n // Find all nodes that begin with the pressed letter\n const matches = reorderedItems.filter((menuItem) => {\n const { textContent } = menuItem;\n // istanbul ignore next\n const firstLetter = textContent?.toLowerCase().charAt(0);\n return event.key === firstLetter;\n });\n\n // Exit early if there are no matches\n if (!matches.length) {\n return;\n }\n\n // If the focused item is a match, focus the next match.\n // Otherwise, focus the first match\n const currentNode = items[currentIndex];\n const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n const index = items.findIndex((item) => {\n return item === nextMatch;\n });\n\n setCurrentIndex(index);\n };\n\n const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n menubarProps.onKeyDown?.(e);\n e.stopPropagation();\n\n const currentNode = e.target as HTMLUListElement;\n // istanbul ignore next\n const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n previous();\n break;\n case 'ArrowDown':\n e.preventDefault();\n next();\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (isFromSubmenu) {\n next();\n }\n break;\n case 'End':\n e.preventDefault();\n last();\n break;\n case 'Home':\n e.preventDefault();\n first();\n break;\n case 'Enter':\n case 'Space':\n e.preventDefault();\n currentNode.click();\n break;\n default:\n match(e);\n break;\n }\n };\n\n const value = useMemo<SideNavigationMenuBarContextProps>(\n () => ({ menuItems }),\n [menuItems]\n );\n\n useEffect(() => {\n if (currentIndex !== previousIndex) {\n const items = Array.from(menuItems);\n const currentNode = items[currentIndex] as HTMLElement;\n const previousNode = items[previousIndex] as HTMLElement;\n\n // istanbul ignore next\n previousNode?.setAttribute('tabindex', '-1');\n currentNode?.setAttribute('tabindex', '0');\n currentNode?.focus();\n }\n }, [currentIndex, previousIndex, menuItems]);\n\n return (\n <StyledSideNavigationMenuBar\n {...forwardedProps}\n $isDisabled={isDisabled}\n $marginTop={top}\n $withoutIcons={withoutIcons}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={classNames(SideNavigationMenuBar.className, className)}\n ref={navRef as MutableRefObject<HTMLElement>}\n >\n <SideNavigationMenuBarContext.Provider value={value}>\n <ul\n {...menubarProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-orientation=\"vertical\"\n onKeyDown={keyDown}\n ref={menubarRef as MutableRefObject<HTMLUListElement>}\n role=\"menubar\"\n >\n {navItems}\n </ul>\n </SideNavigationMenuBarContext.Provider>\n </StyledSideNavigationMenuBar>\n );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.defaultProps = DEFAULT_PROPS;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n","import React, { MutableRefObject } from 'react';\nimport { SideNavigationMenu } from '~/components/side-navigation-menu';\nimport { SideNavigationMenuItem } from '~/components/side-navigation-menu-item';\nimport { MenuBarItems, MenuItem, Menu, SideNavigationMenuBarProps } from './types';\n\nconst isMenu = (item: MenuItem | Menu): item is Menu => {\n return (item as Menu).children !== undefined;\n}\n\nexport interface UseSideNavigationMenuBarProps {\n items: MenuBarItems;\n isActive?: (href: string) => boolean;\n}\n\nexport const useSideNavigationMenuBar = (\n {\n items,\n isActive,\n }: UseSideNavigationMenuBarProps\n): Omit<SideNavigationMenuBarProps, 'ref'> => {\n const menuBarChildren: SideNavigationMenuBarProps['children'][] = [];\n\n items.map((item) => {\n if (!isMenu(item)) {\n const { title, href, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenuItem\n key={title}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n href={href}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n } else {\n const { title, children, ref, ...rest } = item;\n menuBarChildren.push(\n <SideNavigationMenu\n key={title}\n aria-label={title}\n isExpanded={isActive ? children.filter(child => isActive(child.href!)).length > 0 : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n {children.map((child) => {\n const { title, href, ref, ...rest } = child;\n return (\n <SideNavigationMenuItem\n key={title}\n href={href}\n isCurrent={isActive ? isActive(href!) : undefined}\n {...rest}\n ref={ref as MutableRefObject<HTMLAnchorElement>}\n >\n {title}\n </SideNavigationMenuItem>\n );\n })}\n </SideNavigationMenu>\n );\n }\n })\n\n return {\n children: menuBarChildren,\n };\n}"],"names":["StyledSideNavigationMenuBar","styled","nav","$marginTop","css","useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","usePrevious","value","useRef","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","children","className","isDisabled","menubarProps","menubarRef","withoutIcons","forwardedProps","_excluded","warnIfNoAccessibleLabelFound","top","childArray","React","Children","forEach","child","isValidElement","SideNavigationMenu","displayName","SideNavigationMenuItem","includes","type","push","navItems","map","index","key","cloneElement","undefined","icon","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","findIndex","item","keyDown","e","onKeyDown","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","previousNode","setAttribute","focus","classNames","defaultProps","isMenu","useSideNavigationMenuBar","isActive","menuBarChildren","title","href","rest"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,2BAA2B,GAAGC,MAAM,CAACC,GAAV,CAKpC,eAAA,KAAA,eAAA,GAAA,sBAAA,CAAA,CAAA,oHAAA,EAAA,q2BAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAU,GAAG,CAAA;GAAhB,GAAA,IAAA,CAAA;AAAA,EAAA,OAAwBA,UAAU,GAAGC,GAAH,CACZD,gBAAAA,KAAAA,gBAAAA,GAAAA,sBAAAA,CAAAA,CAAAA,4BAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,UADY,IAEhC,EAFF,CAAA;AAAA,CALoC,CAAjC;;ACJP;AACA;AACA;;AACO,MAAME,qBAAqB,GAAG,CAACC,GAAD,EAAqCC,IAArC,KAAsD;EACzF,MAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCC,QAAQ,CAAU,EAAV,CAAhD,CAAA;AAEAC,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIL,GAAG,CAACM,OAAR,EAAiB;AACfH,MAAAA,eAAe,CAACH,GAAG,CAACM,OAAJ,CAAYC,qBAAZ,EAAD,CAAf,CAAA;AACD,KAAA;GAHM,EAINN,IAJM,CAAT,CAAA;AAMA,EAAA,OAAOC,YAAP,CAAA;AACD,CAVM;;;ACeP,MAAMM,cAAc,GAAG,8BAAvB,CAAA;AACA,MAAMC,SAAS,GAAG,kCAAlB,CAAA;AACA,MAAMC,aAAkD,GAAG,EAA3D,CAAA;AAEA;AACA;AACA;;AACA,MAAMC,WAAW,GAAIC,KAAD,IAAmB;AACrC,EAAA,MAAMZ,GAAG,GAAGa,MAAM,CAAC,CAAD,CAAlB,CAAA;AAEAR,EAAAA,SAAS,CAAC,MAAM;IACdL,GAAG,CAACM,OAAJ,GAAcM,KAAd,CAAA;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT,CAAA;EAIA,OAAOZ,GAAG,CAACM,OAAX,CAAA;AACD,CARD,CAAA;AAUA;AACA;AACA;;;AACO,MAAMQ,qBAAoE,gBAAGC,UAAU,CAAC,CAACC,KAAD,EAAQhB,GAAR,KAAgB;AAC7G,EAAA,MAAMiB,MAAM,GAAIjB,GAAG,IAAIa,MAAM,EAA7B,CAAA;;EAEA,MAAM;AACJ,IAAA,YAAA,EAAcK,SADV;AAEJ,IAAA,iBAAA,EAAmBC,cAFf;IAGJC,QAHI;IAIJC,SAJI;IAKJC,UALI;AAMJC,IAAAA,YAAY,GAAG,EANX;IAOJC,UAAU,GAAGX,MAAM,EAPf;AAQJY,IAAAA,YAAAA;AARI,GAAA,GAUFT,KAVJ;QASKU,cATL,4BAUIV,KAVJ,EAAAW,WAAA,CAAA,CAAA;;EAYAC,4BAA4B,CAACZ,KAAD,CAA5B,CAAA;EACA,MAAM;AAAEa,IAAAA,GAAAA;AAAF,GAAA,GAAU9B,qBAAqB,CAACkB,MAAD,EAAS,CAACG,QAAD,CAAT,CAArC,CAAA;AAEA;AACF;AACA;;EACE,MAAMU,UAA0B,GAAG,EAAnC,CAAA;EACAC,KAAK,CAACC,QAAN,CAAeC,OAAf,CAAuBb,QAAvB,EAAkCc,KAAD,IAAW;IAC1C,kBAAIH,KAAK,CAACI,cAAN,CAAqBD,KAArB,CACF,IAAA,CAACE,kBAAkB,CAACC,WAApB,EAAiCC,sBAAsB,CAACD,WAAxD,CAAqEE,CAAAA,QAArE,CACGL,KAAK,CAACM,IAAP,CAA4EH,WAD9E,CADF,EAIE;MACAP,UAAU,CAACW,IAAX,CAAgBP,KAAhB,CAAA,CAAA;AACD,KAAA;GAPH,CAAA,CAAA;EASA,MAAMQ,QAAQ,GAAGZ,UAAU,CAACa,GAAX,CAAe,CAACT,KAAD,EAAQU,KAAR,KAAkB;AAAA,IAAA,IAAA,UAAA,EAAA,WAAA,CAAA;;IAChD,oBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAI,MAAA,GAAG,EAAEV,CAAAA,UAAAA,GAAAA,KAAK,CAACW,GAAR,mDAAeD,KAAtB;AAA6B,MAAA,IAAI,EAAC,MAAA;AAAlC,KAAA,eACGb,KAAK,CAACe,YAAN,CAAmBZ,KAAnB,EAA0B;MACzBZ,UAAU,EAAEY,KAAK,CAAClB,KAAN,CAAYM,UAAZ,IAA0BA,UAA1B,IAAwCyB,SAD3B;AAEzBF,MAAAA,GAAG,EAAEX,CAAAA,WAAAA,GAAAA,KAAK,CAACW,GAAR,qDAAeD,KAFO;AAGzB;MACAI,IAAI,EAAEvB,YAAY,GAAGsB,SAAH,GAAgBb,KAAK,CAAClB,KAAN,CAAYgC,IAAZ,IAAoB,OAJ7B;AAKzBvB,MAAAA,YAAAA;AALyB,KAA1B,CADH,CADF,CAAA;AAWD,GAZgB,CAAjB,CAAA;EAcA,MAAMwB,SAAS,GAAGpC,MAAM,CAA6C,IAAIqC,GAAJ,EAA7C,CAAN,CAA8D5C,OAAhF,CAAA;EACA,MAAM,CAAC6C,YAAD,EAAeC,eAAf,IAAkChD,QAAQ,CAAC,CAAD,CAAhD,CAAA;AACA,EAAA,MAAMiD,aAAa,GAAG1C,WAAW,CAACwC,YAAD,CAAjC,CAAA;;AAEA,EAAA,MAAMG,KAAK,GAAG,MAAMF,eAAe,CAAC,CAAD,CAAnC,CAAA;;EAEA,MAAMG,IAAI,GAAG,MAAMH,eAAe,CAACH,SAAS,CAACO,IAAV,GAAiB,CAAlB,CAAlC,CAAA;;EAEA,MAAMC,IAAI,GAAG,MAAM;AACjB,IAAA,MAAMb,KAAK,GAAGO,YAAY,KAAKF,SAAS,CAACO,IAAV,GAAiB,CAAlC,GAAsC,CAAtC,GAA0CL,YAAY,GAAG,CAAvE,CAAA;IACAC,eAAe,CAACR,KAAD,CAAf,CAAA;GAFF,CAAA;;EAKA,MAAMc,QAAQ,GAAG,MAAM;AACrB,IAAA,MAAMd,KAAK,GAAGO,YAAY,KAAK,CAAjB,GAAqBF,SAAS,CAACO,IAAV,GAAiB,CAAtC,GAA0CL,YAAY,GAAG,CAAvE,CAAA;IACAC,eAAe,CAACR,KAAD,CAAf,CAAA;GAFF,CAAA;;EAKA,MAAMe,KAAK,GAAIC,KAAD,IAAkD;IAC9D,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWd,SAAX,CAAd,CAD8D;;IAI9D,MAAMe,cAAc,GAAG,CACrB,GAAGH,KAAK,CAACI,KAAN,CAAYd,YAAZ,CADkB,EAErB,GAAGU,KAAK,CAACI,KAAN,CAAY,CAAZ,EAAed,YAAf,CAFkB,CAAvB,CAJ8D;;AAU9D,IAAA,MAAMe,OAAO,GAAGF,cAAc,CAACG,MAAf,CAAuBC,QAAD,IAAc;MAClD,MAAM;AAAEC,QAAAA,WAAAA;OAAgBD,GAAAA,QAAxB,CADkD;;AAGlD,MAAA,MAAME,WAAW,GAAGD,WAAH,KAAA,IAAA,IAAGA,WAAH,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAGA,WAAW,CAAEE,WAAb,EAAA,CAA2BC,MAA3B,CAAkC,CAAlC,CAApB,CAAA;AACA,MAAA,OAAOZ,KAAK,CAACf,GAAN,KAAcyB,WAArB,CAAA;KAJc,CAAhB,CAV8D;;AAkB9D,IAAA,IAAI,CAACJ,OAAO,CAACO,MAAb,EAAqB;AACnB,MAAA,OAAA;AACD,KApB6D;AAuB9D;;;AACA,IAAA,MAAMC,WAAW,GAAGb,KAAK,CAACV,YAAD,CAAzB,CAAA;AACA,IAAA,MAAMwB,SAAS,GAAGT,OAAO,CAAC3B,QAAR,CAAiBmC,WAAjB,CAAA,GAAgCR,OAAO,CAAC,CAAD,CAAvC,GAA6CA,OAAO,CAAC,CAAD,CAAtE,CAAA;AACA,IAAA,MAAMtB,KAAK,GAAGiB,KAAK,CAACe,SAAN,CAAiBC,IAAD,IAAU;MACtC,OAAOA,IAAI,KAAKF,SAAhB,CAAA;AACD,KAFa,CAAd,CAAA;IAIAvB,eAAe,CAACR,KAAD,CAAf,CAAA;GA9BF,CAAA;;EAiCA,MAAMkC,OAAO,GAAIC,CAAD,IAAwC;AAAA,IAAA,IAAA,qBAAA,EAAA,qBAAA,CAAA;;AACtD,IAAA,CAAA,qBAAA,GAAAxD,YAAY,CAACyD,SAAb,qFAAAzD,YAAY,EAAawD,CAAb,CAAZ,CAAA;AACAA,IAAAA,CAAC,CAACE,eAAF,EAAA,CAAA;AAEA,IAAA,MAAMP,WAAW,GAAGK,CAAC,CAACG,MAAtB,CAJsD;;IAMtD,MAAMC,UAAU,GAAGT,WAAH,KAAGA,IAAAA,IAAAA,WAAH,KAAGA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,qBAAAA,GAAAA,WAAW,CAAEU,UAAhB,MAAG,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAyBA,UAA5C,CAAA;IACA,MAAMC,aAAa,GAAGF,UAAU,CAACG,YAAX,CAAwB,MAAxB,MAAoC,MAA1D,CAAA;;IAEA,QAAQP,CAAC,CAACQ,IAAV;AACE,MAAA,KAAK,SAAL;AACER,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;QACA9B,QAAQ,EAAA,CAAA;AACR,QAAA,MAAA;;AACF,MAAA,KAAK,WAAL;AACEqB,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;QACA/B,IAAI,EAAA,CAAA;AACJ,QAAA,MAAA;;AACF,MAAA,KAAK,YAAL;AACEsB,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;;AACA,QAAA,IAAIH,aAAJ,EAAmB;UACjB5B,IAAI,EAAA,CAAA;AACL,SAAA;;AACD,QAAA,MAAA;;AACF,MAAA,KAAK,KAAL;AACEsB,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;QACAjC,IAAI,EAAA,CAAA;AACJ,QAAA,MAAA;;AACF,MAAA,KAAK,MAAL;AACEwB,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;QACAlC,KAAK,EAAA,CAAA;AACL,QAAA,MAAA;;AACF,MAAA,KAAK,OAAL,CAAA;AACA,MAAA,KAAK,OAAL;AACEyB,QAAAA,CAAC,CAACS,cAAF,EAAA,CAAA;AACAd,QAAAA,WAAW,CAACe,KAAZ,EAAA,CAAA;AACA,QAAA,MAAA;;AACF,MAAA;QACE9B,KAAK,CAACoB,CAAD,CAAL,CAAA;AACA,QAAA,MAAA;AA9BJ,KAAA;GATF,CAAA;;AA2CA,EAAA,MAAMnE,KAAK,GAAG8E,OAAO,CACnB,OAAO;AAAEzC,IAAAA,SAAAA;AAAF,GAAP,CADmB,EAEnB,CAACA,SAAD,CAFmB,CAArB,CAAA;AAKA5C,EAAAA,SAAS,CAAC,MAAM;IACd,IAAI8C,YAAY,KAAKE,aAArB,EAAoC;AAClC,MAAA,MAAMQ,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWd,SAAX,CAAd,CAAA;AACA,MAAA,MAAMyB,WAAW,GAAGb,KAAK,CAACV,YAAD,CAAzB,CAAA;AACA,MAAA,MAAMwC,YAAY,GAAG9B,KAAK,CAACR,aAAD,CAA1B,CAHkC;;MAMlCsC,YAAY,KAAA,IAAZ,IAAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,YAAY,CAAEC,YAAd,CAA2B,UAA3B,EAAuC,IAAvC,CAAA,CAAA;MACAlB,WAAW,KAAA,IAAX,IAAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,WAAW,CAAEkB,YAAb,CAA0B,UAA1B,EAAsC,GAAtC,CAAA,CAAA;AACAlB,MAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAEmB,KAAb,EAAA,CAAA;AACD,KAAA;GAVM,EAWN,CAAC1C,YAAD,EAAeE,aAAf,EAA8BJ,SAA9B,CAXM,CAAT,CAAA;EAaA,oBACE,KAAA,CAAA,aAAA,CAAC,2BAAD,EAAA,QAAA,CAAA,EAAA,EACMvB,cADN,EAAA;AAEE,IAAA,WAAW,EAAEJ,UAFf;AAGE,IAAA,UAAU,EAAEO,GAHd;AAIE,IAAA,aAAa,EAAEJ,YAJjB;AAKE,IAAA,YAAA,EAAYP,SALd;AAME,IAAA,iBAAA,EAAiBC,cANnB;IAOE,SAAS,EAAE2E,UAAU,CAAChF,qBAAqB,CAACO,SAAvB,EAAkCA,SAAlC,CAPvB;AAQE,IAAA,GAAG,EAAEJ,MAAAA;GAEL,CAAA,eAAA,KAAA,CAAA,aAAA,CAAC,4BAAD,CAA8B,QAA9B,EAAA;AAAuC,IAAA,KAAK,EAAEL,KAAAA;AAA9C,GAAA,eACE,uCACMW,YADN,EAAA;AAEE,IAAA,YAAA,EAAYL,SAFd;AAGE,IAAA,iBAAA,EAAiBC,cAHnB;AAIE,IAAA,kBAAA,EAAiB,UAJnB;AAKE,IAAA,SAAS,EAAE2D,OALb;AAME,IAAA,GAAG,EAAEtD,UANP;AAOE,IAAA,IAAI,EAAC,SAAA;GAEJkB,CAAAA,EAAAA,QATH,CADF,CAVF,CADF,CAAA;AA0BD,CAvL6F,EAAvF;AAwLP5B,qBAAqB,CAACO,SAAtB,GAAkCZ,SAAlC,CAAA;AACAK,qBAAqB,CAACiF,YAAtB,GAAqCrF,aAArC,CAAA;AACAI,qBAAqB,CAACuB,WAAtB,GAAoC7B,cAApC;;;;;;AC7NA,MAAMwF,MAAM,GAAInB,IAAD,IAAyC;AACtD,EAAA,OAAQA,IAAD,CAAezD,QAAf,KAA4B2B,SAAnC,CAAA;AACD,CAFD,CAAA;;AASO,MAAMkD,wBAAwB,GAAG,IAKM,IAAA;EAAA,IAJ5C;IACEpC,KADF;AAEEqC,IAAAA,QAAAA;GAE0C,GAAA,IAAA,CAAA;EAC5C,MAAMC,eAAyD,GAAG,EAAlE,CAAA;AAEAtC,EAAAA,KAAK,CAAClB,GAAN,CAAWkC,IAAD,IAAU;AAClB,IAAA,IAAI,CAACmB,MAAM,CAACnB,IAAD,CAAX,EAAmB;MACjB,MAAM;QAAEuB,KAAF;QAASC,IAAT;AAAerG,QAAAA,GAAAA;AAAf,OAAA,GAAgC6E,IAAtC;YAA6ByB,IAA7B,4BAAsCzB,IAAtC,EAAA,SAAA,CAAA,CAAA;;AACAsB,MAAAA,eAAe,CAAC1D,IAAhB,eACE,KAAA,CAAA,aAAA,CAAC,sBAAD,EAAA,QAAA,CAAA;AACE,QAAA,GAAG,EAAE2D,KADP;AAEE,QAAA,SAAS,EAAEF,QAAQ,GAAGA,QAAQ,CAACG,IAAD,CAAX,GAAqBtD,SAAAA;AAF1C,OAAA,EAGMuD,IAHN,EAAA;AAIE,QAAA,IAAI,EAAED,IAJR;AAKE,QAAA,GAAG,EAAErG,GAAAA;AALP,OAAA,CAAA,EAOGoG,KAPH,CADF,CAAA,CAAA;AAWD,KAbD,MAaO;MACL,MAAM;QAAEA,KAAF;QAAShF,QAAT;AAAmBpB,QAAAA,GAAAA;AAAnB,OAAA,GAAoC6E,IAA1C;YAAiCyB,IAAjC,4BAA0CzB,IAA1C,EAAA,UAAA,CAAA,CAAA;;AACAsB,MAAAA,eAAe,CAAC1D,IAAhB,eACE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAA,QAAA,CAAA;AACE,QAAA,GAAG,EAAE2D,KADP;AAEE,QAAA,YAAA,EAAYA,KAFd;AAGE,QAAA,UAAU,EAAEF,QAAQ,GAAG9E,QAAQ,CAAC+C,MAAT,CAAgBjC,KAAK,IAAIgE,QAAQ,CAAChE,KAAK,CAACmE,IAAP,CAAjC,EAAgD5B,MAAhD,GAAyD,CAA5D,GAAgE1B,SAAAA;AAHtF,OAAA,EAIMuD,IAJN,EAAA;AAKE,QAAA,GAAG,EAAEtG,GAAAA;AALP,OAAA,CAAA,EAOGoB,QAAQ,CAACuB,GAAT,CAAcT,KAAD,IAAW;QACvB,MAAM;UAAEkE,KAAF;UAASC,IAAT;AAAerG,UAAAA,GAAAA;AAAf,SAAA,GAAgCkC,KAAtC;cAA6BoE,IAA7B,4BAAsCpE,KAAtC,EAAA,UAAA,CAAA,CAAA;;AACA,QAAA,oBACE,oBAAC,sBAAD,EAAA,QAAA,CAAA;AACE,UAAA,GAAG,EAAEkE,KADP;AAEE,UAAA,IAAI,EAAEC,IAFR;AAGE,UAAA,SAAS,EAAEH,QAAQ,GAAGA,QAAQ,CAACG,IAAD,CAAX,GAAqBtD,SAAAA;AAH1C,SAAA,EAIMuD,IAJN,EAAA;AAKE,UAAA,GAAG,EAAEtG,GAAAA;AALP,SAAA,CAAA,EAOGoG,KAPH,CADF,CAAA;AAWD,OAbA,CAPH,CADF,CAAA,CAAA;AAwBD,KAAA;GAxCH,CAAA,CAAA;EA2CA,OAAO;AACLhF,IAAAA,QAAQ,EAAE+E,eAAAA;GADZ,CAAA;AAGD;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { C as ColorPalette } from './_internal/types.js';
|
|
1
|
+
export { C as ColorPalette, T as Theme } from './_internal/types.js';
|
|
2
2
|
export { S as Select, u as useOnClickOutside } from './_internal/legacy/Select2.js';
|
|
3
3
|
import { useState, useEffect, useCallback } from 'react';
|
|
4
4
|
export { T as Table, a as useDebouncedValue, u as useIsMobile } from './_internal/legacy/Table2.js';
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
|
|
18
18
|
},
|
|
19
19
|
"types": "types.d.ts",
|
|
20
|
-
"version": "6.0.0-alpha.
|
|
20
|
+
"version": "6.0.0-alpha.4",
|
|
21
21
|
"workspaces": [
|
|
22
22
|
"packages/design-system",
|
|
23
23
|
"packages/demo-site"
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"react-dom": "^18.1.0 || ^18.2.0",
|
|
114
114
|
"styled-components": "^5.3.3"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "71961ca62c7cf71f289ef500bb8a0dbee0dd4ff4"
|
|
117
117
|
}
|
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 Mon,
|
|
227
|
+
* Generated on Mon, 19 Sep 2022 10:32:01 GMT
|
|
228
228
|
*/
|
|
229
229
|
|
|
230
230
|
:root {
|
|
@@ -243,6 +243,9 @@
|
|
|
243
243
|
--redsift-color-text-primary: #1c1c1c;
|
|
244
244
|
--redsift-color-text-secondary: rgba(0, 0, 0, 0.6);
|
|
245
245
|
--redsift-color-text-disabled: #a8a8a8;
|
|
246
|
+
--redsift-color-text-light-primary: #ffffff;
|
|
247
|
+
--redsift-color-text-light-disabled: rgba(255, 255, 255, 0.8);
|
|
248
|
+
--redsift-color-text-light-secondary: rgba(255, 255, 255, 0.9);
|
|
246
249
|
--redsift-color-link-primary: #02ac61;
|
|
247
250
|
--redsift-color-link-underline: rgba(2, 172, 97, 0.4);
|
|
248
251
|
--redsift-color-error-main: #e06354;
|
package/types.d.ts
CHANGED
|
@@ -697,6 +697,14 @@ export declare const ColorPalette: {
|
|
|
697
697
|
};
|
|
698
698
|
export declare type ColorPalette = ValueOf<typeof ColorPalette>;
|
|
699
699
|
export declare type Color = ColorPalette | string;
|
|
700
|
+
/**
|
|
701
|
+
* Theme
|
|
702
|
+
*/
|
|
703
|
+
export declare const Theme: {
|
|
704
|
+
readonly dark: "dark";
|
|
705
|
+
readonly light: "light";
|
|
706
|
+
};
|
|
707
|
+
export declare type Theme = ValueOf<typeof Theme>;
|
|
700
708
|
/**
|
|
701
709
|
* Component size.
|
|
702
710
|
*/
|
|
@@ -1044,10 +1052,13 @@ export interface BreadcrumbItemProps extends ComponentProps<"a"> {
|
|
|
1044
1052
|
isCurrent?: boolean;
|
|
1045
1053
|
/** Whether the component is disabled or not. */
|
|
1046
1054
|
isDisabled?: boolean;
|
|
1055
|
+
/** Theme. */
|
|
1056
|
+
theme?: Theme;
|
|
1047
1057
|
}
|
|
1048
1058
|
export declare type StyledBreadcrumbItemProps = Omit<BreadcrumbItemProps, "isDisabled" | "isCurrent"> & {
|
|
1049
1059
|
$isCurrent: BreadcrumbItemProps["isCurrent"];
|
|
1050
1060
|
$isDisabled: BreadcrumbItemProps["isDisabled"];
|
|
1061
|
+
$theme: BreadcrumbItemProps["theme"];
|
|
1051
1062
|
};
|
|
1052
1063
|
/**
|
|
1053
1064
|
* The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
|
|
@@ -1068,9 +1079,12 @@ export interface BreadcrumbsProps extends ComponentProps<"nav"> {
|
|
|
1068
1079
|
isDisabled?: boolean;
|
|
1069
1080
|
/** Separator. */
|
|
1070
1081
|
separator?: ReactElement | string;
|
|
1082
|
+
/** Theme. */
|
|
1083
|
+
theme?: Theme;
|
|
1071
1084
|
}
|
|
1072
1085
|
export declare type StyledBreadcrumbsProps = Omit<BreadcrumbsProps, "isDisabled"> & {
|
|
1073
1086
|
$isDisabled: BreadcrumbsProps["isDisabled"];
|
|
1087
|
+
$theme: BreadcrumbsProps["theme"];
|
|
1074
1088
|
};
|
|
1075
1089
|
/**
|
|
1076
1090
|
* The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
|