carbon-react 105.0.2 → 105.1.2

package/esm/hooks/useMediaQuery/index.js

@@ -1,19 +1 @@
-import React from "react";
-export default function useMediaQuery(queryInput) {
-  const query = queryInput.replace(/^@media( ?)/m, "");
-  const [match, setMatch] = React.useState(() => false);
-  React.useEffect(() => {
-    const queryList = window.matchMedia(query);
-
-    const updateMatch = () => {
-      setMatch(queryList.matches);
-    };
-
-    updateMatch();
-    queryList.addListener(updateMatch);
-    return () => {
-      queryList.removeListener(updateMatch);
-    };
-  }, [query]);
-  return match;
-}
+export { default } from "./useMediaQuery";

package/esm/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(queryInput: string): boolean;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,19 @@
+import React from "react";
+export default function useMediaQuery(queryInput) {
+  const query = queryInput.replace(/^@media( ?)/m, "");
+  const [match, setMatch] = React.useState(() => false);
+  React.useEffect(() => {
+    const queryList = window.matchMedia(query);
+
+    const updateMatch = () => {
+      setMatch(queryList.matches);
+    };
+
+    updateMatch();
+    queryList.addListener(updateMatch);
+    return () => {
+      queryList.removeListener(updateMatch);
+    };
+  }, [query]);
+  return match;
+}

package/lib/__spec_helper__/mock-match-media.d.ts

@@ -1,4 +1,6 @@
 declare function setup(): void;
-declare function mockMatchMedia(matches?: boolean): jest.Mock;
+declare function mockMatchMedia(
+  matches?: boolean
+): { removeListener: jest.Mock };
 
 export { setup, mockMatchMedia };

package/lib/components/button/button.component.js

@@ -99,7 +99,7 @@ const Button = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const [internalRef, setInternalRef] = (0, _react.useState)(null);

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
-var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.style"));
 
 var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
 
