carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,151 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { Select, Option } from "../select";
-import PagerNavigation from "./__internal__/pager-navigation.component";
-import useLocale from "../../hooks/__internal__/useLocale";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
-import Events from "../../__internal__/utils/helpers/events";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-export const Pager = ({
-  currentPage = 1,
-  hideDisabledElements = false,
-  interactivePageNumber = true,
-  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",
-  smallScreenBreakpoint,
-  ...rest
-}) => {
-  const l = useLocale();
-  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 (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
-      return 1;
-    }
-    return Math.ceil(+totalRecords / currentPageSize);
-  }, [totalRecords, currentPageSize]);
-  const [pageCount, setPageCount] = useState(getPageCount());
-  useEffect(() => {
-    setCurrentPageSize(+pageSize);
-    setValue(+pageSize);
-  }, [pageSize]);
-  useEffect(() => {
-    const maxPage = getPageCount();
-    setPageCount(maxPage);
-    if (+currentPage > maxPage) {
-      setPage(maxPage);
-    } else {
-      setPage(+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(selectedValue => {
-    setValue(+selectedValue);
-    setCurrentPageSize(+selectedValue);
-    onPagination(1, +selectedValue, "page-select");
-  }, [onPagination]);
-  const handleKeyDown = useCallback(e => Events.isEnterKey(e) && handleOnPagination(e.target.value), [handleOnPagination]);
-  const sizeSelector = () => {
-    return /*#__PURE__*/React.createElement(StyledSelectContainer, null, /*#__PURE__*/React.createElement(Select, _extends({
-      value: String(value),
-      onChange: ev => setValue(+ev.target.value),
-      onBlur: () => setValue(currentPageSize),
-      onKeyDown: handleKeyDown,
-      "data-element": "page-select",
-      id: pageSizeSelectId
-    }, !showPageSizeLabelBefore && !showPageSizeLabelAfter ? {
-      ariaLabel: l.pager.show()
-    } : {}), pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/React.createElement(Option, {
-      key: sizeOption.id,
-      text: sizeOption.id,
-      value: String(sizeOption.name),
-      onClick: handleOnPagination
-    }))));
-  };
-  const renderPageSizeOptions = () => {
-    const wrapper = (isLabel, child) => isLabel ? /*#__PURE__*/React.createElement("label", {
-      htmlFor: pageSizeSelectId
-    }, child) : /*#__PURE__*/React.createElement("div", null, child);
-    return /*#__PURE__*/React.createElement(StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && wrapper(showPageSizeLabelBefore, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && wrapper(!showPageSizeLabelBefore, l.pager.records(currentPageSize, false)));
-  };
-  return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({
-    variant: variant,
-    smallScreenBreakpoint: smallScreenBreakpoint,
-    showPageSizeSelection: showPageSizeSelection,
-    showTotalRecords: showTotalRecords
-  }, rest, tagComponent("pager", rest)), showPageSizeSelection && /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
-    pageSize: currentPageSize,
-    currentPage: page,
-    interactivePageNumber: interactivePageNumber,
-    hideDisabledElements: hideDisabledElements,
-    setCurrentPage: setPage,
-    onNext: handleOnNext,
-    onPrevious: handleOnPrevious,
-    onFirst: handleOnFirst,
-    onLast: handleOnLast,
-    onPagination: onPagination,
-    pageCount: pageCount,
-    showFirstAndLastButtons: showFirstAndLastButtons,
-    showPreviousAndNextButtons: showPreviousAndNextButtons,
-    showPageCount: showPageCount,
-    smallScreenBreakpoint: smallScreenBreakpoint
-  }), showTotalRecords && /*#__PURE__*/React.createElement(StyledPagerSummary, {
-    smallScreenBreakpoint: smallScreenBreakpoint
-  }, l.pager.records(totalRecords)));
-};
-export default Pager;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as o,useCallback as n,useEffect as i}from"react";import s from"../select/option/option.component.js";import"../select/option-row/option-row.component.js";import"../select/option-group-header/option-group-header.component.js";import{SimpleSelect as a}from"../select/simple-select/simple-select.component.js";import"../select/filterable-select/filterable-select.component.js";import"../select/multi-select/multi-select.component.js";import l from"./__internal__/pager-navigation.component.js";import c from"../../hooks/__internal__/useLocale/useLocale.js";import p from"../../__internal__/utils/helpers/guid/index.js";import{StyledPagerContainer as u,StyledPagerSizeOptions as m,StyledPagerSummary as g,StyledPagerSizeOptionsInner as d,StyledSelectContainer as h}from"./pager.style.js";import f from"../../__internal__/utils/helpers/events/events.js";import b from"../../__internal__/utils/helpers/tags/tags.js";function P(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){P(e,t,r[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const j=P=>{var{currentPage:j=1,hideDisabledElements:S=!1,interactivePageNumber:v=!0,pageSizeSelectionOptions:y=[{id:"10",name:10},{id:"25",name:25},{id:"50",name:50},{id:"100",name:100}],pageSize:_=10,showPageSizeSelection:B=!1,totalRecords:z=0,onPagination:L,onNext:x,onFirst:N,onPrevious:k,onLast:A,showPageSizeLabelBefore:D=!0,showPageSizeLabelAfter:C=!0,showTotalRecords:E=!0,showFirstAndLastButtons:F=!0,showPreviousAndNextButtons:R=!0,showPageCount:T=!0,variant:K="default",smallScreenBreakpoint:I}=P,M=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(P,["currentPage","hideDisabledElements","interactivePageNumber","pageSizeSelectionOptions","pageSize","showPageSizeSelection","totalRecords","onPagination","onNext","onFirst","onPrevious","onLast","showPageSizeLabelBefore","showPageSizeLabelAfter","showTotalRecords","showFirstAndLastButtons","showPreviousAndNextButtons","showPageCount","variant","smallScreenBreakpoint"]);const $=c(),[q,G]=r(+j),[H,J]=r(+_),[Q,U]=r(+_),V=`Pager_size_selector_${o(p()).current}`,W=n((()=>+z<0||Number.isNaN(+z)?1:Math.ceil(+z/H)),[z,H]),[X,Y]=r(W());i((()=>{J(+_),U(+_)}),[_]),i((()=>{const e=W();Y(e),G(+j>e?e:+j)}),[H,X,j,z,W]);const Z=n((e=>{G(1),N&&N(e)}),[N]),ee=n((e=>{G(X),A&&A(e)}),[X,A]),te=n((e=>{G(q+1),x&&x(e)}),[x,q]),re=n((e=>{G(q-1),k&&k(e)}),[q,k]),oe=n((e=>{U(+e),J(+e),L(1,+e,"page-select")}),[L]),ne=n((e=>f.isEnterKey(e)&&oe(e.target.value)),[oe]);return e(u,O(w({variant:K,smallScreenBreakpoint:I,showPageSizeSelection:B,showTotalRecords:E},M,b("pager",M)),{children:[B&&t(m,{children:(()=>{const r=(e,r)=>e?t("label",{htmlFor:V,children:r}):t("div",{children:r});return e(d,{children:[D&&r(D,$.pager.show()),t(h,{children:t(a,O(w({value:String(Q),onChange:e=>U(+e.target.value),onBlur:()=>U(H),onKeyDown:ne,"data-element":"page-select",id:V},D||C?{}:{ariaLabel:$.pager.show()}),{children:y.map((e=>t(s,{text:e.id,value:String(e.name),onClick:oe},e.id)))}))}),C&&r(!D,$.pager.records(H,!1))]})})()}),t(l,{pageSize:H,currentPage:q,interactivePageNumber:v,hideDisabledElements:S,setCurrentPage:G,onNext:te,onPrevious:re,onFirst:Z,onLast:ee,onPagination:L,pageCount:X,showFirstAndLastButtons:F,showPreviousAndNextButtons:R,showPageCount:T,smallScreenBreakpoint:I}),E&&t(g,{smallScreenBreakpoint:I,children:$.pager.records(z)})]}))};export{j as Pager,j as default};

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

@@ -1,153 +1 @@
-import styled, { css } from "styled-components";
-import StyledInput from "../../__internal__/input/input.style";
-import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
-import StyledFormField from "../../__internal__/form-field/form-field.style";
-import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import { StyledSelectText } from "../select/__internal__/select-textbox/select-textbox.style";
-import Link from "../link";
-const StyledSelectContainer = styled.div`
-  height: 26px;
-  width: 55px;
-  margin-left: 8px;
-  margin-right: 8px;
-  ${StyledInputPresentation} {
-    padding-left: 0;
-  }
-`;
-const StyledPagerContainer = styled.div`
-  box-sizing: border-box;
-  display: grid;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sizing050) var(--sizing300);
-  width: 100%;
-  min-height: var(--sizing550);
-  font-size: var(--fontSizes100);
-  color: var(--colorsUtilityYin090);
-  border: 1px solid var(--colorsUtilityMajor100);
-  border-radius: var(--borderRadius100);
-  grid-template-columns: repeat(3, 1fr);
-  flex-wrap: wrap;
-
-  ${({
-  smallScreenBreakpoint,
-  showPageSizeSelection,
-  showTotalRecords
-}) => smallScreenBreakpoint && css`
-      @media (max-width: ${smallScreenBreakpoint}) {
-        grid-template-columns: 1fr;
-        padding: var(--sizing050) var(--sizing100);
-
-        ${(showPageSizeSelection || showTotalRecords) && css`
-          grid-template-columns: 1fr 1fr;
-          grid-template-rows: 1fr 1fr;
-        `}
-      }
-    `}
-
-  ${({
-  variant
-}) => css`
-    background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
-  `}
-`;
-const StyledPagerSizeOptions = styled.div`
-  grid-area: 1 / 1 / 1 / 1;
-
-  ${StyledInputPresentation} {
-    width: 55px;
-    height: 26px;
-    min-height: 26px;
-    min-width: 10px;
-    margin: 0px;
-
-    ${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;
-  justify-content: center;
-  align-items: center;
-  padding: 0 var(--spacing200);
-  gap: var(--spacing400);
-  grid-area: 1 / 2 / 1 / 2;
-
-  ${({
-  smallScreenBreakpoint
-}) => smallScreenBreakpoint && css`
-      @media (max-width: ${smallScreenBreakpoint}) {
-        padding: 0;
-        gap: var(--spacing200);
-        grid-area: 2 / 1 / 2 / 3;
-      }
-    `}
-
-  && ${StyledInputPresentation} {
-    padding: 0;
-    margin: 4px 8px;
-    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;
-
-  && ${StyledFormField} {
-    margin-bottom: 0;
-  }
-`;
-const StyledPagerNavLabel = styled.label`
-  white-space: nowrap;
-`;
-const StyledPagerLink = styled(Link)`
-  ${({
-  hideDisabledButtons
-}) => hideDisabledButtons && css`
-      & {
-        visibility: hidden;
-      }
-    `}
-`;
-const StyledPagerNoSelect = styled.div`
-  user-select: none;
-  white-space: nowrap;
-  font-weight: normal;
-`;
-const StyledPagerSummary = styled.div`
-  justify-self: end;
-  white-space: nowrap;
-  grid-area: 1 / 3 / 1 / 3;
-
-  ${({
-  smallScreenBreakpoint
-}) => smallScreenBreakpoint && css`
-      @media (max-width: ${smallScreenBreakpoint}) {
-        grid-area: 1 / 2 / 1 / 2;
-      }
-    `}
-`;
-export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerNavLabel, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
+import e,{css as i}from"styled-components";import t from"../../__internal__/input/input.style.js";import a from"../../__internal__/input/input-presentation.style.js";import n from"../../__internal__/form-field/form-field.style.js";import r from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import{StyledSelectText as o}from"../select/__internal__/select-textbox/select-textbox.style.js";import{Link as p}from"../link/link.component.js";const l=e.div.withConfig({displayName:"pager.style__StyledSelectContainer",componentId:"sc-51bbf401-0"})(["height:26px;width:55px;margin-left:8px;margin-right:8px;","{padding-left:0;}"],a),s=e.div.withConfig({displayName:"pager.style__StyledPagerContainer",componentId:"sc-51bbf401-1"})(["box-sizing:border-box;display:grid;align-items:center;justify-content:space-between;padding:var(--sizing050) var(--sizing300);width:100%;min-height:var(--sizing550);font-size:var(--fontSizes100);color:var(--colorsUtilityYin090);border:1px solid var(--colorsUtilityMajor100);border-radius:var(--borderRadius100);grid-template-columns:repeat(3,1fr);flex-wrap:wrap;"," ",""],(({smallScreenBreakpoint:e,showPageSizeSelection:t,showTotalRecords:a})=>e&&i(["@media (max-width:","){grid-template-columns:1fr;padding:var(--sizing050) var(--sizing100);","}"],e,(t||a)&&i(["grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;"]))),(({variant:e})=>i(["background-color:",";"],"alternate"===e?"var(--colorsUtilityMajor040)":"var(--colorsUtilityMajor010)"))),d=e.div.withConfig({displayName:"pager.style__StyledPagerSizeOptions",componentId:"sc-51bbf401-2"})(["grid-area:1 / 1 / 1 / 1;","{width:55px;height:26px;min-height:26px;min-width:10px;margin:0px;","{font-size:14px;padding-right:0px;padding-left:8px;height:22px;width:13px;}","{margin-left:0;width:20px;height:24px;}}"],a,o,r),g=e.div.withConfig({displayName:"pager.style__StyledPagerSizeOptionsInner",componentId:"sc-51bbf401-3"})(["display:flex;align-items:center;"]),m=e.div.withConfig({displayName:"pager.style__StyledPagerNavigation",componentId:"sc-51bbf401-4"})(["display:flex;justify-content:center;align-items:center;padding:0 var(--spacing200);gap:var(--spacing400);grid-area:1 / 2 / 1 / 2;"," && ","{padding:0;margin:4px 8px;height:26px;line-height:26px;min-height:24px;","{text-align:center;height:24px;padding:0;}}"],(({smallScreenBreakpoint:e})=>e&&i(["@media (max-width:","){padding:0;gap:var(--spacing200);grid-area:2 / 1 / 2 / 3;}"],e)),a,t),c=e.div.withConfig({displayName:"pager.style__StyledPagerNavInner",componentId:"sc-51bbf401-5"})(["display:flex;align-items:center;&& ","{margin-bottom:0;}"],n),f=e.label.withConfig({displayName:"pager.style__StyledPagerNavLabel",componentId:"sc-51bbf401-6"})(["white-space:nowrap;"]),h=e(p).withConfig({displayName:"pager.style__StyledPagerLink",componentId:"sc-51bbf401-7"})(["",""],(({hideDisabledButtons:e})=>e&&i(["&{visibility:hidden;}"]))),y=e.div.withConfig({displayName:"pager.style__StyledPagerNoSelect",componentId:"sc-51bbf401-8"})(["user-select:none;white-space:nowrap;font-weight:normal;"]),_=e.div.withConfig({displayName:"pager.style__StyledPagerSummary",componentId:"sc-51bbf401-9"})(["justify-self:end;white-space:nowrap;grid-area:1 / 3 / 1 / 3;",""],(({smallScreenBreakpoint:e})=>e&&i(["@media (max-width:","){grid-area:1 / 2 / 1 / 2;}"],e)));export{s as StyledPagerContainer,h as StyledPagerLink,c as StyledPagerNavInner,f as StyledPagerNavLabel,m as StyledPagerNavigation,y as StyledPagerNoSelect,d as StyledPagerSizeOptions,g as StyledPagerSizeOptionsInner,_ as StyledPagerSummary,l as StyledSelectContainer};

package/esm/components/pages/index.js

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

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

@@ -1 +1 @@
-export { default } from "./page.component";
+export{default}from"./page.component.js";

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

@@ -1,47 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef } from "react";
-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";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-const Page = ({
-  role,
-  title,
-  children,
-  ...rest
-}) => {
-  const styledPageNodeRef = useRef(null);
-  const {
-    transitionName
-  } = rest;
-  return /*#__PURE__*/React.createElement(CSSTransition, _extends({
-    className: "carbon-carousel__transition",
-    timeout: {
-      appear: 0,
-      enter: 0,
-      exit: 0
-    }
-  }, transitionName && {
-    classNames: transitionName()
-  }, {
-    nodeRef: styledPageNodeRef
-  }, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
-    ref: styledPageNodeRef,
-    role: role
-  }), title ? /*#__PURE__*/React.createElement(FullScreenHeading, {
-    hasContent: true
-  }, title) : null, /*#__PURE__*/React.createElement(StyledPageContent, _extends({
-    "data-element": "carbon-page-content",
-    "data-role": "page-content",
-    p: "34px 40px"
-  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(Box, {
-    boxSizing: "border-box",
-    maxWidth: "100%",
-    minWidth: "auto",
-    margin: "0 auto"
-  }, children))));
-};
-Page.displayName = "Page";
-export default Page;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r}from"react";import{CSSTransition as n}from"react-transition-group";import o from"../../../__internal__/utils/helpers/tags/tags.js";import i from"../../../__internal__/full-screen-heading/full-screen-heading.component.js";import{Box as l}from"../../box/box.component.js";import{StyledPage as c,StyledPageContent as a}from"./page.style.js";import p from"../../../style/utils/filter-styled-system-padding-props.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const m=s=>{var{role:m,title:b,children:y}=s,O=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(s,["role","title","children"]);const g=r(null),{transitionName:d}=O;return e(n,f(u(f(u({className:"carbon-carousel__transition",timeout:{appear:0,enter:0,exit:0}},d&&{classNames:d()}),{nodeRef:g}),O),{children:t(c,f(u({},o("page",O)),{ref:g,role:m,children:[b?e(i,{hasContent:!0,children:b}):null,e(a,f(u({"data-element":"carbon-page-content","data-role":"page-content",p:"34px 40px"},p(O)),{children:e(l,{boxSizing:"border-box",maxWidth:"100%",minWidth:"auto",margin:"0 auto",children:y})}))]}))}))};m.displayName="Page";export{m as default};

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

