@inseefr/lunatic 3.0.0-rc.10 → 3.0.0-rc.12

package/lib/src/components/shared/Button/IconButton.spec.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it, describe, vi } from 'vitest';
+import { IconButton } from './IconButton';
+describe('Fab', () => {
+    it('renders children', () => {
+        render(_jsx(IconButton, { children: "Test Children" }));
+        expect(screen.getByText('Test Children')).toBeInTheDocument();
+    });
+    it('renders title', () => {
+        render(_jsx(IconButton, { title: "Test Title", children: "Test Children" }));
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('title', 'Test Title');
+        expect(button).toHaveAttribute('aria-label', 'Test Title');
+    });
+    it('calls onClick when clicked', async () => {
+        const handleClick = vi.fn();
+        render(_jsx(IconButton, { onClick: handleClick, children: "Test Children" }));
+        const button = screen.getByRole('button');
+        await userEvent.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('calls onKeyDown when a key is pressed', async () => {
+        const handleKeyDown = vi.fn();
+        render(_jsx(IconButton, { onKeyDown: handleKeyDown, children: "Test Children" }));
+        const button = screen.getByRole('button');
+        await userEvent.type(button, '{enter}');
+        expect(handleKeyDown).toHaveBeenCalledTimes(1);
+    });
+    it('is disabled when disabled prop is true', () => {
+        render(_jsx(IconButton, { disabled: true, children: "Test Children" }));
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+    });
+    it('has custom className', () => {
+        render(_jsx(IconButton, { className: "test-class", children: "Test Children" }));
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('test-class');
+    });
+    it('has custom tabIndex', () => {
+        render(_jsx(IconButton, { tabIndex: 1, children: "Test Children" }));
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('tabIndex', '1');
+    });
+    it('has default props', () => {
+        render(_jsx(IconButton, {}));
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('title', 'Fab');
+        expect(button).not.toBeDisabled();
+    });
+});
+//# sourceMappingURL=IconButton.spec.js.map

package/lib/src/components/shared/Button/IconButton.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.spec.js","sourceRoot":"","sources":["../../../../../src/components/shared/Button/IconButton.spec.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/shared/Checkbox/CheckboxOption.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import classnames from 'classnames';
+import { CheckboxCheckedIcon, CheckboxUncheckedIcon } from '../Icons';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { Label } from '../Label/Label';
+function LunaticCheckboxOption({ disabled, checked, id, onClick, label, description, codeModality, shortcut, invalid, }) {
+    const onClickOption = useCallback(function () {
+        onClick(!checked);
+    }, [checked, onClick]);
+    const handleKeyDown = useCallback(function (e) {
+        const { code } = e;
+        if (code === 'Space') {
+            onClickOption();
+        }
+    }, [onClickOption]);
+    const Icon = checked ? CheckboxCheckedIcon : CheckboxUncheckedIcon;
+    const labelId = `label-${id}`;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classnames('checkbox-modality', 'checkbox-modality-block', {
+                    checked,
+                    disabled,
+                }), children: _jsxs("span", { id: id, role: "checkbox", "aria-invalid": invalid, className: `lunatic-input-checkbox`, "aria-checked": checked, tabIndex: 0, onClick: onClickOption, onKeyDown: handleKeyDown, "aria-labelledby": labelId, children: [_jsx(Icon, {}), _jsxs(Label, { id: labelId, htmlFor: id, description: description, children: [codeModality && (_jsx("span", { className: "code-modality", children: codeModality.toUpperCase() })), label] })] }) }), shortcut && codeModality && (_jsx(KeyboardEventHandler, { handleKeys: [codeModality], onKeyEvent: (key, e) => {
+                    e.preventDefault();
+                    onClickOption();
+                }, handleFocusableElements: true }))] }));
+}
+export const CheckboxOption = slottableComponent('CheckboxOption', LunaticCheckboxOption);
+//# sourceMappingURL=CheckboxOption.js.map

