@ilo-org/react 0.0.18 → 0.1.1

package/lib/cjs/components/Radio/Radio.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_FormElement_FormElement = require('../FormElement/FormElement.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const Radio = ({ callback, disabled = false, error, helper, id, label, name, required, selected, tooltip, value, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--radio`;
+    const RadioClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "radio", className: RadioClasses, checked: selected === value, value: value }) })));
+};
+
+module.exports = Radio;

package/lib/cjs/components/Radio/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_Radio_Radio = require('./Radio.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../FormElement/FormElement.js');
+
+
+
+exports.Radio = components_Radio_Radio;

package/lib/cjs/components/ReadMore/ReadMore.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_RichText_RichText = require('../RichText/RichText.js');
+require('../../GlobalCtx-97e4b433.js');
+
+const ReadMore = (_a) => {
+    var { buttonlabel, className, excerpt, fulltext, openatstart } = _a, rest = tslib.__rest(_a, ["buttonlabel", "className", "excerpt", "fulltext", "openatstart"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--read-more`;
+    const [content, setContent] = require$$0.useState(openatstart ? fulltext : excerpt);
+    const [isopen, setOpen] = require$$0.useState(openatstart);
+    const readMoreClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--open`]: isopen,
+    });
+    const readmoreButtonClasses = classNames(className, {
+        [`${baseClass}--button`]: true,
+        [`${baseClass}--button--open`]: isopen,
+    });
+    /**
+     * On click, toggle state vars
+     */
+    const handleClick = () => {
+        const nextcontent = content === excerpt ? fulltext : excerpt;
+        setContent(nextcontent);
+        setOpen(!isopen);
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: readMoreClasses }, { children: [jsxRuntime.jsx(components_RichText_RichText, Object.assign({ content: content }, rest)), jsxRuntime.jsx("button", Object.assign({ className: readmoreButtonClasses, "aria-expanded": isopen, onClick: () => handleClick() }, { children: isopen
+                    ? `${buttonlabel && buttonlabel.opened}`
+                    : `${buttonlabel && buttonlabel.closed}` }))] })));
+};
+
+module.exports = ReadMore;

package/lib/cjs/components/ReadMore/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_ReadMore_ReadMore = require('./ReadMore.js');
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('../RichText/RichText.js');
+
+
+
+exports.ReadMore = components_ReadMore_ReadMore;

package/lib/cjs/components/RichText/RichText.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const RichText = ({ className, content }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--richtext`;
+    const richTextClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsx("div", { className: richTextClasses, dangerouslySetInnerHTML: { __html: content } }));
+};
+
+module.exports = RichText;

package/lib/cjs/components/RichText/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_RichText_RichText = require('./RichText.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.RichText = components_RichText_RichText;

package/lib/cjs/components/SearchField/SearchField.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Input_Input = require('../Input/Input.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+const SearchField = ({ action, callback, className, input, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--searchfield`;
+    const buttonClass = `${baseClass}--button`;
+    const SearchFieldClasses = classNames(className, {
+        [baseClass]: true,
+        [`haslabel`]: input === null || input === void 0 ? void 0 : input.label,
+    });
+    /**
+     * On click, if there is a callback, call it
+     */
+    const handleClick = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    const inputHasType = !!(input === null || input === void 0 ? void 0 : input.type);
+    if (!inputHasType) {
+        throw new Error("SearchField: Input must have type prop");
+    }
+    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: input === null || input === void 0 ? void 0 : input.callback, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, className: `${prefix}--input` }), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+};
+
+module.exports = SearchField;

