@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
109 lines (107 loc) • 4.67 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
var _curves = require("@atlaskit/motion/curves");
var _durations = require("@atlaskit/motion/durations");
var _responsive = require("@atlaskit/primitives/responsive");
var _constants = require("../../common/constants");
var _excluded = ["isLeftSidebarCollapsed", "label", "onClick", "testId"],
_excluded2 = ["css"];
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var hitAreaSpanStyles = (0, _react.css)({
position: 'absolute',
insetBlockEnd: "var(--ds-space-negative-300, -24px)",
insetBlockStart: "var(--ds-space-negative-300, -24px)",
insetInlineEnd: "var(--ds-space-negative-150, -12px)",
insetInlineStart: "var(--ds-space-negative-100, -8px)"
});
var mobileStyles = (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
opacity: 1
}));
var resizeIconButtonStyles = (0, _react.css)({
width: 24,
height: 24,
padding: "var(--ds-space-0, 0px)",
position: 'absolute',
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
border: 0,
borderRadius: "var(--ds-radius-full, 50%)",
boxShadow: "0 0 0 1px ".concat('rgba(9, 30, 66, 0.08)', ", 0 2px 4px 1px ", 'rgba(9, 30, 66, 0.08)'),
color: "var(--ds-text-subtle, #505258)",
cursor: 'pointer',
insetBlockStart: "var(--ds-space-400, 32px)",
insetInlineStart: 0,
/**
* The fallback value of 0 ensures that the button is hidden by default,
* unless some parent (or the button itself) overrides it.
*/
opacity: "var(--ds--resize-button--opacity,0)",
outline: 0,
transform: 'translateX(-50%)',
transition: "\n background-color ".concat(_durations.durations.small, "ms linear,\n color ").concat(_durations.durations.small, "ms linear,\n opacity ").concat(_durations.durations.medium, "ms ").concat(_curves.easeOut, "\n "),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':hover': {
backgroundColor: "var(--ds-background-selected-bold, #1868DB)",
color: "var(--ds-text-inverse, #FFFFFF)",
opacity: 1
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':active, :focus': {
backgroundColor: "var(--ds-background-selected-bold-hovered, #1558BC)",
color: "var(--ds-text-inverse, #FFFFFF)",
opacity: 1
}
});
var resizeIconButtonExpandedStyles = (0, _react.css)({
transform: 'rotate(180deg)',
transformOrigin: 7
});
var preventDefault = function preventDefault(event) {
return event.preventDefault();
};
var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_BUTTON_SELECTOR, true);
var ResizeButton = function ResizeButton(_ref) {
var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
label = _ref.label,
onClick = _ref.onClick,
testId = _ref.testId,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
// Extract css from props if it exists to avoid conflicts
var _ref2 = props,
_ignoredCss = _ref2.css,
restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
return (0, _react.jsx)("button", (0, _extends2.default)({}, cssSelector, {
// DO NOT remove. used as a CSS selector.
"aria-expanded": !isLeftSidebarCollapsed,
"aria-label": label,
type: "button",
css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
"data-testid": testId
// Prevents focus staying attached to the button when pressed
,
onMouseDown: preventDefault,
onClick: onClick
}, restProps), (0, _react.jsx)(_chevronRight.default, {
label: "",
color: "currentColor",
size: "small"
}), (0, _react.jsx)("span", {
css: hitAreaSpanStyles
}));
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = ResizeButton;