@atlaskit/drawer 10.1.5 → 11.0.0

package/dist/es2019/components/index.js

@@ -1,129 +0,0 @@
-/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-import React, { useCallback, useEffect } from 'react';
-import { canUseDOM } from 'exenv';
-import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { Layering, useCloseOnEscapePress } from '@atlaskit/layering';
-import Portal from '@atlaskit/portal';
-import Blanket from './blanket';
-import DrawerPrimitive from './primitives';
-// escape close manager for layering
-const EscapeCloseManager = ({
-  onClose
-}) => {
-  // wrap so that we can cast the event to a React.KeyboardEvent
-  const handleClose = useCallback(evt => {
-    onClose && onClose(evt);
-  }, [onClose]);
-  useCloseOnEscapePress({
-    onClose: handleClose
-  });
-  return /*#__PURE__*/React.createElement("span", null);
-};
-
-/**
- * __Drawer__
- *
- * A drawer is a panel that slides in from the left side of the screen.
- *
- * - [Examples](https://atlassian.design/components/drawer/examples)
- * - [Code](https://atlassian.design/components/drawer/code)
- * - [Usage](https://atlassian.design/components/drawer/usage)
- */
-const Drawer = ({
-  width = 'narrow',
-  isOpen,
-  isFocusLockEnabled = true,
-  shouldReturnFocus = true,
-  autoFocusFirstElem = true,
-  onKeyDown,
-  onClose,
-  testId,
-  children,
-  icon,
-  closeLabel,
-  scrollContentLabel,
-  onCloseComplete,
-  onOpenComplete,
-  overrides,
-  zIndex = 'unset',
-  label,
-  titleId,
-  enterFrom
-}) => {
-  const body = canUseDOM ? document.querySelector('body') : undefined;
-  const handleClose = usePlatformLeafEventHandler({
-    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
-    action: 'dismissed',
-    componentName: 'drawer',
-    packageName: "@atlaskit/drawer",
-    packageVersion: "10.1.5",
-    analyticsData: {
-      trigger: 'escKey'
-    }
-  });
-  const handleKeyDown = useCallback(evt => {
-    onKeyDown && onKeyDown(evt);
-  }, [onKeyDown]);
-  useEffect(() => {
-    if (isOpen) {
-      window.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown, isOpen]);
-  const handleBlanketClick = usePlatformLeafEventHandler({
-    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
-    action: 'dismissed',
-    componentName: 'drawer',
-    packageName: "@atlaskit/drawer",
-    packageVersion: "10.1.5",
-    analyticsData: {
-      trigger: 'blanket'
-    }
-  });
-  const handleBackButtonClick = usePlatformLeafEventHandler({
-    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
-    action: 'dismissed',
-    componentName: 'drawer',
-    packageName: "@atlaskit/drawer",
-    packageVersion: "10.1.5",
-    analyticsData: {
-      trigger: 'backButton'
-    }
-  });
-  if (!body) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Portal, {
-    zIndex: zIndex
-  }, /*#__PURE__*/React.createElement(Blanket, {
-    isOpen: isOpen,
-    onBlanketClicked: handleBlanketClick,
-    testId: testId && `${testId}--blanket`
-  }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
-    testId: testId,
-    icon: icon,
-    closeLabel: closeLabel,
-    in: isOpen,
-    onClose: handleBackButtonClick,
-    onCloseComplete: onCloseComplete,
-    onOpenComplete: onOpenComplete,
-    width: width,
-    enterFrom: enterFrom,
-    label: label,
-    titleId: titleId
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    overrides: overrides,
-    autoFocusFirstElem: autoFocusFirstElem,
-    isFocusLockEnabled: isFocusLockEnabled,
-    shouldReturnFocus: shouldReturnFocus,
-    scrollContentLabel: scrollContentLabel
-  }, isOpen ? /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
-    onClose: handleClose
-  })) : children));
-};
-export default Drawer;

package/dist/es2019/components/primitives/content.js