@@ -1,20 +1 @@
-import styled from "styled-components";
-import { padding } from "styled-system";
-import BaseTheme from "../../../style/themes/base";
-const StyledPage = styled.div`
-  width: 100%;
-  position: absolute;
-`;
-const StyledPageContent = styled.div`
-  ${padding}
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-`;
-StyledPage.defaultProps = {
-  theme: BaseTheme
-};
-StyledPageContent.defaultProps = {
-  theme: BaseTheme
-};
-export { StyledPage, StyledPageContent };
+import e from"styled-components";import{padding as t}from"styled-system";import o from"../../../style/themes/base/index.js";const s=e.div.withConfig({displayName:"page.style__StyledPage",componentId:"sc-7bcaa60e-0"})(["width:100%;position:absolute;"]),i=e.div.withConfig({displayName:"page.style__StyledPageContent",componentId:"sc-7bcaa60e-1"})([""," box-sizing:border-box;width:100%;height:100%;"],t);s.defaultProps={theme:o},i.defaultProps={theme:o};export{s as StyledPage,i as StyledPageContent};

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

@@ -1,73 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { TransitionGroup } from "react-transition-group";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Page from "./page";
-import { PagesWrapperStyle, PagesContent } from "./pages.style";
-const NEXT = "next";
-const PREVIOUS = "previous";
-const TRANSITION_TIME = 500;
-const Pages = ({
-  pageIndex: incomingPageIndex,
-  initialpageIndex = 0,
-  transition = "slide",
-  children,
-  ...props
-}) => {
-  const [pageIndex, setPageIndex] = useState(Number(incomingPageIndex) || Number(initialpageIndex));
-  const transitionDirection = useRef(NEXT);
-  const transitionName = () => {
-    if (transition === "slide") {
-      return `slide-${transitionDirection.current}`;
-    }
-    return `carousel-transition-${transition}`;
-  };
-  const handleVisiblePage = () => {
-    const visiblePage = React.Children.toArray(children)[pageIndex];
-
-    /* istanbul ignore if */
-    if (! /*#__PURE__*/React.isValidElement(visiblePage)) return visiblePage;
-    const additionalProps = {
-      transitionName,
-      timeout: TRANSITION_TIME,
-      "data-element": "visible-page",
-      "data-role": "visible-page",
-      className: visiblePage.props.className
-    };
-    return /*#__PURE__*/React.cloneElement(visiblePage, additionalProps);
-  };
-  const numOfPages = useCallback(() => {
-    return Array.isArray(children) ? children.length : 1;
-  }, [children]);
-  const verifyNewIndex = useCallback(newIndex => {
-    if (newIndex < 0) {
-      // If the new index is negative, select the last page
-      return numOfPages() - 1;
-    }
-    if (newIndex > numOfPages() - 1) {
-      // If the new index is bigger than the number of slides, select the first page
-      return 0;
-    }
-    return newIndex;
-  }, [numOfPages]);
-  useEffect(() => {
-    if (typeof incomingPageIndex === "undefined") return;
-    const newIndex = verifyNewIndex(+incomingPageIndex);
-    const currentIndex = pageIndex; // 1
-
-    if (newIndex === currentIndex) return;
-    if (newIndex > currentIndex) {
-      transitionDirection.current = NEXT;
-    } else {
-      transitionDirection.current = PREVIOUS;
-    }
-    setPageIndex(newIndex);
-  }, [incomingPageIndex, pageIndex, verifyNewIndex]);
-
-  /** Renders the Slide Component */
-  return /*#__PURE__*/React.createElement(PagesWrapperStyle, tagComponent("pages", props), /*#__PURE__*/React.createElement(PagesContent, {
-    className: "carbon-carousel__content"
-  }, /*#__PURE__*/React.createElement(TransitionGroup, null, handleVisiblePage())));
-};
-Pages.displayName = "Pages";
-export default Pages;
-export { Page };
+import{jsx as e}from"react/jsx-runtime";import r,{useState as t,useRef as n,useCallback as o,useEffect as i}from"react";import{TransitionGroup as a}from"react-transition-group";import c from"../../__internal__/utils/helpers/tags/tags.js";export{default as Page}from"./page/page.component.js";import{PagesWrapperStyle as s,PagesContent as l}from"./pages.style.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const u="next",f=f=>{var{pageIndex:b,initialpageIndex:m=0,transition:g="slide",children:y}=f,O=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(f,["pageIndex","initialpageIndex","transition","children"]);const[d,j]=t(Number(b)||Number(m)),P=n(u),h=()=>"slide"===g?`slide-${P.current}`:`carousel-transition-${g}`,v=o((()=>Array.isArray(y)?y.length:1),[y]),w=o((e=>e<0?v()-1:e>v()-1?0:e),[v]);return i((()=>{if(void 0===b)return;const e=w(+b),r=d;e!==r&&(P.current=e>r?u:"previous",j(e))}),[b,d,w]),e(s,(x=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}({},c("pages",O)),N=null!=(N={children:e(l,{className:"carbon-carousel__content",children:e(a,{children:(()=>{const e=r.Children.toArray(y)[d];if(!r.isValidElement(e))return e;const t={transitionName:h,timeout:500,"data-element":"visible-page","data-role":"visible-page",className:e.props.className};return r.cloneElement(e,t)})()})})})?N:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(N)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(N)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(N,e))})),x));var x,N};f.displayName="Pages";export{f as default};

