etudes 1.2.0 → 2.1.0

package/lib/SwipeContainer.js

@@ -1,8 +1,4 @@
 "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++) {
@@ -64,17 +60,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     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 spase_1 = require("spase");
-var styled_components_1 = __importDefault(require("styled-components"));
 /**
- * An empty component with a backing `<div>` element that detects swipe gestures.
+ * An empty component with a backing `<div>` element that detects swipe
+ * gestures.
  */
-function SwipeContainer(_a) {
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.isEnabled, isEnabled = _b === void 0 ? true : _b, _c = _a.threshold, threshold = _c === void 0 ? 0.5 : _c, onSwipeDown = _a.onSwipeDown, onSwipeLeft = _a.onSwipeLeft, onSwipeRight = _a.onSwipeRight, onSwipeUp = _a.onSwipeUp, props = __rest(_a, ["children", "isEnabled", "threshold", "onSwipeDown", "onSwipeLeft", "onSwipeRight", "onSwipeUp"]);
     var _d = __read((0, react_1.useState)(undefined), 2), dragStartPosition = _d[0], setDragStartPosition = _d[1];
     var _e = __read((0, react_1.useState)(undefined), 2), dragEndPosition = _e[0], setDragEndPosition = _e[1];
@@ -132,9 +125,6 @@ function SwipeContainer(_a) {
         setDragEndPosition(undefined);
         setDragStartTime(NaN);
     };
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { onTouchStart: function (event) { return onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY); }, onTouchMove: function (event) { return onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY); }, onTouchEnd: function () { return onDragEnd(); }, onMouseDown: function (event) { return onDragStart(event.clientX, event.clientY); }, onMouseMove: function (event) { return onDragMove(event.clientX, event.clientY); }, onMouseUp: function () { return onDragEnd(); }, onMouseLeave: function () { return onDragCancel(); } }), children));
-}
-exports.default = SwipeContainer;
-var StyledRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-var templateObject_1;
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, onMouseDown: function (event) { return onDragStart(event.clientX, event.clientY); }, onMouseLeave: function () { return onDragCancel(); }, onMouseMove: function (event) { return onDragMove(event.clientX, event.clientY); }, onMouseUp: function () { return onDragEnd(); }, onTouchEnd: function () { return onDragEnd(); }, onTouchMove: function (event) { return onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY); }, onTouchStart: function (event) { return onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY); } }), children));
+});
 //# sourceMappingURL=SwipeContainer.js.map

package/lib/SwipeContainer.js.map

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

package/lib/TextField.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLInputElement> & {
+export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     value?: string;
     onFocus?: (value: string) => void;
     onUnfocus?: (value: string) => void;

package/lib/TextField.js

@@ -1,8 +1,4 @@
 "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++) {
@@ -48,25 +44,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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"));
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, onFocus = _a.onFocus, onUnfocus = _a.onUnfocus, onValueChange = _a.onValueChange, props = __rest(_a, ["value", "onFocus", "onUnfocus", "onValueChange"]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { ref: ref, type: 'text', onChange: function (_a) {
+    return (react_1.default.createElement("input", __assign({}, props, { ref: ref, type: 'text', value: value, onBlur: function (_a) {
+            var target = _a.target;
+            return onUnfocus === null || onUnfocus === void 0 ? void 0 : onUnfocus(target.value);
+        }, onChange: function (_a) {
             var target = _a.target;
             return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(target.value);
         }, onFocus: function (_a) {
             var target = _a.target;
             return onFocus === null || onFocus === void 0 ? void 0 : onFocus(target.value);
-        }, onBlur: function (_a) {
-            var target = _a.target;
-            return onUnfocus === null || onUnfocus === void 0 ? void 0 : onUnfocus(target.value);
-        }, value: value })));
+        } })));
 });
-var StyledRoot = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: block;\n  height: 40px;\n  padding: 0 1rem;\n  text-align: left;\n  width: 100px;\n"], ["\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: block;\n  height: 40px;\n  padding: 0 1rem;\n  text-align: left;\n  width: 100px;\n"])));
-var templateObject_1;
 //# sourceMappingURL=TextField.js.map