@@ -32,16 +32,23 @@ const DropTarget = ({
   getOrder,
   ...rest
 }) => {
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
   const [, drop] = (0, _reactDnd.useDrop)({
     accept: "flatTableRow",
+    hover: (_, monitor) => {
+      if (!isDragging && monitor.isOver()) setIsDragging(true);
+    },
 
     drop() {
+      setIsDragging(false);
       getOrder();
     }
 
   });
-  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
-    ref: drop
+  return /*#__PURE__*/_react.default.createElement(_flatTableBodyDraggable.default, _extends({
+    "data-testid": "flat-table-body-draggable",
+    ref: drop,
+    isDragging: isDragging
   }, rest), children);
 };
 

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledFlatTableBodyDraggable;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledFlatTableBodyDraggable = _styledComponents.default.tbody`
+  ${({
+  isDragging
+}) => isDragging && (0, _styledComponents.css)`
+      cursor: grabbing;
+    `}
+`;
+var _default = StyledFlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -269,7 +269,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       ${isDragging && (0, _styledComponents.css)`
         border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
-        cursor: grabbing;
         ${allCellTypes} {
           background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -51,7 +51,7 @@ const MultiActionButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `MultiActionButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const ref = (0, _react.useRef)();

package/lib/components/select/option/index.d.ts

@@ -4,7 +4,7 @@ export interface OptionProps {
   /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
   text: string;
   /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
-  children?: React.ComponentType;
+  children?: React.ReactNode;
   /** The option's invisible internal value */
   value: string | Record<string, unknown>;
   /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */

package/lib/components/split-button/split-button.component.js

@@ -67,7 +67,7 @@ const SplitButton = ({
     deprecatedWarnTriggered = true;
 
     _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+    "The `as` prop is deprecated and will soon be removed from the `SplitButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
   }
 
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;

package/lib/components/tile/tile.component.d.ts

@@ -1,7 +1,8 @@
 export default Tile;
-declare function Tile({ as, p, children, orientation, width, ...props }: {
+declare function Tile({ as, variant, p, children, orientation, width, ...props }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
+    variant?: string | undefined;
     p?: number | undefined;
     children: any;
     orientation?: string | undefined;

package/lib/components/tile/tile.component.js

@@ -13,18 +13,30 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tileStyle = require("./tile.style.js");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+let deprecatedWarnTriggered = false;
+
 const Tile = ({
-  as = "tile",
+  as,
+  variant = "tile",
   p = 3,
   children,
   orientation = "horizontal",
   width,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Tile` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const isHorizontal = () => orientation === "horizontal";
 
   const isVertical = () => orientation === "vertical";
@@ -54,7 +66,7 @@ const Tile = ({
   });
 
   return /*#__PURE__*/_react.default.createElement(_tileStyle.StyledTile, _extends({
-    tileTheme: as,
+    tileTheme: as || variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -69,6 +81,9 @@ Tile.propTypes = {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as: _propTypes.default.oneOf(["tile", "transparent"]),
 
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant: _propTypes.default.oneOf(["tile", "transparent"]),
+
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/lib/components/tile/tile.d.ts

@@ -4,6 +4,8 @@ import { SpaceProps } from "styled-system";
 export interface TileProps extends SpaceProps {
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   as?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  variant?: "tile" | "transparent";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/lib/components/toast/toast.component.d.ts

@@ -1,7 +1,7 @@
 export default Toast;
 declare function Toast({ as, children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
     [x: string]: any;
-    as?: string | undefined;
+    as: any;
     children: any;
     className: any;
     id: any;

package/lib/components/toast/toast.component.js

@@ -27,6 +27,8 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -35,8 +37,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+let deprecatedWarnTriggered = false;
+
 const Toast = ({
-  as = "success",
+  as,
   children,
   className,
   id,
@@ -49,6 +53,13 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed from the `Toast` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
@@ -100,7 +111,7 @@ const Toast = ({
     if (!open) return null;
     const toastProps = {
       isCenter,
-      variant: variant || as,
+      variant: variant || as || "success",
       id,
       maxWidth
     };

package/lib/components/vertical-divider/vertical-divider.component.js

@@ -12,6 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _menu = require("../menu/menu.component");
 
 var _verticalDivider = require("./vertical-divider.style");
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 function _getRequireWildcardCache() {
   if (typeof WeakMap !== "function") return null;

package/lib/hooks/__internal__/useCharacterCount/index.d.ts

@@ -1,2 +1 @@
-export default useCharacterCount;
-declare function useCharacterCount(value: any, characterLimit: any, warnOverLimit?: boolean, enforceCharacterLimit?: boolean): any[];
+export { default } from "./useCharacterCount";

package/lib/hooks/__internal__/useCharacterCount/index.js

@@ -3,32 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
-
-var _useLocale = _interopRequireDefault(require("../useLocale"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useCharacterCount.default;
+  }
+});
 
-const useCharacterCount = (value, characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
-  const l = (0, _useLocale.default)();
-  const isOverLimit = (0, _react.useMemo)(() => value && value.length > parseInt(characterLimit, 10), [value, characterLimit]);
-  return [enforceCharacterLimit && characterLimit ? characterLimit : undefined, characterLimit ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-    isOverLimit: isOverLimit && warnOverLimit,
-    value: getFormatNumber(value.length, l.locale()),
-    limit: getFormatNumber(characterLimit, l.locale()),
-    "data-element": "character-limit"
-  }) : null];
-};
+var _useCharacterCount = _interopRequireDefault(require("./useCharacterCount"));
 
-var _default = useCharacterCount;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const useCharacterCount: (value: string, characterLimit?: string | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [string | undefined, JSX.Element | null];
+export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
+
+var _useLocale = _interopRequireDefault(require("../useLocale"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
+
+const useCharacterCount = (value, characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+  const l = (0, _useLocale.default)();
+  const isOverLimit = (0, _react.useMemo)(() => {
+    if (value && characterLimit) {
+      return value.length > parseInt(characterLimit, 10);
+    }
+
+    return false;
+  }, [value, characterLimit]);
+  return [enforceCharacterLimit && characterLimit ? characterLimit : undefined, characterLimit ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+    isOverLimit: isOverLimit && warnOverLimit,
+    value: getFormatNumber(value.length, l.locale()),
+    limit: getFormatNumber(+characterLimit, l.locale()),
+    "data-element": "character-limit"
+  }) : null];
+};
+
+var _default = useCharacterCount;
+exports.default = _default;

package/lib/hooks/__internal__/useInputAccessibility/index.d.ts

@@ -1,24 +1 @@
-interface InputAccessibilityProperties {
-  labelId?: string;
-  tooltipId?: string;
-  fieldHelpId?: string;
-  ariaDescribedBy?: string;
-  ariaLabelledBy?: string;
-}
-
-export default function useInputAccessibility(
-  /** Input id -  */
-  id: string,
-  /** Error validation message */
-  error?: string,
-  /** Warning validation message */
-  warning?: string,
-  /** Info validation message */
-  info?: string,
-  /** Label */
-  label?: string,
-  /** labelHelp message */
-  labelHelp?: string,
-  /** fieldHelp message */
-  fieldHelp?: string
-): void;
+export { default } from "./useInputAccessibility";

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.d.ts

@@ -1,14 +1,14 @@
 export default function useInputAccessibility({ id, error, warning, info, label, fieldHelp, }: {
-    id: any;
-    error: any;
-    warning: any;
-    info: any;
-    label: any;
-    fieldHelp: any;
+    id: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    label?: string;
+    fieldHelp?: string;
 }): {
-    labelId: string | undefined;
-    validationIconId: string | undefined;
-    fieldHelpId: string | undefined;
-    ariaDescribedBy: string;
-    ariaLabelledBy: string | undefined;
+    labelId?: string;
+    validationIconId?: string;
+    fieldHelpId?: string;
+    ariaDescribedBy?: string;
+    ariaLabelledBy?: string;
 };

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -14,9 +14,7 @@ function useInputAccessibility({
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const validationIconId = [error, warning, info].filter(validation => {
-    return validation && typeof validation === "string";
-  }).length ? `${id}-validation-icon` : undefined;
+  const validationIconId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation-icon` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
   const ariaLabelledBy = labelId;

package/lib/hooks/__internal__/useIsAboveBreakpoint/index.d.ts

@@ -1 +1 @@
-export default function useIsAboveBreakpoint(breakpoint?: number): boolean;
+export { default } from "./useIsAboveBreakpoint";

package/lib/hooks/__internal__/useIsAboveBreakpoint/index.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useIsAboveBreakpoint;
-
-var _useMediaQuery = _interopRequireDefault(require("../../useMediaQuery"));
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useIsAboveBreakpoint.default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useIsAboveBreakpoint = _interopRequireDefault(require("./useIsAboveBreakpoint"));
 
-function useIsAboveBreakpoint(breakpoint) {
-  const matchesQuery = (0, _useMediaQuery.default)(`(min-width:${breakpoint}px)`);
-  if (!breakpoint) return undefined;
-  return matchesQuery;
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.d.ts

@@ -0,0 +1 @@
+export default function useIsAboveBreakpoint(breakpoint?: number): boolean | undefined;

package/lib/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIsAboveBreakpoint;
+
+var _useMediaQuery = _interopRequireDefault(require("../../useMediaQuery"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useIsAboveBreakpoint(breakpoint) {
+  const matchesQuery = (0, _useMediaQuery.default)(`(min-width:${breakpoint}px)`);
+  if (!breakpoint) return undefined;
+  return matchesQuery;
+}

package/lib/hooks/__internal__/useLocale/index.d.ts

@@ -1 +1 @@
-export default function useLocale(): import("../../../locales/locale").default;
+export { default } from "./useLocale";

package/lib/hooks/__internal__/useLocale/index.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useLocale;
-
-var _react = require("react");
-
-var _i18nContext = _interopRequireDefault(require("../../../__internal__/i18n-context"));
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useLocale.default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useLocale = _interopRequireDefault(require("./useLocale"));
 
-function useLocale() {
-  return (0, _react.useContext)(_i18nContext.default);
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useLocale/useLocale.d.ts

@@ -0,0 +1 @@
+export default function useLocale(): import("../../../locales/locale").default;

package/lib/hooks/__internal__/useLocale/useLocale.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLocale;
+
+var _react = require("react");
+
+var _i18nContext = _interopRequireDefault(require("../../../__internal__/i18n-context"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useLocale() {
+  return (0, _react.useContext)(_i18nContext.default);
+}

package/lib/hooks/__internal__/useResizeObserver/index.d.ts

@@ -1,10 +1 @@
-import * as React from "react";
-
-export default function useResizeObserver(
-  /** Reference to the resizable HTML element -  */
-  ref: React.RefObject<HTMLElement>,
-  /** Callback meant to be executed on element resize */
-  onResize: () => void,
-  /** Flag to indicate whether hook should be disabled  */
-  disabled?: boolean
-): void;
+export { default } from "./useResizeObserver";

package/lib/hooks/__internal__/useResizeObserver/index.js

@@ -3,29 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useResizeObserver;
-
-var _react = require("react");
-
-function useResizeObserver(ref, onResize, disabled) {
-  const observer = (0, _react.useRef)(null);
-  const onResizeRef = (0, _react.useRef)(null);
-  onResizeRef.current = onResize;
-  (0, _react.useLayoutEffect)(() => {
-    const referenceRef = ref.current;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useResizeObserver.default;
+  }
+});
 
-    if (!disabled) {
-      observer.current = new ResizeObserver(() => {
-        onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef.current();
-      });
-      observer.current.observe(referenceRef);
-    }
+var _useResizeObserver = _interopRequireDefault(require("./useResizeObserver"));
 
-    return () => {
-      if (!disabled) {
-        observer.current.unobserve(referenceRef);
-        observer.current.disconnect();
-      }
-    };
-  }, [ref, disabled]);
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+export default function useResizeObserver(
+/** Reference to the resizable HTML element */
+ref: RefObject<Element>, 
+/** Callback meant to be executed on element resize */
+onResize: () => void, 
+/** Flag to indicate whether hook should be disabled  */
+disabled?: boolean): void;