carbon-react 104.33.1 → 104.35.0

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

@@ -0,0 +1,32 @@
+export default PagerNavigation;
+declare function PagerNavigation({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: {
+    pageSize: any;
+    currentPage: any;
+    setCurrentPage: any;
+    onNext: any;
+    onPrevious: any;
+    onFirst: any;
+    onLast: any;
+    onPagination: any;
+    pageCount: any;
+    showFirstAndLastButtons?: boolean | undefined;
+    showPreviousAndNextButtons?: boolean | undefined;
+    showPageCount?: boolean | undefined;
+}): JSX.Element;
+declare namespace PagerNavigation {
+    namespace propTypes {
+        const currentPage: PropTypes.Validator<string | number>;
+        const pageSize: PropTypes.Requireable<string | number>;
+        const pageCount: PropTypes.Requireable<string | number>;
+        const setCurrentPage: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFirst: PropTypes.Requireable<(...args: any[]) => any>;
+        const onPrevious: PropTypes.Requireable<(...args: any[]) => any>;
+        const onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        const onLast: PropTypes.Requireable<(...args: any[]) => any>;
+        const onPagination: PropTypes.Requireable<(...args: any[]) => any>;
+        const showFirstAndLastButtons: PropTypes.Requireable<boolean>;
+        const showPreviousAndNextButtons: PropTypes.Requireable<boolean>;
+        const showPageCount: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,132 @@
+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); }
+
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { StyledPagerNavigation, StyledPagerNavInner, StyledPagerNoSelect } from "../pager.style";
+import NumberInput from "../../number";
+import Events from "../../../__internal__/utils/helpers/events";
+import createGuid from "../../../__internal__/utils/helpers/guid";
+import PagerNavigationLink from "./pager-navigation-link.component";
+import Label from "../../../__internal__/label";
+import useLocale from "../../../hooks/__internal__/useLocale";
+
+const PagerNavigation = ({
+  pageSize,
+  currentPage,
+  setCurrentPage,
+  onNext,
+  onPrevious,
+  onFirst,
+  onLast,
+  onPagination,
+  pageCount,
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true
+}) => {
+  const l = useLocale();
+  const guid = useRef(createGuid());
+  const currentPageId = `Pager_${guid.current}`;
+  const hasOnePage = pageCount <= 1;
+  const hasTwoPages = pageCount === 2;
+  const pagerNavigationProps = {
+    currentPage,
+    pageSize,
+    pageCount,
+    onPagination
+  };
+
+  const handlePageInputChange = ev => {
+    if (pageCount === 0) {
+      setCurrentPage(0);
+      onPagination(0, pageSize, "input");
+      return "0";
+    }
+
+    if (Number(ev.target.value) <= 0 || Number.isNaN(Number(ev.target.value))) {
+      setCurrentPage(1);
+      onPagination(1, pageSize, "input");
+      return "1";
+    }
+
+    if (Number(ev.target.value) > 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;
+  };
+
+  const handleCurrentPageChange = e => {
+    setCurrentPage(e.target.value);
+  };
+
+  const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
+    type: "first",
+    onClick: onFirst
+  }, pagerNavigationProps)), showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
+    type: "previous",
+    onClick: onPrevious
+  }, pagerNavigationProps)));
+
+  const renderButtonsAfterCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
+    type: "next",
+    onClick: onNext
+  }, pagerNavigationProps)), !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
+    type: "last",
+    onClick: onLast
+  }, pagerNavigationProps)));
+
+  return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX()), /*#__PURE__*/React.createElement(Label, {
+    htmlFor: currentPageId
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    value: currentPage.toString(),
+    "data-element": "current-page",
+    onChange: handleCurrentPageChange,
+    onBlur: handlePageInputChange,
+    id: currentPageId,
+    onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
+  })), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
+};
+
+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
+};
+export default PagerNavigation;

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

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

package/esm/components/pager/index.js

@@ -0,0 +1 @@
+export { default } from "./pager.component";

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

@@ -0,0 +1,49 @@
+export default Pager;
+declare function Pager({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: {
+    [x: string]: any;
+    currentPage?: number | undefined;
+    pageSizeSelectionOptions?: {
+        id: string;
+        name: number;
+    }[] | undefined;
+    pageSize?: number | undefined;
+    showPageSizeSelection?: boolean | undefined;
+    totalRecords?: number | undefined;
+    onPagination: any;
+    onNext: any;
+    onFirst: any;
+    onPrevious: any;
+    onLast: any;
+    showPageSizeLabelBefore?: boolean | undefined;
+    showPageSizeLabelAfter?: boolean | undefined;
+    showTotalRecords?: boolean | undefined;
+    showFirstAndLastButtons?: boolean | undefined;
+    showPreviousAndNextButtons?: boolean | undefined;
+    showPageCount?: boolean | undefined;
+    variant?: string | undefined;
+}): JSX.Element;
+declare namespace Pager {
+    namespace propTypes {
+        const onPagination: PropTypes.Validator<(...args: any[]) => any>;
+        const onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFirst: PropTypes.Requireable<(...args: any[]) => any>;
+        const onPrevious: PropTypes.Requireable<(...args: any[]) => any>;
+        const onLast: PropTypes.Requireable<(...args: any[]) => any>;
+        const currentPage: PropTypes.Requireable<string | number>;
+        const totalRecords: PropTypes.Requireable<string | number>;
+        const pageSize: PropTypes.Requireable<string | number>;
+        const pageSizeSelectionOptions: PropTypes.Requireable<(PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string | number>;
+        }> | null | undefined)[]>;
+        const showPageSizeSelection: PropTypes.Requireable<boolean>;
+        const showPageSizeLabelBefore: PropTypes.Requireable<boolean>;
+        const showPageSizeLabelAfter: PropTypes.Requireable<boolean>;
+        const showTotalRecords: PropTypes.Requireable<boolean>;
+        const showFirstAndLastButtons: PropTypes.Requireable<boolean>;
+        const showPreviousAndNextButtons: PropTypes.Requireable<boolean>;
+        const showPageCount: PropTypes.Requireable<boolean>;
+        const variant: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,203 @@
+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); }
+
+import React, { useState, useCallback, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Select } from "../select";
+import PagerNavigation from "./__internal__/pager-navigation.component";
+import Option from "../select/option/option.component";
+import useLocale from "../../hooks/__internal__/useLocale";
+import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
+import Events from "../../__internal__/utils/helpers/events";
+
+const Pager = ({
+  currentPage = 1,
+  pageSizeSelectionOptions = [{
+    id: "10",
+    name: 10
+  }, {
+    id: "25",
+    name: 25
+  }, {
+    id: "50",
+    name: 50
+  }, {
+    id: "100",
+    name: 100
+  }],
+  pageSize = 10,
+  showPageSizeSelection = false,
+  totalRecords = 0,
+  onPagination,
+  onNext,
+  onFirst,
+  onPrevious,
+  onLast,
+  showPageSizeLabelBefore = true,
+  showPageSizeLabelAfter = true,
+  showTotalRecords = true,
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true,
+  variant = "default",
+  ...rest
+}) => {
+  const l = useLocale();
+  const [page, setPage] = useState(currentPage);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [value, setValue] = useState(pageSize);
+  const getPageCount = useCallback(() => {
+    if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
+      return 1;
+    }
+
+    return Math.ceil(totalRecords / currentPageSize);
+  }, [totalRecords, currentPageSize]);
+  const [pageCount, setPageCount] = useState(getPageCount());
+  useEffect(() => {
+    setCurrentPageSize(Number(pageSize));
+    setValue(pageSize);
+  }, [pageSize]);
+  useEffect(() => {
+    const maxPage = getPageCount();
+    setPageCount(maxPage);
+
+    if (Number(currentPage) > maxPage) {
+      setPage(maxPage);
+    } else {
+      setPage(Number(currentPage));
+    }
+  }, [currentPageSize, pageCount, currentPage, totalRecords, getPageCount]);
+  const handleOnFirst = useCallback(e => {
+    setPage(1);
+
+    if (onFirst) {
+      onFirst(e);
+    }
+  }, [onFirst]);
+  const handleOnLast = useCallback(e => {
+    setPage(pageCount);
+
+    if (onLast) {
+      onLast(e);
+    }
+  }, [pageCount, onLast]);
+  const handleOnNext = useCallback(e => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+
+    if (onNext) {
+      onNext(e);
+    }
+  }, [onNext, page]);
+  const handleOnPrevious = useCallback(e => {
+    const previousPage = page - 1;
+    setPage(previousPage);
+
+    if (onPrevious) {
+      onPrevious(e);
+    }
+  }, [page, onPrevious]);
+  const handleOnPagination = useCallback(e => {
+    setValue(e.target.value);
+    setCurrentPageSize(Number(e.target.value));
+    onPagination(1, Number(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),
+      onBlur: () => setValue(currentPageSize),
+      onKeyDown: handleKeyDown,
+      "data-element": "page-select",
+      id: "page-select"
+    }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
+      key: sizeOption.id,
+      text: sizeOption.id,
+      value: String(sizeOption.name),
+      onClick: handleOnPagination
+    }))));
+  };
+
+  const renderPageSizeOptions = () => {
+    return showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/React.createElement("span", null, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/React.createElement("span", null, l.pager.records(currentPageSize, false)));
+  };
+
+  const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
+
+  return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({
+    "data-component": "pager",
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
+    pageSize: currentPageSize,
+    currentPage: page,
+    setCurrentPage: setPage,
+    onNext: handleOnNext,
+    onPrevious: handleOnPrevious,
+    onFirst: handleOnFirst,
+    onLast: handleOnLast,
+    onPagination: onPagination,
+    pageCount: pageCount,
+    showFirstAndLastButtons: showFirstAndLastButtons,
+    showPreviousAndNextButtons: showPreviousAndNextButtons,
+    showPageCount: showPageCount
+  }), /*#__PURE__*/React.createElement(StyledPagerSummary, null, renderTotalRecords()));
+};
+
+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])
+  })),
+
+  /** 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"])
+};
+export default Pager;

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+export interface PagerPropTypes {
+  /** 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<HTMLElement>) => void;
+  /** Callback function for first link */
+  onFirst?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Callback function for previous link */
+  onPrevious?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Callback function for last link */
+  onLast?: (ev: React.MouseEvent<HTMLElement>) => 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?: Record<string, unknown>[];
+  /** 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";
+}
+
+declare function Pager(props: PagerPropTypes): JSX.Element;
+
+export default Pager;

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

@@ -0,0 +1,10 @@
+export const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPagerLinkStyles: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export const StyledPagerNoSelect: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import Link from "../link";

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

@@ -0,0 +1,103 @@
+import styled, { css } from "styled-components";
+import StyledInput from "../../__internal__/input/input.style";
+import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
+import StyledSelectText from "../select/__internal__/select-text/select-text.style";
+import Link from "../link";
+const StyledSelectContainer = styled.div`
+  height: 26px;
+
+  ${StyledInputPresentation} {
+    padding-left: 0;
+  }
+`;
+const StyledPagerContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 24px;
+  align-items: center;
+  border-top-width: 0;
+  font-size: 13px;
+  border-top: none;
+  color: var(--colorsUtilityYin090);
+
+  ${({
+  variant
+}) => css`
+      border-width: 1px 1px 1px 1px;
+      border-style: none solid solid solid;
+      border-color: var(--colorsUtilityMajor100);
+      background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
+    `}
+`;
+const StyledPagerSizeOptions = styled.div`
+  display: flex;
+  flex: 1 1 30%;
+  justify-content: flex-start;
+
+  ${StyledInputPresentation} {
+    width: 55px;
+    height: 26px;
+    min-height: 26px;
+    min-width: 10px;
+    margin: 0px 4px;
+
+    ${StyledSelectText} {
+      font-size: 14px;
+      padding-right: 0px;
+      padding-left: 8px;
+      height: 22px;
+      width: 13px;
+    }
+
+    ${InputIconToggleStyle} {
+      margin-left: 0;
+      width: 20px;
+      height: 24px;
+    }
+  }
+`;
+const StyledPagerSizeOptionsInner = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledPagerNavigation = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  align-items: center;
+
+  && ${StyledInputPresentation} {
+    padding: 0;
+    margin: 8px 4px 0 4px;
+    height: 26px;
+    line-height: 26px;
+    min-height: 24px;
+
+    ${StyledInput} {
+      text-align: center;
+      height: 24px;
+      padding: 0;
+    }
+  }
+`;
+const StyledPagerNavInner = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+`;
+const StyledPagerLinkStyles = styled(Link)`
+  padding: 0 10px;
+  margin-left: 7px;
+  margin-right: 7px;
+`;
+const StyledPagerNoSelect = styled.span`
+  user-select: none;
+  white-space: nowrap;
+`;
+const StyledPagerSummary = styled.div`
+  display: flex;
+  flex: 1 1 30%;
+  justify-content: flex-end;
+`;
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLinkStyles, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };

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

@@ -0,0 +1,2 @@
+export { default } from "./pages";
+export { default as Page } from "./page/page";

package/esm/components/pages/index.js

@@ -0,0 +1,2 @@
+export { default } from "./pages.component";
+export { default as Page } from "./page/page.component";

package/esm/components/pages/page/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "./page.js"
+}

package/esm/components/pages/page/page.component.d.ts

@@ -0,0 +1,13 @@
+export default Page;
+declare function Page({ title, children, ...props }: {
+    [x: string]: any;
+    title: any;
+    children: any;
+}): JSX.Element;
+declare namespace Page {
+    namespace propTypes {
+        const title: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/pages/page/page.component.js

@@ -0,0 +1,49 @@
+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); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import { CSSTransition } from "react-transition-group";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
+import FullScreenHeading from "../../../__internal__/full-screen-heading";
+import Box from "../../box";
+import { StyledPage, StyledPageContent } from "./page.style";
+
+const Page = ({
+  title,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(CSSTransition, _extends({
+    className: "carbon-carousel__transition",
+    timeout: {
+      appear: 0,
+      enter: 0,
+      exit: 0
+    } // eslint-disable-next-line react/prop-types
+    ,
+    classNames: props.transitionName()
+  }, props), /*#__PURE__*/React.createElement(StyledPage, tagComponent("page", props), /*#__PURE__*/React.createElement(FullScreenHeading, {
+    hasContent: title
+  }, title), /*#__PURE__*/React.createElement(StyledPageContent, {
+    "data-element": "carbon-page-content"
+  }, /*#__PURE__*/React.createElement(Box, {
+    boxSizing: "border-box",
+    maxWidth: "100%",
+    minWidth: "auto",
+    margin: "0 auto",
+    padding: "4px 0px"
+  }, children))));
+};
+
+Page.propTypes = {
+  /**
+   * The title for the page, normally a Heading component.
+   */
+  title: PropTypes.node.isRequired,
+
+  /**
+   * This component supports children.
+   */
+  children: PropTypes.node.isRequired
+};
+export default Page;

package/esm/components/pages/page/page.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface PageProps {
+  /** The title for the page, normally a Heading component. */
+  title: React.ReactNode;
+  /** This component supports children. */
+  children: React.ReactNode;
+}
+
+declare function Page(props: PageProps): JSX.Element;
+
+export default Page;

package/esm/components/pages/page/page.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
+export const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;