carbon-react 114.2.1 → 114.4.0

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

@@ -6,6 +6,8 @@ interface PagerNavigationLinkProps {
     currentPage: number;
     /** Count of all the pages  */
     pageCount: number;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
     /** Pagination page size */
     pageSize: number;
     /** onClick Callback function */
@@ -13,5 +15,5 @@ interface PagerNavigationLinkProps {
     /** onPagination Callback to process pagination  */
     onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
 }
-declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
+declare const PagerNavigationLink: ({ type, currentPage, pageCount, hideDisabledElements, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
 export default PagerNavigationLink;

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

@@ -7,6 +7,7 @@ const PagerNavigationLink = ({
   type,
   currentPage,
   pageCount,
+  hideDisabledElements,
   pageSize,
   onClick,
   onPagination
@@ -56,7 +57,9 @@ const PagerNavigationLink = ({
   const {
     text
   } = navLinkConfig[type];
+  const hideDisabledButtons = hideDisabledElements && disabled();
   return /*#__PURE__*/React.createElement(StyledPagerLink, {
+    hideDisabledButtons: hideDisabledButtons,
     "data-element": `pager-link-${type}`,
     disabled: disabled(),
     onClick: // Type assertion due to the fact that StyledPagerLink
@@ -68,6 +71,7 @@ const PagerNavigationLink = ({
 
 PagerNavigationLink.propTypes = {
   "currentPage": PropTypes.number.isRequired,
+  "hideDisabledElements": PropTypes.bool,
   "onClick": PropTypes.func,
   "onPagination": PropTypes.func,
   "pageCount": PropTypes.number.isRequired,

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

@@ -23,6 +23,8 @@ export interface PagerNavigationProps {
     showPreviousAndNextButtons?: boolean;
     /** Should the page count input be shown */
     showPageCount?: boolean;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
 }
-declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
+declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
 export default PagerNavigation;

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

@@ -21,7 +21,8 @@ const PagerNavigation = ({
   pageCount,
   showFirstAndLastButtons = true,
   showPreviousAndNextButtons = true,
-  showPageCount = true
+  showPageCount = true,
+  hideDisabledElements = false
 }) => {
   const l = useLocale();
   const guid = useRef(createGuid());
@@ -67,17 +68,21 @@ const PagerNavigation = ({
 
   const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "first",
+    hideDisabledElements: hideDisabledElements,
     onClick: onFirst
   }, pagerNavigationProps)), showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "previous",
+    hideDisabledElements: hideDisabledElements,
     onClick: onPrevious
   }, pagerNavigationProps)));
 
   const renderButtonsAfterCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "next",
+    hideDisabledElements: hideDisabledElements,
     onClick: onNext
   }, pagerNavigationProps)), !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "last",
+    hideDisabledElements: hideDisabledElements,
     onClick: onLast
   }, pagerNavigationProps)));
 
@@ -95,6 +100,7 @@ const PagerNavigation = ({
 
 PagerNavigation.propTypes = {
   "currentPage": PropTypes.number.isRequired,
+  "hideDisabledElements": PropTypes.bool,
   "onFirst": PropTypes.func,
   "onLast": PropTypes.func,
   "onNext": PropTypes.func,

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

@@ -16,6 +16,8 @@ export interface PagerProps {
     onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Current visible page */
     currentPage?: number | string;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
     /** Total number of records */
     totalRecords?: number | string;
     /** Pagination page size */
@@ -39,5 +41,5 @@ export interface PagerProps {
     /** What variant the Pager background should be */
     variant?: "default" | "alternate";
 }
-export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
+export declare const Pager: ({ currentPage, hideDisabledElements, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
 export default Pager;

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

@@ -11,6 +11,7 @@ import Events from "../../__internal__/utils/helpers/events";
 
 const Pager = ({
   currentPage = 1,
+  hideDisabledElements = false,
   pageSizeSelectionOptions = [{
     id: "10",
     name: 10
@@ -136,6 +137,7 @@ const Pager = ({
   }, rest), /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
     pageSize: currentPageSize,
     currentPage: page,
+    hideDisabledElements: hideDisabledElements,
     setCurrentPage: setPage,
     onNext: handleOnNext,
     onPrevious: handleOnPrevious,
@@ -151,6 +153,7 @@ const Pager = ({
 
 Pager.propTypes = {
   "currentPage": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "hideDisabledElements": PropTypes.bool,
   "onFirst": PropTypes.func,
   "onLast": PropTypes.func,
   "onNext": PropTypes.func,

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

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

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

@@ -99,6 +99,14 @@ const StyledPagerLink = styled(Link)`
   padding: 0 10px;
   margin-left: 7px;
   margin-right: 7px;
+
+  ${({
+  hideDisabledButtons
+}) => hideDisabledButtons && css`
+      & {
+        visibility: hidden;
+      }
+    `}
 `;
 const StyledPagerNoSelect = styled.div`
   user-select: none;

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

@@ -17,6 +17,8 @@ export interface PillProps extends StyledPillProps {
     onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
+    /** Sets custom aria-label attribute on the remove button */
+    ariaLabelOfRemoveButton?: string;
 }
-export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ...rest }: PillProps) => JSX.Element;
+export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => JSX.Element;
 export default Pill;

package/esm/components/pill/pill.component.js

@@ -18,6 +18,7 @@ const Pill = ({
   onDelete,
   pillRole = "tag",
   size = "M",
+  ariaLabelOfRemoveButton = "remove pill",
   ...rest
 }) => /*#__PURE__*/React.createElement(StyledPill, _extends({
   inFill: fill,
@@ -33,12 +34,13 @@ const Pill = ({
 }, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
   onAction: onDelete,
   "data-element": "close",
-  "aria-label": "close"
+  "aria-label": ariaLabelOfRemoveButton
 }, /*#__PURE__*/React.createElement(Icon, {
   type: "cross"
 })));
 
 Pill.propTypes = {
+  "ariaLabelOfRemoveButton": PropTypes.string,
   "borderColor": PropTypes.string,
   "children": PropTypes.string.isRequired,
   "colorVariant": PropTypes.oneOf(["negative", "neutral", "positive", "warning"]),

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

@@ -6,6 +6,8 @@ interface PagerNavigationLinkProps {
     currentPage: number;
     /** Count of all the pages  */
     pageCount: number;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
     /** Pagination page size */
     pageSize: number;
     /** onClick Callback function */
@@ -13,5 +15,5 @@ interface PagerNavigationLinkProps {
     /** onPagination Callback to process pagination  */
     onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
 }
-declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
+declare const PagerNavigationLink: ({ type, currentPage, pageCount, hideDisabledElements, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
 export default PagerNavigationLink;

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

@@ -23,6 +23,7 @@ const PagerNavigationLink = ({
   type,
   currentPage,
   pageCount,
+  hideDisabledElements,
   pageSize,
   onClick,
   onPagination
@@ -72,7 +73,9 @@ const PagerNavigationLink = ({
   const {
     text
   } = navLinkConfig[type];
+  const hideDisabledButtons = hideDisabledElements && disabled();
   return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerLink, {
+    hideDisabledButtons: hideDisabledButtons,
     "data-element": `pager-link-${type}`,
     disabled: disabled(),
     onClick: // Type assertion due to the fact that StyledPagerLink
@@ -84,6 +87,7 @@ const PagerNavigationLink = ({
 
 PagerNavigationLink.propTypes = {
   "currentPage": _propTypes.default.number.isRequired,
+  "hideDisabledElements": _propTypes.default.bool,
   "onClick": _propTypes.default.func,
   "onPagination": _propTypes.default.func,
   "pageCount": _propTypes.default.number.isRequired,

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

@@ -23,6 +23,8 @@ export interface PagerNavigationProps {
     showPreviousAndNextButtons?: boolean;
     /** Should the page count input be shown */
     showPageCount?: boolean;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
 }
-declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
+declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, hideDisabledElements, }: PagerNavigationProps) => JSX.Element;
 export default PagerNavigation;

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

@@ -41,7 +41,8 @@ const PagerNavigation = ({
   pageCount,
   showFirstAndLastButtons = true,
   showPreviousAndNextButtons = true,
-  showPageCount = true
+  showPageCount = true,
+  hideDisabledElements = false
 }) => {
   const l = (0, _useLocale.default)();
   const guid = (0, _react.useRef)((0, _guid.default)());
@@ -87,17 +88,21 @@ const PagerNavigation = ({
 
   const renderButtonsBeforeCount = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
     type: "first",
+    hideDisabledElements: hideDisabledElements,
     onClick: onFirst
   }, pagerNavigationProps)), showPreviousAndNextButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
     type: "previous",
+    hideDisabledElements: hideDisabledElements,
     onClick: onPrevious
   }, pagerNavigationProps)));
 
   const renderButtonsAfterCount = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPreviousAndNextButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
     type: "next",
+    hideDisabledElements: hideDisabledElements,
     onClick: onNext
   }, pagerNavigationProps)), !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
     type: "last",
+    hideDisabledElements: hideDisabledElements,
     onClick: onLast
   }, pagerNavigationProps)));
 
@@ -115,6 +120,7 @@ const PagerNavigation = ({
 
 PagerNavigation.propTypes = {
   "currentPage": _propTypes.default.number.isRequired,
+  "hideDisabledElements": _propTypes.default.bool,
   "onFirst": _propTypes.default.func,
   "onLast": _propTypes.default.func,
   "onNext": _propTypes.default.func,

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

@@ -16,6 +16,8 @@ export interface PagerProps {
     onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Current visible page */
     currentPage?: number | string;
+    /** If true, sets css property visibility: hidden on all disabled elements  */
+    hideDisabledElements?: boolean;
     /** Total number of records */
     totalRecords?: number | string;
     /** Pagination page size */
@@ -39,5 +41,5 @@ export interface PagerProps {
     /** What variant the Pager background should be */
     variant?: "default" | "alternate";
 }
-export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
+export declare const Pager: ({ currentPage, hideDisabledElements, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
 export default Pager;

package/lib/components/pager/pager.component.js

@@ -31,6 +31,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Pager = ({
   currentPage = 1,
+  hideDisabledElements = false,
   pageSizeSelectionOptions = [{
     id: "10",
     name: 10
@@ -156,6 +157,7 @@ const Pager = ({
   }, rest), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/_react.default.createElement(_pagerNavigation.default, {
     pageSize: currentPageSize,
     currentPage: page,
+    hideDisabledElements: hideDisabledElements,
     setCurrentPage: setPage,
     onNext: handleOnNext,
     onPrevious: handleOnPrevious,
@@ -172,6 +174,7 @@ const Pager = ({
 exports.Pager = Pager;
 Pager.propTypes = {
   "currentPage": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "hideDisabledElements": _propTypes.default.bool,
   "onFirst": _propTypes.default.func,
   "onLast": _propTypes.default.func,
   "onNext": _propTypes.default.func,

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

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

package/lib/components/pager/pager.style.js

@@ -125,6 +125,14 @@ const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
   padding: 0 10px;
   margin-left: 7px;
   margin-right: 7px;
+
+  ${({
+  hideDisabledButtons
+}) => hideDisabledButtons && (0, _styledComponents.css)`
+      & {
+        visibility: hidden;
+      }
+    `}
 `;
 exports.StyledPagerLink = StyledPagerLink;
 const StyledPagerNoSelect = _styledComponents.default.div`

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

@@ -17,6 +17,8 @@ export interface PillProps extends StyledPillProps {
     onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
+    /** Sets custom aria-label attribute on the remove button */
+    ariaLabelOfRemoveButton?: string;
 }
-export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ...rest }: PillProps) => JSX.Element;
+export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => JSX.Element;
 export default Pill;

package/lib/components/pill/pill.component.js

@@ -32,6 +32,7 @@ const Pill = ({
   onDelete,
   pillRole = "tag",
   size = "M",
+  ariaLabelOfRemoveButton = "remove pill",
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
   inFill: fill,
@@ -47,13 +48,14 @@ const Pill = ({
 }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
   onAction: onDelete,
   "data-element": "close",
-  "aria-label": "close"
+  "aria-label": ariaLabelOfRemoveButton
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {
   type: "cross"
 })));
 
 exports.Pill = Pill;
 Pill.propTypes = {
+  "ariaLabelOfRemoveButton": _propTypes.default.string,
   "borderColor": _propTypes.default.string,
   "children": _propTypes.default.string.isRequired,
   "colorVariant": _propTypes.default.oneOf(["negative", "neutral", "positive", "warning"]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.2.1",
+  "version": "114.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",