@ama-pt/agora-design-system 0.1.16 → 0.2.0

package/dist/components/ui/molecules/dropdown-list/dropdown-section-option.js

@@ -1,56 +0,0 @@
-import classNames from 'classnames';
-import React, { useContext } from 'react';
-import { Icon } from '../..';
-import { stringToBoolean } from '../../../index';
-import { DropdownStateContext } from './contexts/dropdown-section-state.context';
-const CheckboxOptionBody = (props) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "checkbox-span" },
-            React.createElement(Icon, { name: "agora-line-check", "aria-hidden": true })),
-        React.createElement("span", { className: "option-text text-m-regular" }, props.text)));
-};
-const RadioOptionBody = (props) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "radio-span" }),
-        React.createElement("span", { className: "option-text text-m-regular" }, props.text)));
-};
-const TextOptionBody = (props) => {
-    return (React.createElement(React.Fragment, null,
-        stringToBoolean(props.hasIcon) && (React.createElement("span", { className: "icon-wrapper" },
-            React.createElement(Icon, { name: props.icon, "aria-hidden": true }))),
-        React.createElement("span", { className: "option-text text-m-regular" }, props.text)));
-};
-const OptionsBodyFactory = (props) => {
-    if (props.sectionType === 'text') {
-        return React.createElement(TextOptionBody, Object.assign({}, props));
-    }
-    if (props.sectionType === 'checkbox') {
-        return React.createElement(CheckboxOptionBody, Object.assign({}, props));
-    }
-    return React.createElement(RadioOptionBody, Object.assign({}, props));
-};
-const DropdownSectionOption = (props) => {
-    const propsClone = Object.assign({}, props);
-    const stateManagerMemo = useContext(DropdownStateContext);
-    if (propsClone.sectionType === 'text') {
-        propsClone.disabled = propsClone.disabled || false;
-        propsClone.iconPosition = propsClone.iconPosition || 'leading';
-    }
-    const optionClass = classNames(`agora-dropdown-list-item agora-dropdown-list-item-${propsClone.sectionType}`, {
-        'is-disabled': stringToBoolean(propsClone.disabled)
-    }, {
-        'has-icon': propsClone.sectionType === 'text' && stringToBoolean(propsClone.hasIcon)
-    });
-    const handleClick = (evt) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.selectOption(propsClone);
-    };
-    if (propsClone.disabled) {
-        return (React.createElement("div", { className: optionClass, role: "option", "aria-selected": propsClone.selected, "aria-label": propsClone.text, "aria-disabled": "true" },
-            React.createElement(OptionsBodyFactory, Object.assign({}, propsClone))));
-    }
-    return (React.createElement("div", { className: optionClass, "data-value": propsClone.value, "data-multiple": propsClone.sectionType === 'checkbox', id: `id-${propsClone.value.toLocaleLowerCase()}`, "data-section-id": propsClone.itemSectionId, onKeyDown: () => null, onClick: handleClick, role: "option", tabIndex: -1, "aria-label": propsClone.text, "aria-selected": propsClone.selected },
-        React.createElement(OptionsBodyFactory, Object.assign({}, propsClone))));
-};
-export { DropdownSectionOption };

package/dist/components/ui/molecules/dropdown-list/dropdown-section.js

@@ -1,24 +0,0 @@
-import classNames from 'classnames';
-import React, { useContext } from 'react';
-import { stringToBoolean } from '../../../index';
-import { DropdownStateContext } from './contexts/dropdown-section-state.context';
-import { DropdownSectionOption } from './dropdown-section-option';
-export const DropdownSection = (props) => {
-    const stateManagerMemo = useContext(DropdownStateContext);
-    const classes = classNames('dropdown-list-section', {
-        'has-header-text': props.headerText
-    });
-    const clickHandler = () => {
-        stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.focusControlRef();
-    };
-    return (React.createElement("section", { id: props.id, "data-multiple": props.type === 'checkbox', className: classes, role: "group", "aria-label": props.headerText },
-        props.headerText && (React.createElement("div", { id: `section-ref-${props.id}`, className: "dropdown-list-section-title text-m-bold", role: "presentation", onClick: clickHandler }, props.headerText)),
-        props.items.map((item, index) => {
-            const option = Object.assign(Object.assign({}, item), { itemSectionId: props.id, sectionType: props.type });
-            if (props.type === 'text' && stringToBoolean(props.hasIcon)) {
-                option.hasIcon = props.hasIcon;
-                option.iconPosition = props.iconPosition;
-            }
-            return React.createElement(DropdownSectionOption, Object.assign({ key: index }, option));
-        })));
-};

