box-ui-elements 15.0.0-beta.38 → 15.0.0-beta.39
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/es/features/collapsible-sidebar/CollapsibleSidebar.js +0 -1
- package/es/features/collapsible-sidebar/CollapsibleSidebar.js.flow +0 -1
- package/es/features/collapsible-sidebar/CollapsibleSidebar.js.map +1 -1
- package/package.json +1 -1
- package/src/features/collapsible-sidebar/CollapsibleSidebar.js +0 -1
- package/src/features/collapsible-sidebar/__tests__/CollapsibleSidebar.test.js +4 -2
|
@@ -33,7 +33,6 @@ import styled from 'styled-components';
|
|
|
33
33
|
import tabbable from 'tabbable';
|
|
34
34
|
import { KEYS } from '../../constants';
|
|
35
35
|
import './CollapsibleSidebar.scss';
|
|
36
|
-
import 'styles/modifiers/_visibility.scss';
|
|
37
36
|
var StyledNav = styled.nav.withConfig({
|
|
38
37
|
displayName: "CollapsibleSidebar__StyledNav",
|
|
39
38
|
componentId: "sc-4t6rz4-0"
|
|
@@ -13,7 +13,6 @@ import tabbable from 'tabbable';
|
|
|
13
13
|
import { KEYS } from '../../constants';
|
|
14
14
|
|
|
15
15
|
import './CollapsibleSidebar.scss';
|
|
16
|
-
import 'styles/modifiers/_visibility.scss';
|
|
17
16
|
|
|
18
17
|
const StyledNav = styled.nav`
|
|
19
18
|
background-color: ${props => props.theme.primary.background};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebar.js"],"names":["React","classNames","styled","tabbable","KEYS","StyledNav","nav","props","theme","primary","background","border","foreground","CollapsibleSidebar","createRef","direction","navRef","current","tabbableEls","currentElIndex","findIndex","el","document","activeElement","index","length","focus","event","contains","key","arrowDown","stopPropagation","preventDefault","focusEl","arrowUp","children","className","expanded","isHidden","htmlAttributes","navClasses","wrapperClasses","hidden","ariaAttributes","undefined","handleKeyDown","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAQA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,QAAP,MAAqB,UAArB;AACA,SAASC,IAAT,QAAqB,iBAArB;AAEA,OAAO,2BAAP;
|
|
1
|
+
{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebar.js"],"names":["React","classNames","styled","tabbable","KEYS","StyledNav","nav","props","theme","primary","background","border","foreground","CollapsibleSidebar","createRef","direction","navRef","current","tabbableEls","currentElIndex","findIndex","el","document","activeElement","index","length","focus","event","contains","key","arrowDown","stopPropagation","preventDefault","focusEl","arrowUp","children","className","expanded","isHidden","htmlAttributes","navClasses","wrapperClasses","hidden","ariaAttributes","undefined","handleKeyDown","Component"],"mappings":"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","sourcesContent":["/**\n * @flow\n * @file Sidebar component that supports rendering different elements based on expand/collapse state\n * @author Box\n *\n * A sidebar component that supports collapsed/expanded state and responsive sizing.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport tabbable from 'tabbable';\nimport { KEYS } from '../../constants';\n\nimport './CollapsibleSidebar.scss';\n\nconst StyledNav = styled.nav`\n background-color: ${props => props.theme.primary.background};\n border-right: 1px solid ${props => props.theme.primary.border};\n color: ${props => props.theme.primary.foreground};\n\n .crawler > div {\n background-color: ${props => props.theme.primary.foreground};\n }\n`;\n\ntype Props = {\n /** Primary content */\n children?: React.Node,\n\n /** Additional classes */\n className?: string,\n\n /** Controls whether or not the sidebar is expanded on the page */\n expanded?: boolean,\n\n /** Optional HTML attributes to append to menu item */\n htmlAttributes?: Object,\n\n /** Optionally apply hidden class (__visibility.scss) and \"aria-hidden\": \"true\" to CollapsibleSidebar wrapper */\n isHidden?: boolean,\n};\n\nclass CollapsibleSidebar extends React.Component<Props> {\n navRef: { current: null | HTMLElement } = React.createRef();\n\n static defaultProps = {\n expanded: false,\n };\n\n focusEl = (direction: 'down' | 'up') => {\n if (this.navRef.current) {\n const tabbableEls = tabbable(this.navRef.current);\n const currentElIndex = tabbableEls.findIndex(el => el === document.activeElement);\n let index;\n if (direction === 'down') {\n index = currentElIndex === tabbableEls.length - 1 ? 0 : currentElIndex + 1;\n } else {\n index = currentElIndex === 0 ? tabbableEls.length - 1 : currentElIndex - 1;\n }\n tabbableEls[index].focus();\n }\n };\n\n handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n if (this.navRef.current && this.navRef.current.contains(document.activeElement)) {\n switch (event.key) {\n case KEYS.arrowDown:\n event.stopPropagation();\n event.preventDefault();\n this.focusEl('down');\n break;\n\n case KEYS.arrowUp:\n event.stopPropagation();\n event.preventDefault();\n this.focusEl('up');\n break;\n\n default:\n break;\n }\n }\n };\n\n render() {\n const { children, className, expanded, isHidden, htmlAttributes } = this.props;\n const navClasses = classNames(\n {\n 'is-expanded': expanded,\n },\n 'bdl-CollapsibleSidebar',\n className,\n );\n const wrapperClasses = classNames('bdl-CollapsibleSidebar-wrapper', { hidden: isHidden });\n const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };\n return (\n <div\n className={wrapperClasses}\n {...htmlAttributes}\n {...ariaAttributes}\n data-testid=\"CollapsibleSidebar-wrapper\"\n >\n <StyledNav ref={this.navRef} className={navClasses} onKeyDown={this.handleKeyDown}>\n {children}\n </StyledNav>\n </div>\n );\n }\n}\n\nexport default CollapsibleSidebar;\n"],"file":"CollapsibleSidebar.js"}
|
package/package.json
CHANGED
|
@@ -13,7 +13,6 @@ import tabbable from 'tabbable';
|
|
|
13
13
|
import { KEYS } from '../../constants';
|
|
14
14
|
|
|
15
15
|
import './CollapsibleSidebar.scss';
|
|
16
|
-
import 'styles/modifiers/_visibility.scss';
|
|
17
16
|
|
|
18
17
|
const StyledNav = styled.nav`
|
|
19
18
|
background-color: ${props => props.theme.primary.background};
|
|
@@ -137,12 +137,14 @@ describe('components/core/collapsible-sidebar/CollapsibleSidebar', () => {
|
|
|
137
137
|
${undefined}
|
|
138
138
|
`('should NOT be hidden when isHidden is $isHidden', ({ isHidden }) => {
|
|
139
139
|
wrapper({ isHidden });
|
|
140
|
-
|
|
140
|
+
const CollapsibleSidebarWrapper = screen.getByTestId('CollapsibleSidebar-wrapper');
|
|
141
|
+
expect(CollapsibleSidebarWrapper).not.toHaveAttribute('aria-hidden', 'true');
|
|
141
142
|
});
|
|
142
143
|
|
|
143
144
|
test('should be hidden when isHidden is true', () => {
|
|
144
145
|
wrapper({ isHidden: true });
|
|
145
|
-
|
|
146
|
+
const CollapsibleSidebarWrapper = screen.getByTestId('CollapsibleSidebar-wrapper');
|
|
147
|
+
expect(CollapsibleSidebarWrapper).toHaveAttribute('aria-hidden', 'true');
|
|
146
148
|
});
|
|
147
149
|
});
|
|
148
150
|
});
|