@atlaskit/tabs 13.3.0 → 13.3.2

package/dist/esm/components/tab-list.js

@@ -1,17 +1,27 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 
-var TabListWithMode = function TabListWithMode(props) {
-  var children = props.children,
-      mode = props.mode;
+/**
+ * __TabList__
+ *
+ * A TabList groups `Tab` components together.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
+var TabList = function TabList(props) {
+  var children = props.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var _useTabList = useTabList(),
       tabsId = _useTabList.tabsId,
@@ -22,7 +32,7 @@ var TabListWithMode = function TabListWithMode(props) {
 
   var childrenArray = Children.toArray(children).filter(Boolean);
   var length = childrenArray.length;
-  var styles = useMemo(function () {
+  var tabListStyles = useMemo(function () {
     return getTabListStyles(mode);
   }, [mode]);
   var selectTabByIndex = useCallback(function (index) {
@@ -89,11 +99,19 @@ var TabListWithMode = function TabListWithMode(props) {
       key: index
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
+  return (// Only styles that affect the TabList itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTab(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
       role: "tablist",
-      css: styles,
-      ref: ref
+      display: "flex",
+      position: "relative",
+      padding: "sp-0",
+      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: tabListStyles
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,
@@ -103,23 +121,5 @@ var TabListWithMode = function TabListWithMode(props) {
     }))
   );
 };
-/**
- * __TabList__
- *
- * A TabList groups `Tab` components together.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
 
-
-export var TabList = function TabList(props) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(TabListWithMode, _extends({}, props, {
-      mode: mode
-    }));
-  });
-};
 export default TabList;

package/dist/esm/components/tab-panel.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference
@@ -19,9 +21,10 @@ var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabPanelAttributes = useTabPanel();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabPanelAttributes), children);
+  return jsx(Box, _extends({
+    testId: testId,
+    as: "div"
+  }, tabPanelAttributes), jsx(Fragment, null, children));
 };
 
 export default TabPanel;

package/dist/esm/components/tab.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
 
 /**
@@ -17,7 +18,13 @@ export default function Tab(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabAttributes = useTab();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabAttributes), children);
+  return jsx(Box, _extends({
+    as: "div",
+    testId: testId
+  }, tabAttributes), jsx(Text, {
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: 'inherit'
+    }
+  }, children));
 }

package/dist/esm/components/tabs.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toArray from "@babel/runtime/helpers/toArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -8,17 +7,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { Children, useCallback, useMemo, useRef, useState } from 'react';
+import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.0"
+  packageVersion: "13.3.2"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -40,8 +40,18 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
     }, tabPanel)
   );
 };
+/**
+ * __Tabs__
+ *
+ * Tabs acts as a container for all Tab components.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
 
-var TabsWithMode = function TabsWithMode(props) {
+
+var Tabs = function Tabs(props) {
   var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
       shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
       SelectedType = props.selected,
@@ -50,8 +60,10 @@ var TabsWithMode = function TabsWithMode(props) {
       id = props.id,
       analyticsContext = props.analyticsContext,
       children = props.children,
-      testId = props.testId,
-      mode = props.mode;
+      testId = props.testId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var _useState = useState(SelectedType || defaultSelected || 0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -104,9 +116,22 @@ var TabsWithMode = function TabsWithMode(props) {
   var tabsStyles = useMemo(function () {
     return getTabsStyles(mode);
   }, [mode]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
-      "data-testid": testId,
+  return (// Only styles that affect the Tabs container itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTabPanel(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
+      testId: testId,
+      display: "flex",
+      flexDirection: "column",
+      UNSAFE_style: {
+        maxWidth: '100%',
+        minHeight: '0%',
+        flexBasis: '100%',
+        flexGrow: 1
+      } // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {
       value: {
@@ -114,26 +139,8 @@ var TabsWithMode = function TabsWithMode(props) {
         onChange: onChangeAnalytics,
         tabsId: id
       }
-    }, tabList), tabPanelsWithContext)
+    }, tabList), jsx(Fragment, null, tabPanelsWithContext))
   );
 };
-/**
- * __Tabs__
- *
- * Tabs acts as a container for all Tab components.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-
 
-export var Tabs = function Tabs(props) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(TabsWithMode, _extends({}, props, {
-      mode: mode
-    }));
-  });
-};
 export default Tabs;

package/dist/esm/internal/styles.js

@@ -43,12 +43,6 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
 export var getTabsStyles = function getTabsStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      display: 'flex',
-      maxWidth: '100%',
-      minHeight: '0%',
-      flexBasis: '100%',
-      flexDirection: 'column',
-      flexGrow: 1,
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
@@ -72,10 +66,6 @@ var tabLineStyles = {
 export var getTabListStyles = function getTabListStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      display: 'flex',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
       '& [role="tab"]': getTabStyles(mode),
       fontWeight: 500,
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.3.0",
+	"version": "13.3.2",
 	"sideEffects": false
 }

package/dist/types/components/tab-list.d.ts

@@ -9,5 +9,5 @@ import { TabListProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

package/dist/types/components/tab-panel.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TabPanelProps } from '../types';
 /**

package/dist/types/components/tabs.d.ts

@@ -9,5 +9,5 @@ import { TabsProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

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

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react';
+import { TabListProps } from '../types';
+/**
+ * __TabList__
+ *
+ * A TabList groups `Tab` components together.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+export default TabList;

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

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react';
+import { TabPanelProps } from '../types';
+/**
+ * __TabPanel__
+ *
+ * A TabPanel houses the contents of a Tab.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
+declare const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
+export default TabPanel;

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { TabProps } from '../types';
+/**
+ * __Tab__
+ *
+ * Tab represents an indivudal Tab displayed in a TabList.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
+export default function Tab({ children, testId }: TabProps): jsx.JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react';
+import { TabsProps } from '../types';
+/**
+ * __Tabs__
+ *
+ * Tabs acts as a container for all Tab components.
+ *
+ * - [Examples](https://atlassian.design/components/tabs/examples)
+ * - [Code](https://atlassian.design/components/tabs/code)
+ * - [Usage](https://atlassian.design/components/tabs/usage)
+ */
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+export default Tabs;

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

@@ -0,0 +1,3 @@
+export declare const useTab: () => import("./types").TabAttributesType;
+export declare const useTabList: () => import("./types").TabListAttributesType;
+export declare const useTabPanel: () => import("./types").TabPanelAttributesType;

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

@@ -0,0 +1,6 @@
+export { default } from './components/tabs';
+export { default as TabPanel } from './components/tab-panel';
+export { default as Tab } from './components/tab';
+export { default as TabList } from './components/tab-list';
+export type { TabProps, TabPanelProps, TabsProps, TabListProps, TabAttributesType, TabListAttributesType, TabPanelAttributesType, TabData, } from './types';
+export { useTab, useTabPanel } from './hooks';

package/dist/types-ts4.0/internal/colors.d.ts

@@ -0,0 +1,17 @@
+import { ThemeModes } from '@atlaskit/theme/types';
+export declare type TabColors = {
+    labelColor: string;
+    activeLabelColor: string;
+    hoverLabelColor: string;
+    selectedColor: string;
+    focusBorderColor: string;
+};
+export declare const getTabColors: (mode: ThemeModes) => TabColors;
+export declare type TabLineColors = {
+    lineColor: string;
+    hoveredColor: string;
+    activeColor: string;
+    selectedColor: string;
+};
+export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;
+export declare const getTabPanelFocusColor: (mode: ThemeModes) => string;

package/dist/types-ts4.0/internal/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabAttributesType, TabListAttributesType, TabPanelAttributesType } from '../types';
+export declare const TabContext: import("react").Context<TabAttributesType | null>;
+export declare const TabListContext: import("react").Context<TabListAttributesType | null>;
+export declare const TabPanelContext: import("react").Context<TabPanelAttributesType | null>;

