carbon-react 99.1.0 → 101.0.0

package/lib/components/modal/__internal__/modal-manager.js

@@ -17,6 +17,8 @@ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _
 
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
@@ -25,39 +27,73 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
+var _getTopModal = /*#__PURE__*/new WeakSet();
+
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
 
+    _getTopModal.add(this);
+
     _modalList.set(this, {
       writable: true,
       value: []
     });
 
-    _defineProperty(this, "addModal", modal => {
-      _classPrivateFieldGet(this, _modalList).push(modal);
+    _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
+      const {
+        modal: topModal,
+        setTriggerRefocusFlag: setTrapFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (topModal && setTrapFlag) {
+        setTrapFlag(false);
+      }
+
+      _classPrivateFieldGet(this, _modalList).push({
+        modal,
+        setTriggerRefocusFlag
+      });
     });
   }
 
   _createClass(ModalManagerInstance, [{
     key: "isTopmost",
     value: function isTopmost(modal) {
-      if (!modal || !_classPrivateFieldGet(this, _modalList).length) {
+      const {
+        modal: topModal
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (!modal || !topModal) {
         return false;
       }
 
-      return _classPrivateFieldGet(this, _modalList).indexOf(modal) === _classPrivateFieldGet(this, _modalList).length - 1;
+      return modal === topModal;
     }
   }, {
     key: "removeModal",
     value: function removeModal(modal) {
-      const modalIndex = _classPrivateFieldGet(this, _modalList).indexOf(modal);
+      const modalIndex = _classPrivateFieldGet(this, _modalList).findIndex(({
+        modal: m
+      }) => m === modal);
 
       if (modalIndex === -1) {
         return;
       }
 
       _classPrivateFieldGet(this, _modalList).splice(modalIndex, 1);
+
+      if (!_classPrivateFieldGet(this, _modalList).length) {
+        return;
+      }
+
+      const {
+        setTriggerRefocusFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (setTriggerRefocusFlag) {
+        setTriggerRefocusFlag(true);
+      }
     }
   }, {
     key: "clearList",
@@ -69,6 +105,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   return ModalManagerInstance;
 }();
 
+function _getTopModal2() {
+  if (!_classPrivateFieldGet(this, _modalList).length) {
+    return {};
+  }
+
+  return _classPrivateFieldGet(this, _modalList)[_classPrivateFieldGet(this, _modalList).length - 1];
+}
+
 const ModalManager = new ModalManagerInstance();
 var _default = ModalManager;
 exports.default = _default;

package/lib/components/modal/modal.component.js

@@ -46,6 +46,7 @@ const Modal = ({
   const modalRegistered = (0, _react.useRef)(false);
   const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
+  const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
   const setOverflow = (0, _react.useCallback)(() => {
     if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
       originalOverflow.current = document.documentElement.style.overflow;
@@ -110,7 +111,7 @@ const Modal = ({
   const registerModal = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
-      _modalManager.default.addModal(ref.current);
+      _modalManager.default.addModal(ref.current, setTriggerRefocusFlag);
 
       modalRegistered.current = true;
     }
@@ -164,7 +165,8 @@ const Modal = ({
     timeout: timeout
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
-      isAnimationComplete
+      isAnimationComplete,
+      triggerRefocusFlag
     }
   }, content)))));
 };

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

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

package/lib/components/pages/index.js

@@ -9,7 +9,15 @@ Object.defineProperty(exports, "default", {
     return _pages.default;
   }
 });
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function () {
+    return _page.default;
+  }
+});
 
 var _pages = _interopRequireDefault(require("./pages.component"));
 
+var _page = _interopRequireDefault(require("./page/page.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/design-tokens/{carbon-scoped-story-provider → carbon-scoped-tokens-provider}/carbon-scoped-tokens-provider.component.js

@@ -24,7 +24,7 @@ const CarbonScopedTokensProvider = _styledComponents.default.div`
   display: inline;
   ${({
   theme
-}) => (0, _generateCssVariables.default)(theme)}
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/lib/style/themes/aegean/aegean-theme.config.js

@@ -26,7 +26,15 @@ var _default = palette => {
     },
     stepSequence: {
       completedText: palette.productBlueShade(23)
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary
+      };
     }
+
   };
 };
 

package/lib/style/themes/base/base-theme.config.js

@@ -337,7 +337,49 @@ var _default = palette => {
       fullScreenModal: 5000,
       notification: 6000,
       aboveAll: 9999
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionDisabled500: this.disabled.background,
+        colorsSemanticFocus500: this.colors.focus,
+        colorsSemanticPositive500: this.colors.success,
+        colorsSemanticNegative500: this.colors.error,
+        colorsSemanticNegative600: this.colors.destructive.hover,
+        colorsSemanticCaution500: this.colors.warning,
+        colorsSemanticInfo500: this.colors.info,
+        spacing000: `${this.space[0]}px`,
+        // 0px
+        spacing025: "2px",
+        spacing050: "4px",
+        spacing075: "6px",
+        spacing100: `${this.space[1]}px`,
+        // 8px
+        spacing125: "10px",
+        spacing150: "12px",
+        spacing200: `${this.space[2]}px`,
+        // 16px
+        spacing250: "20px",
+        spacing300: `${this.space[3]}px`,
+        // 24px
+        spacing400: `${this.space[4]}px`,
+        // 32px
+        spacing500: `${this.space[5]}px`,
+        // 40px
+        spacing600: `${this.space[6]}px`,
+        // 48px
+        spacing700: `${this.space[7]}px`,
+        // 56px
+        spacing800: `${this.space[8]}px`,
+        // 64px
+        spacing900: `${this.space[9]}px`,
+        // 72px
+        fontSizes100: this.text.size
+      };
     }
+
   };
 };
 

package/lib/style/themes/base/index.js

@@ -17,8 +17,6 @@ var _palette = _interopRequireDefault(require("../../palette"));
 
 var _addHexSymbols = _interopRequireDefault(require("../../utils/add-hex-symbols"));
 
-var _themeCompatibility = _interopRequireDefault(require("../../design-tokens/theme-compatibility.util"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const colors = (0, _palette.default)(_colorConfig.default);
@@ -36,13 +34,9 @@ exports.default = _default;
 
 const mergeWithBase = configureTheme => {
   const themeToMergeWithBase = configureTheme(palette);
-  const mergedThemes = { ...(0, _mergeDeep.mergeDeep)(baseTheme, themeToMergeWithBase),
+  return { ...(0, _mergeDeep.mergeDeep)(baseTheme, themeToMergeWithBase),
     palette
   };
-  return { ...mergedThemes,
-    ...(0, _themeCompatibility.default)(mergedThemes),
-    name: mergedThemes.name
-  };
 };
 
 exports.mergeWithBase = mergeWithBase;

package/lib/style/themes/mint/mint-theme.config.js

@@ -20,7 +20,15 @@ var _default = palette => {
     },
     stepSequence: {
       completedText: palette.productGreenShade(23)
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary
+      };
     }
+
   };
 };
 

package/lib/style/themes/sage/index.js

@@ -13,6 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = { ..._index.default,
   ..._common.default,
-  name: "sage"
+  name: "sage (experimental)"
 };
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "99.1.0",
+  "version": "101.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -30,7 +30,8 @@
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "generate-metadata": "node ./scripts/generate_metadata/index.mjs"
   },
   "repository": {
     "type": "git",
@@ -59,6 +60,7 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^9.0.0",
     "@storybook/addon-a11y": "^6.3.6",
     "@storybook/addon-actions": "^6.3.6",
@@ -120,6 +122,7 @@
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
@@ -203,6 +206,12 @@
           "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
         }
       ],
+      [
+        "@semantic-release/exec",
+        {
+          "successCmd": "echo \"SEMVER_VERSION=${nextRelease.version}\" >> $GITHUB_ENV"
+        }
+      ],
       "@semantic-release/github"
     ]
   }

package/lib/style/design-tokens/carbon-global-tokens-provider/carbon-global-tokens-provider.component.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = require("styled-components");
-
-var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- *
- * Converts theme properties to css variables form and set them globally
- *
- */
-const CarbonGlobalTokensProvider = (0, _styledComponents.createGlobalStyle)`
-  :root {
-    ${props => (0, _generateCssVariables.default)(props.theme)}
-  }
-`;
-var _default = CarbonGlobalTokensProvider;
-exports.default = _default;

package/lib/style/design-tokens/carbon-global-tokens-provider/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _carbonGlobalTokensProvider.default;
-  }
-});
-
-var _carbonGlobalTokensProvider = _interopRequireDefault(require("./carbon-global-tokens-provider.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }