@feathery/react 2.6.7 → 2.7.1

package/dist/elements/styles.d.ts

@@ -1,65 +1,65 @@
-import { CSSProperties } from 'react';
-export declare const DEFAULT_MOBILE_BREAKPOINT = 478;
-export declare const getViewport: (breakpoint?: number) => "desktop" | "mobile";
-export declare const borderWidthProps: string[];
-export declare const borderColorProps: string[];
-/**
- * Handles the translation of server-side properties into responsive CSS
- * attributes
- */
-export default class ResponsiveStyles {
-    element: any;
-    handleMobile: boolean;
-    mobileStyles: any;
-    mobileTargets: any;
-    styles: any;
-    targets: any;
-    mobileBreakpoint: number;
-    mobileBreakpointKey: string;
-    constructor(element: any, targets: string[], handleMobile?: boolean, mobileBreakpoint?: number);
-    getMobileBreakpoint(): number;
-    setMobileBreakpoint(breakpoint: number): void;
-    addTargets(...targets: string[]): void;
-    getTarget(targetId: string, desktopOnly?: boolean, includeMobile?: boolean): any;
-    getTargets(...targets: string[]): {};
-    setStyle(target: string, key: string, val: any): void;
-    apply(target: string, properties: any, get: any): void;
-    applyFlexDirection(target: string, prefix?: string): void;
-    applyContentAlign(target: string, prefix?: string): void;
-    applyTextAlign(target: string, prefix?: string): void;
-    applyBorders({ target, prefix, important }: {
-        target?: string | undefined;
-        prefix?: string | undefined;
-        important?: boolean | undefined;
-    }): boolean;
-    applySelectorStyles(target: string, { prefix, important, addBorder, background }: {
-        prefix?: string | undefined;
-        important?: boolean | undefined;
-        addBorder?: boolean | undefined;
-        background?: boolean | undefined;
-    }): void;
-    applyPadding(target: string, prefix?: string, margin?: boolean): void;
-    applyMargin(target: string, prefix?: string): void;
-    applyCorners(target: string): void;
-    applyBoxShadow(target: string): void;
-    applyHeight(target: string, prefix?: string, force?: boolean): void;
-    applyWidth(target: string, prefix?: string, force?: boolean): void;
-    applyColor(target: string, jsonProp: any, cssProp: any, important?: boolean): void;
-    applyFontStyles(target: string, placeholder?: boolean, ignoreSelectorFontColor?: boolean): void;
-    applySpanSelectorStyles(target: string, prefix?: string): void;
-    transformFontFamilies(families: string): string;
-    applyFontFamily(target: string): void;
-    getRichFontStyles(attrs: any): Record<string, any>;
-    _getRichFontScreenStyles(attrs: any, isMobile?: boolean): Record<string, any>;
-    applyPlaceholderStyles(type: any, styles: any): void;
-    applyBackgroundColorGradient(target: string): void;
-    applyBackgroundImageStyles(target: string): void;
-}
-export declare const noTextSelectStyles: CSSProperties;
-export declare const resetStyles: CSSProperties;
-export declare const imgMaxSizeStyles: CSSProperties;
-export declare const ERROR_COLOR = "#F42525";
-export declare function mergeMobileStyles(style1: any, style2: any, breakpoint?: number): {
-    [x: string]: {};
-};
+import { CSSProperties } from 'react';
+export declare const DEFAULT_MOBILE_BREAKPOINT = 478;
+export declare const getViewport: (breakpoint?: number) => "desktop" | "mobile";
+export declare const borderWidthProps: string[];
+export declare const borderColorProps: string[];
+/**
+ * Handles the translation of server-side properties into responsive CSS
+ * attributes
+ */
+export default class ResponsiveStyles {
+    element: any;
+    handleMobile: boolean;
+    mobileStyles: any;
+    mobileTargets: any;
+    styles: any;
+    targets: any;
+    mobileBreakpoint: number;
+    mobileBreakpointKey: string;
+    constructor(element: any, targets: string[], handleMobile?: boolean, mobileBreakpoint?: number);
+    getMobileBreakpoint(): number;
+    setMobileBreakpoint(breakpoint: number): void;
+    addTargets(...targets: string[]): void;
+    getTarget(targetId: string, desktopOnly?: boolean, includeMobile?: boolean): any;
+    getTargets(...targets: string[]): {};
+    setStyle(target: string, key: string, val: any): void;
+    apply(target: string, properties: any, get: any): void;
+    applyFlexDirection(target: string, prefix?: string): void;
+    applyContentAlign(target: string, prefix?: string): void;
+    applyTextAlign(target: string, prefix?: string): void;
+    applyBorders({ target, prefix, important }: {
+        target?: string | undefined;
+        prefix?: string | undefined;
+        important?: boolean | undefined;
+    }): boolean;
+    applySelectorStyles(target: string, { prefix, important, addBorder, background }: {
+        prefix?: string | undefined;
+        important?: boolean | undefined;
+        addBorder?: boolean | undefined;
+        background?: boolean | undefined;
+    }): void;
+    applyPadding(target: string, prefix?: string, margin?: boolean): void;
+    applyMargin(target: string, prefix?: string): void;
+    applyCorners(target: string): void;
+    applyBoxShadow(target: string): void;
+    applyHeight(target: string, prefix?: string, force?: boolean): void;
+    applyWidth(target: string, prefix?: string, force?: boolean): void;
+    applyColor(target: string, jsonProp: any, cssProp: any, important?: boolean): void;
+    applyFontStyles(target: string, placeholder?: boolean, ignoreSelectorFontColor?: boolean): void;
+    applySpanSelectorStyles(target: string, prefix?: string): void;
+    transformFontFamilies(families: string): string;
+    applyFontFamily(target: string): void;
+    getRichFontStyles(attrs: any): Record<string, any>;
+    _getRichFontScreenStyles(attrs: any, isMobile?: boolean): Record<string, any>;
+    applyPlaceholderStyles(type: any, styles: any): void;
+    applyBackgroundColorGradient(target: string): void;
+    applyBackgroundImageStyles(target: string): void;
+}
+export declare const noTextSelectStyles: CSSProperties;
+export declare const resetStyles: CSSProperties;
+export declare const imgMaxSizeStyles: CSSProperties;
+export declare const ERROR_COLOR = "#F42525";
+export declare function mergeMobileStyles(style1: any, style2: any, breakpoint?: number): {
+    [x: string]: {};
+};
 //# sourceMappingURL=styles.d.ts.map

