@moda/om 17.12.0 → 17.13.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [17.13.0](https://github.com/ModaOperandi/om/compare/v17.12.0...v17.13.0) (2022-11-14)
+
+
+### Features
+
+* **button:** adds tertiary and elevated ([#3050](https://github.com/ModaOperandi/om/issues/3050)) ([6f1030d](https://github.com/ModaOperandi/om/commit/6f1030d5768aaf80ecbdf2866e90b3e993656f4d))
+
 # [17.12.0](https://github.com/ModaOperandi/om/compare/v17.11.0...v17.12.0) (2022-11-09)
 
 

package/dist/index.cjs.js

@@ -2818,7 +2818,9 @@ var mediumFocus = createMedium({}, function (_ref) {
 var mediumBlur = createMedium();
 var mediumEffect = createMedium();
 var mediumSidecar = createSidecarMedium({
-  async: true
+  async: true // focus-lock sidecar is not required on the server
+  // however, it might be required for JSDOM tests
+  // ssr: true,
 });
 
 var emptyArray = [];
@@ -2915,7 +2917,8 @@ var FocusLock = /*#__PURE__*/React__namespace.forwardRef(function FocusLockUI(pr
       console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
     }
     React__namespace.useEffect(function () {
-      if (!observed.current) {
+      // report incorrect integration - https://github.com/theKashey/react-focus-lock/issues/123
+      if (!observed.current && typeof Container !== 'string') {
         // eslint-disable-next-line no-console
         console.error('FocusLock: could not obtain ref to internal node');
       }
@@ -3042,9 +3045,10 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
     sideCar = props.sideCar,
     className = props.className,
     shouldIgnore = props.shouldIgnore,
+    preventScrollOnFocus = props.preventScrollOnFocus,
     style = props.style,
     as = props.as,
-    rest = __rest$a(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
+    rest = __rest$a(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as"]);
   var SideCar = sideCar;
   var onActivation = lockProps.onActivation,
     onDeactivation = lockProps.onDeactivation,
@@ -3070,6 +3074,9 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
     className: className,
     whiteList: shouldIgnore,
     lockProps: appliedLockProps,
+    focusOptions: preventScrollOnFocus ? {
+      preventScroll: true
+    } : undefined,
     as: RemoveScroll
   }, children), enabled && /*#__PURE__*/React__namespace.createElement(SideCar, _assign({}, rest, {
     sideCar: effectCar,
@@ -4181,22 +4188,25 @@ var nonPassive = passiveSupported ? {
   passive: false
 } : false;
 
-var elementCouldBeVScrolled = function elementCouldBeVScrolled(node) {
+var alwaysContainsScroll = function alwaysContainsScroll(node) {
+  // textarea will always _contain_ scroll inside self. It only can be hidden
+  return node.tagName === 'TEXTAREA';
+};
+var elementCanBeScrolled = function elementCanBeScrolled(node, overflow) {
   var styles = window.getComputedStyle(node);
-  return styles.overflowY !== 'hidden' &&
-  // not-not-scrollable
-  !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable
-  ;
+  return (
+    // not-not-scrollable
+    styles[overflow] !== 'hidden' &&
+    // contains scroll inside self
+    !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible')
+  );
+};
+var elementCouldBeVScrolled = function elementCouldBeVScrolled(node) {
+  return elementCanBeScrolled(node, 'overflowY');
 };
-
 var elementCouldBeHScrolled = function elementCouldBeHScrolled(node) {
-  var styles = window.getComputedStyle(node);
-  return styles.overflowX !== 'hidden' &&
-  // not-not-scrollable
-  !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
-  ;
+  return elementCanBeScrolled(node, 'overflowX');
 };
-
 var locationCouldBeScrolled = function locationCouldBeScrolled(axis, node) {
   var current = node;
   do {
@@ -4375,7 +4385,9 @@ function RemoveScrollSideCar(props) {
     })[0];
     // self event, and should be canceled
     if (sourceEvent && sourceEvent.should) {
-      event.preventDefault();
+      if (event.cancelable) {
+        event.preventDefault();
+      }
       return;
     }
     // outside or shard event
@@ -4385,7 +4397,9 @@ function RemoveScrollSideCar(props) {
       });
       var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
       if (shouldStop) {
-        event.preventDefault();
+        if (event.cancelable) {
+          event.preventDefault();
+        }
       }
     }
   }, []);
@@ -4454,20 +4468,41 @@ var counterMap = new WeakMap();
 var uncontrolledNodes = new WeakMap();
 var markerMap = {};
 var lockCount = 0;
-var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
-  if (parentNode === void 0) {
-    parentNode = getDefaultParent(originalTarget);
-  }
-  if (markerName === void 0) {
-    markerName = "data-aria-hidden";
-  }
-  var targets = Array.isArray(originalTarget) ? originalTarget : [originalTarget];
+var unwrapHost = function unwrapHost(node) {
+  return node && (node.host || unwrapHost(node.parentNode));
+};
+var correctTargets = function correctTargets(parent, targets) {
+  return targets.map(function (target) {
+    if (parent.contains(target)) {
+      return target;
+    }
+    var correctedTarget = unwrapHost(target);
+    if (correctedTarget && parent.contains(correctedTarget)) {
+      return correctedTarget;
+    }
+    console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
+    return null;
+  }).filter(function (x) {
+    return Boolean(x);
+  });
+};
+/**
+ * Marks everything except given node(or nodes) as aria-hidden
+ * @param {Element | Element[]} originalTarget - elements to keep on the page
+ * @param [parentNode] - top element, defaults to document.body
+ * @param {String} [markerName] - a special attribute to mark every node
+ * @param {String} [controlAttribute] - html Attribute to control
+ * @return {Undo} undo command
+ */
+var applyAttributeToOthers = function applyAttributeToOthers(originalTarget, parentNode, markerName, controlAttribute) {
+  var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
   if (!markerMap[markerName]) {
     markerMap[markerName] = new WeakMap();
   }
   var markerCounter = markerMap[markerName];
   var hiddenNodes = [];
   var elementsToKeep = new Set();
+  var elementsToStop = new Set(targets);
   var keep = function keep(el) {
     if (!el || elementsToKeep.has(el)) {
       return;
@@ -4477,14 +4512,14 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
   };
   targets.forEach(keep);
   var deep = function deep(parent) {
-    if (!parent || targets.indexOf(parent) >= 0) {
+    if (!parent || elementsToStop.has(parent)) {
       return;
     }
     Array.prototype.forEach.call(parent.children, function (node) {
       if (elementsToKeep.has(node)) {
         deep(node);
       } else {
-        var attr = node.getAttribute('aria-hidden');
+        var attr = node.getAttribute(controlAttribute);
         var alreadyHidden = attr !== null && attr !== 'false';
         var counterValue = (counterMap.get(node) || 0) + 1;
         var markerValue = (markerCounter.get(node) || 0) + 1;
@@ -4498,7 +4533,7 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
           node.setAttribute(markerName, 'true');
         }
         if (!alreadyHidden) {
-          node.setAttribute('aria-hidden', 'true');
+          node.setAttribute(controlAttribute, 'true');
         }
       }
     });
@@ -4514,7 +4549,7 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
       markerCounter.set(node, markerValue);
       if (!counterValue) {
         if (!uncontrolledNodes.has(node)) {
-          node.removeAttribute('aria-hidden');
+          node.removeAttribute(controlAttribute);
         }
         uncontrolledNodes["delete"](node);
       }
@@ -4524,6 +4559,7 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
     });
     lockCount--;
     if (!lockCount) {
+      // clear
       counterMap = new WeakMap();
       counterMap = new WeakMap();
       uncontrolledNodes = new WeakMap();
@@ -4531,6 +4567,28 @@ var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
     }
   };
 };
+/**
+ * Marks everything except given node(or nodes) as aria-hidden
+ * @param {Element | Element[]} originalTarget - elements to keep on the page
+ * @param [parentNode] - top element, defaults to document.body
+ * @param {String} [markerName] - a special attribute to mark every node
+ * @return {Undo} undo command
+ */
+var hideOthers = function hideOthers(originalTarget, parentNode, markerName) {
+  if (markerName === void 0) {
+    markerName = 'data-aria-hidden';
+  }
+  var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
+  var activeParentNode = parentNode || getDefaultParent(originalTarget);
+  if (!activeParentNode) {
+    return function () {
+      return null;
+    };
+  }
+  // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
+  targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
+  return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
+};
 
 var Style = styleSingleton();
 var styles = "\n [" + focusHiddenMarker + "] {\n   pointer-events: none !important;\n }\n";
@@ -6407,9 +6465,11 @@ var Breakpoint = function Breakpoint(_ref) {
   }, omit$1(['at', 'gt', 'lt'], rest)), children) : null;
 };
 
-var _excluded$v = ["secondary", "chip", "hover", "focus", "disabled", "className"];
+var _excluded$v = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
 var Button = function Button(_ref) {
   var secondary = _ref.secondary,
+    tertiary = _ref.tertiary,
+    elevated = _ref.elevated,
     chip = _ref.chip,
     hover = _ref.hover,
     focus = _ref.focus,
@@ -6420,6 +6480,8 @@ var Button = function Button(_ref) {
     className: classNames('Button', {
       'Button--chip': chip,
       'Button--secondary': secondary,
+      'Button--tertiary': tertiary,
+      'Button--elevated': elevated,
       'Button--hover': hover,
       'Button--focus': focus,
       'Button--disabled': disabled