etudes 0.60.0 → 0.63.0

package/lib/ExtractChild.d.ts

@@ -1,8 +1,6 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
-export declare type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
+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.

package/lib/ExtractChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,kDAAsB;AACtB,6CAAoH;AAIpH;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAqB,UAAC,EAI9C,EAAE,GAAG;IAHJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAHqC,yBAI9C,CADS;IAER,IAAI,gBAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvB,yCAAyC;QACzC,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC;YAAE,OAAO,SAAS,CAAA;QAE7B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,sBAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;SACvG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts a single child of a parent component into its own component. If the parent component has\n * multiple children, only the first one will be extracted, the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\n    /* eslint-disable-next-line no-console */\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) return undefined\n\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props, ref })\n        }\n\n        return child\n      })}\n    </>\n  )\n})\n"]}
+{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,kDAAsB;AACtB,6CAAiG;AAIjG;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAqB,UAAC,EAI9C,EAAE,GAAG;IAHJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAHqC,yBAI9C,CADS;IAER,IAAI,gBAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvB,yCAAyC;QACzC,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC;YAAE,OAAO,SAAS,CAAA;QAE7B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,sBAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;SACvG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement } from 'react'\n\nexport type Props = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the parent component has\n * multiple children, only the first one will be extracted, the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\n    /* eslint-disable-next-line no-console */\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) return undefined\n\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props, ref })\n        }\n\n        return child\n      })}\n    </>\n  )\n})\n"]}

package/lib/ExtractChildren.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+import { HTMLAttributes } from 'react';
+export declare type Props = HTMLAttributes<HTMLElement>;
 /**
  * Extracts all children of a parent component into its own component.
  */

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAwG;AAIxG;;GAEG;AACH,SAAwB,eAAe,CAAC,EAIhC;IAHN,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAH8B,yBAIvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,aAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,EAAG,CAAA;SAClG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  className,\n  ...props\n}: Props) {\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props })\n        }\n\n        return child\n      })}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAqF;AAIrF;;GAEG;AACH,SAAwB,eAAe,CAAC,EAIhC;IAHN,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAH8B,yBAIvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,aAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,EAAG,CAAA;SAClG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement } from 'react'\n\nexport type Props = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  className,\n  ...props\n}: Props) {\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props })\n        }\n\n        return child\n      })}\n    </>\n  )\n}\n"]}

package/lib/Map.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export declare type Props<T> = {
-    children: JSX.Element | ((value: T, index: number) => JSX.Element);
+    children: ReactNode | ((value: T, index: number) => ReactNode);
     array?: T[];
 };
 export default function Map<T>({ array, children, }: Props<T>): JSX.Element;

