npm - etudes - Versions diffs - 0.45.0 → 0.49.0 - Mend

etudes 0.45.0 → 0.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/lib/ExtractChildren.js +5 -7
package/lib/ExtractChildren.js.map +1 -1
package/lib/Slider.js +4 -4
package/lib/Slider.js.map +1 -1
package/lib/StepwiseSlider.js +4 -4
package/lib/StepwiseSlider.js.map +1 -1
package/lib/WithTooltip.d.ts +5 -5
package/lib/WithTooltip.js +27 -26
package/lib/WithTooltip.js.map +1 -1
package/package.json +1 -1

package/lib/ExtractChildren.js CHANGED Viewed

@@ -44,13 +44,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 function ExtractChildren(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.Children.map(children, function (child) {
-            if ((0, react_1.isValidElement)(child))
-                return (0, react_1.cloneElement)(child, __assign({}, props));
-            return child;
-        }),
-        ")"));
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child) {
+        if ((0, react_1.isValidElement)(child))
+            return (0, react_1.cloneElement)(child, __assign({}, props));
+        return child;
+    })));
 }
 exports.default = ExtractChildren;
 //# sourceMappingURL=ExtractChildren.js.map

package/lib/ExtractChildren.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwG;AAExG,SAAwB,eAAe,CAAC,EAAsE;IAApE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC1D,OAAO,CACL~~;QACG~~,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;~~YAC3B~~,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC;~~gBAAE~~,OAAO,IAAA,oBAAY,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;~~YACnE~~,OAAO,KAAK,CAAA;~~QACd~~,CAAC,CAAC~~;YACD~~,CACJ,CAAA;AACH,CAAC;AATD,kCASC","sourcesContent":["import React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport default function ExtractChildren({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) {\n return (\n <>\n {Children.map(children, child => {\n if (isValidElement(child)) return cloneElement(child, { ...props })\n return child\n })})\n </>\n )\n}\n"]}
1	+ {"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwG;AAExG,SAAwB,eAAe,CAAC,EAAsE;IAApE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC1D,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC;YAAE,OAAO,IAAA,oBAAY,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;QACnE,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AATD,kCASC","sourcesContent":["import React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport default function ExtractChildren({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) {\n return (\n <>\n {Children.map(children, child => {\n if (isValidElement(child)) return cloneElement(child, { ...props })\n return child\n })}\n </>\n )\n}\n"]}

package/lib/Slider.js CHANGED Viewed

@@ -140,10 +140,10 @@ function Slider(_a) {
     return (react_1.default.createElement(StyledRoot, __assign({ ref: rootRef, orientation: orientation }, props),
         react_1.default.createElement(StyledStartingTrack, { orientation: orientation, isClickable: isTrackInteractive, css: cssStartingTrack, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
                 top: 0,
-                height: "calc(".concat(naturalPosition * 100, "% - ").concat(knobHeight * .5, "px - ").concat(trackPadding, "px)"),
+                height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
             } : {
                 left: 0,
-                width: "calc(".concat(naturalPosition * 100, "% - ").concat(knobWidth * .5, "px - ").concat(trackPadding, "px)"),
+                width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
             } }),
         react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
                 left: '50%',
@@ -164,10 +164,10 @@ function Slider(_a) {
                 } }, labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: cssLabel }, labelProvider(position))))),
         react_1.default.createElement(StyledEndingTrack, { orientation: orientation, isClickable: isTrackInteractive, css: cssEndingTrack, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
                 bottom: 0,
-                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(trackPadding, "px)"),
+                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
             } : {
                 right: 0,
-                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(trackPadding, "px)"),
+                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
             } })));
 }
 exports.default = Slider;

