carbon-react 105.1.1 → 106.0.0

package/lib/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMediaQuery;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useMediaQuery(queryInput) {
+  const query = queryInput.replace(/^@media( ?)/m, "");
+
+  const [match, setMatch] = _react.default.useState(() => false);
+
+  _react.default.useEffect(() => {
+    const queryList = window.matchMedia(query);
+
+    const updateMatch = () => {
+      setMatch(queryList.matches);
+    };
+
+    updateMatch();
+    queryList.addListener(updateMatch);
+    return () => {
+      queryList.removeListener(updateMatch);
+    };
+  }, [query]);
+
+  return match;
+}

package/lib/locales/en-gb.d.ts

@@ -1,5 +1,3 @@
-import Locale from ".";
-
-declare const EnGb: Locale;
-
-export default EnGb;
+import Locale from "./locale";
+declare const enGB: Locale;
+export default enGB;

package/lib/locales/en-gb.js

@@ -9,7 +9,7 @@ var _dateFnsLocales = require("./date-fns-locales");
 
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
-var _default = {
+const enGB = {
   locale: () => "en-GB",
   actions: {
     edit: () => "Edit",
@@ -136,4 +136,5 @@ var _default = {
     }
   }
 };
+var _default = enGB;
 exports.default = _default;

package/lib/locales/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./locale";
+export type { default } from "./locale";
 export { default as EnGb } from "./en-gb";
 export { default as PlPl } from "./pl-pl";

package/lib/locales/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EnGb", {
+  enumerable: true,
+  get: function () {
+    return _enGb.default;
+  }
+});
+Object.defineProperty(exports, "PlPl", {
+  enumerable: true,
+  get: function () {
+    return _plPl.default;
+  }
+});
+
+var _enGb = _interopRequireDefault(require("./en-gb"));
+
+var _plPl = _interopRequireDefault(require("./pl-pl"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/locales/locale.d.ts

@@ -1,111 +1,105 @@
 import { Locale as DateFnsLocale } from "date-fns";
-
 interface Locale {
-  locale: () => string;
-  actions: {
-    edit: () => string;
-    delete: () => string;
-  };
-  actionPopover: {
-    ariaLabel: () => string;
-  };
-  batchSelection: {
-    selected: (count: number | string) => string;
-  };
-  confirm: {
-    no: () => string;
-    yes: () => string;
-  };
-  date: {
-    dateFnsLocale: () => DateFnsLocale;
-  };
-  dialog: {
-    ariaLabels: {
-      close: () => string;
-    };
-  };
-  dialogFullScreen: {
-    ariaLabels: {
-      close: () => string;
-    };
-  };
-  errors: {
-    messages: {
-      formSummary: (
-        errors: number,
-        warnings: number,
-        type: string
-      ) => [string, string] | null;
-    };
-  };
-  message: {
-    closeButtonAriaLabel: () => string;
-  };
-  numeralDate: {
-    validation: {
-      day: () => string;
-      month: () => string;
-      year: () => string;
-    };
-  };
-  pager: {
-    show: () => string;
-    records: (count: number | string, showNumber: boolean) => string;
-    first: () => string;
-    last: () => string;
-    next: () => string;
-    previous: () => string;
-    pageX: () => string;
-    ofY: (count: string | number) => string;
-  };
-  select: {
-    actionButtonText: () => string;
-    placeholder: () => string;
-    noResultsForTerm: (term: string) => string;
-  };
-  link: {
-    skipLinkLabel: () => string;
-  };
-  sidebar: {
-    ariaLabels: {
-      close: () => string;
-    };
-  };
-  switch: {
-    on: () => string;
-    off: () => string;
-  };
-  textEditor: {
-    tooltipMessages: {
-      bold: () => string;
-      italic: () => string;
-      bulletList: () => string;
-      numberList: () => string;
-    };
-    ariaLabels: {
-      bold: () => string;
-      italic: () => string;
-      bulletList: () => string;
-      numberList: () => string;
-    };
-  };
-  tileSelect: {
-    deselect: () => string;
-  };
-  toast: {
-    ariaLabels: {
-      close: () => string;
-    };
-  };
-  wizards: {
-    multiStep: {
-      buttons: {
-        submit: () => string;
+    locale: () => string;
+    actions: {
+        edit: () => string;
+        delete: () => string;
+    };
+    actionPopover: {
+        ariaLabel: () => string;
+    };
+    batchSelection: {
+        selected: (count: number | string) => string;
+    };
+    confirm: {
+        no: () => string;
+        yes: () => string;
+    };
+    date: {
+        dateFnsLocale: () => DateFnsLocale;
+    };
+    dialog: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
+    dialogFullScreen: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
+    errors: {
+        messages: {
+            formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;
+        };
+    };
+    message: {
+        closeButtonAriaLabel: () => string;
+    };
+    numeralDate: {
+        validation: {
+            day: () => string;
+            month: () => string;
+            year: () => string;
+        };
+    };
+    pager: {
+        show: () => string;
+        records: (count: number | string, showNumber: boolean) => string;
+        first: () => string;
+        last: () => string;
         next: () => string;
-        back: () => string;
-      };
+        previous: () => string;
+        pageX: () => string;
+        ofY: (count: string | number) => string;
+    };
+    select: {
+        actionButtonText: () => string;
+        placeholder: () => string;
+        noResultsForTerm: (term: string) => string;
+    };
+    link: {
+        skipLinkLabel: () => string;
+    };
+    sidebar: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
+    textEditor: {
+        tooltipMessages: {
+            bold: () => string;
+            italic: () => string;
+            bulletList: () => string;
+            numberList: () => string;
+        };
+        ariaLabels: {
+            bold: () => string;
+            italic: () => string;
+            bulletList: () => string;
+            numberList: () => string;
+        };
+    };
+    tileSelect: {
+        deselect: () => string;
+    };
+    toast: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
+    wizards: {
+        multiStep: {
+            buttons: {
+                submit: () => string;
+                next: () => string;
+                back: () => string;
+            };
+        };
     };
-  };
 }
-
 export default Locale;

package/lib/locales/locale.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/{__internal__/utils/ether → locales}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../esm/__internal__/utils/ether/index.js",
+  "module": "../../esm/locales/index.js",
   "main": "./index.js",
   "types": "./index.d.ts"
 }

package/lib/locales/pl-pl.d.ts

@@ -1,5 +1,3 @@
-import Locale from ".";
-
-declare const PlPl: Locale;
-
-export default PlPl;
+import Locale from "./locale";
+declare const plPL: Locale;
+export default plPL;

package/lib/locales/pl-pl.js

@@ -9,7 +9,7 @@ var _dateFnsLocales = require("./date-fns-locales");
 
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
-var _default = {
+const plPL = {
   locale: () => "pl-PL",
   actions: {
     edit: () => "Edytuj",
@@ -134,4 +134,5 @@ var _default = {
     }
   }
 };
+var _default = plPL;
 exports.default = _default;

package/lib/style/fonts.css

@@ -0,0 +1,30 @@
+@font-face{
+  font-family: "Sage UI";
+  src: url('https://fonts.sage.com/Sage_UI-Regular.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Regular.woff') format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face{
+  font-family: "Sage UI";
+  src: url('https://fonts.sage.com/Sage_UI-Medium.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Medium.woff') format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face{
+  font-family: "Sage UI";
+  src: url('https://fonts.sage.com/Sage_UI-Bold.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Bold.woff') format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "CarbonIcons";
+  src: url("./assets/carbon-icons-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}

package/lib/style/global-style.js

@@ -10,7 +10,7 @@ var _styledComponents = require("styled-components");
 const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   body {
     color: rgba(0, 0, 0, 0.9);
-    font-family: 'Lato';
+    font-family: "Sage UI", sans-serif;
     font-size: 14px;
     margin: 0px;
     padding: 0px;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -54,6 +54,7 @@ declare function _default(palette: any): {
         colorsYin075: string;
         colorsYin090: string;
         colorsYang100: string;
+        colorsYang030: string;
         colorsYang080: string;
         colorsGray850: string;
         colorsGray900: string;
@@ -138,6 +139,8 @@ declare function _default(palette: any): {
         colorsUtilityReadOnly400: string;
         colorsUtilityReadOnly500: string;
         colorsUtilityReadOnly600: string;
+        colorsActionMajor350: string;
+        colorsActionMajor450: string;
         colorsActionMajor700: string;
         colorsActionMajor025: string;
         colorsActionMajorTransparent: string;
@@ -146,6 +149,7 @@ declare function _default(palette: any): {
         colorsActionMajorYin065: string;
         colorsActionMajorYin090: string;
         colorsActionMajorYang100: string;
+        colorsActionMajorYang030: string;
         colorsActionMinor100: string;
         colorsActionMinor150: string;
         colorsActionMinor200: string;
@@ -305,16 +309,10 @@ declare function _default(palette: any): {
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;
-        typographyDialogTitleXs: string;
-        typographyDialogTitleS: string;
-        typographyDialogTitleMs: string;
         typographyDialogTitleM: string;
-        typographyDialogTitleMl: string;
-        typographyDialogTitleL: string;
-        typographyDialogTitleXl: string;
-        typographyDialogParagraphXs: string;
-        typographyDialogParagraphS: string;
+        typographyDialogParagraphM: string;
         typographyDrawerTitleM: string;
+        typographyDrawerParagraphM: string;
         typographyFlashTextM: string;
         typographyFlashTextL: string;
         typographyFormFieldLabelXs: string;
@@ -349,6 +347,7 @@ declare function _default(palette: any): {
         typographyFormFieldCharacterCountS: string;
         typographyFormFieldCharacterCountM: string;
         typographyFormFieldCharacterCountL: string;
+        typographyLinkTextS: string;
         typographyLinkTextM: string;
         typographyLinkTextL: string;
         typographyMenuLabelM: string;
@@ -358,6 +357,7 @@ declare function _default(palette: any): {
         typographyMessageTextM: string;
         typographyMessageTextL: string;
         typographyPaginationLabelM: string;
+        typographyTileParagraphM: string;
         typographyPillLabelS: string;
         typographyPillLabelM: string;
         typographyPillLabelL: string;
@@ -390,13 +390,22 @@ declare function _default(palette: any): {
         typographySidebarTitleS: string;
         typographySidebarTitleM: string;
         typographySidebarTitleL: string;
+        typographySidebarParagraphM: string;
         typographyStepFlowCompleteLabelM: string;
         typographyStepFlowCurrentLabelM: string;
         typographyStepFlowIncompleteLabelM: string;
         typographySwitchOptionLabelM: string;
         typographySwitchOptionLabelL: string;
+        typographyTableHeaderTextXs: string;
+        typographyTableHeaderTextS: string;
         typographyTableHeaderTextM: string;
+        typographyTableHeaderTextL: string;
+        typographyTableHeaderTextXl: string;
+        typographyTableCellTextXs: string;
+        typographyTableCellTextS: string;
         typographyTableCellTextM: string;
+        typographyTableCellTextL: string;
+        typographyTableCellTextXl: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
         opacity300: string;

package/lib/style/themes/sage/index.d.ts

@@ -10,6 +10,7 @@ declare var _default: {
         colorsYin075: string;
         colorsYin090: string;
         colorsYang100: string;
+        colorsYang030: string;
         colorsYang080: string;
         colorsGray850: string;
         colorsGray900: string;
@@ -95,6 +96,8 @@ declare var _default: {
         colorsUtilityReadOnly500: string;
         colorsUtilityReadOnly600: string;
         colorsActionMajor150: string;
+        colorsActionMajor350: string;
+        colorsActionMajor450: string;
         colorsActionMajor500: string;
         colorsActionMajor600: string;
         colorsActionMajor700: string;
@@ -105,6 +108,7 @@ declare var _default: {
         colorsActionMajorYin065: string;
         colorsActionMajorYin090: string;
         colorsActionMajorYang100: string;
+        colorsActionMajorYang030: string;
         colorsActionMinor100: string;
         colorsActionMinor150: string;
         colorsActionMinor200: string;
@@ -270,16 +274,10 @@ declare var _default: {
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;
-        typographyDialogTitleXs: string;
-        typographyDialogTitleS: string;
-        typographyDialogTitleMs: string;
         typographyDialogTitleM: string;
-        typographyDialogTitleMl: string;
-        typographyDialogTitleL: string;
-        typographyDialogTitleXl: string;
-        typographyDialogParagraphXs: string;
-        typographyDialogParagraphS: string;
+        typographyDialogParagraphM: string;
         typographyDrawerTitleM: string;
+        typographyDrawerParagraphM: string;
         typographyFlashTextM: string;
         typographyFlashTextL: string;
         typographyFormFieldLabelXs: string;
@@ -314,6 +312,7 @@ declare var _default: {
         typographyFormFieldCharacterCountS: string;
         typographyFormFieldCharacterCountM: string;
         typographyFormFieldCharacterCountL: string;
+        typographyLinkTextS: string;
         typographyLinkTextM: string;
         typographyLinkTextL: string;
         typographyMenuLabelM: string;
@@ -323,6 +322,7 @@ declare var _default: {
         typographyMessageTextM: string;
         typographyMessageTextL: string;
         typographyPaginationLabelM: string;
+        typographyTileParagraphM: string;
         typographyPillLabelS: string;
         typographyPillLabelM: string;
         typographyPillLabelL: string;
@@ -355,13 +355,22 @@ declare var _default: {
         typographySidebarTitleS: string;
         typographySidebarTitleM: string;
         typographySidebarTitleL: string;
+        typographySidebarParagraphM: string;
         typographyStepFlowCompleteLabelM: string;
         typographyStepFlowCurrentLabelM: string;
         typographyStepFlowIncompleteLabelM: string;
         typographySwitchOptionLabelM: string;
         typographySwitchOptionLabelL: string;
+        typographyTableHeaderTextXs: string;
+        typographyTableHeaderTextS: string;
         typographyTableHeaderTextM: string;
+        typographyTableHeaderTextL: string;
+        typographyTableHeaderTextXl: string;
+        typographyTableCellTextXs: string;
+        typographyTableCellTextS: string;
         typographyTableCellTextM: string;
+        typographyTableCellTextL: string;
+        typographyTableCellTextXl: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
         opacity300: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "105.1.1",
+  "version": "106.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -51,6 +51,7 @@
   },
   "homepage": "https://carbon.sage.com",
   "peerDependencies": {
+    "@sage/design-tokens": "^2.3.0",
     "draft-js": "^0.11.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -68,7 +69,8 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@cypress/react": "^5.12.0",
-    "@cypress/webpack-dev-server": "^1.8.0",
+    "@cypress/webpack-dev-server": "^1.8.4",
+    "@sage/design-tokens": "^2.3.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -88,10 +90,13 @@
     "@testing-library/react": "^12.1.3",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/invariant": "^2.2.35",
     "@types/jest": "^26.0.19",
+    "@types/lodash": "^4.14.179",
     "@types/node": "10.12.18",
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.8",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.9",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -151,15 +156,15 @@
     "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
     "ts-node": "^10.4.0",
-    "typescript": "^4.3.5",
+    "typescript": "^4.6.2",
     "typescript-to-proptypes": "^2.2.1",
     "uuid": "^8.3.2",
-    "webpack-dev-server": "^3.11.3"
+    "webfontloader": "^1.6.28",
+    "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.11.2",
-    "@sage/design-tokens": "^1.93.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",

package/esm/__internal__/utils/ether/ether.d.ts

@@ -1,19 +0,0 @@
-/**
- * Ether
- *
- * Ether provides functional-like helper methods for Carbon specific tasks.
- * As we are dealing with stateful values (user input, browser state) Ether
- * does not provide pure functions in all cases.
- */
-/**
- * Returns the props that were passed to a component but excludes the props listed in propTypes
- *
- * Optionally includes the safeProps which can be defined as a static property on a Class or passed as the second
- * argument.
- *
- * @method validProps
- * @param {Object} instance
- * @param {Array?} safeProps
- * @return {Object} props
- */
-export function validProps(instance: Object, safeProps: any[] | null): Object;

package/esm/__internal__/utils/ether/ether.js

@@ -1,29 +0,0 @@
-import { omit, difference } from "lodash";
-/**
- * Ether
- *
- * Ether provides functional-like helper methods for Carbon specific tasks.
- * As we are dealing with stateful values (user input, browser state) Ether
- * does not provide pure functions in all cases.
- */
-
-/**
- * Returns the props that were passed to a component but excludes the props listed in propTypes
- *
- * Optionally includes the safeProps which can be defined as a static property on a Class or passed as the second
- * argument.
- *
- * @method validProps
- * @param {Object} instance
- * @param {Array?} safeProps
- * @return {Object} props
- */
-
-function validProps(instance, safeProps) {
-  const component = instance.isReactComponent ? instance.constructor : instance;
-  const unsafeProps = difference(Object.keys(component.propTypes), safeProps || component.safeProps || []);
-  return omit(instance.props, unsafeProps);
-} // eslint-disable-next-line import/prefer-default-export
-
-
-export { validProps };

package/esm/__internal__/utils/ether/index.d.ts

@@ -1 +0,0 @@
-export * from "./ether";

package/esm/__internal__/utils/ether/index.js

@@ -1 +0,0 @@
-export * from "./ether";

package/esm/__internal__/utils/helpers/browser/browser.d.ts

@@ -1,17 +0,0 @@
-export default Browser;
-declare namespace Browser {
-    function isDomAvailable(): boolean;
-    function getWindow(): any;
-    function getDocument(): Document;
-    function getActiveElement(): Element | null;
-    function redirectTo(url: any): void;
-    function redirectAfter(url: any, seconds: any): NodeJS.Timeout;
-    function reload(): void;
-    function editFocus(ref: any): void;
-    function setFocus(reactNode: any): void;
-    function setInputFocus(inputComponent: any): void;
-    function setCookie(name: any, value: any, options?: Object): void;
-    function getCookie(name: string): string | null;
-    function postToNewWindow(url: string, data: Object, target?: Object): void;
-    function submitForm(form: any): void;
-}