@feathery/react 2.10.3 → 2.11.0

package/dist/cjs/fthry_FormControl.BlJZjs35.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+
+// Simple input used for the 'other' option in checkbox and radio groups
+function FormControl(_a) {
+    var _b = _a.type, type = _b === void 0 ? 'text' : _b, htmlSize = _a.htmlSize, css = _a.css, props = index.__rest(_a, ["type", "htmlSize", "css"]);
+    return (index.jsx("input", index.__assign({ type: type, size: htmlSize, css: index.__assign({ border: '1px solid #ced4da', borderRadius: '0.375rem', padding: '0.375rem 0.75rem', fontSize: '1rem', lineHeight: '1.5', color: '#495057', backgroundColor: '#fff', backgroundClip: 'padding-box', transition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out', '&:focus': {
+                borderColor: '#80bdff',
+                outline: 0,
+                boxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)'
+            }, '&:disabled': {
+                backgroundColor: '#e9ecef',
+                opacity: 1
+            } }, css) }, props)));
+}
+
+exports.FormControl = FormControl;

package/dist/cjs/fthry_InlineTooltip.BkttK4lB.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+var React = require('react');
+var Overlay = require('./fthry_Overlay.OLX1E5Mx.js');
+
+function HelpIcon(_a) {
+    var _b = _a.cssStyles, cssStyles = _b === void 0 ? {} : _b, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c;
+    return (index.jsx("svg", index.__assign({ css: cssStyles, width: '100%', height: '100%', viewBox: '0 0 10 10', fill: 'black', xmlns: 'http://www.w3.org/2000/svg', onClick: onClick }, { children: index.jsx("path", { d: 'M10 5C10 2.23571 7.75714 0 5 0C2.23571 0 0 2.23571 0 5C0 7.76429 2.23571 10 5 10C7.75714 10 10 7.76429 10 5ZM5.5 6.05714H4.38571V5.75C4.38571 5.47857 4.44286 5.25 4.55714 5.05C4.67143 4.85 4.88571 4.64286 5.18571 4.41429C5.47857 4.20714 5.67143 4.03571 5.76429 3.90714C5.86429 3.77857 5.90714 3.62857 5.90714 3.46429C5.90714 3.28571 5.84286 3.15 5.70714 3.05C5.57143 2.95714 5.38571 2.91429 5.14286 2.91429C4.72857 2.91429 4.25 3.05 3.71429 3.32143L3.25714 2.40714C3.87857 2.05714 4.54286 1.87857 5.23571 1.87857C5.81429 1.87857 6.27143 2.02143 6.60714 2.29286C6.95 2.57143 7.11429 2.94286 7.11429 3.4C7.11429 3.70714 7.05 3.97143 6.90714 4.19286C6.77143 4.42143 6.5 4.67143 6.11429 4.95C5.84286 5.15 5.67857 5.3 5.60714 5.4C5.53571 5.50714 5.5 5.64286 5.5 5.80714V6.05714ZM4.45 8.01429C4.32143 7.89286 4.25714 7.71429 4.25714 7.49286C4.25714 7.25714 4.31429 7.07857 4.44286 6.95714C4.57143 6.83571 4.75 6.77857 4.99286 6.77857C5.22143 6.77857 5.4 6.84286 5.52857 6.96429C5.65714 7.08571 5.72143 7.26429 5.72143 7.49286C5.72143 7.70714 5.65714 7.88571 5.52857 8.00714C5.4 8.13571 5.22143 8.2 4.99286 8.2C4.75714 8.2 4.57857 8.13571 4.45 8.01429Z' }) })));
+}
+
+function InlineTooltip(_a) {
+    var id = _a.id, text = _a.text, responsiveStyles = _a.responsiveStyles, _b = _a.absolute, absolute = _b === void 0 ? true : _b, containerRef = _a.containerRef, repeat = _a.repeat;
+    var _c = index.__read(React.useState(false), 2), show = _c[0], setShow = _c[1];
+    var triggerRef = React.useRef(null);
+    text = index.replaceTextVariables(text, repeat);
+    if (!text)
+        return null;
+    var isMobile = index.isMobile();
+    return (index.jsxs(index.Fragment, { children: [index.jsx("div", index.__assign({ ref: triggerRef, 
+                // this prevents needing to click twice on mobile
+                onMouseEnter: isMobile ? undefined : function () { return setShow(true); }, onMouseLeave: isMobile ? undefined : function () { return setShow(false); }, onFocus: function () { return setShow(true); }, onBlur: function () { return setShow(false); }, onClick: function () { return setShow(function (prev) { return !prev; }); }, css: absolute
+                    ? {
+                        position: 'absolute',
+                        insetInlineEnd: '10px',
+                        top: 0,
+                        bottom: 0,
+                        zIndex: index.FORM_Z_INDEX,
+                        margin: 'auto',
+                        cursor: 'pointer',
+                        height: '100%',
+                        display: 'flex'
+                    }
+                    : {
+                        position: 'relative',
+                        marginInlineStart: '8px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    } }, { children: index.jsx(HelpIcon, { cssStyles: responsiveStyles.getTarget('tooltipIcon') }) })), index.jsx(Overlay.Overlay, index.__assign({ show: show, targetRef: triggerRef, containerRef: containerRef, placement: 'left', onHide: function () { return setShow(false); }, offset: 8 }, { children: index.jsx(Overlay.Tooltip, index.__assign({ id: "tooltip-".concat(id), css: {
+                        zIndex: index.FORM_Z_INDEX + 1,
+                        padding: '.4rem 0',
+                        transition: 'opacity .10s linear',
+                        '.tooltip-inner': {
+                            maxWidth: '200px',
+                            padding: '.25rem .5rem',
+                            color: '#fff',
+                            textAlign: 'center',
+                            backgroundColor: '#000',
+                            borderRadius: '.25rem',
+                            fontSize: 'smaller'
+                        }
+                    } }, { children: text })) }))] }));
+}
+
+exports.InlineTooltip = InlineTooltip;