package/esm/components/pages/pages.config.js

@@ -1,76 +1 @@
-import { css } from "styled-components";
-const animationStyle = "all 500ms cubic-bezier(.23,1.10,.69,1.01)";
-const slideAnimation = css`
-  // NEXT
-  .slide-next-enter {
-    opacity: 0;
-    left: 100%;
-  }
-
-  .slide-next-enter.slide-next-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-next-exit {
-    opacity: 1;
-    left: 0;
-  }
-
-  .slide-next-exit.slide-next-exit-active {
-    opacity: 0;
-    left: -100%;
-    transition: ${animationStyle};
-  }
-
-  // PREVIOUS
-  .slide-previous-enter {
-    opacity: 0;
-    left: -100%;
-  }
-
-  .slide-previous-enter.slide-previous-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-previous-exit {
-    opacity: 1;
-    left: 0;
-  }
-
-  .slide-previous-exit.slide-previous-exit-active {
-    opacity: 0;
-    left: 100%;
-    transition: ${animationStyle};
-  }
-`;
-const fadeAnimation = css`
-  // FADE
-  .carousel-transition-fade-enter {
-    opacity: 0;
-    position: absolute;
-  }
-
-  .carousel-transition-fade-enter.carousel-transition-fade-enter-active {
-    opacity: 1;
-    transition: ${animationStyle};
-  }
-
-  .carousel-transition-fade-exit {
-    opacity: 1;
-    position: relative;
-  }
-
-  .carousel-transition-fade-exit.carousel-transition-fade-exit-active {
-    opacity: 0;
-    transition: ${animationStyle};
-  }
-
-  .carbon-carousel__transition {
-    height: 100%;
-  }
-`;
-export { slideAnimation, fadeAnimation };
+import{css as e}from"styled-components";const t="all 500ms cubic-bezier(.23,1.10,.69,1.01)",i=e([".slide-next-enter{opacity:0;left:100%;}.slide-next-enter.slide-next-enter-active{opacity:1;left:0;transition:",";}.slide-next-exit{opacity:1;left:0;}.slide-next-exit.slide-next-exit-active{opacity:0;left:-100%;transition:",";}.slide-previous-enter{opacity:0;left:-100%;}.slide-previous-enter.slide-previous-enter-active{opacity:1;left:0;transition:",";}.slide-previous-exit{opacity:1;left:0;}.slide-previous-exit.slide-previous-exit-active{opacity:0;left:100%;transition:",";}"],t,t,t,t),o=e([".carousel-transition-fade-enter{opacity:0;position:absolute;}.carousel-transition-fade-enter.carousel-transition-fade-enter-active{opacity:1;transition:",";}.carousel-transition-fade-exit{opacity:1;position:relative;}.carousel-transition-fade-exit.carousel-transition-fade-exit-active{opacity:0;transition:",";}.carbon-carousel__transition{height:100%;}"],t,t);export{o as fadeAnimation,i as slideAnimation};