package/dist/components/ui/molecules/dropdown-list/hooks/use-dropdown-search.js

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-import { debounce, normalizeText } from '../../../../index';
-//  Hook that adds search functionality to dropdown
-export const useDropdownSearch = (searchInput, options, debounceTimeout = 300) => {
-    const [results, setResults] = useState(options);
-    const onChangeHandlerDebounced = (evt) => {
-        const { value } = evt.target;
-        const filteredResults = options.filter((op) => {
-            if (op.value === '_all_') {
-                return false;
-            }
-            const normalizedOptionValue = normalizeText(op.text);
-            const normalizedInputValue = normalizeText(value);
-            return normalizedOptionValue.indexOf(normalizedInputValue) >= 0;
-        });
-        setResults(filteredResults);
-    };
-    useEffect(() => {
-        var _a;
-        const debouncedFunction = debounce(onChangeHandlerDebounced, debounceTimeout);
-        (_a = searchInput.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', debouncedFunction);
-        return () => {
-            var _a;
-            (_a = searchInput.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', debouncedFunction);
-        };
-    }, [searchInput.current]);
-    return { results };
-};

package/dist/components/ui/molecules/dropdown-list/index.js

@@ -1,3 +0,0 @@
-export { DropdownList } from './dropdown-list';
-export { DropdownSection } from './dropdown-section';
-export { DropdownSectionOption } from './dropdown-section-option';

package/dist/components/ui/molecules/dropdown-list/models/dropdown-list.interface.js

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/molecules/dropdown-list/models/dropdown-search-input.interface.js

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/molecules/dropdown-list/models/dropdown-section-option.interface.js

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/molecules/dropdown-list/models/dropdown-section-type.type.js

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/molecules/dropdown-list/models/dropdown-section.interface.js

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/molecules/dropdown-list/utils/is-totally-visible-inside-container.js

@@ -1,11 +0,0 @@
-const isTotallyVisibleInsideContainer = (elem, container) => {
-    const { top, bottom } = elem.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const containerTop = containerRect.top;
-    const containerBottom = containerRect.bottom;
-    if (containerTop <= top && containerBottom >= bottom) {
-        return true;
-    }
-    return false;
-};
-export { isTotallyVisibleInsideContainer };

package/dist/components/ui/molecules/progress-bar-group/index.js

@@ -1 +0,0 @@
-export { ProgressBarGroup } from './progress-bar-group';

package/dist/components/ui/molecules/progress-bar-group/progress-bar-group.js

@@ -1,105 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import classNames from 'classnames';
-import React, { useId, useMemo } from 'react';
-import './progress-bar-group.scss';
-const ProgressBarGroup = (_a) => {
-    var _b;
-    var { label, hideLabel, hidePercentageValues, children, sequential } = _a, props = __rest(_a, ["label", "hideLabel", "hidePercentageValues", "children", "sequential"]);
-    const generatedId = useId();
-    const propsClone = Object.assign(Object.assign({}, props), { id: (_b = props.id) !== null && _b !== void 0 ? _b : generatedId });
-    const progressBars = React.Children.toArray(children);
-    const activeCurrent = useMemo(() => {
-        let foundCurrent = false;
-        let currentCount = 0;
-        progressBars.forEach((p) => {
-            if (React.isValidElement(p)) {
-                if (p.props.current) {
-                    currentCount += 1;
-                    foundCurrent = true;
-                }
-            }
-        });
-        if (!foundCurrent) {
-            return 0;
-        }
-        if (foundCurrent && currentCount === 1) {
-            return progressBars.findIndex((p) => React.isValidElement(p) && p.props.current);
-        }
-        const firstNotCompletedIndex = progressBars.findIndex((p) => {
-            if (React.isValidElement(p)) {
-                const validatedValue = Math.max(0, Math.min(p.props.value, p.props.max));
-                return validatedValue < p.props.max;
-            }
-            return false;
-        });
-        return firstNotCompletedIndex < 0 ? progressBars.length - 1 : firstNotCompletedIndex;
-    }, [progressBars]);
-    const sumMaxValues = useMemo(() => {
-        let currentCount = 0;
-        progressBars.forEach((p) => {
-            if (React.isValidElement(p)) {
-                currentCount += p.props.max;
-            }
-        });
-        return currentCount;
-    }, [progressBars]);
-    const sumValues = useMemo(() => {
-        let currentCount = 0;
-        progressBars.forEach((p) => {
-            if (React.isValidElement(p)) {
-                currentCount += p.props.value;
-            }
-        });
-        return currentCount;
-    }, [progressBars]);
-    // function to render progress bars
-    const renderProgressBars = (child, index) => {
-        var _a, _b;
-        const isCurrent = index === activeCurrent;
-        let currentVal = (_a = child.props.value) !== null && _a !== void 0 ? _a : 0;
-        if (sequential) {
-            currentVal = activeCurrent < index ? 0 : currentVal;
-        }
-        return React.cloneElement(child, {
-            'key': (_b = child.props.id) !== null && _b !== void 0 ? _b : index,
-            'current': isCurrent,
-            'value': currentVal,
-            'aria-hidden': true
-        });
-    };
-    // function to be used to calculate the progress value
-    const progressValue = () => {
-        let value = 0;
-        React.Children.forEach(children, (child, index) => {
-            if (React.isValidElement(child)) {
-                if (child.props.value !== undefined && child.props.max !== undefined) {
-                    if (!sequential || index <= activeCurrent) {
-                        value += Math.min(child.props.value, child.props.max);
-                    }
-                }
-            }
-        });
-        return Math.round((value / sumMaxValues) * 100);
-    };
-    const percentageClasses = classNames('progress-bar-percentage', {
-        'sr-only': hidePercentageValues,
-        'not-sr-only': !hidePercentageValues
-    });
-    return (React.createElement("div", Object.assign({}, propsClone),
-        !hideLabel && React.createElement("label", { htmlFor: propsClone.id }, label),
-        React.createElement("div", { className: "progress-bar-group", role: "progressbar", "aria-valuenow": sumValues, "aria-valuetext": `${sumValues}/${sumMaxValues}`, "aria-valuemax": 100 }, React.Children.map(children, (child, index) => (React.isValidElement(child) ? renderProgressBars(child, index) : null))),
-        !hidePercentageValues && (React.createElement("div", { className: percentageClasses, role: "status" },
-            progressValue(),
-            "%"))));
-};
-export { ProgressBarGroup };

package/dist/components/ui/molecules/progress-bar-group/progress-bar-group.scss

@@ -1 +0,0 @@
-.progress-bar-group{display:flex}.progress-bar-group .progress{flex:1}.progress-group-actions{margin-top:16px;margin-bottom:24px;display:flex;justify-content:space-between}.progress-complete,.progress-empty,.progress-error,.progress-hold,.progress-progress{width:100%}

package/dist/components/ui/molecules/radiobutton-group/index.js

@@ -1 +0,0 @@
-export { RadioButtonGroup } from './radiobutton-group';

package/dist/components/ui/molecules/radiobutton-group/radiobutton-group.js

@@ -1,44 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useId } from 'react';
-import { RadioButton } from '../../atoms/radio';
-const RadioButtonGroup = (_a) => {
-    var { label, onChange, items = [], children } = _a, props = __rest(_a, ["label", "onChange", "items", "children"]);
-    const generatedId = useId();
-    const generatedName = useId();
-    const propsClone = Object.assign({}, props);
-    propsClone.id = propsClone.id || generatedId;
-    propsClone.name = propsClone.name || generatedName;
-    let childrenRadioButtons;
-    if (children) {
-        if (!Array.isArray(children)) {
-            childrenRadioButtons = [children];
-        }
-        else {
-            childrenRadioButtons = children;
-        }
-    }
-    else {
-        childrenRadioButtons = [];
-    }
-    const itemsRadioButtons = items.map((item) => React.createElement(RadioButton, Object.assign({}, item)));
-    const allRadioButtons = [...itemsRadioButtons, ...childrenRadioButtons];
-    const innerOnChange = (nativeEvent) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(nativeEvent);
-    };
-    return (React.createElement("div", { className: "agora-radiobutton-group" },
-        React.createElement("label", { className: "text-primary-900 text-m-medium mb-8 block", hidden: !!propsClone.hidden, htmlFor: propsClone.id, id: `agora-radiobutton-group-${propsClone.id}-label` }, label),
-        React.createElement("div", Object.assign({}, propsClone, { role: "radiogroup", "aria-label": propsClone.hidden ? propsClone['aria-label'] || label : propsClone['aria-label'], id: propsClone.id, "aria-labelledby": `agora-radiobutton-group-${propsClone.id}-label` }), React.Children.map(allRadioButtons, (child) => {
-            return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { name: propsClone.name, value: child.props.value || undefined, onChange: innerOnChange }));
-        }))));
-};
-export { RadioButtonGroup };