package/lib/src/components/shared/Checkbox/CheckboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../../../src/components/shared/Checkbox/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,WAAW,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACtE,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAcvC,SAAS,qBAAqB,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,GACc;IACrB,MAAM,aAAa,GAAG,WAAW,CAChC;QACC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAChC,UAAU,CAAmB;QAC5B,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;QACnB,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACtB,aAAa,EAAE,CAAC;QACjB,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACnE,MAAM,OAAO,GAAG,SAAS,EAAE,EAAE,CAAC;IAE9B,OAAO,CACN,8BACC,cACC,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,yBAAyB,EAAE;oBACrE,OAAO;oBACP,QAAQ;iBACR,CAAC,YAEF,gBACC,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,kBACD,OAAO,EACrB,SAAS,EAAE,wBAAwB,kBACrB,OAAO,EACrB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,aAAa,qBACP,OAAO,aAExB,KAAC,IAAI,KAAG,EACR,MAAC,KAAK,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,aACvD,YAAY,IAAI,CAChB,eAAM,SAAS,EAAC,eAAe,YAC7B,YAAY,CAAC,WAAW,EAAE,GACrB,CACP,EACA,KAAK,IACC,IACF,GACF,EACL,QAAQ,IAAI,YAAY,IAAI,CAC5B,KAAC,oBAAoB,IACpB,UAAU,EAAE,CAAC,YAAY,CAAC,EAC1B,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,aAAa,EAAE,CAAC;gBACjB,CAAC,EACD,uBAAuB,SACtB,CACF,IACC,CACH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAC/C,gBAAgB,EAChB,qBAAqB,CACrB,CAAC"}