package/esm/components/pages/pages.style.js

@@ -1,27 +1 @@
-import styled from "styled-components";
-import { slideAnimation, fadeAnimation } from "./pages.config";
-import BaseTheme from "../../style/themes/base";
-import { StyledDivider, StyledHeading } from "../heading/heading.style";
-const PagesContent = styled.div`
-  border: none;
-
-  ${StyledHeading} {
-    padding-left: 45px;
-    margin-bottom: 34px;
-  }
-
-  ${StyledDivider} {
-    display: none;
-  }
-`;
-const PagesWrapperStyle = styled.div`
-  .carbon-carousel__content {
-    position: relative;
-  }
-  ${slideAnimation}
-  ${fadeAnimation}
-`;
-PagesContent.defaultProps = {
-  theme: BaseTheme
-};
-export { PagesWrapperStyle, PagesContent };
+import e from"styled-components";import{slideAnimation as o,fadeAnimation as t}from"./pages.config.js";import n from"../../style/themes/base/index.js";import{StyledHeading as s,StyledDivider as i}from"../heading/heading.style.js";const p=e.div.withConfig({displayName:"pages.style__PagesContent",componentId:"sc-fc988b27-0"})(["border:none;","{padding-left:45px;margin-bottom:34px;}","{display:none;}"],s,i),a=e.div.withConfig({displayName:"pages.style__PagesWrapperStyle",componentId:"sc-fc988b27-1"})([".carbon-carousel__content{position:relative;}"," ",""],o,t);p.defaultProps={theme:n};export{p as PagesContent,a as PagesWrapperStyle};