package/dist/elements/utils/fieldNormalization.d.ts

@@ -1,13 +1,13 @@
-export declare type WarnType = 'option' | 'value';
-export declare type WarningArgs = {
-    state: Set<string>;
-    type: WarnType;
-    field: string;
-    reason: string;
-    context: string;
-    payload: unknown;
-    entityLabel?: string;
-};
-export declare const normalizeToString: (value: unknown) => string | null;
-export declare const warnInvalidData: ({ state, type, field, reason, context, payload, entityLabel }: WarningArgs) => void;
+export declare type WarnType = 'option' | 'value';
+export declare type WarningArgs = {
+    state: Set<string>;
+    type: WarnType;
+    field: string;
+    reason: string;
+    context: string;
+    payload: unknown;
+    entityLabel?: string;
+};
+export declare const normalizeToString: (value: unknown) => string | null;
+export declare const warnInvalidData: ({ state, type, field, reason, context, payload, entityLabel }: WarningArgs) => void;
 //# sourceMappingURL=fieldNormalization.d.ts.map

package/dist/fthry_FormControl.DxW_Bnm8.js

@@ -0,0 +1,16 @@
+import { t as __rest, b as jsx, a as __assign } from './fthry_index.diObxaBS.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 = __rest(_a, ["type", "htmlSize", "css"]);
+    return (jsx("input", __assign({ type: type, size: htmlSize, css: __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)));
+}
+
+export { FormControl as F };

package/dist/fthry_InlineTooltip.CKU9xvD_.js

