orcs-design-system 3.1.31 → 3.1.33

package/README.md

@@ -42,6 +42,27 @@ As an alternative to `npm link` you can run `npm run dist` and then copy the `es
 
 `cp -R es/ ../../../team-directory/node_modules/orcs-design-system/`
 
+**_This has now been been made easier with using Nodemon and a custom script. Read on for how to set this up._**
+
+### Working with orcs locally (hot reloading).
+
+1. `cp .env.example .env`
+2. OPTIONAL: Update `WORKING_DIR` in `.env` if orcs resides in a different working directory to your project. Else-wise Orcs will assume the project is one level up from itself.
+3. Add any projects to `CONSUMERS` in `.env` separated by ',' e.g. `CONSUMERS=my-app,your-app,our-app`
+4. IF APPLICABLE: Add the following to your webpack configuration
+
+```
+...
+snapshot: {
+    managedPaths: [/^(.+?[\\/]node_modules)[\\/]((?!orcs-design-system)).*[\\/]*/]
+}
+...
+```
+
+5. Run `npm run dev`.
+
+Now you can make any changes in orcs and it will build and then copy the es from the build into your project's node_modules. Run `npm install` in your project dir if you want to revert to the npm installation.
+
 ### Symlinking with `npm link`
 
 ##### We haven't had much success with this recently

package/es/components/Modal/index.js

@@ -4,7 +4,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
-import useOnclickOutside from "react-cool-onclickoutside";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
 import FocusTrap from "focus-trap-react";
@@ -95,12 +94,6 @@ var Modal = function Modal(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     lastActiveElement = _useState2[0],
     setLastActiveElement = _useState2[1];
-  var options = {
-    disabled: !visible
-  };
-  var modalRef = useOnclickOutside(function () {
-    onClose();
-  }, options);
   var ariaLabel = useMemo(function () {
     if (restProps.ariaLabel) {
       return restProps.ariaLabel;
@@ -123,13 +116,35 @@ var Modal = function Modal(_ref) {
     if (visible && !lastActiveElement) {
       // Keep track of last clicked element to refocus to after dialog closes
       setLastActiveElement(document.activeElement);
-    } else {
+    } else if (!visible) {
       setLastActiveElement(null);
 
       // Focus the last active element before modal open when modal is closed
       focusLastActiveElement();
     }
   }, [visible, focusLastActiveElement, lastActiveElement]);
+  useEffect(function () {
+    if (!visible) return;
+
+    /* Adding onClick handler on the Overlay does not work.
+     * So we add a global listener and check if the element clicked is the
+     * overlay vida overlayID.
+     */
+    var handler = function handler(e) {
+      if (e.target.id === overlayID) {
+        onClose();
+      }
+    };
+    var eventTypes = ["touchstart", "click"];
+    eventTypes.map(function (type) {
+      window.addEventListener(type, handler, true);
+    });
+    return function () {
+      eventTypes.map(function (type) {
+        window.removeEventListener(type, handler, true);
+      });
+    };
+  }, [visible, onClose, overlayID]);
   var component = /*#__PURE__*/React.createElement(Overlay, _extends({
     alignItems: "center",
     justifyContent: "center",
@@ -138,8 +153,7 @@ var Modal = function Modal(_ref) {
     focusTrapOptions: {
       onDeactivate: onClose
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    ref: modalRef,
+  }, /*#__PURE__*/React.createElement("div", {
     role: "dialog",
     "aria-modal": "true",
     "aria-label": ariaLabel
@@ -181,7 +195,7 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement(ScrollableContent, {
     headerContent: headerContent,
     overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))))));
+  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent)))));
   var wrapper = visible && /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component, document.body);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.31",
+  "version": "3.1.33",
   "engines": {
     "node": "18.17.1"
   },
@@ -40,7 +40,8 @@
     "build-storybook": "storybook build -s .storybook/static -o .build_storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "playroom": "playroom start",
-    "build-playroom": "playroom build"
+    "build-playroom": "playroom build",
+    "dev": "nodemon --ignore es/ ./scripts/dev.js"
   },
   "dependencies": {
     "@styled-system/css": "^5.1.5",
@@ -109,7 +110,9 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-react-docgen": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.7",
+    "chalk": "^4.1.0",
     "css-loader": "^5.2.6",
+    "dotenv": "^16.4.5",
     "eslint": "^7.16.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-config-react-app": "^6.0.0",
@@ -123,11 +126,13 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
+    "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "playroom": "^0.32.1",
     "prettier": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "shelljs": "^0.8.5",
     "storybook": "^7.6.7",
     "style-loader": "^2.0.0",
     "styled-components": "^5.2.1",