package/lib/src/components/shared/Checkbox/CheckboxOption.spec.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxOption } from './CheckboxOption';
+import { describe, it, expect, vi } from 'vitest';
+describe('CheckboxOption', () => {
+    const props = {
+        id: 'checkbox',
+        onClick: vi.fn(),
+        checked: false,
+        disabled: false,
+        label: 'Option 1',
+        description: 'This is option 1',
+        codeModality: 'ctrl',
+        shortcut: false,
+    };
+    const defaultProps = {
+        id: 'test-checkbox',
+        onClick: vi.fn(),
+        label: 'Test checkbox',
+    };
+    it('renders the component correctly', () => {
+        const { getByRole, getByText } = render(_jsx(CheckboxOption, { ...props }));
+        const checkbox = getByRole('checkbox');
+        const label = getByText('Option 1');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).not.toBeChecked();
+        expect(label).toBeInTheDocument();
+    });
+    it('renders the label text', () => {
+        const { getByText } = render(_jsx(CheckboxOption, { ...defaultProps }));
+        expect(getByText(defaultProps.label)).toBeInTheDocument();
+    });
+    it('renders the component with the checked attribute', () => {
+        const { getByRole } = render(_jsx(CheckboxOption, { ...props, checked: true }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toBeChecked();
+    });
+    it('calls the onClick function when clicked', () => {
+        const { getByRole } = render(_jsx(CheckboxOption, { ...props }));
+        const checkbox = getByRole('checkbox');
+        fireEvent.click(checkbox);
+        expect(props.onClick).toHaveBeenCalledTimes(1);
+        expect(props.onClick).toHaveBeenCalledWith(true);
+    });
+    it('calls the onClick function when space key is pressed', () => {
+        const { getByRole } = render(_jsx(CheckboxOption, { ...defaultProps }));
+        const checkbox = getByRole('checkbox');
+        fireEvent.keyDown(checkbox, { code: 'Space' });
+        expect(defaultProps.onClick).toHaveBeenCalledWith(true);
+    });
+});
+//# sourceMappingURL=CheckboxOption.spec.js.map

package/lib/src/components/shared/Checkbox/CheckboxOption.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.spec.js","sourceRoot":"","sources":["../../../../../src/components/shared/Checkbox/CheckboxOption.spec.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/shared/Checkbox/getShortcutKey.js

@@ -0,0 +1,3 @@
+import { alphabet } from '../../../utils/constants/alphabet';
+export const getShortcutKey = (currentIndex, maxIndex) => (maxIndex < 10 ? `${currentIndex + 1}` : alphabet[currentIndex]);
+//# sourceMappingURL=getShortcutKey.js.map

package/lib/src/components/shared/Checkbox/getShortcutKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getShortcutKey.js","sourceRoot":"","sources":["../../../../../src/components/shared/Checkbox/getShortcutKey.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC7B,YAAoB,EACpB,QAAgB,EACP,EAAE,CAAC,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC"}

package/lib/src/components/shared/Combobox/Combobox.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useState } from 'react';
+import { ComboboxContainer } from './ComboboxContainer';
+import { ComboboxContent } from './ComboboxContent';
+import { KEYBOARD_KEY_CODES } from './constants';
+import { ComboboxPanel } from './Panel/ComboboxPanel';
+import { ComboboxClearButton } from './Selection/ComboboxClearButton';
+import { ComboboxSelection } from './Selection/ComboboxSelection';
+import { between, forceInt } from '../../../utils/number';
+import { Label } from '../Label/Label';
+import { slottableComponent } from '../HOC/slottableComponent';
+const EMPTY_SEARCH = '';
+function LunaticComboBox({ className, classNamePrefix, classStyle = 'default-style', placeholder = 'Commencez votre saisie...', editable = false, disabled, readOnly, id, optionRenderer, labelRenderer, onChange, onSelect, value, options, messageError, search: searchProps = EMPTY_SEARCH, getOptionValue = getDefaultOptionValue, label, description, errors, onBlur, }) {
+    const [expanded, setExpanded] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [search, setSearch] = useState(searchProps ?? '');
+    const selectedIndex = getIndexFromOptions(options, value, getOptionValue);
+    const labelId = `label-${id}`;
+    const handleFocus = () => {
+        if (disabled || readOnly) {
+            return;
+        }
+        setExpanded(true);
+        setFocused(true);
+    };
+    const handleBlur = () => {
+        if (disabled || readOnly) {
+            return;
+        }
+        onBlur?.();
+        setExpanded(false);
+        setFocused(false);
+    };
+    const handleSelect = (index, close = true) => {
+        const indexNumber = between(forceInt(index), 0, options.length);
+        const option = options[indexNumber];
+        if (close) {
+            setExpanded(false);
+        }
+        onSelect(getOptionValue(option));
+    };
+    const handleChange = (s) => {
+        setSearch(s ?? '');
+        onChange?.(s);
+    };
+    const handleClear = () => {
+        setSearch('');
+        setExpanded(false);
+        onChange?.(EMPTY_SEARCH);
+        onSelect(null);
+    };
+    const onKeyDown = (key) => {
+        const length = options.length;
+        switch (key) {
+            case KEYBOARD_KEY_CODES.Tab:
+            case KEYBOARD_KEY_CODES.Escape:
+                setExpanded(false);
+                return;
+            case KEYBOARD_KEY_CODES.ArrowDown:
+                handleSelect((selectedIndex ?? -1) + 1, false);
+                return;
+            case KEYBOARD_KEY_CODES.ArrowUp:
+                handleSelect((selectedIndex ?? length) - 1, false);
+                return;
+            case KEYBOARD_KEY_CODES.Home:
+                handleSelect(0, false);
+                return;
+            case KEYBOARD_KEY_CODES.End:
+                handleSelect(length - 1, false);
+                return;
+            case KEYBOARD_KEY_CODES.Enter:
+                setExpanded((v) => !v);
+                return;
+        }
+    };
+    const showClearButton = !disabled || !readOnly;
+    if (messageError) {
+        return (_jsx("div", { className: "lunatic-combo-box-message-error", children: messageError }));
+    }
+    return (_jsxs(ComboboxContainer, { id: id, className: className, classStyle: classStyle, classNamePrefix: classNamePrefix, errors: errors, children: [_jsx(Label, { htmlFor: id, id: labelId, description: description, children: label }), _jsxs(ComboboxContent, { focused: focused, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, classNamePrefix: classNamePrefix, children: [_jsx(ComboboxSelection, { labelRenderer: labelRenderer, placeholder: placeholder, search: search, expanded: expanded, id: id, labelId: labelId, disabled: disabled, readOnly: readOnly, focused: focused, editable: editable, selectedIndex: selectedIndex, options: options, onChange: handleChange, classNamePrefix: classNamePrefix, invalid: !!errors }), _jsx(ComboboxPanel, { optionRenderer: optionRenderer, options: options, focused: focused, selectedIndex: selectedIndex, expanded: expanded, id: id, search: search, onSelect: handleSelect })] }), showClearButton && (_jsx(ComboboxClearButton, { className: classnames({ focused }), search: search, onClick: handleClear, editable: editable }))] }));
+}
+function getIndexFromOptions(options, value, getOptionValue) {
+    if (!Array.isArray(options)) {
+        return undefined;
+    }
+    return options.map(getOptionValue).findIndex((v) => v === value);
+}
+/**
+ * Extract value from an option item
+ */
+function getDefaultOptionValue(option = { value: '' }) {
+    const { id, value } = option;
+    return id || value;
+}
+export const Combobox = slottableComponent('Combobox', LunaticComboBox);
+//# sourceMappingURL=Combobox.js.map

