carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -0,0 +1,148 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { ValidationProps } from "../../__internal__/validations";
+declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export interface NumeralDateValue {
+    dd?: string;
+    mm?: string;
+    yyyy?: string;
+}
+export interface NumeralDateEvent {
+    target: {
+        name?: string;
+        id: string;
+        value: NumeralDateValue;
+    };
+}
+export interface DateInputIds {
+    day?: string;
+    month?: string;
+    year?: string;
+}
+export interface NumeralDateProps extends Pick<ValidationProps, "error">, MarginProps, TagProps {
+    /**
+     * @deprecated `adaptiveLabelBreakpoint` has been deprecated.
+     * It is recommended to use `useMediaQuery` hook to implement adaptive behaviour.
+     * Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set
+     **/
+    adaptiveLabelBreakpoint?: number;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Array of strings to define custom input layout. */
+    dateFormat?: ValidDateFormat;
+    /**  Value  */
+    value: NumeralDateValue;
+    /** When true, enables the internal errors to be displayed */
+    enableInternalError?: boolean;
+    /**
+     * When true, enables the internal warnings to be displayed
+     * @deprecated The `enableInternalWarning` prop is deprecated and will be removed in a future release.
+     **/
+    enableInternalWarning?: boolean;
+    /**
+     * [Legacy] Help content to be displayed under an input
+     * @deprecated The `fieldHelp` prop is deprecated and will be removed in a future release. Please use the `legendHint` prop instead.
+     * */
+    fieldHelp?: React.ReactNode;
+    /** Content for the hint text below the legend. */
+    legendHint?: string;
+    /** `id` for events */
+    id?: string;
+    /** `name` for events */
+    name?: string;
+    /**
+     * [Legacy] The content for the component's label
+     * @deprecated The `label` prop is deprecated and will be removed in a future release. Please use the `legend` prop instead.
+     * */
+    label?: string;
+    /** The content for the component's legend */
+    legend?: string;
+    /**
+     * [Legacy] Text alignment of label
+     * @deprecated Custom label alignment is no longer supported on this component.
+     * */
+    labelAlign?: "left" | "right";
+    /**
+     * Field labels alignment
+     * @deprecated Custom field help alignment is no longer supported on this component.
+     * */
+    fieldLabelsAlign?: "left" | "right";
+    /**
+     * [Legacy] Text applied to label help tooltip, will be rendered as hint text when `validationRedesignOptIn` is true.
+     * @deprecated The `labelHelp` prop is deprecated and will be removed in a future release.
+     */
+    labelHelp?: React.ReactNode;
+    /**
+     * [Legacy] When true, label is placed in line with an input
+     * @deprecated Inline labels are no longer supported on this component.
+     * */
+    labelInline?: boolean;
+    /**
+     * [Legacy] Label width
+     * @deprecated Custom label widths are no longer supported on this component.
+     * */
+    labelWidth?: number;
+    /**
+     * [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8)
+     * @deprecated Custom label spacing is no longer supported on this component
+     * */
+    labelSpacing?: 1 | 2;
+    /** Blur event handler */
+    onBlur?: (ev: NumeralDateEvent) => void;
+    /** Change event handler */
+    onChange: (ev: NumeralDateEvent) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /**
+     * [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs
+     * @deprecated Custom validation icon placement is no longer supported on this component.
+     * */
+    validationOnLabel?: boolean;
+    /**
+     * [Legacy] Overrides the default tooltip position
+     * @deprecated Tooltips are no longer supported on this component.
+     * */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /**
+     * [Legacy] Aria label for rendered help component
+     * @deprecated Custom help component ARIA labelling is no longer supported on this component,
+     * */
+    helpAriaLabel?: string;
+    /**
+     * A React ref to pass to the input corresponding to the day
+     */
+    dayRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * A React ref to pass to the input corresponding to the month
+     */
+    monthRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * A React ref to pass to the input corresponding to the year
+     */
+    yearRef?: React.ForwardedRef<HTMLInputElement>;
+    /** Render the ValidationMessage above the NumeralDate inputs. */
+    validationMessagePositionTop?: boolean;
+    /** Allow consumers to set IDs for each of the field inputs */
+    inputIds?: DateInputIds;
+    /**
+     * [Legacy] Indicate additional information.
+     * @deprecated Information validation is no longer supported on this component.
+     */
+    info?: string | boolean;
+    /**
+     * Indicate warning information.
+     * @deprecated Warning validation is deprecated and will be removed in a future release.
+     */
+    warning?: string | boolean;
+}
+export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
+export type NumeralDateHandle = {
+    focus: () => void;
+} | null;
+export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
+export default NumeralDate;