package/dist/types-ts4.0/internal/styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject, SerializedStyles } from '@emotion/react';
+import { ThemeModes } from '@atlaskit/theme/types';
+export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
+export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
+export declare const getTabStyles: (mode: ThemeModes) => CSSObject;

package/dist/types-ts4.0/internal/utils.d.ts

@@ -0,0 +1,2 @@
+import type { MouseEvent } from 'react';
+export declare const onMouseDownBlur: (e: MouseEvent<HTMLElement>) => void;

package/dist/types-ts4.0/performance/examples.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { PublicInteractionTask } from 'storybook-addon-performance';
+export declare const performance: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            performance: {
+                interactions: PublicInteractionTask[];
+            };
+        };
+    };
+};
+export declare const heavyPerformance: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            performance: {
+                interactions: PublicInteractionTask[];
+            };
+        };
+    };
+};

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

@@ -0,0 +1,196 @@
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
+export interface TabProps {
+    /**
+     * The children to be rendered within a `Tab`.
+     */
+    children: ReactNode;
+    /**
+     * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
+     * on the `Tab` element, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface TabPanelProps {
+    /**
+     * The children to be rendered within a `TabPanel`.
+     */
+    children: ReactNode;
+    /**
+     * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
+     * on the `TabPanel` element, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * @deprecated
+ * Previously this was the type for the tabs prop that was used like
+ * <Tabs tabs={tabs} />
+ * The codemod changes this to be
+ * <Tabs>
+ *  <TabList>
+ *    {tabs.map(tab => <Tab testId={tab.testId}>{tab.label}</Tab>)}
+ *  </TabList>
+ *  {tabs.map(tab => <TabPanel>{tab.content}</TabPanel>)}
+ * </Tabs>
+ * The TabData type remains so the variable used in tabs can have a type.
+ */
+export interface TabData {
+    /**
+     * String to be put inside a tab
+     */
+    label?: string;
+    /**
+     * String to be put inside a tab panel
+     */
+    content?: ReactNode;
+    /**
+     * 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. This `testId` is put on the tab.
+     */
+    testId?: string;
+    /**
+     * Used by consumers to convey extra information about the tab.
+     */
+    [key: string]: any;
+}
+export declare type SelectedType = number;
+export declare type OnChangeCallback = (index: SelectedType, analyticsEvent: UIAnalyticsEvent) => void;
+export interface TabsProps extends WithAnalyticsEventsProps {
+    /**
+     * The index of the tab that will be selected by default when the component mounts.
+     * If not set the first tab will be displayed by default.
+     */
+    defaultSelected?: SelectedType;
+    /**
+     * A callback function which will be fired when a changed. It will be passed
+     * the index of the selected tab and a `UIAnalyticsEvent`.
+     */
+    onChange?: OnChangeCallback;
+    /**
+     * The selected tab's index. If this prop is set the component behaves as a
+     * controlled component. It will be up to you to listen to `onChange`.
+     */
+    selected?: SelectedType;
+    /**
+     * Tabs by default leaves `TabPanel`'s mounted on the page after they have been selected.
+     * If you would like to unmount a `TabPanel` when it is not selected, set this prop to
+     * be true.
+     */
+    shouldUnmountTabPanelOnChange?: boolean;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from `Tabs`.
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * A `testId` prop is a unique string that appears as a data attribute `data-testid`
+     * on the `Tabs` element, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.
+     * Subsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.
+     * If you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.
+     */
+    children: ReactNode;
+    /**
+     * A unique ID that will be used to generate IDs for tabs and tab panels.
+     * This is required for accessibility purposes.
+     */
+    id: string;
+}
+export interface TabListProps {
+    /**
+     * A collection of `Tab`'s.  There should be a `Tab` for each `TabPanel`.
+     * If you want to customize `Tab` there is documentation in the tab section.
+     */
+    children: ReactNode;
+}
+export declare type TabAttributesType = {
+    /**
+     * Changes the selected tab.
+     */
+    onClick: () => void;
+    /**
+     * ID of the tab.
+     */
+    id: string;
+    /**
+     * The id of the tab panel that this tab links.
+     */
+    'aria-controls': string;
+    /**
+     * The position of this tab within the tab list.
+     */
+    'aria-posinset': number;
+    /**
+     * Whether this tab is selected.
+     */
+    'aria-selected': boolean;
+    /**
+     * The number of tabs in this tab list.
+     */
+    'aria-setsize': number;
+    /**
+     * Prevents a focus ring being shown when clicked.
+     */
+    onMouseDown: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows navigation of tabs with automatic activation.
+     * Read here for more details: https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
+     */
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Role is "tab".
+     */
+    role: 'tab';
+    /**
+     * If the tab is selected the tab index is 0 and is focusable.
+     * Otherwise it is -1 and is not focusable.
+     */
+    tabIndex: number;
+};
+export declare type TabListAttributesType = {
+    /**
+     * The index of the selected tab.
+     */
+    selected: SelectedType;
+    /**
+     * A unique ID that will be used to generate IDs for tabs and tab panels.
+     * This is required for accessibility reasons.
+     */
+    tabsId: string;
+    /**
+     * A callback function which will be fired when a tab is changed.
+     */
+    onChange: (index: SelectedType) => void;
+};
+export declare type TabPanelAttributesType = {
+    /**
+     * Role is "tabpanel".
+     */
+    role: 'tabpanel';
+    /**
+     * ID of the the tab panel.
+     */
+    id: string;
+    /**
+     * Hidden is true if it is not the selected tab.
+     */
+    hidden?: boolean;
+    /**
+     * The id of the tab that links to this tab panel.
+     */
+    'aria-labelledby': string;
+    /**
+     * Prevents a focus ring being shown when clicked.
+     */
+    onMouseDown: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * If the tab panel is selected the tab index is 0 and is focusable.
+     * Otherwise it is -1 and is not focusable.
+     */
+    tabIndex: number;
+};

package/hooks/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/hooks.js",
   "module:es2019": "../dist/es2019/hooks.js",
   "sideEffects": false,
-  "types": "../dist/types/hooks.d.ts"
+  "types": "../dist/types/hooks.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/hooks.d.ts"
+      ]
+    }
+  }
 }