package/lib/src/components/shared/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/shared/Combobox/Combobox.stories.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from '@storybook/react';
+import { useState } from 'react';
+import { Combobox } from './Combobox';
+const meta = {
+    title: 'Components/Shared/ComboBox',
+    component: Combobox,
+};
+export default meta;
+const LabelRenderer = ({ option, placeholder, }) => _jsx(_Fragment, { children: option?.label ?? placeholder });
+const Template = (args) => {
+    const [localValue, setLocalValue] = useState(args.value);
+    const [search, setSearch] = useState('');
+    // Simulate a search
+    const options = search
+        ? args.options.filter((v) => v.value.toLowerCase().includes(search.toLowerCase()))
+        : args.options;
+    return (_jsxs("fieldset", { children: [_jsxs("legend", { children: ["Select an option : ", localValue] }), _jsx(Combobox, { ...args, value: localValue, onSelect: (v) => {
+                    setLocalValue(v);
+                    args.onSelect?.(v);
+                }, onChange: (v) => {
+                    setSearch(v);
+                    args.onChange?.(v);
+                }, options: options, labelRenderer: LabelRenderer, optionRenderer: LabelRenderer }), _jsx("button", { onClick: () => setLocalValue('4'), children: "S\u00E9lectionner paris" })] }));
+};
+export const Default = {
+    render: (args) => _jsx(Template, { ...args }),
+    args: {
+        value: '1',
+        options: [
+            { id: '1', value: 'Option 1', label: _jsx("strong", { children: "Option 1" }) },
+            { id: '2', value: 'Option 2', label: 'Option 2' },
+            { id: '3', value: 'Option 3', label: 'Option 3' },
+            { id: 'paris', value: 'Paris', label: 'Paris' },
+            { id: 'toulouse', value: 'Toulouse', label: 'Toulouse' },
+        ],
+    },
+};
+export const Editable = {
+    ...Default,
+    args: {
+        ...Default.parameters,
+        editable: true,
+    },
+};
+//# sourceMappingURL=Combobox.stories.js.map

package/lib/src/components/shared/Combobox/Combobox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.stories.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Combobox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,IAAI,GAA0B;IACnC,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,QAAQ;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,aAAa,GAAG,CAAC,EACtB,MAAM,EACN,WAAW,GAIX,EAAE,EAAE,CAAC,4BAAG,MAAM,EAAE,KAAK,IAAI,WAAW,GAAI,CAAC;AAE1C,MAAM,QAAQ,GAAoB,CAAC,IAAI,EAAE,EAAE;IAC1C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,EAAE,CAAC,CAAC;IACxD,oBAAoB;IACpB,MAAM,OAAO,GAAG,MAAM;QACrB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAC1B,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CACpD;QACF,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IAEhB,OAAO,CACN,+BACC,oDAA4B,UAAU,IAAU,EAChD,KAAC,QAAQ,OACJ,IAAI,EACR,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,aAAa,CAAC,CAAC,CAAC,CAAC;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,SAAS,CAAC,CAAC,CAAC,CAAC;oBACb,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,aAAa,GAC5B,EACF,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,wCAA6B,IAC5D,CACX,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA8B;IACjD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,QAAQ,OAAK,IAAI,GAAI;IACxC,IAAI,EAAE;QACL,KAAK,EAAE,GAAG;QACV,OAAO,EAAE;YACR,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,wCAAyB,EAAE;YAChE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACjD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACjD,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAC/C,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;SACxD;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA8B;IAClD,GAAG,OAAO;IACV,IAAI,EAAE;QACL,GAAG,OAAO,CAAC,UAAU;QACrB,QAAQ,EAAE,IAAI;KACd;CACD,CAAC"}