package/lib/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sourceRoot":"/","sources":["Map.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAOvC,SAAwB,GAAG,CAAI,EAGpB;QAFT,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,gDAAyC,KAAK,CAAE,CAAC,CAAA;IAEhG,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClD,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAfD,sBAeC","sourcesContent":["import React, { Fragment } from 'react'\n\nexport type Props<T> = {\n  children: JSX.Element | ((value: T, index: number) => JSX.Element)\n  array?: T[]\n}\n\nexport default function Map<T>({\n  array,\n  children,\n}: Props<T>) {\n  if (!(array instanceof Array)) throw TypeError(`Provided collection must be an array: ${array}`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`element-${i}`}>\n          {typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"Map.js","sourceRoot":"/","sources":["Map.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAOlD,SAAwB,GAAG,CAAI,EAGpB;QAFT,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,gDAAyC,KAAK,CAAE,CAAC,CAAA;IAEhG,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClD,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAfD,sBAeC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type Props<T> = {\n  children: ReactNode | ((value: T, index: number) => ReactNode)\n  array?: T[]\n}\n\nexport default function Map<T>({\n  array,\n  children,\n}: Props<T>) {\n  if (!(array instanceof Array)) throw TypeError(`Provided collection must be an array: ${array}`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`element-${i}`}>\n          {typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/MasonryGrid.d.ts

@@ -1,13 +1,13 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import { Orientation } from './types';
-export declare type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export declare type Props = HTMLAttributes<HTMLDivElement> & {
     areSectionsAligned?: boolean;
     horizontalSpacing?: number;
     isReversed?: boolean;
     orientation?: Orientation;
     sections?: number;
     verticalSpacing?: number;
-}>;
+};
 /**
  * This is a React component that arranges all of its immediate children in a masonry grid. Refrain
  * from assigning CSS styles to it via `className` or `style` property, though they are still

package/lib/MasonryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}>\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * Computes the index and current length of the next available section for a specific base value,\n * based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to be used to evaluate\n *               the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be length if a new item were\n *          to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = (i + base) <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section lengths. Only the\n * first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any non-numerical values\n *               will be ignored and return value will be based on all sections. A `base` value will\n *               be clamped between 1 and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => (curr > out) ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (let i = 0; i < classList.length; i++) {\n    const c = classList[i]\n\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n  const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n  const imageTags = htmlString.match(regexImg) ?? []\n\n  const out: string[] = []\n\n  for (let i = 0; i < imageTags.length; i++) {\n    const tag = imageTags[i]\n    const src = tag.match(regexSrc)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n\n/**\n * This is a React component that arranges all of its immediate children in a masonry grid. Refrain\n * from assigning CSS styles to it via `className` or `style` property, though they are still\n * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be\n * in either vertical or horizontal orientation. The length of every child element *parallel to the\n * direction of the orientation* is automatically set according to the number of sections specified\n * for the grid. This means that in an horizontally oriented grid, the *width* of each child element\n * is automatically set, whereas in a vertically oriented grid the *height* of each child element is\n * automatically set. Additionally, the *number of sections* corresponds to the maximum the number\n * of child elements present in the direction that is parallel to the orientation of the grid.\n * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,\n * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.\n */\nexport default function MasonryGrid({\n  areSectionsAligned = false,\n  children,\n  horizontalSpacing= 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  style = {},\n  verticalSpacing = 0,\n  ...props\n}: Props) {\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(rootRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(rootRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = rootRef.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const children = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${(horizontalSpacing * (numSections - 1) / numSections) * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${(horizontalSpacing * (numSections - 1) / numSections) * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && ((colIdx + base) === numSections)) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (let i = 0; i < children.length; i++) {\n          const child = children[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${(verticalSpacing * (numSections - 1) / numSections) * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${(verticalSpacing * (numSections - 1) / numSections) * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && ((rowIdx + base) === numSections)) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (let i = 0; i < children.length; i++) {\n          const child = children[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(rootRef, {\n    onResize: maxSize => {\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(rootRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  return (\n    <StyledRoot\n      {...props}\n      ref={rootRef}\n      orientation={orientation}\n      style={{\n        ...style,\n        flex: '0 0 auto',\n        minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? `${minHeight}px` : ''),\n        minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? `${minWidth}px` : ''),\n        padding: '0',\n      }}\n    >\n      {children}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.div<{\n  orientation: Props['orientation']\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? 'auto' : '100%'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n`\n"]}
+{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * Computes the index and current length of the next available section for a specific base value,\n * based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to be used to evaluate\n *               the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be length if a new item were\n *          to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = (i + base) <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section lengths. Only the\n * first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any non-numerical values\n *               will be ignored and return value will be based on all sections. A `base` value will\n *               be clamped between 1 and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => (curr > out) ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (let i = 0; i < classList.length; i++) {\n    const c = classList[i]\n\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n  const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n  const imageTags = htmlString.match(regexImg) ?? []\n\n  const out: string[] = []\n\n  for (let i = 0; i < imageTags.length; i++) {\n    const tag = imageTags[i]\n    const src = tag.match(regexSrc)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n\n/**\n * This is a React component that arranges all of its immediate children in a masonry grid. Refrain\n * from assigning CSS styles to it via `className` or `style` property, though they are still\n * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be\n * in either vertical or horizontal orientation. The length of every child element *parallel to the\n * direction of the orientation* is automatically set according to the number of sections specified\n * for the grid. This means that in an horizontally oriented grid, the *width* of each child element\n * is automatically set, whereas in a vertically oriented grid the *height* of each child element is\n * automatically set. Additionally, the *number of sections* corresponds to the maximum the number\n * of child elements present in the direction that is parallel to the orientation of the grid.\n * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,\n * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.\n */\nexport default function MasonryGrid({\n  areSectionsAligned = false,\n  children,\n  horizontalSpacing= 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  style = {},\n  verticalSpacing = 0,\n  ...props\n}: Props) {\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(rootRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(rootRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = rootRef.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const children = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${(horizontalSpacing * (numSections - 1) / numSections) * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${(horizontalSpacing * (numSections - 1) / numSections) * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && ((colIdx + base) === numSections)) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (let i = 0; i < children.length; i++) {\n          const child = children[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${(verticalSpacing * (numSections - 1) / numSections) * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${(verticalSpacing * (numSections - 1) / numSections) * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && ((rowIdx + base) === numSections)) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (let i = 0; i < children.length; i++) {\n          const child = children[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(rootRef, {\n    onResize: maxSize => {\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(rootRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  return (\n    <StyledRoot\n      {...props}\n      ref={rootRef}\n      orientation={orientation}\n      style={{\n        ...style,\n        flex: '0 0 auto',\n        minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? `${minHeight}px` : ''),\n        minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? `${minWidth}px` : ''),\n        padding: '0',\n      }}\n    >\n      {children}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.div<{\n  orientation: Props['orientation']\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? 'auto' : '100%'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n`\n"]}

package/lib/Repeat.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export declare type Props = {
-    children: JSX.Element | ((index: number) => JSX.Element);
+    children: ReactNode | ((index: number) => ReactNode);
     count?: number;
 };
 /**

package/lib/Repeat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAOvC;;GAEG;AACH,SAAwB,MAAM,CAAC,EAGvB;QAFN,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA;IAER,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC/C,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAbD,yBAaC","sourcesContent":["import React, { Fragment } from 'react'\n\nexport type Props = {\n  children: JSX.Element | ((index: number) => JSX.Element)\n  count?: number\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each a unique key.\n */\nexport default function Repeat({\n  count = 1,\n  children,\n}: Props) {\n  return (\n    <>\n      {[...Array(count)].map((_, i) => (\n        <Fragment key={`element-${i}`}>\n          {typeof children === 'function' ? children(i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAOlD;;GAEG;AACH,SAAwB,MAAM,CAAC,EAGvB;QAFN,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA;IAER,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC/C,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAbD,yBAaC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type Props = {\n  children: ReactNode | ((index: number) => ReactNode)\n  count?: number\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each a unique key.\n */\nexport default function Repeat({\n  count = 1,\n  children,\n}: Props) {\n  return (\n    <>\n      {[...Array(count)].map((_, i) => (\n        <Fragment key={`element-${i}`}>\n          {typeof children === 'function' ? children(i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/SelectableButton.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLButtonElement> & {
-    children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => JSX.Element;
+import { HTMLAttributes, ReactNode } from 'react';
+export declare type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+    children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
     isDeselectable?: boolean;
     isDisabled?: boolean;
     isSelected?: boolean;

package/lib/SelectableButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkE;AAClE,wEAAsC;AAYtC,SAAwB,gBAAgB,CAAC,EASjC;;IARN,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR+B,6FASxC,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,8BAAC,UAAU,eAAK,KAAK,IAAE,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,CAAC,UAAU,IAAI,CAAC,cAAc,CAAC,KAC7G,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAC5D,CACd,CAAA;AACH,CAAC;AAnCD,mCAmCC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,wHAAA,qDAI/B,IAAA,CAAA","sourcesContent":["import React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => JSX.Element\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default function SelectableButton({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}: Props) {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <StyledRoot {...props} onClick={() => toggleSelection()} disabled={isDisabled || (isSelected && !isDeselectable)}>\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.button`\n  &[disabled] {\n    pointer-events: none;\n  }\n`\n"]}
+{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6E;AAC7E,wEAAsC;AAYtC,SAAwB,gBAAgB,CAAC,EASjC;;IARN,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR+B,6FASxC,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,8BAAC,UAAU,eAAK,KAAK,IAAE,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,CAAC,UAAU,IAAI,CAAC,cAAc,CAAC,KAC7G,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAC5D,CACd,CAAA;AACH,CAAC;AAnCD,mCAmCC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,wHAAA,qDAI/B,IAAA,CAAA","sourcesContent":["import React, { HTMLAttributes, ReactNode, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default function SelectableButton({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}: Props) {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <StyledRoot {...props} onClick={() => toggleSelection()} disabled={isDisabled || (isSelected && !isDeselectable)}>\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.button`\n  &[disabled] {\n    pointer-events: none;\n  }\n`\n"]}

package/lib/SwipeContainer.d.ts

@@ -1,12 +1,12 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-declare type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+import { HTMLAttributes } from 'react';
+declare type Props = HTMLAttributes<HTMLDivElement> & {
     isEnabled?: boolean;
     threshold?: number;
     onSwipeDown?: () => void;
     onSwipeLeft?: () => void;
     onSwipeRight?: () => void;
     onSwipeUp?: () => void;
-}>;
+};
 /**
  * An empty component with a backing `<div>` element that detects swipe gestures.
  */

package/lib/SwipeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["SwipeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useState } from 'react'\nimport { Point } from 'spase'\nimport styled from 'styled-components'\n\ntype Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  isEnabled?: boolean\n  threshold?: number\n  onSwipeDown?: () => void\n  onSwipeLeft?: () => void\n  onSwipeRight?: () => void\n  onSwipeUp?: () => void\n}>\n\n/**\n * An empty component with a backing `<div>` element that detects swipe gestures.\n */\nexport default function SwipeContainer({\n  children,\n  isEnabled = true,\n  threshold = 0.5,\n  onSwipeDown,\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  ...props\n}: Props) {\n  const [dragStartPosition, setDragStartPosition] = useState<Point | undefined>(undefined)\n  const [dragEndPosition, setDragEndPosition] = useState<Point | undefined>(undefined)\n  const [dragStartTime, setDragStartTime] = useState(NaN)\n\n  const onDragStart = (x: number, y: number) => {\n    if (isNaN(x) || isNaN(y)) return onDragCancel()\n    setDragStartPosition(new Point([x, y]))\n  }\n\n  const onDragMove = (x: number, y: number) => {\n    const startPosition = dragStartPosition\n\n    if (startPosition === undefined) return\n\n    const hasMovement = startPosition.x !== x || startPosition.y !== y\n    const hasStartTime = !isNaN(dragStartTime)\n\n    if (!hasMovement) return\n\n    if (!hasStartTime) setDragStartTime(Date.now())\n\n    setDragEndPosition(new Point([x, y]))\n  }\n\n  const onDragEnd = () => {\n    const time = dragStartTime\n    const startPosition = dragStartPosition\n    const endPosition = dragEndPosition\n\n    if (isNaN(time) || startPosition === undefined || endPosition === undefined) return\n\n    const dt = Date.now() - time\n    const dx = endPosition.x - startPosition.x\n    const dy = endPosition.y - endPosition.y\n    const vx = dx / dt\n    const vy = dy / dt\n\n    if (isEnabled) {\n      if (Math.abs(vx) >= threshold && Math.abs(vx) > Math.abs(vy)) {\n        if (vx > 0) {\n          onSwipeRight?.()\n        }\n        else {\n          onSwipeLeft?.()\n        }\n      }\n      else if (Math.abs(vy) >= threshold && Math.abs(vy) > Math.abs(vx)) {\n        if (vy > 0) {\n          onSwipeDown?.()\n        }\n        else {\n          onSwipeUp?.()\n        }\n      }\n    }\n\n    onDragCancel()\n  }\n\n  const onDragCancel = () => {\n    setDragStartPosition(undefined)\n    setDragEndPosition(undefined)\n    setDragStartTime(NaN)\n  }\n\n  return (\n    <StyledRoot\n      {...props}\n      onTouchStart={event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchMove={event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchEnd={() => onDragEnd()}\n      onMouseDown={event => onDragStart(event.clientX, event.clientY)}\n      onMouseMove={event => onDragMove(event.clientX, event.clientY)}\n      onMouseUp={() => onDragEnd()}\n      onMouseLeave={() => onDragCancel()}\n    >\n      {children}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.div`\n\n`\n"]}
+{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["SwipeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useState } from 'react'\nimport { Point } from 'spase'\nimport styled from 'styled-components'\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  isEnabled?: boolean\n  threshold?: number\n  onSwipeDown?: () => void\n  onSwipeLeft?: () => void\n  onSwipeRight?: () => void\n  onSwipeUp?: () => void\n}\n\n/**\n * An empty component with a backing `<div>` element that detects swipe gestures.\n */\nexport default function SwipeContainer({\n  children,\n  isEnabled = true,\n  threshold = 0.5,\n  onSwipeDown,\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  ...props\n}: Props) {\n  const [dragStartPosition, setDragStartPosition] = useState<Point | undefined>(undefined)\n  const [dragEndPosition, setDragEndPosition] = useState<Point | undefined>(undefined)\n  const [dragStartTime, setDragStartTime] = useState(NaN)\n\n  const onDragStart = (x: number, y: number) => {\n    if (isNaN(x) || isNaN(y)) return onDragCancel()\n    setDragStartPosition(new Point([x, y]))\n  }\n\n  const onDragMove = (x: number, y: number) => {\n    const startPosition = dragStartPosition\n\n    if (startPosition === undefined) return\n\n    const hasMovement = startPosition.x !== x || startPosition.y !== y\n    const hasStartTime = !isNaN(dragStartTime)\n\n    if (!hasMovement) return\n\n    if (!hasStartTime) setDragStartTime(Date.now())\n\n    setDragEndPosition(new Point([x, y]))\n  }\n\n  const onDragEnd = () => {\n    const time = dragStartTime\n    const startPosition = dragStartPosition\n    const endPosition = dragEndPosition\n\n    if (isNaN(time) || startPosition === undefined || endPosition === undefined) return\n\n    const dt = Date.now() - time\n    const dx = endPosition.x - startPosition.x\n    const dy = endPosition.y - endPosition.y\n    const vx = dx / dt\n    const vy = dy / dt\n\n    if (isEnabled) {\n      if (Math.abs(vx) >= threshold && Math.abs(vx) > Math.abs(vy)) {\n        if (vx > 0) {\n          onSwipeRight?.()\n        }\n        else {\n          onSwipeLeft?.()\n        }\n      }\n      else if (Math.abs(vy) >= threshold && Math.abs(vy) > Math.abs(vx)) {\n        if (vy > 0) {\n          onSwipeDown?.()\n        }\n        else {\n          onSwipeUp?.()\n        }\n      }\n    }\n\n    onDragCancel()\n  }\n\n  const onDragCancel = () => {\n    setDragStartPosition(undefined)\n    setDragEndPosition(undefined)\n    setDragStartTime(NaN)\n  }\n\n  return (\n    <StyledRoot\n      {...props}\n      onTouchStart={event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchMove={event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchEnd={() => onDragEnd()}\n      onMouseDown={event => onDragStart(event.clientX, event.clientY)}\n      onMouseMove={event => onDragMove(event.clientX, event.clientY)}\n      onMouseUp={() => onDragEnd()}\n      onMouseLeave={() => onDragCancel()}\n    >\n      {children}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.div`\n\n`\n"]}

package/lib/WithTooltip.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import { CSSProp } from 'styled-components';
-export declare type Props = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export declare type Props = HTMLAttributes<HTMLElement> & {
     /**
      * The height of the arrow. The width (longest edge) of the arrow is always twice its height.
      */

package/lib/WithTooltip.js

@@ -72,6 +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 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,13 +128,14 @@ 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 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));
-    }, []);
+    }, [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, PropsWithChildren, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\n\nexport type Props = PropsWithChildren<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\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  }, [])\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/lib/hooks/useViewportSize.d.ts

@@ -0,0 +1,7 @@
+import { Size } from 'spase';
+/**
+ * Hook for returning the size of the viewport whenever it changes.
+ *
+ * @returns The most current viewport size.
+ */
+export default function useViewportSize(): Size;

package/lib/hooks/useViewportSize.js

@@ -0,0 +1,40 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var spase_1 = require("spase");
+/**
+ * Hook for returning the size of the viewport whenever it changes.
+ *
+ * @returns The most current viewport size.
+ */
+function useViewportSize() {
+    var _a = __read((0, react_1.useState)(new spase_1.Size()), 2), size = _a[0], setSize = _a[1];
+    (0, react_1.useEffect)(function () {
+        function onViewportResize() {
+            var viewportSize = spase_1.Rect.fromViewport().size;
+            setSize(viewportSize);
+        }
+        window.addEventListener('resize', onViewportResize);
+        onViewportResize();
+        return function () { return window.removeEventListener('resize', onViewportResize); };
+    }, []);
+    return size;
+}
+exports.default = useViewportSize;
+//# sourceMappingURL=useViewportSize.js.map

package/lib/hooks/useViewportSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportSize.js","sourceRoot":"/","sources":["hooks/useViewportSize.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAA2C;AAC3C,+BAAkC;AAElC;;;;GAIG;AACH,SAAwB,eAAe;IAC/B,IAAA,KAAA,OAAkB,IAAA,gBAAQ,EAAO,IAAI,YAAI,EAAE,CAAC,IAAA,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAA;IAElD,IAAA,iBAAS,EAAC;QACR,SAAS,gBAAgB;YACvB,IAAM,YAAY,GAAG,YAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAA;YAC7C,OAAO,CAAC,YAAY,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAEnD,gBAAgB,EAAE,CAAA;QAElB,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,EAAtD,CAAsD,CAAA;IACrE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC;AAjBD,kCAiBC","sourcesContent":["import { useEffect, useState } from 'react'\nimport { Rect, Size } from 'spase'\n\n/**\n * Hook for returning the size of the viewport whenever it changes.\n *\n * @returns The most current viewport size.\n */\nexport default function useViewportSize() {\n  const [size, setSize] = useState<Size>(new Size())\n\n  useEffect(() => {\n    function onViewportResize() {\n      const viewportSize = Rect.fromViewport().size\n      setSize(viewportSize)\n    }\n\n    window.addEventListener('resize', onViewportResize)\n\n    onViewportResize()\n\n    return () => window.removeEventListener('resize', onViewportResize)\n  }, [])\n\n  return size\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.60.0",
+  "version": "0.63.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -29,50 +29,47 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.8",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
+    "@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.8",
+    "@babel/runtime": "^7.17.9",
     "@types/debug": "^4.1.7",
     "@types/html-webpack-plugin": "^3.2.6",
-    "@types/lodash": "^4.14.181",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/lodash": "^4.14.182",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
     "@types/react-transition-group": "^4.4.4",
-    "@types/styled-components": "^5.1.24",
+    "@types/styled-components": "^5.1.25",
     "@types/webpack": "^5.28.0",
-    "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-styled-components": "^2.0.6",
+    "@types/webpack-env": "^1.16.4",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-styled-components": "^2.0.7",
     "concurrently": "^7.1.0",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
-    "eslint": "^8.12.0",
+    "eslint": "^8.15.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "promptu": "^5.7.0",
+    "promptu": "^5.8.0",
     "raw-loader": "^4.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-is": "^18.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.5",
-    "ts-loader": "^9.2.8",
+    "ts-loader": "^9.3.0",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.3",
+    "typescript": "^4.6.4",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
-    "webpack": "^5.71.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
     "classnames": "^2.3.1",
@@ -84,7 +81,7 @@
     "spase": "^6.3.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
+    "react": "^18.1.0",
     "styled-components": "^5.3.5"
   },
   "optionalDependencies": {