@@ -1,56 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const defaultStyles = {
-  flex: 1,
-  overflow: 'auto',
-  marginTop: "var(--ds-space-300, 24px)"
-};
-const contentCSS = () => defaultStyles;
-const Content = ({
-  cssFn,
-  scrollContentLabel = 'Scrollable content',
-  ...props
-}) => {
-  const [showContentFocus, setContentFocus] = useState(false);
-  const scrollableRef = useRef(null);
-  useEffect(() => {
-    const setLazyContentFocus = () => {
-      const target = scrollableRef.current;
-      target && setContentFocus(target.scrollHeight > target.clientHeight);
-    };
-    setLazyContentFocus();
-  }, []);
-
-  /**
-   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
-   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
-   * guide suggested as it made more sense as a transformer of the current styles rather than
-   * a complete override with no chance of partially changing styles.
-   */
-  return jsx("div", _extends({
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    css: css(cssFn(defaultStyles)),
-    ref: scrollableRef
-    // tabindex is allowed here so that keyboard users can scroll content
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: showContentFocus ? 0 : undefined,
-    role: showContentFocus ? 'region' : undefined,
-    "aria-label": showContentFocus ? scrollContentLabel : undefined,
-    "data-testid": "drawer-contents"
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
-};
-const contentDefaults = {
-  component: Content,
-  cssFn: contentCSS
-};
-export default contentDefaults;

package/dist/es2019/components/primitives/drawer-wrapper.js

@@ -1,86 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef, useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { useMergeRefs } from 'use-callback-ref';
-import { N0 } from '@atlaskit/theme/colors';
-import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import usePreventProgrammaticScroll from '../../hooks/use-prevent-programmatic-scroll';
-export const wrapperWidth = {
-  full: {
-    width: '100vw'
-  },
-  extended: {
-    width: '95vw'
-  },
-  narrow: {
-    width: 360
-  },
-  medium: {
-    width: 480
-  },
-  wide: {
-    width: 600
-  }
-};
-const wrapperStyles = css({
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  zIndex: 500,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  insetBlockStart: 0,
-  insetInlineStart: 0,
-  overflow: 'hidden'
-});
-/**
- * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
- */
-const DrawerWrapper = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  width = 'narrow',
-  testId,
-  drawerRef,
-  label,
-  titleId
-}, scrollRef) => {
-  /**
-   * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
-   * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
-   *
-   * This is because we do not control the `<Content />` component in order to forward a ref to it (given it can be overriden via `DrawerPrimitiveProps['overrides']['Content']['component']`).
-   * Additionally, we target the last child because with `props.overrides.Sidebar.component = () => null` you only have one child.
-   * If both `Sidebar.component` and `Content.component` return null you will have no children and this will throw an error, but that doesn't seem valid.
-   */
-  const assignSecondChildRef = useCallback(node => {
-    var _node$children;
-    if (node !== null && node !== void 0 && (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length && typeof scrollRef === 'function') {
-      scrollRef(node.children[node.children.length - 1]);
-    }
-  }, [scrollRef]);
-  const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
-  usePreventProgrammaticScroll();
-  return jsx("div", {
-    css: wrapperStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: wrapperWidth[width]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: className,
-    "data-testid": testId,
-    ref: ref,
-    "aria-modal": true,
-    role: "dialog",
-    "aria-label": label,
-    "aria-labelledby": titleId
-  }, children);
-});
-export default DrawerWrapper;

package/dist/es2019/components/primitives/focus-lock.js

@@ -1,49 +0,0 @@
-import React, { useEffect } from 'react';
-import ReactFocusLock from 'react-focus-lock';
-import ScrollLock from 'react-scrolllock';
-import invariant from 'tiny-invariant';
-/**
- * __Focus lock__
- *
- * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
- * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
- */
-const FocusLock = ({
-  isFocusLockEnabled = true,
-  autoFocusFirstElem = true,
-  shouldReturnFocus = true,
-  children
-}) => {
-  useEffect(() => {
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-      invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
-    }
-    if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
-      const elem = autoFocusFirstElem();
-      if (elem && elem.focus) {
-        elem.focus();
-      }
-    }
-  }, [autoFocusFirstElem, isFocusLockEnabled]);
-  const getFocusTarget = () => {
-    if (typeof shouldReturnFocus === 'boolean') {
-      return shouldReturnFocus;
-    }
-    return false;
-  };
-  const onDeactivation = () => {
-    if (typeof shouldReturnFocus !== 'boolean') {
-      window.setTimeout(() => {
-        var _shouldReturnFocus$cu;
-        shouldReturnFocus === null || shouldReturnFocus === void 0 ? void 0 : (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
-      }, 0);
-    }
-  };
-  return /*#__PURE__*/React.createElement(ReactFocusLock, {
-    disabled: !isFocusLockEnabled,
-    autoFocus: !!autoFocusFirstElem,
-    returnFocus: getFocusTarget(),
-    onDeactivation: onDeactivation
-  }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
-};
-export default FocusLock;

package/dist/es2019/components/primitives/index.js

@@ -1,113 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useRef } from 'react';
-import { IconButton } from '@atlaskit/button/new';
-import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
-import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
-import { createExtender } from '../utils';
-import ContentOverrides from './content';
-import DrawerWrapper from './drawer-wrapper';
-import FocusLock from './focus-lock';
-import SidebarOverrides from './sidebar';
-
-// Misc.
-// ------------------------------
-
-const defaults = {
-  Sidebar: SidebarOverrides,
-  Content: ContentOverrides
-};
-
-/**
- * This wrapper is used to specify separate durations for enter and exit.
- */
-const CustomSlideIn = ({
-  children,
-  onFinish,
-  enterFrom
-}) => {
-  return /*#__PURE__*/React.createElement(SlideIn, {
-    animationTimingFunction: "ease-out",
-    duration: "small",
-    enterFrom: enterFrom,
-    exitTo: enterFrom,
-    fade: "none",
-    onFinish: onFinish
-  }, children);
-};
-const DrawerPrimitive = ({
-  children,
-  icon: Icon,
-  closeLabel = 'Close drawer',
-  scrollContentLabel,
-  onClose,
-  onCloseComplete,
-  onOpenComplete,
-  overrides,
-  testId,
-  in: isOpen,
-  shouldReturnFocus,
-  autoFocusFirstElem,
-  isFocusLockEnabled,
-  width,
-  label,
-  titleId,
-  enterFrom = 'left'
-}) => {
-  const getOverrides = createExtender(defaults, overrides);
-  const {
-    component: Sidebar,
-    ...sideBarOverrides
-  } = getOverrides('Sidebar');
-  const {
-    component: Content,
-    ...contentOverrides
-  } = getOverrides('Content');
-
-  /**
-   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
-   */
-  const drawerRef = useRef(null);
-  const onFinish = useCallback(state => {
-    if (state === 'entering') {
-      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
-    } else if (state === 'exiting') {
-      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
-    }
-  }, [onCloseComplete, onOpenComplete]);
-  return /*#__PURE__*/React.createElement(ExitingPersistence, {
-    appear: true
-  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
-    onFinish: onFinish,
-    enterFrom: enterFrom
-  }, ({
-    className
-  }) => /*#__PURE__*/React.createElement(FocusLock, {
-    autoFocusFirstElem: autoFocusFirstElem,
-    isFocusLockEnabled: isFocusLockEnabled,
-    shouldReturnFocus: shouldReturnFocus
-  }, /*#__PURE__*/React.createElement(DrawerWrapper
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
-    className: className,
-    width: width,
-    testId: testId,
-    drawerRef: drawerRef,
-    label: label,
-    titleId: titleId
-  }, /*#__PURE__*/React.createElement(Sidebar, sideBarOverrides, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose,
-    testId: testId && 'DrawerPrimitiveSidebarCloseButton',
-    icon: Icon ? iconProps => /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-      size: "large",
-      LEGACY_size: "large"
-    })) : ArrowLeft,
-    label: closeLabel,
-    shape: "circle",
-    appearance: "subtle"
-  })), /*#__PURE__*/React.createElement(Content, _extends({
-    scrollContentLabel: scrollContentLabel
-  }, contentOverrides), children)))));
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export default DrawerPrimitive;