package/lib/src/components/shared/Combobox/ComboboxContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { ComponentErrors } from '../ComponentErrors/ComponentErrors';
+export const ComboboxContainer = slottableComponent('ComboboxContainer', ({ children, className, classNamePrefix, id, classStyle = 'default-style', errors, }) => (_jsxs("div", { id: `${classNamePrefix ?? 'lunatic'}-combo-box-container-${id}`, className: classnames(className, `${classNamePrefix ?? 'lunatic'}-combo-box-container`, `${classNamePrefix ?? 'lunatic'}-suggester-${classStyle}`, `lunatic-suggester-default-style`, classStyle), children: [children, errors && _jsx(ComponentErrors, { errors: errors })] })));
+//# sourceMappingURL=ComboboxContainer.js.map

package/lib/src/components/shared/Combobox/ComboboxContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxContainer.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/ComboboxContainer.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAUrE,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAClD,mBAAmB,EACnB,CAAC,EACA,QAAQ,EACR,SAAS,EACT,eAAe,EACf,EAAE,EACF,UAAU,GAAG,eAAe,EAC5B,MAAM,GACN,EAAE,EAAE,CAAC,CACL,eACC,EAAE,EAAE,GAAG,eAAe,IAAI,SAAS,wBAAwB,EAAE,EAAE,EAC/D,SAAS,EAAE,UAAU,CACpB,SAAS,EACT,GAAG,eAAe,IAAI,SAAS,sBAAsB,EACrD,GAAG,eAAe,IAAI,SAAS,cAAc,UAAU,EAAE,EACzD,iCAAiC,EACjC,UAAU,CACV,aAEA,QAAQ,EAER,MAAM,IAAI,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,IACzC,CACN,CACD,CAAC"}

package/lib/src/components/shared/Combobox/ComboboxContainer.spec.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { ComboboxContainer } from './ComboboxContainer';
+import { expect, it, describe } from 'vitest';
+describe('ComboBoxContainer', () => {
+    it('renders with default styles when no classStyle prop is provided', () => {
+        const { container } = render(_jsx(ComboboxContainer, { id: "test-id", children: "Content" }));
+        expect(container.firstChild).toHaveClass('default-style');
+    });
+    it('renders with additional styles when classStyle prop is provided', () => {
+        const { container } = render(_jsx(ComboboxContainer, { id: "test-id", classStyle: "custom-style", children: "Content" }));
+        expect(container.firstChild).toHaveClass('lunatic-combo-box-container');
+        expect(container.firstChild).toHaveClass('custom-style');
+    });
+    it('renders children inside the component', () => {
+        const { getByText } = render(_jsx(ComboboxContainer, { id: "test-id", children: "Content" }));
+        expect(getByText('Content')).toBeInTheDocument();
+    });
+    it('passes className prop to the component', () => {
+        const { container } = render(_jsx(ComboboxContainer, { id: "test-id", className: "test-class", children: "Content" }));
+        expect(container.firstChild).toHaveClass('test-class');
+    });
+});
+//# sourceMappingURL=ComboboxContainer.spec.js.map

package/lib/src/components/shared/Combobox/ComboboxContainer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxContainer.spec.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/ComboboxContainer.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;QAC1E,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,KAAC,iBAAiB,IAAC,EAAE,EAAC,SAAS,wBAA4B,CAC3D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;QAC1E,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,KAAC,iBAAiB,IAAC,EAAE,EAAC,SAAS,EAAC,UAAU,EAAC,cAAc,wBAErC,CACpB,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC;QACxE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,KAAC,iBAAiB,IAAC,EAAE,EAAC,SAAS,wBAA4B,CAC3D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QACjD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,KAAC,iBAAiB,IAAC,EAAE,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,wBAElC,CACpB,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/src/components/shared/Combobox/ComboboxContent.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import classnames from 'classnames';
+import { KEYBOARD_KEY_CODES } from './constants';
+import { ComboboxContentBox } from './ComboboxContentBox';
+import useDocumentEvent from '../../../hooks/useDocumentEvent';
+export function ComboboxContent({ children, focused, onFocus, onBlur, onKeyDown, classNamePrefix, }) {
+    const ref = useRef(null);
+    const onClick = useCallback((e) => {
+        if (!ref.current?.contains(e.target) && onBlur) {
+            onBlur();
+        }
+    }, [ref, onBlur]);
+    useDocumentEvent('mousedown', onClick);
+    const handleKeyDown = useCallback(function (e) {
+        const { key } = e;
+        e.stopPropagation();
+        switch (key) {
+            case KEYBOARD_KEY_CODES.Escape:
+            case KEYBOARD_KEY_CODES.Enter:
+            case KEYBOARD_KEY_CODES.Tab:
+                ref.current?.focus();
+                break;
+            default:
+            // e.preventDefault();
+        }
+        onKeyDown(key);
+    }, [onKeyDown]);
+    return (_jsx(ComboboxContentBox, { classNamePrefix: classNamePrefix, focused: focused, children: _jsx("div", { className: classnames(`${classNamePrefix ?? 'lunatic'}-combo-box-content`, {
+                focused,
+            }), ref: ref, tabIndex: 0, onFocus: onFocus, onClick: onFocus, onKeyDown: handleKeyDown, children: children }) }));
+}
+//# sourceMappingURL=ComboboxContent.js.map