package/esm/components/numeral-date/numeral-date.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as r,useImperativeHandle as n,useState as a,useMemo as l}from"react";import i from"invariant";import o from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import d from"../../style/utils/filter-styled-system-margin-props.js";import y from"./numeral-date.style.js";import{TextInput as m}from"../textbox/__internal__/__next__/text-input.component.js";import s from"../../__internal__/utils/helpers/guid/index.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import c from"../../__internal__/fieldset/__next__/fieldset.component.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 f(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){p(e,t,r[t])}))}return e}function b(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 g=[["dd","mm","yyyy"],["mm","dd","yyyy"],["yyyy","mm","dd"],["dd","mm"],["mm","dd"],["mm","yyyy"]],v=e=>{const t=(new Date).getFullYear(),{format:r}=new Intl.DateTimeFormat(e,{month:"long"});return[...Array(12).keys()].map((e=>r(new Date(Date.UTC(t,e)))))},O=(e,t,r)=>({dd:e.numeralDate.validation.day(t?v(e.locale())[+t-1]:void 0,r),mm:e.numeralDate.validation.month(),yyyy:e.numeralDate.validation.year()}),h=e=>{if(!(null==e?void 0:e.trim()))return;const t=Number(e);return Number.isNaN(t)?void 0:t},j=(e,t)=>{switch(e){case"mm":return t.numeralDate.labels.month();case"yyyy":return t.numeralDate.labels.year();default:return t.numeralDate.labels.day()}},_={default:{small:"48px",medium:"56px",large:"64px"},year:{small:"64px",medium:"72px",large:"80px"}},w=t(((t,p)=>{var{dateFormat:v=["dd","mm","yyyy"],error:w="",size:D="medium",disabled:P,id:x,name:I,onBlur:N,onChange:M,value:S,legend:k,legendHint:F,required:L,readOnly:A,enableInternalError:E,enableInternalWarning:H,dayRef:R,monthRef:T,yearRef:q,validationMessagePositionTop:z=!0,inputIds:B,label:W,labelAlign:C,fieldLabelsAlign:J,warning:Y="",labelInline:$,labelWidth:U,labelHelp:G,labelSpacing:K,fieldHelp:Q,adaptiveLabelBreakpoint:V,tooltipPosition:X,helpAriaLabel:Z}=t,ee=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(t,["dateFormat","error","size","disabled","id","name","onBlur","onChange","value","legend","legendHint","required","readOnly","enableInternalError","enableInternalWarning","dayRef","monthRef","yearRef","validationMessagePositionTop","inputIds","label","labelAlign","fieldLabelsAlign","warning","labelInline","labelWidth","labelHelp","labelSpacing","fieldHelp","adaptiveLabelBreakpoint","tooltipPosition","helpAriaLabel"]);const te=u(),{current:re}=r(x||s()),ne=r({dd:s(),mm:s(),yyyy:s()});var ae,le,ie;const oe={dd:null!==(ae=null==B?void 0:B.day)&&void 0!==ae?ae:ne.current.dd,mm:null!==(le=null==B?void 0:B.month)&&void 0!==le?le:ne.current.mm,yyyy:null!==(ie=null==B?void 0:B.year)&&void 0!==ie?ie:ne.current.yyyy},de=r(v.map((()=>null))),ye=k||W;n(p,(()=>({focus:()=>{var e;null===(e=de.current[0])||void 0===e||e.focus()}})));const[me,se]=a(f({},Object.fromEntries(v.map((e=>[e,""]))))),ue=l((()=>!v||g.find((e=>JSON.stringify(e)===JSON.stringify(v)))),[v]);i(ue,"Forbidden prop dateFormat supplied to NumeralDate. Only one of these date formats is allowed: ['dd', 'mm', 'yyyy'], ['mm', 'dd', 'yyyy'], ['yyyy', 'mm', 'dd'], ['dd', 'mm'], ['mm', 'dd'], ['mm', 'yyyy']");const ce=e=>({target:{name:I,id:re,value:e}}),pe=()=>{(E||H)&&se((e=>f({},e,((e,{dd:t,mm:r,yyyy:n})=>{const a={dd:"",mm:"",yyyy:""},{daysInMonth:l,monthForMessage:i}=((e,t)=>{const r=h(e);if(void 0===r||!Number.isInteger(r)||r>12||r<1)return{daysInMonth:31};const n=t?h(t):(new Date).getFullYear();if(void 0===n||!Number.isInteger(n))return{daysInMonth:31};const a=new Date(n,r,0).getDate();return Number.isNaN(a)?{daysInMonth:31}:{daysInMonth:a,monthForMessage:e}})(r,n),o=h(t),d=h(r),y=h(n);return void 0!==o&&(o>l||o<1)&&(a.dd=O(e,i,String(l)).dd),void 0!==d&&(d>12||d<1)&&(a.mm=O(e).mm),void 0!==y&&(y<1800||y>2200)&&(a.yyyy=O(e).yyyy),a})(te,S)))),setTimeout((()=>{const e=!de.current.find((e=>e===document.activeElement));N&&e&&N(ce(S))}),5)},fe=Object.keys(me).reduce(((e,t)=>me[t]?`${e+me[t]}\n`:e),""),be=E?fe+w:w,ge=H?fe+Y:Y;var ve;return e(c,b(f({id:re,legend:ye,legendHint:null!==(ve=null!=F?F:Q)&&void 0!==ve?ve:G,isDisabled:P,isRequired:L,error:"string"==typeof be?be:void 0,warning:"string"==typeof ge?ge:void 0,validationMessagePositionTop:z,name:I,size:D},o("numeral-date",ee),d(ee)),{children:e(y,{$size:D,children:v.map(((t,r)=>{let n;switch(t.slice(0,2)){case"dd":n=R;break;case"mm":n=T;break;case"yy":n=q}const a="yyyy"===t?_.year[D]:_.default[D];var l;return e("div",{className:"numeral-date-wrapper"+(L?" fieldset-required-input":""),children:e(m,{id:oe[t],label:j(t,te),disabled:P,readOnly:A,error:!!be,warning:!!ge,size:D,value:null!==(l=S[t])&&void 0!==l?l:"",inputMode:"numeric",onChange:e=>((e,t)=>{const{value:r}=e.target,n=b(f({},S),{[t]:r});M(ce(n))})(e,t),onBlur:pe,ref:e=>((e,t,r)=>{de.current[t]=e,r&&("function"==typeof r?r(e):r.current=e)})(e,r,n),maxWidth:a,required:L,my:0})},t)}))})}))}));export{w as NumeralDate,w as default};

package/esm/components/numeral-date/numeral-date.style.d.ts

@@ -0,0 +1,5 @@
+declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
+    name?: string;
+    $size: "small" | "medium" | "large";
+}, never>;
+export default StyledNumeralDate;

package/esm/components/numeral-date/numeral-date.style.js

@@ -0,0 +1 @@
+import a,{css as l}from"styled-components";const o={small:{font:"var(--global-font-static-comp-regular-s)",gap:"var(--global-space-comp-m)"},medium:{font:"var(--global-font-static-comp-regular-m)",gap:"var(--global-space-comp-l)"},large:{font:"var(--global-font-static-comp-regular-l)",gap:"var(--global-space-comp-xl)"}},e=a.div.withConfig({displayName:"numeral-date.style__StyledNumeralDate",componentId:"carbon_v162_12_0__sc-cb8089db-0"})(["display:inline-flex;",""],(({$size:a})=>l(["gap:",";.numeral-date-wrapper label{font:",";}"],o[a].gap,o[a].font)));export{e as default};

