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

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

@@ -1,422 +0,0 @@
-import { createContext } from 'react';
-import { TypedEventEmitter } from '../../../../utils';
-import { isTotallyVisibleInsideContainer } from '../utils/is-totally-visible-inside-container';
-const removeNoVisibleFromSectionsWithResults = (sections) => {
-    sections.forEach((sectionId) => {
-        //  HIDE SECTIONS WITH NO RESULTS OCCURRENCES
-        if (sectionId) {
-            const section = document.getElementById(sectionId);
-            if (section) {
-                section.classList.remove('no-visible');
-            }
-        }
-    });
-};
-const showSectionsWithNoResultsOccurrences = (domSections, sectionsWithResultsIDs, selectAllSectionId) => {
-    //  SHOW SECTIONS WITH NO RESULTS OCCURRENCES
-    const sectionsIDsWithoutResults = domSections
-        .map((s) => s.id)
-        .filter((sid) => {
-        return sectionsWithResultsIDs.indexOf(sid) < 0;
-    });
-    sectionsIDsWithoutResults.forEach((sectionId) => {
-        if (sectionId) {
-            const section = document.getElementById(sectionId);
-            if (section && sectionId === selectAllSectionId) {
-                section.classList.remove('no-visible');
-            }
-            else if (section) {
-                section.classList.add('no-visible');
-            }
-        }
-    });
-};
-const hideOptionsNotPresentInResults = (domOptions, filterResults) => {
-    //  HIDE OPTIONS NOT PRESENT IN RESULTS
-    domOptions.forEach((elem) => {
-        var _a, _b;
-        const nodeValue = (_a = elem.dataset.value) !== null && _a !== void 0 ? _a : '';
-        const nodeSectionId = (_b = elem.dataset.sectionId) !== null && _b !== void 0 ? _b : '';
-        if (!nodeValue || !nodeSectionId || nodeValue === '_all_') {
-            return;
-        }
-        const found = filterResults.find((r) => r.value === nodeValue && r.itemSectionId === nodeSectionId);
-        if (!found) {
-            elem.classList.add('no-visible');
-        }
-        else {
-            elem.classList.remove('no-visible');
-        }
-    });
-};
-export class DropdownSectionStateManager extends TypedEventEmitter {
-    constructor() {
-        super(...arguments);
-        this.children = [];
-        this.options = [];
-        this.currentFocusIndex = -1;
-        this.selectAll = false;
-        this.selectAllSectionId = '';
-        this.isSelectAllActive = false;
-        this.isFilterActive = false;
-        this.filterResults = [];
-        this.emitFocusEvent = () => {
-            this.emit('focus', {
-                currentFocusOption: this.options[this.currentFocusIndex],
-                currentFocusIndex: this.currentFocusIndex
-            });
-        };
-        this.emitChangeEvent = () => {
-            this.emit('change', {
-                values: this.SelectedOptions,
-                currentFocusIndex: this.currentFocusIndex
-            });
-        };
-        this.clearFilterFromDOMElements = () => {
-            if (!this.listbox) {
-                return;
-            }
-            const domSections = Array.from(this.listbox.querySelectorAll('.dropdown-list-section') || []).map((s) => s);
-            const domOptions = Array.from(this.listbox.querySelectorAll('[role=option]')).map((o) => o);
-            //  REMOVE ALL HIDE CLASSES FROM SECTIONS
-            domSections.forEach((section) => {
-                section.classList.remove('no-visible');
-            });
-            //  REMOVE ALL HIDE CLASSES FROM OPTIONS
-            domOptions.forEach((elem) => {
-                elem.classList.remove('no-visible');
-            });
-        };
-        this.applyFilterToDOMElements = () => {
-            if (!this.listbox) {
-                return;
-            }
-            const domSections = Array.from(this.listbox.querySelectorAll('.dropdown-list-section') || []).map((s) => s);
-            if (this.filterResults.length <= 0) {
-                //  HIDE ALL SECTIONS INCLUDING SELECT ALL
-                domSections.forEach((section) => {
-                    section.classList.add('no-visible');
-                });
-            }
-            else {
-                const sectionsWithResultsIDs = [...new Set(this.filterResults.map((r) => { var _a; return (_a = r.itemSectionId) !== null && _a !== void 0 ? _a : ''; }))].filter((s) => !!s);
-                removeNoVisibleFromSectionsWithResults(sectionsWithResultsIDs);
-                showSectionsWithNoResultsOccurrences(domSections, sectionsWithResultsIDs, this.selectAllSectionId);
-                const domOptions = Array.from(this.listbox.querySelectorAll('[role=option]')).map((o) => o);
-                hideOptionsNotPresentInResults(domOptions, this.filterResults);
-            }
-        };
-        this.selectAllOptions = (selectedOption) => {
-            this.isSelectAllActive = !selectedOption.selected;
-            this.options = this.options.map((op) => {
-                if (op.sectionType === 'checkbox') {
-                    return Object.assign(Object.assign({}, op), { selected: this.isSelectAllActive });
-                }
-                return Object.assign({}, op);
-            });
-        };
-        this.selectCheckboxOption = (selectedIndex) => {
-            this.options[selectedIndex].selected = !this.options[selectedIndex].selected;
-        };
-        this.selectTextOrRadioOption = (selectedOption, selectedIndex) => {
-            const { itemSectionId, sectionType } = selectedOption;
-            this.options = this.options.map((o, idx) => {
-                if (o.sectionType === sectionType && o.itemSectionId === itemSectionId) {
-                    if (selectedIndex === idx) {
-                        return Object.assign(Object.assign({}, o), { selected: true });
-                    }
-                    return Object.assign(Object.assign({}, o), { selected: false });
-                }
-                return Object.assign({}, o);
-            });
-        };
-        this.nextWithFilterActive = () => {
-            if (this.filterResults.length === 0) {
-                return;
-            }
-            const lastIndex = this.currentFocusIndex;
-            //  FIND THE NEXT NON DISABLED ITEM STARTING IN THE LAST FOCUSED INDEX
-            let nextFocusableIndex = this.options.findIndex((op, index) => {
-                if (index > lastIndex) {
-                    const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                    return !op.disabled && (op.value === '_all_' || isInResultFilter);
-                }
-                return false;
-            });
-            if (nextFocusableIndex < 0) {
-                //  DID NOT FOUND A FOCUSABLE ELEMENT IN THE REMAINING LIST...TRY FROM THE BEGINNING OF THE ARRAY (CIRCULAR LOGIC)
-                nextFocusableIndex = this.options.findIndex((op, index) => {
-                    if (index <= lastIndex) {
-                        const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                        return !op.disabled && (op.value === '_all_' || isInResultFilter);
-                    }
-                    return false;
-                });
-            }
-            this.updateFocusIndex(nextFocusableIndex);
-        };
-        this.nextWithoutFiltersActive = () => {
-            const lastIndex = this.currentFocusIndex;
-            //  FIND THE NEXT NON DISABLED ITEM STARTING IN THE LAST FOCUSED INDEX
-            let nextFocusableIndex = this.options.findIndex((op, index) => {
-                if (index > lastIndex) {
-                    return !op.disabled;
-                }
-                return false;
-            });
-            if (nextFocusableIndex < 0) {
-                //  DID NOT FOUND A FOCUSABLE ELEMENT IN THE REMAINING LIST...TRY FROM THE BEGINNING OF THE ARRAY (CIRCULAR LOGIC)
-                nextFocusableIndex = this.options.findIndex((op, index) => {
-                    if (index <= lastIndex) {
-                        return !op.disabled;
-                    }
-                    return false;
-                });
-            }
-            this.updateFocusIndex(nextFocusableIndex);
-        };
-        this.previousWithFilterActive = () => {
-            const lastIndex = this.currentFocusIndex;
-            if (this.filterResults.length === 0) {
-                return;
-            }
-            //  FIND THE PREVIOUS NON DISABLED ITEM BEHIND THE LAST FOCUSED INDEX
-            let previousFocusableIndex = this.options.findLastIndex((op, index) => {
-                if (index < lastIndex) {
-                    const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                    return !op.disabled && (op.value === '_all_' || isInResultFilter);
-                }
-                return false;
-            });
-            if (previousFocusableIndex < 0) {
-                //  DID NOT FOUND A FOCUSABLE ELEMENT IN THE REMAINING LIST...TRY FROM THE BEGINNING OF THE ARRAY (CIRCULAR LOGIC)
-                previousFocusableIndex = this.options.findLastIndex((op, index) => {
-                    if (index >= lastIndex) {
-                        const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                        return !op.disabled && (op.value === '_all_' || isInResultFilter);
-                    }
-                    return false;
-                });
-            }
-            this.updateFocusIndex(previousFocusableIndex);
-        };
-        this.previousWithoutFilterActive = () => {
-            const lastIndex = this.currentFocusIndex;
-            //  FIND THE PREVIOUS NON DISABLED ITEM BEHIND THE LAST FOCUSED INDEX
-            let previousFocusableIndex = this.options.findLastIndex((op, index) => {
-                if (index < lastIndex) {
-                    return !op.disabled;
-                }
-                return false;
-            });
-            if (previousFocusableIndex < 0) {
-                //  DID NOT FOUND A FOCUSABLE ELEMENT IN THE REMAINING LIST...TRY FROM THE BEGINNING OF THE ARRAY (CIRCULAR LOGIC)
-                previousFocusableIndex = this.options.findLastIndex((op, index) => {
-                    if (index >= lastIndex) {
-                        return !op.disabled;
-                    }
-                    return false;
-                });
-            }
-            this.updateFocusIndex(previousFocusableIndex);
-        };
-    }
-    initializeSelectAllValue() {
-        this.isSelectAllActive = this.options
-            .filter((op) => op.sectionType === 'checkbox')
-            .every((op) => {
-            return !!op.selected;
-        });
-    }
-    initializeOptions() {
-        if (!Array.isArray(this.children)) {
-            this.children = [this.children];
-        }
-        this.options = Array.from(this.children)
-            .map((child) => {
-            const childProps = child === null || child === void 0 ? void 0 : child['props'];
-            const { items, id: itemSectionId, type } = childProps;
-            return items.map((item) => (Object.assign(Object.assign({}, item), { itemSectionId, sectionType: type, selected: !!item.selected })));
-        })
-            .flat();
-        if (this.selectAll) {
-            this.initializeSelectAllValue();
-            this.options.unshift({
-                value: '_all_',
-                itemSectionId: this.selectAllSectionId,
-                sectionType: 'checkbox',
-                selected: this.isSelectAllActive
-            });
-        }
-    }
-    getFirstFocusableIndex() {
-        return this.options.findIndex((op) => {
-            return !op.disabled;
-        });
-    }
-    focusDOMElement(initial = false) {
-        var _a;
-        if (!this.listbox) {
-            return;
-        }
-        const domOptions = Array.from(this.listbox.querySelectorAll('[role=option]')) || [];
-        const focusedOption = this.options[this.currentFocusIndex];
-        let lastActiveElementId = '';
-        domOptions === null || domOptions === void 0 ? void 0 : domOptions.forEach((elem) => {
-            var _a, _b;
-            const nodeValue = (_a = elem.dataset.value) !== null && _a !== void 0 ? _a : '';
-            const nodeSectionId = (_b = elem.dataset.sectionId) !== null && _b !== void 0 ? _b : '';
-            if (focusedOption.itemSectionId === nodeSectionId && focusedOption.value === nodeValue) {
-                elem.classList.add('current-option');
-                if (!initial && this.listbox && !isTotallyVisibleInsideContainer(elem, this.listbox)) {
-                    elem.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'center'
-                    });
-                }
-                lastActiveElementId = elem.id;
-            }
-            else {
-                elem.classList.remove('current-option');
-            }
-        });
-        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', lastActiveElementId);
-    }
-    init(listboxRef, controllerRef, childrenNodes, currentFocusIndex, enableSelectAll, selectAllSectionId) {
-        this.listbox = listboxRef;
-        this.controller = controllerRef;
-        this.children = childrenNodes;
-        this.selectAll = enableSelectAll;
-        this.selectAllSectionId = selectAllSectionId;
-        //  INITIALIZE OPTIONS ARRAY
-        this.initializeOptions();
-        this.currentFocusIndex = currentFocusIndex || this.getFirstFocusableIndex();
-        this.focusDOMElement(true);
-    }
-    selectOption(option) {
-        const selectedIndex = this.options.findIndex((o) => o.itemSectionId === option.itemSectionId && o.value === option.value);
-        if (selectedIndex >= 0) {
-            const selectedOption = this.options[selectedIndex];
-            const isSelectAll = selectedOption.value === '_all_' && selectedOption.itemSectionId === this.selectAllSectionId;
-            if (isSelectAll) {
-                this.selectAllOptions(selectedOption);
-            }
-            else if (selectedOption.sectionType === 'checkbox') {
-                this.selectCheckboxOption(selectedIndex);
-            }
-            else {
-                this.selectTextOrRadioOption(selectedOption, selectedIndex);
-            }
-            this.emitChangeEvent();
-        }
-        this.focusControlRef();
-    }
-    select() {
-        const selectedOption = this.options[this.currentFocusIndex];
-        if (!selectedOption) {
-            return;
-        }
-        this.selectOption(selectedOption);
-    }
-    updateFocusIndex(focusableIndex) {
-        if (focusableIndex >= 0) {
-            this.currentFocusIndex = focusableIndex;
-            this.focusDOMElement();
-            this.emitFocusEvent();
-        }
-    }
-    next() {
-        if (this.isFilterActive) {
-            this.nextWithFilterActive();
-        }
-        else {
-            this.nextWithoutFiltersActive();
-        }
-    }
-    previous() {
-        if (this.isFilterActive) {
-            this.previousWithFilterActive();
-        }
-        else {
-            this.previousWithoutFilterActive();
-        }
-    }
-    first() {
-        if (this.isFilterActive) {
-            if (this.filterResults.length === 0) {
-                return;
-            }
-            //  Find last index non disabled and present in filter results
-            this.currentFocusIndex = this.options.findIndex((op) => {
-                const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                return !op.disabled && (op.value === '_all_' || isInResultFilter);
-            });
-        }
-        else {
-            this.currentFocusIndex = this.options.findIndex((op) => {
-                return !op.disabled;
-            });
-        }
-        this.focusDOMElement();
-        this.emitFocusEvent();
-    }
-    last() {
-        if (this.isFilterActive) {
-            if (this.filterResults.length === 0) {
-                return;
-            }
-            //  Find last index non disabled and present in filter results
-            this.currentFocusIndex = this.options.findLastIndex((op) => {
-                const isInResultFilter = this.filterResults.find((r) => r.itemSectionId === op.itemSectionId && r.value === op.value);
-                return !op.disabled && (op.value === '_all_' || isInResultFilter);
-            });
-        }
-        else {
-            this.currentFocusIndex = this.options.findLastIndex((op) => {
-                return !op.disabled;
-            });
-        }
-        this.focusDOMElement();
-        this.emitFocusEvent();
-    }
-    focusControlRef() {
-        var _a, _b;
-        (_a = this.listbox) === null || _a === void 0 ? void 0 : _a.classList.remove('hide-focus-target');
-        this.focusDOMElement();
-        (_b = this.controller) === null || _b === void 0 ? void 0 : _b.focus();
-    }
-    applyFilter(results) {
-        this.isFilterActive = true;
-        this.filterResults = results;
-        if (results.length > 0) {
-            const r = results[0];
-            this.currentFocusIndex = this.options.findIndex((o) => o.itemSectionId === r.itemSectionId && o.value === r.value);
-        }
-        else {
-            this.currentFocusIndex = 0;
-        }
-        this.applyFilterToDOMElements();
-    }
-    clearFilter() {
-        this.isFilterActive = false;
-        this.filterResults = [];
-        this.currentFocusIndex = 0;
-        this.clearFilterFromDOMElements();
-    }
-    get SelectedOptions() {
-        return this.options.filter((o) => o.selected);
-    }
-    get Children() {
-        return this.children;
-    }
-    get AvailableOptions() {
-        return this.options;
-    }
-    get IsSelectAllActive() {
-        return this.isSelectAllActive;
-    }
-    get FocusIndex() {
-        return this.currentFocusIndex;
-    }
-}
-export const DropdownStateContext = createContext(null);

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