package/lib/src/components/shared/Combobox/ComboboxContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxContent.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/ComboboxContent.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAA0B,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAU/D,MAAM,UAAU,eAAe,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,SAAS,EACT,eAAe,GACR;IACP,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,OAAO,GAAG,WAAW,CAC1B,CAAC,CAAQ,EAAE,EAAE;QACZ,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAqB,CAAC,IAAI,MAAM,EAAE,CAAC;YAC/D,MAAM,EAAE,CAAC;QACV,CAAC;IACF,CAAC,EACD,CAAC,GAAG,EAAE,MAAM,CAAC,CACb,CAAC;IAEF,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAEvC,MAAM,aAAa,GAAG,WAAW,CAChC,UAAU,CAAgB;QACzB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,QAAQ,GAAG,EAAE,CAAC;YACb,KAAK,kBAAkB,CAAC,MAAM,CAAC;YAC/B,KAAK,kBAAkB,CAAC,KAAK,CAAC;YAC9B,KAAK,kBAAkB,CAAC,GAAG;gBAC1B,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACrB,MAAM;YACP,QAAQ;YACR,sBAAsB;QACvB,CAAC;QACD,SAAS,CAAC,GAAG,CAAC,CAAC;IAChB,CAAC,EACD,CAAC,SAAS,CAAC,CACX,CAAC;IAEF,OAAO,CACN,KAAC,kBAAkB,IAAC,eAAe,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,YACrE,cACC,SAAS,EAAE,UAAU,CACpB,GAAG,eAAe,IAAI,SAAS,oBAAoB,EACnD;gBACC,OAAO;aACP,CACD,EACD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,YAEvB,QAAQ,GACJ,GACc,CACrB,CAAC;AACH,CAAC"}

package/lib/src/components/shared/Combobox/ComboboxContentBox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, {} from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+export const ComboboxContentBox = slottableComponent('ComboboxContentBox', ({ children, classNamePrefix, focused }) => (_jsx("div", { className: classnames(`${classNamePrefix ?? 'lunatic'}-combo-box`, {
+        focused,
+    }), children: children })));
+//# sourceMappingURL=ComboboxContentBox.js.map

package/lib/src/components/shared/Combobox/ComboboxContentBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxContentBox.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/ComboboxContentBox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAA0B,MAAM,OAAO,CAAC;AACtD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAO/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CACnD,oBAAoB,EACpB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC3C,cACC,SAAS,EAAE,UAAU,CAAC,GAAG,eAAe,IAAI,SAAS,YAAY,EAAE;QAClE,OAAO;KACP,CAAC,YAED,QAAQ,GACJ,CACN,CACD,CAAC"}

package/lib/src/components/shared/Combobox/ComboboxType.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ComboboxType.js.map

package/lib/src/components/shared/Combobox/ComboboxType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxType.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/ComboboxType.ts"],"names":[],"mappings":""}

package/lib/src/components/shared/Combobox/Panel/ComboboxOption.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { slottableComponent } from '../../HOC/slottableComponent';
+export const ComboboxOption = slottableComponent('ComboboxOption', ({ option, selected }) => {
+    const { id, value, label } = option;
+    if (label && typeof label === 'string' && label.length) {
+        return (_jsxs("div", { className: classnames('lunatic-combo-box-option', { selected }), children: [_jsx("span", { className: "id", children: id || value }), _jsx("span", { children: " - " }), _jsx("span", { className: "label", children: label })] }));
+    }
+    return (_jsx("div", { className: classnames('lunatic-combo-box-option', { selected }), children: _jsx("span", { className: "id", children: id }) }));
+});
+//# sourceMappingURL=ComboboxOption.js.map