package/esm/components/option-tile/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionTile, OptionTileGroup } from "./option-tile.component";
+export type { OptionTileProps, OptionTileVariant, OptionTileGroupProps, } from "./option-tile.component";

package/esm/components/option-tile/index.js

@@ -0,0 +1 @@
+export{OptionTile,OptionTileGroup}from"./option-tile.component.js";

package/esm/components/option-tile/option-tile.component.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export type OptionTileVariant = "single" | "multiple" | "custom";
+interface BaseOptionTileProps extends TagProps {
+    /** Applies a disabled state to the tile. */
+    disabled?: boolean;
+}
+interface OptionTileSingleProps extends BaseOptionTileProps {
+    /** The single-select visual variant. */
+    variant: "single";
+    /** Optional number shown before the title. */
+    number?: number | string;
+    /** Visible tile text. */
+    title: string;
+    /** Called when the single tile is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface OptionTileMultipleProps extends BaseOptionTileProps {
+    /** The multiple-select visual variant. */
+    variant: "multiple";
+    /** Visible tile label. */
+    label: string;
+    /** Checked state for the option. */
+    checked: boolean;
+    /** Called whenever the checked state changes. */
+    onChange: (checked: boolean) => void;
+}
+interface OptionTileCustomProps extends BaseOptionTileProps {
+    /** The custom-entry visual variant. */
+    variant: "custom";
+    /** Visible tile text in inactive state. */
+    title: string;
+    /** Accessible label for the custom input. Falls back to the group aria-label. */
+    inputAriaLabel?: string;
+    /** Optional legacy placeholder text. This is intentionally ignored to avoid deprecated placeholder styling. */
+    inputPlaceholder?: string;
+    /** The value of the custom input. */
+    customValue: string;
+    /** Called whenever the custom input value changes. */
+    onCustomValueChange: (value: string) => void;
+    /** Called when the custom tile active state changes. */
+    onCustomActiveChange?: (isActive: boolean) => void;
+}
+export type OptionTileProps = OptionTileSingleProps | OptionTileMultipleProps | OptionTileCustomProps;
+export interface OptionTileGroupProps extends TagProps {
+    /** Tile elements rendered in a vertical stack. */
+    children: React.ReactNode;
+    /** Selection behavior context for grouped tiles. */
+    selectionType: "single" | "multiple";
+    /** Visible label for the group, rendered as the legend of the labelset. */
+    legend?: string;
+    /** Additional hint text rendered below the legend. */
+    legendHint?: React.ReactNode;
+    /** Applies a disabled state to the whole group's labelset. */
+    disabled?: boolean;
+    /** Flag to configure the group as mandatory. */
+    required?: boolean;
+    /** Accessible label when no visible legend exists. */
+    "aria-label": string;
+}
+export declare const OptionTile: (props: OptionTileProps) => React.JSX.Element;
+export declare const OptionTileGroup: ({ children, selectionType, legend, legendHint, disabled, required, "aria-label": ariaLabel, ...rest }: OptionTileGroupProps) => React.JSX.Element;
+export default OptionTile;

package/esm/components/option-tile/option-tile.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as i,useRef as r,useEffect as l}from"react";import o from"invariant";import a from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/__next__/fieldset.component.js";import{StyledOptionTileGroup as s,StyledOptionTileButton as d,StyledOptionTileMultiple as u,StyledOptionTileCustomActive as p,StyledNumberBadge as b,StyledTileText as y,StyledCheckboxDecoration as f,StyledCustomIcon as g,StyledCustomInput as h}from"./option-tile.style.js";function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(t){m(e,t,n[t])}))}return e}function C(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function O(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},l=Object.keys(e);for(i=0;i<l.length;i++)n=l[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(i=0;i<l.length;i++)n=l[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}const j=n.createContext(void 0),k=n=>{var{number:i,title:r,disabled:l,onClick:o}=n,c=O(n,["number","title","disabled","onClick"]);return t(d,C(v({type:"button",$isDisabled:l,disabled:l,onClick:o,"data-option-tile-hotkey":/^[1-9]$/.test(String(i))?String(i):void 0},a("option-tile",c)),{children:[void 0!==i&&e(b,{children:i}),e(y,{children:r})]}))},w=n=>{var{label:i,checked:r,disabled:l,onChange:o}=n,c=O(n,["label","checked","disabled","onChange"]);const s=()=>{l||o(!r)};return t(u,C(v({role:"checkbox","aria-checked":r,tabIndex:l?void 0:0,$isSelected:r,$isDisabled:l,"aria-disabled":l,onClick:s,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),s())}},a("option-tile",c)),{children:[e(f,{"data-role":"option-tile-checkbox",$isSelected:r,"aria-hidden":"true",children:e("svg",{focusable:"false",viewBox:"0 0 16 12",fill:"none",children:e("path",{d:"M15.3254 0.231177C15.0768 0.0725131 14.7858 -0.0078498 14.4904 0.000604729C14.1106 0.0116071 13.7498 0.168628 13.4841 0.43853L5.39406 8.47955L2.522 5.62489C2.38757 5.48677 2.22699 5.37639 2.04948 5.30014C1.87029 5.22317 1.67746 5.1825 1.48226 5.18053C1.28706 5.17856 1.09344 5.21532 0.912713 5.28865C0.731991 5.36199 0.567806 5.47043 0.429775 5.60762C0.291743 5.74482 0.182642 5.90801 0.108858 6.08764C0.035074 6.26727 -0.00190855 6.45972 7.58261e-05 6.65373C0.0020602 6.84775 0.0429724 7.03941 0.120415 7.21751C0.197135 7.39395 0.308179 7.55356 0.447147 7.68717L4.35671 11.573C4.63187 11.8464 5.005 12 5.39406 12C5.78312 12 6.15633 11.8464 6.43149 11.573L15.559 2.50077C15.7693 2.29623 15.9128 2.03357 15.971 1.74686C16.0294 1.45899 15.9991 1.16029 15.8839 0.889848C15.7687 0.619408 15.574 0.389838 15.3254 0.231177Z"})})}),e(y,{children:i})]}))},D=c=>{var{title:s,disabled:u,inputAriaLabel:b,customValue:f,onCustomValueChange:m,onCustomActiveChange:k}=c,w=O(c,["title","disabled","inputAriaLabel","customValue","onCustomValueChange","onCustomActiveChange"]);const D=n.useContext(j),P=null==D?void 0:D.selectionType,_=b||(null==D?void 0:D.ariaLabel)||s;o("multiple"!==P,"OptionTile with variant='custom' can only be used within a single selection OptionTileGroup.");const[x,S]=i(!1),T=r(null);l((()=>{var e;x&&(null===(e=T.current)||void 0===e||e.focus())}),[x]);const E=e=>{S(e),null==k||k(e)};return x?t(p,C(v({onBlur:()=>{E(!1)},$isDisabled:u},a("option-tile",w)),{children:[e(g,{"data-role":"option-tile-icon",type:"edit",size:"small","aria-hidden":!0}),e(h,{ref:T,"aria-label":_,value:f,onChange:e=>m(e.target.value),onKeyDown:e=>{"Escape"===e.key&&(e.preventDefault(),E(!1))}})]})):t(d,C(v({type:"button",$isDisabled:u,disabled:u,onClick:()=>E(!0),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),E(!0))}},a("option-tile",w)),{children:[e(g,{"data-role":"option-tile-icon",type:"edit",size:"small","aria-hidden":!0}),e(y,{children:s})]}))},P=t=>"single"===t.variant?e(k,v({},t)):"multiple"===t.variant?e(w,v({},t)):e(D,v({},t)),_=t=>{var{children:n,selectionType:i,legend:r,legendHint:l,disabled:o,required:d,"aria-label":u}=t,p=O(t,["children","selectionType","legend","legendHint","disabled","required","aria-label"]);const b=e(s,C(v({"data-selection-type":i,onKeyDown:e=>{if("single"!==i)return;const t=e.target;if(t&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName||t.isContentEditable))return;if(!/^[1-9]$/.test(e.key))return;const n=e.currentTarget.querySelector(`[data-option-tile-hotkey="${e.key}"]`);n&&!n.disabled&&(e.preventDefault(),n.click())}},!r&&{role:"group","aria-label":u},a("option-tile-group",p)),{children:n}));return e(j.Provider,{value:{selectionType:i,ariaLabel:u},children:r?e(c,{legend:r,legendHint:l,isDisabled:o,isRequired:d,children:b}):b})};export{P as OptionTile,_ as OptionTileGroup,P as default};