package/lib/cjs/components/SearchField/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var components_SearchField_SearchField = require('./SearchField.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Input/Input.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+
+
+exports.SearchField = components_SearchField_SearchField;

package/lib/cjs/components/TableOfContents/TableOfContents.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const TableOfContents = ({ className, items }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--table-of-contents`;
+    const TableOfContentsClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsx("nav", Object.assign({ className: TableOfContentsClasses }, { children: jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: items &&
+                items.map((item, index) => {
+                    return (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: item.href }, { children: item.label })) }), index));
+                }) })) })));
+};
+
+module.exports = TableOfContents;

package/lib/cjs/components/TableOfContents/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_TableOfContents_TableOfContents = require('./TableOfContents.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.TableOfContents = components_TableOfContents_TableOfContents;

package/lib/cjs/components/Tag/Tag.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Icon_Icon = require('../Icon/Icon.js');
+var utils = require('@ilo-org/utils');
+var TagCtx = require('../../TagCtx-929c7753.js');
+require('../../GlobalCtx-97e4b433.js');
+require('@ilo-org/icons-react');
+
+const Tag = (_a) => {
+    var { className, children, id, url, type, callback } = _a, rest = tslib.__rest(_a, ["className", "children", "id", "url", "type", "callback"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const { activeItems, setActiveItems, allowMultipleActive } = require$$0.useContext(TagCtx.TagSetContext);
+    const active = activeItems.indexOf(id) > -1;
+    const baseClass = `${prefix}--tag`;
+    const itemClass = `${prefix}--tag-set__item`;
+    const stringType = type;
+    const tagClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--active`]: active,
+        [`${baseClass}--${type}`]: type,
+        [`icon icon__position--right`]: true,
+    });
+    let visible = active;
+    /**
+     * On click, get id of clicked item, and set that item in state to 'active', all others to 'closed'
+     */
+    const handleClick = (e) => {
+        setActiveItems(utils.getUpdatedItems({
+            id,
+            itemStatuses: activeItems,
+            allowMultipleExpanded: allowMultipleActive,
+        }));
+        visible = false;
+        if (callback) {
+            callback(e);
+        }
+    };
+    // @ts-ignore
+    const renderButton = () => {
+        let button;
+        if (visible) {
+            button = (jsxRuntime.jsx("li", Object.assign({ className: itemClass }, { children: jsxRuntime.jsxs("button", Object.assign({ type: "button", className: tagClasses, onClick: (e) => handleClick(e), id: id }, rest, { children: [children, jsxRuntime.jsx(components_Icon_Icon, { name: "close", hidden: true })] })) })));
+        }
+        return button;
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: stringType === "button" ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderButton() })) : (jsxRuntime.jsxs("li", Object.assign({ className: itemClass }, { children: [type === "anchor" && (jsxRuntime.jsx("a", Object.assign({ className: tagClasses, href: active ? url : "", id: id }, rest, { children: children }))), type === "display" && (jsxRuntime.jsx("span", Object.assign({ className: tagClasses, id: id }, rest, { children: children })))] }))) }));
+};
+
+module.exports = Tag;

package/lib/cjs/components/Tag/TagSet.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var utils_checkArrayDuplicates = require('../../utils/checkArrayDuplicates.js');
+var TagCtx = require('../../TagCtx-929c7753.js');
+require('../../GlobalCtx-97e4b433.js');
+
+const TagSet = (_a) => {
+    var { className, children, onButtonClick, defaultTagActive = [], allowMultipleActive = true } = _a, rest = tslib.__rest(_a, ["className", "children", "onButtonClick", "defaultTagActive", "allowMultipleActive"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--tag-set`;
+    const [activeItems, setActiveItems] = require$$0.useState([]);
+    const defaultTagActiveString = JSON.stringify(defaultTagActive);
+    require$$0.useEffect(() => {
+        const tagOnLoad = allowMultipleActive
+            ? defaultTagActive
+            : defaultTagActive.length > 0
+                ? [defaultTagActive[0]]
+                : defaultTagActive;
+        setActiveItems(tagOnLoad);
+    }, [defaultTagActiveString, allowMultipleActive]); //eslint-disable-line react-hooks/exhaustive-deps
+    if (children) {
+        const ids = [];
+        require$$0.Children.forEach(children, (child) => {
+            ids.push(child.props.id);
+        });
+        if (utils_checkArrayDuplicates.checkArrayDuplicates(ids)) {
+            console.warn("Warning: Tags must have unique ids.");
+        }
+    }
+    const tagClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsx(TagCtx.TagSetContext.Provider, Object.assign({ value: {
+            activeItems,
+            setActiveItems,
+            allowMultipleActive,
+            onButtonClick,
+        } }, { children: jsxRuntime.jsx("ul", Object.assign({ className: tagClasses }, rest, { children: children })) })));
+};
+
+module.exports = TagSet;

package/lib/cjs/components/Tag/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var components_Tag_Tag = require('./Tag.js');
+var components_Tag_TagSet = require('./TagSet.js');
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+require('@ilo-org/utils');
+require('../../TagCtx-929c7753.js');
+require('../../utils/checkArrayDuplicates.js');
+
+
+
+exports.Tag = components_Tag_Tag;
+exports.TagSet = components_Tag_TagSet;

package/lib/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_FormElement_FormElement = require('../FormElement/FormElement.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const Textarea = ({ callback, disabled = false, error, helper, id, label, maxlength, minlength, name, placeholder, required, spellcheck, tooltip, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--textarea`;
+    const TextareaClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("textarea", { id: id, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, className: TextareaClasses, maxLength: maxlength, minLength: minlength, spellCheck: spellcheck }) })) }));
+};
+
+module.exports = Textarea;

