@ilo-org/react 0.0.17 → 0.1.0

package/lib/esm/utils/getDefaultDimensionValue.js

@@ -0,0 +1,20 @@
+import { s as style } from '../css-7414f50b.js';
+
+const MARGINS = {
+    height: ["marginTop", "marginBottom"],
+    width: ["marginLeft", "marginRight"],
+};
+function getDefaultDimensionValue(dimension, elem) {
+    const offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
+    const value = elem[offset];
+    const margins = MARGINS[dimension];
+    return (
+    // @ts-ignore
+    value +
+        // @ts-ignore
+        parseInt(style(elem, margins[0]), 10) +
+        // @ts-ignore
+        parseInt(style(elem, margins[1]), 10));
+}
+
+export { getDefaultDimensionValue as default };

package/lib/esm/utils/hoursMinutesSeconds.js

@@ -0,0 +1,10 @@
+function hoursMinutesSeconds(secs) {
+    const hours = Math.floor(secs / 60 / 60);
+    const minutes = Math.floor(secs / 60) - Math.floor(hours * 60);
+    const seconds = Math.floor(secs % 60);
+    return `${hours > 0 ? hours.toString().padStart(2, "0") + ":" : ""}${minutes
+        .toString()
+        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+}
+
+export { hoursMinutesSeconds as default };

package/lib/esm/utils/index.js

@@ -0,0 +1,7 @@
+export { checkArrayDuplicates } from './checkArrayDuplicates.js';
+export { default as createChainedFunctions } from './createChainedFunction.js';
+export { default as getDefaultDimensionValue } from './getDefaultDimensionValue.js';
+export { default as hoursMinutesSeconds } from './hoursMinutesSeconds.js';
+export { default as transitionEndListener } from './transitionEndListener.js';
+export { default as triggerBrowserReflow } from './triggerBrowserReflow.js';
+import '../css-7414f50b.js';

package/lib/esm/utils/transitionEndListener.js

@@ -0,0 +1,159 @@
+import { s as style } from '../css-7414f50b.js';
+
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+/* eslint-disable no-return-assign */
+var optionsSupported = false;
+var onceSupported = false;
+
+try {
+  var options = {
+    get passive() {
+      return optionsSupported = true;
+    },
+
+    get once() {
+      // eslint-disable-next-line no-multi-assign
+      return onceSupported = optionsSupported = true;
+    }
+
+  };
+
+  if (canUseDOM) {
+    window.addEventListener('test', options, options);
+    window.removeEventListener('test', options, true);
+  }
+} catch (e) {
+  /* */
+}
+
+/**
+ * An `addEventListener` ponyfill, supports the `once` option
+ * 
+ * @param node the element
+ * @param eventName the event name
+ * @param handle the handler
+ * @param options event options
+ */
+function addEventListener(node, eventName, handler, options) {
+  if (options && typeof options !== 'boolean' && !onceSupported) {
+    var once = options.once,
+        capture = options.capture;
+    var wrappedHandler = handler;
+
+    if (!onceSupported && once) {
+      wrappedHandler = handler.__once || function onceHandler(event) {
+        this.removeEventListener(eventName, onceHandler, capture);
+        handler.call(this, event);
+      };
+
+      handler.__once = wrappedHandler;
+    }
+
+    node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);
+  }
+
+  node.addEventListener(eventName, handler, options);
+}
+
+/**
+ * A `removeEventListener` ponyfill
+ * 
+ * @param node the element
+ * @param eventName the event name
+ * @param handle the handler
+ * @param options event options
+ */
+function removeEventListener(node, eventName, handler, options) {
+  var capture = options && typeof options !== 'boolean' ? options.capture : options;
+  node.removeEventListener(eventName, handler, capture);
+
+  if (handler.__once) {
+    node.removeEventListener(eventName, handler.__once, capture);
+  }
+}
+
+function listen(node, eventName, handler, options) {
+  addEventListener(node, eventName, handler, options);
+  return function () {
+    removeEventListener(node, eventName, handler, options);
+  };
+}
+
+/**
+ * Triggers an event on a given element.
+ * 
+ * @param node the element
+ * @param eventName the event name to trigger
+ * @param bubbles whether the event should bubble up
+ * @param cancelable whether the event should be cancelable
+ */
+function triggerEvent(node, eventName, bubbles, cancelable) {
+  if (bubbles === void 0) {
+    bubbles = false;
+  }
+
+  if (cancelable === void 0) {
+    cancelable = true;
+  }
+
+  if (node) {
+    var event = document.createEvent('HTMLEvents');
+    event.initEvent(eventName, bubbles, cancelable);
+    node.dispatchEvent(event);
+  }
+}
+
+function parseDuration$1(node) {
+  var str = style(node, 'transitionDuration') || '';
+  var mult = str.indexOf('ms') === -1 ? 1000 : 1;
+  return parseFloat(str) * mult;
+}
+
+function emulateTransitionEnd(element, duration, padding) {
+  if (padding === void 0) {
+    padding = 5;
+  }
+
+  var called = false;
+  var handle = setTimeout(function () {
+    if (!called) triggerEvent(element, 'transitionend', true);
+  }, duration + padding);
+  var remove = listen(element, 'transitionend', function () {
+    called = true;
+  }, {
+    once: true
+  });
+  return function () {
+    clearTimeout(handle);
+    remove();
+  };
+}
+
+function transitionEnd(element, handler, duration, padding) {
+  if (duration == null) duration = parseDuration$1(element) || 0;
+  var removeEmulate = emulateTransitionEnd(element, duration, padding);
+  var remove = listen(element, 'transitionend', handler);
+  return function () {
+    removeEmulate();
+    remove();
+  };
+}
+
+function parseDuration(node, property) {
+    const str = style(node, property) || "";
+    const mult = str.indexOf("ms") === -1 ? 1000 : 1;
+    return parseFloat(str) * mult;
+}
+function transitionEndListener(element, handler) {
+    const duration = parseDuration(element, "transitionDuration");
+    const delay = parseDuration(element, "transitionDelay");
+    const remove = transitionEnd(element, (e) => {
+        if (e.target === element) {
+            remove();
+            handler(e);
+        }
+    }, duration + delay);
+}
+
+export { transitionEndListener as default };

package/lib/esm/utils/triggerBrowserReflow.js

@@ -0,0 +1,6 @@
+function triggerBrowserReflow(node) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    node.offsetHeight;
+}
+
+export { triggerBrowserReflow as default };

package/lib/types/react/src/components/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { AccordionProps } from "./Accordion.props";
+declare const Accordion: FC<AccordionProps>;
+export default Accordion;

package/lib/types/react/src/components/Accordion/Accordion.props.d.ts

@@ -0,0 +1,33 @@
+import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
+export { default as AccordionItem } from "./AccordionItem";
+import { getUpdatedItems } from "@ilo-org/utils";
+import { AccordionItemProps } from "./AccordionItem.props";
+export interface AccordionProps {
+    /**
+     * Specify the content of your Accordion.
+     */
+    children?: ReactElement<AccordionItemProps> | Array<ReactElement<AccordionItemProps>>;
+    /**
+     * Callback to onButtonClick event;
+     */
+    onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+    /**
+     * Allow multiple accordions to be expanded at once, default value is false
+     */
+    allowMultipleExpanded?: boolean;
+    /**
+     * Default accordions expanded on first load
+     */
+    defaultAccordionsExpanded?: string[];
+    /**
+     * Specify an optional className to be added to your accordion.
+     */
+    className?: string;
+}
+export interface AccordionContextProps {
+    activeItems: string[];
+    getUpdatedItems: typeof getUpdatedItems;
+    setActiveItems: Dispatch<SetStateAction<string[]>>;
+    allowMultipleExpanded: boolean;
+    onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+}

package/lib/types/react/src/components/Accordion/AccordionButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { default as AccordionButtonProps } from "./AccordionButton.props";
+declare const AccordionButton: FC<AccordionButtonProps>;
+export default AccordionButton;

package/lib/types/react/src/components/Accordion/AccordionButton.props.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export default interface AccordionButtonProps {
+    /**
+     * Specify the content of your Button.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string;
+}

package/lib/types/react/src/components/Accordion/AccordionCtx.d.ts

@@ -0,0 +1,4 @@
+import { AccordionContextProps } from "./Accordion.props";
+import { AccordionItemContextProps } from "./AccordionItem.props";
+export declare const AccordionContext: import("react").Context<AccordionContextProps>;
+export declare const AccordionItemContext: import("react").Context<AccordionItemContextProps>;

package/lib/types/react/src/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { AccordionItemProps } from "./AccordionItem.props";
+declare const AccordionItem: FC<AccordionItemProps>;
+export default AccordionItem;

package/lib/types/react/src/components/Accordion/AccordionItem.props.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export interface AccordionItemContextProps {
+    /**
+     * The accordion item's unique id.
+     */
+    id: string;
+}
+export interface AccordionItemProps {
+    /**
+     * Specify the id of the accordion item.
+     */
+    id: string;
+    /**
+     * Specify the content of your Button.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string;
+}

package/lib/types/react/src/components/Accordion/AccordionPanel.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { default as AccordionPanelProps } from "./AccordionPanel.props";
+declare const AccordionPanel: FC<AccordionPanelProps>;
+export default AccordionPanel;

package/lib/types/react/src/components/Accordion/AccordionPanel.props.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+export default interface AccordionPanelProps {
+    /**
+     * Specify the content of your Button.
+     */
+    children: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string;
+    /**
+     * Duration of the collapse animation in milliseconds, to ensure that
+     * finishing callbacks are fired even if the original browser transition end
+     * events are canceled
+     */
+    timeout?: number;
+}

package/lib/types/react/src/components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AccordionButton } from "./AccordionButton";
+export { default as AccordionPanel } from "./AccordionPanel";
+export { default as AccordionItem } from "./AccordionItem";
+export { default as Accordion } from "./Accordion";

package/lib/types/react/src/components/Button/Button.args.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from "./Button.props";
+declare const _default: {
+    primary: ButtonProps;
+    secondary: ButtonProps;
+    tertiary: ButtonProps;
+    alert: ButtonProps;
+    icon: ButtonProps;
+    disabled: ButtonProps;
+    link: ButtonProps;
+};
+export default _default;

package/lib/types/react/src/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ButtonProps } from "./Button.props";
+declare const Button: FC<ButtonProps>;
+export default Button;

package/lib/types/react/src/components/Button/Button.props.d.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import { ButtonFunctions, ButtonTypes, PositionTypes, SizeTypes } from "../../types";
+export interface ButtonProps {
+    /**
+     * Specify the callback of your Button.
+     */
+    callback?: (e: React.MouseEvent<Element, MouseEvent>) => any;
+    /**
+     * Specify the content of your Button.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    className?: string;
+    /**
+     * Specify whether or not the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the icon for the Button
+     */
+    icon?: string;
+    /**
+     * Specify the icon for the Button
+     */
+    iconPosition?: PositionTypes;
+    /**
+     * Does this button display an icon only?
+     */
+    icononly?: boolean;
+    /**
+     * Specify which function the button performs
+     */
+    kind?: ButtonFunctions;
+    /**
+     * Specify the label for the Button
+     */
+    label?: string;
+    /**
+     * Does this button open a modal?
+     */
+    opensmodal?: boolean;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    size?: SizeTypes;
+    /**
+     * Specify the target for when Button is really a link
+     */
+    target?: string;
+    /**
+     * Specify an optional className to be added to your Button.
+     */
+    type?: ButtonTypes;
+    /**
+     * Specify the url for the Button's href
+     */
+    url?: string;
+    /**
+     * Inline styles to be applied to the rendered element
+     */
+    style?: React.CSSProperties;
+}

package/lib/types/react/src/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export { default as buttonArgs } from "./Button.args";

package/lib/types/react/src/components/Callout/Callout.args.d.ts

@@ -0,0 +1,8 @@
+import { CalloutProps } from "./Callout.props";
+declare const CalloutArgs: {
+    baseArgs: CalloutProps;
+    success: CalloutProps;
+    warning: CalloutProps;
+    error: CalloutProps;
+};
+export default CalloutArgs;

package/lib/types/react/src/components/Callout/Callout.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CalloutProps } from "./Callout.props";
+declare const Callout: FC<CalloutProps>;
+export default Callout;

package/lib/types/react/src/components/Callout/Callout.props.d.ts

@@ -0,0 +1,50 @@
+import { CalloutTypes } from "../../types";
+interface CTAProps {
+    /**
+     * Specify the label of the CTA
+     */
+    label?: string;
+    /**
+     * Specify the url of the CTA
+     */
+    url?: string;
+}
+export interface CalloutProps {
+    /**
+     * Specify the settings for an option CTA
+     */
+    cta?: CTAProps;
+    /**
+     * Specify an optional className to be added to your RichText.
+     */
+    className?: string;
+    /**
+     * Specify the copy
+     */
+    copy?: Required<string>;
+    /**
+     * Specify if callout is collapsible
+     */
+    isCollapsible?: boolean;
+    /**
+     * Specify if callout is open (only important for collapsible items)
+     */
+    isOpen?: boolean;
+    /**
+     * Specify the callout headline
+     */
+    headline?: string;
+    /**
+     * Specify the open label
+     */
+    toggleOpenLabel?: string;
+    /**
+     * Specify the open label
+     */
+    toggleClosedLabel?: string;
+    /**
+     * Describe the type of callout
+     */
+    type?: CalloutTypes;
+}
+export {};

package/lib/types/react/src/components/Callout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Callout } from "./Callout";
+export { default as calloutArgs } from "./Callout.args";

package/lib/types/react/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CheckboxProps } from "./Checkbox.props";
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

package/lib/types/react/src/components/Checkbox/Checkbox.props.d.ts

@@ -0,0 +1,13 @@
+export interface CheckboxProps {
+    callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
+    className?: string;
+    disabled?: boolean;
+    error?: string | false;
+    grouped?: boolean;
+    helper?: string;
+    id?: string;
+    label?: string;
+    name: string;
+    required?: boolean;
+    tooltip?: string;
+}

package/lib/types/react/src/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox";

package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChoiceGroupProps } from "./ChoiceGroup.props";
+declare const ChoiceGroup: FC<ChoiceGroupProps>;
+export default ChoiceGroup;

package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.props.d.ts

@@ -0,0 +1,20 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { RadioProps } from "../Radio/Radio.props";
+export interface CheckboxGroupItem {
+    field: CheckboxProps;
+    type: "checkbox";
+}
+export interface RadioGroupItem {
+    field: RadioProps;
+    type: "radio";
+}
+export type ChoiceGroupItem = CheckboxGroupItem | RadioGroupItem;
+export interface ChoiceGroupProps {
+    className?: string;
+    choicegroupid: string;
+    grouperror?: string;
+    grouphelper?: string;
+    grouptooltip?: string;
+    items: ChoiceGroupItem[];
+    legend?: string;
+}

package/lib/types/react/src/components/ChoiceGroup/index.d.ts

@@ -0,0 +1 @@
+export { default as ChoiceGroup } from "./ChoiceGroup";

package/lib/types/react/src/components/Collapse/Collapse.d.ts

@@ -0,0 +1,3 @@
+import { CollapseProps } from "./Collapse.props";
+declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<Transition<any>>>;
+export default Collapse;

package/lib/types/react/src/components/Collapse/Collapse.props.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+type Dimension = "height" | "width";
+export interface CollapseProps {
+    className?: string;
+    /**
+     * Show the component; triggers the expand or collapse animation
+     */
+    panelIn?: boolean;
+    /**
+     * Wait until the first "enter" transition to mount the component (add it to the DOM)
+     */
+    mountOnEnter?: boolean;
+    /**
+     * Unmount the component (remove it from the DOM) when it is collapsed
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Run the expand animation when the component mounts, if it is initially
+     * shown
+     */
+    appear?: boolean;
+    /**
+     * Duration of the collapse animation in milliseconds, to ensure that
+     * finishing callbacks are fired even if the original browser transition end
+     * events are canceled
+     */
+    timeout?: number;
+    /**
+     * The dimension used when collapsing, or a function that returns the
+     * dimension
+     */
+    dimension?: Dimension | (() => Dimension);
+    /**
+     * Function that returns the height or width of the animating DOM node
+     *
+     * Allows for providing some custom logic for how much the Collapse component
+     * should animate in its specified dimension. Called with the current
+     * dimension prop value and the DOM node.
+     *
+     * @default element.offsetWidth | element.offsetHeight
+     */
+    getDimensionValue?: (dimension: Dimension, element: HTMLElement) => number;
+    /**
+     * ARIA role of collapsible element
+     */
+    role?: string;
+    /**
+     * You must provide a single JSX child element to this component and that element cannot be a \<React.Fragment\>
+     */
+    children: React.ReactElement;
+    /**
+     * Callback fired before the component expands
+     */
+    onEnter?: () => void;
+    /**
+     * Callback fired after the component starts to expand
+     */
+    onEntering?: () => void;
+    /**
+     * Callback fired after the component has expanded
+     */
+    onEntered?: () => void;
+    /**
+     * Callback fired before the component collapses
+     */
+    onExit?: () => void;
+    /**
+     * Callback fired after the component starts to collapse
+     */
+    onExiting?: () => void;
+    /**
+     * Callback fired after the component has collapsed
+     */
+    onExited?: () => void;
+}
+export {};

package/lib/types/react/src/components/Collapse/index.d.ts

@@ -0,0 +1 @@
+export { default as Collapse } from "./Collapse";

package/lib/types/react/src/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ContextMenuProps } from "./ContextMenu.props";
+declare const ContextMenu: FC<ContextMenuProps>;
+export default ContextMenu;

package/lib/types/react/src/components/ContextMenu/ContextMenu.props.d.ts

@@ -0,0 +1,25 @@
+interface LinkProps {
+    /**
+     * Specify whether this link marks the end of a section
+     */
+    endsection?: boolean;
+    /**
+     * Specify the label for the the Context Menu's link
+     */
+    label?: Required<string>;
+    /**
+     * Specify the url for the Context Menu's link
+     */
+    url?: Required<string>;
+}
+export interface ContextMenuProps {
+    /**
+     * Specify an optional className to be added to your Context Menu component.
+     */
+    className?: string;
+    /**
+     * Specify the links to be displayed in the Context Menu
+     */
+    links?: Required<Array<LinkProps>>;
+}
+export {};

package/lib/types/react/src/components/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { default as ContextMenu } from "./ContextMenu";

package/lib/types/react/src/components/Credit/Credit.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CreditProps } from "./Credit.props";
+declare const Credit: FC<CreditProps>;
+export default Credit;