@modusoperandi/licit 0.1.9 → 0.13.2

package/dist/ui/PopUpManager.js.flow

@@ -1,213 +0,0 @@
-// @flow
-
-import clamp from './clamp';
-import { fromHTMlElement, fromXY, isIntersected } from './rects';
-
-import type { PositionHandler } from './PopUpPosition';
-import type { Rect } from './rects';
-
-export type PopUpDetails = {
-  anchor: ?HTMLElement,
-  anchorRect?: ?Rect,
-  autoDismiss: boolean,
-  body: ?HTMLElement,
-  bodyRect?: ?Rect,
-  close: (val: any) => void,
-  modal: boolean,
-  position: PositionHandler,
-};
-
-export type PopUpBridge = {
-  getDetails: () => PopUpDetails,
-};
-
-const CLICK_INTERVAL = 350;
-const DUMMY_RECT = { x: -10000, y: -10000, w: 0, h: 0 };
-
-class PopUpManager {
-  _bridges = new Map<any, any>();
-  _positions = new Map<any, any>();
-
-  _mx = 0;
-  _my = 0;
-  _rafID = 0;
-
-  register(bridge: PopUpBridge): void {
-    this._bridges.set(bridge, Date.now());
-    this._positions.set(bridge, null);
-    if (this._bridges.size === 1) {
-      this._observe();
-    }
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  }
-
-  unregister(bridge: PopUpBridge): void {
-    this._bridges.delete(bridge);
-    this._positions.delete(bridge);
-    if (this._bridges.size === 0) {
-      this._unobserve();
-    }
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _observe(): void {
-    document.addEventListener('mousemove', this._onMouseChange, false);
-    document.addEventListener('mouseup', this._onMouseChange, false);
-    document.addEventListener('click', this._onClick, false);
-    window.addEventListener('scroll', this._onScroll, true);
-    window.addEventListener('resize', this._onResize, true);
-  }
-
-  _unobserve(): void {
-    document.removeEventListener('mousemove', this._onMouseChange, false);
-    document.removeEventListener('mouseup', this._onMouseChange, false);
-    document.removeEventListener('click', this._onClick, false);
-    window.removeEventListener('scroll', this._onScroll, true);
-    window.removeEventListener('resize', this._onResize, true);
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _onScroll = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onResize = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onMouseChange = (e: MouseEvent): void => {
-    this._mx = Math.round(e.clientX);
-    this._my = Math.round(e.clientY);
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onClick = (e: MouseEvent): void => {
-    const now = Date.now();
-    let detailsWithModalToDismiss;
-    for (const [bridge, registeredAt] of this._bridges) {
-      if (now - registeredAt > CLICK_INTERVAL) {
-        const details = bridge.getDetails();
-        if (details.modal && details.autoDismiss) {
-          detailsWithModalToDismiss = details;
-        }
-      }
-    }
-    if (!detailsWithModalToDismiss) {
-      return;
-    }
-    const { body, close } = detailsWithModalToDismiss;
-    const pointer = fromXY(e.clientX, e.clientY, 1);
-    const bodyRect = body ? fromHTMlElement(body) : null;
-    if (!bodyRect || !isIntersected(pointer, bodyRect)) {
-      close();
-    }
-  };
-
-  _syncPosition = (): void => {
-    this._rafID = 0;
-
-    const bridgeToDetails = new Map<any, any>();
-    for (const [
-      bridge,
-      // eslint-disable-next-line no-unused-vars
-      registeredAt,
-    ] of this._bridges) {
-      const details = bridge.getDetails();
-      bridgeToDetails.set(bridge, details);
-      const { anchor, body } = details;
-      if (body instanceof HTMLElement) {
-        details.bodyRect = fromHTMlElement(body);
-      }
-      if (anchor instanceof HTMLElement) {
-        details.anchorRect = fromHTMlElement(anchor);
-      }
-    }
-
-    const pointer = fromXY(this._mx, this._my, 2);
-    const hoveredAnchors = new Set();
-    for (const [bridge, details] of bridgeToDetails) {
-      const { anchor, bodyRect, anchorRect, position, body } = details;
-      if (!bodyRect && !anchorRect) {
-        continue;
-      }
-
-      const { x, y } = position(anchorRect, bodyRect);
-      const positionKey = `${x}-${y}`;
-
-      if (body && bodyRect && this._positions.get(bridge) !== positionKey) {
-        const ax = anchorRect
-          ? clamp(
-              0,
-              anchorRect.x - x + anchorRect.w / 2,
-              bodyRect.w - anchorRect.w / 2
-            )
-          : 0;
-        this._positions.set(bridge, positionKey);
-        const bodyStyle = body.style;
-        bodyStyle.position = 'absolute';
-        bodyStyle.left = `${x}px`;
-        bodyStyle.top = `${y}px`;
-        bodyStyle.setProperty('--czi-pop-up-anchor-offset-left', `${ax}px`);
-        bodyRect.x = x;
-        bodyRect.y = y;
-      }
-
-      if (
-        isIntersected(pointer, bodyRect || DUMMY_RECT, 0) ||
-        isIntersected(pointer, anchorRect || DUMMY_RECT, 0)
-      ) {
-        if (anchor) {
-          hoveredAnchors.add(anchor);
-        }
-      }
-    }
-
-    while (true) {
-      const size = hoveredAnchors.size;
-      for (const [
-        // eslint-disable-next-line no-unused-vars
-        bridge,
-        details,
-      ] of bridgeToDetails) {
-        const { anchor, body } = details;
-        for (const ha of hoveredAnchors) {
-          if (
-            anchor &&
-            body &&
-            !hoveredAnchors.has(anchor) &&
-            body.contains(ha)
-          ) {
-            hoveredAnchors.add(anchor);
-          }
-        }
-      }
-      if (hoveredAnchors.size === size) {
-        break;
-      }
-    }
-
-    const now = Date.now();
-    for (const [bridge, registeredAt] of this._bridges) {
-      const details = bridgeToDetails.get(bridge);
-      if (details) {
-        const { autoDismiss, anchor, close, modal } = details;
-        if (
-          autoDismiss &&
-          // Modal is handled separately at `onClick`
-          !modal &&
-          now - registeredAt > CLICK_INTERVAL &&
-          !hoveredAnchors.has(anchor)
-        ) {
-          close();
-        }
-      }
-    }
-  };
-}
-
-const instance = new PopUpManager();
-
-export default instance;

package/dist/ui/PopUpPosition.js

@@ -1,156 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.atAnchorBottomLeft = atAnchorBottomLeft;
-exports.atAnchorBottomCenter = atAnchorBottomCenter;
-exports.atAnchorRight = atAnchorRight;
-exports.atViewportCenter = atViewportCenter;
-exports.atAnchorTopRight = atAnchorTopRight;
-exports.atAnchorTopCenter = atAnchorTopCenter;
-exports.bpfrpt_proptype_PositionHandler = void 0;
-
-var _rects = require("./rects");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var bpfrpt_proptype_PositionHandler = _propTypes.default.func;
-exports.bpfrpt_proptype_PositionHandler = bpfrpt_proptype_PositionHandler;
-
-function atAnchorBottomLeft(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x;
-    rect.y = anchorRect.y + anchorRect.h;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = anchorRect.x - bodyRect.w + anchorRect.w;
-    }
-
-    if (rect.y + bodyRect.h > viewportHeight) {
-      rect.y = Math.max(anchorRect.y - bodyRect.h, 2);
-    }
-  }
-
-  if (!anchorRect || (0, _rects.isCollapsed)(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-function atAnchorBottomCenter(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (anchorRect && bodyRect) {
-    rect.x = Math.max(anchorRect.x - (bodyRect.w - anchorRect.w) / 2, 10);
-    rect.y = anchorRect.y + anchorRect.h;
-  }
-
-  if (!anchorRect || (0, _rects.isCollapsed)(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-function atAnchorRight(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1;
-    rect.y = anchorRect.y;
-    const viewportWidth = window.innerWidth;
-
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = Math.max(2, anchorRect.x - bodyRect.w);
-    }
-  }
-
-  if (!anchorRect || (0, _rects.isCollapsed)(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-function atViewportCenter(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (bodyRect) {
-    rect.x = (window.innerWidth - bodyRect.w) / 2;
-    rect.y = (window.innerHeight - bodyRect.h) / 2;
-  }
-
-  if (!bodyRect || (0, _rects.isCollapsed)(bodyRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-function atAnchorTopRight(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1 - bodyRect.w;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || (0, _rects.isCollapsed)(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-function atAnchorTopCenter(anchorRect, bodyRect) {
-  const rect = {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + (anchorRect.w - bodyRect.w) / 2;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || (0, _rects.isCollapsed)(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}

package/dist/ui/PopUpPosition.js.flow

@@ -1,104 +0,0 @@
-// @flow
-
-import { isCollapsed } from './rects';
-
-import type { Rect } from './rects';
-
-export type PositionHandler = (anchorRect: ?Rect, bodyRect: ?Rect) => Rect;
-
-export function atAnchorBottomLeft(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x;
-    rect.y = anchorRect.y + anchorRect.h;
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = anchorRect.x - bodyRect.w + anchorRect.w;
-    }
-    if (rect.y + bodyRect.h > viewportHeight) {
-      rect.y = Math.max(anchorRect.y - bodyRect.h, 2);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorBottomCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = Math.max(anchorRect.x - (bodyRect.w - anchorRect.w) / 2, 10);
-    rect.y = anchorRect.y + anchorRect.h;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1;
-    rect.y = anchorRect.y;
-    const viewportWidth = window.innerWidth;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = Math.max(2, anchorRect.x - bodyRect.w);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atViewportCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (bodyRect) {
-    rect.x = (window.innerWidth - bodyRect.w) / 2;
-    rect.y = (window.innerHeight - bodyRect.h) / 2;
-  }
-
-  if (!bodyRect || isCollapsed(bodyRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1 - bodyRect.w;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + (anchorRect.w - bodyRect.w) / 2;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}

package/dist/ui/PopUpTypes.js

@@ -1 +0,0 @@
-"use strict";

package/dist/ui/TooltipSurface.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("./czi-tooltip-surface.css");
-
-require("./czi-animations.css");
-
-var React = _interopRequireWildcard(require("react"));
-
-var _createPopUp = _interopRequireDefault(require("./createPopUp"));
-
-var _PopUpPosition = require("./PopUpPosition");
-
-var _uuid = _interopRequireDefault(require("./uuid"));
-
-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 (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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-class TooltipView extends React.PureComponent {
-  render() {
-    const {
-      tooltip
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "czi-tooltip-view czi-animation-fade-in"
-    }, tooltip);
-  }
-
-}
-
-class TooltipSurface extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "_id", (0, _uuid.default)());
-
-    _defineProperty(this, "_popUp", null);
-
-    _defineProperty(this, "props", void 0);
-
-    _defineProperty(this, "_onMouseEnter", () => {
-      if (!this._popUp) {
-        const {
-          tooltip
-        } = this.props;
-        this._popUp = (0, _createPopUp.default)(TooltipView, {
-          tooltip
-        }, {
-          anchor: document.getElementById(this._id),
-          onClose: this._onClose,
-          position: _PopUpPosition.atAnchorBottomCenter
-        });
-      }
-    });
-
-    _defineProperty(this, "_onMouseLeave", () => {
-      this._popUp && this._popUp.close();
-      this._popUp = null;
-    });
-
-    _defineProperty(this, "_onClose", () => {
-      this._popUp = null;
-    });
-  }
-
-  componentWillUnmount() {
-    this._popUp && this._popUp.close();
-  }
-
-  render() {
-    const {
-      tooltip,
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      "aria-label": tooltip,
-      className: "czi-tooltip-surface",
-      "data-tooltip": tooltip,
-      id: this._id,
-      onMouseDown: tooltip && this._onMouseLeave,
-      onMouseEnter: tooltip && this._onMouseEnter,
-      onMouseLeave: tooltip && this._onMouseLeave,
-      role: "tooltip"
-    }, children);
-  }
-
-}
-
-var _default = TooltipSurface;
-exports.default = _default;

package/dist/ui/TooltipSurface.js.flow

@@ -1,76 +0,0 @@
-// @flow
-
-import './czi-tooltip-surface.css';
-import './czi-animations.css';
-
-import * as React from 'react';
-import createPopUp from './createPopUp';
-import { atAnchorBottomCenter } from './PopUpPosition';
-import uuid from './uuid';
-
-class TooltipView extends React.PureComponent<any, any> {
-  render(): React.Element<any> {
-    const { tooltip } = this.props;
-    return (
-      <div className="czi-tooltip-view czi-animation-fade-in">{tooltip}</div>
-    );
-  }
-}
-
-class TooltipSurface extends React.PureComponent<any, any> {
-  _id = uuid();
-  _popUp = null;
-
-  props: {
-    tooltip: string,
-    children?: any,
-  };
-
-  componentWillUnmount(): void {
-    this._popUp && this._popUp.close();
-  }
-
-  render(): React.Element<any> {
-    const { tooltip, children } = this.props;
-    return (
-      <span
-        aria-label={tooltip}
-        className="czi-tooltip-surface"
-        data-tooltip={tooltip}
-        id={this._id}
-        onMouseDown={tooltip && this._onMouseLeave}
-        onMouseEnter={tooltip && this._onMouseEnter}
-        onMouseLeave={tooltip && this._onMouseLeave}
-        role="tooltip"
-      >
-        {children}
-      </span>
-    );
-  }
-
-  _onMouseEnter = (): void => {
-    if (!this._popUp) {
-      const { tooltip } = this.props;
-      this._popUp = createPopUp(
-        TooltipView,
-        { tooltip },
-        {
-          anchor: document.getElementById(this._id),
-          onClose: this._onClose,
-          position: atAnchorBottomCenter,
-        }
-      );
-    }
-  };
-
-  _onMouseLeave = (): void => {
-    this._popUp && this._popUp.close();
-    this._popUp = null;
-  };
-
-  _onClose = (): void => {
-    this._popUp = null;
-  };
-}
-
-export default TooltipSurface;

package/dist/ui/clamp.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = clamp;
-
-function clamp(min, val, max) {
-  if (val < min) {
-    return min;
-  }
-
-  if (val > max) {
-    return max;
-  }
-
-  return val;
-}

package/dist/ui/clamp.js.flow

@@ -1,11 +0,0 @@
-// @flow
-
-export default function clamp(min: number, val: number, max: number): number {
-  if (val < min) {
-    return min;
-  }
-  if (val > max) {
-    return max;
-  }
-  return val;
-}