package/lib/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n /*\n By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n /\n isInverted?: boolean\n\n /\n Specifies if the track is clickable to set the position of the knob.\n /\n isTrackInteractive?: boolean\n\n /\n Indicates if position change events are dispatched only when dragging ends. When disabled,\n * aforementioned events are fired repeatedly while dragging.\n /\n onlyDispatchesOnDragEnd?: boolean\n\n /\n A function that returns the label to be displayed at a given slider position.\n \n @param position - The current slider position.\n \n @returns The label.\n /\n labelProvider?: (position: number) => string\n\n /\n Padding between the track and the knob in pixels.\n /\n trackPadding?: number\n\n /\n Height of the knob in pixels.\n /\n knobHeight?: number\n\n /\n Width of the knob in pixels.\n /\n knobWidth?: number\n\n /\n Orientation of the slider.\n /\n orientation?: 'horizontal' \| 'vertical'\n\n /\n The current position.\n /\n position?: number\n\n /\n Handler invoked when position changes. This can either be invoked from the `position` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`.\n \n @param position - The current slider position.\n * @param isDragging - Specifies if the position change is due to dragging.\n /\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /\n Handler invoked when dragging ends.\n /\n onDragEnd?: () => void\n\n /\n Handler invoked when dragging begins.\n /\n onDragStart?: () => void\n\n /\n Custom CSS provided to the track before the knob.\n /\n cssStartingTrack?: CSSProp\n\n /\n Custom CSS provided to the track after the knob.\n /\n cssEndingTrack?: CSSProp\n\n /\n Custom CSS provided to the knob.\n /\n cssKnob?: CSSProp\n\n /\n Custom CSS provided to the label inside the knob.\n /\n cssLabel?: CSSProp\n}\n\n/\n A slider component supporting both horizontal and vertical orientations whose sliding position (a\n * decimal between 0.0 and 1.0, inclusive) can be two-way binded. The component consists of four\n * customizable elements: a draggable knob, a label on the knob, a scroll track before the knob and\n * a scroll track after the knob. While the width and height of the slider is inferred from its CSS\n * rules, the width and height of the knob are set via props (`knobWidth` and `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n /\nexport default function Slider({\n isInverted = false,\n isTrackInteractive = true,\n onlyDispatchesOnDragEnd = false,\n trackPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n position: externalPosition = 0,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n cssStartingTrack,\n cssEndingTrack,\n cssKnob,\n cssLabel,\n ...props\n}: Props) {\n function transform(currentPosition: number, dx: number, dy: number): number {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n const naturalNewPositionX = naturalPosition rect.width + dx\n const naturalNewPositionY = naturalPosition * rect.height + dy\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n return newPosition\n }\n\n function onTrackClick(event: MouseEvent) {\n if (!isTrackInteractive) return\n\n const rect = Rect.from(rootRef.current) ?? new Rect()\n\n switch (orientation) {\n case 'horizontal': {\n const position = (event.clientX - rect.left) / rect.width\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n case 'vertical': {\n const position = (event.clientY - rect.top) / rect.height\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n }\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n initialValue: externalPosition,\n transform,\n onDragStart,\n onDragEnd,\n })\n\n // debug('Rendering...', 'OK')\n\n // Natural position is the position after taking `isInverted` into account.\n const naturalPosition = isInverted ? 1 - position : position\n\n useEffect(() => {\n if (isDragging \|\| externalPosition === position) return\n\n debug('Updating drag effect value from position prop...', 'OK', `prop=${externalPosition}, effect=${position}`)\n\n setPosition(externalPosition)\n }, [externalPosition])\n\n useEffect(() => {\n if (isDragging && onlyDispatchesOnDragEnd) return\n onPositionChange?.(position, isDragging)\n }, [position])\n\n useEffect(() => {\n if (isDragging \|\| !onlyDispatchesOnDragEnd) return\n onPositionChange?.(position, true)\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n <StyledStartingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssStartingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition100}% - ${knobHeight.5}px - ${trackPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition100}% - ${knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (position === 0) : (position === 1),\n 'at-start': isInverted ? (position === 1) : (position === 0),\n 'dragging': isDragging === true,\n })}\n css={cssKnob}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={cssLabel}>{labelProvider(position)}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledEndingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssEndingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)100}% - ${knobHeight.5}px - ${trackPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)100}% - ${knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledStartingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledEndingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };;\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
1	+ {"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n /*\n By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n /\n isInverted?: boolean\n\n /\n Specifies if the track is clickable to set the position of the knob.\n /\n isTrackInteractive?: boolean\n\n /\n Indicates if position change events are dispatched only when dragging ends. When disabled,\n * aforementioned events are fired repeatedly while dragging.\n /\n onlyDispatchesOnDragEnd?: boolean\n\n /\n A function that returns the label to be displayed at a given slider position.\n \n @param position - The current slider position.\n \n @returns The label.\n /\n labelProvider?: (position: number) => string\n\n /\n Padding between the track and the knob in pixels.\n /\n trackPadding?: number\n\n /\n Height of the knob in pixels.\n /\n knobHeight?: number\n\n /\n Width of the knob in pixels.\n /\n knobWidth?: number\n\n /\n Orientation of the slider.\n /\n orientation?: 'horizontal' \| 'vertical'\n\n /\n The current position.\n /\n position?: number\n\n /\n Handler invoked when position changes. This can either be invoked from the `position` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`.\n \n @param position - The current slider position.\n * @param isDragging - Specifies if the position change is due to dragging.\n /\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /\n Handler invoked when dragging ends.\n /\n onDragEnd?: () => void\n\n /\n Handler invoked when dragging begins.\n /\n onDragStart?: () => void\n\n /\n Custom CSS provided to the track before the knob.\n /\n cssStartingTrack?: CSSProp\n\n /\n Custom CSS provided to the track after the knob.\n /\n cssEndingTrack?: CSSProp\n\n /\n Custom CSS provided to the knob.\n /\n cssKnob?: CSSProp\n\n /\n Custom CSS provided to the label inside the knob.\n /\n cssLabel?: CSSProp\n}\n\n/\n A slider component supporting both horizontal and vertical orientations whose sliding position (a\n * decimal between 0.0 and 1.0, inclusive) can be two-way binded. The component consists of four\n * customizable elements: a draggable knob, a label on the knob, a scroll track before the knob and\n * a scroll track after the knob. While the width and height of the slider is inferred from its CSS\n * rules, the width and height of the knob are set via props (`knobWidth` and `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n /\nexport default function Slider({\n isInverted = false,\n isTrackInteractive = true,\n onlyDispatchesOnDragEnd = false,\n trackPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n position: externalPosition = 0,\n labelProvider,\n onDragEnd,\n onDragStart,\n onPositionChange,\n cssStartingTrack,\n cssEndingTrack,\n cssKnob,\n cssLabel,\n ...props\n}: Props) {\n function transform(currentPosition: number, dx: number, dy: number): number {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n const naturalNewPositionX = naturalPosition rect.width + dx\n const naturalNewPositionY = naturalPosition * rect.height + dy\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n return newPosition\n }\n\n function onTrackClick(event: MouseEvent) {\n if (!isTrackInteractive) return\n\n const rect = Rect.from(rootRef.current) ?? new Rect()\n\n switch (orientation) {\n case 'horizontal': {\n const position = (event.clientX - rect.left) / rect.width\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n case 'vertical': {\n const position = (event.clientY - rect.top) / rect.height\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n }\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n initialValue: externalPosition,\n transform,\n onDragStart,\n onDragEnd,\n })\n\n // debug('Rendering...', 'OK')\n\n // Natural position is the position after taking `isInverted` into account.\n const naturalPosition = isInverted ? 1 - position : position\n\n useEffect(() => {\n if (isDragging \|\| externalPosition === position) return\n\n debug('Updating drag effect value from position prop...', 'OK', `prop=${externalPosition}, effect=${position}`)\n\n setPosition(externalPosition)\n }, [externalPosition])\n\n useEffect(() => {\n if (isDragging && onlyDispatchesOnDragEnd) return\n onPositionChange?.(position, isDragging)\n }, [position])\n\n useEffect(() => {\n if (isDragging \|\| !onlyDispatchesOnDragEnd) return\n onPositionChange?.(position, true)\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n <StyledStartingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssStartingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition100}% - ${trackPadding <= 0 ? 0 : knobHeight.5}px - ${trackPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition100}% - ${trackPadding <= 0 ? 0 : knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (position === 0) : (position === 1),\n 'at-start': isInverted ? (position === 1) : (position === 0),\n 'dragging': isDragging === true,\n })}\n css={cssKnob}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={cssLabel}>{labelProvider(position)}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledEndingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssEndingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)100}% - ${trackPadding <= 0 ? 0 : knobHeight.5}px - ${trackPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)100}% - ${trackPadding <= 0 ? 0 : knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledStartingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledEndingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };;\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}

package/lib/StepwiseSlider.js CHANGED Viewed

@@ -219,10 +219,10 @@ function StepwiseSlider(_a) {
     return (react_1.default.createElement(StyledRoot, __assign({ ref: rootRef, orientation: orientation }, props),
         react_1.default.createElement(StyledStartingTrack, { orientation: orientation, isClickable: isTrackInteractive, css: cssStartingTrack, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
                 top: 0,
-                height: "calc(".concat(naturalPosition * 100, "% - ").concat(knobHeight * .5, "px - ").concat(trackPadding, "px)"),
+                height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
             } : {
                 left: 0,
-                width: "calc(".concat(naturalPosition * 100, "% - ").concat(knobWidth * .5, "px - ").concat(trackPadding, "px)"),
+                width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
             } }),
         react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
                 left: '50%',
@@ -243,10 +243,10 @@ function StepwiseSlider(_a) {
                 } }, steps && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: cssLabel }, labelProvider(position, getNearestIndexByPosition(position, steps)))))),
         react_1.default.createElement(StyledEndingTrack, { orientation: orientation, isClickable: isTrackInteractive, css: cssEndingTrack, onClick: function (event) { return onTrackClick(event); }, style: orientation === 'vertical' ? {
                 bottom: 0,
-                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(trackPadding, "px)"),
+                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * .5, "px - ").concat(trackPadding, "px)"),
             } : {
                 right: 0,
-                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(trackPadding, "px)"),
+                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * .5, "px - ").concat(trackPadding, "px)"),
             } })));
 }
 exports.default = StepwiseSlider;

package/lib/StepwiseSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n /*\n By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n /\n isInverted?: boolean\n\n /\n Specifies if the track is clickable to set the position of the knob.\n /\n isTrackInteractive?: boolean\n\n /\n Indicates if position/index change events are dispatched only when dragging ends. When\n * disabled, aforementioned events are fired repeatedly while dragging.\n /\n onlyDispatchesOnDragEnd?: boolean\n\n /\n A function that returns the label to be displayed at a given slider position and closest step\n * index (if steps are provided).\n \n @param position - The current slider position.\n * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n \n @returns The label.\n /\n labelProvider?: (position: number, index: number) => string\n\n /\n Padding between the track and the knob in pixels.\n /\n trackPadding?: number\n\n /\n Height of the knob in pixels.\n /\n knobHeight?: number\n\n /\n Width of the knob in pixels.\n /\n knobWidth?: number\n\n /\n Orientation of the slider.\n /\n orientation?: 'horizontal' \| 'vertical'\n\n /\n An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the\n * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n * for the start of the track and one for the end.\n /\n steps?: readonly number[]\n\n /\n The current index.\n /\n index?: number\n\n /\n Handler invoked when index changes. This can either be invoked from the `index` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`. This event is emitted right after `onPositionChange`.\n \n @param index - The current slider index.\n * @param isDragging - Specifies if the index change is due to dragging.\n /\n onIndexChange?: (index: number, isDragging: boolean) => void\n\n /\n Handler invoked when position changes. This can either be invoked from the `index` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`. This event is emitted right before `onIndexChange`.\n \n @param position - The current slider position.\n * @param isDragging - Specifies if the position change is due to dragging.\n /\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /\n Handler invoked when dragging ends.\n /\n onDragEnd?: () => void\n\n /\n Handler invoked when dragging begins.\n /\n onDragStart?: () => void\n\n /\n Custom CSS provided to the track before the knob.\n /\n cssStartingTrack?: CSSProp<any>\n\n /\n Custom CSS provided to the track after the knob.\n /\n cssEndingTrack?: CSSProp<any>\n\n /\n Custom CSS provided to the knob.\n /\n cssKnob?: CSSProp<any>\n\n /\n Custom CSS provided to the label inside the knob.\n /\n cssLabel?: CSSProp<any>\n}\n\n/\n Generates a set of steps compatible with this component.\n \n @param length - The number of steps. This must be at least 2 because you must include the\n * starting and ending points.\n \n @returns An array of steps.\n /\nexport function generateSteps(length: number): readonly number[] {\n if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n const interval = 1 / (length - 1)\n\n return Array(length).fill(null).map((v, i) => {\n const position = interval i\n return position\n })\n}\n\n/*\n Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n \n @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n \n @returns The nearest index.\n /\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n let index = -1\n let minDelta = NaN\n\n for (let i = 0, n = steps.length; i < n; i++) {\n const step = getPositionAt(i, steps)\n\n if (isNaN(step)) continue\n\n const delta = Math.abs(position - step)\n\n if (isNaN(minDelta) \|\| (delta < minDelta)) {\n minDelta = delta\n index = i\n }\n }\n\n return index\n}\n\n/\n Gets the position by step index. This value ranges between 0 - 1, inclusive.\n \n @param index - The step index.\n * @param steps - The steps.\n \n @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n * returned.\n /\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n if (index >= steps.length) return NaN\n return steps[index]\n}\n\n/\n A \"stepwise\" slider component supporting both horizontal and vertical orientations that\n * automatically snaps to a set of predefined points on the slider when dragged. These points are\n * referred to as \"steps\", indexed by an integer referred to as \"index\". This index can be two-way\n * binded. The component consists of four customizable elements: a draggable knob, a label on the\n * knob, a scroll track before the knob and a scroll track after the knob. While the width and\n * height of the slider is inferred from its CSS rules, the width and height of the knob are set via\n * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size\n * of the slider. While dragging, the slider still emits a position change event, where the position\n * is a decimal ranging between 0.0 and 1.0, inclusive.\n /\nexport default function StepwiseSlider({\n id,\n className,\n isInverted = false,\n isTrackInteractive = true,\n onlyDispatchesOnDragEnd = false,\n trackPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n labelProvider,\n steps = generateSteps(10),\n index: externalIndex = 0,\n onIndexChange,\n onPositionChange,\n onDragEnd,\n onDragStart,\n cssStartingTrack,\n cssEndingTrack,\n cssKnob,\n cssLabel,\n ...props\n}: Props) {\n function transform(currentPosition: number, dx: number, dy: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n const naturalNewPositionX = naturalPosition rect.width + dx\n const naturalNewPositionY = naturalPosition * rect.height + dy\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n return newPosition\n }\n\n function onTrackClick(event: MouseEvent) {\n if (!isTrackInteractive) return\n\n const rect = Rect.from(rootRef.current) ?? new Rect()\n\n switch (orientation) {\n case 'horizontal': {\n const position = (event.clientX - rect.left) / rect.width\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n case 'vertical': {\n const position = (event.clientY - rect.top) / rect.height\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n }\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const [index, setIndex] = useState(externalIndex)\n\n const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n initialValue: getPositionAt(externalIndex, steps),\n transform,\n onDragStart,\n onDragEnd,\n })\n\n // Natural position is the position after taking `isInverted` into account.\n const naturalPosition = isInverted ? 1 - position : position\n\n useEffect(() => {\n if (isDragging) return\n\n const newPosition = getPositionAt(externalIndex, steps)\n\n if (position !== newPosition) {\n debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n setPosition(newPosition)\n }\n\n if (externalIndex !== index) {\n setIndex(externalIndex)\n }\n }, [externalIndex])\n\n useEffect(() => {\n if (isDragging && onlyDispatchesOnDragEnd) return\n\n onPositionChange?.(position, isDragging)\n\n const newIndex = getNearestIndexByPosition(position, steps)\n if (index !== newIndex) setIndex(newIndex)\n }, [position])\n\n useEffect(() => {\n onIndexChange?.(index, isDragging)\n }, [index])\n\n useEffect(() => {\n if (isDragging) return\n\n const nearestIndex = getNearestIndexByPosition(position, steps)\n const nearestPosition = getPositionAt(nearestIndex, steps)\n\n if (nearestPosition !== position \|\| onlyDispatchesOnDragEnd) {\n setPosition(nearestPosition)\n onPositionChange?.(nearestPosition, true)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n <StyledStartingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssStartingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition100}% - ${knobHeight.5}px - ${trackPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition100}% - ${knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (position === 0) : (position === 1),\n 'at-start': isInverted ? (position === 1) : (position === 0),\n 'dragging': isDragging,\n })}\n css={cssKnob}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {steps && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={cssLabel}>{labelProvider(position, getNearestIndexByPosition(position, steps))}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledEndingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssEndingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)100}% - ${knobHeight.5}px - ${trackPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)100}% - ${knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledStartingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledEndingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
1	+ {"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, MouseEvent, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n /*\n By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n * being the start.\n /\n isInverted?: boolean\n\n /\n Specifies if the track is clickable to set the position of the knob.\n /\n isTrackInteractive?: boolean\n\n /\n Indicates if position/index change events are dispatched only when dragging ends. When\n * disabled, aforementioned events are fired repeatedly while dragging.\n /\n onlyDispatchesOnDragEnd?: boolean\n\n /\n A function that returns the label to be displayed at a given slider position and closest step\n * index (if steps are provided).\n \n @param position - The current slider position.\n * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n \n @returns The label.\n /\n labelProvider?: (position: number, index: number) => string\n\n /\n Padding between the track and the knob in pixels.\n /\n trackPadding?: number\n\n /\n Height of the knob in pixels.\n /\n knobHeight?: number\n\n /\n Width of the knob in pixels.\n /\n knobWidth?: number\n\n /\n Orientation of the slider.\n /\n orientation?: 'horizontal' \| 'vertical'\n\n /\n An array of step descriptors. A step is a position (0 - 1 inclusive) on the track where the\n * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n * for the start of the track and one for the end.\n /\n steps?: readonly number[]\n\n /\n The current index.\n /\n index?: number\n\n /\n Handler invoked when index changes. This can either be invoked from the `index` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`. This event is emitted right after `onPositionChange`.\n \n @param index - The current slider index.\n * @param isDragging - Specifies if the index change is due to dragging.\n /\n onIndexChange?: (index: number, isDragging: boolean) => void\n\n /\n Handler invoked when position changes. This can either be invoked from the `index` prop\n * being changed or from the slider being dragged. Note that if the event is emitted at the end of\n * dragging due to `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n * still `true`. This event is emitted right before `onIndexChange`.\n \n @param position - The current slider position.\n * @param isDragging - Specifies if the position change is due to dragging.\n /\n onPositionChange?: (position: number, isDragging: boolean) => void\n\n /\n Handler invoked when dragging ends.\n /\n onDragEnd?: () => void\n\n /\n Handler invoked when dragging begins.\n /\n onDragStart?: () => void\n\n /\n Custom CSS provided to the track before the knob.\n /\n cssStartingTrack?: CSSProp<any>\n\n /\n Custom CSS provided to the track after the knob.\n /\n cssEndingTrack?: CSSProp<any>\n\n /\n Custom CSS provided to the knob.\n /\n cssKnob?: CSSProp<any>\n\n /\n Custom CSS provided to the label inside the knob.\n /\n cssLabel?: CSSProp<any>\n}\n\n/\n Generates a set of steps compatible with this component.\n \n @param length - The number of steps. This must be at least 2 because you must include the\n * starting and ending points.\n \n @returns An array of steps.\n /\nexport function generateSteps(length: number): readonly number[] {\n if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n const interval = 1 / (length - 1)\n\n return Array(length).fill(null).map((v, i) => {\n const position = interval i\n return position\n })\n}\n\n/*\n Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n \n @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n \n @returns The nearest index.\n /\nfunction getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n let index = -1\n let minDelta = NaN\n\n for (let i = 0, n = steps.length; i < n; i++) {\n const step = getPositionAt(i, steps)\n\n if (isNaN(step)) continue\n\n const delta = Math.abs(position - step)\n\n if (isNaN(minDelta) \|\| (delta < minDelta)) {\n minDelta = delta\n index = i\n }\n }\n\n return index\n}\n\n/\n Gets the position by step index. This value ranges between 0 - 1, inclusive.\n \n @param index - The step index.\n * @param steps - The steps.\n \n @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n * returned.\n /\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n if (index >= steps.length) return NaN\n return steps[index]\n}\n\n/\n A \"stepwise\" slider component supporting both horizontal and vertical orientations that\n * automatically snaps to a set of predefined points on the slider when dragged. These points are\n * referred to as \"steps\", indexed by an integer referred to as \"index\". This index can be two-way\n * binded. The component consists of four customizable elements: a draggable knob, a label on the\n * knob, a scroll track before the knob and a scroll track after the knob. While the width and\n * height of the slider is inferred from its CSS rules, the width and height of the knob are set via\n * props (`knobWidth` and `knobHeight`, respectively). The size of the knob does not impact the size\n * of the slider. While dragging, the slider still emits a position change event, where the position\n * is a decimal ranging between 0.0 and 1.0, inclusive.\n /\nexport default function StepwiseSlider({\n id,\n className,\n isInverted = false,\n isTrackInteractive = true,\n onlyDispatchesOnDragEnd = false,\n trackPadding = 0,\n knobHeight = 30,\n knobWidth = 30,\n orientation = 'vertical',\n labelProvider,\n steps = generateSteps(10),\n index: externalIndex = 0,\n onIndexChange,\n onPositionChange,\n onDragEnd,\n onDragStart,\n cssStartingTrack,\n cssEndingTrack,\n cssKnob,\n cssLabel,\n ...props\n}: Props) {\n function transform(currentPosition: number, dx: number, dy: number) {\n const rect = Rect.from(rootRef.current) ?? new Rect()\n const naturalPosition = isInverted ? 1 - currentPosition : currentPosition\n const naturalNewPositionX = naturalPosition rect.width + dx\n const naturalNewPositionY = naturalPosition * rect.height + dy\n const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n return newPosition\n }\n\n function onTrackClick(event: MouseEvent) {\n if (!isTrackInteractive) return\n\n const rect = Rect.from(rootRef.current) ?? new Rect()\n\n switch (orientation) {\n case 'horizontal': {\n const position = (event.clientX - rect.left) / rect.width\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n case 'vertical': {\n const position = (event.clientY - rect.top) / rect.height\n const naturalPosition = isInverted ? 1 - position : position\n setPosition(naturalPosition)\n break\n }\n }\n }\n\n const rootRef = useRef<HTMLDivElement>(null)\n const knobRef = useRef<HTMLButtonElement>(null)\n\n const [index, setIndex] = useState(externalIndex)\n\n const { isDragging: [isDragging], value: [position, setPosition] } = useDragEffect(knobRef, {\n initialValue: getPositionAt(externalIndex, steps),\n transform,\n onDragStart,\n onDragEnd,\n })\n\n // Natural position is the position after taking `isInverted` into account.\n const naturalPosition = isInverted ? 1 - position : position\n\n useEffect(() => {\n if (isDragging) return\n\n const newPosition = getPositionAt(externalIndex, steps)\n\n if (position !== newPosition) {\n debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\n setPosition(newPosition)\n }\n\n if (externalIndex !== index) {\n setIndex(externalIndex)\n }\n }, [externalIndex])\n\n useEffect(() => {\n if (isDragging && onlyDispatchesOnDragEnd) return\n\n onPositionChange?.(position, isDragging)\n\n const newIndex = getNearestIndexByPosition(position, steps)\n if (index !== newIndex) setIndex(newIndex)\n }, [position])\n\n useEffect(() => {\n onIndexChange?.(index, isDragging)\n }, [index])\n\n useEffect(() => {\n if (isDragging) return\n\n const nearestIndex = getNearestIndexByPosition(position, steps)\n const nearestPosition = getPositionAt(nearestIndex, steps)\n\n if (nearestPosition !== position \|\| onlyDispatchesOnDragEnd) {\n setPosition(nearestPosition)\n onPositionChange?.(nearestPosition, true)\n }\n }, [isDragging])\n\n return (\n <StyledRoot ref={rootRef} orientation={orientation} {...props}>\n <StyledStartingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssStartingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n top: 0,\n height: `calc(${naturalPosition100}% - ${trackPadding <= 0 ? 0 : knobHeight.5}px - ${trackPadding}px)`,\n } : {\n left: 0,\n width: `calc(${naturalPosition100}% - ${trackPadding <= 0 ? 0 : knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n <StyledKnobContainer ref={knobRef} style={{\n transform: 'translate3d(-50%, -50%, 0)',\n ...(orientation === 'vertical' ? {\n left: '50%',\n top: `${naturalPosition100}%`,\n transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n } : {\n left: `${naturalPosition100}%`,\n top: '50%',\n transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n }),\n }}>\n <StyledKnob\n className={classNames({\n 'at-end': isInverted ? (position === 0) : (position === 1),\n 'at-start': isInverted ? (position === 1) : (position === 0),\n 'dragging': isDragging,\n })}\n css={cssKnob}\n style={{\n height: `${knobHeight}px`,\n width: `${knobWidth}px`,\n }}\n >\n {steps && labelProvider && (\n <StyledLabel knobHeight={knobHeight} css={cssLabel}>{labelProvider(position, getNearestIndexByPosition(position, steps))}</StyledLabel>\n )}\n </StyledKnob>\n </StyledKnobContainer>\n <StyledEndingTrack orientation={orientation} isClickable={isTrackInteractive} css={cssEndingTrack} onClick={event => onTrackClick(event)}\n style={orientation === 'vertical' ? {\n bottom: 0,\n height: `calc(${(1 - naturalPosition)100}% - ${trackPadding <= 0 ? 0 : knobHeight.5}px - ${trackPadding}px)`,\n } : {\n right: 0,\n width: `calc(${(1 - naturalPosition)100}% - ${trackPadding <= 0 ? 0 : knobWidth.5}px - ${trackPadding}px)`,\n }}\n />\n </StyledRoot>\n )\n}\n\nconst StyledStartingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledEndingTrack = styled.div<{\n orientation: NonNullable<Props['orientation']>\n isClickable: boolean\n}>`\n background: #fff;\n cursor: ${props => props.isClickable ? 'pointer' : 'auto' };\n pointer-events: ${props => props.isClickable ? 'auto' : 'none' };\n position: absolute;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n &::after {\n content: '';\n height: 100%;\n min-height: 20px;\n min-width: 20px;\n position: absolute;\n transform: ${props => props.orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)'};\n width: 100%;\n }\n\n ${props => props.orientation === 'vertical' ? css`\n left: 0;\n margin: 0 auto;\n right: 0;\n width: 100%;\n ` : css`\n bottom: 0;\n height: 100%;\n margin: auto 0;\n top: 0;\n `}\n\n ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n color: #000;\n font-size: ${props => props.knobHeight * .5}px;\n pointer-events: none;\n user-select: none;\n\n ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n position: absolute;\n z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n align-items: center;\n background: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 1;\n touch-action: none;\n transition-duration: 100ms;\n transition-property: background, color, opacity, transform;\n transition-timing-function: ease-out;\n\n ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n position: relative;\n width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}

package/lib/WithTooltip.d.ts CHANGED Viewed

@@ -13,14 +13,14 @@ declare type Props = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).
      */
     disabledOnTouch?: boolean;