package/lib/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkF;AAClF,wEAAsC;AAStC,kBAAe,IAAA,kBAAU,EAA0B,UAAC,EAMnD,EAAE,GAAG;IALJ,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cAL0C,kDAMnD,CADS;IACC,OAAA,CACT,8BAAC,UAAU,eACL,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,UAAC,EAAyC;gBAAvC,MAAM,YAAA;YAAsC,OAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,MAAM,CAAC,KAAK,CAAC;QAA7B,CAA6B,EACtF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,EAC9E,MAAM,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,MAAM,CAAC,KAAK,CAAC;QAAzB,CAAyB,EAC/E,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;CAAA,CAAC,CAAA;AAEF,IAAM,UAAU,GAAG,2BAAM,CAAC,KAAK,qOAAA,kKAS9B,IAAA,CAAA","sourcesContent":["import React, { ChangeEvent, FocusEvent, forwardRef, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLInputElement> & {\n  value?: string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport default forwardRef<HTMLInputElement, Props>(({\n  value = '',\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => (\n  <StyledRoot\n    {...props}\n    ref={ref}\n    type='text'\n    onChange={({ target }: ChangeEvent<HTMLInputElement>) => onValueChange?.(target.value)}\n    onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n    onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n    value={value}\n  />\n))\n\nconst StyledRoot = styled.input`\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: block;\n  height: 40px;\n  padding: 0 1rem;\n  text-align: left;\n  width: 100px;\n`\n"]}
+{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkF;AASlF,kBAAe,IAAA,kBAAU,EAAmC,UAAC,EAM5D,EAAE,GAAG;IALJ,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cALmD,kDAM5D,CADS;IACC,OAAA,CACT,oDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,MAAM,CAAC,KAAK,CAAC;QAAzB,CAAyB,EAC/E,QAAQ,EAAE,UAAC,EAAyC;gBAAvC,MAAM,YAAA;YAAsC,OAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,MAAM,CAAC,KAAK,CAAC;QAA7B,CAA6B,EACtF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,IAC9E,CACH,CAAA;CAAA,CAAC,CAAA","sourcesContent":["import React, { ChangeEvent, FocusEvent, forwardRef, HTMLAttributes } from 'react'\n\nexport type TextFieldProps = HTMLAttributes<HTMLInputElement> & {\n  value?: string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport default forwardRef<HTMLInputElement, TextFieldProps>(({\n  value = '',\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => (\n  <input\n    {...props}\n    ref={ref}\n    type='text'\n    value={value}\n    onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n    onChange={({ target }: ChangeEvent<HTMLInputElement>) => onValueChange?.(target.value)}\n    onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n  />\n))\n"]}

package/lib/Video.d.ts

@@ -1,53 +1,32 @@
-import React, { CSSProperties, PureComponent } from 'react';
-export interface Props {
-    autoLoop: boolean;
-    autoPlay: boolean;
-    className?: string;
-    hasControls: boolean;
-    isCover: boolean;
-    isMuted: boolean;
-    onCanPlay: () => void;
-    onEnd: () => void;
-    onFullscreenChange: (isFullscreen: boolean) => void;
-    onPause: () => void;
-    onPlay: () => void;
-    playsInline: boolean;
+import React, { HTMLAttributes } from 'react';
+export type VideoProps = HTMLAttributes<HTMLDivElement> & {
+    autoLoop?: boolean;
+    autoPlay?: boolean;
+    hasControls?: boolean;
+    isCover?: boolean;
+    isMuted?: boolean;
+    playsInline?: boolean;
     posterSrc?: string;
     src: string;
-    style: CSSProperties;
-}
-export interface State {
-}
-export default class Video extends PureComponent<Props, State> {
-    static defaultProps: {
-        autoLoop: boolean;
-        autoPlay: boolean;
-        hasControls: boolean;
-        isCover: boolean;
-        isMuted: boolean;
-        onCanPlay: () => void;
-        onEnd: () => void;
-        onFullscreenChange: () => void;
-        onPause: () => void;
-        onPlay: () => void;
-        playsInline: boolean;
-        style: {};
-    };
-    nodeRefs: {
-        root: React.RefObject<HTMLDivElement>;
-        video: React.RefObject<HTMLVideoElement>;
-    };
-    constructor(props: Props);
-    get isPaused(): boolean;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Props, prevState: State): void;
-    onFullscreenChange: (event: Event) => void;
-    onCanPlay(element: HTMLVideoElement): void;
-    onPlay(element: HTMLVideoElement): void;
-    onPause(element: HTMLVideoElement): void;
-    onEnd(element: HTMLVideoElement): void;
-    play(): void;
-    pause(): void;
-    render(): JSX.Element;
-}
+    onCanPlay?: () => void;
+    onEnd?: () => void;
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+    onPause?: () => void;
+    onPlay?: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    autoLoop?: boolean | undefined;
+    autoPlay?: boolean | undefined;
+    hasControls?: boolean | undefined;
+    isCover?: boolean | undefined;
+    isMuted?: boolean | undefined;
+    playsInline?: boolean | undefined;
+    posterSrc?: string | undefined;
+    src: string;
+    onCanPlay?: (() => void) | undefined;
+    onEnd?: (() => void) | undefined;
+    onFullscreenChange?: ((isFullscreen: boolean) => void) | undefined;
+    onPause?: (() => void) | undefined;
+    onPlay?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/Video.js

@@ -1,22 +1,14 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+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;
     };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+    return __assign.apply(this, arguments);
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -41,126 +33,92 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 __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"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:video') : function () { };
-var Video = /** @class */ (function (_super) {
-    __extends(Video, _super);
-    function Video(props) {
-        var _this = _super.call(this, props) || this;
-        _this.nodeRefs = {
-            root: (0, react_1.createRef)(),
-            video: (0, react_1.createRef)(),
-        };
-        _this.onFullscreenChange = function (event) {
-            var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
-            if (isFullscreen === undefined)
-                return;
-            _this.props.onFullscreenChange(isFullscreen);
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var useDebug_1 = __importDefault(require("./utils/useDebug"));
+var debug = (0, useDebug_1.default)('video');
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.autoLoop, autoLoop = _d === void 0 ? true : _d, _e = _a.autoPlay, autoPlay = _e === void 0 ? true : _e, _f = _a.hasControls, hasControls = _f === void 0 ? false : _f, _g = _a.isCover, isCover = _g === void 0 ? true : _g, _h = _a.isMuted, isMuted = _h === void 0 ? true : _h, _j = _a.playsInline, playsInline = _j === void 0 ? true : _j, posterSrc = _a.posterSrc, src = _a.src, onCanPlay = _a.onCanPlay, onEnd = _a.onEnd, onFullscreenChange = _a.onFullscreenChange, onPause = _a.onPause, onPlay = _a.onPlay, props = __rest(_a, ["autoLoop", "autoPlay", "hasControls", "isCover", "isMuted", "playsInline", "posterSrc", "src", "onCanPlay", "onEnd", "onFullscreenChange", "onPause", "onPlay"]);
+    var bodyRef = (0, react_1.useRef)(null);
+    var isPaused = (_c = (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.paused) !== null && _c !== void 0 ? _c : false;
+    (0, react_1.useEffect)(function () {
+        debug("Initializing video with src <".concat(src, ">..."), 'OK');
+        if (!bodyRef.current)
+            return;
+        bodyRef.current.muted = isMuted;
+        bodyRef.current.load();
+        bodyRef.current.addEventListener('webkitfullscreenchange', fullscreenChangeHandler);
+        bodyRef.current.addEventListener('mozfullscreenchange', fullscreenChangeHandler);
+        bodyRef.current.addEventListener('fullscreenchange', fullscreenChangeHandler);
+        return function () {
+            var _a, _b, _c;
+            debug("Deinitializing video with src <".concat(src, ">..."), 'OK');
+            pause();
+            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler);
+            (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mozfullscreenchange', fullscreenChangeHandler);
+            (_c = bodyRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('fullscreenchange', fullscreenChangeHandler);
         };
-        debug("Initializing with src <".concat(_this.props.src, ">..."), 'OK');
-        return _this;
-    }
-    Object.defineProperty(Video.prototype, "isPaused", {
-        get: function () {
-            if (!this.nodeRefs.video.current)
-                return false;
-            return this.nodeRefs.video.current.paused;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Video.prototype.componentDidMount = function () {
-        var videoNode = this.nodeRefs.video.current;
-        if (videoNode) {
-            // HACK: https://github.com/facebook/react/issues/10389
-            videoNode.muted = this.props.isMuted;
-            videoNode.load();
-            videoNode.addEventListener('webkitfullscreenchange', this.onFullscreenChange);
-            videoNode.addEventListener('mozfullscreenchange', this.onFullscreenChange);
-            videoNode.addEventListener('fullscreenchange', this.onFullscreenChange);
-        }
-    };
-    Video.prototype.componentWillUnmount = function () {
-        var videoNode = this.nodeRefs.video.current;
-        if (videoNode) {
-            videoNode.removeEventListener('webkitfullscreenchange', this.onFullscreenChange);
-            videoNode.removeEventListener('mozfullscreenchange', this.onFullscreenChange);
-            videoNode.removeEventListener('fullscreenchange', this.onFullscreenChange);
-        }
-        this.pause();
-    };
-    Video.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if ((prevProps.isMuted !== this.props.isMuted) && this.nodeRefs.video.current) {
-            // HACK: https://github.com/facebook/react/issues/10389
-            this.nodeRefs.video.current.muted = this.props.isMuted;
-        }
-        if (prevProps.autoPlay !== this.props.autoPlay) {
-            if (this.props.autoPlay) {
-                this.play();
-            }
-            else {
-                this.pause();
-            }
-        }
+    }, [src]);
+    var fullscreenChangeHandler = function (event) {
+        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+        if (isFullscreen === undefined)
+            return;
+        onFullscreenChange === null || onFullscreenChange === void 0 ? void 0 : onFullscreenChange(isFullscreen);
     };
-    Video.prototype.onCanPlay = function (element) {
+    var canPlayHandler = function (event) {
         debug('Checking if video is ready to play...', 'OK');
-        if (this.props.autoPlay && this.isPaused) {
-            this.play();
+        if (autoPlay && isPaused) {
+            play();
         }
-        this.props.onCanPlay();
+        onCanPlay === null || onCanPlay === void 0 ? void 0 : onCanPlay();
     };
-    Video.prototype.onPlay = function (element) {
+    var playHandler = function (event) {
         debug('Playing video...', 'OK');
-        this.props.onPlay();
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     };
-    Video.prototype.onPause = function (element) {
+    var pauseHandler = function (event) {
         debug('Pausing video...', 'OK');
-        this.props.onPause();
+        onPause === null || onPause === void 0 ? void 0 : onPause();
     };
-    Video.prototype.onEnd = function (element) {
+    var endHandler = function (event) {
         debug('Ending video...', 'OK');
-        this.props.onEnd();
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
     };
-    Video.prototype.play = function () {
-        if (!this.nodeRefs.video.current)
+    var play = function () {
+        if (!bodyRef.current)
             return;
-        this.nodeRefs.video.current.play();
+        bodyRef.current.play();
     };
-    Video.prototype.pause = function () {
-        if (!this.nodeRefs.video.current)
+    var pause = function () {
+        if (!bodyRef.current)
             return;
-        this.nodeRefs.video.current.pause();
+        bodyRef.current.pause();
     };
-    Video.prototype.render = function () {
-        var _this = this;
-        // HACK: Need to dangerously insert HTML because https://github.com/facebook/react/issues/6544.
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, isCover: this.props.isCover, ref: this.nodeRefs.root, style: this.props.style },
-            react_1.default.createElement("video", { ref: this.nodeRefs.video, autoPlay: this.props.autoPlay, playsInline: this.props.playsInline, muted: this.props.isMuted, controls: this.props.hasControls, onCanPlay: function (event) { return _this.onCanPlay(event.currentTarget); }, onPlay: function (event) { return _this.onPlay(event.currentTarget); }, onPause: function (event) { return _this.onPause(event.currentTarget); }, onEnded: function (event) { return _this.onEnd(event.currentTarget); }, loop: this.props.autoLoop, poster: this.props.posterSrc },
-                react_1.default.createElement("source", { src: this.props.src }))));
-    };
-    Video.defaultProps = {
-        autoLoop: true,
-        autoPlay: true,
-        hasControls: false,
-        isCover: true,
-        isMuted: true,
-        onCanPlay: function () { },
-        onEnd: function () { },
-        onFullscreenChange: function () { },
-        onPause: function () { },
-        onPlay: function () { },
-        playsInline: true,
-        style: {},
-    };
-    return Video;
-}(react_1.PureComponent));
-exports.default = Video;
-var StyledRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  video {\n    display: block;\n    height: 100%;\n    margin: 0;\n    object-fit: ", ";\n    outline: none;\n    padding: 0;\n    width: 100%;\n  }\n"], ["\n  box-sizing: border-box;\n  display: block;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  video {\n    display: block;\n    height: 100%;\n    margin: 0;\n    object-fit: ", ";\n    outline: none;\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) { return props.isCover ? 'cover' : 'filled'; });
-var templateObject_1;
+    var fixedStyles = (0, asStyleDict_1.default)({
+        body: {
+            height: '100%',
+            width: '100%',
+            objectFit: isCover ? 'cover' : 'fill',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref }),
+        react_1.default.createElement("video", { ref: bodyRef, style: fixedStyles.body, autoPlay: autoPlay, controls: hasControls, loop: autoLoop, muted: isMuted, playsInline: playsInline, poster: posterSrc, onCanPlay: canPlayHandler, onEnded: endHandler, onPause: pauseHandler, onPlay: playHandler },
+            react_1.default.createElement("source", { src: src }))));
+});
 //# sourceMappingURL=Video.js.map

package/lib/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"/","sources":["Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createRef, CSSProperties, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:video') : () => {}\n\nexport interface Props {\n  autoLoop: boolean\n  autoPlay: boolean\n  className?: string\n  hasControls: boolean\n  isCover: boolean\n  isMuted: boolean\n  onCanPlay: () => void\n  onEnd: () => void\n  onFullscreenChange: (isFullscreen: boolean) => void\n  onPause: () => void\n  onPlay: () => void\n  playsInline: boolean\n  posterSrc?: string\n  src: string\n  style: CSSProperties\n}\n\nexport interface State {\n}\n\nexport default class Video extends PureComponent<Props, State> {\n  static defaultProps = {\n    autoLoop: true,\n    autoPlay: true,\n    hasControls: false,\n    isCover: true,\n    isMuted: true,\n    onCanPlay: () => {},\n    onEnd: () => {},\n    onFullscreenChange: () => {},\n    onPause: () => {},\n    onPlay: () => {},\n    playsInline: true,\n    style: {},\n  }\n\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n    video: createRef<HTMLVideoElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n    debug(`Initializing with src <${this.props.src}>...`, 'OK')\n  }\n\n  get isPaused(): boolean {\n    if (!this.nodeRefs.video.current) return false\n    return this.nodeRefs.video.current.paused\n  }\n\n  componentDidMount() {\n    const videoNode = this.nodeRefs.video.current\n\n    if (videoNode) {\n      // HACK: https://github.com/facebook/react/issues/10389\n      videoNode.muted = this.props.isMuted\n      videoNode.load()\n\n      videoNode.addEventListener('webkitfullscreenchange', this.onFullscreenChange)\n      videoNode.addEventListener('mozfullscreenchange', this.onFullscreenChange)\n      videoNode.addEventListener('fullscreenchange', this.onFullscreenChange)\n    }\n  }\n\n  componentWillUnmount() {\n    const videoNode = this.nodeRefs.video.current\n\n    if (videoNode) {\n      videoNode.removeEventListener('webkitfullscreenchange', this.onFullscreenChange)\n      videoNode.removeEventListener('mozfullscreenchange', this.onFullscreenChange)\n      videoNode.removeEventListener('fullscreenchange', this.onFullscreenChange)\n    }\n\n    this.pause()\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if ((prevProps.isMuted !== this.props.isMuted) && this.nodeRefs.video.current) {\n      // HACK: https://github.com/facebook/react/issues/10389\n      this.nodeRefs.video.current.muted = this.props.isMuted\n    }\n\n    if (prevProps.autoPlay !== this.props.autoPlay) {\n      if (this.props.autoPlay) {\n        this.play()\n      }\n      else {\n        this.pause()\n      }\n    }\n  }\n\n  onFullscreenChange = (event: Event) => {\n    const isFullscreen: boolean | undefined = (document as any).fullScreen || (document as any).mozFullScreen || (document as any).webkitIsFullScreen\n\n    if (isFullscreen === undefined) return\n\n    this.props.onFullscreenChange(isFullscreen)\n  }\n\n  onCanPlay(element: HTMLVideoElement) {\n    debug('Checking if video is ready to play...', 'OK')\n\n    if (this.props.autoPlay && this.isPaused) {\n      this.play()\n    }\n\n    this.props.onCanPlay()\n  }\n\n  onPlay(element: HTMLVideoElement) {\n    debug('Playing video...', 'OK')\n\n    this.props.onPlay()\n  }\n\n  onPause(element: HTMLVideoElement) {\n    debug('Pausing video...', 'OK')\n\n    this.props.onPause()\n  }\n\n  onEnd(element: HTMLVideoElement) {\n    debug('Ending video...', 'OK')\n\n    this.props.onEnd()\n  }\n\n  play() {\n    if (!this.nodeRefs.video.current) return\n    this.nodeRefs.video.current.play()\n  }\n\n  pause() {\n    if (!this.nodeRefs.video.current) return\n    this.nodeRefs.video.current.pause()\n  }\n\n  render() {\n    // HACK: Need to dangerously insert HTML because https://github.com/facebook/react/issues/6544.\n    return (\n      <StyledRoot\n        className={this.props.className}\n        isCover={this.props.isCover}\n        ref={this.nodeRefs.root}\n        style={this.props.style}\n      >\n        <video\n          ref={this.nodeRefs.video}\n          autoPlay={this.props.autoPlay}\n          playsInline={this.props.playsInline}\n          muted={this.props.isMuted}\n          controls={this.props.hasControls}\n          onCanPlay={event => this.onCanPlay(event.currentTarget)}\n          onPlay={event => this.onPlay(event.currentTarget)}\n          onPause={event => this.onPause(event.currentTarget)}\n          onEnded={event => this.onEnd(event.currentTarget)}\n          loop={this.props.autoLoop}\n          poster={this.props.posterSrc}\n        >\n          <source src={this.props.src}/>\n        </video>\n      </StyledRoot>\n    )\n  }\n}\n\nconst StyledRoot = styled.div<{\n  isCover: boolean\n}>`\n  box-sizing: border-box;\n  display: block;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  video {\n    display: block;\n    height: 100%;\n    margin: 0;\n    object-fit: ${props => props.isCover ? 'cover' : 'filled'};\n    outline: none;\n    padding: 0;\n    width: 100%;\n  }\n`\n"]}
+{"version":3,"file":"Video.js","sourceRoot":"/","sources":["Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactEventHandler, useEffect, useRef } from 'react'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('video')\n\nexport type VideoProps = HTMLAttributes<HTMLDivElement> & {\n  autoLoop?: boolean\n  autoPlay?: boolean\n  hasControls?: boolean\n  isCover?: boolean\n  isMuted?: boolean\n  playsInline?: boolean\n  posterSrc?: string\n  src: string\n  onCanPlay?: () => void\n  onEnd?: () => void\n  onFullscreenChange?: (isFullscreen: boolean) => void\n  onPause?: () => void\n  onPlay?: () => void\n}\n\nexport default forwardRef<HTMLDivElement, VideoProps>(({\n  autoLoop = true,\n  autoPlay = true,\n  hasControls = false,\n  isCover = true,\n  isMuted = true,\n  playsInline = true,\n  posterSrc,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onPause,\n  onPlay,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLVideoElement>(null)\n  const isPaused = bodyRef.current?.paused ?? false\n\n  useEffect(() => {\n    debug(`Initializing video with src <${src}>...`, 'OK')\n\n    if (!bodyRef.current) return\n\n    bodyRef.current.muted = isMuted\n    bodyRef.current.load()\n    bodyRef.current.addEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('mozfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('fullscreenchange', fullscreenChangeHandler)\n\n    return () => {\n      debug(`Deinitializing video with src <${src}>...`, 'OK')\n\n      pause()\n\n      bodyRef.current?.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('mozfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('fullscreenchange', fullscreenChangeHandler)\n    }\n  }, [src])\n\n  const fullscreenChangeHandler = (event: Event) => {\n    const isFullscreen: boolean | undefined = (document as any).fullScreen || (document as any).mozFullScreen || (document as any).webkitIsFullScreen\n    if (isFullscreen === undefined) return\n    onFullscreenChange?.(isFullscreen)\n  }\n\n  const canPlayHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Checking if video is ready to play...', 'OK')\n\n    if (autoPlay && isPaused) {\n      play()\n    }\n\n    onCanPlay?.()\n  }\n\n  const playHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Playing video...', 'OK')\n    onPlay?.()\n  }\n\n  const pauseHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Pausing video...', 'OK')\n    onPause?.()\n  }\n\n  const endHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Ending video...', 'OK')\n    onEnd?.()\n  }\n\n  const play = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.play()\n  }\n\n  const pause = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.pause()\n  }\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n      objectFit: isCover ? 'cover' : 'fill',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <video\n        ref={bodyRef}\n        style={fixedStyles.body}\n        autoPlay={autoPlay}\n        controls={hasControls}\n        loop={autoLoop}\n        muted={isMuted}\n        playsInline={playsInline}\n        poster={posterSrc}\n        onCanPlay={canPlayHandler}\n        onEnded={endHandler}\n        onPause={pauseHandler}\n        onPlay={playHandler}\n      >\n        <source src={src}/>\n      </video>\n    </div>\n  )\n})\n"]}

package/lib/WithTooltip.d.ts

@@ -1,16 +1,18 @@
-import { HTMLAttributes } from 'react';
-import { CSSProp } from 'styled-components';
-export declare type Props = HTMLAttributes<HTMLElement> & {
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{
     /**
-     * The height of the arrow. The width (longest edge) of the arrow is always twice its height.
+     * The height of the arrow. The width (longest edge) of the arrow is always
+     * twice its height.
      */
     arrowHeight?: number;
     /**
-     * Color of the dialog background, same format as a CSS color string (i.e. '#000').
+     * Color of the dialog background, same format as a CSS color string (i.e.
+     * '#000').
      */
     backgroundColor?: string;
     /**
-     * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).
+     * Specifies if the tooltip should be disabled in touch devices (i.e. `html`
+     * has class `.touch`).
      */
     disabledOnTouch?: boolean;
     /**
@@ -18,22 +20,18 @@ export declare type Props = HTMLAttributes<HTMLElement> & {
      */
     hint: string;
     /**
-     * The gap (in pixels) between the target element and the tooltip, defaults to zero.
+     * The gap (in pixels) between the target element and the tooltip, defaults to
+     * zero.
      */
     gap?: number;
     /**
-     * Color of the dialog text, same format as a CSS color string (i.e. '#000').
+     * The maximum width (in pixels) of the hint text.
      */
-    textColor?: string;
+    maxTextWidth?: number;
     /**
-     * The minimum space (in pixels) between the target element and the edge of the window required to
-     * trigger an alignment change, defaults to `100px`.
+     * The minimum space (in pixels) between the target element and the edge of
+     * the window required to trigger an alignment change, defaults to `100px`.
      */
     threshold?: number;
-    /**
-     * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be
-     * overridden by internal rules.
-     */
-    cssDialog?: CSSProp<any>;
-};
-export default function WithTooltip({ arrowHeight, backgroundColor, cssDialog, disabledOnTouch, hint, gap, textColor, threshold, ...props }: Props): JSX.Element;
+}>;
+export default function WithTooltip({ children, className, style, arrowHeight, backgroundColor, gap, hint, maxTextWidth, threshold, }: WithToolTipProps): JSX.Element;