carbon-react 111.22.4 → 112.0.1

package/esm/components/batch-selection/batch-selection.component.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface BatchSelectionProps {
+    /** Content to be rendered after selected count */
+    children: React.ReactNode;
+    /** Color of the background, transparent if not defined */
+    colorTheme?: "dark" | "light" | "white" | "transparent";
+    /** If true disables all user interaction */
+    disabled?: boolean;
+    /** Hidden if true */
+    hidden?: boolean;
+    /** Number of selected elements */
+    selectedCount: number;
+}
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => JSX.Element;
+export default BatchSelection;

package/esm/components/batch-selection/batch-selection.component.js

@@ -6,7 +6,7 @@ import { StyledBatchSelection, StyledSelectionCount } from "./batch-selection.st
 const BatchSelection = ({
   disabled,
   children,
-  colorTheme,
+  colorTheme = "transparent",
   selectedCount,
   hidden
 }) => {
@@ -22,22 +22,11 @@ const BatchSelection = ({
 };
 
 BatchSelection.propTypes = {
-  /** Content to be rendered after selected count */
-  children: PropTypes.node.isRequired,
-
-  /** Number of selected elements */
-  selectedCount: PropTypes.number.isRequired,
-
-  /** Color of the background, transparent if not defined */
-  colorTheme: PropTypes.oneOf(["dark", "light", "white", "transparent"]),
-
-  /** If true disables all user interaction */
-  disabled: PropTypes.bool,
-
-  /** Hidden if true */
-  hidden: PropTypes.bool
-};
-BatchSelection.defaultProps = {
-  colorTheme: "transparent"
+  "children": PropTypes.node,
+  "colorTheme": PropTypes.oneOf(["dark", "light", "transparent", "white"]),
+  "disabled": PropTypes.bool,
+  "hidden": PropTypes.bool,
+  "selectedCount": PropTypes.number.isRequired
 };
+export { BatchSelection };
 export default BatchSelection;

package/esm/components/batch-selection/batch-selection.style.d.ts

@@ -0,0 +1,4 @@
+import { BatchSelectionProps } from ".";
+declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "disabled" | "hidden" | "colorTheme">, never>;
+declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledBatchSelection, StyledSelectionCount };

package/esm/components/batch-selection/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./batch-selection";
+export { default } from "./batch-selection.component";
+export type { BatchSelectionProps } from "./batch-selection.component";

package/esm/components/pager/__internal__/pager-navigation-link.component.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface PagerNavigationLinkProps {
+    /** Type of Pagination link to be allowed for navigation */
+    type: "next" | "previous" | "first" | "last";
+    /** Current visible page */
+    currentPage: number;
+    /** Count of all the pages  */
+    pageCount: number;
+    /** Pagination page size */
+    pageSize: number;
+    /** onClick Callback function */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback to process pagination  */
+    onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
+}
+declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
+export default PagerNavigationLink;

package/esm/components/pager/__internal__/pager-navigation-link.component.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { StyledPagerLinkStyles } from "../pager.style";
+import { StyledPagerLink } from "../pager.style";
 import useLocale from "../../../hooks/__internal__/useLocale";
 
 const PagerNavigationLink = ({
@@ -12,11 +12,11 @@ const PagerNavigationLink = ({
   onPagination
 }) => {
   const l = useLocale();
-  const linkRef = useRef();
+  const linkRef = useRef(null);
   const navLinkConfig = {
     first: {
       text: l.pager.first(),
-      destination: "1"
+      destination: 1
     },
     last: {
       text: l.pager.last(),
@@ -48,39 +48,30 @@ const PagerNavigationLink = ({
     }
   }, [disabled]);
 
-  const handleOnCLick = e => {
-    onClick(e);
-    onPagination(navLinkConfig[type].destination, pageSize, type);
+  const handleOnCLick = ev => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+    onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
   };
 
   const {
     text
   } = navLinkConfig[type];
-  return /*#__PURE__*/React.createElement(StyledPagerLinkStyles, {
+  return /*#__PURE__*/React.createElement(StyledPagerLink, {
     "data-element": `pager-link-${type}`,
     disabled: disabled(),
-    onClick: handleOnCLick,
+    onClick: // Type assertion due to the fact that StyledPagerLink
+    // will always return a button element
+    handleOnCLick,
     ref: linkRef
   }, text);
 };
 
 PagerNavigationLink.propTypes = {
-  /** Type of Pagination link to be allowed for navigation */
-  type: PropTypes.oneOf(["next", "previous", "first", "last"]).isRequired,
-
-  /** Current visible page */
-  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /** Count of all the pages  */
-  pageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /** Pagination page size */
-  pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /** onClick Callback function */
-  onClick: PropTypes.func,
-
-  /** onPagination Callback to process pagination  */
-  onPagination: PropTypes.func
+  "currentPage": PropTypes.number.isRequired,
+  "onClick": PropTypes.func,
+  "onPagination": PropTypes.func,
+  "pageCount": PropTypes.number.isRequired,
+  "pageSize": PropTypes.number.isRequired,
+  "type": PropTypes.oneOf(["first", "last", "next", "previous"]).isRequired
 };
 export default PagerNavigationLink;

package/esm/components/pager/__internal__/pager-navigation.component.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface PagerNavigationProps {
+    /** Current visible page */
+    currentPage: number;
+    /** Pagination page size */
+    pageSize: number;
+    pageCount: number;
+    /** Sets the current page being shown */
+    setCurrentPage: (page: number) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback triggered when a change is triggered */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Should the `First` and `Last` navigation buttons be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Next` and `Previous` navigation buttons be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+}
+declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
+export default PagerNavigation;

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -36,31 +36,33 @@ const PagerNavigation = ({
   };
 
   const handlePageInputChange = ev => {
+    const pageNumber = +ev.target.value;
+
     if (pageCount === 0) {
       setCurrentPage(0);
       onPagination(0, pageSize, "input");
-      return "0";
+      return 0;
     }
 
-    if (Number(ev.target.value) <= 0 || Number.isNaN(Number(ev.target.value))) {
+    if (pageNumber <= 0 || Number.isNaN(pageNumber)) {
       setCurrentPage(1);
       onPagination(1, pageSize, "input");
-      return "1";
+      return 1;
     }
 
-    if (Number(ev.target.value) > pageCount) {
+    if (pageNumber > pageCount) {
       setCurrentPage(pageCount);
       onPagination(pageCount, pageSize, "input");
       return pageCount;
     }
 
-    setCurrentPage(Number(ev.target.value));
-    onPagination(Number(ev.target.value), pageSize, "input");
-    return ev.target.value;
+    setCurrentPage(pageNumber);
+    onPagination(pageNumber, pageSize, "input");
+    return pageNumber;
   };
 
   const handleCurrentPageChange = e => {
-    setCurrentPage(e.target.value);
+    setCurrentPage(+e.target.value);
   };
 
   const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
@@ -92,40 +94,17 @@ const PagerNavigation = ({
 };
 
 PagerNavigation.propTypes = {
-  /** Current visible page */
-  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /** Pagination page size */
-  pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /* Count of all of the pages */
-  pageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Sets the current page being shown */
-  setCurrentPage: PropTypes.func,
-
-  /** onFirst Callback triggered when first link is triggered */
-  onFirst: PropTypes.func,
-
-  /** onPrevious Callback triggered when previous link is triggered */
-  onPrevious: PropTypes.func,
-
-  /** onNext Callback triggered when next link is triggered */
-  onNext: PropTypes.func,
-
-  /** onLast Callback triggered when last link is triggered */
-  onLast: PropTypes.func,
-
-  /** onPagination Callback triggered when a change is triggered */
-  onPagination: PropTypes.func,
-
-  /** Should the `First` and `Last` navigation buttons be shown */
-  showFirstAndLastButtons: PropTypes.bool,
-
-  /** Should the `Next` and `Previous` navigation buttons be shown */
-  showPreviousAndNextButtons: PropTypes.bool,
-
-  /** Should the page count input be shown */
-  showPageCount: PropTypes.bool
+  "currentPage": PropTypes.number.isRequired,
+  "onFirst": PropTypes.func,
+  "onLast": PropTypes.func,
+  "onNext": PropTypes.func,
+  "onPagination": PropTypes.func.isRequired,
+  "onPrevious": PropTypes.func,
+  "pageCount": PropTypes.number.isRequired,
+  "pageSize": PropTypes.number.isRequired,
+  "setCurrentPage": PropTypes.func.isRequired,
+  "showFirstAndLastButtons": PropTypes.bool,
+  "showPageCount": PropTypes.bool,
+  "showPreviousAndNextButtons": PropTypes.bool
 };
 export default PagerNavigation;

package/esm/components/pager/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./pager";
-export * from "./pager";
+export { default } from "./pager.component";
+export type { PagerProps } from "./pager.component";

package/esm/components/pager/pager.component.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare type PageSizeOption = {
+    id: string;
+    name: number;
+};
+export interface PagerProps {
+    /** Function called when pager changes (PageSize, Current Page) */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Current visible page */
+    currentPage?: number | string;
+    /** Total number of records */
+    totalRecords?: number | string;
+    /** Pagination page size */
+    pageSize?: number | string;
+    /** Should the page size selection dropdown be shown */
+    showPageSizeSelection?: boolean;
+    /** Set of page size options */
+    pageSizeSelectionOptions?: PageSizeOption[];
+    /** Should the label before the page size selection dropdown be shown */
+    showPageSizeLabelBefore?: boolean;
+    /** Should the label after the page size selection dropdown be shown */
+    showPageSizeLabelAfter?: boolean;
+    /** Should the total records label be shown */
+    showTotalRecords?: boolean;
+    /** Should the `First` and `Last` navigation button be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Previous` and `Next` navigation button be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+    /** What variant the Pager background should be */
+    variant?: "default" | "alternate";
+}
+export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
+export default Pager;

package/esm/components/pager/pager.component.js

@@ -2,9 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import { Select } from "../select";
+import { Select, Option } from "../select";
 import PagerNavigation from "./__internal__/pager-navigation.component";
-import Option from "../select/option/option.component";
 import useLocale from "../../hooks/__internal__/useLocale";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
@@ -43,31 +42,31 @@ const Pager = ({
   ...rest
 }) => {
   const l = useLocale();
-  const [page, setPage] = useState(currentPage);
-  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
-  const [value, setValue] = useState(pageSize);
+  const [page, setPage] = useState(+currentPage);
+  const [currentPageSize, setCurrentPageSize] = useState(+pageSize);
+  const [value, setValue] = useState(+pageSize);
   const guid = useRef(createGuid());
   const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
   const getPageCount = useCallback(() => {
-    if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
+    if (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
       return 1;
     }
 
-    return Math.ceil(totalRecords / currentPageSize);
+    return Math.ceil(+totalRecords / currentPageSize);
   }, [totalRecords, currentPageSize]);
   const [pageCount, setPageCount] = useState(getPageCount());
   useEffect(() => {
-    setCurrentPageSize(Number(pageSize));
-    setValue(pageSize);
+    setCurrentPageSize(+pageSize);
+    setValue(+pageSize);
   }, [pageSize]);
   useEffect(() => {
     const maxPage = getPageCount();
     setPageCount(maxPage);
 
-    if (Number(currentPage) > maxPage) {
+    if (+currentPage > maxPage) {
       setPage(maxPage);
     } else {
-      setPage(Number(currentPage));
+      setPage(+currentPage);
     }
   }, [currentPageSize, pageCount, currentPage, totalRecords, getPageCount]);
   const handleOnFirst = useCallback(e => {
@@ -102,15 +101,15 @@ const Pager = ({
   }, [page, onPrevious]);
   const handleOnPagination = useCallback(e => {
     setValue(e.target.value);
-    setCurrentPageSize(Number(e.target.value));
-    onPagination(1, Number(e.target.value), "page-select");
+    setCurrentPageSize(+e.target.value);
+    onPagination(1, +e.target.value, "page-select");
   }, [onPagination]);
   const handleKeyDown = useCallback(e => Events.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
 
   const sizeSelector = () => {
     return /*#__PURE__*/React.createElement(StyledSelectContainer, null, /*#__PURE__*/React.createElement(Select, {
       value: String(value),
-      onChange: ev => setValue(ev.target.value),
+      onChange: ev => setValue(+ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
       "data-element": "page-select",
@@ -151,58 +150,26 @@ const Pager = ({
 };
 
 Pager.propTypes = {
-  /** Function called when pager changes (PageSize, Current Page) */
-  onPagination: PropTypes.func.isRequired,
-
-  /** Callback function for next link */
-  onNext: PropTypes.func,
-
-  /** Callback function for first link */
-  onFirst: PropTypes.func,
-
-  /** Callback function for previous link */
-  onPrevious: PropTypes.func,
-
-  /** Callback function for last link */
-  onLast: PropTypes.func,
-
-  /** Current visible page */
-  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Total number of records */
-  totalRecords: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Pagination page size */
-  pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Set of page size options */
-  pageSizeSelectionOptions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  "currentPage": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "onFirst": PropTypes.func,
+  "onLast": PropTypes.func,
+  "onNext": PropTypes.func,
+  "onPagination": PropTypes.func.isRequired,
+  "onPrevious": PropTypes.func,
+  "pageSize": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "pageSizeSelectionOptions": PropTypes.arrayOf(PropTypes.shape({
+    "id": PropTypes.string.isRequired,
+    "name": PropTypes.number.isRequired
   })),
-
-  /** Should the page size selection dropdown be shown */
-  showPageSizeSelection: PropTypes.bool,
-
-  /** Should the label before the page size selection dropdown be shown */
-  showPageSizeLabelBefore: PropTypes.bool,
-
-  /** Should the label after the page size selection dropdown be shown */
-  showPageSizeLabelAfter: PropTypes.bool,
-
-  /** Should the total records label be shown */
-  showTotalRecords: PropTypes.bool,
-
-  /** Should the `First` and `Last` navigation button be shown */
-  showFirstAndLastButtons: PropTypes.bool,
-
-  /** Should the `Previous` and `Next` navigation button be shown */
-  showPreviousAndNextButtons: PropTypes.bool,
-
-  /** Should the page count input be shown */
-  showPageCount: PropTypes.bool,
-
-  /** What variant the Pager background should be */
-  variant: PropTypes.oneOf(["default", "alternate"])
+  "showFirstAndLastButtons": PropTypes.bool,
+  "showPageCount": PropTypes.bool,
+  "showPageSizeLabelAfter": PropTypes.bool,
+  "showPageSizeLabelBefore": PropTypes.bool,
+  "showPageSizeSelection": PropTypes.bool,
+  "showPreviousAndNextButtons": PropTypes.bool,
+  "showTotalRecords": PropTypes.bool,
+  "totalRecords": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
+export { Pager };
 export default Pager;

package/esm/components/pager/pager.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PagerProps } from ".";
+declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, Pick<PagerProps, "variant">, never>;
+declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };

package/esm/components/pager/pager.style.js

@@ -95,7 +95,7 @@ const StyledPagerNavInner = styled.div`
     margin-bottom: 0;
   }
 `;
-const StyledPagerLinkStyles = styled(Link)`
+const StyledPagerLink = styled(Link)`
   padding: 0 10px;
   margin-left: 7px;
   margin-right: 7px;
@@ -110,4 +110,4 @@ const StyledPagerSummary = styled.div`
   flex: 1 1 30%;
   justify-content: flex-end;
 `;
-export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLinkStyles, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };

package/esm/components/select/__internal__/select-text/select-text.style.d.ts

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

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

@@ -11,6 +11,11 @@ export interface OptionProps {
   borderColor?: string;
   /** MultiSelect only - fill Pill background with color */
   fill?: boolean;
+  /**
+   * @private
+   * @ignore
+   * OnClick callback */
+  onClick?: (ev: React.MouseEvent<HTMLLIElement>) => void;
 }
 
 declare function Option(

package/esm/components/tabs/tabs.component.js

@@ -104,12 +104,8 @@ const Tabs = ({
       previousSelectedTabId.current = selectedTabId;
     }
   }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
-  /** Determines if the tab titles are in a vertical format. */
-
-  const isVertical = currentPosition => currentPosition === "left";
   /** Handles the changing of tabs with the mouse */
 
-
   const handleTabClick = ev => {
     if (Event.isEventType(ev, "keydown")) {
       return;
@@ -147,7 +143,7 @@ const Tabs = ({
 
   const handleKeyDown = index => {
     return event => {
-      const isTabVertical = isVertical(position);
+      const isTabVertical = isInSidebar || position === "left";
       const isUp = isTabVertical && Event.isUpKey(event);
       const isDown = isTabVertical && Event.isDownKey(event);
       const isLeft = !isTabVertical && Event.isLeftKey(event);

package/esm/locales/locale.d.ts

@@ -48,7 +48,7 @@ interface Locale {
     };
     pager: {
         show: () => string;
-        records: (count: number | string, showNumber: boolean) => string;
+        records: (count: number | string, showNumber?: boolean) => string;
         first: () => string;
         last: () => string;
         next: () => string;

package/lib/components/batch-selection/batch-selection.component.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface BatchSelectionProps {
+    /** Content to be rendered after selected count */
+    children: React.ReactNode;
+    /** Color of the background, transparent if not defined */
+    colorTheme?: "dark" | "light" | "white" | "transparent";
+    /** If true disables all user interaction */
+    disabled?: boolean;
+    /** Hidden if true */
+    hidden?: boolean;
+    /** Number of selected elements */
+    selectedCount: number;
+}
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => JSX.Element;
+export default BatchSelection;

package/lib/components/batch-selection/batch-selection.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BatchSelection = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BatchSelection = ({
   disabled,
   children,
-  colorTheme,
+  colorTheme = "transparent",
   selectedCount,
   hidden
 }) => {
@@ -33,24 +33,13 @@ const BatchSelection = ({
   }, l.batchSelection.selected(selectedCount)), children);
 };
 
+exports.BatchSelection = BatchSelection;
 BatchSelection.propTypes = {
-  /** Content to be rendered after selected count */
-  children: _propTypes.default.node.isRequired,
-
-  /** Number of selected elements */
-  selectedCount: _propTypes.default.number.isRequired,
-
-  /** Color of the background, transparent if not defined */
-  colorTheme: _propTypes.default.oneOf(["dark", "light", "white", "transparent"]),
-
-  /** If true disables all user interaction */
-  disabled: _propTypes.default.bool,
-
-  /** Hidden if true */
-  hidden: _propTypes.default.bool
-};
-BatchSelection.defaultProps = {
-  colorTheme: "transparent"
+  "children": _propTypes.default.node,
+  "colorTheme": _propTypes.default.oneOf(["dark", "light", "transparent", "white"]),
+  "disabled": _propTypes.default.bool,
+  "hidden": _propTypes.default.bool,
+  "selectedCount": _propTypes.default.number.isRequired
 };
 var _default = BatchSelection;
 exports.default = _default;

package/lib/components/batch-selection/batch-selection.style.d.ts

@@ -0,0 +1,4 @@
+import { BatchSelectionProps } from ".";
+declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "disabled" | "hidden" | "colorTheme">, never>;
+declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledBatchSelection, StyledSelectionCount };

package/lib/components/batch-selection/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./batch-selection";
+export { default } from "./batch-selection.component";
+export type { BatchSelectionProps } from "./batch-selection.component";