-    /**
-     * The offset (in pixels) between the target element and the tooltip, defaults to zero.
-     */
-    offset?: number;
     /**
      * The hint string to display in the tooltip.
      */
     hint: string;
+    /**
+     * 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').
      */
@@ -36,5 +36,5 @@ declare type Props = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      */
     cssDialog?: CSSProp<any>;
 };
-export default function WithTooltip({ arrowHeight, backgroundColor, cssDialog, disabledOnTouch, hint, offset, textColor, threshold, ...props }: Props): JSX.Element;
+export default function WithTooltip({ arrowHeight, backgroundColor, cssDialog, disabledOnTouch, hint, gap, textColor, threshold, ...props }: Props): JSX.Element;
 export {};

package/lib/WithTooltip.js CHANGED Viewed

@@ -69,7 +69,7 @@ var spase_1 = require("spase");
 var styled_components_1 = __importStar(require("styled-components"));
 var ExtractChildren_1 = __importDefault(require("./ExtractChildren"));
 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.offset, offset = _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", "offset", "textColor", "threshold"]);
+    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 _h = __read((0, react_1.useState)(new spase_1.Size()), 2), textSize = _h[0], setTextSize = _h[1];
     var _j = __read((0, react_1.useState)('bc'), 2), position = _j[0], setPosition = _j[1];
     function computePosition(target, threshold) {
@@ -77,9 +77,9 @@ function WithTooltip(_a) {
         var rect = spase_1.Rect.intersecting(target);
         if (rect) {
             var leftBound = (rect.center.x - vrect.left) < threshold;
-            var rightBound = (vrect.center.x - rect.right) < threshold;
+            var rightBound = (vrect.right - rect.center.x) < threshold;
             var topBound = (rect.center.y - vrect.top) < threshold;
-            var bottomBound = (vrect.center.y - rect.bottom) < threshold;
+            var bottomBound = (vrect.bottom - rect.center.y) < threshold;
             if (leftBound && topBound)
                 return 'br';
             if (leftBound && bottomBound)
@@ -113,8 +113,9 @@ function WithTooltip(_a) {
         div.style.visibility = 'hidden';
         div.style.whiteSpace = 'no-wrap';
         document.body.appendChild(div);
-        var width = div.clientWidth;
-        var height = div.clientHeight;
+        // Add 1px as buffer to mitigate precision discrepancies.
+        var width = div.clientWidth + 1;
+        var height = div.clientHeight + 1;
         document.body.removeChild(div);
         return new spase_1.Size([width, height]);
     }
@@ -122,10 +123,10 @@ function WithTooltip(_a) {
         setTextSize(computeTextSize(event.currentTarget));
         setPosition(computePosition(event.currentTarget, threshold));
     }
-    return (react_1.default.createElement(StyledRoot, __assign({ position: position, arrowHeight: arrowHeight, backgroundColor: backgroundColor, cssDialog: cssDialog, disabledOnTouch: disabledOnTouch, hint: hint, offset: offset, onMouseOver: function (event) { return onMouseOver(event); }, textColor: textColor, textSize: textSize }, props)));
+    return (react_1.default.createElement(StyledRoot, __assign({ arrowHeight: arrowHeight, backgroundColor: backgroundColor, cssDialog: cssDialog, disabledOnTouch: disabledOnTouch, hint: hint, gap: gap, onMouseOver: function (event) { return onMouseOver(event); }, position: position, textColor: textColor, textSize: textSize }, props)));
 }
 exports.default = WithTooltip;
-function _cssDisplacement(position, arrowHeight, offset) {
+function _cssDisplacement(position, arrowHeight, gap) {
     switch (position) {
         case 'tl': return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["top: ", "px; left: 100%;"], ["top: ", "px; left: 100%;"])), -arrowHeight);
         case 'tc': return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["top: ", "px; left: 50%;"], ["top: ", "px; left: 50%;"])), -arrowHeight);