package/esm/components/option-tile/option-tile.style.d.ts

@@ -0,0 +1,14 @@
+type BaseStateProps = {
+    $isSelected?: boolean;
+    $isDisabled?: boolean;
+};
+export declare const StyledNumberBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledCustomIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledTileText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledCheckboxDecoration: import("styled-components").StyledComponent<"span", any, BaseStateProps, never>;
+export declare const StyledCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledOptionTileButton: import("styled-components").StyledComponent<"button", any, BaseStateProps, never>;
+export declare const StyledOptionTileMultiple: import("styled-components").StyledComponent<"div", any, BaseStateProps, never>;
+export declare const StyledOptionTileCustomActive: import("styled-components").StyledComponent<"div", any, BaseStateProps, never>;
+export declare const StyledOptionTileGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/esm/components/option-tile/option-tile.style.js

@@ -0,0 +1 @@
+import o,{css as i}from"styled-components";import t from"../../style/utils/add-focus-styling.js";import a from"../icon/icon.component.js";import"../icon/icon.style.js";const r=o.span.withConfig({displayName:"option-tile.style__StyledNumberBadge",componentId:"carbon_v162_12_0__sc-7fa99ef1-0"})(["box-sizing:border-box;flex-shrink:0;min-width:var(--global-size-xs);height:var(--global-size-xs);display:inline-flex;align-items:center;justify-content:center;padding:0 var(--global-space-comp-xs);border:var(--global-borderwidth-xs) solid var(--input-quickpick-border-default);border-radius:var(--global-radius-action-circle);background-color:var(--input-quickpick-bg-default);color:var(--container-action-txt-default);font:var(--global-font-static-comp-medium-m);font-variant-numeric:tabular-nums;"]),e=o(a).withConfig({displayName:"option-tile.style__StyledCustomIcon",componentId:"carbon_v162_12_0__sc-7fa99ef1-1"})(["flex-shrink:0;width:var(--global-size-3-xs);height:var(--global-size-3-xs);margin-left:4px;font-size:var(--global-size-3-xs);line-height:var(--global-size-3-xs);color:var(--container-action-icon-default);&::before{font-size:var(--global-size-3-xs);line-height:var(--global-size-3-xs);}"]),n=o.span.withConfig({displayName:"option-tile.style__StyledTileText",componentId:"carbon_v162_12_0__sc-7fa99ef1-2"})(["font:var(--global-font-static-comp-regular-m);text-align:left;"]),l=o.span.withConfig({displayName:"option-tile.style__StyledCheckboxDecoration",componentId:"carbon_v162_12_0__sc-7fa99ef1-3"})(["box-sizing:border-box;flex-shrink:0;width:var(--global-size-2-xs);height:var(--global-size-2-xs);display:inline-flex;align-items:center;justify-content:center;border:var(--global-borderwidth-xs) solid var(--input-typical-border-default);border-radius:var(--global-radius-action-s);background-color:var(--input-typical-bg-default);svg{width:14px;height:auto;}svg path{fill:transparent;}",""],(({$isSelected:o})=>o&&i(["svg path{fill:var(--input-typical-icon-active);}"]))),c=o.input.withConfig({displayName:"option-tile.style__StyledCustomInput",componentId:"carbon_v162_12_0__sc-7fa99ef1-4"})(["box-sizing:border-box;flex:1 1 auto;width:100%;height:var(--global-size-s);min-width:0;padding:0 var(--global-space-comp-s);border:var(--global-borderwidth-xs) solid var(--input-typical-border-default);border-radius:var(--global-radius-action-m);background-color:var(--input-typical-bg-default);color:var(--container-action-txt-default);font:var(--global-font-static-comp-regular-m);text-overflow:clip;white-space:nowrap;&:focus{","}"],t()),s=i(["box-sizing:border-box;width:424px;height:48px;display:flex;align-items:center;gap:var(--global-space-comp-m);padding:12px;border:var(--global-borderwidth-xs) solid transparent;border-radius:var(--global-radius-container-m);background-color:var(--container-action-bg-default);color:var(--container-action-txt-default);cursor:pointer;transition:border-color 0.15s ease,background-color 0.15s ease;&:hover{background-color:var(--input-quickpick-bg-hover);color:var(--container-action-txt-hover);}&:focus-visible{","}",""],t(),(({$isDisabled:o})=>o&&i(["cursor:not-allowed;background-color:var(--container-action-bg-disabled);border-color:transparent;color:var(--container-action-txt-disabled);&:hover{background-color:var(--container-action-bg-disabled);color:var(--container-action-txt-disabled);}","{border-color:var(--container-action-border-inactive);color:var(--container-action-txt-disabled);}","{border-color:var(--input-typical-border-disabled);background-color:var(--input-typical-bg-disabled);svg path{fill:var(--input-typical-icon-disabled);}}","{color:var(--container-action-txt-disabled);}"],r,l,e))),d=o.button.withConfig({displayName:"option-tile.style__StyledOptionTileButton",componentId:"carbon_v162_12_0__sc-7fa99ef1-5"})([""," text-align:left;&:hover ","{background-color:var(--input-quickpick-bg-hover);border-color:var(--input-quickpick-border-hover);}"],s,r),p=o.div.withConfig({displayName:"option-tile.style__StyledOptionTileMultiple",componentId:"carbon_v162_12_0__sc-7fa99ef1-6"})([""," ",""],s,(({$isSelected:o,$isDisabled:t})=>o&&!t&&i(["background-color:var(--input-quickpick-bg-active);border-color:transparent;color:var(--input-quickpick-txt-active);&:hover{background-color:var(--input-quickpick-bg-active);color:var(--input-quickpick-txt-active);}"]))),b=o.div.withConfig({displayName:"option-tile.style__StyledOptionTileCustomActive",componentId:"carbon_v162_12_0__sc-7fa99ef1-7"})([""," background-color:var(--input-quickpick-bg-active);border-color:transparent;cursor:text;&:hover{background-color:var(--input-quickpick-bg-active);}"],s),v=o.div.withConfig({displayName:"option-tile.style__StyledOptionTileGroup",componentId:"carbon_v162_12_0__sc-7fa99ef1-8"})(["display:flex;flex-direction:column;align-items:flex-start;gap:4px;"]);export{l as StyledCheckboxDecoration,e as StyledCustomIcon,c as StyledCustomInput,r as StyledNumberBadge,d as StyledOptionTileButton,b as StyledOptionTileCustomActive,v as StyledOptionTileGroup,p as StyledOptionTileMultiple,n as StyledTileText};

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

