@atlaskit/drawer 12.1.4 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/drawer
 
+## 13.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.4
 
 ### Patch Changes

package/dist/cjs/drawer.js

@@ -67,7 +67,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -90,7 +90,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -102,7 +102,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/es2019/drawer.js

@@ -52,7 +52,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -73,7 +73,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -83,7 +83,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/esm/drawer.js

@@ -57,7 +57,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -80,7 +80,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -92,7 +92,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "12.1.3",
+    packageVersion: "12.1.4",
     analyticsData: {
       trigger: 'backButton'
     }

package/drawer/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/drawer.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/drawer.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/drawer.d.ts"
 }

package/drawer-close-button/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/drawer-close-button.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/drawer-close-button.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/drawer-close-button.d.ts"
 }

package/drawer-content/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/drawer-content.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/drawer-content.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/drawer-content.d.ts"
 }

package/drawer-sidebar/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/drawer-sidebar.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/drawer-sidebar.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/drawer-sidebar.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "12.1.4",
+	"version": "13.0.0",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"**/*.compiled.css"
 	],
@@ -44,16 +36,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/blanket": "^15.0.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/icon": "^35.1.0",
-		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/motion": "^6.2.0",
-		"@atlaskit/portal": "^5.5.0",
-		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/blanket": "^16.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/layering": "^4.0.0",
+		"@atlaskit/motion": "^7.0.0",
+		"@atlaskit/portal": "^6.0.0",
+		"@atlaskit/theme": "^26.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -70,17 +62,17 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/code": "^17.5.0",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/dropdown-menu": "^16.9.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/inline-message": "^15.6.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^15.2.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/section-message": "^8.13.0",
+		"@atlaskit/code": "^18.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/dropdown-menu": "^17.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/form": "^16.0.0",
+		"@atlaskit/inline-message": "^16.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/menu": "^9.0.0",
+		"@atlaskit/modal-dialog": "^16.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/section-message": "^9.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/blanket.d.ts

@@ -1,15 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-type BlanketProps = {
-    isOpen: boolean;
-    onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    testId?: string;
-};
-/**
- * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
- */
-declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => JSX.Element;
-export default Blanket;

package/dist/types-ts4.5/drawer-panel/drawer-close-button.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type DrawerCloseButtonProps } from '../types';
-/**
- * __Drawer close button
- *
- * A button that closes the drawer.
- */
-export declare const DrawerCloseButton: ({ icon: Icon, label, testId, }: DrawerCloseButtonProps) => React.JSX.Element;

package/dist/types-ts4.5/drawer-panel/drawer-content.d.ts

@@ -1,11 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type DrawerContentProps } from '../types';
-/**
- * __Drawer content__
- *
- * The main content section of the drawer panel.
- */
-export declare const DrawerContent: ({ children, scrollContentLabel, xcss, }: DrawerContentProps) => JSX.Element;

package/dist/types-ts4.5/drawer-panel/drawer-panel.d.ts

@@ -1,9 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type DrawerPanelProps } from '../types';
-/**
- * __Drawer panel__
- */
-export declare const DrawerPanel: ({ children, onClose, onCloseComplete, onOpenComplete, testId, isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, enterFrom, }: DrawerPanelProps) => JSX.Element;

package/dist/types-ts4.5/drawer-panel/drawer-sidebar.d.ts

@@ -1,11 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type DrawerSidebarProps } from '../types';
-/**
- * __Drawer sidebar__
- *
- * The sidebar of the drawer panel.
- */
-export declare const DrawerSidebar: ({ children, xcss }: DrawerSidebarProps) => JSX.Element;

package/dist/types-ts4.5/drawer-panel/focus-lock.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type FocusLockProps } from '../types';
-/**
- * __Focus lock__
- *
- * Thin wrapper around react-focus-lock.
- */
-declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => React.JSX.Element;
-export default FocusLock;

package/dist/types-ts4.5/drawer-panel/hooks/use-prevent-programmatic-scroll.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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.5/drawer.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { DrawerProps } from './types';
-/**
- * __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)
- */
-export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, testId, children, onClose, onCloseComplete, onOpenComplete, zIndex, label, titleId, enterFrom, }: DrawerProps) => React.JSX.Element | null;

package/dist/types-ts4.5/ensure-is-inside-drawer-context.d.ts

@@ -1,7 +0,0 @@
-import { type Context } from 'react';
-/**
- * __Ensure is inside drawer context__
- *
- * An context that ensures that the component is inside a drawer.
- */
-export declare const EnsureIsInsideDrawerContext: Context<boolean>;

package/dist/types-ts4.5/entry-points/drawer-close-button.d.ts

@@ -1 +0,0 @@
-export { DrawerCloseButton } from '../drawer-panel/drawer-close-button';