@@ -137,19 +138,19 @@ function _cssDisplacement(position, arrowHeight, offset) {
         case 'br': return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["bottom: ", "px; right: 100%;"], ["bottom: ", "px; right: 100%;"])), -arrowHeight);
     }
 }
-function _cssDialog(position, arrowHeight, offset) {
+function _cssDialog(position, arrowHeight, gap) {
     switch (position) {
-        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);"])), offset, offset);
-        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);"])), offset);
-        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);"])), offset, offset);
-        case 'cl': return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), -50%, 0);"], ["transform: translate3d(calc(-100% - ", "px), -50%, 0);"])), offset);
-        case 'cr': return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), -50%, 0);"], ["transform: translate3d(calc(100% + ", "px), -50%, 0);"])), offset);
-        case 'bl': return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"], ["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"])), offset, offset);
-        case 'bc': return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["transform: translate3d(-50%, calc(100% + ", "px), 0);"], ["transform: translate3d(-50%, calc(100% + ", "px), 0);"])), offset);
-        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);"])), offset, offset);
+        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);
+        case 'cl': return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), -50%, 0);"], ["transform: translate3d(calc(-100% - ", "px), -50%, 0);"])), gap);
+        case 'cr': return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), -50%, 0);"], ["transform: translate3d(calc(100% + ", "px), -50%, 0);"])), gap);
+        case 'bl': return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"], ["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"])), gap, gap);
+        case 'bc': return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["transform: translate3d(-50%, calc(100% + ", "px), 0);"], ["transform: translate3d(-50%, calc(100% + ", "px), 0);"])), 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 _cssArrow(position, arrowHeight, offset, color) {
+function _cssArrow(position, arrowHeight, gap, color) {
     return (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), function () {
         switch (position) {
             case 'tl': return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
@@ -163,17 +164,17 @@ function _cssArrow(position, arrowHeight, offset, color) {
         }
     }, function () {
         switch (position) {
-            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);"])), offset, arrowHeight * 3, offset);
-            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);"])), offset);
-            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);"])), offset, arrowHeight, offset);
-            case 'cl': return (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px), -50%, 0);"], ["transform: translate3d(calc(0% - ", "px), -50%, 0);"])), offset);
-            case 'cr': return (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["transform: translate3d(calc(0% + ", "px), -50%, 0);"], ["transform: translate3d(calc(0% + ", "px), -50%, 0);"])), offset);
-            case 'bl': return (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% + ", "px), 0);"], ["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% + ", "px), 0);"])), offset, arrowHeight * 3, offset);
-            case 'bc': return (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["transform: translate3d(-50%, calc(0% + ", "px), 0);"], ["transform: translate3d(-50%, calc(0% + ", "px), 0);"])), offset);
-            case 'br': return (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"])), offset, arrowHeight, offset);
+            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);
+            case 'cl': return (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px), -50%, 0);"], ["transform: translate3d(calc(0% - ", "px), -50%, 0);"])), gap);
+            case 'cr': return (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["transform: translate3d(calc(0% + ", "px), -50%, 0);"], ["transform: translate3d(calc(0% + ", "px), -50%, 0);"])), gap);
+            case 'bl': return (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __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 'bc': return (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["transform: translate3d(-50%, calc(0% + ", "px), 0);"], ["transform: translate3d(-50%, calc(0% + ", "px), 0);"])), gap);
+            case 'br': return (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"])), gap, arrowHeight, gap);
         }
     });
 }