package/lib/src/components/shared/Combobox/Panel/ComboboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOption.js","sourceRoot":"","sources":["../../../../../../src/components/shared/Combobox/Panel/ComboboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAOlE,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAC/C,gBAAgB,EAChB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC/B,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IAEpC,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACxD,OAAO,CACN,eAAK,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,EAAE,QAAQ,EAAE,CAAC,aACnE,eAAM,SAAS,EAAC,IAAI,YAAE,EAAE,IAAI,KAAK,GAAQ,EACzC,iCAAgB,EAChB,eAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,IACjC,CACN,CAAC;IACH,CAAC;IACD,OAAO,CACN,cAAK,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,EAAE,QAAQ,EAAE,CAAC,YACnE,eAAM,SAAS,EAAC,IAAI,YAAE,EAAE,GAAQ,GAC3B,CACN,CAAC;AACH,CAAC,CACD,CAAC"}

package/lib/src/components/shared/Combobox/Panel/ComboboxOption.spec.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { ComboboxOption } from './ComboboxOption';
+import { describe, it, expect } from 'vitest';
+describe('DefaultOptionRenderer', () => {
+    it('renders without label', () => {
+        const option = { id: '1', value: 'Value' };
+        const { getByText, queryByText } = render(_jsx(ComboboxOption, { option: option }));
+        const idElement = getByText(option.id);
+        const labelElement = queryByText('-');
+        expect(idElement).toBeInTheDocument();
+        expect(labelElement).toBeNull();
+    });
+    it('renders with label', () => {
+        const option = { id: '1', value: 'Value', label: 'Label' };
+        const { getByText } = render(_jsx(ComboboxOption, { option: option }));
+        const idElement = getByText(option.id);
+        const labelElement = getByText(option.label);
+        expect(idElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
+    });
+    it('renders with selected class', () => {
+        const option = { id: '1', value: 'Value', label: 'Label' };
+        const { container } = render(_jsx(ComboboxOption, { option: option, selected: true }));
+        expect(container.firstChild).toHaveClass('selected');
+    });
+    it('renders without selected class', () => {
+        const option = { id: '1', value: 'Value', label: 'Label' };
+        const { container } = render(_jsx(ComboboxOption, { option: option }));
+        expect(container.firstChild).not.toHaveClass('selected');
+    });
+});
+//# sourceMappingURL=ComboboxOption.spec.js.map

package/lib/src/components/shared/Combobox/Panel/ComboboxOption.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOption.spec.js","sourceRoot":"","sources":["../../../../../../src/components/shared/Combobox/Panel/ComboboxOption.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE9C,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAChC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3C,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CACxC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAClC,CAAC;QACF,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC7B,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QACjE,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,YAAY,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAG,CAAC,CAAC;QAC1E,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACzC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QACjE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/src/components/shared/Combobox/Panel/ComboboxOptionContainer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from 'react';
+import classnames from 'classnames';
+function getMin(rect) {
+    const { top } = rect;
+    return top;
+}
+function getMax(rect) {
+    const { top, height } = rect;
+    return top + height;
+}
+function isVisible(optionRect, parentRect) {
+    const min = Math.min(getMin(optionRect), getMin(parentRect));
+    const max = Math.max(getMax(optionRect), getMax(parentRect));
+    return max - min < optionRect.height + parentRect.height;
+}
+export function ComboboxOptionContainer({ children, index, selected, onSelect, }) {
+    const ref = useRef(null);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(index);
+    }, [onSelect, index]);
+    useEffect(() => {
+        const { current } = ref;
+        if (current && selected && current.parentNode) {
+            const oRect = current.getBoundingClientRect();
+            const pRect = current.parentNode.getBoundingClientRect();
+            if (!isVisible(oRect, pRect)) {
+                current.scrollIntoView();
+            }
+        }
+    }, [ref, selected]);
+    return (_jsx("li", { className: classnames('lunatic-combo-box-option-container', { selected }), role: "option", "aria-selected": selected, onClick: onClick, ref: ref, children: children }));
+}
+//# sourceMappingURL=ComboboxOptionContainer.js.map