@@ -0,0 +1,34 @@
+import React from "react";
+/**
+ * Renders navigation Buttons and current page input
+ */
+export interface PaginationNavigationProps {
+    /** Current visible page */
+    currentPage: number;
+    /** Page size, number of elements on the current page */
+    pageSize: number;
+    /** Total number of pages */
+    totalPages: 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: (currentPage: number, pageSize: number, origin: string) => void;
+    /** Should the `First` and `Last` navigation buttons be shown */
+    showFirstAndLastButtons?: boolean;
+    /** If true, page number navigation will be changed to a non-interactive label */
+    interactivePageNumber?: boolean;
+    /** Size of the button */
+    size?: "small" | "medium";
+    /** Alignment of the content. */
+    alignment?: "fill" | "centred";
+}
+declare const PaginationNavigation: ({ currentPage, pageSize, totalPages, setCurrentPage, onNext, onFirst, onPrevious, onLast, onPagination, showFirstAndLastButtons, interactivePageNumber, size, alignment, }: PaginationNavigationProps) => React.JSX.Element;
+export default PaginationNavigation;

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

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as r,jsx as i}from"react/jsx-runtime";import{useState as n,useRef as t,useEffect as l}from"react";import a from"../../../hooks/__internal__/useLocale/useLocale.js";import{StyledPaginationNavigation as o,StyledButtonWrapper as c,StyledCurrentPageContainer as u,StyledInputWrapper as s,StyledCurrentPage as p}from"./pagination-navigation.style.js";import{Textbox as d}from"../../textbox/textbox.component.js";import{Button as v}from"../../button/__next__/button.component.js";import g from"../../icon/icon.component.js";import"../../icon/icon.style.js";import{Typography as h}from"../../typography/typography.component.js";import m from"../../../__internal__/utils/helpers/guid/index.js";const b=({currentPage:b,pageSize:f,totalPages:_,setCurrentPage:y,onNext:x,onFirst:j,onPrevious:k,onLast:z,onPagination:L,showFirstAndLastButtons:$,interactivePageNumber:C,size:P,alignment:A})=>{const N=a(),[T,X]=n(b),w=t(null),Y=t(null),{current:B}=t(m()),F=_>1,D=b>1&&$,E=b>1,I=b<_,K=b<_&&$;l((()=>{X(b)}),[b]);const M=t(null);l((()=>{if(M.current){switch(M.current){case"next":var e;null===(e=Y.current)||void 0===e||e.focus();break;case"previous":var r;null===(r=w.current)||void 0===r||r.focus()}M.current=null}}),[b]);const O=e=>{const r=b+1;r===_&&(M.current="previous"),y(r),null==x||x(e),L(r,f,"next")},R=e=>{M.current="previous",y(_),null==z||z(e),L(_,f,"last")},S=e=>{X(e.target.value)},q=()=>{const e=Number(T);if(Number.isInteger(e)){if(e<1)return X(1),y(1),void L(1,f,"input");if(e>_)return X(_),y(_),void L(_,f,"input");y(e),L(e,f,"input")}else X(b)},G=e=>{"Enter"===e.key&&q()};return e(o,{$alignment:A,children:[F&&e(r,{children:[$&&i(c,{$visible:D,children:i(v,{variantType:"subtle","aria-label":null===(H=(J=N.pager).firstAriaLabel)||void 0===H?void 0:H.call(J,_),size:P,onClick:e=>{M.current="next",y(1),null==j||j(e),L(1,f,"first")},children:i(g,{type:"chevron_first_pagination"})})}),i(c,{$visible:E,children:i(v,{variantType:"subtle","aria-label":null===(Q=(U=N.pager).previousAriaLabel)||void 0===Q?void 0:Q.call(U,b-1,_),size:P,onClick:e=>{const r=b-1;1===r&&(M.current="next"),y(r),null==k||k(e),L(r,f,"previous")},ref:w,children:i(g,{type:"chevron_left_thick"})})})]}),(()=>{var r,n,t,l,a,o;return C&&_>1?e(u,{children:[i(h,{id:B,screenReaderOnly:!0,children:`${N.pager.pageX(b)} ${null===(t=(l=N.pager).ofY)||void 0===t?void 0:t.call(l,_)}`}),i("div",{"aria-hidden":"true",children:N.pager.pageX()}),i(s,{$size:P||"medium",children:i(d,{"aria-label":N.pager.pageX(b),"aria-describedby":B,value:T,onChange:S,onBlur:q,onKeyDown:G,size:P,inputMode:"numeric"})}),i("div",{"aria-hidden":"true",children:null===(a=(o=N.pager).ofY)||void 0===a?void 0:a.call(o,_)})]}):e(p,{children:[N.pager.pageX(b)," ",null===(r=(n=N.pager).ofY)||void 0===r?void 0:r.call(n,_)]})})(),F&&(()=>{var n,t,l,a;return e(r,{children:[i(c,{$visible:I,children:i(v,{variantType:"subtle","aria-label":null===(n=(t=N.pager).nextAriaLabel)||void 0===n?void 0:n.call(t,b+1,_),size:P,onClick:O,ref:Y,children:i(g,{type:"chevron_right_thick"})})}),$&&i(c,{$visible:K,children:i(v,{variantType:"subtle","aria-label":null===(l=(a=N.pager).lastAriaLabel)||void 0===l?void 0:l.call(a,_),size:P,onClick:R,children:i(g,{type:"chevron_last_pagination"})})})]})})()]});var H,J,Q,U};export{b as default};