package/dist/types-ts4.5/entry-points/drawer-content.d.ts

@@ -1 +0,0 @@
-export { DrawerContent } from '../drawer-panel/drawer-content';

package/dist/types-ts4.5/entry-points/drawer-sidebar.d.ts

@@ -1 +0,0 @@
-export { DrawerSidebar } from '../drawer-panel/drawer-sidebar';

package/dist/types-ts4.5/entry-points/drawer.d.ts

@@ -1 +0,0 @@
-export { Drawer, Drawer as default } from '../drawer';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -1,6 +0,0 @@
-import { Drawer } from './drawer';
-export { DrawerContent } from './drawer-panel/drawer-content';
-export { DrawerSidebar } from './drawer-panel/drawer-sidebar';
-export { DrawerCloseButton } from './drawer-panel/drawer-close-button';
-export { Drawer, Drawer as default };
-export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from './types';

package/dist/types-ts4.5/on-close-context.d.ts

@@ -1,7 +0,0 @@
-import { type Context, type SyntheticEvent } from 'react';
-/**
- * __On close context__
- *
- * An context that provides the on close function for the drawer.
- */
-export declare const OnCloseContext: Context<((event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void) | undefined>;

package/dist/types-ts4.5/types.d.ts

@@ -1,124 +0,0 @@
-import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
-import { type StrictXCSSProp } from '@atlaskit/css';
-import { type Direction } from '@atlaskit/motion';
-export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
-export interface BaseProps {
-    /**
-     * 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.
-     */
-    testId?: string;
-    /**
-     * The content of the drawer.
-     */
-    children?: ReactNode;
-    /**
-     * Sets the width of the drawer.
-     */
-    width?: DrawerWidth;
-    /**
-     * Sets the direction the draw enters from. The default is "left".
-     */
-    enterFrom?: Direction;
-    /**
-     * Controls if the drawer is open or closed.
-     */
-    isOpen: boolean;
-    /**
-     * 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;
-}
-export interface DrawerLabel {
-    /**
-     * This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.
-     * Usage of either this, or the `titleId` attribute is strongly recommended.
-     */
-    label?: string;
-    /**
-     * This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.
-     * Usage of either this, or the `label` attribute is strongly recommended.
-     */
-    titleId?: string;
-}
-export interface DrawerSidebarProps {
-    /**
-     * The content of the sidebar.
-     */
-    children?: ReactNode;
-    xcss?: StrictXCSSProp<'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'width', never>;
-}
-export interface DrawerContentProps {
-    /**
-     * The content of the drawer.
-     */
-    children?: ReactNode;
-    /**
-     * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
-     */
-    scrollContentLabel?: string;
-    xcss?: StrictXCSSProp<'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'marginTop' | 'backgroundColor' | 'marginBlockStart' | 'paddingInlineStart' | 'paddingInlineEnd' | 'marginBlockStart' | 'paddingBlockStart' | 'paddingInlineEnd' | 'paddingBlockEnd' | 'paddingInlineStart', never>;
-}
-export interface DrawerCloseButtonProps {
-    /**
-     * Use this to render an icon for the drawer close/back control, if it's available.
-     */
-    icon?: ComponentType<any>;
-    /**
-     * This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
-     */
-    label?: string;
-    /**
-     * 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.
-     */
-    testId?: string;
-}
-export interface DrawerPanelProps extends BaseProps, FocusLockSettings, DrawerLabel {
-    onClose: (event: SyntheticEvent<HTMLElement>) => void;
-}
-export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
-    /**
-     * 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;
-    /**
-     * Z-index that the popup should be displayed in.
-     * This is passed to the portal component.
-     * Defaults to `unset`.
-     */
-    zIndex?: number | 'unset';
-};
-export interface FocusLockSettings {
-    /**
-     * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
-     */
-    autoFocusFirstElem?: boolean;
-    /**
-     * 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.
-     */
-    isFocusLockEnabled?: boolean;
-    /**
-     * ReturnFocus controls what happens when the user exits focus lock mode.
-     * If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
-     * If ref is passed, focus returns to that specific ref element.
-     */
-    shouldReturnFocus?: boolean | RefObject<HTMLElement | null>;
-}
-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-scrollock` to enable Touch Scrolling.
-     */
-    children?: ReactElement;
-}
-/**
- * Type of keyboard event that triggers which key will should close the drawer.
- */
-export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';

package/dist/types-ts4.5/use-ensure-is-inside-drawer.d.ts

@@ -1 +0,0 @@
-export declare const useEnsureIsInsideDrawer: () => void;

package/dist/types-ts4.5/use-on-close.d.ts

@@ -1,2 +0,0 @@
-import { type SyntheticEvent } from 'react';
-export declare const useOnClose: () => ((event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void) | undefined;