carbon-react 105.2.0 → 106.0.2

package/lib/components/confirm/confirm.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 

package/lib/components/dialog/dialog.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _modal = _interopRequireDefault(require("../modal"));
 

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _modal = _interopRequireDefault(require("../modal"));
 

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

@@ -1,5 +1,10 @@
 export default Fieldset;
-declare function Fieldset(props: any): JSX.Element;
+declare function Fieldset({ children, inline, legend, ...rest }: {
+    [x: string]: any;
+    children: any;
+    inline: any;
+    legend: any;
+}): JSX.Element;
 declare namespace Fieldset {
     namespace propTypes {
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/fieldset/fieldset.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
-var _ether = require("../../__internal__/utils/ether");
-
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _utils = require("../../style/utils");
@@ -27,32 +25,32 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-const Fieldset = props => {
-  const legend = () => {
-    if (!props.legend) return null;
+const Fieldset = ({
+  children,
+  inline,
+  legend,
+  ...rest
+}) => {
+  const getLegend = () => {
+    if (!legend) return null;
     return /*#__PURE__*/_react.default.createElement(_fieldset.LegendContainerStyle, {
-      inline: props.inline,
+      inline: inline,
       "data-component": "legend-style"
     }, /*#__PURE__*/_react.default.createElement("legend", {
       "data-element": "legend"
-    }, props.legend));
+    }, legend));
   };
 
-  const { ...safeProps
-  } = (0, _ether.validProps)({
-    propTypes: Fieldset.propTypes,
-    props
-  });
   return /*#__PURE__*/_react.default.createElement(_carbonProvider.NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", props), safeProps, {
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", rest), rest, {
     m: 0
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
     "data-component": "fieldset-style",
-    inline: props.inline
-  }, legend(), props.children)));
+    inline: inline
+  }, getLegend(), children)));
 };
 
 Fieldset.propTypes = {

package/lib/components/portrait/portrait-initials.component.js

@@ -60,7 +60,7 @@ const PortraitInitials = ({
     canvas.height = dimensions; // Select a font family to support different language characters
     // like Arial
 
-    context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
+    context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
     context.textAlign = "center"; // Setup background and front color
 
     context.fillStyle = _common.default[bgColor];

package/lib/components/select/select-list/select-list.component.js

@@ -31,7 +31,7 @@ var _loader = _interopRequireDefault(require("../../loader"));
 
 var _option = _interopRequireDefault(require("../option/option.component"));
 
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
 

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -15,7 +15,7 @@ var _textbox = _interopRequireDefault(require("../../textbox"));
 
 var _selectText = _interopRequireDefault(require("../__internal__/select-text/select-text.component"));
 
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 

package/lib/components/split-button/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./split-button";
+export type { SplitButtonProps } from "./split-button";

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -374,18 +374,16 @@ const StyledTabTitle = _styledComponents.default.button`
 
     ${alternateStyling && (0, _styledComponents.css)`
         &:focus {
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         }
 
         &:hover {
-          background-color: ${isTabSelected ? "var(--colorsActionMinor100)" : "var(--colorsActionMinor150)"};
+          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
         }
 
         ${isTabSelected && (0, _styledComponents.css)`
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         `}
-
-        ${isInSidebar && `padding-bottom: 1px;`}
       `}
   `}
 `;

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

@@ -1,6 +1,5 @@
 export { Textbox as OriginalTextbox };
-declare var _default: JSX.Element;
-export default _default;
+export default Textbox;
 declare function Textbox({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: {
     [x: string]: any;
     align: any;

package/lib/components/textbox/textbox.component.js

@@ -19,7 +19,7 @@ var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-
 
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
 
-var _withUniqueIdProps = _interopRequireDefault(require("../../__internal__/utils/helpers/with-unique-id-props"));
+var _useUniqueId = _interopRequireDefault(require("../../__internal__/utils/helpers/useUniqueId"));
 
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 
@@ -113,13 +113,14 @@ const Textbox = ({
 
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
 
+  const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
   const {
     labelId: internalLabelId,
     validationIconId,
     fieldHelpId,
     ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
-    id,
+    id: uniqueId,
     error,
     warning,
     info,
@@ -145,7 +146,7 @@ const Textbox = ({
     labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,
     labelWidth: computeLabelPropValues(labelWidth),
-    id: id,
+    id: uniqueId,
     reverse: computeLabelPropValues(reverse),
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
@@ -185,9 +186,9 @@ const Textbox = ({
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
-    id: id,
+    id: uniqueId,
     inputRef: inputRef,
-    name: name,
+    name: uniqueName,
     onBlur: onBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
@@ -410,7 +411,5 @@ Textbox.defaultProps = {
   size: "medium",
   validationOnLabel: false
 };
-
-var _default = (0, _withUniqueIdProps.default)(Textbox);
-
+var _default = Textbox;
 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.2.0",
+  "version": "106.0.2",
   "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",
@@ -69,6 +70,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@cypress/react": "^5.12.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",
@@ -90,6 +92,7 @@
     "@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",
@@ -156,13 +159,11 @@
     "typescript": "^4.6.2",
     "typescript-to-proptypes": "^2.2.1",
     "uuid": "^8.3.2",
-    "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;
-}