@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Checkbox.module.scss

@@ -0,0 +1,106 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+@include h.withError;
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @include c.typographyBodySmall;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  // hide native checkbox
+  input {
+    @include h.visuallyHidden;
+  }
+
+  .helperText {
+    margin-top: c.$grid * 0.5;
+    margin-left: c.$grid * 1.5;
+  }
+
+  // default visible checkmark
+  .checkmark {
+    /* doiuse-disable calc */
+    $checkmarkSize: calc(#{c.$iconSizeSmall} + #{c.$borderWidth * 2});
+    /* doiuse-enable calc */
+
+    width: $checkmarkSize;
+    height: $checkmarkSize;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$grid;
+    color: c.$colorNeutralWhite;
+
+    // because of ~ and + selectors used below, we need to keep the current order in DOM and
+    // fix it visually with order property
+    order: -1;
+    flex-shrink: 0;
+  }
+
+  & > input:checked ~ .checkmark {
+    background-color: c.$colorSuccess;
+    border-color: c.$colorSuccess;
+  }
+
+  /**
+    Indeterminate
+  */
+  &.indeterminate input ~ .checkmark {
+    background-color: c.$colorPrimaryLight;
+    border-color: c.$colorPrimaryLight;
+  }
+
+  /**
+    Hover
+   */
+  &:hover,
+  &.hover {
+    input ~ .checkmark {
+      border-color: c.$colorPrimary;
+    }
+  }
+
+  // Error state
+  &.error input ~ .checkmark {
+    border-color: c.$colorError;
+  }
+
+  .name {
+    overflow: hidden;
+    padding-left: c.$grid * 1.25;
+  }
+
+  &:not(.checked) {
+    color: c.$colorTextSecondary;
+  }
+
+  &.focus > input,
+  input:focus {
+    ~ .checkmark {
+      @include h.outlineFormField;
+    }
+  }
+
+  /**
+    Disabled
+  */
+  &.disabled {
+    color: c.$colorNeutralLight;
+    cursor: not-allowed;
+
+    & > input:disabled ~ .checkmark {
+      color: c.$colorNeutralWhite;
+      border-color: c.$colorNeutralLight;
+    }
+
+    & > input:disabled:checked ~ .checkmark {
+      background-color: c.$colorNeutral;
+    }
+  }
+}

package/lib/components/CheckboxFormik.js

@@ -1,38 +1,17 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_Checkbox = require('./Checkbox.js');
-var utils_formik = require('../utils/formik.js');
-
-const CheckboxFormik = ({
-  name,
-  validate,
-  onChange,
-  ...props
-}) => {
-  const [{
-    onBlur,
-    onChange: onFormikChange,
-    value
-  }, meta] = formik.useField({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement(components_Checkbox.Checkbox, {
-    ...props,
-    name: name,
-    checked: value,
-    onChange: React.useCallback(e => {
-      if (onChange) {
-        onChange(e.target.checked);
-      }
-      onFormikChange(e);
-    }, [onFormikChange, onChange]),
-    onBlur: onBlur,
-    error: utils_formik.getFieldError(meta)
-  });
+import React, { useCallback } from 'react';
+import { useField } from 'formik';
+import { Checkbox } from './Checkbox';
+import { getFieldError } from '../utils/formik';
+export const CheckboxFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ onBlur, onChange: onFormikChange, value }, meta] = useField({
+        name,
+        validate,
+    });
+    return (React.createElement(Checkbox, { ...props, name: name, checked: value, onChange: useCallback((e) => {
+            if (onChange) {
+                onChange(e.target.checked);
+            }
+            onFormikChange(e);
+        }, [onFormikChange, onChange]), onBlur: onBlur, error: getFieldError(meta) }));
 };
-
-exports.CheckboxFormik = CheckboxFormik;
-//# sourceMappingURL=CheckboxFormik.js.map
+//# sourceMappingURL=CheckboxFormik.js.map

