@atlaskit/drawer 7.3.1 → 7.4.0

package/dist/types/constants.d.ts

@@ -1,6 +1,7 @@
-import type { DrawerWidth } from './components/types';
+import type { DrawerWidth, FocusLockSettings } from './components/types';
 export declare const transitionDuration = "0.22s";
 export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;
+export declare const defaultFocusLockSettings: FocusLockSettings;

package/dist/types-ts4.0/components/index.d.ts

@@ -4,10 +4,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     renderPortal: boolean;
 }> {
     static defaultProps: {
+        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
+        isFocusLockEnabled?: boolean | undefined;
+        shouldReturnFocus?: boolean | undefined;
         width: DrawerWidth;
-        isFocusLockEnabled: boolean;
-        shouldReturnFocus: boolean;
-        autoFocusFirstElem: boolean;
     };
     state: {
         renderPortal: boolean;
@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "isOpen" | "testId" | "zIndex" | "icon" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+    autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
+    isFocusLockEnabled?: boolean | undefined;
+    shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-    isFocusLockEnabled: boolean;
-    shouldReturnFocus: boolean;
-    autoFocusFirstElem: boolean;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "isOpen" | "testId" | "analyticsContext" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "zIndex" | "icon" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "analyticsContext" | "zIndex" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.0/components/primitives/drawer-wrapper.d.ts

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { ReactElement, Ref } from 'react';
+import { DrawerPrimitiveProps } from '../types';
+interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
+    /**
+     * This must have two children explicitly as we target the second child as the Content.
+     */
+    children: [
+        ReactElement,
+        ReactElement
+    ];
+    /**
+     * A ref pointing to our drawer wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
+     */
+    drawerRef: Ref<HTMLDivElement>;
+    /**
+     * The className coming from the SlideIn render callback.
+     */
+    className?: string;
+}
+/**
+ * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
+ */
+declare const DrawerWrapper: import("react").ForwardRefExoticComponent<FocusLockRefTargetProps & import("react").RefAttributes<HTMLElement>>;
+export default DrawerWrapper;

package/dist/types-ts4.0/components/primitives/focus-lock.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+import { FocusLockProps } from '../types';
+export default class FocusLock extends Component<FocusLockProps> {
+    static defaultProps: {
+        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
+        isFocusLockEnabled?: boolean | undefined;
+        shouldReturnFocus?: boolean | undefined;
+    };
+    componentDidMount(): void;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/components/primitives/hooks/use-prevent-programmatic-scroll.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Prevents programmatic scrolling of the viewport with `scrollIntoView`.
+ * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
+ *
+ * ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
+ *
+ * @returns scroll top offset of the viewport
+ */
+export default function usePreventProgrammaticScroll(): number;

package/dist/types-ts4.0/components/primitives/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, ...props }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

package/dist/types-ts4.0/components/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode, SyntheticEvent } from 'react';
+import { ComponentType, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { CSSObject } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Widths = {
@@ -86,11 +86,11 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
     cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 export declare type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
-export interface DrawerPrimitiveProps extends BaseProps {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export declare type DrawerProps = BaseProps & FocusLockProps & WithAnalyticsEventsProps & {
+export declare type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -110,17 +110,13 @@ export declare type DrawerProps = BaseProps & FocusLockProps & WithAnalyticsEven
      */
     zIndex?: number;
 };
-export interface FocusLockProps {
+export interface FocusLockSettings {
     /**
      * Controls whether to focus the first tabbable element inside the focus lock.
      */
     autoFocusFirstElem?: boolean | (() => HTMLElement | null);
     /**
-     * Content inside the focus lock.
-     */
-    children?: ReactNode;
-    /**
-     *  Whether the focus lock is active or not.
+     * Whether the focus lock is active or not.
      */
     isFocusLockEnabled?: boolean;
     /**
@@ -128,6 +124,13 @@ export interface FocusLockProps {
      */
     shouldReturnFocus?: boolean;
 }
+export interface FocusLockProps extends FocusLockSettings {
+    /**
+     * Content inside the focus lock.
+     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
+     */
+    children?: ReactElement;
+}
 /**
  * Type of keyboard event that triggers which key will should close the drawer.
  */

package/dist/types-ts4.0/constants.d.ts

@@ -1,6 +1,7 @@
-import type { DrawerWidth } from './components/types';
+import type { DrawerWidth, FocusLockSettings } from './components/types';
 export declare const transitionDuration = "0.22s";
 export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;
+export declare const defaultFocusLockSettings: FocusLockSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.3.1",
+  "version": "7.4.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,27 +37,30 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/blanket": "^12.3.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/motion": "^1.2.0",
+    "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "bind-event-listener": "^2.1.1",
     "exenv": "^1.2.2",
     "react-focus-lock": "^2.5.2",
-    "tiny-invariant": "^1.2.0"
+    "react-scrolllock": "^5.0.1",
+    "tiny-invariant": "^1.2.0",
+    "use-callback-ref": "^1.2.3"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/menu": "^1.3.0",
+    "@atlaskit/menu": "^1.4.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/drawer".
+## API Report File for "@atlaskit/drawer"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -13,57 +17,33 @@ import { SyntheticEvent } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { WithContextProps } from '@atlaskit/analytics-next';
 
-export declare interface BaseProps {
-  /**
-   * A unique hook to be used for testing.
-   */
-  testId?: string;
-  /**
-   * The content of the drawer.
-   */
+// @public (undocumented)
+export interface BaseProps {
   children?: ReactNode;
-  /**
-   * Icon to be rendered in your drawer as a component, if available.
-   */
   icon?: ComponentType<any>;
-  /**
-   * Available drawer sizes.
-   */
-  width?: DrawerWidth;
-  /**
-   * A callback function that will be called when the drawer has finished its opening transition.
-   */
-  onOpenComplete?: (node: HTMLElement | null) => void;
-  /**
-   * A callback function that will be called when the drawer has finished its close transition.
-   */
   onCloseComplete?: (node: HTMLElement | null) => void;
-  /**
-   * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release.
-   * Boolean that controls if drawer should be retained/discarded
-   */
-  shouldUnmountOnExit?: boolean;
-  /**
-   * Override drawer components.
-   */
+  onOpenComplete?: (node: HTMLElement | null) => void;
   overrides?: OverridesType;
+  // @deprecated (undocumented)
+  shouldUnmountOnExit?: boolean;
+  testId?: string;
+  width?: DrawerWidth;
 }
 
-/**
- * Type of keyboard event that triggers which key will should close the drawer.
- */
-export declare type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
+// @public
+export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
 
-export declare type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
+// @public (undocumented)
+export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
 
-export declare interface ContentProps extends React.HTMLProps<HTMLDivElement> {
-  /**
-   * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
-   */
+// @public (undocumented)
+export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
+  // @deprecated (undocumented)
   cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 
-declare const _default: React_2.ForwardRefExoticComponent<
+// @public (undocumented)
+const _default: React_2.ForwardRefExoticComponent<
   Pick<
     Pick<
       Omit<DrawerProps, keyof WithAnalyticsEventsProps>,
@@ -123,7 +103,8 @@ declare const _default: React_2.ForwardRefExoticComponent<
 >;
 export default _default;
 
-export declare type DefaultsType = {
+// @public (undocumented)
+export type DefaultsType = {
   Sidebar: {
     component: React.ComponentType<SidebarProps>;
     cssFn: (defaultStyles: CSSObject) => CSSObject;
@@ -134,97 +115,67 @@ export declare type DefaultsType = {
   };
 };
 
-export declare type DrawerPrimitiveDefaults = Pick<
-  DefaultsType,
-  'Sidebar' | 'Content'
->;
+// @public (undocumented)
+export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Sidebar' | 'Content'>;
 
-export declare type DrawerPrimitiveOverrides = Pick<
+// @public (undocumented)
+export type DrawerPrimitiveOverrides = Pick<
   OverridesType,
   'Sidebar' | 'Content'
 >;
 
-export declare interface DrawerPrimitiveProps extends BaseProps {
+// @public (undocumented)
+export interface DrawerPrimitiveProps extends BaseProps {
+  // (undocumented)
   in: boolean;
+  // (undocumented)
   onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
 
-export declare type DrawerProps = BaseProps &
+// @public (undocumented)
+export type DrawerProps = BaseProps &
   FocusLockProps &
   WithAnalyticsEventsProps & {
-    /**
-     * Callback function called while the drawer is displayed and `keydown` event is triggered.
-     */
     onKeyDown?: (event: SyntheticEvent) => void;
-    /**
-     * Callback function called when the drawer is closed.
-     */
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
-    /**
-     * Controls if the drawer is open or closed.
-     */
     isOpen: boolean;
-    /**
-     * Z-index that the popup should be displayed in.
-     * This is passed to the portal component.
-     * Defaults to `unset`.
-     */
     zIndex?: number;
   };
 
-export declare type DrawerWidth =
-  | 'extended'
-  | 'full'
-  | 'medium'
-  | 'narrow'
-  | 'wide';
-
-export declare interface FocusLockProps {
-  /**
-   * Controls whether to focus the first tabbable element inside the focus lock.
-   */
+// @public (undocumented)
+export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
+
+// @public (undocumented)
+export interface FocusLockProps {
   autoFocusFirstElem?: boolean | (() => HTMLElement | null);
-  /**
-   * Content inside the focus lock.
-   */
   children?: ReactNode;
-  /**
-   *  Whether the focus lock is active or not.
-   */
   isFocusLockEnabled?: boolean;
-  /**
-   * Whether to return the focus to the previous active element on closing the drawer.
-   */
   shouldReturnFocus?: boolean;
 }
 
-export declare type OverridesType = {
+// @public (undocumented)
+export type OverridesType = {
   Sidebar?: {
     component?: React.ComponentType<SidebarProps>;
-    /**
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
-     */
     cssFn?: (defaultStyles: CSSObject) => CSSObject;
   };
   Content?: {
     component?: React.ComponentType<ContentProps>;
-    /**
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
-     */
     cssFn?: (defaultStyles: CSSObject) => CSSObject;
   };
 };
 
-export declare type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
+// @public (undocumented)
+export type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
 
-export declare interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
-  /**
-   * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
-   */
+// @public (undocumented)
+export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
+  // @deprecated (undocumented)
   cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 
-export declare type Widths = {
+// @public (undocumented)
+export type Widths = {
   extended: string;
   full: string;
   medium: number;
@@ -232,5 +183,5 @@ export declare type Widths = {
   wide: number;
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types/components/focus-lock.d.ts

@@ -1,6 +0,0 @@
-import { Component } from 'react';
-import { FocusLockProps } from './types';
-export default class FocusLock extends Component<FocusLockProps> {
-    componentDidMount(): void;
-    render(): JSX.Element;
-}

package/dist/types-ts4.0/components/focus-lock.d.ts

@@ -1,6 +0,0 @@
-import { Component } from 'react';
-import { FocusLockProps } from './types';
-export default class FocusLock extends Component<FocusLockProps> {
-    componentDidMount(): void;
-    render(): JSX.Element;
-}