@ilo-org/react 0.0.18 → 0.1.1

package/lib/cjs/_commonjsHelpers-9f9f50a8.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.getAugmentedNamespace = getAugmentedNamespace;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/lib/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@ilo-org/utils');
+var classNames = require('classnames');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var utils_checkArrayDuplicates = require('../../utils/checkArrayDuplicates.js');
+var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const Accordion = ({ children, allowMultipleExpanded = false, onButtonClick, defaultAccordionsExpanded = [], className, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--accordion`;
+    const [activeItems, setActiveItems] = require$$0.useState([]);
+    const accordionClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    const defaultAccordionsExpandedString = JSON.stringify(defaultAccordionsExpanded);
+    require$$0.useEffect(() => {
+        const expandedOnLoad = allowMultipleExpanded
+            ? defaultAccordionsExpanded
+            : defaultAccordionsExpanded.length > 0
+                ? [defaultAccordionsExpanded[0]]
+                : defaultAccordionsExpanded;
+        setActiveItems(expandedOnLoad);
+    }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //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: Accordion items must have unique ids.");
+        }
+    }
+    return (jsxRuntime.jsx(AccordionCtx.AccordionContext.Provider, Object.assign({ value: {
+            activeItems,
+            setActiveItems,
+            getUpdatedItems: utils.getUpdatedItems,
+            allowMultipleExpanded,
+            onButtonClick,
+        } }, { children: jsxRuntime.jsx("ul", Object.assign({ className: accordionClasses }, { children: children })) })));
+};
+
+module.exports = Accordion;

package/lib/cjs/components/Accordion/AccordionButton.js

@@ -0,0 +1,34 @@
+'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 AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+require('../../GlobalCtx-97e4b433.js');
+
+const AccordionButton = (_a) => {
+    var { children, className } = _a, rest = tslib.__rest(_a, ["children", "className"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--accordion--button`;
+    const { activeItems, setActiveItems, getUpdatedItems, allowMultipleExpanded, onButtonClick, } = require$$0.useContext(AccordionCtx.AccordionContext);
+    const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
+    const open = activeItems.indexOf(id) > -1;
+    const accordionButtonClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    /**
+     * On click, get id of clicked item, and set that item in state to 'open', all others to 'closed'
+     */
+    const handleClick = (e, id) => {
+        setActiveItems(getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleExpanded }));
+        if (onButtonClick) {
+            onButtonClick(e, id);
+        }
+        e.currentTarget.blur();
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--h3` }, { children: jsxRuntime.jsx("button", Object.assign({ className: accordionButtonClasses, "aria-expanded": open, onClick: (e) => handleClick(e, id), "aria-controls": `panel-${id}`, id: `button-${id}` }, rest, { children: children })) })));
+};
+
+module.exports = AccordionButton;

package/lib/cjs/components/Accordion/AccordionItem.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const AccordionItem = (_a) => {
+    var { children, id, className } = _a, rest = tslib.__rest(_a, ["children", "id", "className"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--accordion--item`;
+    const accordionItemClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsx(AccordionCtx.AccordionItemContext.Provider, Object.assign({ value: { id } }, { children: jsxRuntime.jsx("li", Object.assign({ className: accordionItemClasses }, rest, { children: children })) })));
+};
+
+module.exports = AccordionItem;

package/lib/cjs/components/Accordion/AccordionPanel.js