-var StyledRoot = (0, styled_components_1.default)(ExtractChildren_1.default)(templateObject_34 || (templateObject_34 = __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  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 240px;\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    width: ", ";\n    z-index: 10000;\n\n    ", "\n    ", "\n    ", "\n  }\n\n  ", " {\n    opacity: 1;\n  }\n\n  ", " {\n    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  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 240px;\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    width: ", ";\n    z-index: 10000;\n\n    ", "\n    ", "\n    ", "\n  }\n\n  ", " {\n    opacity: 1;\n  }\n\n  ", " {\n    opacity: 1;\n  }\n"])), function (props) { return props.arrowHeight; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor); }, function (props) { return 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.textSize.width > 0 ? props.textSize.width : 'auto'; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.offset); }, function (props) { return _cssDialog(props.position, props.arrowHeight, props.offset); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'; });
+var StyledRoot = (0, styled_components_1.default)(ExtractChildren_1.default)(templateObject_34 || (templateObject_34 = __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  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 240px;\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    width: ", ";\n    z-index: 10000;\n\n    ", "\n    ", "\n    ", "\n  }\n\n  ", " {\n    opacity: 1;\n  }\n\n  ", " {\n    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  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 240px;\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    width: ", ";\n    z-index: 10000;\n\n    ", "\n    ", "\n    ", "\n  }\n\n  ", " {\n    opacity: 1;\n  }\n\n  ", " {\n    opacity: 1;\n  }\n"])), function (props) { return props.arrowHeight; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.gap); }, function (props) { return _cssArrow(props.position, props.arrowHeight, props.gap, props.backgroundColor); }, function (props) { return 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.textSize.width > 0 ? "".concat(props.textSize.width, "px") : 'auto'; }, function (props) { return _cssDisplacement(props.position, props.arrowHeight, props.gap); }, function (props) { return _cssDialog(props.position, props.arrowHeight, props.gap); }, function (props) { return props.disabledOnTouch ? 'html.touch & { display: none; }' : ''; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'; }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'; });
 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;
 //# sourceMappingURL=WithTooltip.js.map

package/lib/WithTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, PropsWithChildren, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChildren from './ExtractChildren'\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 offset (in pixels) between the target element and the tooltip, defaults to zero.\n /\n offset?: number\n\n /\n The hint string to display in the tooltip.\n /\n hint: string\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 offset = 5,\n textColor = '#fff',\n threshold = 100,\n ...props\n}: Props) {\n const [textSize, setTextSize] = useState<Size>(new Size())\n const [position, setPosition] = useState<Position>('bc')\n\n function 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.center.x - vrect.left) < threshold\n const rightBound = (vrect.center.x - rect.right) < threshold\n const topBound = (rect.center.y - vrect.top) < threshold\n const bottomBound = (vrect.center.y - 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 function computeTextSize(target: Element): 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.height = '30px'\n div.style.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'no-wrap'\n\n document.body.appendChild(div)\n const width = div.clientWidth\n const height = div.clientHeight\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n function onMouseOver(event: MouseEvent) {\n setTextSize(computeTextSize(event.currentTarget))\n setPosition(computePosition(event.currentTarget, threshold))\n }\n\n return (\n <StyledRoot\n position={position}\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\n cssDialog={cssDialog}\n disabledOnTouch={disabledOnTouch}\n hint={hint}\n offset={offset}\n onMouseOver={event => onMouseOver(event)}\n textColor={textColor}\n textSize={textSize}\n {...props}\n />\n )\n}\n\nfunction _cssDisplacement(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`top: ${-arrowHeight}px; left: 100%;`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: 100%;`\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: 100%;`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: 100%;`\n }\n}\n\nfunction _cssDialog(position: Position, arrowHeight: number, offset: number): CSSProp {\n switch (position) {\n case 'tl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px), calc(-100% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(-100% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(100% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(-100% - ${offset}px), calc(100% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(100% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px), calc(100% + ${offset}px), 0);`\n }\n}\n\nfunction _cssArrow(position: Position, arrowHeight: number, offset: 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 switch (position) {\n case 'tl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight3}px), calc(0% - ${offset}px), 0);`\n case 'tc': return css`transform: translate3d(-50%, calc(0% - ${offset}px), 0);`\n case 'tr': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% - ${offset}px), 0);`\n case 'cl': return css`transform: translate3d(calc(0% - ${offset}px), -50%, 0);`\n case 'cr': return css`transform: translate3d(calc(0% + ${offset}px), -50%, 0);`\n case 'bl': return css`transform: translate3d(calc(0% - ${offset}px - ${arrowHeight*3}px), calc(0% + ${offset}px), 0);`\n case 'bc': return css`transform: translate3d(-50%, calc(0% + ${offset}px), 0);`\n case 'br': return css`transform: translate3d(calc(100% + ${offset}px + ${arrowHeight}px), calc(0% + ${offset}px), 0);`\n }\n }}\n `\n}\n\nconst StyledRoot = styled(ExtractChildren)<{\n arrowHeight: number\n backgroundColor: string\n cssDialog?: CSSProp\n disabledOnTouch: boolean\n hint: string\n offset: 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 => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssArrow(props.position, props.arrowHeight, props.offset, props.backgroundColor)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\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 width: ${props => props.textSize.width > 0 ? props.textSize.width : 'auto'};\n z-index: 10000;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.offset)}\n ${props => _cssDialog(props.position, props.arrowHeight, props.offset)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'} {\n opacity: 1;\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'} {\n opacity: 1;\n }\n`\n"]}
1	+ {"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, PropsWithChildren, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChildren from './ExtractChildren'\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 [textSize, setTextSize] = useState<Size>(new Size())\n const [position, setPosition] = useState<Position>('bc')\n\n function 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.center.x - vrect.left) < threshold\n const rightBound = (vrect.right - rect.center.x) < threshold\n const topBound = (rect.center.y - vrect.top) < threshold\n const bottomBound = (vrect.bottom - rect.center.y) < 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 function computeTextSize(target: Element): 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.height = '30px'\n div.style.left = '0'\n div.style.position = 'absolute'\n div.style.top = '0'\n div.style.visibility = 'hidden'\n div.style.whiteSpace = 'no-wrap'\n\n document.body.appendChild(div)\n // Add 1px as buffer to mitigate precision discrepancies.\n const width = div.clientWidth + 1\n const height = div.clientHeight + 1\n document.body.removeChild(div)\n\n return new Size([width, height])\n }\n\n function onMouseOver(event: MouseEvent) {\n setTextSize(computeTextSize(event.currentTarget))\n setPosition(computePosition(event.currentTarget, threshold))\n }\n\n return (\n <StyledRoot\n arrowHeight={arrowHeight}\n backgroundColor={backgroundColor}\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 _cssDisplacement(position: Position, arrowHeight: number, gap: number): CSSProp {\n switch (position) {\n case 'tl': return css`top: ${-arrowHeight}px; left: 100%;`\n case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n case 'tr': return css`top: ${-arrowHeight}px; right: 100%;`\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: 100%;`\n case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n case 'br': return css`bottom: ${-arrowHeight}px; right: 100%;`\n }\n}\n\nfunction _cssDialog(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 _cssArrow(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 switch (position) {\n case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight3}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(ExtractChildren)<{\n arrowHeight: number\n backgroundColor: string\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 => _cssDisplacement(props.position, props.arrowHeight, props.gap)}\n ${props => _cssArrow(props.position, props.arrowHeight, props.gap, props.backgroundColor)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n &::after {\n box-sizing: content-box;\n font-size: 12px;\n max-width: 240px;\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 width: ${props => props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n z-index: 10000;\n\n ${props => _cssDisplacement(props.position, props.arrowHeight, props.gap)}\n ${props => _cssDialog(props.position, props.arrowHeight, props.gap)}\n ${props => props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::before' : '&:hover::before'} {\n opacity: 1;\n }\n\n ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover::after' : '&:hover::after'} {\n opacity: 1;\n }\n`\n"]}

package/package.json CHANGED Viewed

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