etudes 0.63.0 → 0.66.0

package/lib/Conditional.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    if: boolean | (() => boolean);
+}>;
+export default function Conditional({ children, if: boolOrExpression }: Props): JSX.Element;
+export {};

package/lib/Conditional.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function Conditional(_a) {
+    var children = _a.children, boolOrExpression = _a.if;
+    switch (typeof boolOrExpression) {
+        case 'boolean':
+            return boolOrExpression ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(react_1.default.Fragment, null);
+        case 'function':
+            return boolOrExpression() ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(react_1.default.Fragment, null);
+        default:
+            console.error("[etudes::Conditional] The type of provided condition ".concat(boolOrExpression, " is not supported."));
+            return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+}
+exports.default = Conditional;
+//# sourceMappingURL=Conditional.js.map

package/lib/Conditional.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conditional.js","sourceRoot":"/","sources":["Conditional.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAgD;AAMhD,SAAwB,WAAW,CAAC,EAAyC;QAAvC,QAAQ,cAAA,EAAM,gBAAgB,QAAA;IAClE,QAAQ,OAAO,gBAAgB,EAAE;QACjC,KAAK,SAAS;YACZ,OAAO,gBAAgB,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACnD,KAAK,UAAU;YACb,OAAO,gBAAgB,EAAE,CAAC,CAAC,CAAC,8DAAG,QAAQ,CAAI,CAAC,CAAC,CAAC,6DAAK,CAAA;QACrD;YACE,OAAO,CAAC,KAAK,CAAC,+DAAwD,gBAAgB,uBAAoB,CAAC,CAAA;YAC3G,OAAO,6DAAK,CAAA;KACb;AACH,CAAC;AAVD,8BAUC","sourcesContent":["import React, { PropsWithChildren } from 'react'\n\ntype Props = PropsWithChildren<{\n  if: boolean | (() => boolean)\n}>\n\nexport default function Conditional({ children, if: boolOrExpression }: Props) {\n  switch (typeof boolOrExpression) {\n  case 'boolean':\n    return boolOrExpression ? <>{children}</> : <></>\n  case 'function':\n    return boolOrExpression() ? <>{children}</> : <></>\n  default:\n    console.error(`[etudes::Conditional] The type of provided condition ${boolOrExpression} is not supported.`)\n    return <></>\n  }\n}\n"]}

package/lib/ExtractChild.d.ts

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from 'react';
 export declare type Props = HTMLAttributes<HTMLElement>;
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 /**
  * Extracts a single child of a parent component into its own component. If the parent component has
  * multiple children, only the first one will be extracted, the rest will be ignored.
  */
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default _default;

package/lib/FlatSVG.d.ts

@@ -30,6 +30,10 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     whitelistedAttributes?: string[];
 };
+/**
+ * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
+ * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
+ */
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".
@@ -61,8 +65,4 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      */
     whitelistedAttributes?: string[] | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
- * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
- */
 export default _default;

package/lib/WithTooltip.js

@@ -73,6 +73,7 @@ var spase_1 = require("spase");
 var styled_components_1 = __importStar(require("styled-components"));
 var ExtractChild_1 = __importDefault(require("./ExtractChild"));
 var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
+var useViewportSize_1 = __importDefault(require("./hooks/useViewportSize"));
 function WithTooltip(_a) {
     var _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, cssDialog = _a.cssDialog, _d = _a.disabledOnTouch, disabledOnTouch = _d === void 0 ? true : _d, hint = _a.hint, _e = _a.gap, gap = _e === void 0 ? 5 : _e, _f = _a.textColor, textColor = _f === void 0 ? '#fff' : _f, _g = _a.threshold, threshold = _g === void 0 ? 100 : _g, props = __rest(_a, ["arrowHeight", "backgroundColor", "cssDialog", "disabledOnTouch", "hint", "gap", "textColor", "threshold"]);
     var computeAlignment = function (target, threshold) {
@@ -129,13 +130,14 @@ function WithTooltip(_a) {
     var _j = __read((0, react_1.useState)(undefined), 2), alignment = _j[0], setAlignment = _j[1];
     var childRef = (0, react_1.useRef)(null);
     var childRect = (0, useElementRect_1.default)(childRef);
+    var viewportSize = (0, useViewportSize_1.default)();
     (0, react_1.useEffect)(function () {
         var childNode = childRef.current;
         if (!childNode)
             return;
         setAlignment(computeAlignment(childNode, threshold));
         setTextSize(computeTextSize(childNode, threshold));
-    }, [childRect]);
+    }, [childRect, viewportSize]);
     return (react_1.default.createElement(StyledRoot, __assign({ arrowHeight: arrowHeight, backgroundColor: backgroundColor, ref: childRef, cssDialog: cssDialog, disabledOnTouch: disabledOnTouch, hint: hint, gap: gap, onMouseOver: function (event) { return onMouseOver(event); }, alignment: alignment, textColor: textColor, textSize: textSize }, props)));
 }
 exports.default = WithTooltip;

