@atlaskit/drawer 10.1.4 → 11.0.0

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.
Files changed (120) hide show
  1. package/CHANGELOG.md +15 -6
  2. package/dist/cjs/constants.js +2 -7
  3. package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-close-button.js +1 -1
  4. package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-content.js +2 -2
  5. package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-panel.js +1 -1
  6. package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.js +1 -1
  7. package/dist/cjs/{compiled/drawer.js → drawer.js} +3 -3
  8. package/dist/cjs/index.js +29 -3
  9. package/dist/es2019/constants.js +1 -6
  10. package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-close-button.js +1 -1
  11. package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-content.js +2 -2
  12. package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-panel.js +1 -1
  13. package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.js +1 -1
  14. package/dist/es2019/{compiled/drawer.js → drawer.js} +3 -3
  15. package/dist/es2019/index.js +5 -1
  16. package/dist/esm/constants.js +1 -6
  17. package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-close-button.js +1 -1
  18. package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-content.js +2 -2
  19. package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-panel.js +1 -1
  20. package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.js +1 -1
  21. package/dist/esm/{compiled/drawer.js → drawer.js} +3 -3
  22. package/dist/esm/index.js +5 -1
  23. package/dist/types/constants.d.ts +1 -2
  24. package/dist/types/index.d.ts +6 -2
  25. package/dist/types/{compiled/types.d.ts → types.d.ts} +1 -2
  26. package/dist/types-ts4.5/constants.d.ts +1 -2
  27. package/dist/types-ts4.5/index.d.ts +6 -2
  28. package/dist/types-ts4.5/{compiled/types.d.ts → types.d.ts} +1 -2
  29. package/package.json +5 -8
  30. package/compiled/package.json +0 -17
  31. package/dist/cjs/components/blanket.js +0 -62
  32. package/dist/cjs/components/index.js +0 -148
  33. package/dist/cjs/components/primitives/content.js +0 -69
  34. package/dist/cjs/components/primitives/drawer-wrapper.js +0 -90
  35. package/dist/cjs/components/primitives/focus-lock.js +0 -60
  36. package/dist/cjs/components/primitives/index.js +0 -125
  37. package/dist/cjs/components/primitives/sidebar.js +0 -45
  38. package/dist/cjs/components/types.js +0 -5
  39. package/dist/cjs/components/utils.js +0 -38
  40. package/dist/cjs/entry-points/compiled.js +0 -33
  41. package/dist/es2019/components/blanket.js +0 -53
  42. package/dist/es2019/components/index.js +0 -129
  43. package/dist/es2019/components/primitives/content.js +0 -56
  44. package/dist/es2019/components/primitives/drawer-wrapper.js +0 -86
  45. package/dist/es2019/components/primitives/focus-lock.js +0 -49
  46. package/dist/es2019/components/primitives/index.js +0 -113
  47. package/dist/es2019/components/primitives/sidebar.js +0 -36
  48. package/dist/es2019/components/utils.js +0 -44
  49. package/dist/es2019/entry-points/compiled.js +0 -4
  50. package/dist/esm/compiled/types.js +0 -1
  51. package/dist/esm/components/blanket.js +0 -54
  52. package/dist/esm/components/index.js +0 -138
  53. package/dist/esm/components/primitives/content.js +0 -64
  54. package/dist/esm/components/primitives/drawer-wrapper.js +0 -82
  55. package/dist/esm/components/primitives/focus-lock.js +0 -51
  56. package/dist/esm/components/primitives/index.js +0 -117
  57. package/dist/esm/components/primitives/sidebar.js +0 -39
  58. package/dist/esm/components/types.js +0 -1
  59. package/dist/esm/components/utils.js +0 -32
  60. package/dist/esm/entry-points/compiled.js +0 -4
  61. package/dist/types/components/blanket.d.ts +0 -16
  62. package/dist/types/components/index.d.ts +0 -13
  63. package/dist/types/components/primitives/content.d.ts +0 -11
  64. package/dist/types/components/primitives/drawer-wrapper.d.ts +0 -26
  65. package/dist/types/components/primitives/focus-lock.d.ts +0 -10
  66. package/dist/types/components/primitives/index.d.ts +0 -4
  67. package/dist/types/components/primitives/sidebar.d.ts +0 -12
  68. package/dist/types/components/types.d.ts +0 -172
  69. package/dist/types/components/utils.d.ts +0 -7
  70. package/dist/types/entry-points/compiled.d.ts +0 -5
  71. package/dist/types-ts4.5/components/blanket.d.ts +0 -16
  72. package/dist/types-ts4.5/components/index.d.ts +0 -13
  73. package/dist/types-ts4.5/components/primitives/content.d.ts +0 -11
  74. package/dist/types-ts4.5/components/primitives/drawer-wrapper.d.ts +0 -29
  75. package/dist/types-ts4.5/components/primitives/focus-lock.d.ts +0 -10
  76. package/dist/types-ts4.5/components/primitives/index.d.ts +0 -4
  77. package/dist/types-ts4.5/components/primitives/sidebar.d.ts +0 -12
  78. package/dist/types-ts4.5/components/types.d.ts +0 -172
  79. package/dist/types-ts4.5/components/utils.d.ts +0 -7
  80. package/dist/types-ts4.5/entry-points/compiled.d.ts +0 -5
  81. /package/dist/cjs/{compiled/blanket.compiled.css → blanket.compiled.css} +0 -0
  82. /package/dist/cjs/{compiled/blanket.js → blanket.js} +0 -0
  83. /package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-content.compiled.css +0 -0
  84. /package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-panel.compiled.css +0 -0
  85. /package/dist/cjs/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.compiled.css +0 -0
  86. /package/dist/cjs/{compiled/drawer-panel → drawer-panel}/focus-lock.js +0 -0
  87. /package/dist/cjs/{hooks → drawer-panel/hooks}/use-prevent-programmatic-scroll.js +0 -0
  88. /package/dist/cjs/{compiled/types.js → types.js} +0 -0
  89. /package/dist/es2019/{compiled/blanket.compiled.css → blanket.compiled.css} +0 -0
  90. /package/dist/es2019/{compiled/blanket.js → blanket.js} +0 -0
  91. /package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-content.compiled.css +0 -0
  92. /package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-panel.compiled.css +0 -0
  93. /package/dist/es2019/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.compiled.css +0 -0
  94. /package/dist/es2019/{compiled/drawer-panel → drawer-panel}/focus-lock.js +0 -0
  95. /package/dist/es2019/{hooks → drawer-panel/hooks}/use-prevent-programmatic-scroll.js +0 -0
  96. /package/dist/es2019/{compiled/types.js → types.js} +0 -0
  97. /package/dist/esm/{compiled/blanket.compiled.css → blanket.compiled.css} +0 -0
  98. /package/dist/esm/{compiled/blanket.js → blanket.js} +0 -0
  99. /package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-content.compiled.css +0 -0
  100. /package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-panel.compiled.css +0 -0
  101. /package/dist/esm/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.compiled.css +0 -0
  102. /package/dist/esm/{compiled/drawer-panel → drawer-panel}/focus-lock.js +0 -0
  103. /package/dist/esm/{hooks → drawer-panel/hooks}/use-prevent-programmatic-scroll.js +0 -0
  104. /package/dist/{es2019/components → esm}/types.js +0 -0
  105. /package/dist/types/{compiled/blanket.d.ts → blanket.d.ts} +0 -0
  106. /package/dist/types/{compiled/drawer-panel → drawer-panel}/drawer-close-button.d.ts +0 -0
  107. /package/dist/types/{compiled/drawer-panel → drawer-panel}/drawer-content.d.ts +0 -0
  108. /package/dist/types/{compiled/drawer-panel → drawer-panel}/drawer-panel.d.ts +0 -0
  109. /package/dist/types/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.d.ts +0 -0
  110. /package/dist/types/{compiled/drawer-panel → drawer-panel}/focus-lock.d.ts +0 -0
  111. /package/dist/types/{hooks → drawer-panel/hooks}/use-prevent-programmatic-scroll.d.ts +0 -0
  112. /package/dist/types/{compiled/drawer.d.ts → drawer.d.ts} +0 -0
  113. /package/dist/types-ts4.5/{compiled/blanket.d.ts → blanket.d.ts} +0 -0
  114. /package/dist/types-ts4.5/{compiled/drawer-panel → drawer-panel}/drawer-close-button.d.ts +0 -0
  115. /package/dist/types-ts4.5/{compiled/drawer-panel → drawer-panel}/drawer-content.d.ts +0 -0
  116. /package/dist/types-ts4.5/{compiled/drawer-panel → drawer-panel}/drawer-panel.d.ts +0 -0
  117. /package/dist/types-ts4.5/{compiled/drawer-panel → drawer-panel}/drawer-sidebar.d.ts +0 -0
  118. /package/dist/types-ts4.5/{compiled/drawer-panel → drawer-panel}/focus-lock.d.ts +0 -0
  119. /package/dist/types-ts4.5/{hooks → drawer-panel/hooks}/use-prevent-programmatic-scroll.d.ts +0 -0
  120. /package/dist/types-ts4.5/{compiled/drawer.d.ts → drawer.d.ts} +0 -0
