@sproutsocial/racine 20.8.0 → 20.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 20.9.0
+
+### Minor Changes
+
+- 2e135c53a: Add prop to Drawer to allow certain elements to be exempt from the Drawer focus lock
+
+  This is helpful when Pendo Guide are activated while a drawer is open.
+
+- 60ba119e2: The width of Drawer can now be customized using the `width` prop.
+
 ## 20.8.0
 
 ### Minor Changes

package/__flow__/Drawer/Drawer.flow.js

@@ -35,6 +35,7 @@ export type TypeDrawerProps = {
   onClose: () => void,
   zIndex?: number,
   closeTargets?: Array<Element>,
+  width?: number,
   ...
 };
 declare class DrawerContainer extends React.Component<TypeDrawerProps> {

package/commonjs/Drawer/Drawer.js

@@ -17,8 +17,8 @@ var _SlideTransition = require("./SlideTransition");
 var _styles = _interopRequireWildcard(require("./styles"));
 var _excluded = ["title", "id", "children", "render"],
   _excluded2 = ["children"],
-  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets"],
-  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets"];
+  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets", "width", "focusLockExemptCheck"],
+  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets", "width"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,8 +30,6 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-deprecated
-// If ever we needed to make drawer width configurable, move this to a default prop
-var DRAWER_WIDTH = 600;
 var AnimatedDrawer = (0, _reactSpring.animated)(_styles.default);
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
@@ -103,6 +101,8 @@ var Drawer = function Drawer(_ref3) {
     onClose = _ref3.onClose,
     zIndex = _ref3.zIndex,
     closeTargets = _ref3.closeTargets,
+    width = _ref3.width,
+    focusLockExemptCheck = _ref3.focusLockExemptCheck,
     rest = _objectWithoutProperties(_ref3, _excluded3);
   var drawerRef = (0, React.useRef)(null);
   (0, React.useEffect)(function () {
@@ -141,11 +141,14 @@ var Drawer = function Drawer(_ref3) {
   return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
     key: id,
     autoFocus: true,
-    returnFocus: true
+    returnFocus: true,
+    whiteList: focusLockExemptCheck ? function (e) {
+      return !focusLockExemptCheck(e);
+    } : undefined
   }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
     ref: drawerRef,
     style: style,
-    width: DRAWER_WIDTH,
+    width: width,
     offset: offset,
     direction: direction,
     "data-qa-drawer": id,
@@ -168,6 +171,8 @@ var DrawerContainer = function DrawerContainer(_ref4) {
     zIndex = _ref4$zIndex === void 0 ? 7 : _ref4$zIndex,
     _ref4$closeTargets = _ref4.closeTargets,
     closeTargets = _ref4$closeTargets === void 0 ? [] : _ref4$closeTargets,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? 600 : _ref4$width,
     rest = _objectWithoutProperties(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(_Portal.default, {
     id: id
@@ -177,7 +182,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       closeButtonLabel: closeButtonLabel
     }
   }, /*#__PURE__*/React.createElement(_SlideTransition.SlideTransition, {
-    width: DRAWER_WIDTH + offset,
+    width: width + offset,
     direction: direction,
     isVisible: isOpen
   }, function (_ref5) {
@@ -196,6 +201,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       onClose: onClose,
       zIndex: zIndex,
       closeTargets: closeTargets,
+      width: width,
       "data-qa-drawer": id || '',
       "data-qa-drawer-isopen": isOpen === true
     }, rest), children);

package/dist/types/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { TypeDrawerCloseButtonProps, TypeDrawerHeaderProps, TypeDrawerProps, TypeDrawerContentProps } from './DrawerTypes';
 declare const DrawerContainer: {
-    ({ children, closeButtonLabel, direction, disableCloseOnClickOutside, id, isOpen, offset, onClose, zIndex, closeTargets, ...rest }: TypeDrawerProps): JSX.Element;
+    ({ children, closeButtonLabel, direction, disableCloseOnClickOutside, id, isOpen, offset, onClose, zIndex, closeTargets, width, ...rest }: TypeDrawerProps): JSX.Element;
     Header: {
         ({ title, id, children, render, ...rest }: TypeDrawerHeaderProps): React.ReactElement<any, any> | null;
         displayName: string;

package/dist/types/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AA+KvB,QAAA,MAAM,eAAe;wIAYlB,eAAe;;mDA7If,qBAAqB;;;;gCAmCoB,sBAAsB;;;;gBAjEhC,0BAA0B;;;CAiN3D,CAAC;AAUF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AAsLvB,QAAA,MAAM,eAAe;+IAalB,eAAe;;mDAvJf,qBAAqB;;;;gCAmCoB,sBAAsB;;;;gBAjEhC,0BAA0B;;;CA4N3D,CAAC;AAUF,eAAe,eAAe,CAAC"}

package/dist/types/Drawer/DrawerTypes.d.ts

@@ -37,6 +37,8 @@ export interface TypeDrawerProps extends TypeStyledComponentsCommonProps, TypeSy
     onClose: () => void;
     zIndex?: number;
     closeTargets?: Array<Element>;
+    width?: number;
+    focusLockExemptCheck?: (element: HTMLElement) => boolean;
 }
 export interface TypeDrawerContentProps extends TypeBoxProps {
     children?: React.ReactNode;

package/dist/types/Drawer/DrawerTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTypes.d.ts","sourceRoot":"","sources":["../../../src/Drawer/DrawerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAEhC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IAEpB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,0IAA0I;IAC1I,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iJAAiJ;IACjJ,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,QAAQ,CAAC;IAE5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,eACf,SAAQ,+BAA+B,EACrC,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iEAAiE;IACjE,gBAAgB,EAAE,MAAM,CAAC;IAEzB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE7B,2IAA2I;IAC3I,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"DrawerTypes.d.ts","sourceRoot":"","sources":["../../../src/Drawer/DrawerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAEhC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IAEpB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,0IAA0I;IAC1I,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iJAAiJ;IACjJ,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,QAAQ,CAAC;IAE5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,eACf,SAAQ,+BAA+B,EACrC,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iEAAiE;IACjE,gBAAgB,EAAE,MAAM,CAAC;IAEzB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE7B,2IAA2I;IAC3I,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;CAC1D;AAED,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/lib/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["title", "id", "children", "render"],
   _excluded2 = ["children"],
-  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets"],
-  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets"];
+  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets", "width", "focusLockExemptCheck"],
+  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,8 +23,6 @@ import Text from "../Text";
 import Portal from "../Portal";
 import { SlideTransition } from "./SlideTransition";
 import Container, { Content } from "./styles";
-// If ever we needed to make drawer width configurable, move this to a default prop
-var DRAWER_WIDTH = 600;
 var AnimatedDrawer = animated(Container);
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
@@ -96,6 +94,8 @@ var Drawer = function Drawer(_ref3) {
     onClose = _ref3.onClose,
     zIndex = _ref3.zIndex,
     closeTargets = _ref3.closeTargets,
+    width = _ref3.width,
+    focusLockExemptCheck = _ref3.focusLockExemptCheck,
     rest = _objectWithoutProperties(_ref3, _excluded3);
   var drawerRef = useRef(null);
   useEffect(function () {
@@ -134,11 +134,14 @@ var Drawer = function Drawer(_ref3) {
   return /*#__PURE__*/React.createElement(FocusLock, {
     key: id,
     autoFocus: true,
-    returnFocus: true
+    returnFocus: true,
+    whiteList: focusLockExemptCheck ? function (e) {
+      return !focusLockExemptCheck(e);
+    } : undefined
   }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
     ref: drawerRef,
     style: style,
-    width: DRAWER_WIDTH,
+    width: width,
     offset: offset,
     direction: direction,
     "data-qa-drawer": id,
@@ -161,6 +164,8 @@ var DrawerContainer = function DrawerContainer(_ref4) {
     zIndex = _ref4$zIndex === void 0 ? 7 : _ref4$zIndex,
     _ref4$closeTargets = _ref4.closeTargets,
     closeTargets = _ref4$closeTargets === void 0 ? [] : _ref4$closeTargets,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? 600 : _ref4$width,
     rest = _objectWithoutProperties(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(Portal, {
     id: id
@@ -170,7 +175,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       closeButtonLabel: closeButtonLabel
     }
   }, /*#__PURE__*/React.createElement(SlideTransition, {
-    width: DRAWER_WIDTH + offset,
+    width: width + offset,
     direction: direction,
     isVisible: isOpen
   }, function (_ref5) {
@@ -189,6 +194,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       onClose: onClose,
       zIndex: zIndex,
       closeTargets: closeTargets,
+      width: width,
       "data-qa-drawer": id || '',
       "data-qa-drawer-isopen": isOpen === true
     }, rest), children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "20.8.0",
+  "version": "20.9.0",
   "license": "MIT",
   "files": [
     "__flow__",