etudes 0.50.0 → 0.51.0

package/lib/BurgerButton.js

@@ -67,7 +67,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Group_1 = __importDefault(require("./Group"));
+var Repeat_1 = __importDefault(require("./Repeat"));
 function BurgerButton(_a) {
     var _b = _a.isActive, externalIsActive = _b === void 0 ? false : _b, _c = _a.isDoubleJointed, isDoubleJointed = _c === void 0 ? false : _c, _d = _a.isLastBarHalfWidth, isLastBarHalfWidth = _d === void 0 ? false : _d, _e = _a.height, height = _e === void 0 ? 20 : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 20 : _g, _h = _a.tintColor, tintColor = _h === void 0 ? '#000' : _h, _j = _a.transitionDuration, transitionDuration = _j === void 0 ? 200 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, cssBar = _a.cssBar, props = __rest(_a, ["isActive", "isDoubleJointed", "isLastBarHalfWidth", "height", "thickness", "width", "tintColor", "transitionDuration", "onActivate", "onDeactivate", "cssBar"]);
     var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
@@ -85,9 +85,9 @@ function BurgerButton(_a) {
         }
     }, [isActive]);
     return (react_1.default.createElement(StyledRoot, __assign({ width: width, height: height, thickness: thickness, onClick: function () { return setIsActive(!isActive); } }, props),
-        react_1.default.createElement(Group_1.default, { count: isDoubleJointed ? 2 : 1 },
+        react_1.default.createElement(Repeat_1.default, { count: isDoubleJointed ? 2 : 1 },
             react_1.default.createElement(StyledJoint, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), height: height, isLastBarHalfWidth: isLastBarHalfWidth, thickness: thickness, width: width },
-                react_1.default.createElement(Group_1.default, { count: 3 },
+                react_1.default.createElement(Repeat_1.default, { count: 3 },
                     react_1.default.createElement(StyledBar, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), style: { height: "".concat(thickness, "px") }, css: cssBar }))))));
 }
 exports.default = BurgerButton;

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled, { CSSProp } from 'styled-components'\nimport Group from './Group'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  height?: number\n  thickness?: number\n  width?: number\n  tintColor?: string\n  transitionDuration?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n  cssBar?: CSSProp<any>\n}\n\nexport default function BurgerButton({\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  height = 20,\n  thickness = 2,\n  width = 20,\n  tintColor = '#000',\n  transitionDuration = 200,\n  onActivate,\n  onDeactivate,\n  cssBar,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)} {...props}>\n      <Group count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Group count={3}>\n            <StyledBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }} css={cssBar}/>\n          </Group>\n        </StyledJoint>\n      </Group>\n    </StyledRoot>\n  )\n}\n\nconst StyledBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ${props => props.css}\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${StyledBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${StyledBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${StyledBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${StyledBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${StyledBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled, { CSSProp } from 'styled-components'\nimport Repeat from './Repeat'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  height?: number\n  thickness?: number\n  width?: number\n  tintColor?: string\n  transitionDuration?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n  cssBar?: CSSProp<any>\n}\n\nexport default function BurgerButton({\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  height = 20,\n  thickness = 2,\n  width = 20,\n  tintColor = '#000',\n  transitionDuration = 200,\n  onActivate,\n  onDeactivate,\n  cssBar,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)} {...props}>\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Repeat count={3}>\n            <StyledBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }} css={cssBar}/>\n          </Repeat>\n        </StyledJoint>\n      </Repeat>\n    </StyledRoot>\n  )\n}\n\nconst StyledBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ${props => props.css}\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${StyledBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${StyledBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${StyledBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${StyledBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${StyledBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}

package/lib/ExtractChild.d.ts

@@ -2,4 +2,8 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     children?: React.ReactNode;
 } & 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.
+ */
 export default _default;

package/lib/ExtractChild.js

@@ -47,9 +47,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
 var lodash_1 = __importDefault(require("lodash"));
 var react_1 = __importStar(require("react"));
+/**
+ * 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.
+ */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     if (lodash_1.default.isArray(children)) {
+        /* eslint-disable-next-line no-console */
         console.error("[etudes::ExtractChild] Only one child is expected, but found ".concat(children.length, ". Only the first child is extracted while the rest are discarded."));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child, idx) {

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,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,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\ntype Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\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,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\ntype 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"]}

package/lib/ExtractChildren.d.ts

@@ -1,2 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+/**
+ * Extracts all children of a parent component into its own component.
+ */
 export default function ExtractChildren({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>): JSX.Element;

package/lib/ExtractChildren.js

@@ -46,6 +46,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
+/**
+ * Extracts all children of a parent component into its own component.
+ */
 function ExtractChildren(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child, idx) {

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAwG;AAExG,SAAwB,eAAe,CAAC,EAAiF;IAA/E,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA/B,yBAAiC,CAAF;IACrE,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;AAZD,kCAYC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport default function ExtractChildren({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) {\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,6CAAwG;AAExG;;GAEG;AACH,SAAwB,eAAe,CAAC,EAAiF;IAA/E,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA/B,yBAAiC,CAAF;IACrE,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;AAZD,kCAYC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) {\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/Repeat.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    children: JSX.Element | ((index: number) => JSX.Element);
+    count?: number;
+};
+/**
+ * A tag-less component that repeats its children, automatically assigning each a unique key.
+ */
+export default function Repeat({ count, children, }: Props): JSX.Element;
+export {};

package/lib/{Group.js → Repeat.js}

@@ -45,9 +45,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-function Group(_a) {
+/**
+ * A tag-less component that repeats its children, automatically assigning each a unique key.
+ */
+function Repeat(_a) {
     var _b = _a.count, count = _b === void 0 ? 1 : _b, children = _a.children;
     return (react_1.default.createElement(react_1.default.Fragment, null, __spreadArray([], __read(Array(count)), false).map(function (_, i) { return (react_1.default.createElement(react_1.Fragment, { key: "element-".concat(i) }, typeof children === 'function' ? children(i) : children)); })));
 }
-exports.default = Group;
-//# sourceMappingURL=Group.js.map
+exports.default = Repeat;
+//# sourceMappingURL=Repeat.js.map

package/lib/Repeat.js.map

@@ -0,0 +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\ntype 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"]}

package/lib/SelectableButton.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+export declare type Props = HTMLAttributes<HTMLButtonElement> & {
+    children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => JSX.Element;
+    isDeselectable?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    label?: string;
+    onDeselect?: () => void;
+    onSelect?: () => void;
+};
+export default function SelectableButton({ children, isDeselectable, isDisabled, isSelected: externalIsSelected, label, onDeselect, onSelect, ...props }: Props): JSX.Element;

package/lib/SelectableButton.js

@@ -0,0 +1,101 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function SelectableButton(_a) {
+    var _b;
+    var children = _a.children, _c = _a.isDeselectable, isDeselectable = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isSelected, externalIsSelected = _e === void 0 ? false : _e, label = _a.label, onDeselect = _a.onDeselect, onSelect = _a.onSelect, props = __rest(_a, ["children", "isDeselectable", "isDisabled", "isSelected", "label", "onDeselect", "onSelect"]);
+    var _f = __read((0, react_1.useState)(externalIsSelected), 2), isSelected = _f[0], setIsSelected = _f[1];
+    var toggleSelection = function () {
+        if (isDisabled)
+            return;
+        if (isSelected) {
+            if (!isDeselectable)
+                return;
+            setIsSelected(false);
+        }
+        else {
+            setIsSelected(true);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        setIsSelected(externalIsSelected);
+    }, [externalIsSelected]);
+    (0, react_1.useEffect)(function () {
+        if (isSelected) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        }
+        else {
+            onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect();
+        }
+    }, [isSelected]);
+    return (react_1.default.createElement(StyledRoot, __assign({}, props, { onClick: function () { return toggleSelection(); }, disabled: isDisabled || (isSelected && !isDeselectable) }), (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label));
+}
+exports.default = SelectableButton;
+var StyledRoot = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &[disabled] {\n    pointer-events: none;\n  }\n"], ["\n  &[disabled] {\n    pointer-events: none;\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=SelectableButton.js.map

package/lib/SelectableButton.js.map

@@ -0,0 +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;SACrB;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;SACpB;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,EAAE;YACd,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;aACI;YACH,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,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;AA1CD,mCA0CC;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    }\n    else {\n      setIsSelected(true)\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  useEffect(() => {\n    if (isSelected) {\n      onSelect?.()\n    }\n    else {\n      onDeselect?.()\n    }\n  }, [isSelected])\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/WithTooltip.js

@@ -70,7 +70,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var ExtractChild_1 = __importDefault(require("./ExtractChild"));
 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 computePosition = function (target, threshold) {
+    var computeAlignment = function (target, threshold) {
         var vrect = spase_1.Rect.fromViewport();
         var rect = spase_1.Rect.intersecting(target);
         if (rect) {
@@ -117,24 +117,24 @@ function WithTooltip(_a) {
         return new spase_1.Size([width, height]);
     };
     var onMouseOver = function (event) {
-        setPosition(computePosition(event.currentTarget, threshold));
+        setAlignment(computeAlignment(event.currentTarget, threshold));
         setTextSize(computeTextSize(event.currentTarget, threshold));
     };
     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), position = _j[0], setPosition = _j[1];
+    var _j = __read((0, react_1.useState)(undefined), 2), alignment = _j[0], setAlignment = _j[1];
     var childRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var childNode = childRef.current;
         if (!childNode)
             return;
-        setPosition(computePosition(childNode, threshold));
+        setAlignment(computeAlignment(childNode, threshold));
         setTextSize(computeTextSize(childNode, threshold));
     }, []);
-    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); }, position: position, textColor: textColor, textSize: textSize }, props)));
+    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;
-function makeDisplacementCSS(position, arrowHeight, gap) {
-    switch (position) {
+function makeDisplacementCSS(alignment, arrowHeight, gap) {
+    switch (alignment) {
         case 'tl': return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["top: ", "px; left: calc(50% + ", "px);"], ["top: ", "px; left: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
         case 'tc': return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["top: ", "px; left: 50%;"], ["top: ", "px; left: 50%;"])), -arrowHeight);
         case 'tr': return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["top: ", "px; right: calc(50% + ", "px);"], ["top: ", "px; right: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
@@ -145,8 +145,8 @@ function makeDisplacementCSS(position, arrowHeight, gap) {
         case 'br': return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["bottom: ", "px; right: calc(50% + ", "px);"], ["bottom: ", "px; right: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
     }
 }
-function makeDialogPositionCSS(position, arrowHeight, gap) {
-    switch (position) {
+function makeDialogPositionCSS(alignment, arrowHeight, gap) {
+    switch (alignment) {
         case 'tl': return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), calc(-100% - ", "px), 0);"], ["transform: translate3d(calc(-100% - ", "px), calc(-100% - ", "px), 0);"])), gap, gap);
         case 'tc': return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["transform: translate3d(-50%, calc(-100% - ", "px), 0);"], ["transform: translate3d(-50%, calc(-100% - ", "px), 0);"])), gap);
         case 'tr': return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), calc(-100% - ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px), calc(-100% - ", "px), 0);"])), gap, gap);
@@ -157,9 +157,9 @@ function makeDialogPositionCSS(position, arrowHeight, gap) {
         case 'br': return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), calc(100% + ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px), calc(100% + ", "px), 0);"])), gap, gap);
     }
 }