@@ -0,0 +1,30 @@
+'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 AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+require('../../GlobalCtx-97e4b433.js');
+
+const AccordionPanel = (_a) => {
+    var { children, className, timeout = 600 } = _a, rest = tslib.__rest(_a, ["children", "className", "timeout"]);
+    const { activeItems } = require$$0.useContext(AccordionCtx.AccordionContext);
+    const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
+    const [panelHeight, setPanelHeight] = require$$0.useState(0);
+    const open = activeItems.indexOf(id) > -1;
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--accordion--panel`;
+    const accordionaPanelClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--open`]: open,
+    });
+    const ref = require$$0.useRef();
+    require$$0.useLayoutEffect(() => {
+        ref.current && setPanelHeight(ref.current.scrollHeight);
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: accordionaPanelClasses, id: `panel-${id}`, "aria-labelledby": `button-${id}`, role: "region", ref: ref, style: { ["--height"]: `${panelHeight}px` } }, rest, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--accordion--innerpanel` }, { children: children })) })));
+};
+
+module.exports = AccordionPanel;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var components_Accordion_AccordionButton = require('./AccordionButton.js');
+var components_Accordion_AccordionPanel = require('./AccordionPanel.js');
+var components_Accordion_AccordionItem = require('./AccordionItem.js');
+var components_Accordion_Accordion = require('./Accordion.js');
+require('tslib');
+require('react/jsx-runtime');
+require('classnames');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('../../AccordionCtx-fe08ff45.js');
+require('@ilo-org/utils');
+require('../../utils/checkArrayDuplicates.js');
+
+
+
+exports.AccordionButton = components_Accordion_AccordionButton;
+exports.AccordionPanel = components_Accordion_AccordionPanel;
+exports.AccordionItem = components_Accordion_AccordionItem;
+exports.Accordion = components_Accordion_Accordion;

package/lib/cjs/components/Button/Button.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../Link/Link.js');
+var components_Icon_Icon = require('../Icon/Icon.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('@ilo-org/icons-react');
+
+const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--button`;
+    const hasURL = !!url;
+    const icoPos = iconPosition || "left";
+    const ButtonClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${size}`]: size,
+        [`${baseClass}--${type}`]: type,
+        [`icon icon__position--${icoPos}`]: icon && !icononly,
+        [`icon icon--only`]: icon && icononly,
+    });
+    /**
+     * On click, if there is a callback, call it
+     */
+    const handleClick = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
+};
+
+module.exports = Button;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var components_Button_Button = require('./Button.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+const primary = {
+    type: "primary",
+    label: "Primary",
+    size: "medium",
+};
+const secondary = { type: "secondary", label: "Secondary" };
+const tertiary = { type: "tertiary", label: "Tertiary" };
+const alert = { type: "alert", label: "Alert" };
+const icon = { type: "primary", label: "Icon", icon: "close" };
+const disabled = {
+    type: "primary",
+    label: "Disabled",
+    disabled: true,
+};
+const link = {
+    type: "primary",
+    icon: "arrowright",
+    iconPosition: "right",
+    label: "Visit ilo.org",
+    url: "https://www.ilo.org",
+    target: "__blank",
+};
+var Button_args = { primary, secondary, tertiary, alert, icon, disabled, link };
+
+exports.Button = components_Button_Button;
+exports.buttonArgs = Button_args;

package/lib/cjs/components/Callout/Callout.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Button_Button = require('../Button/Button.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpenLabel = "Less", toggleClosedLabel = "More", headline, type, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--callout`;
+    const [toggleOpen, setToggleOpen] = require$$0.useState(isOpen);
+    let toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
+    require$$0.useEffect(() => {
+        setToggleOpen(isOpen);
+        toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
+    }, [isOpen]);
+    const calloutClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${type}`]: type,
+        [`${baseClass}--open`]: toggleOpen,
+        [`${baseClass}--collapse`]: isCollapsible,
+    });
+    const iconClasses = `icon icon--${type}`;
+    const ctaprops = {
+        callback: undefined,
+        className: `${baseClass}--cta`,
+        children: false,
+        label: cta === null || cta === void 0 ? void 0 : cta.label,
+        size: "small",
+        type: "tertiary",
+        url: cta === null || cta === void 0 ? void 0 : cta.url,
+    };
+    const handleToggle = (e) => {
+        e.preventDefault();
+        toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
+        setToggleOpen(!toggleOpen);
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: calloutClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--sidebar` }, { children: jsxRuntime.jsx("span", { className: iconClasses }) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--header` }, { children: [jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), isCollapsible && (jsxRuntime.jsxs("button", Object.assign({ className: `${baseClass}--toggle`, onClick: handleToggle, type: "button" }, { children: [toggleLabel, jsxRuntime.jsx("span", { className: `${baseClass}--toggle--icon` })] })))] })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: copy })), cta && jsxRuntime.jsx(components_Button_Button, Object.assign({}, ctaprops))] }))] })));
+};
+
+module.exports = Callout;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var components_Callout_Callout = require('./Callout.js');
+var Callout_args = require('../../Callout.args-bcd5a9f1.js');
+require('react/jsx-runtime');
+require('classnames');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Button/Button.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+
+
+exports.Callout = components_Callout_Callout;
+exports.calloutArgs = Callout_args.CalloutArgs;

package/lib/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,34 @@
+'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 components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_FormElement_FormElement = require('../FormElement/FormElement.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const Checkbox = ({ callback, disabled = false, error, grouped, helper, id, label, name, required, tooltip, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--checkbox`;
+    const CheckboxClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    const [checked, setChecked] = require$$0.useState(false);
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        setChecked(e.target.checked);
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [grouped && (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: "checkbox", className: CheckboxClasses, checked: checked }) }))), !grouped && (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "checkbox" }, { children: jsxRuntime.jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "checkbox", className: CheckboxClasses, checked: checked }) })) }))] }));
+};
+
+module.exports = Checkbox;

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

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

package/lib/cjs/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var components_Checkbox_Checkbox = require('../Checkbox/Checkbox.js');
+var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_Radio_Radio = require('../Radio/Radio.js');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../FormElement/FormElement.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const ChoiceGroup = ({ className, choicegroupid, grouperror, grouphelper, grouptooltip, items, legend, }) => {
+    // whatever type the first item has we expect from the other items
+    const sanitzeditems = items.filter((item) => item !== items[0].type);
+    const [radio, setRadio] = require$$0.useState(false);
+    const radioChangeHandler = (e) => {
+        setRadio(e.target.value);
+    };
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset, Object.assign({ className: `ilo--choice-group ${className ? className : ""}`, legend: legend, fieldsetid: choicegroupid, grouphelper: grouphelper, grouperror: grouperror, grouptooltip: grouptooltip }, { children: sanitzeditems.map((item, i) => {
+            if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox") {
+                return require$$0.createElement(components_Checkbox_Checkbox, Object.assign({}, item, { key: i }));
+            }
+            if ((item === null || item === void 0 ? void 0 : item.type) === "radio") {
+                return (require$$0.createElement(components_Radio_Radio, Object.assign({}, item, { callback: radioChangeHandler, selected: radio, key: i })));
+            }
+            return null;
+        }) })));
+};
+
+module.exports = ChoiceGroup;

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

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