package/esm/components/password/index.js

@@ -1 +1 @@
-export { default } from "./password.component";
+export{Password as default}from"./password.component.js";

package/esm/components/password/password.component.js

@@ -1,40 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useState } from "react";
-import { StyledPassword, HiddenAriaLive } from "./password.style";
-import guid from "../../__internal__/utils/helpers/guid";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import useLocale from "../../hooks/__internal__/useLocale";
-import ButtonMinor from "../button-minor/button-minor.component";
-export const Password = ({
-  id,
-  disabled,
-  forceObscurity = false,
-  ...rest
-}) => {
-  const internalInputId = useRef(id || guid());
-  const l = useLocale();
-  const [passwordShown, setPasswordShown] = useState(false);
-  const visibleInput = !forceObscurity && passwordShown;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPassword, _extends({
-    "data-element": "styled-password-container",
-    id: internalInputId.current,
-    autoComplete: "off",
-    type: visibleInput ? "text" : "password",
-    disabled: disabled
-  }, rest, tagComponent("password", rest)), /*#__PURE__*/React.createElement(ButtonMinor, {
-    "aria-label": visibleInput ? l.password?.ariaLabelHide?.() : l.password?.ariaLabelShow?.(),
-    "aria-controls": internalInputId.current,
-    onClick: () => setPasswordShown(!passwordShown),
-    pr: 1,
-    buttonType: "tertiary",
-    iconType: visibleInput ? "hide" : "view",
-    iconPosition: "before",
-    size: "small",
-    disabled: forceObscurity || disabled,
-    isInPassword: true
-  }, visibleInput ? l.password?.buttonLabelHide?.() : l.password?.buttonLabelShow?.())), /*#__PURE__*/React.createElement(HiddenAriaLive, {
-    role: "status",
-    "aria-live": "polite"
-  }, visibleInput ? l.password.ariaLiveShownMessage() : l.password.ariaLiveHiddenMessage()));
-};
-export default Password;
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useRef as o,useState as n}from"react";import{StyledPassword as i,HiddenAriaLive as l}from"./password.style.js";import a from"../../__internal__/utils/helpers/guid/index.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../hooks/__internal__/useLocale/useLocale.js";import{ButtonMinor as u}from"../button-minor/button-minor.component.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){d(e,r,t[r])}))}return e}const b=d=>{var b,f,y,O,m,v,w,j,{id:g,disabled:h,forceObscurity:P=!1}=d,_=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(d,["id","disabled","forceObscurity"]);const S=o(g||a()),L=c(),[x,k]=n(!1),D=!P&&x;return e(r,{children:[t(i,(E=p({"data-element":"styled-password-container",id:S.current,autoComplete:"off",type:D?"text":"password",disabled:h},_,s("password",_)),H={children:t(u,{"aria-label":D?null===(f=L.password)||void 0===f||null===(b=f.ariaLabelHide)||void 0===b?void 0:b.call(f):null===(O=L.password)||void 0===O||null===(y=O.ariaLabelShow)||void 0===y?void 0:y.call(O),"aria-controls":S.current,onClick:()=>k(!x),pr:1,buttonType:"tertiary",iconType:D?"hide":"view",iconPosition:"before",size:"small",disabled:P||h,isInPassword:!0,children:D?null===(v=L.password)||void 0===v||null===(m=v.buttonLabelHide)||void 0===m?void 0:m.call(v):null===(j=L.password)||void 0===j||null===(w=j.buttonLabelShow)||void 0===w?void 0:w.call(j)})},H=null!=H?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(E,Object.getOwnPropertyDescriptors(H)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(H)).forEach((function(e){Object.defineProperty(E,e,Object.getOwnPropertyDescriptor(H,e))})),E)),t(l,{role:"status","aria-live":"polite",children:D?L.password.ariaLiveShownMessage():L.password.ariaLiveHiddenMessage()})]});var E,H};export{b as Password,b as default};

package/esm/components/password/password.style.js

@@ -1,8 +1 @@
-import styled from "styled-components";
-import Textbox from "../textbox";
-import visuallyHiddenStyles from "../../style/utils/visually-hidden";
-const StyledPassword = styled(Textbox)``;
-const HiddenAriaLive = styled.p`
-  ${visuallyHiddenStyles}
-`;
-export { StyledPassword, HiddenAriaLive };
+import o from"styled-components";import{Textbox as t}from"../textbox/textbox.component.js";import s from"../../style/utils/visually-hidden.js";const e=o(t).withConfig({displayName:"password.style__StyledPassword",componentId:"sc-34348134-0"})([""]),i=o.p.withConfig({displayName:"password.style__HiddenAriaLive",componentId:"sc-34348134-1"})(["",""],s);export{i as HiddenAriaLive,e as StyledPassword};