-function makeArrowPositionCSS(position, arrowHeight, gap, color) {
+function makeArrowPositionCSS(alignment, arrowHeight, gap, color) {
     return (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", "\n\n    ", "\n  "], ["\n    ", "\n\n    ", "\n  "])), function () {
-        switch (position) {
+        switch (alignment) {
             case 'tl': return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
             case 'tc': return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
             case 'tr': return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
@@ -170,7 +170,7 @@ function makeArrowPositionCSS(position, arrowHeight, gap, color) {
             case 'br': return (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["border-color: transparent transparent ", " transparent;"], ["border-color: transparent transparent ", " transparent;"])), color);
         }
     }, function () {
-        switch (position) {
+        switch (alignment) {
             case 'tl': return (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% - ", "px), 0);"], ["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% - ", "px), 0);"])), gap, arrowHeight * 3, gap);
             case 'tc': return (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["transform: translate3d(-50%, calc(0% - ", "px), 0);"], ["transform: translate3d(-50%, calc(0% - ", "px), 0);"])), gap);
             case 'tr': return (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% - ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% - ", "px), 0);"])), gap, arrowHeight, gap);
@@ -182,6 +182,6 @@ function makeArrowPositionCSS(position, arrowHeight, gap, color) {
         }
     });
 }
-var StyledRoot = (0, styled_components_1.default)(ExtractChild_1.default)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "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    ", "\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    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\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    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "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    ", "\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    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\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    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"])), function (props) { return props.arrowHeight; }, function (props) { return props.position && props.textSize && (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), makeDisplacementCSS(props.position, props.arrowHeight, props.gap), makeArrowPositionCSS(props.position, props.arrowHeight, props.gap, props.backgroundColor), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.cssDialog; }, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) { return props.hint; }, function (props) { return props.position && props.textSize && (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "], ["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "])), props.textSize.width > 0 ? "".concat(props.textSize.width, "px") : 'auto', makeDisplacementCSS(props.position, props.arrowHeight, props.gap), makeDialogPositionCSS(props.position, props.arrowHeight, props.gap), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'; });
+var StyledRoot = (0, styled_components_1.default)(ExtractChild_1.default)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "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    ", "\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    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\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    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "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    ", "\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    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\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    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"])), function (props) { return props.arrowHeight; }, function (props) { return props.alignment && props.textSize && (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap), makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.cssDialog; }, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) { return props.hint; }, function (props) { return props.alignment && props.textSize && (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "], ["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "])), props.textSize.width > 0 ? "".concat(props.textSize.width, "px") : 'auto', makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap), makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36;
 //# sourceMappingURL=WithTooltip.js.map

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\ntype 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 Position = '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 computePosition = (target: Element, threshold: number): Position => {\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    setPosition(computePosition(event.currentTarget, threshold))\n    setTextSize(computeTextSize(event.currentTarget, threshold))\n  }\n\n  const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n  const [position, setPosition] = useState<Position | undefined>(undefined)\n\n  const childRef = useRef<HTMLElement>(null)\n\n  useEffect(() => {\n    const childNode = childRef.current\n    if (!childNode) return\n    setPosition(computePosition(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      position={position}\n      textColor={textColor}\n      textSize={textSize}\n      {...props}\n    />\n  )\n}\n\nfunction makeDisplacementCSS(position: Position, arrowHeight: number, gap: number): CSSProp {\n  switch (position) {\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(position: Position, arrowHeight: number, gap: number): CSSProp {\n  switch (position) {\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(position: Position, arrowHeight: number, gap: number, color: string): CSSProp {\n  return css`\n    ${() => {\n    switch (position) {\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 (position) {\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  position?: Position\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.position && props.textSize && css`\n      ${makeDisplacementCSS(props.position, props.arrowHeight, props.gap)}\n      ${makeArrowPositionCSS(props.position, 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.position && props.textSize && css`\n      width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n      ${makeDisplacementCSS(props.position, props.arrowHeight, props.gap)}\n      ${makeDialogPositionCSS(props.position, 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, PropsWithChildren, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\n\ntype 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"]}

