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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _motion = require("@atlaskit/motion");
var _hooks = require("../../common/hooks");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
var direction = 'to left';
var transitionDuration = '0.22s';
var shadowStyles = (0, _react.css)({
  width: 3,
  position: 'absolute',
  background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
  insetBlockEnd: 0,
  insetBlockStart: 0,
  insetInlineStart: -1,
  opacity: 0.5,
  pointerEvents: 'none',
  transitionDuration: transitionDuration,
  transitionProperty: 'left, opacity, width',
  transitionTimingFunction: _motion.easeOut
});
var draggingStyles = (0, _react.css)({
  width: 6,
  background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
  insetInlineStart: "var(--ds-space-negative-075, -6px)",
  opacity: 0.8
});
var Shadow = function Shadow(_ref) {
  var testId = _ref.testId;
  var isDragging = (0, _hooks.useIsSidebarDragging)();
  return (0, _react.jsx)("div", {
    "data-testid": testId,
    css: [shadowStyles, isDragging && draggingStyles]
  });
};

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