@atlaskit/page-layout/dist/cjs/components/resize-control/grab-area.js

A collection of components which let you compose an application's page layout.

"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 _colors = require("@atlaskit/theme/colors");
var _constants = require("../../common/constants");
var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
/**
 * Determines the color of the grab line.
 *
 * Used on internal leaf node, so naming collisions won't matter.
 */
var varLineColor = '--ds-line';
var grabAreaStyles = (0, _react.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': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
});
var grabAreaCollapsedStyles = (0, _react.css)({
  height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
  padding: 0,
  position: 'absolute',
  backgroundColor: 'transparent',
  border: 0,
  cursor: 'default',
  insetBlockEnd: 0
});
var lineStyles = (0, _react.css)({
  display: 'block',
  width: "var(--ds-border-width-outline, 2px)",
  height: '100%',
  backgroundColor: 'var(--ds-line)',
  transition: 'background-color 200ms'
});
var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true);
var GrabArea = function GrabArea(_ref) {
  var testId = _ref.testId,
    _ref$valueTextLabel = _ref.valueTextLabel,
    valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
    isDisabled = _ref.isDisabled,
    isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
    label = _ref.label,
    leftSidebarPercentageExpanded = _ref.leftSidebarPercentageExpanded,
    onKeyDown = _ref.onKeyDown,
    onMouseDown = _ref.onMouseDown,
    onBlur = _ref.onBlur,
    onFocus = _ref.onFocus,
    ref = _ref.ref,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return (0, _react.jsx)("button", (0, _extends2.default)({}, 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": "".concat(valueTextLabel, " ").concat(leftSidebarPercentageExpanded, "%"),
    onKeyDown: onKeyDown,
    onMouseDown: onMouseDown,
    onFocus: onFocus,
    onBlur: onBlur
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
    css: lineStyles
  }, grabAreaLineSelector)));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = GrabArea;