package/lib/cjs/components/Textarea/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var components_Textarea_Textarea = require('./Textarea.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+
+
+exports.Textarea = components_Textarea_Textarea;

package/lib/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var ReactDOM = require('react-dom');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const Tooltip = ({ className, children, icon, label, theme, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--tooltip`;
+    const [isVisible, setIsVisible] = require$$0.useState(false);
+    const [position, setPosition] = require$$0.useState({
+        x: 0,
+        y: 0,
+    });
+    const [arrowPlacement, setArrowPlacement] = require$$0.useState("center");
+    const [arrowAlignment, setArrowAlignment] = require$$0.useState("left");
+    const tooltipRef = require$$0.useRef(null);
+    const tooltipClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--alignment-${arrowAlignment}`]: arrowAlignment,
+        [`${baseClass}--visible`]: isVisible,
+    });
+    const tooltipArrowClasses = classNames(className, {
+        [`${baseClass}--arrow`]: true,
+        [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
+    });
+    const handleOnMouseOver = (e) => {
+        // get hovered element reference
+        const target = e.currentTarget;
+        if (target) {
+            const rect = target.getBoundingClientRect();
+            setIsVisible(true);
+            postMouseOver(rect);
+        }
+    };
+    const postMouseOver = (hoverRect) => {
+        // position the tooltip after showing it
+        let placement = "center";
+        let alignment = "left";
+        const ttNode = ReactDOM.findDOMNode(tooltipRef.current);
+        if (ttNode != null) {
+            let x = 0, y = 0;
+            const docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight;
+            const rx = hoverRect.x + hoverRect.width, // most right x
+            lx = hoverRect.x, // most left x
+            ty = hoverRect.y, // most top y
+            by = hoverRect.y + hoverRect.height; // most bottom y
+            // tool tip rectange
+            const ttRect = ttNode.getBoundingClientRect();
+            const bRight = rx + ttRect.width <= window.scrollX + docWidth &&
+                ty + ttRect.height <= window.scrollY + docHeight;
+            const bLeft = lx - ttRect.width >= 0 &&
+                ty + ttRect.height <= window.scrollY + docHeight;
+            const bAbove = ty - ttRect.height >= 0;
+            const bBellow = by + ttRect.height <= window.scrollY + docHeight;
+            // the tooltip doesn't fit to the left
+            if (bRight) {
+                x = hoverRect.width + 16;
+                y = icon ? -8 : 0;
+                placement = "negative";
+                alignment = "right";
+            }
+            else if (bBellow) {
+                x = icon ? -8 : 0;
+                y = hoverRect.height + 16;
+                placement = "center";
+                alignment = "bottom";
+            }
+            else if (bLeft) {
+                x = -ttRect.width - 16;
+                y = icon ? -8 : 0;
+                placement = "negative";
+                alignment = "left";
+            }
+            else if (bAbove) {
+                x = icon ? -8 : 0;
+                y = -ttRect.height - 16;
+                placement = "center";
+                alignment = "top";
+            }
+            setPosition({ x: x, y: y });
+            setArrowPlacement(placement);
+            setArrowAlignment(alignment);
+        }
+    };
+    const handleOnMouseOut = () => {
+        setIsVisible(false);
+    };
+    const style = {
+        // left: ((position.x + window.scrollX) + 'px'),
+        // top: ((position.y + window.scrollY) + 'px')
+        left: position.x + "px",
+        top: position.y + "px",
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut }, { children: [!icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsxRuntime.jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+};
+
+module.exports = Tooltip;

package/lib/cjs/components/Tooltip/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_Tooltip_Tooltip = require('./Tooltip.js');
+require('react/jsx-runtime');
+require('react');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('react-dom');
+
+
+
+exports.Tooltip = components_Tooltip_Tooltip;

package/lib/cjs/components/Video/Video.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Video_VideoPlayer = require('./VideoPlayer.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../../_commonjsHelpers-9f9f50a8.js');
+require('../../patterns-b55db71f.js');
+require('../../index-1b6434f0.js');
+require('react-dom');
+require('../../utils/hoursMinutesSeconds.js');
+require('screenfull');
+
+const Video = ({ className, caption, poster, video }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--video`;
+    const videoClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    const captionClasses = classNames("", {
+        [`${baseClass}--caption`]: true,
+    });
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: videoClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${videoClasses}--wrapper` }, { children: video && jsxRuntime.jsx(components_Video_VideoPlayer, Object.assign({}, video, { poster: poster })) })), caption && jsxRuntime.jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption }))] })));
+};
+
+module.exports = Video;