package/dist/cjs/fthry_Overlay.OLX1E5Mx.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var Tooltip = function (_a) {
+    var children = _a.children, css = _a.css, props = index.__rest(_a, ["children", "css"]);
+    return (index.jsx("div", index.__assign({ css: index.__assign({ zIndex: index.FORM_Z_INDEX + 1, padding: '.4rem 0', transition: 'opacity .10s linear', '.tooltip-inner': {
+                maxWidth: '200px',
+                padding: '.25rem .5rem',
+                color: '#fff',
+                textAlign: 'center',
+                backgroundColor: '#000',
+                borderRadius: '.25rem',
+                fontSize: 'smaller'
+            } }, css) }, props, { children: index.jsx("div", index.__assign({ className: 'tooltip-inner' }, { children: children })) })));
+};
+
+var Overlay = function (_a) {
+    var show = _a.show, targetRef = _a.targetRef, children = _a.children, onHide = _a.onHide, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c, _d = _a.zIndex, zIndex = _d === void 0 ? 1000 : _d, containerRef = _a.containerRef;
+    var ref = React.useRef(null);
+    var _e = index.__read(React.useState(null), 2), position = _e[0], setPosition = _e[1];
+    var getContainer = React.useCallback(function () {
+        return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || index.featheryDoc().body;
+    }, [containerRef]);
+    var recalcPosition = React.useCallback(function () {
+        var _a;
+        if (!show || !targetRef.current || !ref.current)
+            return;
+        var window = index.featheryWindow();
+        var container = getContainer();
+        if (!container)
+            return;
+        var targetRect = targetRef.current.getBoundingClientRect();
+        var overlayRect = ref.current.getBoundingClientRect();
+        var containerRect = container.getBoundingClientRect();
+        var _b = calcPosition(placement, targetRect, overlayRect, offset), top = _b.top, left = _b.left;
+        // Flip if it doesn’t fit
+        var overlayBottom = top + overlayRect.height;
+        var overlayRight = left + overlayRect.width;
+        var fitsVertically = top >= 0 && overlayBottom <= window.innerHeight;
+        var fitsHorizontally = left >= 0 && overlayRight <= window.innerWidth;
+        if (!fitsVertically || !fitsHorizontally) {
+            var flipped = getFlippedPlacement(placement, !fitsVertically, !fitsHorizontally);
+            if (flipped !== placement) {
+                (_a = calcPosition(flipped, targetRect, overlayRect, offset), top = _a.top, left = _a.left);
+            }
+        }
+        var isBodyContainer = container === index.featheryDoc().body;
+        var finalTop = isBodyContainer
+            ? top + window.scrollY
+            : top - containerRect.top;
+        var finalLeft = isBodyContainer
+            ? left + window.scrollX
+            : left - containerRect.left;
+        setPosition(function (prev) {
+            if (!prev || prev.top !== finalTop || prev.left !== finalLeft) {
+                return { top: finalTop, left: finalLeft };
+            }
+            return prev;
+        });
+    }, [show, placement, offset, getContainer, targetRef]);
+    var throttledRecalc = React.useCallback(function () {
+        var ticking = false;
+        return function () {
+            if (!ticking) {
+                ticking = true;
+                requestAnimationFrame(function () {
+                    recalcPosition();
+                    ticking = false;
+                });
+            }
+        };
+    }, [recalcPosition])();
+    React.useLayoutEffect(function () {
+        if (show)
+            recalcPosition();
+    }, [show, recalcPosition]);
+    React.useEffect(function () {
+        if (!show)
+            return;
+        var window = index.featheryWindow();
+        var container = getContainer();
+        if (!container)
+            return;
+        window.addEventListener('resize', throttledRecalc);
+        window.addEventListener('scroll', throttledRecalc, true);
+        if (container !== index.featheryDoc().body) {
+            container.addEventListener('scroll', throttledRecalc);
+        }
+        var resizeObserver = new ResizeObserver(function () { return throttledRecalc(); });
+        if (targetRef.current)
+            resizeObserver.observe(targetRef.current);
+        if (container !== index.featheryDoc().body)
+            resizeObserver.observe(container);
+        return function () {
+            window.removeEventListener('resize', throttledRecalc);
+            window.removeEventListener('scroll', throttledRecalc, true);
+            if (container !== index.featheryDoc().body) {
+                container.removeEventListener('scroll', throttledRecalc);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [show, throttledRecalc, getContainer, targetRef]);
+    React.useEffect(function () {
+        if (!show)
+            return;
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape') {
+                setPosition(null);
+                onHide === null || onHide === void 0 ? void 0 : onHide();
+            }
+        };
+        var handleClickOutside = function (event) {
+            var target = event.target;
+            if (ref.current &&
+                !ref.current.contains(target) &&
+                targetRef.current &&
+                !targetRef.current.contains(target)) {
+                setPosition(null);
+                onHide === null || onHide === void 0 ? void 0 : onHide();
+            }
+        };
+        var doc = index.featheryDoc();
+        doc.addEventListener('mousedown', handleClickOutside);
+        doc.addEventListener('keydown', handleKeyDown);
+        return function () {
+            doc.removeEventListener('mousedown', handleClickOutside);
+            doc.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [show, onHide, targetRef]);
+    if (!show)
+        return null;
+    var container = getContainer();
+    if (!container)
+        return index.jsx(index.Fragment, { children: children });
+    return ReactDOM.createPortal(index.jsx("div", index.__assign({ ref: ref, style: index.__assign(index.__assign({ position: 'absolute' }, (position || { top: -9999, left: -9999 })), { zIndex: zIndex }) }, { children: children })), container);
+};
+var getFlippedPlacement = function (original, needsVerticalFlip, needsHorizontalFlip) {
+    if (needsVerticalFlip) {
+        if (original.includes('top')) {
+            return original.replace('top', 'bottom');
+        }
+        if (original.includes('bottom')) {
+            return original.replace('bottom', 'top');
+        }
+    }
+    if (needsHorizontalFlip) {
+        if (original.includes('left')) {
+            return original.replace('left', 'right');
+        }
+        if (original.includes('right')) {
+            return original.replace('right', 'left');
+        }
+    }
+    return original;
+};
+var calcPosition = function (pl, targetRect, overlayRect, offset) {
+    if (offset === void 0) { offset = 0; }
+    switch (pl) {
+        case 'top':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+        case 'top-start':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.left
+            };
+        case 'top-end':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.right - overlayRect.width
+            };
+        case 'left':
+            return {
+                top: targetRect.top + (targetRect.height - overlayRect.height) / 2,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'left-start':
+            return {
+                top: targetRect.top,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'left-end':
+            return {
+                top: targetRect.bottom - overlayRect.height,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'bottom':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+        case 'bottom-start':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left
+            };
+        case 'bottom-end':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.right - overlayRect.width
+            };
+        case 'right':
+            return {
+                top: targetRect.top + (targetRect.height - overlayRect.height) / 2,
+                left: targetRect.right + offset
+            };
+        case 'right-start':
+            return {
+                top: targetRect.top,
+                left: targetRect.right + offset
+            };
+        case 'right-end':
+            return {
+                top: targetRect.bottom - overlayRect.height,
+                left: targetRect.right + offset
+            };
+        default:
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+    }
+};
+
+exports.Overlay = Overlay;
+exports.Tooltip = Tooltip;