package/lib/hooks/useDocumentTitle.d.ts

@@ -1,2 +1,8 @@
 import { DependencyList } from 'react';
+/**
+ * Hook for adding document title. By default this hook is dependent on the `title` only.
+ *
+ * @param title - The document title.
+ * @param deps - Additional dependencies.
+ */
 export default function useDocumentTitle(title: string, deps?: DependencyList): void;

package/lib/hooks/useDocumentTitle.js

@@ -26,6 +26,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+/**
+ * Hook for adding document title. By default this hook is dependent on the `title` only.
+ *
+ * @param title - The document title.
+ * @param deps - Additional dependencies.
+ */
 function useDocumentTitle(title, deps) {
     (0, react_1.useEffect)(function () {
         document.title = title;

package/lib/hooks/useDocumentTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDocumentTitle.js","sourceRoot":"/","sources":["hooks/useDocumentTitle.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiD;AAEjD,SAAwB,gBAAgB,CAAC,KAAa,EAAE,IAAqB;IAC3E,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACxB,CAAC,iBAAG,KAAK,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;AAClC,CAAC;AAJD,mCAIC","sourcesContent":["import { DependencyList, useEffect } from 'react'\n\nexport default function useDocumentTitle(title: string, deps?: DependencyList) {\n  useEffect(() => {\n    document.title = title\n  }, [title, ...deps ? deps : []])\n}\n"]}
+{"version":3,"file":"useDocumentTitle.js","sourceRoot":"/","sources":["hooks/useDocumentTitle.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiD;AAEjD;;;;;GAKG;AACH,SAAwB,gBAAgB,CAAC,KAAa,EAAE,IAAqB;IAC3E,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACxB,CAAC,iBAAG,KAAK,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;AAClC,CAAC;AAJD,mCAIC","sourcesContent":["import { DependencyList, useEffect } from 'react'\n\n/**\n * Hook for adding document title. By default this hook is dependent on the `title` only.\n *\n * @param title - The document title.\n * @param deps - Additional dependencies.\n */\nexport default function useDocumentTitle(title: string, deps?: DependencyList) {\n  useEffect(() => {\n    document.title = title\n  }, [title, ...deps ? deps : []])\n}\n"]}

package/lib/hooks/useInterval.d.ts

@@ -1 +1,16 @@
-export default function useInterval(handler: () => void, timeout?: number): void;
+declare type Options = {
+    /**
+     * Specifies if the handler should be invoked initially (as opposed to waiting for the specified
+     * interval for the initial invocation).
+     */
+    shouldInvokeInitially?: boolean;
+};
+/**
+ * Hoook for invoking a method repeatedly on every set interval.
+ *
+ * @param handler - The method to invoke on every interval.
+ * @param timeout - Time (in milliseconds) between each invocation.
+ * @param options - See {@link Options}.
+ */
+export default function useInterval(handler: () => void, timeout?: number, { shouldInvokeInitially }?: Options): void;
+export {};

package/lib/hooks/useInterval.js

@@ -1,14 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-function useInterval(handler, timeout) {
+/**
+ * Hoook for invoking a method repeatedly on every set interval.
+ *
+ * @param handler - The method to invoke on every interval.
+ * @param timeout - Time (in milliseconds) between each invocation.
+ * @param options - See {@link Options}.
+ */
+function useInterval(handler, timeout, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.shouldInvokeInitially, shouldInvokeInitially = _c === void 0 ? false : _c;
     var handlerRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(function () {
         handlerRef.current = handler;
     }, [handler]);
     (0, react_1.useEffect)(function () {
+        var _a;
         if (timeout === undefined)
             return;
+        if (shouldInvokeInitially === true)
+            (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef);
         var timer = window.setInterval(function () { var _a; return (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef); }, timeout);
         return function () { return clearInterval(timer); };
     }, [timeout]);

package/lib/hooks/useInterval.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterval.js","sourceRoot":"/","sources":["hooks/useInterval.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAEzC,SAAwB,WAAW,CAAC,OAAmB,EAAE,OAAgB;IACvE,IAAM,UAAU,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAA;IAE9D,IAAA,iBAAS,EAAC;QACR,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,CAAY,CAAA,EAAA,EAAE,OAAO,CAAC,CAAA;QACvE,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAA;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC;AAbD,8BAaC","sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport default function useInterval(handler: () => void, timeout?: number) {\n  const handlerRef = useRef<(() => void) | undefined>(undefined)\n\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (timeout === undefined) return\n\n    const timer = window.setInterval(() => handlerRef.current?.(), timeout)\n    return () => clearInterval(timer)\n  }, [timeout])\n}\n"]}
+{"version":3,"file":"useInterval.js","sourceRoot":"/","sources":["hooks/useInterval.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAUzC;;;;;;GAMG;AACH,SAAwB,WAAW,CAAC,OAAmB,EAAE,OAAgB,EAAE,EAA+C;QAA/C,qBAA6C,EAAE,KAAA,EAA7C,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA;IACxG,IAAM,UAAU,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAA;IAE9D,IAAA,iBAAS,EAAC;QACR,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;;QACR,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,IAAI,qBAAqB,KAAK,IAAI;YAAE,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,CAAY,CAAA;QAC1D,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,CAAY,CAAA,EAAA,EAAE,OAAO,CAAC,CAAA;QACvE,OAAO,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAA;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC;AAdD,8BAcC","sourcesContent":["import { useEffect, useRef } from 'react'\n\ntype Options = {\n  /**\n   * Specifies if the handler should be invoked initially (as opposed to waiting for the specified\n   * interval for the initial invocation).\n   */\n  shouldInvokeInitially?: boolean\n}\n\n/**\n * Hoook for invoking a method repeatedly on every set interval.\n *\n * @param handler - The method to invoke on every interval.\n * @param timeout - Time (in milliseconds) between each invocation.\n * @param options - See {@link Options}.\n */\nexport default function useInterval(handler: () => void, timeout?: number, { shouldInvokeInitially = false }: Options = {}) {\n  const handlerRef = useRef<(() => void) | undefined>(undefined)\n\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    if (timeout === undefined) return\n\n    if (shouldInvokeInitially === true) handlerRef.current?.()\n    const timer = window.setInterval(() => handlerRef.current?.(), timeout)\n    return () => clearInterval(timer)\n  }, [timeout])\n}\n"]}

package/lib/hooks/useLoadImageEffect.d.ts

@@ -1,7 +1,15 @@
 import { DependencyList, Dispatch, SetStateAction } from 'react';
 import { Size } from 'spase';
 declare type ReturnedStates = {
+    /**
+     * A tuple consisting of a stateful value indicating if the image is loading, and a function that
+     * updates the loading state.
+     */
     isLoading: [boolean, Dispatch<SetStateAction<boolean>>];
+    /**
+     * A tuple consisting of a stateful value representing the size of the image, and a function that
+     * updates the size.
+     */
     imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>];
 };
 declare type Options = {
@@ -23,5 +31,14 @@ declare type Options = {
      */
     onImageSizeChange?: (size?: Size) => void;
 };
+/**
+ * Hook for preloading an image.
+ *
+ * @param src - The image source.
+ * @param options - See {@link Options}.
+ * @param deps - Additional dependencies.
+ *
+ * @returns See {@link ReturnedStates}.
+ */
 export default function useLoadImageEffect(src?: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }?: Options, deps?: DependencyList): ReturnedStates;
 export {};

package/lib/hooks/useLoadImageEffect.js

@@ -15,12 +15,30 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var spase_1 = require("spase");
 function getImageSize(imageElement) {
     return new spase_1.Size([imageElement.width, imageElement.height]);
 }
+/**
+ * Hook for preloading an image.
+ *
+ * @param src - The image source.
+ * @param options - See {@link Options}.
+ * @param deps - Additional dependencies.
+ *
+ * @returns See {@link ReturnedStates}.
+ */
 function useLoadImageEffect(src, _a, deps) {
     var _b = _a === void 0 ? {} : _a, onImageLoadComplete = _b.onImageLoadComplete, onImageLoadError = _b.onImageLoadError, onImageSizeChange = _b.onImageSizeChange;
     var imageLoadCompleteHandler = function (event) {
@@ -52,7 +70,7 @@ function useLoadImageEffect(src, _a, deps) {
             (_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('error', imageLoadErrorHandler);
             imageRef.current = undefined;
         };
-    }, [src]);
+    }, __spreadArray([src], __read(deps ? deps : []), false));
     (0, react_1.useEffect)(function () {
         onImageSizeChange === null || onImageSizeChange === void 0 ? void 0 : onImageSizeChange(imageSize);
     }, [imageSize]);

package/lib/hooks/useLoadImageEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadImageEffect.js","sourceRoot":"/","sources":["hooks/useLoadImageEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAA6F;AAC7F,+BAA4B;AA8B5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAwB,kBAAkB,CAAC,GAAY,EAAE,EAA0E,EAAE,IAAqB;QAAjG,qBAAwE,EAAE,KAAA,EAAxE,mBAAmB,yBAAA,EAAE,gBAAgB,sBAAA,EAAE,iBAAiB,uBAAA;IACjH,IAAM,wBAAwB,GAAG,UAAC,KAAY;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,aAAiC,CAAA;QAC5D,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;QAE5C,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,UAAC,KAAY;QACzC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAA;IACtB,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,IAAA,cAAM,EAA+B,SAAS,CAAC,CAAA;IAC1D,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAC1C,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAmB,SAAS,CAAC,IAAA,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAA;IAEvE,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAC9B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;QAC1B,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;QACnE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;QAEjE,OAAO;;YACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;YACvE,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;YACrE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAA;QAC9B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;QACL,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;KACrC,CAAA;AACH,CAAC;AA/CD,qCA+CC","sourcesContent":["import { DependencyList, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\n\ntype ReturnedStates = {\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. If there is no loaded image, the size is\n   * `undefined`.\n   *\n   * @param size - The original image size.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\nfunction getImageSize(imageElement: HTMLImageElement): Size {\n  return new Size([imageElement.width, imageElement.height])\n}\n\nexport default function useLoadImageEffect(src?: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }: Options = {}, deps?: DependencyList): ReturnedStates {\n  const imageLoadCompleteHandler = (event: Event) => {\n    const imageElement = event.currentTarget as HTMLImageElement\n    const imageSize = getImageSize(imageElement)\n\n    setIsLoading(false)\n    setImageSize(imageSize)\n\n    onImageLoadComplete?.(imageElement)\n  }\n\n  const imageLoadErrorHandler = (event: Event) => {\n    setIsLoading(false)\n    setImageSize(undefined)\n\n    onImageLoadError?.()\n  }\n\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n\n  useEffect(() => {\n    if (!src) return\n\n    setIsLoading(true)\n\n    imageRef.current = new Image()\n    imageRef.current.src = src\n    imageRef.current.addEventListener('load', imageLoadCompleteHandler)\n    imageRef.current.addEventListener('error', imageLoadErrorHandler)\n\n    return () => {\n      imageRef.current?.removeEventListener('load', imageLoadCompleteHandler)\n      imageRef.current?.removeEventListener('error', imageLoadErrorHandler)\n      imageRef.current = undefined\n    }\n  }, [src])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize])\n\n  return {\n    isLoading: [isLoading, setIsLoading],\n    imageSize: [imageSize, setImageSize],\n  }\n}\n"]}
+{"version":3,"file":"useLoadImageEffect.js","sourceRoot":"/","sources":["hooks/useLoadImageEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA6F;AAC7F,+BAA4B;AAsC5B,SAAS,YAAY,CAAC,YAA8B;IAClD,OAAO,IAAI,YAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;;;;GAQG;AACH,SAAwB,kBAAkB,CAAC,GAAY,EAAE,EAA0E,EAAE,IAAqB;QAAjG,qBAAwE,EAAE,KAAA,EAAxE,mBAAmB,yBAAA,EAAE,gBAAgB,sBAAA,EAAE,iBAAiB,uBAAA;IACjH,IAAM,wBAAwB,GAAG,UAAC,KAAY;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,aAAiC,CAAA;QAC5D,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;QAE5C,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,YAAY,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,IAAM,qBAAqB,GAAG,UAAC,KAAY;QACzC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,SAAS,CAAC,CAAA;QAEvB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAA;IACtB,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,IAAA,cAAM,EAA+B,SAAS,CAAC,CAAA;IAC1D,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAC1C,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAmB,SAAS,CAAC,IAAA,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAA;IAEvE,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAC9B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAA;QAC1B,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;QACnE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;QAEjE,OAAO;;YACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;YACvE,MAAA,QAAQ,CAAC,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAA;YACrE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAA;QAC9B,CAAC,CAAA;IACH,CAAC,iBAAG,GAAG,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAE9B,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;QACL,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,SAAS,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;KACrC,CAAA;AACH,CAAC;AA/CD,qCA+CC","sourcesContent":["import { DependencyList, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\n\ntype ReturnedStates = {\n  /**\n   * A tuple consisting of a stateful value indicating if the image is loading, and a function that\n   * updates the loading state.\n   */\n  isLoading: [boolean, Dispatch<SetStateAction<boolean>>]\n\n  /**\n   * A tuple consisting of a stateful value representing the size of the image, and a function that\n   * updates the size.\n   */\n  imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>]\n}\n\ntype Options = {\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. If there is no loaded image, the size is\n   * `undefined`.\n   *\n   * @param size - The original image size.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\nfunction getImageSize(imageElement: HTMLImageElement): Size {\n  return new Size([imageElement.width, imageElement.height])\n}\n\n/**\n * Hook for preloading an image.\n *\n * @param src - The image source.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns See {@link ReturnedStates}.\n */\nexport default function useLoadImageEffect(src?: string, { onImageLoadComplete, onImageLoadError, onImageSizeChange }: Options = {}, deps?: DependencyList): ReturnedStates {\n  const imageLoadCompleteHandler = (event: Event) => {\n    const imageElement = event.currentTarget as HTMLImageElement\n    const imageSize = getImageSize(imageElement)\n\n    setIsLoading(false)\n    setImageSize(imageSize)\n\n    onImageLoadComplete?.(imageElement)\n  }\n\n  const imageLoadErrorHandler = (event: Event) => {\n    setIsLoading(false)\n    setImageSize(undefined)\n\n    onImageLoadError?.()\n  }\n\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n\n  useEffect(() => {\n    if (!src) return\n\n    setIsLoading(true)\n\n    imageRef.current = new Image()\n    imageRef.current.src = src\n    imageRef.current.addEventListener('load', imageLoadCompleteHandler)\n    imageRef.current.addEventListener('error', imageLoadErrorHandler)\n\n    return () => {\n      imageRef.current?.removeEventListener('load', imageLoadCompleteHandler)\n      imageRef.current?.removeEventListener('error', imageLoadErrorHandler)\n      imageRef.current = undefined\n    }\n  }, [src, ...deps ? deps : []])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize])\n\n  return {\n    isLoading: [isLoading, setIsLoading],\n    imageSize: [imageSize, setImageSize],\n  }\n}\n"]}

package/lib/hooks/useResizeEffect.d.ts

@@ -1,7 +1,22 @@
 import { DependencyList, Dispatch, RefObject, SetStateAction } from 'react';
 import { Size } from 'spase';
 declare type Options = {
+    /**
+     * Handler invoked when the target element resizes.
+     *
+     * @param size - The current size of the target element.
+     */
     onResize?: (size: Size) => void;
 };
+/**
+ * Hook for monitoring the resizing event of the target element.
+ *
+ * @param targetRef - Reference to the target element.
+ * @param options - See {@link Options}.
+ * @param deps - Additional dependencies.
+ *
+ * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a
+ *          function that sets its size.
+ */
 export default function useResizeEffect(targetRef: RefObject<Element>, { onResize }?: Options, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>];
 export {};

package/lib/hooks/useResizeEffect.js

@@ -31,6 +31,16 @@ 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 the resizing event of the target element.
+ *
+ * @param targetRef - Reference to the target element.
+ * @param options - See {@link Options}.
+ * @param deps - Additional dependencies.
+ *
+ * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a
+ *          function that sets its size.
+ */
 function useResizeEffect(targetRef, _a, deps) {
     var _b = _a === void 0 ? {} : _a, onResize = _b.onResize;
     var observerRef = (0, react_1.useRef)(undefined);

package/lib/hooks/useResizeEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeEffect.js","sourceRoot":"/","sources":["hooks/useResizeEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAwG;AACxG,sFAAqD;AACrD,+BAAkC;AAQlC,SAAwB,eAAe,CAAC,SAA6B,EAAE,EAA0B,EAAE,IAAqB;QAAjD,qBAAwB,EAAE,KAAA,EAAxB,QAAQ,cAAA;IAC/E,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,yEAAyE;QAEzE,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,IAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YAEtB,iFAAiF;YAEjF,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;QAClB,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,4EAA4E;YAE5E,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,iBAAG,SAAS,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAEpC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACxB,CAAC;AAlCD,kCAkCC","sourcesContent":["import { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect, Size } from 'spase'\n\n// const debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype Options = {\n  onResize?: (size: Size) => void\n}\n\nexport default function useResizeEffect(targetRef: RefObject<Element>, { onResize }: Options = {}, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>] {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [size, setSize] = useState<Size>(new Size())\n\n  useEffect(() => {\n    // debug(`Using resize effect for element ${targetRef.current}...`, 'OK')\n\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      const size = rect.size\n\n      // debug(`Observing size change for element ${targetRef.current}...`, 'OK', size)\n\n      setSize(size)\n      onResize?.(size)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      // debug(`Removing resize effect for element ${targetRef.current}...`, 'OK')\n\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef, ...deps ? deps : []])\n\n  return [size, setSize]\n}\n"]}
+{"version":3,"file":"useResizeEffect.js","sourceRoot":"/","sources":["hooks/useResizeEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAwG;AACxG,sFAAqD;AACrD,+BAAkC;AAalC;;;;;;;;;GASG;AACH,SAAwB,eAAe,CAAC,SAA6B,EAAE,EAA0B,EAAE,IAAqB;QAAjD,qBAAwB,EAAE,KAAA,EAAxB,QAAQ,cAAA;IAC/E,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,yEAAyE;QAEzE,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,IAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YAEtB,iFAAiF;YAEjF,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;QAClB,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,4EAA4E;YAE5E,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,iBAAG,SAAS,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;IAEpC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACxB,CAAC;AAlCD,kCAkCC","sourcesContent":["import { DependencyList, Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { Rect, Size } from 'spase'\n\n// const debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\ntype Options = {\n  /**\n   * Handler invoked when the target element resizes.\n   *\n   * @param size - The current size of the target element.\n   */\n  onResize?: (size: Size) => void\n}\n\n/**\n * Hook for monitoring the resizing event of the target element.\n *\n * @param targetRef - Reference to the target element.\n * @param options - See {@link Options}.\n * @param deps - Additional dependencies.\n *\n * @returns A tuple consisting of a stateful value indicating the size of the target ref, and a\n *          function that sets its size.\n */\nexport default function useResizeEffect(targetRef: RefObject<Element>, { onResize }: Options = {}, deps?: DependencyList): [Size, Dispatch<SetStateAction<Size>>] {\n  const observerRef = useRef<ResizeObserver | undefined>(undefined)\n  const [size, setSize] = useState<Size>(new Size())\n\n  useEffect(() => {\n    // debug(`Using resize effect for element ${targetRef.current}...`, 'OK')\n\n    observerRef.current = new ResizeObserver(() => {\n      const rect = Rect.from(targetRef.current)\n\n      if (!rect) return\n\n      const size = rect.size\n\n      // debug(`Observing size change for element ${targetRef.current}...`, 'OK', size)\n\n      setSize(size)\n      onResize?.(size)\n    })\n\n    if (observerRef.current && targetRef.current) {\n      observerRef.current.observe(targetRef.current)\n    }\n\n    return () => {\n      // debug(`Removing resize effect for element ${targetRef.current}...`, 'OK')\n\n      if (observerRef.current && targetRef.current) {\n        observerRef.current.unobserve(targetRef.current)\n      }\n    }\n  }, [targetRef, ...deps ? deps : []])\n\n  return [size, setSize]\n}\n"]}

package/lib/hooks/useSearchParamState.d.ts

@@ -1,6 +1,23 @@
 import { Dispatch, SetStateAction } from 'react';
 export declare type Options<T> = {
+    /**
+     * Function for transforming the search param value to the value of the mapped state.
+     */
     mapSearchParamToState?: (value: string | null) => NonNullable<T> | null;
+    /**
+     * Function for transforming the value of the mapped state to the search param value.
+     */
     mapStateToSearchParam?: (state: T | null) => string | null;
 };
+/**
+ * Hook for mapping a search param to a state. Whenever the value of the target search param
+ * changes, the mapped state will change as well, and vice versa.
+ *
+ * @param param - The search param key.
+ * @param initialState - The initial value of the state.
+ * @param options - See {@link Options}.
+ *
+ * @returns A tuple consisting of a stateful value representing the current value of the mapped
+ *          state and a function that updates it.
+ */
 export default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>];

package/lib/hooks/useSearchParamState.js

@@ -19,6 +19,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : function () { };
+/**
+ * Hook for mapping a search param to a state. Whenever the value of the target search param
+ * changes, the mapped state will change as well, and vice versa.
+ *
+ * @param param - The search param key.
+ * @param initialState - The initial value of the state.
+ * @param options - See {@link Options}.
+ *
+ * @returns A tuple consisting of a stateful value representing the current value of the mapped
+ *          state and a function that updates it.
+ */
 function useSearchParamState(param, initialState, _a) {
     var _b = _a === void 0 ? {} : _a, mapSearchParamToState = _b.mapSearchParamToState, mapStateToSearchParam = _b.mapStateToSearchParam;
     var _mapSearchParamToState = function (value, initialState) {

package/lib/hooks/useSearchParamState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAOlG,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAuB,EAAE,EAAiE;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IACnI,IAAM,sBAAsB,GAAG,UAAC,KAAoB,EAAE,YAAuB;QAC3E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAA;SAC5B;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAe;QAC7C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAA;SACZ;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAA;IAC5E,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n  mapSearchParamToState?: (value: string | null) => NonNullable<T> | null\n  mapStateToSearchParam?: (state: T | null) => string | null\n}\n\nexport default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>] {\n  const _mapSearchParamToState = (value: string | null, initialState?: T | null): NonNullable<T> | null => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (value === null) {\n      return initialState ?? null\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const _mapStateToSearchParam = (state: T | null): string | null => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === null) {\n      return null\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param), initialState)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, initialState=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = _mapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (newValue === null) {\n      searchParams.delete(param)\n    }\n    else {\n      searchParams.set(param, newValue)\n    }\n\n    debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n    setSearchParams(searchParams)\n  }, [state])\n\n  return [state, setState]\n}\n"]}
+{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAclG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAuB,EAAE,EAAiE;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IACnI,IAAM,sBAAsB,GAAG,UAAC,KAAoB,EAAE,YAAuB;QAC3E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAA;SAC5B;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAe;QAC7C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAA;SACZ;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAA;IAC5E,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n  /**\n   * Function for transforming the search param value to the value of the mapped state.\n   */\n  mapSearchParamToState?: (value: string | null) => NonNullable<T> | null\n\n  /**\n   * Function for transforming the value of the mapped state to the search param value.\n   */\n  mapStateToSearchParam?: (state: T | null) => string | null\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param initialState - The initial value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n *          state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>] {\n  const _mapSearchParamToState = (value: string | null, initialState?: T | null): NonNullable<T> | null => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (value === null) {\n      return initialState ?? null\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const _mapStateToSearchParam = (state: T | null): string | null => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === null) {\n      return null\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param), initialState)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, initialState=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = _mapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (newValue === null) {\n      searchParams.delete(param)\n    }\n    else {\n      searchParams.set(param, newValue)\n    }\n\n    debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n    setSearchParams(searchParams)\n  }, [state])\n\n  return [state, setState]\n}\n"]}

package/package.json

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

package/lib/Group.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    children: JSX.Element | ((index: number) => JSX.Element);
-    count?: number;
-};
-export default function Group({ count, children, }: Props): JSX.Element;
-export {};

package/lib/Group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Group.js","sourceRoot":"/","sources":["Group.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAOvC,SAAwB,KAAK,CAAC,EAGtB;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,wBAaC","sourcesContent":["import React, { Fragment } from 'react'\n\ntype Props = {\n  children: JSX.Element | ((index: number) => JSX.Element)\n  count?: number\n}\n\nexport default function Group({\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"]}