@commercetools-frontend/permissions 20.12.3 → 21.0.0

package/README.md

@@ -4,294 +4,4 @@
   <a href="https://www.npmjs.com/package/@commercetools-frontend/permissions"><img src="https://badgen.net/npm/v/@commercetools-frontend/permissions" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/permissions"><img src="https://badgen.net/npm/v/@commercetools-frontend/permissions/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/permissions"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/permissions" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/main/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
 </p>
 
-React components to declaratively handle MC permissions.
-
-- `useIsAuthorized()`
-- `injectAuthorized()`
-- `<RestrictedByPermissions>`
-- `branchOnPermissions()`
-
-## Install
-
-```bash
-$ npm install --save @commercetools-frontend/permissions
-```
-
-## Available permissions
-
-A `Permission` is represented as a `String` with a prefix of `View` or `Manage`, followed by one of the following resource names:
-
-- `Products`
-- `Categories`
-- `Customers`
-- `CustomerGroups`
-- `Orders`
-- `ProductDiscounts`
-- `CartDiscounts`
-- `DiscountCodes`
-- `ProjectSettings`
-- `ProductTypes`
-- `DeveloperSettings`
-
-We recommend to put the permissions used by your application into a `constants.js` file.
-
-```js
-// constants.js
-export const PERMISSIONS = {
-  ViewProducts: 'ViewProducts',
-  ManageProducts: 'ManageProducts',
-  ViewOrders: 'ViewOrders',
-  ManageProductTypes: 'ManageProductTypes',
-  ViewProductTypes: 'ViewProductTypes',
-};
-```
-
-## Available action rights
-
-An `ActionRight` is represented as an object with the shape `{ group: string, name: string }`. The `group` relates to the permission while the `name` is the action right itself. Currently the following action rights for the `group: 'products'` exist:
-
-- `PublishProducts`
-- `UnpublishProducts`
-- `AddPrices`
-- `EditPrices`
-- `DeletePrices`
-- `DeleteProducts`
-- `AddProducts`
-
-We recommend to put the action rights used by your application into a `constants.js` file.
-
-```js
-export const ACTION_RIGHTS = {
-  PublishProducts: { group: 'products', name: 'PublishProducts' },
-  UnpublishProducts: { group: 'products', name: 'UnpublishProducts' },
-  AddPrices: { group: 'products', name: 'AddPrices' },
-  EditPrices: { group: 'products', name: 'EditPrices' },
-  DeletePrices: { group: 'products', name: 'DeletePrices' },
-  DeleteProducts: { group: 'products', name: 'DeleteProducts' },
-  AddProducts: { group: 'products', name: 'AddProducts' },
-};
-```
-
-## Available dataFences
-
-> This is a **beta** feature and should be used with caution. For more information, please [open an issue](https://github.com/commercetools/merchant-center-application-kit/issues/new/choose).
-
-A `DataFence` is represented as an object with the shape `{ group: string, name: string, type: string }`, where:
-
-- `type`: is one of `['store']`
-- `name`: is the `Permission` value
-- `group`: is one of the resource types (e.g. `orders`)
-
-- `ViewOrders`
-- `ManageOrders`
-
-We recommend to put the dataFences used by your application into a `constants.js` file.
-
-```js
-export const DATA_FENCES = {
-  ViewOrders: {
-    type: 'store',
-    group: 'orders',
-    name: 'ViewOrders',
-  },
-  ManageOrders: {
-    type: 'store',
-    group: 'orders',
-    name: 'ManageOrders',
-  },
-};
-```
-
-## `useIsAuthorized(options)`
-
-```js
-useIsAutorized(options: HookOptions): boolean
-```
-
-### Named arguments
-
-- `demandedPermissions`: an array of `Permission`, requested for the child component to
-  be allowed to render
-- `demandedAtionRights`: (_optional_) an array of action rights (mentioned above)
-- `demandedDataFences`: (_optional_) an array of `DataFence` (mentioned above)
-- `selectDataFenceData`: (_optional_ unless `dataFences` is specified) the function is called on each specified `dataFence` and should return the mapped value specific to the data fence. The function usually contains a switch-case logic based on the data fence `type`, with the return value based on the `props`. For example, with `type: 'order'`, the return value would be something like `ownProps.order.storeRef.key`.
-- `shouldMatchSomePermissions`: (_optional_) determines if _some_ or _every_ requested permission should match (default `false`)
-
-### Example
-
-```js
-const Test = () => {
-  const canManageProducts = useIsAuthorized({
-    demandedPermissions: ['ManageProducts'],
-  });
-  if (canManageProducts) {
-    return <span>{'Authorized'}</span>;
-  }
-  return <span>{'Not authorized'}</span>;
-};
-```
-
-## `injectAuthorized(permissions, [options])`
-
-Like `branchOnPermissions`, but without the `FallbackComponent`.
-
-> This is meant to be used in cases where only the `isAuthorized` prop is needed
-> to be injected.
-
-```js
-injectAuthorized(
-  permissions: [Permissions.ManageOrders],
-  options: ?Object
-): HoC
-```
-
-### Arguments
-
-- `permissions`: an array of `Permission`, requested for the child component to
-  be allowed to render
-- `options` (_optional_)
-  - `shouldMatchSomePermissions`: (_optional_) determines if _some_ or _every_ requested permission should match
-    (default `false`)
-  - `actionRights`: (_optional_) an array of action rights (mentioned above)
-  - `dataFences`: (_optional_) an array of `DataFence` (mentioned above)
-  - `getSelectDataFenceData`: (_optional_ unless `dataFences` is specified) the function is called with the component `props` and must return a new function that will be called on each specified `dataFence` and should return the mapped value specific to the data fence. The returned function usually contains a switch-case logic based on the data fence `type`, with the return value based on the `props`. For example, with `type: 'order'`, the return value would be something like `ownProps.order.storeRef.key`.
-
-### Example
-
-```js
-const InputField = (props) => (
-  <Input
-    //...
-    disabled={!props.isAuthorized}
-  />
-);
-
-injectAuthorized([Permissions.ViewProducts, Permissions.ViewOrders])(
-  InputField
-);
-```
-
-## `<RestrictedByPermissions>`
-
-A React component that will render its children if the requested permissions
-match, otherwise a fallback component.
-
-> This is the React version of the `branchOnPermissions` HoC.
-
-```js
-<RestrictedByPermissions permissions={[]} unauthorizedComponent={Unauthorized}>
-  <MyAuthorizedComponent />
-</RestrictedByPermissions>
-```
-
-### Props
-
-- `permissions`: an array of `Permission`, requested by the component
-- `actionRights`: (_optional_) an array of `ActionRight`, requested by the component
-- `dataFences`: (_optional_) an array of `DataFence`, requested by the component
-- `selectDataFenceData`: (_optional_ unless `dataFences` is specified) the function is called on each specified `dataFence` and should return the mapped value specific to the data fence. The function usually contains a switch-case logic based on the data fence `type`, with the return value based on the `props`. For example, with `type: 'order'`, the return value would be something like `ownProps.order.storeRef.key`.
-- `unauthorizedComponent`: (_optional_) a function return an React element to be
-  rendered in case the permissions don't match
-- `render`: (_optional_) a function returning an React element or a node to be
-  rendered in case the permissions match
-  - Note: when a function is passed it will get an invoked with an object
-    containing `isAuthorized` e.g. `({ isAuthorized }) => <div />`
-- `children`: (_optional_) a function returning an React element or a node to be
-  rendered in case the permissions match
-  - Note: when a function is passed it will get an invoked with an object
-    containing `isAuthorized` e.g. `({ isAuthorized }) => <div />`
-- `shouldMatchSomePermissions`: (_optional_) determines if _some_ or _every_
-  requested permission should match (default `false`)
-
-### Examples
-
-```js
-const Unauthorized = () => <p>{'No permissions to see this'}</p>;
-const Dashboard = () => {
-  const canViewProducts = useIsAuthorized({
-    demandedPermissions: ['ViewProducts'],
-  });
-  const canViewOrders = useIsAuthorized({
-    demandedPermissions: ['ViewOrders'],
-  });
-
-  return (
-    <div>
-      {canViewProducts ? <TopFiveProducts /> : <Unauthorized />}
-      <RevenueChart isDisabled={!canViewOrders || !canViewProducts} />}
-    </div>
-  );
-};
-```
-
-## `branchOnPermissions(permissions, [FallbackComponent], [options])`
-
-A HoC that will render a fallback component if the requested permissions don't
-match with the user permissions.
-
-```js
-branchOnPermissions(
-  permissions: [Permission],
-  unauthorizedComponent: ?UnauthorizedComponent,
-  options?: {
-    shouldMatchSomePermissions: boolean,
-    actionRights?: [ActionRight],
-    dataFences?: [DataFence],
-    getSelectDataFenceData?: ownProps => func
-  }
-): HoC
-```
-
-### Arguments
-
-- `permissions`: an array of `Permission`, requested by the component
-- `UnauthorizedComponent`: (_optional_) a reference to a React component to be
-  rendered in case the permissions don't match
-- `options` (_optional_)
-  - `shouldMatchSomePermissions`: determines if _some_ or _every_ requested permission should match
-    (default `false`)
-  - `actionRights`: an array of `ActionRight` (mentioned above)
-  - `dataFences`: an array of `DataFence` (mentioned above)
-  - `getSelectDataFenceData`: (_optional_ unless `dataFences` is specified) the function is called with the component `props` and must return a new function that will be called on each specified `dataFence` and should return the mapped value specific to the data fence. The returned function usually contains a switch-case logic based on the data fence `type`, with the return value based on the `props`. For example, with `type: 'order'`, the return value would be something like `ownProps.order.storeRef.key`.
-
-### Example
-
-```js
-// Only render a component when the user has the requested permissions
-const TopFiveProducts = () =>
-  // ...
-
-  branchOnPermissions(['ViewProducts', 'ViewOrders'])(TopFiveProducts);
-```
-
-```js
-// Only render a component when the user has the the requested dataFence
-const LastOrder = ({ order : { store: "Germany" }}) =>
-  // ...
-
-  branchOnPermissions([], options: {
-    dataFences: [
-      {
-        name: 'ManageOrders',
-        group: 'orders',
-        type: 'store'
-      }
-    ],
-    getSelectDataFenceData: ownProps => (demandedDataFence) => {
-      switch (demandedDataFence.type) {
-        case 'store':
-          return [ownProps.order.storeRef.key];
-        default:
-          return null
-      }
-    }
-  })(LastOrder);
-```
-
-```js
-// Render a different component when the user doesn't have the requested permissions
-const ReadOnlyInput = () => // ...
-const Input = () => // ...
-
-branchOnPermissions(['ViewProducts'], ReadOnlyInput)(Input)
-```
+Check out the [documentation](https://docs.commercetools.com/custom-applications/api-reference/commercetools-frontend-permissions) for more information.

package/dist/commercetools-frontend-permissions.cjs.dev.js

@@ -53,7 +53,7 @@ var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.12.3";
+var version = "21.0.0";
 
 // Build the permission key from the definition to match it to the format coming from the API.
 var toCanCase = function toCanCase(permissionName) {
@@ -356,9 +356,9 @@ var getDisplayName = function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var defaultProps = {
   shouldMatchSomePermissions: false
 };
@@ -481,9 +481,9 @@ RestrictedByPermissions.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 RestrictedByPermissions.displayName = 'RestrictedByPermissions';
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var branchOnPermissions = function branchOnPermissions(demandedPermissions, FallbackComponent) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {

package/dist/commercetools-frontend-permissions.cjs.prod.js

@@ -52,7 +52,7 @@ var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.12.3";
+var version = "21.0.0";
 
 // Build the permission key from the definition to match it to the format coming from the API.
 var toCanCase = function toCanCase(permissionName) {
@@ -354,9 +354,9 @@ var getDisplayName = function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var defaultProps = {
   shouldMatchSomePermissions: false
 };
@@ -458,9 +458,9 @@ var RestrictedByPermissions = function RestrictedByPermissions(props) {
 RestrictedByPermissions.propTypes = {};
 RestrictedByPermissions.displayName = 'RestrictedByPermissions';
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var branchOnPermissions = function branchOnPermissions(demandedPermissions, FallbackComponent) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {

package/dist/commercetools-frontend-permissions.esm.js

@@ -26,7 +26,7 @@ import upperFirst from 'lodash/upperFirst';
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.12.3";
+var version = "21.0.0";
 
 // Build the permission key from the definition to match it to the format coming from the API.
 var toCanCase = function toCanCase(permissionName) {
@@ -329,9 +329,9 @@ var getDisplayName = function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var defaultProps = {
   shouldMatchSomePermissions: false
 };
@@ -454,9 +454,9 @@ RestrictedByPermissions.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 RestrictedByPermissions.displayName = 'RestrictedByPermissions';
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var branchOnPermissions = function branchOnPermissions(demandedPermissions, FallbackComponent) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/permissions",
-  "version": "20.12.3",
+  "version": "21.0.0",
   "description": "React components to declaratively handle MC permissions",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/commercetools/merchant-center-application-kit.git",
     "directory": "packages/permissions"
   },
-  "homepage": "https://docs.commercetools.com/custom-applications",
+  "homepage": "https://docs.commercetools.com/custom-applications/api-reference/commercetools-frontend-permissions",
   "keywords": ["javascript", "frontend", "react", "toolkit"],
   "license": "MIT",
   "publishConfig": {
@@ -18,16 +18,16 @@
   "module": "dist/commercetools-frontend-permissions.esm.js",
   "files": ["dist", "package.json", "LICENSE", "README.md"],
   "dependencies": {
-    "@babel/runtime": "7.16.5",
-    "@babel/runtime-corejs3": "7.16.5",
-    "@commercetools-frontend/application-shell-connectors": "20.12.3",
-    "@commercetools-frontend/sentry": "20.12.3",
+    "@babel/runtime": "^7.16.7",
+    "@babel/runtime-corejs3": "^7.16.8",
+    "@commercetools-frontend/application-shell-connectors": "21.0.0",
+    "@commercetools-frontend/sentry": "21.0.0",
     "@emotion/react": "11.7.1",
     "@types/lodash": "^4.14.178",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.38",
     "lodash": "4.17.21",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "tiny-invariant": "1.2.0",
     "tiny-warning": "1.0.3"
   },