package/lib/components/CheckboxFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFormik.js","sources":["../../src/components/CheckboxFormik.tsx"],"sourcesContent":[null],"names":["CheckboxFormik","name","validate","onChange","props","onBlur","onFormikChange","value","meta","useField","React","Checkbox","checked","useCallback","e","target","error","getFieldError"],"mappings":";;;;;;;AAaO,MAAMA,cAAc,GAAGA,CAAmB;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAA+B,KAAkB;AACpI,EAAA,MAAM,CAAC;IAAEC,MAAM;AAAEF,IAAAA,QAAQ,EAAEG,cAAc;AAAEC,IAAAA;GAAO,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAU;IAC5ER,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBACEQ,oBAACC,4BAAQ,EAAA;AAAA,IAAA,GACHP,KAAK;AACTH,IAAAA,IAAI,EAAEA,IAAI;AACVW,IAAAA,OAAO,EAAEL,KAAK;AACdJ,IAAAA,QAAQ,EAAEU,iBAAW,CAClBC,CAAC,IAAI;AACJ,MAAA,IAAIX,QAAQ,EAAE;AACZA,QAAAA,QAAQ,CAACW,CAAC,CAACC,MAAM,CAACH,OAAO,CAAC;AAC5B,MAAA;MAEAN,cAAc,CAACQ,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAACR,cAAc,EAAEH,QAAQ,CAAC,CAC3B;AACDE,IAAAA,MAAM,EAAEA,MAAM;IACdW,KAAK,EAAEC,0BAAa,CAACT,IAAI;AAAC,GAAA,CAC1B;AAEN;;;;"}
+{"version":3,"file":"CheckboxFormik.js","sourceRoot":"","sources":["../../src/components/CheckboxFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAStE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA+B,EAAgB,EAAE;IACpI,MAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QAC5E,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAC5B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/CircularProgressBar.js

@@ -1,79 +1,28 @@
-'use strict';
-
-var React = require('react');
-var useEffectOnce = require('react-use/lib/useEffectOnce');
-var CircularProgressBar_module = require('./CircularProgressBar.module.scss.js');
-
-const size = 132;
-const outerStrokeWidth = 6;
-const innerStrokeWidth = 4;
-const CircularProgressBar = ({
-  progress,
-  rotate = 0,
-  cut = 0,
-  initialAnimation = true,
-  text
-}) => {
-  const [animationInitiated, setAnimationInitiated] = React.useState(false);
-  useEffectOnce(() => {
-    if (initialAnimation) {
-      setAnimationInitiated(true);
-    }
-  });
-  const center = size / 2;
-  const radius = size / 2 - outerStrokeWidth / 2;
-  const circumference = 2 * Math.PI * radius;
-  const progressAfterInitAnimation = initialAnimation && !animationInitiated ? 0 : progress;
-  const strokeLength = circumference / 360 * (360 - cut);
-  const progressStrokeDasharray = `${strokeLength}, ${circumference}`;
-  const progressStrokeDashoffset = strokeLength / 100 * (100 - progressAfterInitAnimation);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "cpb-container",
-    className: CircularProgressBar_module.default.container,
-    style: {
-      width: size,
-      height: size
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    "data-test": "cpb-svg",
-    width: size,
-    height: size,
-    style: {
-      transform: `rotate(${rotate}deg)`
-    }
-  }, /*#__PURE__*/React.createElement("circle", {
-    "data-test": "cpb-background-outer-circle",
-    className: CircularProgressBar_module.default.backgroundOuterCircle,
-    cx: center,
-    cy: center,
-    r: radius,
-    strokeWidth: outerStrokeWidth,
-    strokeDasharray: strokeLength
-  }), /*#__PURE__*/React.createElement("circle", {
-    "data-test": "cpb-background-inner-circle",
-    className: CircularProgressBar_module.default.backgroundInnerCircle,
-    cx: center,
-    cy: center,
-    r: radius,
-    strokeWidth: innerStrokeWidth,
-    strokeDasharray: strokeLength
-  }), /*#__PURE__*/React.createElement("circle", {
-    "data-test": "cpb-progress-circle",
-    className: CircularProgressBar_module.default.progressCircle,
-    cx: center,
-    cy: center,
-    r: radius,
-    strokeWidth: outerStrokeWidth,
-    strokeDasharray: progressStrokeDasharray,
-    strokeDashoffset: progressStrokeDashoffset
-  })), /*#__PURE__*/React.createElement("div", {
-    "data-test": "cpb-text",
-    className: CircularProgressBar_module.default.indicator
-  }, text));
+import React, { useState } from 'react';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import styles from './CircularProgressBar.module.scss';
+export const size = 132;
+export const outerStrokeWidth = 6;
+export const innerStrokeWidth = 4;
+export const CircularProgressBar = ({ progress, rotate = 0, cut = 0, initialAnimation = true, text }) => {
+    const [animationInitiated, setAnimationInitiated] = useState(false);
+    useEffectOnce(() => {
+        if (initialAnimation) {
+            setAnimationInitiated(true);
+        }
+    });
+    const center = size / 2;
+    const radius = size / 2 - outerStrokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progressAfterInitAnimation = initialAnimation && !animationInitiated ? 0 : progress;
+    const strokeLength = (circumference / 360) * (360 - cut);
+    const progressStrokeDasharray = `${strokeLength}, ${circumference}`;
+    const progressStrokeDashoffset = (strokeLength / 100) * (100 - progressAfterInitAnimation);
+    return (React.createElement("div", { "data-test": "cpb-container", className: styles.container, style: { width: size, height: size } },
+        React.createElement("svg", { "data-test": "cpb-svg", width: size, height: size, style: { transform: `rotate(${rotate}deg)` } },
+            React.createElement("circle", { "data-test": "cpb-background-outer-circle", className: styles.backgroundOuterCircle, cx: center, cy: center, r: radius, strokeWidth: outerStrokeWidth, strokeDasharray: strokeLength }),
+            React.createElement("circle", { "data-test": "cpb-background-inner-circle", className: styles.backgroundInnerCircle, cx: center, cy: center, r: radius, strokeWidth: innerStrokeWidth, strokeDasharray: strokeLength }),
+            React.createElement("circle", { "data-test": "cpb-progress-circle", className: styles.progressCircle, cx: center, cy: center, r: radius, strokeWidth: outerStrokeWidth, strokeDasharray: progressStrokeDasharray, strokeDashoffset: progressStrokeDashoffset })),
+        React.createElement("div", { "data-test": "cpb-text", className: styles.indicator }, text)));
 };
-
-exports.CircularProgressBar = CircularProgressBar;
-exports.innerStrokeWidth = innerStrokeWidth;
-exports.outerStrokeWidth = outerStrokeWidth;
-exports.size = size;
-//# sourceMappingURL=CircularProgressBar.js.map
+//# sourceMappingURL=CircularProgressBar.js.map

package/lib/components/CircularProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressBar.js","sources":["../../src/components/CircularProgressBar.tsx"],"sourcesContent":[null],"names":["size","outerStrokeWidth","innerStrokeWidth","CircularProgressBar","progress","rotate","cut","initialAnimation","text","animationInitiated","setAnimationInitiated","useState","useEffectOnce","center","radius","circumference","Math","PI","progressAfterInitAnimation","strokeLength","progressStrokeDasharray","progressStrokeDashoffset","React","className","styles","container","style","width","height","createElement","transform","backgroundOuterCircle","cx","cy","r","strokeWidth","strokeDasharray","backgroundInnerCircle","progressCircle","strokeDashoffset","indicator"],"mappings":"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"}
+{"version":3,"file":"CircularProgressBar.js","sourceRoot":"","sources":["../../src/components/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,aAAa,MAAM,6BAA6B,CAAA;AAEvD,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAEtD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAUjC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IACpI,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnE,aAAa,CAAC,GAAG,EAAE;QACjB,IAAI,gBAAgB,EAAE,CAAC;YACrB,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAA;IACvB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,gBAAgB,GAAG,CAAC,CAAA;IAC9C,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAA;IAE1C,MAAM,0BAA0B,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzF,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACxD,MAAM,uBAAuB,GAAG,GAAG,YAAY,KAAK,aAAa,EAAE,CAAA;IACnE,MAAM,wBAAwB,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,0BAA0B,CAAC,CAAA;IAE1F,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAC9F,0CAAe,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,MAAM,MAAM,EAAE;YAC9F,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,qBAAqB,EAC/B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,uBAAuB,EACxC,gBAAgB,EAAE,wBAAwB,GAC1C,CACE;QACN,0CAAe,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,IAClD,IAAI,CACD,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/CircularProgressBar.module.scss

@@ -0,0 +1,37 @@
+@use '../../styles/constants' as c;
+
+.container {
+  position: relative;
+
+  .backgroundOuterCircle {
+    fill: none;
+    stroke: c.$colorNeutralLight;
+    stroke-linecap: round;
+  }
+
+  .backgroundInnerCircle {
+    fill: none;
+    stroke: c.$colorNeutralLighter;
+    stroke-linecap: round;
+  }
+
+  .progressCircle {
+    fill: none;
+    stroke: c.$colorSuccess;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 750ms ease-in-out;
+  }
+
+  .indicator {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: c.$colorTextSecondary;
+
+    @include c.typographyH2;
+  }
+}

package/lib/components/ContextMenu.js

@@ -1,87 +1,61 @@
-'use strict';
-
-var React = require('react');
-var reactDom = require('react-dom');
-var cn = require('classnames');
-var useIsomorphicLayoutEffect = require('react-use/lib/useIsomorphicLayoutEffect');
-var ContextMenu_module = require('./ContextMenu.module.scss.js');
-var hooks_useRefValue = require('../hooks/useRefValue.js');
-
-const ContextMenu = ({
-  anchorElement,
-  offset,
-  items
-}) => {
-  const rootEl = React.useRef(null);
-  const [coords, setCoords] = React.useState(null);
-  const getOffset = hooks_useRefValue.useRefValue(offset);
-  const handleContextMenuOpen = React.useCallback(e => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!anchorElement || !anchorElement.contains(e.target) && e.target !== anchorElement) {
-      return;
-    }
-    e.preventDefault();
-    const currentOffset = getOffset();
-    const width = (_b = (_a = rootEl.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
-    const height = (_d = (_c = rootEl.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
-    let left = e.pageX + ((_e = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.left) !== null && _e !== void 0 ? _e : 0);
-    let top = e.pageY + ((_f = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.top) !== null && _f !== void 0 ? _f : 0);
-    if (left + width > window.scrollX + document.documentElement.clientWidth) {
-      left = window.scrollX + document.documentElement.clientWidth - width;
-    }
-    if (top + height > window.scrollY + document.documentElement.clientHeight) {
-      top = window.scrollY + document.documentElement.clientHeight - height;
-    }
-    setCoords({
-      top,
-      left
-    });
-  }, [setCoords, getOffset, anchorElement]);
-  const handleContextMenuClose = React.useCallback(() => {
-    setCoords(null);
-  }, [setCoords]);
-  useIsomorphicLayoutEffect(() => {
-    if (anchorElement) {
-      document.body.addEventListener('contextmenu', handleContextMenuOpen, false);
-    }
-    return () => {
-      document.body.removeEventListener('contextmenu', handleContextMenuOpen);
-    };
-  }, [handleContextMenuOpen]);
-  useIsomorphicLayoutEffect(() => {
-    if (coords) {
-      document.body.addEventListener('click', handleContextMenuClose, false);
-    }
-    return () => {
-      document.body.removeEventListener('click', handleContextMenuClose);
-    };
-  }, [coords, handleContextMenuClose]);
-  useIsomorphicLayoutEffect(() => {
-    if (coords) {
-      window.addEventListener('resize', handleContextMenuClose);
-      window.addEventListener('orientationchange', handleContextMenuClose);
-    }
-    return () => {
-      window.removeEventListener('resize', handleContextMenuClose);
-      window.removeEventListener('orientationchange', handleContextMenuClose);
-    };
-  }, [coords, handleContextMenuClose]);
-  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
-    ref: rootEl,
-    style: coords || undefined,
-    className: cn(ContextMenu_module.default.root, {
-      [ContextMenu_module.default.hidden]: !coords
-    })
-  }, items.map(({
-    onClick,
-    content,
-    className
-  }, index) => (/*#__PURE__*/React.createElement("button", {
-    key: index,
-    className: cn(ContextMenu_module.default.item, className),
-    onClick: onClick
-  }, content)))), document.body);
+import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import cls from 'classnames';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import { useRefValue } from '../hooks';
+import styles from './ContextMenu.module.scss';
+export const ContextMenu = ({ anchorElement, offset, items }) => {
+    const rootEl = useRef(null);
+    const [coords, setCoords] = useState(null);
+    const getOffset = useRefValue(offset);
+    const handleContextMenuOpen = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!anchorElement || (!anchorElement.contains(e.target) && e.target !== anchorElement)) {
+            return;
+        }
+        e.preventDefault();
+        const currentOffset = getOffset();
+        const width = (_b = (_a = rootEl.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+        const height = (_d = (_c = rootEl.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
+        let left = e.pageX + ((_e = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.left) !== null && _e !== void 0 ? _e : 0);
+        let top = e.pageY + ((_f = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.top) !== null && _f !== void 0 ? _f : 0);
+        if (left + width > window.scrollX + document.documentElement.clientWidth) {
+            left = window.scrollX + document.documentElement.clientWidth - width;
+        }
+        if (top + height > window.scrollY + document.documentElement.clientHeight) {
+            top = window.scrollY + document.documentElement.clientHeight - height;
+        }
+        setCoords({ top, left });
+    }, [setCoords, getOffset, anchorElement]);
+    const handleContextMenuClose = useCallback(() => {
+        setCoords(null);
+    }, [setCoords]);
+    useIsomorphicLayoutEffect(() => {
+        if (anchorElement) {
+            document.body.addEventListener('contextmenu', handleContextMenuOpen, false);
+        }
+        return () => {
+            document.body.removeEventListener('contextmenu', handleContextMenuOpen);
+        };
+    }, [handleContextMenuOpen]);
+    useIsomorphicLayoutEffect(() => {
+        if (coords) {
+            document.body.addEventListener('click', handleContextMenuClose, false);
+        }
+        return () => {
+            document.body.removeEventListener('click', handleContextMenuClose);
+        };
+    }, [coords, handleContextMenuClose]);
+    useIsomorphicLayoutEffect(() => {
+        if (coords) {
+            window.addEventListener('resize', handleContextMenuClose);
+            window.addEventListener('orientationchange', handleContextMenuClose);
+        }
+        return () => {
+            window.removeEventListener('resize', handleContextMenuClose);
+            window.removeEventListener('orientationchange', handleContextMenuClose);
+        };
+    }, [coords, handleContextMenuClose]);
+    return createPortal(React.createElement("div", { ref: rootEl, style: coords || undefined, className: cls(styles.root, { [styles.hidden]: !coords }) }, items.map(({ onClick, content, className }, index) => (React.createElement("button", { key: index, className: cls(styles.item, className), onClick: onClick }, content)))), document.body);
 };
-
-exports.ContextMenu = ContextMenu;
-//# sourceMappingURL=ContextMenu.js.map
+//# sourceMappingURL=ContextMenu.js.map

package/lib/components/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../src/components/ContextMenu.tsx"],"sourcesContent":[null],"names":["ContextMenu","anchorElement","offset","items","rootEl","useRef","coords","setCoords","useState","getOffset","useRefValue","handleContextMenuOpen","useCallback","e","contains","target","preventDefault","currentOffset","width","_b","_a","current","offsetWidth","height","_d","_c","offsetHeight","left","pageX","_e","top","pageY","_f","window","scrollX","document","documentElement","clientWidth","scrollY","clientHeight","handleContextMenuClose","useIsomorphicLayoutEffect","body","addEventListener","removeEventListener","createPortal","React","createElement","ref","style","undefined","className","cls","styles","root","hidden","map","onClick","content","index","key","item"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../src/components/ContextMenu.tsx"],"names":[],"mappings":"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"}

package/lib/components/ContextMenu.module.scss

@@ -0,0 +1,37 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.root {
+  position: absolute;
+  padding: c.$grid 0;
+  background: c.$colorNeutralWhite;
+  border-radius: c.$borderRadius;
+  border: c.$borderWidth solid c.$colorNeutral;
+  z-index: c.$zIndex2000;
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  flex-grow: 1;
+  flex-shrink: 0;
+  background: none;
+  padding: c.$grid c.$grid * 4;
+  margin: 0;
+  cursor: pointer;
+  border: none;
+  text-align: left;
+
+  &:focus-visible {
+    @include h.outlineSimple;
+  }
+
+  &:hover {
+    background: c.$colorNeutral;
+  }
+}
+
+.hidden {
+  top: -9999999999px;
+  left: -999999999px;
+}