@@ -1,172 +0,0 @@
1
- import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
2
- import { type CSSObject } from '@emotion/react';
3
- import { type Direction } from '@atlaskit/motion';
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 `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
25
- */
26
- testId?: string;
27
- /**
28
- * The content of the drawer.
29
- */
30
- children?: ReactNode;
31
- /**
32
- * Use this to render an icon for the drawer close/back control, if it's available.
33
- */
34
- icon?: ComponentType<any>;
35
- /**
36
- * This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
37
- */
38
- closeLabel?: string;
39
- /**
40
- * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
41
- */
42
- scrollContentLabel?: ContentProps['scrollContentLabel'];
43
- /**
44
- * Sets the width of the drawer.
45
- */
46
- width?: DrawerWidth;
47
- /**
48
- * Sets the direction the draw enters from. The default is "left".
49
- */
50
- enterFrom?: Direction;
51
- /**
52
- * A callback function that will be called when the drawer has finished its opening transition.
53
- */
54
- onOpenComplete?: (node: HTMLElement | null) => void;
55
- /**
56
- * A callback function that will be called when the drawer has finished its close transition.
57
- */
58
- onCloseComplete?: (node: HTMLElement | null) => void;
59
- /**
60
- * Avoid overrides whenever possible. The `overrides` prop allows granular customisation of the drawer. Both the sidebar and content components can be overridden.
61
- */
62
- overrides?: OverridesType;
63
- }
64
- export interface DrawerLabel {
65
- /**
66
- * This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.
67
- * Usage of either this, or the `titleId` attribute is strongly recommended.
68
- */
69
- label?: string;
70
- /**
71
- * This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.
72
- * Usage of either this, or the `label` attribute is strongly recommended.
73
- */
74
- titleId?: string;
75
- }
76
- export type DefaultsType = {
77
- Sidebar: {
78
- component: React.ComponentType<SidebarProps>;
79
- cssFn: (defaultStyles: CSSObject) => CSSObject;
80
- };
81
- Content: {
82
- component: React.ComponentType<ContentProps>;
83
- cssFn: (defaultStyles: CSSObject) => CSSObject;
84
- };
85
- };
86
- export type OverridesType = {
87
- Sidebar?: {
88
- component?: React.ComponentType<SidebarProps>;
89
- /**
90
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
91
- */
92
- cssFn?: (defaultStyles: CSSObject) => CSSObject;
93
- };
94
- Content?: {
95
- component?: React.ComponentType<ContentProps>;
96
- /**
97
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
98
- */
99
- cssFn?: (defaultStyles: CSSObject) => CSSObject;
100
- };
101
- };
102
- export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Sidebar' | 'Content'>;
103
- export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Sidebar' | 'Content'>;
104
- export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
105
- /**
106
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
107
- */
108
- cssFn: (defaultStyles: CSSObject) => CSSObject;
109
- }
110
- export type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
111
- export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
112
- /**
113
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
114
- */
115
- cssFn: (defaultStyles: CSSObject) => CSSObject;
116
- /**
117
- * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
118
- */
119
- scrollContentLabel?: string;
120
- }
121
- export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
122
- export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
123
- in: boolean;
124
- onClose: (event: SyntheticEvent<HTMLElement>) => void;
125
- }
126
- export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
127
- /**
128
- * Callback function called while the drawer is displayed and `keydown` event is triggered.
129
- */
130
- onKeyDown?: (event: SyntheticEvent) => void;
131
- /**
132
- * Callback function called when the drawer is closed.
133
- */
134
- onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
135
- /**
136
- * Controls if the drawer is open or closed.
137
- */
138
- isOpen: boolean;
139
- /**
140
- * Z-index that the popup should be displayed in.
141
- * This is passed to the portal component.
142
- * Defaults to `unset`.
143
- */
144
- zIndex?: number | 'unset';
145
- };
146
- export interface FocusLockSettings {
147
- /**
148
- * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
149
- */
150
- autoFocusFirstElem?: boolean | (() => HTMLElement | null);
151
- /**
152
- * Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.
153
- */
154
- isFocusLockEnabled?: boolean;
155
- /**
156
- * ReturnFocus controls what happens when the user exits focus lock mode.
157
- * If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
158
- * If ref is passed, focus returns to that specific ref element.
159
- */
160
- shouldReturnFocus?: boolean | RefObject<HTMLElement>;
161
- }
162
- export interface FocusLockProps extends FocusLockSettings {
163
- /**
164
- * Content inside the focus lock.
165
- * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
166
- */
167
- children?: ReactElement;
168
- }
169
- /**
170
- * Type of keyboard event that triggers which key will should close the drawer.
171
- */
172
- export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
@@ -1,7 +0,0 @@
1
- type OverridesFunc<X extends Record<string, any>, Y extends Record<string, any>> = (key: string) => Record<string, any>;
2
- 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 {};
@@ -1,5 +0,0 @@
1
- export { Drawer } from '../compiled/drawer';
2
- export { DrawerContent } from '../compiled/drawer-panel/drawer-content';
3
- export { DrawerSidebar } from '../compiled/drawer-panel/drawer-sidebar';
4
- export { DrawerCloseButton } from '../compiled/drawer-panel/drawer-close-button';
5
- export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from '../compiled/types';
@@ -1,16 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { jsx } from '@emotion/react';
7
- type BlanketProps = {
8
- isOpen: boolean;
9
- onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
10
- testId?: string;
11
- };
12
- /**
13
- * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
14
- */
15
- declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => jsx.JSX.Element;
16
- export default Blanket;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { type DrawerProps } from './types';
3
- /**
4
- * __Drawer__
5
- *
6
- * A drawer is a panel that slides in from the left side of the screen.
7
- *
8
- * - [Examples](https://atlassian.design/components/drawer/examples)
9
- * - [Code](https://atlassian.design/components/drawer/code)
10
- * - [Usage](https://atlassian.design/components/drawer/usage)
11
- */
12
- declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, onClose, testId, children, icon, closeLabel, scrollContentLabel, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => React.JSX.Element | null;
13
- export default Drawer;
@@ -1,11 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type CSSObject, jsx } from '@emotion/react';
6
- import { type ContentProps } from '../types';
7
- declare const contentDefaults: {
8
- component: ({ cssFn, scrollContentLabel, ...props }: ContentProps) => jsx.JSX.Element;
9
- cssFn: () => CSSObject;
10
- };
11
- export default contentDefaults;
@@ -1,29 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactElement, type Ref } from 'react';
6
- import { type DrawerPrimitiveProps, type Widths } from '../types';
7
- export declare const wrapperWidth: Widths;
8
- interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
9
- /**
10
- * This must have two children explicitly as we target the second child as the Content.
11
- */
12
- children: [
13
- ReactElement,
14
- ReactElement
15
- ];
16
- /**
17
- * A ref pointing to our drawer wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
18
- */
19
- drawerRef: Ref<HTMLDivElement>;
20
- /**
21
- * The className coming from the SlideIn render callback.
22
- */
23
- className?: string;
24
- }
25
- /**
26
- * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
27
- */
28
- declare const DrawerWrapper: import("react").ForwardRefExoticComponent<FocusLockRefTargetProps & import("react").RefAttributes<HTMLElement>>;
29
- export default DrawerWrapper;
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { type FocusLockProps } from '../types';
3
- /**
4
- * __Focus lock__
5
- *
6
- * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
7
- * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
8
- */
9
- declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => React.JSX.Element;
10
- export default FocusLock;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { type DrawerPrimitiveProps } from '../types';
3
- declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, enterFrom, }: DrawerPrimitiveProps) => React.JSX.Element;
4
- export default DrawerPrimitive;
@@ -1,12 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type FC } from 'react';
6
- import { type CSSObject } from '@emotion/react';
7
- import { type SidebarProps } from '../types';
8
- declare const sidebarDefaults: {
9
- component: FC<SidebarProps>;
10
- cssFn: () => CSSObject;
11
- };
12
- export default sidebarDefaults;
@@ -1,172 +0,0 @@
1
- import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
2
- import { type CSSObject } from '@emotion/react';
3
- import { type Direction } from '@atlaskit/motion';
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 `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
25
- */
26
- testId?: string;
27
- /**
28
- * The content of the drawer.
29
- */
30
- children?: ReactNode;
31
- /**
32
- * Use this to render an icon for the drawer close/back control, if it's available.
33
- */
34
- icon?: ComponentType<any>;
35
- /**
36
- * This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
37
- */
38
- closeLabel?: string;
39
- /**
40
- * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
41
- */
42
- scrollContentLabel?: ContentProps['scrollContentLabel'];
43
- /**
44
- * Sets the width of the drawer.
45
- */
46
- width?: DrawerWidth;
47
- /**
48
- * Sets the direction the draw enters from. The default is "left".
49
- */
50
- enterFrom?: Direction;
51
- /**
52
- * A callback function that will be called when the drawer has finished its opening transition.
53
- */
54
- onOpenComplete?: (node: HTMLElement | null) => void;
55
- /**
56
- * A callback function that will be called when the drawer has finished its close transition.
57
- */
58
- onCloseComplete?: (node: HTMLElement | null) => void;
59
- /**
60
- * Avoid overrides whenever possible. The `overrides` prop allows granular customisation of the drawer. Both the sidebar and content components can be overridden.
61
- */
62
- overrides?: OverridesType;
63
- }
64
- export interface DrawerLabel {
65
- /**
66
- * This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.
67
- * Usage of either this, or the `titleId` attribute is strongly recommended.
68
- */
69
- label?: string;
70
- /**
71
- * This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.
72
- * Usage of either this, or the `label` attribute is strongly recommended.
73
- */
74
- titleId?: string;
75
- }
76
- export type DefaultsType = {
77
- Sidebar: {
78
- component: React.ComponentType<SidebarProps>;
79
- cssFn: (defaultStyles: CSSObject) => CSSObject;
80
- };
81
- Content: {
82
- component: React.ComponentType<ContentProps>;
83
- cssFn: (defaultStyles: CSSObject) => CSSObject;
84
- };
85
- };
86
- export type OverridesType = {
87
- Sidebar?: {
88
- component?: React.ComponentType<SidebarProps>;
89
- /**
90
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
91
- */
92
- cssFn?: (defaultStyles: CSSObject) => CSSObject;
93
- };
94
- Content?: {
95
- component?: React.ComponentType<ContentProps>;
96
- /**
97
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
98
- */
99
- cssFn?: (defaultStyles: CSSObject) => CSSObject;
100
- };
101
- };
102
- export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Sidebar' | 'Content'>;
103
- export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Sidebar' | 'Content'>;
104
- export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
105
- /**
106
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
107
- */
108
- cssFn: (defaultStyles: CSSObject) => CSSObject;
109
- }
110
- export type SidebarCSSProps = Omit<SidebarProps, 'cssFn'>;
111
- export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
112
- /**
113
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
114
- */
115
- cssFn: (defaultStyles: CSSObject) => CSSObject;
116
- /**
117
- * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
118
- */
119
- scrollContentLabel?: string;
120
- }
121
- export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
122
- export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
123
- in: boolean;
124
- onClose: (event: SyntheticEvent<HTMLElement>) => void;
125
- }
126
- export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
127
- /**
128
- * Callback function called while the drawer is displayed and `keydown` event is triggered.
129
- */
130
- onKeyDown?: (event: SyntheticEvent) => void;
131
- /**
132
- * Callback function called when the drawer is closed.
133
- */
134
- onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
135
- /**
136
- * Controls if the drawer is open or closed.
137
- */
138
- isOpen: boolean;
139
- /**
140
- * Z-index that the popup should be displayed in.
141
- * This is passed to the portal component.
142
- * Defaults to `unset`.
143
- */
144
- zIndex?: number | 'unset';
145
- };
146
- export interface FocusLockSettings {
147
- /**
148
- * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
149
- */
150
- autoFocusFirstElem?: boolean | (() => HTMLElement | null);
151
- /**
152
- * Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.
153
- */
154
- isFocusLockEnabled?: boolean;
155
- /**
156
- * ReturnFocus controls what happens when the user exits focus lock mode.
157
- * If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
158
- * If ref is passed, focus returns to that specific ref element.
159
- */
160
- shouldReturnFocus?: boolean | RefObject<HTMLElement>;
161
- }
162
- export interface FocusLockProps extends FocusLockSettings {
163
- /**
164
- * Content inside the focus lock.
165
- * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
166
- */
167
- children?: ReactElement;
168
- }
169
- /**
170
- * Type of keyboard event that triggers which key will should close the drawer.
171
- */
172
- export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
@@ -1,7 +0,0 @@
1
- type OverridesFunc<X extends Record<string, any>, Y extends Record<string, any>> = (key: string) => Record<string, any>;
2
- 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 {};
@@ -1,5 +0,0 @@
1
- export { Drawer } from '../compiled/drawer';
2
- export { DrawerContent } from '../compiled/drawer-panel/drawer-content';
3
- export { DrawerSidebar } from '../compiled/drawer-panel/drawer-sidebar';
4
- export { DrawerCloseButton } from '../compiled/drawer-panel/drawer-close-button';
5
- export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from '../compiled/types';
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes