@atlaskit/page-layout/dist/es2019/components/resize-control/resize-button.js

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

import _extends from "@babel/runtime/helpers/extends";
/* 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 -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import ChevronRight from '@atlaskit/icon/core/migration/chevron-right';
import { easeOut } from '@atlaskit/motion/curves';
import { durations } from '@atlaskit/motion/durations';
import { UNSAFE_media } from '@atlaskit/primitives/responsive';
import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
const increaseHitAreaStyles = 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)"}`
});
const mobileStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles -- Ignored via go/DSP-18766
  [UNSAFE_media.below.sm]: {
    opacity: 1
  }
});
const resizeIconButtonStyles = css({
  width: 24,
  height: 24,
  padding: "var(--ds-space-0, 0px)",
  position: 'absolute',
  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
  border: 0,
  borderRadius: "var(--ds-border-radius-circle, 50%)",
  boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
  color: `var(--ds-text-subtle, ${N200})`,
  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: `
    background-color ${durations.small}ms linear,
    color ${durations.small}ms linear,
    opacity ${durations.medium}ms ${easeOut}
  `,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  ':hover': {
    backgroundColor: `var(--ds-background-selected-bold, ${B100})`,
    color: `var(--ds-text-inverse, ${N0})`,
    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, ${B200})`,
    color: `var(--ds-text-inverse, ${N0})`,
    opacity: 1
  }
});
const resizeIconButtonExpandedStyles = css({
  transform: 'rotate(180deg)',
  transformOrigin: 7
});
const preventDefault = event => event.preventDefault();
const cssSelector = {
  [RESIZE_BUTTON_SELECTOR]: true
};
const ResizeButton = ({
  isLeftSidebarCollapsed,
  label,
  testId,
  ...props
}) => jsx("button", _extends({}, cssSelector, {
  // DO NOT remove. used as a CSS selector.
  "aria-expanded": !isLeftSidebarCollapsed,
  "aria-label": label,
  type: "button"
  // The error goes away when we remove the spread ...props
  ,
  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
  "data-testid": testId
  // Prevents focus staying attached to the button when pressed
  ,
  onMouseDown: preventDefault
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props), jsx(ChevronRight, {
  label: "",
  color: "currentColor",
  size: "small"
}), jsx("span", {
  css: increaseHitAreaStyles
}));

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default ResizeButton;