@atlaskit/drawer 7.5.1 → 7.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/index.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types-ts4.5/components/blanket.d.ts +13 -0
- package/dist/types-ts4.5/components/index.d.ts +31 -0
- package/dist/types-ts4.5/components/primitives/content.d.ts +8 -0
- package/dist/types-ts4.5/components/primitives/drawer-wrapper.d.ts +26 -0
- package/dist/types-ts4.5/components/primitives/focus-lock.d.ts +11 -0
- package/dist/types-ts4.5/components/primitives/hooks/use-prevent-programmatic-scroll.d.ts +9 -0
- package/dist/types-ts4.5/components/primitives/icon-button.d.ts +9 -0
- package/dist/types-ts4.5/components/primitives/index.d.ts +5 -0
- package/dist/types-ts4.5/components/primitives/sidebar.d.ts +9 -0
- package/dist/types-ts4.5/components/types.d.ts +147 -0
- package/dist/types-ts4.5/components/utils.d.ts +7 -0
- package/dist/types-ts4.5/constants.d.ts +7 -0
- package/dist/types-ts4.5/index.d.ts +2 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
27
27
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
28
28
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
|
|
29
29
|
var packageName = "@atlaskit/drawer";
|
|
30
|
-
var packageVersion = "7.5.
|
|
30
|
+
var packageVersion = "7.5.2";
|
|
31
31
|
var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
|
|
32
32
|
var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
|
|
33
33
|
return createAndFireEventOnAtlaskit({
|
package/dist/cjs/version.json
CHANGED
|
@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
|
|
|
8
8
|
import Blanket from './blanket';
|
|
9
9
|
import DrawerPrimitive from './primitives';
|
|
10
10
|
const packageName = "@atlaskit/drawer";
|
|
11
|
-
const packageVersion = "7.5.
|
|
11
|
+
const packageVersion = "7.5.2";
|
|
12
12
|
const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
13
13
|
const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
|
|
14
14
|
action: 'dismissed',
|
package/dist/es2019/version.json
CHANGED
|
@@ -18,7 +18,7 @@ import { defaultFocusLockSettings } from '../constants';
|
|
|
18
18
|
import Blanket from './blanket';
|
|
19
19
|
import DrawerPrimitive from './primitives';
|
|
20
20
|
var packageName = "@atlaskit/drawer";
|
|
21
|
-
var packageVersion = "7.5.
|
|
21
|
+
var packageVersion = "7.5.2";
|
|
22
22
|
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
23
23
|
var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
|
|
24
24
|
return createAndFireEventOnAtlaskit({
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
type BlanketProps = {
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
7
|
+
testId?: string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
|
|
11
|
+
*/
|
|
12
|
+
declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => jsx.JSX.Element;
|
|
13
|
+
export default Blanket;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React, { Component } from 'react';
|
|
2
|
+
import { DrawerProps, DrawerWidth } from './types';
|
|
3
|
+
export declare class DrawerBase extends Component<DrawerProps, {
|
|
4
|
+
renderPortal: boolean;
|
|
5
|
+
}> {
|
|
6
|
+
static defaultProps: {
|
|
7
|
+
autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
|
|
8
|
+
isFocusLockEnabled?: boolean | undefined;
|
|
9
|
+
shouldReturnFocus?: boolean | undefined;
|
|
10
|
+
width: DrawerWidth;
|
|
11
|
+
};
|
|
12
|
+
state: {
|
|
13
|
+
renderPortal: boolean;
|
|
14
|
+
};
|
|
15
|
+
body: HTMLBodyElement | null | undefined;
|
|
16
|
+
componentDidMount(): void;
|
|
17
|
+
componentWillUnmount(): void;
|
|
18
|
+
componentDidUpdate(prevProps: DrawerProps): void;
|
|
19
|
+
private handleBlanketClick;
|
|
20
|
+
private handleBackButtonClick;
|
|
21
|
+
private handleClose;
|
|
22
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
23
|
+
render(): JSX.Element | null;
|
|
24
|
+
}
|
|
25
|
+
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<{
|
|
26
|
+
autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
|
|
27
|
+
isFocusLockEnabled?: boolean | undefined;
|
|
28
|
+
shouldReturnFocus?: boolean | undefined;
|
|
29
|
+
width: DrawerWidth;
|
|
30
|
+
}, 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>>;
|
|
31
|
+
export default _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { ReactElement, Ref } from 'react';
|
|
3
|
+
import { DrawerPrimitiveProps, Widths } from '../types';
|
|
4
|
+
export declare const wrapperWidth: Widths;
|
|
5
|
+
interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
|
|
6
|
+
/**
|
|
7
|
+
* This must have two children explicitly as we target the second child as the Content.
|
|
8
|
+
*/
|
|
9
|
+
children: [
|
|
10
|
+
ReactElement,
|
|
11
|
+
ReactElement
|
|
12
|
+
];
|
|
13
|
+
/**
|
|
14
|
+
* A ref pointing to our drawer wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
|
|
15
|
+
*/
|
|
16
|
+
drawerRef: Ref<HTMLDivElement>;
|
|
17
|
+
/**
|
|
18
|
+
* The className coming from the SlideIn render callback.
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
|
|
24
|
+
*/
|
|
25
|
+
declare const DrawerWrapper: import("react").ForwardRefExoticComponent<FocusLockRefTargetProps & import("react").RefAttributes<HTMLElement>>;
|
|
26
|
+
export default DrawerWrapper;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component } from 'react';
|
|
2
|
+
import { FocusLockProps } from '../types';
|
|
3
|
+
export default class FocusLock extends Component<FocusLockProps> {
|
|
4
|
+
static defaultProps: {
|
|
5
|
+
autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
|
|
6
|
+
isFocusLockEnabled?: boolean | undefined;
|
|
7
|
+
shouldReturnFocus?: boolean | undefined;
|
|
8
|
+
};
|
|
9
|
+
componentDidMount(): void;
|
|
10
|
+
render(): JSX.Element;
|
|
11
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Prevents programmatic scrolling of the viewport with `scrollIntoView`.
|
|
3
|
+
* Should be used in conjunction with a scroll lock to prevent a user from scrolling.
|
|
4
|
+
*
|
|
5
|
+
* ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
|
|
6
|
+
*
|
|
7
|
+
* @returns scroll top offset of the viewport
|
|
8
|
+
*/
|
|
9
|
+
export default function usePreventProgrammaticScroll(): number;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { FC, MouseEventHandler, ReactNode } from 'react';
|
|
3
|
+
interface IconButtonProps {
|
|
4
|
+
testId?: string;
|
|
5
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const IconButton: FC<IconButtonProps>;
|
|
9
|
+
export default IconButton;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { jsx } from '@emotion/react';
|
|
3
|
+
import { DrawerPrimitiveProps } from '../types';
|
|
4
|
+
declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
|
|
5
|
+
export default DrawerPrimitive;
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { ComponentType, ReactElement, ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
import { CSSObject } from '@emotion/react';
|
|
3
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
4
|
+
export type Widths = {
|
|
5
|
+
extended: {
|
|
6
|
+
width: string;
|
|
7
|
+
};
|
|
8
|
+
full: {
|
|
9
|
+
width: string;
|
|
10
|
+
};
|
|
11
|
+
medium: {
|
|
12
|
+
width: number;
|
|
13
|
+
};
|
|
14
|
+
narrow: {
|
|
15
|
+
width: number;
|
|
16
|
+
};
|
|
17
|
+
wide: {
|
|
18
|
+
width: number;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
|
|
22
|
+
export interface BaseProps {
|
|
23
|
+
/**
|
|
24
|
+
* A unique hook to be used for testing.
|
|
25
|
+
*/
|
|
26
|
+
testId?: string;
|
|
27
|
+
/**
|
|
28
|
+
* The content of the drawer.
|
|
29
|
+
*/
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Icon to be rendered in your drawer as a component, if available.
|
|
33
|
+
*/
|
|
34
|
+
icon?: ComponentType<any>;
|
|
35
|
+
/**
|
|
36
|
+
* Available drawer sizes.
|
|
37
|
+
*/
|
|
38
|
+
width?: DrawerWidth;
|
|
39
|
+
/**
|
|
40
|
+
* A callback function that will be called when the drawer has finished its opening transition.
|
|
41
|
+
*/
|
|
42
|
+
onOpenComplete?: (node: HTMLElement | null) => void;
|
|
43
|
+
/**
|
|
44
|
+
* A callback function that will be called when the drawer has finished its close transition.
|
|
45
|
+
*/
|
|
46
|
+
onCloseComplete?: (node: HTMLElement | null) => void;
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release.
|
|
49
|
+
* Boolean that controls if drawer should be retained/discarded
|
|
50
|
+
*/
|
|
51
|
+
shouldUnmountOnExit?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Override drawer components.
|
|
54
|
+
*/
|
|
55
|
+
overrides?: OverridesType;
|
|
56
|
+
}
|
|
57
|
+
export type DefaultsType = {
|
|
58
|
+
Sidebar: {
|
|
59
|
+
component: React.ComponentType<SidebarProps>;
|
|
60
|
+
cssFn: (defaultStyles: CSSObject) => CSSObject;
|
|
61
|
+
};
|
|
62
|
+
Content: {
|
|
63
|
+
component: React.ComponentType<ContentProps>;
|
|
64
|
+
cssFn: (defaultStyles: CSSObject) => CSSObject;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
export type OverridesType = {
|
|
68
|
+
Sidebar?: {
|
|
69
|
+
component?: React.ComponentType<SidebarProps>;
|
|
70
|
+
/**
|
|
71
|
+
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
|
|
72
|
+
*/
|
|
73
|
+
cssFn?: (defaultStyles: CSSObject) => CSSObject;
|
|
74
|
+
};
|
|
75
|
+
Content?: {
|
|
76
|
+
component?: React.ComponentType<ContentProps>;
|
|
77
|
+
/**
|
|
78
|
+
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
|
|
79
|
+
*/
|
|
80
|
+
cssFn?: (defaultStyles: CSSObject) => CSSObject;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Sidebar' | 'Content'>;
|
|
84
|
+
export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Sidebar' | 'Content'>;
|
|
85
|
+
export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
|
|
86
|
+
/**
|
|
87
|
+
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
|
|
88
|
+
*/
|
|
89
|
+
cssFn: (defaultStyles: CSSObject) => CSSObject;
|
|
90
|
+
}
|
|
91
|
+
export type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
|
|
92
|
+
export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
|
|
93
|
+
/**
|
|
94
|
+
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
|
|
95
|
+
*/
|
|
96
|
+
cssFn: (defaultStyles: CSSObject) => CSSObject;
|
|
97
|
+
}
|
|
98
|
+
export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
|
|
99
|
+
export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
|
|
100
|
+
in: boolean;
|
|
101
|
+
onClose: (event: SyntheticEvent<HTMLElement>) => void;
|
|
102
|
+
}
|
|
103
|
+
export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
|
|
104
|
+
/**
|
|
105
|
+
* Callback function called while the drawer is displayed and `keydown` event is triggered.
|
|
106
|
+
*/
|
|
107
|
+
onKeyDown?: (event: SyntheticEvent) => void;
|
|
108
|
+
/**
|
|
109
|
+
* Callback function called when the drawer is closed.
|
|
110
|
+
*/
|
|
111
|
+
onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
|
|
112
|
+
/**
|
|
113
|
+
* Controls if the drawer is open or closed.
|
|
114
|
+
*/
|
|
115
|
+
isOpen: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Z-index that the popup should be displayed in.
|
|
118
|
+
* This is passed to the portal component.
|
|
119
|
+
* Defaults to `unset`.
|
|
120
|
+
*/
|
|
121
|
+
zIndex?: number;
|
|
122
|
+
};
|
|
123
|
+
export interface FocusLockSettings {
|
|
124
|
+
/**
|
|
125
|
+
* Controls whether to focus the first tabbable element inside the focus lock.
|
|
126
|
+
*/
|
|
127
|
+
autoFocusFirstElem?: boolean | (() => HTMLElement | null);
|
|
128
|
+
/**
|
|
129
|
+
* Whether the focus lock is active or not.
|
|
130
|
+
*/
|
|
131
|
+
isFocusLockEnabled?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* Whether to return the focus to the previous active element on closing the drawer.
|
|
134
|
+
*/
|
|
135
|
+
shouldReturnFocus?: boolean;
|
|
136
|
+
}
|
|
137
|
+
export interface FocusLockProps extends FocusLockSettings {
|
|
138
|
+
/**
|
|
139
|
+
* Content inside the focus lock.
|
|
140
|
+
* Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
|
|
141
|
+
*/
|
|
142
|
+
children?: ReactElement;
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Type of keyboard event that triggers which key will should close the drawer.
|
|
146
|
+
*/
|
|
147
|
+
export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
type OverridesFunc<X extends Record<string, any>, Y extends Record<string, any>> = (key: string) => Record<string, any>;
|
|
2
|
+
export type ExtenderType = <D extends Record<string, any>, O extends Record<string, any>>(d: D, o?: O) => OverridesFunc<D, O>;
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Please avoid using this function as we intend to remote it in a future release. See DSP-2673 for more information.
|
|
5
|
+
*/
|
|
6
|
+
export declare const createExtender: ExtenderType;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { DrawerWidth, FocusLockSettings } from './components/types';
|
|
2
|
+
export declare const transitionDuration = "0.22s";
|
|
3
|
+
export declare const transitionDurationMs = 220;
|
|
4
|
+
export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
|
|
5
|
+
export declare const widths: DrawerWidth[];
|
|
6
|
+
export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;
|
|
7
|
+
export declare const defaultFocusLockSettings: FocusLockSettings;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { default } from './components';
|
|
2
|
+
export type { BaseProps, CloseTrigger, ContentCSSProps, ContentProps, DefaultsType, DrawerPrimitiveDefaults, DrawerPrimitiveOverrides, DrawerPrimitiveProps, DrawerProps, DrawerWidth, FocusLockProps, OverridesType, SidebarCSSProps, SidebarProps, Widths, } from './components/types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/drawer",
|
|
3
|
-
"version": "7.5.
|
|
3
|
+
"version": "7.5.2",
|
|
4
4
|
"description": "A drawer is a panel that slides in from the left side of the screen.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"@atlaskit/checkbox": "^12.6.0",
|
|
59
59
|
"@atlaskit/code": "^14.6.0",
|
|
60
60
|
"@atlaskit/docs": "*",
|
|
61
|
-
"@atlaskit/dropdown-menu": "^11.
|
|
61
|
+
"@atlaskit/dropdown-menu": "^11.9.0",
|
|
62
62
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
63
|
-
"@atlaskit/menu": "^1.
|
|
63
|
+
"@atlaskit/menu": "^1.7.0",
|
|
64
64
|
"@atlaskit/modal-dialog": "^12.5.0",
|
|
65
65
|
"@atlaskit/section-message": "^6.4.0",
|
|
66
66
|
"@atlaskit/ssr": "*",
|