package/lib/WithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\n\nexport type Props = HTMLAttributes<HTMLElement> & {\n  /**\n   * The height of the arrow. The width (longest edge) of the arrow is always twice its height.\n   */\n  arrowHeight?: number\n\n  /**\n   * Color of the dialog background, same format as a CSS color string (i.e. '#000').\n   */\n  backgroundColor?: string\n\n  /**\n   * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).\n   */\n  disabledOnTouch?: boolean\n\n  /**\n   * The hint string to display in the tooltip.\n   */\n  hint: string\n\n  /**\n   * The gap (in pixels) between the target element and the tooltip, defaults to zero.\n   */\n  gap?: number\n\n  /**\n   * Color of the dialog text, same format as a CSS color string (i.e. '#000').\n   */\n  textColor?: string\n\n  /**\n   * The minimum space (in pixels) between the target element and the edge of the window required to\n   * trigger an alignment change, defaults to `100px`.\n   */\n  threshold?: number\n\n  /**\n   * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be\n   * overridden by internal rules.\n   */\n  cssDialog?: CSSProp<any>\n}\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport default function WithTooltip({\n  arrowHeight = 8,\n  backgroundColor = '#000',\n  cssDialog,\n  disabledOnTouch = true,\n  hint,\n  gap = 5,\n  textColor = '#fff',\n  threshold = 100,\n  ...props\n}: Props) {\n  const computeAlignment = (target: Element, threshold: number): Alignment => {\n    const vrect = Rect.fromViewport()\n    const rect = Rect.intersecting(target)\n\n    if (rect) {\n      const leftBound = (rect.left - vrect.left) < threshold\n      const rightBound = (vrect.right - rect.right) < threshold\n      const topBound = (rect.top - vrect.top) < threshold\n      const bottomBound = (vrect.bottom - rect.bottom) < threshold\n\n      if (leftBound && topBound) return 'br'\n      if (leftBound && bottomBound) return 'tr'\n      if (rightBound && topBound) return 'bl'\n      if (rightBound && bottomBound) return 'tl'\n      if (leftBound) return 'cr'\n      if (rightBound) return 'cl'\n      if (bottomBound) return 'tc'\n    }\n\n    return 'bc'\n  }\n\n  const computeTextSize = (target: Element, threshold: number): Size => {\n    const computedStyle = window.getComputedStyle(target, '::after')\n    const div = document.createElement('div')\n    div.innerHTML = hint\n    div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n    div.style.fontSize = computedStyle.getPropertyValue('font-size')\n    div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n    div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n    div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n    div.style.left = '0'\n    div.style.position = 'absolute'\n    div.style.top = '0'\n    div.style.visibility = 'hidden'\n    div.style.whiteSpace = 'pre'\n\n    document.body.appendChild(div)\n\n    // Add 1px as buffer to mitigate precision discrepancies.\n    const width = div.clientWidth + 1\n    const height = div.clientHeight + 1\n\n    document.body.removeChild(div)\n\n    return new Size([width, height])\n  }\n\n  const onMouseOver = (event: MouseEvent) => {\n    setAlignment(computeAlignment(event.currentTarget, threshold))\n    setTextSize(computeTextSize(event.currentTarget, threshold))\n  }\n\n  const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n  const [alignment, setAlignment] = useState<Alignment | undefined>(undefined)\n  const childRef = useRef<HTMLElement>(null)\n  const childRect = useElementRect(childRef)\n\n  useEffect(() => {\n    const childNode = childRef.current\n    if (!childNode) return\n    setAlignment(computeAlignment(childNode, threshold))\n    setTextSize(computeTextSize(childNode, threshold))\n  }, [childRect])\n\n  return (\n    <StyledRoot\n      arrowHeight={arrowHeight}\n      backgroundColor={backgroundColor}\n      ref={childRef}\n      cssDialog={cssDialog}\n      disabledOnTouch={disabledOnTouch}\n      hint={hint}\n      gap={gap}\n      onMouseOver={event => onMouseOver(event)}\n      alignment={alignment}\n      textColor={textColor}\n      textSize={textSize}\n      {...props}\n    />\n  )\n}\n\nfunction makeDisplacementCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`top: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n  case 'tr': return css`top: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  case 'cl': return css`top: 50%; left: ${-arrowHeight}px;`\n  case 'cr': return css`top: 50%; right: ${-arrowHeight}px;`\n  case 'bl': return css`bottom: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n  case 'br': return css`bottom: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  }\n}\n\nfunction makeDialogPositionCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${gap}px), 0);`\n  case 'tr': return css`transform: translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'cl': return css`transform: translate3d(calc(-100% - ${gap}px), -50%, 0);`\n  case 'cr': return css`transform: translate3d(calc(100% + ${gap}px), -50%, 0);`\n  case 'bl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0);`\n  case 'bc': return css`transform: translate3d(-50%, calc(100% + ${gap}px), 0);`\n  case 'br': return css`transform: translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0);`\n  }\n}\n\nfunction makeArrowPositionCSS(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProp {\n  return css`\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tc': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tr': return css`border-color: ${color} transparent transparent transparent;`\n    case 'cl': return css`border-color: transparent transparent transparent ${color};`\n    case 'cr': return css`border-color: transparent ${color} transparent transparent;`\n    case 'bl': return css`border-color: transparent transparent ${color} transparent;`\n    case 'bc': return css`border-color: transparent transparent ${color} transparent;`\n    case 'br': return css`border-color: transparent transparent ${color} transparent;`\n    }\n  }}\n\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% - ${gap}px), 0);`\n    case 'tc': return css`transform: translate3d(-50%, calc(0% - ${gap}px), 0);`\n    case 'tr': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0);`\n    case 'cl': return css`transform: translate3d(calc(0% - ${gap}px), -50%, 0);`\n    case 'cr': return css`transform: translate3d(calc(0% + ${gap}px), -50%, 0);`\n    case 'bl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% + ${gap}px), 0);`\n    case 'bc': return css`transform: translate3d(-50%, calc(0% + ${gap}px), 0);`\n    case 'br': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0);`\n    }\n  }}\n  `\n}\n\nconst StyledRoot = styled(ExtractChild)<{\n  arrowHeight: number\n  backgroundColor: string\n  ref: RefObject<HTMLElement>\n  cssDialog?: CSSProp\n  disabledOnTouch: boolean\n  hint: string\n  gap: number\n  alignment?: Alignment\n  textColor: string\n  textSize?: Size\n}>`\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ${props => props.arrowHeight}px;\n    content: '';\n    height: 0;\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: opacity 200ms ease-out;\n    width: 0;\n    z-index: 10001;\n\n    ${props => props.alignment && props.textSize && css`\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 200px;\n    padding: 10px 14px;\n    text-align: left;\n\n    ${props => props.cssDialog}\n\n    background: ${props => props.backgroundColor};\n    color: ${props => props.textColor};\n    content: '${props => props.hint}';\n    opacity: 0;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    transition: opacity 200ms ease-out;\n    z-index: 10000;\n\n    ${props => props.alignment && props.textSize && css`\n      width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'} {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n`\n"]}
+{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAiG;AACjG,+BAAkC;AAClC,qEAAwD;AACxD,gEAAyC;AACzC,0EAAmD;AACnD,4EAAqD;AAgDrD,SAAwB,WAAW,CAAC,EAU5B;IATN,IAAA,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,uBAAwB,EAAxB,eAAe,mBAAG,MAAM,KAAA,EACxB,SAAS,eAAA,EACT,uBAAsB,EAAtB,eAAe,mBAAG,IAAI,KAAA,EACtB,IAAI,UAAA,EACJ,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,iBAAkB,EAAlB,SAAS,mBAAG,MAAM,KAAA,EAClB,iBAAe,EAAf,SAAS,mBAAG,GAAG,KAAA,EACZ,KAAK,cAT0B,2GAUnC,CADS;IAER,IAAM,gBAAgB,GAAG,UAAC,MAAe,EAAE,SAAiB;QAC1D,IAAM,KAAK,GAAG,YAAI,CAAC,YAAY,EAAE,CAAA;QACjC,IAAM,IAAI,GAAG,YAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAEtC,IAAI,IAAI,EAAE;YACR,IAAM,SAAS,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,SAAS,CAAA;YACtD,IAAM,UAAU,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;YACzD,IAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAA;YACnD,IAAM,WAAW,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;YAE5D,IAAI,SAAS,IAAI,QAAQ;gBAAE,OAAO,IAAI,CAAA;YACtC,IAAI,SAAS,IAAI,WAAW;gBAAE,OAAO,IAAI,CAAA;YACzC,IAAI,UAAU,IAAI,QAAQ;gBAAE,OAAO,IAAI,CAAA;YACvC,IAAI,UAAU,IAAI,WAAW;gBAAE,OAAO,IAAI,CAAA;YAC1C,IAAI,SAAS;gBAAE,OAAO,IAAI,CAAA;YAC1B,IAAI,UAAU;gBAAE,OAAO,IAAI,CAAA;YAC3B,IAAI,WAAW;gBAAE,OAAO,IAAI,CAAA;SAC7B;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,IAAM,eAAe,GAAG,UAAC,MAAe,EAAE,SAAiB;QACzD,IAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QAChE,IAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAA;QACpB,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QACpE,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAChE,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAA;QAClE,GAAG,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAA;QACtE,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QACpE,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAA;QACpB,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;QAC/B,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;QACnB,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;QAC/B,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,KAAK,CAAA;QAE5B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAE9B,yDAAyD;QACzD,IAAM,KAAK,GAAG,GAAG,CAAC,WAAW,GAAG,CAAC,CAAA;QACjC,IAAM,MAAM,GAAG,GAAG,CAAC,YAAY,GAAG,CAAC,CAAA;QAEnC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAE9B,OAAO,IAAI,YAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAClC,CAAC,CAAA;IAED,IAAM,WAAW,GAAG,UAAC,KAAiB;QACpC,YAAY,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAA;QAC9D,WAAW,CAAC,eAAe,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAA;IAC9D,CAAC,CAAA;IAEK,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAmB,IAAI,YAAI,EAAE,CAAC,IAAA,EAA/D,QAAQ,QAAA,EAAE,WAAW,QAA0C,CAAA;IAChE,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAwB,SAAS,CAAC,IAAA,EAArE,SAAS,QAAA,EAAE,YAAY,QAA8C,CAAA;IAC5E,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAA;IAC1C,IAAM,SAAS,GAAG,IAAA,wBAAc,EAAC,QAAQ,CAAC,CAAA;IAC1C,IAAM,YAAY,GAAG,IAAA,yBAAe,GAAE,CAAA;IAEtC,IAAA,iBAAS,EAAC;QACR,IAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAA;QAClC,IAAI,CAAC,SAAS;YAAE,OAAM;QACtB,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;QACpD,WAAW,CAAC,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;IACpD,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,8BAAC,UAAU,aACT,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,EACxC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,CACH,CAAA;AACH,CAAC;AA7FD,8BA6FC;AAED,SAAS,mBAAmB,CAAC,SAAoB,EAAE,WAAmB,EAAE,GAAW;IACjF,QAAQ,SAAS,EAAE;QACnB,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,4GAAA,OAAQ,EAAY,uBAAwB,EAAe,MAAM,KAAzD,CAAC,WAAW,EAAwB,WAAW,GAAC,GAAG,EAAM;QACtF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6FAAA,OAAQ,EAAY,gBAAgB,KAA5B,CAAC,WAAW,EAAgB;QACzD,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6GAAA,OAAQ,EAAY,wBAAyB,EAAe,MAAM,KAA1D,CAAC,WAAW,EAAyB,WAAW,GAAC,GAAG,EAAM;QACvF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6FAAA,kBAAmB,EAAY,KAAK,KAAjB,CAAC,WAAW,EAAK;QACzD,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,8FAAA,mBAAoB,EAAY,KAAK,KAAjB,CAAC,WAAW,EAAK;QAC1D,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+GAAA,UAAW,EAAY,uBAAwB,EAAe,MAAM,KAAzD,CAAC,WAAW,EAAwB,WAAW,GAAC,GAAG,EAAM;QACzF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,gGAAA,UAAW,EAAY,gBAAgB,KAA5B,CAAC,WAAW,EAAgB;QAC5D,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,gHAAA,UAAW,EAAY,wBAAyB,EAAe,MAAM,KAA1D,CAAC,WAAW,EAAyB,WAAW,GAAC,GAAG,EAAM;KACzF;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,SAAoB,EAAE,WAAmB,EAAE,GAAW;IACnF,QAAQ,SAAS,EAAE;QACnB,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,4IAAA,sCAAuC,EAAG,oBAAqB,EAAG,UAAU,KAArC,GAAG,EAAqB,GAAG,EAAU;QACjG,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,8HAAA,4CAA6C,EAAG,UAAU,KAAb,GAAG,EAAU;QAC/E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6IAAA,qCAAsC,EAAG,oBAAqB,EAAG,UAAU,KAArC,GAAG,EAAqB,GAAG,EAAU;QAChG,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,8HAAA,sCAAuC,EAAG,gBAAgB,KAAnB,GAAG,EAAgB;QAC/E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6HAAA,qCAAsC,EAAG,gBAAgB,KAAnB,GAAG,EAAgB;QAC9E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6IAAA,sCAAuC,EAAG,mBAAoB,EAAG,UAAU,KAApC,GAAG,EAAoB,GAAG,EAAU;QAChG,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,6HAAA,2CAA4C,EAAG,UAAU,KAAb,GAAG,EAAU;QAC9E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,4IAAA,qCAAsC,EAAG,mBAAoB,EAAG,UAAU,KAApC,GAAG,EAAoB,GAAG,EAAU;KAC9F;AACH,CAAC;AAED,SAAS,oBAAoB,CAAC,SAAoB,EAAE,WAAmB,EAAE,GAAW,EAAE,KAAa;IACjG,WAAO,uBAAG,kGAAA,QACN,EAWH,UAEG,EAWH,MACA,KAzBG;QACF,QAAQ,SAAS,EAAE;YACnB,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,gBAAiB,EAAK,uCAAuC,KAA5C,KAAK,EAAuC;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,gBAAiB,EAAK,uCAAuC,KAA5C,KAAK,EAAuC;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,gBAAiB,EAAK,uCAAuC,KAA5C,KAAK,EAAuC;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,oDAAqD,EAAK,GAAG,KAAR,KAAK,EAAG;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,4BAA6B,EAAK,2BAA2B,KAAhC,KAAK,EAA2B;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,wCAAyC,EAAK,eAAe,KAApB,KAAK,EAAe;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,wCAAyC,EAAK,eAAe,KAApB,KAAK,EAAe;YAClF,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,+HAAA,wCAAyC,EAAK,eAAe,KAApB,KAAK,EAAe;SACjF;IACH,CAAC,EAEG;QACF,QAAQ,SAAS,EAAE;YACnB,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,iJAAA,mCAAoC,EAAG,OAAQ,EAAa,iBAAkB,EAAG,UAAU,KAAvD,GAAG,EAAQ,WAAW,GAAC,CAAC,EAAkB,GAAG,EAAU;YAChH,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,2HAAA,yCAA0C,EAAG,UAAU,KAAb,GAAG,EAAU;YAC5E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,mJAAA,qCAAsC,EAAG,OAAQ,EAAW,iBAAkB,EAAG,UAAU,KAArD,GAAG,EAAQ,WAAW,EAAkB,GAAG,EAAU;YAChH,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,2HAAA,mCAAoC,EAAG,gBAAgB,KAAnB,GAAG,EAAgB;YAC5E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,2HAAA,mCAAoC,EAAG,gBAAgB,KAAnB,GAAG,EAAgB;YAC5E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,iJAAA,mCAAoC,EAAG,OAAQ,EAAa,iBAAkB,EAAG,UAAU,KAAvD,GAAG,EAAQ,WAAW,GAAC,CAAC,EAAkB,GAAG,EAAU;YAChH,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,2HAAA,yCAA0C,EAAG,UAAU,KAAb,GAAG,EAAU;YAC5E,KAAK,IAAI,CAAC,CAAC,WAAO,uBAAG,mJAAA,qCAAsC,EAAG,OAAQ,EAAW,iBAAkB,EAAG,UAAU,KAArD,GAAG,EAAQ,WAAW,EAAkB,GAAG,EAAU;SAC/G;IACH,CAAC,EACA;AACH,CAAC;AAED,IAAM,UAAU,GAAG,IAAA,2BAAM,EAAC,sBAAY,CAAC,s3BAWrC,4GAMkB,EAA0B,iMAUxC,EAID,0JAUC,EAAwB,sBAEZ,EAA8B,gBACnC,EAAwB,mBACrB,EAAmB,4MAS7B,EAKD,aAGD,EAAuE,wEAI1E,KAjDmB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,EAAjB,CAAiB,EAUxC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,QAAI,uBAAG,kHAAA,UAC/C,EAAkE,UAClE,EAA0F,UAC1F,EAA8D,QACjE,KAHG,mBAAmB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,EAClE,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,eAAe,CAAC,EAC1F,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,CACjE,EAJU,CAIV,EAUC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,EAEZ,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,eAAe,EAArB,CAAqB,EACnC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,EACrB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,EAAV,CAAU,EAS7B,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,QAAI,uBAAG,sIAAA,iBACxC,EAA+D,WACtE,EAAkE,UAClE,EAAoE,UACpE,EAA8D,QACjE,KAJU,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM,EACtE,mBAAmB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,EAClE,qBAAqB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,EACpE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,CACjE,EALU,CAKV,EAGD,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,EAA9D,CAA8D,CAI1E,CAAA","sourcesContent":["import React, { HTMLAttributes, MouseEvent, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\nimport useViewportSize from './hooks/useViewportSize'\n\nexport type Props = HTMLAttributes<HTMLElement> & {\n  /**\n   * The height of the arrow. The width (longest edge) of the arrow is always twice its height.\n   */\n  arrowHeight?: number\n\n  /**\n   * Color of the dialog background, same format as a CSS color string (i.e. '#000').\n   */\n  backgroundColor?: string\n\n  /**\n   * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).\n   */\n  disabledOnTouch?: boolean\n\n  /**\n   * The hint string to display in the tooltip.\n   */\n  hint: string\n\n  /**\n   * The gap (in pixels) between the target element and the tooltip, defaults to zero.\n   */\n  gap?: number\n\n  /**\n   * Color of the dialog text, same format as a CSS color string (i.e. '#000').\n   */\n  textColor?: string\n\n  /**\n   * The minimum space (in pixels) between the target element and the edge of the window required to\n   * trigger an alignment change, defaults to `100px`.\n   */\n  threshold?: number\n\n  /**\n   * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be\n   * overridden by internal rules.\n   */\n  cssDialog?: CSSProp<any>\n}\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport default function WithTooltip({\n  arrowHeight = 8,\n  backgroundColor = '#000',\n  cssDialog,\n  disabledOnTouch = true,\n  hint,\n  gap = 5,\n  textColor = '#fff',\n  threshold = 100,\n  ...props\n}: Props) {\n  const computeAlignment = (target: Element, threshold: number): Alignment => {\n    const vrect = Rect.fromViewport()\n    const rect = Rect.intersecting(target)\n\n    if (rect) {\n      const leftBound = (rect.left - vrect.left) < threshold\n      const rightBound = (vrect.right - rect.right) < threshold\n      const topBound = (rect.top - vrect.top) < threshold\n      const bottomBound = (vrect.bottom - rect.bottom) < threshold\n\n      if (leftBound && topBound) return 'br'\n      if (leftBound && bottomBound) return 'tr'\n      if (rightBound && topBound) return 'bl'\n      if (rightBound && bottomBound) return 'tl'\n      if (leftBound) return 'cr'\n      if (rightBound) return 'cl'\n      if (bottomBound) return 'tc'\n    }\n\n    return 'bc'\n  }\n\n  const computeTextSize = (target: Element, threshold: number): Size => {\n    const computedStyle = window.getComputedStyle(target, '::after')\n    const div = document.createElement('div')\n    div.innerHTML = hint\n    div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n    div.style.fontSize = computedStyle.getPropertyValue('font-size')\n    div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n    div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n    div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n    div.style.left = '0'\n    div.style.position = 'absolute'\n    div.style.top = '0'\n    div.style.visibility = 'hidden'\n    div.style.whiteSpace = 'pre'\n\n    document.body.appendChild(div)\n\n    // Add 1px as buffer to mitigate precision discrepancies.\n    const width = div.clientWidth + 1\n    const height = div.clientHeight + 1\n\n    document.body.removeChild(div)\n\n    return new Size([width, height])\n  }\n\n  const onMouseOver = (event: MouseEvent) => {\n    setAlignment(computeAlignment(event.currentTarget, threshold))\n    setTextSize(computeTextSize(event.currentTarget, threshold))\n  }\n\n  const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n  const [alignment, setAlignment] = useState<Alignment | undefined>(undefined)\n  const childRef = useRef<HTMLElement>(null)\n  const childRect = useElementRect(childRef)\n  const viewportSize = useViewportSize()\n\n  useEffect(() => {\n    const childNode = childRef.current\n    if (!childNode) return\n    setAlignment(computeAlignment(childNode, threshold))\n    setTextSize(computeTextSize(childNode, threshold))\n  }, [childRect, viewportSize])\n\n  return (\n    <StyledRoot\n      arrowHeight={arrowHeight}\n      backgroundColor={backgroundColor}\n      ref={childRef}\n      cssDialog={cssDialog}\n      disabledOnTouch={disabledOnTouch}\n      hint={hint}\n      gap={gap}\n      onMouseOver={event => onMouseOver(event)}\n      alignment={alignment}\n      textColor={textColor}\n      textSize={textSize}\n      {...props}\n    />\n  )\n}\n\nfunction makeDisplacementCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`top: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n  case 'tr': return css`top: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  case 'cl': return css`top: 50%; left: ${-arrowHeight}px;`\n  case 'cr': return css`top: 50%; right: ${-arrowHeight}px;`\n  case 'bl': return css`bottom: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n  case 'br': return css`bottom: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  }\n}\n\nfunction makeDialogPositionCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${gap}px), 0);`\n  case 'tr': return css`transform: translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'cl': return css`transform: translate3d(calc(-100% - ${gap}px), -50%, 0);`\n  case 'cr': return css`transform: translate3d(calc(100% + ${gap}px), -50%, 0);`\n  case 'bl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0);`\n  case 'bc': return css`transform: translate3d(-50%, calc(100% + ${gap}px), 0);`\n  case 'br': return css`transform: translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0);`\n  }\n}\n\nfunction makeArrowPositionCSS(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProp {\n  return css`\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tc': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tr': return css`border-color: ${color} transparent transparent transparent;`\n    case 'cl': return css`border-color: transparent transparent transparent ${color};`\n    case 'cr': return css`border-color: transparent ${color} transparent transparent;`\n    case 'bl': return css`border-color: transparent transparent ${color} transparent;`\n    case 'bc': return css`border-color: transparent transparent ${color} transparent;`\n    case 'br': return css`border-color: transparent transparent ${color} transparent;`\n    }\n  }}\n\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% - ${gap}px), 0);`\n    case 'tc': return css`transform: translate3d(-50%, calc(0% - ${gap}px), 0);`\n    case 'tr': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0);`\n    case 'cl': return css`transform: translate3d(calc(0% - ${gap}px), -50%, 0);`\n    case 'cr': return css`transform: translate3d(calc(0% + ${gap}px), -50%, 0);`\n    case 'bl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% + ${gap}px), 0);`\n    case 'bc': return css`transform: translate3d(-50%, calc(0% + ${gap}px), 0);`\n    case 'br': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0);`\n    }\n  }}\n  `\n}\n\nconst StyledRoot = styled(ExtractChild)<{\n  arrowHeight: number\n  backgroundColor: string\n  ref: RefObject<HTMLElement>\n  cssDialog?: CSSProp\n  disabledOnTouch: boolean\n  hint: string\n  gap: number\n  alignment?: Alignment\n  textColor: string\n  textSize?: Size\n}>`\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ${props => props.arrowHeight}px;\n    content: '';\n    height: 0;\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: opacity 200ms ease-out;\n    width: 0;\n    z-index: 10001;\n\n    ${props => props.alignment && props.textSize && css`\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 200px;\n    padding: 10px 14px;\n    text-align: left;\n\n    ${props => props.cssDialog}\n\n    background: ${props => props.backgroundColor};\n    color: ${props => props.textColor};\n    content: '${props => props.hint}';\n    opacity: 0;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    transition: opacity 200ms ease-out;\n    z-index: 10000;\n\n    ${props => props.alignment && props.textSize && css`\n      width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'} {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n`\n"]}

package/lib/hooks/useDragEffect.d.ts

@@ -3,7 +3,7 @@ declare type ReturnedStates<T> = {
     isDragging: [boolean, Dispatch<SetStateAction<boolean>>];
     value: [T, Dispatch<SetStateAction<T>>];
 };
-declare type Options<T> = Omit<Interact.DraggableOptions, 'onstart' | 'onmove' | 'onend'> & {
+declare type Options<T> = Omit<Parameters<Interact.Interactable['draggable']>[0], 'onstart' | 'onmove' | 'onend'> & {
     /**
      * The initial associated value of this hook.
      */

package/lib/hooks/useDragEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport _ from 'lodash'\nimport { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\n\n// const debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype ReturnedStates<T> = {\n  isDragging: [boolean, Dispatch<SetStateAction<boolean>>]\n  value: [T, Dispatch<SetStateAction<T>>]\n}\n\ntype Options<T> = Omit<Interact.DraggableOptions, 'onstart' | 'onmove' | 'onend'> & {\n  /**\n   * The initial associated value of this hook.\n   */\n  initialValue: T\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging.\n   *\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   */\n  onDragMove?: (dx: number, dy: number) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * A function that transforms the drag move delta values to the associated value of this hook.\n   *\n   * @param currentValue - The current associated value.\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   *\n   * @returns The transformed value.\n   */\n  transform?: (currentValue: T, dx: number, dy: number) => T\n}\n\n/**\n * Hook for adding effectful dragging interaction to an element.\n *\n * @param targetRef - The reference to the target element to add drag interaction to.\n * @param options - Additional options which include options for `module:interactjs.draggable`.\n * @param deps - Dependencies that trigger this effect.\n *\n * @returns The states created for this effect.\n */\nexport default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T> {\n  /**\n   * Sets the current associated value reference. This reference object is equal to the `value`\n   * state but differs slightly in how they are set. Because states are asynchronous by nature, this\n   * reference object is used to cache time-sensitive value changes while drag event happens.\n   *\n   * @param value - The value to set the associated value to.\n   *\n   * @returns `true` if the value was set, `false` otherwise.\n   */\n  const setValueRef = (value: T): boolean => {\n    if (_.isEqual(valueRef.current, value)) return false\n    valueRef.current = value\n    return true\n  }\n\n  const valueRef = useRef<T>(initialValue)\n  const [isDragging, setIsDragging] = useState<boolean>(false)\n  const [value, setValue] = useState(valueRef.current)\n\n  useEffect(() => {\n    // debug(`Using drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n    if (targetRef.current && !interact.isSet(targetRef.current)) {\n      // Do not consume states in these listeners as they will remain their initial values within\n      // the scope of the listeners.\n      interact(targetRef.current).draggable({\n        inertia: true,\n        ...options,\n        onstart: () => {\n          setIsDragging(true)\n          onDragStart?.()\n        },\n        onmove: ({ dx, dy }) => {\n          const newValue = transform?.(valueRef.current, dx, dy) ?? [dx, dy] as unknown as T\n\n          if (setValueRef(newValue)) {\n            // debug('Updating value from dragging...', 'OK', newValue)\n            setValue(newValue)\n          }\n\n          onDragMove?.(dx, dy)\n        },\n        onend: () => {\n          setIsDragging(false)\n          onDragEnd?.()\n        },\n      })\n    }\n\n    return () => {\n      // debug(`Removing drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n      if (targetRef.current && interact.isSet(targetRef.current)) {\n        interact(targetRef.current).unset()\n      }\n    }\n  }, [...deps ? deps : []])\n\n  useEffect(() => {\n    if (setValueRef(value)) {\n      // debug('Updating value from externally...', 'OK', value)\n    }\n  }, [value])\n\n  return {\n    isDragging: [isDragging, setIsDragging],\n    value: [value, setValue],\n  }\n}\n"]}
+{"version":3,"file":"useDragEffect.js","sourceRoot":"/","sources":["hooks/useDragEffect.ts"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport _ from 'lodash'\nimport { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\n\n// const debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype ReturnedStates<T> = {\n  isDragging: [boolean, Dispatch<SetStateAction<boolean>>]\n  value: [T, Dispatch<SetStateAction<T>>]\n}\n\ntype Options<T> = Omit<Parameters<Interact.Interactable['draggable']>[0], 'onstart' | 'onmove' | 'onend'> & {\n  /**\n   * The initial associated value of this hook.\n   */\n  initialValue: T\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging.\n   *\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   */\n  onDragMove?: (dx: number, dy: number) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * A function that transforms the drag move delta values to the associated value of this hook.\n   *\n   * @param currentValue - The current associated value.\n   * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.\n   * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.\n   *\n   * @returns The transformed value.\n   */\n  transform?: (currentValue: T, dx: number, dy: number) => T\n}\n\n/**\n * Hook for adding effectful dragging interaction to an element.\n *\n * @param targetRef - The reference to the target element to add drag interaction to.\n * @param options - Additional options which include options for `module:interactjs.draggable`.\n * @param deps - Dependencies that trigger this effect.\n *\n * @returns The states created for this effect.\n */\nexport default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T> {\n  /**\n   * Sets the current associated value reference. This reference object is equal to the `value`\n   * state but differs slightly in how they are set. Because states are asynchronous by nature, this\n   * reference object is used to cache time-sensitive value changes while drag event happens.\n   *\n   * @param value - The value to set the associated value to.\n   *\n   * @returns `true` if the value was set, `false` otherwise.\n   */\n  const setValueRef = (value: T): boolean => {\n    if (_.isEqual(valueRef.current, value)) return false\n    valueRef.current = value\n    return true\n  }\n\n  const valueRef = useRef<T>(initialValue)\n  const [isDragging, setIsDragging] = useState<boolean>(false)\n  const [value, setValue] = useState(valueRef.current)\n\n  useEffect(() => {\n    // debug(`Using drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n    if (targetRef.current && !interact.isSet(targetRef.current)) {\n      // Do not consume states in these listeners as they will remain their initial values within\n      // the scope of the listeners.\n      interact(targetRef.current).draggable({\n        inertia: true,\n        ...options,\n        onstart: () => {\n          setIsDragging(true)\n          onDragStart?.()\n        },\n        onmove: ({ dx, dy }) => {\n          const newValue = transform?.(valueRef.current, dx, dy) ?? [dx, dy] as unknown as T\n\n          if (setValueRef(newValue)) {\n            // debug('Updating value from dragging...', 'OK', newValue)\n            setValue(newValue)\n          }\n\n          onDragMove?.(dx, dy)\n        },\n        onend: () => {\n          setIsDragging(false)\n          onDragEnd?.()\n        },\n      })\n    }\n\n    return () => {\n      // debug(`Removing drag effect for element ${targetRef.current}...`, 'OK', `value=${valueRef.current}`)\n\n      if (targetRef.current && interact.isSet(targetRef.current)) {\n        interact(targetRef.current).unset()\n      }\n    }\n  }, [...deps ? deps : []])\n\n  useEffect(() => {\n    if (setValueRef(value)) {\n      // debug('Updating value from externally...', 'OK', value)\n    }\n  }, [value])\n\n  return {\n    isDragging: [isDragging, setIsDragging],\n    value: [value, setValue],\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.63.0",
+  "version": "0.66.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -29,59 +29,59 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-transform-runtime": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.9",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.18.6",
     "@types/debug": "^4.1.7",
     "@types/html-webpack-plugin": "^3.2.6",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3",
-    "@types/react-transition-group": "^4.4.4",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.1.25",
     "@types/webpack": "^5.28.0",
-    "@types/webpack-env": "^1.16.4",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
+    "@types/webpack-env": "^1.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
-    "concurrently": "^7.1.0",
+    "concurrently": "^7.2.2",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
-    "eslint": "^8.15.0",
+    "eslint": "^8.19.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "promptu": "^5.8.0",
     "raw-loader": "^4.0.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.5",
-    "ts-loader": "^9.3.0",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.6.4",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.8.2",
+    "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0"
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3"
   },
   "dependencies": {
     "classnames": "^2.3.1",
     "dirty-dom": "^7.1.0",
-    "interactjs": "^1.10.11",
+    "interactjs": "^1.10.14",
     "lodash": "^4.17.21",
     "react-transition-group": "^4.4.2",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^6.3.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "styled-components": "^5.3.5"
   },
   "optionalDependencies": {