@atlaskit/blanket 12.2.2

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,11 @@
+# Blanket
+
+The main purpose of the blanket component is to provide the overlay layer for components such as a modal dialog or a tooltip.
+
+## Installation
+
+yarn add @atlaskit/blanket
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/blanket).

package/__perf__/default.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import Blanket from '../src';
+
+export default () => <Blanket />;

package/__perf__/hideBlanket.tsx

@@ -0,0 +1,58 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import React, { useState } from 'react';
+
+import { fireEvent } from '@testing-library/dom';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+import Blanket from '../src';
+
+const BlanketPerformance = () => {
+  const [isBlanketVisible, setIsBlanketVisible] = useState(true);
+
+  const toggleBlanketVisibility = () => {
+    setIsBlanketVisible(!isBlanketVisible);
+  };
+
+  return (
+    <>
+      <button onClick={toggleBlanketVisibility} data-testid="toggleButton">
+        Toggle blanket
+      </button>
+
+      <Blanket isTinted={isBlanketVisible} shouldAllowClickThrough={true} />
+    </>
+  );
+};
+
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'onHide',
+    description: 'Hide blanket by changing its isTinted prop',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const toggleButton = container.querySelector(
+        `[data-testid="toggleButton"]`,
+      )!;
+
+      await controls.time(async () => {
+        await fireEvent.click(toggleButton);
+      });
+    },
+  },
+];
+
+BlanketPerformance.story = {
+  name: 'Hide Blanklet',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default BlanketPerformance;

package/__perf__/showBlanket.tsx

@@ -0,0 +1,56 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import React, { useState } from 'react';
+
+import { fireEvent } from '@testing-library/dom';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+import Blanket from '../src';
+
+const BlanketPerformance = () => {
+  const [isBlanketVisible, setIsBlanketVisible] = useState(false);
+
+  const toggleBlanketVisibility = () => {
+    setIsBlanketVisible(!isBlanketVisible);
+  };
+
+  return (
+    <>
+      <button onClick={toggleBlanketVisibility} data-testid="toggleButton">
+        Toggle blanket
+      </button>
+      <Blanket isTinted={isBlanketVisible} shouldAllowClickThrough={true} />
+    </>
+  );
+};
+
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'onShow',
+    description: 'Show blanket by changing its isTinted prop',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const toggleButton = container.querySelector(
+        `[data-testid="toggleButton"]`,
+      )!;
+      await controls.time(async () => {
+        await fireEvent.click(toggleButton);
+      });
+    },
+  },
+];
+
+BlanketPerformance.story = {
+  name: 'Show Blanklet',
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default BlanketPerformance;

package/__perf__/withClickThroughDisabled.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable @repo/internal/fs/filename-pattern-match */
+import React from 'react';
+
+import Blanket from '../src';
+
+const BlanketPerformance = () => {
+  return <Blanket isTinted={true} shouldAllowClickThrough={false} />;
+};
+
+BlanketPerformance.story = {
+  name: 'Blanket with shouldAllowClickThrough disabled',
+};
+
+export default BlanketPerformance;

package/__perf__/withClickThroughEnabled.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable @repo/internal/fs/filename-pattern-match */
+import React from 'react';
+
+import Blanket from '../src';
+
+const BlanketPerformance = () => {
+  return <Blanket isTinted={true} shouldAllowClickThrough={true} />;
+};
+
+BlanketPerformance.story = {
+  name: 'Blanket with shouldAllowClickThrough enabled',
+};
+
+export default BlanketPerformance;

package/codemods/12.0.0-lite-mode.tsx

@@ -0,0 +1,18 @@
+import { JSCodeshift } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  createTransformer,
+  hasImportDeclaration,
+} from '@atlaskit/codemod-utils';
+
+import { BLANKET_PACKAGE_NAME } from './internal/constants';
+import { renameCanClickThrough } from './migrations/rename-canclickthrough-to-shouldallowclickthrough';
+
+const transformer = createTransformer(
+  [renameCanClickThrough],
+  (j: JSCodeshift, source: Collection<Node>) =>
+    hasImportDeclaration(j, source, BLANKET_PACKAGE_NAME),
+);
+
+export default transformer;

package/codemods/__tests__/rename-canclickthrough-to-shouldallowclickthrough.tsx