@@ -1,203 +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, { useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { DropdownSection } from '.';
-import { stringToBoolean } from '../../../index';
-import { DropdownSectionStateManager, DropdownStateContext } from './contexts/dropdown-section-state.context';
-import './dropdown-list.scss';
-import { DropdownSearchInput } from './dropdown-search-input';
-const DropdownListChild = (_a) => {
-    var { visibleCount = 4, onChange, children, controlRef, onDismiss, searchable, selectAll, selectAllLabel = '', searchDebounceTimeout = 300, searchInputPlaceholder, searchInputAriaLabel, searchNoResultsText = '' } = _a, props = __rest(_a, ["visibleCount", "onChange", "children", "controlRef", "onDismiss", "searchable", "selectAll", "selectAllLabel", "searchDebounceTimeout", "searchInputPlaceholder", "searchInputAriaLabel", "searchNoResultsText"]);
-    const generatedId = useId();
-    const propsClone = Object.assign({}, props);
-    propsClone.id = propsClone.id || generatedId;
-    const selectAllSectionId = useId();
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const [componentHeight, setComponentHeight] = useState(0);
-    const [showNoResults, setShowNoResults] = useState(false);
-    const searchRef = useRef(null);
-    const listboxRef = useRef(null);
-    const innerControlRef = useMemo(() => {
-        return controlRef;
-    }, [controlRef]);
-    const stateManagerMemo = useContext(DropdownStateContext);
-    stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.init(listboxRef.current, innerControlRef.current, children, currentIndex, selectAll, selectAllSectionId);
-    const handleKeyboardNavigationOnController = (evt) => {
-        var _a;
-        evt.preventDefault();
-        if (evt.code === 'Tab' && searchable) {
-            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        if (evt.code === 'Escape') {
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-        if (evt.code === 'ArrowUp') {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.previous();
-        }
-        if (evt.code === 'ArrowDown') {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.next();
-        }
-        if (evt.code === 'Home') {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.first();
-        }
-        if (evt.code === 'End') {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.last();
-        }
-        if (evt.code === 'Enter' || evt.code === 'Space') {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.select();
-        }
-    };
-    const handleKeyboardNavigationOnSearchInput = (evt) => {
-        if (evt.code === 'Tab') {
-            evt.preventDefault();
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.focusControlRef();
-        }
-    };
-    const handleBlurListbox = () => {
-        var _a, _b;
-        (_a = listboxRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('hide-focus-target');
-        (_b = innerControlRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-activedescendant', '');
-    };
-    useEffect(() => {
-        var _a;
-        if (showNoResults) {
-            (_a = innerControlRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
-        }
-    }, [showNoResults]);
-    const handleKeydownSearchInput = (evt) => {
-        if (evt.code !== 'Escape') {
-            //  Dismiss have to be done this way because tab must move focus to the control element.
-            evt.preventDefault();
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-    };
-    const getComponentInitialHeight = () => {
-        var _a, _b, _c, _d, _e, _f;
-        // get all options
-        const options = (_b = (_a = listboxRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role=option]')) !== null && _b !== void 0 ? _b : [];
-        // get first section header in case exists
-        const sectionsHeader = (_d = (_c = listboxRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.dropdown-list-section-title')) !== null && _d !== void 0 ? _d : [];
-        //  sum of all section header height
-        let headersHeight = 0;
-        if (options.length <= visibleCount) {
-            headersHeight = sectionsHeader.length
-                ? Array.from(sectionsHeader)
-                    .map((item) => item.getBoundingClientRect().height)
-                    .reduce((prev, current) => {
-                    return prev + current;
-                }, 0)
-                : 0;
-        }
-        else {
-            headersHeight = (_f = (_e = sectionsHeader[0]) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().height) !== null && _f !== void 0 ? _f : 0;
-        }
-        // initial value will be first header height or 0 case doesn't exist
-        let optionsHeight = 0;
-        if (options && options.length > 0) {
-            Array.from(options)
-                .slice(0, visibleCount)
-                .forEach((opt) => {
-                const { height } = opt.getBoundingClientRect();
-                optionsHeight += height;
-            });
-            //  last visible option border hidden by the listbox border
-            optionsHeight -= 2;
-        }
-        if (searchable) {
-            optionsHeight += 2;
-        }
-        return headersHeight + optionsHeight;
-    };
-    const handleOnStateManagerChange = (changes) => {
-        const { values, currentFocusIndex } = changes;
-        setCurrentIndex(currentFocusIndex);
-        onChange === null || onChange === void 0 ? void 0 : onChange(values);
-    };
-    const handleOnStateManagerFocus = (changes) => {
-        const { currentFocusIndex } = changes;
-        setCurrentIndex(currentFocusIndex);
-    };
-    useEffect(() => {
-        var _a, _b;
-        if (innerControlRef.current) {
-            innerControlRef.current.addEventListener('keypress', handleKeyboardNavigationOnController);
-            innerControlRef.current.addEventListener('keydown', handleKeyboardNavigationOnController);
-        }
-        if (searchRef.current) {
-            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keypress', handleKeyboardNavigationOnSearchInput);
-            (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', handleKeyboardNavigationOnSearchInput);
-        }
-        if (stateManagerMemo) {
-            stateManagerMemo.on('change', handleOnStateManagerChange);
-            stateManagerMemo.on('focus', handleOnStateManagerFocus);
-        }
-        return () => {
-            if (innerControlRef.current) {
-                innerControlRef.current.removeEventListener('keypress', handleKeyboardNavigationOnController);
-                innerControlRef.current.removeEventListener('keydown', handleKeyboardNavigationOnController);
-            }
-            if (searchRef.current) {
-                searchRef.current.removeEventListener('keypress', handleKeyboardNavigationOnSearchInput);
-                searchRef.current.removeEventListener('keydown', handleKeyboardNavigationOnSearchInput);
-            }
-            if (stateManagerMemo) {
-                stateManagerMemo.off('change', handleOnStateManagerChange);
-                stateManagerMemo.off('focus', handleOnStateManagerFocus);
-            }
-        };
-    }, []);
-    useEffect(() => {
-        setComponentHeight(getComponentInitialHeight());
-    }, [visibleCount]);
-    const handleSearchDismiss = () => {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    };
-    const handleOnSearchChange = (results) => {
-        var _a, _b;
-        if (((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value) && ((_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.value.length) > 0) {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.applyFilter(results);
-        }
-        else {
-            stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.clearFilter();
-        }
-        setShowNoResults(results.length <= 0);
-    };
-    const dropdownClass = classNames('agora-dropdown-list', {
-        'is-searchable': stringToBoolean(searchable)
-    });
-    const dropdownWrapperClass = classNames('agora-dropdown-list-wrapper', propsClone.className);
-    return (React.createElement("div", { className: dropdownWrapperClass },
-        stringToBoolean(searchable) && (React.createElement(DropdownSearchInput, { ref: searchRef, debounce: searchDebounceTimeout, options: (stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.AvailableOptions) || [], "aria-label": searchInputAriaLabel, placeholder: searchInputPlaceholder, onFocus: handleBlurListbox, onKeyDown: handleKeydownSearchInput, onChange: handleOnSearchChange, onDismiss: handleSearchDismiss })),
-        React.createElement("div", { id: propsClone.id, role: "listbox", "aria-multiselectable": "true" // this will update always selection for screen reader.
-            , style: {
-                maxHeight: componentHeight
-            }, tabIndex: -1, className: dropdownClass, ref: listboxRef, "aria-label": propsClone['aria-label'] },
-            stringToBoolean(selectAll) && (React.createElement(DropdownSection, { id: selectAllSectionId, type: "checkbox", items: [
-                    {
-                        text: selectAllLabel,
-                        value: '_all_',
-                        selected: stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 : stateManagerMemo.IsSelectAllActive
-                    }
-                ] })), stateManagerMemo === null || stateManagerMemo === void 0 ? void 0 :
-            stateManagerMemo.Children),
-        showNoResults && React.createElement("div", { className: "text-center py-16" }, searchNoResultsText)));
-};
-const DropdownList = (props) => {
-    const memo = useMemo(() => {
-        return new DropdownSectionStateManager();
-    }, []);
-    return (React.createElement(DropdownStateContext.Provider, { value: memo },
-        React.createElement(DropdownListChild, Object.assign({}, props))));
-};
-export { DropdownList };

package/dist/components/ui/molecules/dropdown-list/dropdown-list.scss

@@ -1 +0,0 @@
-.agora-dropdown-list-wrapper{position:relative;z-index:10;width:100%;border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(225 228 234 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-shadow:0px 12px 16px 4px rgba(0, 0, 0, 0.07);--tw-shadow-colored:0px 12px 16px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.agora-dropdown-list-wrapper .search-wrapper{height:56px;width:100%}.agora-dropdown-list-wrapper .search-wrapper input{height:100%;width:100%;border-width:2px;border-color:transparent;--tw-border-opacity:1;border-bottom-color:rgb(225 228 234 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(250 252 255 / var(--tw-bg-opacity));padding-left:16px;padding-right:56px;font-size:1rem;line-height:1.75rem;letter-spacing:0;font-weight:400}.agora-dropdown-list-wrapper .search-wrapper input:focus{border-radius:4px;border-width:2px;--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px}.agora-dropdown-list-wrapper .search-wrapper input:focus~.magnifier-area svg>*{fill:#034ad8}.agora-dropdown-list-wrapper .search-wrapper .magnifier-area{position:absolute;top:0;right:0;display:flex;height:56px;width:56px;align-items:center;justify-content:center}.agora-dropdown-list-wrapper .search-wrapper .magnifier-area svg>*{fill:#64718b}.agora-dropdown-list-wrapper .agora-dropdown-list{overflow-y:auto;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list .items-wrapper{height:100%;overflow-y:auto}.agora-dropdown-list-wrapper .agora-dropdown-list:focus,.agora-dropdown-list-wrapper .agora-dropdown-list:focus-visible{outline-width:0}.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section-title{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:8px}.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section:last-of-type div.agora-dropdown-list-item:last-of-type:not(.current-option),.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section:last-of-type div.agora-dropdown-list-item:last-of-type:not(.no-visible){border-style:none}.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section:last-of-type .agora-dropdown-list-item:last-of-type.current-option{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-width:0}.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section:first-of-type:not(.has-header-text) .agora-dropdown-list-item:first-of-type.current-option{border-top-left-radius:4px;border-top-right-radius:4px}.agora-dropdown-list-wrapper .agora-dropdown-list .dropdown-list-section .last-item{border-style:none}.agora-dropdown-list-wrapper .agora-dropdown-list.is-searchable .agora-dropdown-list-item:first-of-type.current-option{border-top-left-radius:0!important;border-top-right-radius:0!important}.agora-dropdown-list-wrapper .agora-dropdown-list .no-visible{display:none}.agora-dropdown-list-wrapper .agora-dropdown-list-item{display:flex;cursor:default;align-items:center;border-bottom-width:2px;--tw-border-opacity:1;border-bottom-color:rgb(225 228 234 / var(--tw-border-opacity));min-height:60px!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item:focus-visible:not(.is-disabled),.agora-dropdown-list-wrapper .agora-dropdown-list-item:focus:not(.is-disabled){--tw-bg-opacity:1!important;background-color:rgb(242 246 255 / var(--tw-bg-opacity))!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item>.icon-wrapper{min-width:24px}.agora-dropdown-list-wrapper .agora-dropdown-list-item>.icon-wrapper img{height:24px;width:24px}.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled{cursor:not-allowed!important;--tw-bg-opacity:1!important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-text-opacity:1!important;color:rgb(205 210 220 / var(--tw-text-opacity))!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled:focus,.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled:focus-visible{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;--tw-bg-opacity:1!important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled .option-text{cursor:not-allowed!important;--tw-text-opacity:1!important;color:rgb(156 166 184 / var(--tw-text-opacity))!important;margin-top:-1px}.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled .checkbox-span,.agora-dropdown-list-wrapper .agora-dropdown-list-item.is-disabled .radio-span{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item .option-text{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item.has-icon .option-text{margin-left:8px}.agora-dropdown-list-wrapper .agora-dropdown-list-item.has-icon.trailing{flex-direction:row-reverse;justify-content:space-between}.agora-dropdown-list-wrapper .agora-dropdown-list-item.has-icon.trailing .option-text{margin-left:0;margin-right:8px}.agora-dropdown-list-wrapper .agora-dropdown-list-item[aria-selected=true]:not(.is-disabled){--tw-bg-opacity:1!important;background-color:rgb(241 243 248 / var(--tw-bg-opacity))!important;outline:2px solid transparent!important;outline-offset:2px!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item[aria-selected=true]:not(.is-disabled) .option-text{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item.current-option{box-shadow:inset 0 0 0 2px #034ad8;--tw-bg-opacity:1!important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-shadow-color:#034AD8!important;--tw-shadow:var(--tw-shadow-colored)!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item.current-option span{--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item:hover:not(.is-disabled){--tw-bg-opacity:1!important;background-color:rgb(247 248 250 / var(--tw-bg-opacity))!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item:hover:not(.is-disabled) span{font-weight:700;--tw-text-opacity:1;color:rgb(43 54 60 / var(--tw-text-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item-text{padding:16px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox .option-text,.agora-dropdown-list-wrapper .agora-dropdown-list-item-radio .option-text{margin-top:-1px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox{position:relative;align-items:flex-start;padding:16px;padding-left:56px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox .option-text{margin-top:-1px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity));font-weight:700}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox[aria-selected=true] .checkbox-span{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(3 74 216 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox[aria-selected=true] .checkbox-span svg{display:block}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox[aria-selected=true] .checkbox-span svg>*{fill:#fff}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled .checkbox-span{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled .checkbox-span svg{display:block;opacity:0}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled .checkbox-span svg>*{fill:#f1f3f8}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled[aria-selected=true] .checkbox-span{--tw-border-opacity:1;border-color:rgb(205 210 220 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(241 243 248 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled[aria-selected=true] .checkbox-span svg{display:block!important;opacity:1!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox.is-disabled[aria-selected=true] .checkbox-span svg>*{fill:#9ca6b8!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox .checkbox-span{position:absolute;left:16px;display:flex;height:24px;width:24px;align-items:center;justify-content:center;border-radius:4px;border-width:2px;border-style:solid;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox .checkbox-span svg{display:none}.agora-dropdown-list-wrapper .agora-dropdown-list-item-checkbox .checkbox-span svg>*{fill:#fff!important}.agora-dropdown-list-wrapper .agora-dropdown-list-item-radio{position:relative;align-items:flex-start;padding:16px;padding-left:56px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-radio[aria-selected=true] .radio-span{--tw-border-opacity:1;border-color:rgb(3 74 216 / var(--tw-border-opacity));border-width:6px}.agora-dropdown-list-wrapper .agora-dropdown-list-item-radio .radio-span{position:absolute;left:16px;display:flex;height:24px;width:24px;align-items:center;justify-content:center;border-radius:24px;border-width:2px;border-style:solid;--tw-border-opacity:1;border-color:rgb(136 147 170 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.agora-dropdown-list-wrapper .agora-dropdown-list.hide-focus-target .dropdown-list-section>div{box-shadow:none}

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

@@ -1,23 +0,0 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { Icon } from '../..';
-import { useDropdownSearch } from './hooks/use-dropdown-search';
-const InnerDropdownSearchInput = (props, ref) => {
-    const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current);
-    const { results } = useDropdownSearch(innerRef, props.options, props.debounce);
-    useEffect(() => {
-        var _a;
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, results);
-    }, [results]);
-    const handleSearchKeydown = (evt) => {
-        var _a;
-        if (evt.key === 'Escape') {
-            (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
-        }
-    };
-    return (React.createElement("div", { className: "search-wrapper" },
-        React.createElement("input", { type: "text", className: "text-m-regular", ref: innerRef, "aria-label": props['aria-label'], placeholder: props.placeholder, tabIndex: 0, onKeyDown: handleSearchKeydown, onFocus: props.onFocus, onBlur: props.onBlur }),
-        React.createElement("div", { className: "magnifier-area" },
-            React.createElement(Icon, { "aria-hidden": true, name: "agora-line-search" }))));
-};
-export const DropdownSearchInput = forwardRef(InnerDropdownSearchInput);