@@ -0,0 +1,53 @@
+import { b as jsx, a as __assign, _ as __read, au as replaceTextVariables, q as isMobile, j as jsxs, m as Fragment, k as FORM_Z_INDEX } from './fthry_index.diObxaBS.js';
+import { useState, useRef } from 'react';
+import { O as Overlay, T as Tooltip } from './fthry_Overlay.CAkqWcqE.js';
+
+function HelpIcon(_a) {
+    var _b = _a.cssStyles, cssStyles = _b === void 0 ? {} : _b, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c;
+    return (jsx("svg", __assign({ css: cssStyles, width: '100%', height: '100%', viewBox: '0 0 10 10', fill: 'black', xmlns: 'http://www.w3.org/2000/svg', onClick: onClick }, { children: 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 = __read(useState(false), 2), show = _c[0], setShow = _c[1];
+    var triggerRef = useRef(null);
+    text = replaceTextVariables(text, repeat);
+    if (!text)
+        return null;
+    var isMobile$1 = isMobile();
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ ref: triggerRef, 
+                // this prevents needing to click twice on mobile
+                onMouseEnter: isMobile$1 ? undefined : function () { return setShow(true); }, onMouseLeave: isMobile$1 ? 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: FORM_Z_INDEX,
+                        margin: 'auto',
+                        cursor: 'pointer',
+                        height: '100%',
+                        display: 'flex'
+                    }
+                    : {
+                        position: 'relative',
+                        marginInlineStart: '8px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    } }, { children: jsx(HelpIcon, { cssStyles: responsiveStyles.getTarget('tooltipIcon') }) })), jsx(Overlay, __assign({ show: show, targetRef: triggerRef, containerRef: containerRef, placement: 'left', onHide: function () { return setShow(false); }, offset: 8 }, { children: jsx(Tooltip, __assign({ id: "tooltip-".concat(id), css: {
+                        zIndex: 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 })) }))] }));
+}
+
+export { InlineTooltip as I };

package/dist/fthry_Overlay.CAkqWcqE.js

@@ -0,0 +1,228 @@
+import { t as __rest, b as jsx, a as __assign, k as FORM_Z_INDEX, _ as __read, s as featheryDoc, l as featheryWindow, m as Fragment } from './fthry_index.diObxaBS.js';
+import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+var Tooltip = function (_a) {
+    var children = _a.children, css = _a.css, props = __rest(_a, ["children", "css"]);
+    return (jsx("div", __assign({ css: __assign({ zIndex: 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: jsx("div", __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 = useRef(null);
+    var _e = __read(useState(null), 2), position = _e[0], setPosition = _e[1];
+    var getContainer = useCallback(function () {
+        return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || featheryDoc().body;
+    }, [containerRef]);
+    var recalcPosition = useCallback(function () {
+        var _a;
+        if (!show || !targetRef.current || !ref.current)
+            return;
+        var window = 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 === 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 = useCallback(function () {
+        var ticking = false;
+        return function () {
+            if (!ticking) {
+                ticking = true;
+                requestAnimationFrame(function () {
+                    recalcPosition();
+                    ticking = false;
+                });
+            }
+        };
+    }, [recalcPosition])();
+    useLayoutEffect(function () {
+        if (show)
+            recalcPosition();
+    }, [show, recalcPosition]);
+    useEffect(function () {
+        if (!show)
+            return;
+        var window = featheryWindow();
+        var container = getContainer();
+        if (!container)
+            return;
+        window.addEventListener('resize', throttledRecalc);
+        window.addEventListener('scroll', throttledRecalc, true);
+        if (container !== featheryDoc().body) {
+            container.addEventListener('scroll', throttledRecalc);
+        }
+        var resizeObserver = new ResizeObserver(function () { return throttledRecalc(); });
+        if (targetRef.current)
+            resizeObserver.observe(targetRef.current);
+        if (container !== featheryDoc().body)
+            resizeObserver.observe(container);
+        return function () {
+            window.removeEventListener('resize', throttledRecalc);
+            window.removeEventListener('scroll', throttledRecalc, true);
+            if (container !== featheryDoc().body) {
+                container.removeEventListener('scroll', throttledRecalc);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [show, throttledRecalc, getContainer, targetRef]);
+    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 = 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 jsx(Fragment, { children: children });
+    return createPortal(jsx("div", __assign({ ref: ref, style: __assign(__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
+            };
+    }
+};
+
+export { Overlay as O, Tooltip as T };