package/dist/es2019/components/primitives/sidebar.js

@@ -1,36 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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 { N500 } from '@atlaskit/theme/colors';
-const defaultStyle = {
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  color: `var(--ds-text-subtle, ${N500})`,
-  display: 'flex',
-  flexShrink: 0,
-  flexDirection: 'column',
-  height: '100vh',
-  paddingBottom: "var(--ds-space-200, 16px)",
-  paddingTop: "var(--ds-space-300, 24px)",
-  width: "var(--ds-space-800, 64px)"
-};
-const sidebarCSS = () => defaultStyle;
-const Sidebar = ({
-  cssFn,
-  ...props
-}) => {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  return jsx("div", _extends({
-    css: css(cssFn(defaultStyle))
-  }, props));
-};
-const sidebarDefaults = {
-  component: Sidebar,
-  cssFn: sidebarCSS
-};
-export default sidebarDefaults;

package/dist/es2019/components/utils.js

@@ -1,44 +0,0 @@
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
-/**
- * @deprecated Please avoid using this function as we intend to remote it in a future release. See DSP-2673 for more information.
- */
-export const createExtender = function createExtender(defaults,
-/**
- * We're defaulting to an Object.create call here to circumvent
- *  the fact that {} can't be reconciled
- *  with a type that extends Record<string, any>
- *
- *  By doing this, we are intentionally disallowing users
- *  from nullifying a particular component in the tree.
- *  This can be reverted with additional logic,
- *  at such a time as this nullification becomes an actual usecase.
- */
-overrides = Object.create(Object.prototype)) {
-  if (!defaults) {
-    throw new Error('a default set of overrides *must* be passed in as the first argument');
-  }
-  return function getOverrides(key) {
-    const {
-      cssFn: defaultCssFn,
-      component: defaultComponent
-    } = defaults[key];
-    if (!overrides[key]) {
-      return {
-        cssFn: defaultCssFn,
-        component: defaultComponent
-      };
-    }
-    const {
-      cssFn: customCssFn,
-      component: customComponent
-    } = overrides[key];
-    const composedCssFn = state => {
-      return customCssFn(defaultCssFn(state), state);
-    };
-    return {
-      cssFn: customCssFn ? composedCssFn : defaultCssFn,
-      component: customComponent || defaultComponent
-    };
-  };
-};

