@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");
var _typeof = require("@babel/runtime/helpers/typeof");
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 = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * 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, _react2.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, #1868DB)")
});
var grabAreaCollapsedStyles = (0, _react2.css)({
  height: "calc(100% - ".concat("var(--ds-space-600, 48px)", " * 2)"),
  padding: 0,
  position: 'absolute',
  backgroundColor: 'transparent',
  border: 0,
  cursor: 'default',
  insetBlockEnd: 0
});
var lineStyles = (0, _react2.css)({
  display: 'block',
  width: '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 = /*#__PURE__*/React.forwardRef(function (_ref, 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,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return (0, _react2.jsx)("button", (0, _extends2.default)({
    ref: ref
  }, 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: isLeftSidebarCollapsed ? [grabAreaStyles, grabAreaCollapsedStyles] : grabAreaStyles,
    "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
  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({
    css: lineStyles
  }, grabAreaLineSelector)));
});

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