package/esm/components/pager/__internal__/pagination-navigation.style.d.ts

@@ -0,0 +1,13 @@
+interface StyledPaginationNavigationProps {
+    $alignment?: "fill" | "centred";
+}
+export declare const StyledPaginationNavigation: import("styled-components").StyledComponent<"div", any, StyledPaginationNavigationProps, never>;
+export declare const StyledButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    $visible?: boolean;
+}, never>;
+export declare const StyledCurrentPageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCurrentPage: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", any, {
+    $size: "small" | "medium";
+}, never>;
+export {};

package/esm/components/pager/__internal__/pagination-navigation.style.js

@@ -0,0 +1 @@
+import i,{css as a}from"styled-components";const n={small:{width:"var(--global-size-s)"},medium:{width:"var(--global-size-m)"}},t=i.div.withConfig({displayName:"pagination-navigation.style__StyledPaginationNavigation",componentId:"carbon_v162_12_0__sc-17846a48-0"})(["",""],(({$alignment:i})=>a(["display:flex;align-items:center;gap:var(--global-space-comp-xs);flex:1 0 0;",""],"centred"===i&&a(["justify-content:center;"])))),e=i.div.withConfig({displayName:"pagination-navigation.style__StyledButtonWrapper",componentId:"carbon_v162_12_0__sc-17846a48-1"})(["",""],(({$visible:i})=>a(["visibility:",";"],i?"visible":"hidden"))),o=i.div.withConfig({displayName:"pagination-navigation.style__StyledCurrentPageContainer",componentId:"carbon_v162_12_0__sc-17846a48-2"})(["display:flex;align-items:center;gap:var(--global-space-comp-s);white-space:nowrap;"]),l=i.span.withConfig({displayName:"pagination-navigation.style__StyledCurrentPage",componentId:"carbon_v162_12_0__sc-17846a48-3"})(["padding:0 var(--global-space-layout-3-xs);white-space:nowrap;"]),s=i.div.withConfig({displayName:"pagination-navigation.style__StyledInputWrapper",componentId:"carbon_v162_12_0__sc-17846a48-4"})(["",""],(({$size:i})=>a(["min-width:",";&& input{text-align:center;field-sizing:content;}"],n[i].width)));export{e as StyledButtonWrapper,l as StyledCurrentPage,o as StyledCurrentPageContainer,s as StyledInputWrapper,t as StyledPaginationNavigation};

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

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

