@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
98 lines (96 loc) • 2.81 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { B200 } from '@atlaskit/theme/colors';
import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
/**
* Determines the color of the grab line.
*
* Used on internal leaf node, so naming collisions won't matter.
*/
const varLineColor = '--ds-line';
const grabAreaStyles = css({
width: "var(--ds-space-200, 16px)",
height: '100%',
padding: 0,
backgroundColor: 'transparent',
border: 0,
cursor: 'ew-resize',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&::-moz-focus-inner': {
border: 0
},
'&:focus': {
outline: 0
},
'&:enabled:hover, &:enabled:focus, &:enabled:active': {
[varLineColor]: `var(--ds-border-selected, ${B200})`
}
});
const grabAreaCollapsedStyles = css({
height: `calc(100% - ${"var(--ds-space-600, 3rem)"} * 2)`,
padding: 0,
position: 'absolute',
backgroundColor: 'transparent',
border: 0,
cursor: 'default',
insetBlockEnd: 0
});
const lineStyles = css({
display: 'block',
width: "var(--ds-border-width-outline, 2px)",
height: '100%',
backgroundColor: 'var(--ds-line)',
transition: 'background-color 200ms'
});
const grabAreaLineSelector = {
[GRAB_AREA_LINE_SELECTOR]: true
};
const grabAreaSelector = {
[GRAB_AREA_SELECTOR]: true
};
const GrabArea = ({
testId,
valueTextLabel = 'Width',
isDisabled,
isLeftSidebarCollapsed,
label,
leftSidebarPercentageExpanded,
onKeyDown,
onMouseDown,
onBlur,
onFocus,
ref,
...rest
}) => jsx("button", _extends({}, grabAreaSelector, {
"aria-label": label,
"data-testid": testId,
disabled: isDisabled,
"aria-hidden": isLeftSidebarCollapsed,
type: "button"
// The slider role is applied to a button to utilize the native
// interactive and disabled functionality on the resize slider. While a
// range input would be more semantically accurate, it does not affect
// usability.
,
role: "slider",
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
"aria-orientation": "vertical",
"aria-valuenow": leftSidebarPercentageExpanded,
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuetext": `${valueTextLabel} ${leftSidebarPercentageExpanded}%`,
onKeyDown: onKeyDown,
onMouseDown: onMouseDown,
onFocus: onFocus,
onBlur: onBlur
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest), jsx("span", _extends({
css: lineStyles
}, grabAreaLineSelector)));
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default GrabArea;