package/dist/es2019/entry-points/compiled.js

@@ -1,4 +0,0 @@
-export { Drawer } from '../compiled/drawer';
-export { DrawerContent } from '../compiled/drawer-panel/drawer-content';
-export { DrawerSidebar } from '../compiled/drawer-panel/drawer-sidebar';
-export { DrawerCloseButton } from '../compiled/drawer-panel/drawer-close-button';

package/dist/esm/compiled/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/blanket.js

@@ -1,54 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import AkBlanket from '@atlaskit/blanket';
-import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-var blanketStyles = css({
-  position: 'relative'
-});
-
-/**
- * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
- */
-var Blanket = function Blanket(_ref) {
-  var isOpen = _ref.isOpen,
-    onBlanketClicked = _ref.onBlanketClicked,
-    testId = _ref.testId;
-  return jsx(ExitingPersistence, {
-    appear: true
-  }, isOpen && jsx(FadeIn
-  /**
-   * We double the duration because the fade in keyframes have
-   * `opacity: 1` at `50%`.
-   *
-   * The fade out animation uses half the passed duration so it evens out.
-   */, {
-    duration: "large"
-    /**
-     * We don't expose this on `FadeIn` but it does get passed down.
-     * TODO: figure out how we want to handle this...
-     */
-    // @ts-ignore
-    ,
-    animationTimingFunction: "ease-out"
-  }, function (_ref2) {
-    var className = _ref2.className;
-    return (
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: blanketStyles,
-        className: className
-      }, jsx(AkBlanket, {
-        isTinted: true,
-        onBlanketClicked: onBlanketClicked,
-        testId: testId && testId
-      }))
-    );
-  }));
-};
-export default Blanket;