package/esm/components/pager/index.js

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

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+type PageSizeOption = {
+    id: string;
+    name: number;
+};
+type PagerLayout = "single" | "two-row" | "three-row";
+type PagerAlignment = "fill" | "centred";
+export interface PagerProps extends TagProps {
+    /** Function called when pager changes (Current page, Page size, Origin component). */
+    onPagination: (currentPage: number, pageSize: number, origin: string) => void;
+    /** Callback function for the Next button. */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for the First button. */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for the Previous button. */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for the Last button. */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Current visible page. */
+    currentPage?: number | string;
+    /** Flag to set if the current page number renders as an input. */
+    interactivePageNumber?: boolean;
+    /** Total number of records, used to calculate the total number of pages. */
+    totalRecords?: number | string;
+    /** Number of records per page. */
+    pageSize?: number | string;
+    /** Flag to render the page size selection input. */
+    showPageSizeSelection?: boolean;
+    /** List of page size options. */
+    pageSizeSelectionOptions?: PageSizeOption[];
+    /** Flag to render "First" and "Last" navigation buttons. */
+    showFirstAndLastButtons?: boolean;
+    /** The component's variant. */
+    variant?: "default" | "alternate";
+    /**
+     * Size of the component.
+     * **Deprecation:** The "large" size is no longer supported.
+     */
+    size?: "small" | "medium" | "large";
+    /** Maximum number of lines used to render the component. */
+    layout?: PagerLayout;
+    /** Alignment of the content. */
+    alignment?: PagerAlignment;
+    /** Set an accessible label for the Pagination nav */
+    "aria-label"?: string;
+    /**
+     * If true, sets css property visibility: hidden on all disabled elements.
+     * @deprecated Support to disable elements has been removed.
+     */
+    hideDisabledElements?: boolean;
+    /**
+     * Should the label before the page size selection dropdown be shown.
+     * @deprecated Support for this prop has been removed. Labels for page size selection are always shown.
+     */
+    showPageSizeLabelBefore?: boolean;
+    /**
+     * Should the label after the page size selection dropdown be shown.
+     * @deprecated Support for this prop has been removed. Labels for page size selection are always shown.
+     */
+    showPageSizeLabelAfter?: boolean;
+    /**
+     * Should the total records label be shown.
+     */
+    showTotalRecords?: boolean;
+    /**
+     * Should the `Previous` and `Next` navigation buttons be shown.
+     * @deprecated Support to show or hide "Previous" and "Next" buttons has been removed. Their visibility is managed internally.
+     */
+    showPreviousAndNextButtons?: boolean;
+    /**
+     * Should the page count input be shown
+     * @deprecated Support to show or hide page count input has been removed. The page count is always shown.
+     */
+    showPageCount?: boolean;
+    /**
+     * Breakpoint for small screen styling to be applied.
+     * @deprecated This component is now responsive by default and support for this prop has been removed.
+     */
+    smallScreenBreakpoint?: string;
+}
+export declare const Pagination: ({ currentPage, interactivePageNumber, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showFirstAndLastButtons, variant, size, layout, alignment, showTotalRecords, "aria-label": ariaLabel, ...rest }: PagerProps) => React.JSX.Element;
+export default Pagination;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useCallback as n,useEffect as i}from"react";import a 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 l}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 s from"./__internal__/pagination-navigation.component.js";import c from"../../hooks/__internal__/useLocale/useLocale.js";import p from"../../__internal__/utils/helpers/guid/index.js";import{StyledPagination as u,StyledPageInfo as m,StyledPageSizeSelect as g,StyledTotalRecords as d}from"./pager.style.js";import{Divider as f}from"../divider/divider.component.js";import b from"../../__internal__/utils/helpers/events/events.js";import v from"../../__internal__/utils/helpers/tags/tags.js";function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const j=j=>{var y,O,{currentPage:P=1,interactivePageNumber:w=!0,pageSizeSelectionOptions:_=[{id:"10",name:10},{id:"25",name:25},{id:"50",name:50},{id:"100",name:100}],pageSize:S=10,showPageSizeSelection:z=!1,totalRecords:N=0,onPagination:x,onNext:L,onFirst:F,onPrevious:$,onLast:k,showFirstAndLastButtons:D=!0,variant:B="default",size:E="medium",layout:R="single",alignment:A="fill",showTotalRecords:C=!1,"aria-label":I}=j,K=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}(j,["currentPage","interactivePageNumber","pageSizeSelectionOptions","pageSize","showPageSizeSelection","totalRecords","onPagination","onNext","onFirst","onPrevious","onLast","showFirstAndLastButtons","variant","size","layout","alignment","showTotalRecords","aria-label"]);const T=c(),M=`Pager_size_selector_${r(p()).current}`,[q,G]=o(+P),[H,J]=o(+S),[Q,U]=o(+S),V=+N<0||Number.isNaN(+N)?0:+N,W=n((()=>+N<0||Number.isNaN(+N)?1:Math.ceil(+N/H)),[N,H]),[X,Y]=o(W()),Z=z||C;let ee,te;ee=z||C?z&&C||"three-row"!==R?R:"two-row":"single",te="fill"===A&&z&&C&&"single"===ee?"fill":"centred";const re=z&&C&&"three-row"!==ee,oe="three-row"!==ee&&w,ne="large"===E?"medium":E;i((()=>{J(+S),U(+S)}),[S]),i((()=>{const e=W();Y(e),G(+P>e?e:+P)}),[H,X,P,N,W]);const ie=n((e=>{U(+e),J(+e),G(1),x(1,+e,"page-select")}),[x]),ae=n((e=>b.isEnterKey(e)&&ie(e.target.value)),[ie]);return e(u,(le=function(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){h(e,t,r[t])}))}return e}({"aria-label":I||(null===(y=(O=T.pager).ariaLabel)||void 0===y?void 0:y.call(O)),$variant:B,$size:ne,$layout:ee},K,v("pager",K)),se={children:[t(s,{currentPage:q,pageSize:H,totalPages:X,interactivePageNumber:oe,setCurrentPage:G,onNext:L,onPrevious:$,onFirst:F,onLast:k,onPagination:x,showFirstAndLastButtons:D,size:ne,alignment:te}),Z&&e(m,{"data-role":"page-info",$layout:ee,$alignment:te,children:[z&&(()=>{var r,o;return e(g,{children:[t("label",{htmlFor:M,children:null===(r=(o=T.pager).itemsPerPage)||void 0===r?void 0:r.call(o)}),t(l,{value:String(Q),onChange:e=>U(+e.target.value),onBlur:()=>U(H),onKeyDown:ae,id:M,size:ne,children:_.map((e=>t(a,{text:e.id,value:String(e.name),onClick:ie},e.id)))})]})})(),re&&t(f,{p:0,"aria-hidden":!0,height:"32px"}),C&&(()=>{var r,o;return e("div",{"data-role":"total-records",children:[t(d,{children:V}),null===(r=(o=T.pager).totalItems)||void 0===r?void 0:r.call(o)]})})()]})]},se=null!=se?se:{},Object.getOwnPropertyDescriptors?Object.defineProperties(le,Object.getOwnPropertyDescriptors(se)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(se)).forEach((function(e){Object.defineProperty(le,e,Object.getOwnPropertyDescriptor(se,e))})),le));var le,se};export{j as Pagination,j as default};

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

