carbon-react 129.0.0 → 130.0.0

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -1,15 +1,19 @@
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import Event from "../../../__internal__/utils/helpers/events";
+import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import useLocale from "../../../hooks/__internal__/useLocale";
 import { FlatTableThemeContext } from "../flat-table.component";
 export const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = useRef(guid());
+  const locale = useLocale();
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -20,10 +24,10 @@ export const Sort = ({
   const {
     colorTheme
   } = useContext(FlatTableThemeContext);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/React.createElement(StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/React.createElement(StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/esm/locales/__internal__/es-es.js

@@ -150,6 +150,9 @@ const esES = {
       close: () => "Cerrar"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Ordenar todo ${sortContent || "contenido"}${sortType ? ` en orden ${sortType === "ascending" ? "ascendente" : "descendente"}.` : " en orden ascendente o descendente."}`
+  },
   splitButton: {
     ariaLabel: () => "Mostrar más"
   },

package/esm/locales/en-gb.js

@@ -152,6 +152,9 @@ const enGB = {
       close: () => "Close"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Sort all ${sortContent || "contents"}${sortType ? ` in an ${sortType} order.` : " in an ascending or descending order."}`
+  },
   splitButton: {
     ariaLabel: () => "Show more"
   },

package/esm/locales/locale.d.ts

@@ -127,18 +127,21 @@ interface Locale {
             close: () => string;
         };
     };
+    sort: {
+        accessibleName: (sortContent?: string, sortType?: "ascending" | "descending") => string;
+    };
     splitButton: {
         ariaLabel: () => string;
     };
-    switch: {
-        on: () => string;
-        off: () => string;
-    };
     stepFlow: {
         stepLabel: (currentStep: number, totalSteps: number) => string;
         screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
         closeIconAriaLabel?: () => string;
     };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/lib/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/lib/components/flat-table/sort/sort.component.js

@@ -7,8 +7,10 @@ exports.default = exports.Sort = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _typography = _interopRequireDefault(require("../../typography"));
 var _sort = require("./sort.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -16,9 +18,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = (0, _react.useRef)((0, _guid.default)());
+  const locale = (0, _useLocale.default)();
   const onKeyDown = e => {
     if (_events.default.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -29,10 +33,10 @@ const Sort = ({
   const {
     colorTheme
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/lib/locales/__internal__/es-es.js

@@ -156,6 +156,9 @@ const esES = {
       close: () => "Cerrar"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Ordenar todo ${sortContent || "contenido"}${sortType ? ` en orden ${sortType === "ascending" ? "ascendente" : "descendente"}.` : " en orden ascendente o descendente."}`
+  },
   splitButton: {
     ariaLabel: () => "Mostrar más"
   },

package/lib/locales/en-gb.js

@@ -158,6 +158,9 @@ const enGB = {
       close: () => "Close"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Sort all ${sortContent || "contents"}${sortType ? ` in an ${sortType} order.` : " in an ascending or descending order."}`
+  },
   splitButton: {
     ariaLabel: () => "Show more"
   },

package/lib/locales/locale.d.ts

@@ -127,18 +127,21 @@ interface Locale {
             close: () => string;
         };
     };
+    sort: {
+        accessibleName: (sortContent?: string, sortType?: "ascending" | "descending") => string;
+    };
     splitButton: {
         ariaLabel: () => string;
     };
-    switch: {
-        on: () => string;
-        off: () => string;
-    };
     stepFlow: {
         stepLabel: (currentStep: number, totalSteps: number) => string;
         screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
         closeIconAriaLabel?: () => string;
     };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/package.json

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