package/lib/src/components/shared/Combobox/Panel/ComboboxOptionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOptionContainer.js","sourceRoot":"","sources":["../../../../../../src/components/shared/Combobox/Panel/ComboboxOptionContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,SAAS,MAAM,CAAC,IAAa;IAC5B,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACrB,OAAO,GAAG,CAAC;AACZ,CAAC;AAED,SAAS,MAAM,CAAC,IAAa;IAC5B,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC7B,OAAO,GAAG,GAAG,MAAM,CAAC;AACrB,CAAC;AAED,SAAS,SAAS,CAAC,UAAmB,EAAE,UAAmB;IAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAC7D,OAAO,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;AAC1D,CAAC;AAQD,MAAM,UAAU,uBAAuB,CAAC,EACvC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GACD;IACP,MAAM,GAAG,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,WAAW,CAC1B,CAAC,CAAa,EAAE,EAAE;QACjB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC;QACxB,IAAI,OAAO,IAAI,QAAQ,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAI,OAAO,CAAC,UAA0B,CAAC,qBAAqB,EAAE,CAAC;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;gBAC9B,OAAO,CAAC,cAAc,EAAE,CAAC;YAC1B,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpB,OAAO,CACN,aACC,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,EAAE,QAAQ,EAAE,CAAC,EACzE,IAAI,EAAC,QAAQ,mBACE,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACL,CAAC;AACH,CAAC"}

package/lib/src/components/shared/Combobox/Panel/ComboboxOptionContainer.spec.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { ComboboxOptionContainer } from './ComboboxOptionContainer';
+import { expect, it, describe, vi } from 'vitest';
+describe('option-container', () => {
+    const props = {
+        children: 'Option 1',
+        index: '0',
+        selected: false,
+        onSelect: vi.fn(),
+    };
+    it('renders without crashing', () => {
+        const { getByRole } = render(_jsx(ComboboxOptionContainer, { ...props }));
+        const optionContainer = getByRole('option');
+        expect(optionContainer).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ComboboxOptionContainer.spec.js.map

package/lib/src/components/shared/Combobox/Panel/ComboboxOptionContainer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOptionContainer.spec.js","sourceRoot":"","sources":["../../../../../../src/components/shared/Combobox/Panel/ComboboxOptionContainer.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjC,MAAM,KAAK,GAAG;QACb,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;KACjB,CAAC;IACF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,uBAAuB,OAAK,KAAK,GAAI,CAAC,CAAC;QACrE,MAAM,eAAe,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,CAAC,eAAe,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/src/components/shared/Combobox/Panel/ComboboxPanel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboboxOptionContainer } from './ComboboxOptionContainer';
+import { ComboboxPanelContainer } from './ComboboxPanelContainer';
+import { ComboboxOption } from './ComboboxOption';
+/**
+ * Floating menu containing selectable options
+ */
+export function ComboboxPanel({ optionRenderer: OptionRender, options = [], focused, selectedIndex, expanded, id, search, onSelect, }) {
+    const visibleOptions = expanded ? options : [];
+    const ComboBoxOptionComponent = OptionRender ?? ComboboxOption;
+    return (_jsx(ComboboxPanelContainer, { expanded: expanded, focused: focused, id: `${id}-list`, children: visibleOptions.map((option, index) => (_jsx(ComboboxOptionContainer, { index: index.toString(), selected: selectedIndex === index, onSelect: onSelect, children: _jsx(ComboBoxOptionComponent, { option: option, selected: selectedIndex === index, search: search }) }, option.id ?? option.value))) }));
+}
+//# sourceMappingURL=ComboboxPanel.js.map

package/lib/src/components/shared/Combobox/Panel/ComboboxPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPanel.js","sourceRoot":"","sources":["../../../../../../src/components/shared/Combobox/Panel/ComboboxPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC7B,cAAc,EAAE,YAAY,EAC5B,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,GACY;IACpB,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/C,MAAM,uBAAuB,GAAG,YAAY,IAAI,cAAc,CAAC;IAC/D,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEf,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,uBAAuB,IAEvB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,QAAQ,EAAE,QAAQ,YAElB,KAAC,uBAAuB,IACvB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,MAAM,EAAE,MAAM,GACb,IATG,MAAM,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK,CAUL,CAC1B,CAAC,GACsB,CACzB,CAAC;AACH,CAAC"}