@@ -0,0 +1,167 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameCanClickThrough } from '../migrations/rename-canclickthrough-to-shouldallowclickthrough';
+
+const transformer = createTransformer([renameCanClickThrough]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Blanket codemods', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          canClickThrough
+        />
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          shouldAllowClickThrough
+        />
+      );
+    }
+    `,
+    `should rename the "canClickThrough" prop to "shouldAllowClickThrough" prop`,
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          canClickThrough={true}
+        />
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          shouldAllowClickThrough={true}
+        />
+      );
+    }
+    `,
+    `should rename the "canClickThrough" prop to "shouldAllowClickThrough" prop`,
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          canClickThrough={true}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          shouldAllowClickThrough={true}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `should rename only "canClickThrough" prop and leave other props unaffected`,
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+    const shouldAllowClickThrough = false;
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          canClickThrough={shouldAllowClickThrough}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+    const shouldAllowClickThrough = false;
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          shouldAllowClickThrough={shouldAllowClickThrough}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `should rename the "canClickThrough" prop when its value is a variable`,
+  );
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+    const shouldAllowClickThrough = false;
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          canClickThrough={true && shouldAllowClickThrough || false}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `
+    import React from 'react';
+    import Blanket from '@atlaskit/blanket';
+    const shouldAllowClickThrough = false;
+    const App = () => {
+      return (
+        <Blanket
+          isTinted={false}
+          shouldAllowClickThrough={true && shouldAllowClickThrough || false}
+          testId="blanket"
+        />
+      );
+    }
+    `,
+    `should rename the "canClickThrough" prop when its value is a complex expression`,
+  );
+});

package/codemods/internal/constants.tsx

@@ -0,0 +1,3 @@
+export const BLANKET_PACKAGE_NAME = '@atlaskit/blanket';
+export const OLD_CLICK_THROUGH_PROP_NAME = 'canClickThrough';
+export const NEW_CLICK_THROUGH_PROP_NAME = 'shouldAllowClickThrough';

package/codemods/migrations/rename-canclickthrough-to-shouldallowclickthrough.tsx

@@ -0,0 +1,13 @@
+import { createRenameFuncFor } from '@atlaskit/codemod-utils';
+
+import {
+  BLANKET_PACKAGE_NAME,
+  NEW_CLICK_THROUGH_PROP_NAME,
+  OLD_CLICK_THROUGH_PROP_NAME,
+} from '../internal/constants';
+
+export const renameCanClickThrough = createRenameFuncFor(
+  BLANKET_PACKAGE_NAME,
+  OLD_CLICK_THROUGH_PROP_NAME,
+  NEW_CLICK_THROUGH_PROP_NAME,
+);

package/dist/cjs/blanket.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(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) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var packageName = "@atlaskit/blanket";
+var packageVersion = "12.2.2";
+var analyticsAttributes = {
+  componentName: 'blanket',
+  packageName: packageName,
+  packageVersion: packageVersion
+};
+var baseStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: _constants.layers.blanket(),
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflowY: 'auto',
+  pointerEvents: 'initial'
+});
+var shouldAllowClickThroughStyles = (0, _core.css)({
+  pointerEvents: 'none'
+});
+var invisibleStyles = (0, _core.css)({
+  backgroundColor: 'transparent'
+});
+var lightBgStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.blanket', _colors.N100A)
+});
+var darkBgStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.blanket', _colors.DN90A)
+});
+var backgroundStyle = {
+  light: lightBgStyles,
+  dark: darkBgStyles
+};
+/**
+ * __Blanket__
+ *
+ * A Blanket provides the overlay layer for components such as a modal dialog or a tooltip
+ *
+ * - [Examples](https://atlaskit.atlassian.com/examples/design-system/blanket/basic-usage)
+ */
+
+var Blanket = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Blanket(_ref, ref) {
+  var _ref$shouldAllowClick = _ref.shouldAllowClickThrough,
+      shouldAllowClickThrough = _ref$shouldAllowClick === void 0 ? false : _ref$shouldAllowClick,
+      _ref$isTinted = _ref.isTinted,
+      isTinted = _ref$isTinted === void 0 ? false : _ref$isTinted,
+      _ref$onBlanketClicked = _ref.onBlanketClicked,
+      onBlanketClicked = _ref$onBlanketClicked === void 0 ? _noop.default : _ref$onBlanketClicked,
+      testId = _ref.testId,
+      children = _ref.children,
+      analyticsContext = _ref.analyticsContext;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var onBlanketClickedWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onBlanketClicked,
+    action: 'clicked',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var blanketClickOutsideChildren = (0, _react.useCallback)(function (e) {
+    return e.currentTarget === e.target ? onBlanketClickedWithAnalytics(e) : undefined;
+  }, [onBlanketClickedWithAnalytics]);
+  var onClick = shouldAllowClickThrough ? undefined : blanketClickOutsideChildren;
+  return (0, _core.jsx)("div", {
+    role: "presentation",
+    css: [baseStyles, shouldAllowClickThrough && shouldAllowClickThroughStyles, backgroundStyle[mode], !isTinted && invisibleStyles],
+    onClick: onClick,
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Blanket.displayName = 'Blanket';
+var _default = Blanket;
+exports.default = _default;