@@ -0,0 +1,14 @@
+interface StyledPagerContainerProps {
+    $variant?: "alternate" | "default";
+    $size: "small" | "medium";
+    $layout?: "single" | "two-row" | "three-row";
+}
+export declare const StyledPagination: import("styled-components").StyledComponent<"nav", any, StyledPagerContainerProps, never>;
+interface StyledPageInfoProps {
+    $layout: "single" | "two-row" | "three-row";
+    $alignment?: "fill" | "centred";
+}
+export declare const StyledPageInfo: import("styled-components").StyledComponent<"div", any, StyledPageInfoProps, never>;
+export declare const StyledPageSizeSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTotalRecords: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

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

@@ -0,0 +1 @@
+import a,{css as e}from"styled-components";const o={small:{padding:"var(--global-space-comp-m)",font:"var(--global-font-static-comp-regular-s)",rowGap:"var(--global-space-comp-m)"},medium:{padding:"var(--global-space-comp-l)",font:"var(--global-font-static-comp-regular-m)",rowGap:"var(--global-space-comp-l)"}},n=a.nav.withConfig({displayName:"pager.style__StyledPagination",componentId:"carbon_v162_12_0__sc-e6346955-0"})(["",""],(({$variant:a,$size:n,$layout:t})=>e(["--fieldSpacing:0;display:flex;align-items:center;flex-direction:",";box-sizing:border-box;flex-wrap:wrap;font:",";width:100%;min-width:288px;padding:",";row-gap:",";border-radius:var(--global-radius-container-m);border:var(--global-borderwidth-xs) solid var(--container-standard-border-default);background:var(--container-standard-bg-alt);",""],"single"===t?"row":"column",o[n].font,o[n].padding,o[n].rowGap,"alternate"===a&&e(["background:none;border:none;"])))),t=a.div.withConfig({displayName:"pager.style__StyledPageInfo",componentId:"carbon_v162_12_0__sc-e6346955-1"})(["",""],(({$layout:a,$alignment:o})=>e(["display:flex;align-items:center;flex-direction:",";justify-content:",";gap:var(--global-space-comp-l);flex:1 0 0;white-space:nowrap;color:var(--input-labelset-label-default);"],"three-row"===a?"column":"row","centred"===o?"center":"flex-end"))),l=a.div.withConfig({displayName:"pager.style__StyledPageSizeSelect",componentId:"carbon_v162_12_0__sc-e6346955-2"})(["display:flex;align-items:center;gap:var(--global-space-comp-s);min-width:fit-content;&& input{field-sizing:content;}"]),r=a.span.withConfig({displayName:"pager.style__StyledTotalRecords",componentId:"carbon_v162_12_0__sc-e6346955-3"})(["font:var(--global-font-static-comp-medium-s);margin-right:var(--global-space-comp-xs);"]);export{t as StyledPageInfo,l as StyledPageSizeSelect,n as StyledPagination,r as StyledTotalRecords};

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

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

package/esm/components/pages/index.js

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

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

@@ -0,0 +1,2 @@
+export { default } from "./page.component";
+export type { PageProps } from "./page.component";

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

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

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+/**
+ * @deprecated `Page` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface PageProps extends PaddingProps, TagProps {
+    /** The title for the page, normally a Heading component. */
+    title?: React.ReactNode;
+    /** This component supports children. */
+    children: React.ReactNode;
+    /** The ARIA role to be applied to the component */
+    role?: string;
+    /** @ignore @private */
+    transitionName?: () => string;
+}
+/**
+ * @deprecated `Page` has been deprecated. See the Carbon documentation for migration details.
+ */
+declare const Page: {
+    ({ role, title, children, ...rest }: PageProps): React.JSX.Element;
+    displayName: string;
+};
+export default Page;

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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,7 @@
+declare const StyledPage: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+export { StyledPage, StyledPageContent };

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

@@ -0,0 +1 @@
+import t from"styled-components";import{padding as e}from"styled-system";import o from"../../../style/themes/apply-base-theme.js";const s=t.div.attrs(o).withConfig({displayName:"page.style__StyledPage",componentId:"carbon_v162_12_0__sc-535d517d-0"})(["width:100%;position:absolute;"]),i=t.div.attrs(o).withConfig({displayName:"page.style__StyledPageContent",componentId:"carbon_v162_12_0__sc-535d517d-1"})([""," box-sizing:border-box;width:100%;height:100%;"],e);export{s as StyledPage,i as StyledPageContent};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import Page from "./page";
+import type { ThemeObject } from "../../style/themes/theme.types";
+/**
+ * @deprecated `Pages` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface PagesProps extends TagProps {
+    /** The selected tab on page load */
+    initialpageIndex?: number | string;
+    /** The current page's index */
+    pageIndex?: number | string;
+    /** Individual Page components */
+    children?: React.ReactNode;
+    /** Controls which transition to use (fade or slide). */
+    transition?: string;
+    /** @ignore @private */
+    theme?: Partial<ThemeObject>;
+}
+/**
+ * @deprecated `Pages` has been deprecated. See the Carbon documentation for migration details.
+ */
+declare const Pages: {
+    ({ pageIndex: incomingPageIndex, initialpageIndex, transition, children, ...props }: PagesProps): React.JSX.Element;
+    displayName: string;
+};
+export default Pages;
+export { Page };

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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,5 @@
+declare const PagesContent: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+declare const PagesWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { PagesWrapperStyle, PagesContent };

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./password.component";
+export type { PasswordProps } from "./password.component";

package/esm/components/password/index.js

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