etudes 0.62.0 → 0.63.0

package/lib/WithTooltip.js

@@ -72,7 +72,7 @@ var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
 var styled_components_1 = __importStar(require("styled-components"));
 var ExtractChild_1 = __importDefault(require("./ExtractChild"));
-var useViewportSize_1 = __importDefault(require("./hooks/useViewportSize"));
+var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 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) {
@@ -127,15 +127,15 @@ function WithTooltip(_a) {
     };
     var _h = __read((0, react_1.useState)(new spase_1.Size()), 2), textSize = _h[0], setTextSize = _h[1];
     var _j = __read((0, react_1.useState)(undefined), 2), alignment = _j[0], setAlignment = _j[1];
-    var viewportSize = (0, useViewportSize_1.default)();
     var childRef = (0, react_1.useRef)(null);
+    var childRect = (0, useElementRect_1.default)(childRef);
     (0, react_1.useEffect)(function () {
         var childNode = childRef.current;
         if (!childNode)
             return;
         setAlignment(computeAlignment(childNode, threshold));
         setTextSize(computeTextSize(childNode, threshold));
-    }, [viewportSize]);
+    }, [childRect]);
     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 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 viewportSize = useViewportSize()\n\n  const childRef = useRef<HTMLElement>(null)\n\n  useEffect(() => {\n    const childNode = childRef.current\n    if (!childNode) return\n    setAlignment(computeAlignment(childNode, threshold))\n    setTextSize(computeTextSize(childNode, threshold))\n  }, [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"]}
+{"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"]}

package/lib/hooks/useElementRect.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { Rect } from 'spase';
+/**
+ * Hook for monitoring changes in and returning the size and position of the target element.
+ *
+ * @param targetRef - Reference to the target element.
+ *
+ * @returns The most current {@link Rect} of the target element.
+ */
+export default function useElementRect(targetRef: RefObject<Element>): Rect;

package/lib/hooks/useElementRect.js

@@ -0,0 +1,54 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+var spase_1 = require("spase");
+/**
+ * Hook for monitoring changes in and returning the size and position of the target element.
+ *
+ * @param targetRef - Reference to the target element.
+ *
+ * @returns The most current {@link Rect} of the target element.
+ */
+function useElementRect(targetRef) {
+    var observerRef = (0, react_1.useRef)(undefined);
+    var _a = __read((0, react_1.useState)(new spase_1.Rect()), 2), rect = _a[0], setRect = _a[1];
+    (0, react_1.useEffect)(function () {
+        observerRef.current = new resize_observer_polyfill_1.default(function () {
+            var rect = spase_1.Rect.from(targetRef.current);
+            if (!rect)
+                return;
+            setRect(rect);
+        });
+        if (observerRef.current && targetRef.current) {
+            observerRef.current.observe(targetRef.current);
+        }
+        return function () {
+            if (observerRef.current && targetRef.current) {
+                observerRef.current.unobserve(targetRef.current);
+            }
+        };
+    }, [targetRef]);
+    return rect;
+}
+exports.default = useElementRect;
+//# sourceMappingURL=useElementRect.js.map

package/lib/hooks/useElementRect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementRect.js","sourceRoot":"/","sources":["hooks/useElementRect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+BAA8D;AAC9D,sFAAqD;AACrD,+BAA4B;AAE5B;;;;;;GAMG;AACH,SAAwB,cAAc,CAAC,SAA6B;IAClE,IAAM,WAAW,GAAG,IAAA,cAAM,EAA6B,SAAS,CAAC,CAAA;IAC3D,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,WAAW,CAAC,OAAO,GAAG,IAAI,kCAAc,CAAC;YACvC,IAAM,IAAI,GAAG,YAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,CAAC,IAAI;gBAAE,OAAM;YAEjB,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,CAAC,CAAA;QAEF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5C,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;SAC/C;QAED,OAAO;YACL,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjD;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,IAAI,CAAA;AACb,CAAC;AAzBD,iCAyBC","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect } from 'spase'\n\n/**\n * Hook for monitoring changes in and returning the size and position of the target element.\n *\n * @param targetRef - Reference to the target element.\n *\n * @returns The most current {@link Rect} of the target element.\n */\nexport default function useElementRect(targetRef: RefObject<Element>): Rect {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [rect, setRect] = useState<Rect>(new Rect())\n\n  useEffect(() => {\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      setRect(rect)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef])\n\n  return rect\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {