@talixo-ds/options-input 0.0.21 → 0.0.23

package/dist/components/tests/min-max-value-label.spec.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ShallowRenderer from 'react-test-renderer/shallow';
+import '@testing-library/jest-dom';
+import { MinMaxValueLabel } from '../min-max-value-label';
+const props = {
+    min: 0,
+    max: 100,
+    color: 'black',
+};
+describe('MinMaxValueLabel', () => {
+    let component;
+    const renderer = ShallowRenderer.createRenderer();
+    beforeEach(() => {
+        renderer.render(_jsx(MinMaxValueLabel, { ...props }));
+        component = renderer.getRenderOutput();
+    });
+    it('should match snapshot', () => {
+        expect(component).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=min-max-value-label.spec.js.map

package/dist/components/tests/min-max-value-label.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"min-max-value-label.spec.js","sourceRoot":"","sources":["../../../components/tests/min-max-value-label.spec.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,IAAI,SAAsB,CAAC;IAC3B,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,EAAE,CAAC;IAElD,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,MAAM,CAAC,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC,CAAC;QACjD,SAAS,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/tests/options-input-content-item.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/tests/options-input-content-item.spec.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ShallowRenderer from 'react-test-renderer/shallow';
+import '@testing-library/jest-dom';
+import OptionsInputContentItem from '../options-input-content-item';
+jest.mock('@mui/icons-material', () => ({
+    luggage: 'div',
+}));
+jest.mock('@talixo-ds/component.icons', () => ({
+    football: 'div',
+}));
+const props = {
+    item: {
+        id: 'luggage',
+        icon: 'luggage',
+        label: 'luggage',
+        details: 'This is your luggage',
+        min: -10,
+        max: 10,
+        quantity: 0,
+        inputQuantity: 0,
+    },
+    displayMinMax: true,
+};
+describe('OptionsInputDropdownItem', () => {
+    let component;
+    const renderer = ShallowRenderer.createRenderer();
+    it('should match snapshot', () => {
+        renderer.render(_jsx(OptionsInputContentItem, { ...props }));
+        component = renderer.getRenderOutput();
+        expect(component).toMatchSnapshot();
+    });
+    it('should render proper alternative styling', () => {
+        renderer.render(_jsx(OptionsInputContentItem, { item: { ...props.item, quantity: 1 } }));
+        component = renderer.getRenderOutput();
+        expect(component).toMatchSnapshot();
+    });
+    it('should not render tooltip when there is no label', () => {
+        renderer.render(_jsx(OptionsInputContentItem, { item: { ...props.item, label: undefined } }));
+        component = renderer.getRenderOutput();
+        expect(component).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=options-input-content-item.spec.js.map

package/dist/components/tests/options-input-content-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input-content-item.spec.js","sourceRoot":"","sources":["../../../components/tests/options-input-content-item.spec.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,MAAM,+BAA+B,CAAC;AAEpE,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;IACtC,OAAO,EAAE,KAAK;CACf,CAAC,CAAC,CAAC;AAEJ,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7C,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC,CAAC;AAEJ,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE;QACJ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,sBAAsB;QAC/B,GAAG,EAAE,CAAC,EAAE;QACR,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,CAAC;QACX,aAAa,EAAE,CAAC;KACjB;IACD,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,IAAI,SAAsB,CAAC;IAC3B,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,EAAE,CAAC;IAElD,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,QAAQ,CAAC,MAAM,CAAC,KAAC,uBAAuB,OAAK,KAAK,GAAI,CAAC,CAAC;QAExD,SAAS,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC;QACvC,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,QAAQ,CAAC,MAAM,CACb,KAAC,uBAAuB,IAAC,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAI,CAClE,CAAC;QAEF,SAAS,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC;QACvC,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,QAAQ,CAAC,MAAM,CACb,KAAC,uBAAuB,IAAC,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAI,CACvE,CAAC;QAEF,SAAS,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC;QACvC,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/components/tests/options-input-dropdown-item.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/tests/options-input-dropdown-item.spec.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ShallowRenderer from 'react-test-renderer/shallow';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import OptionsInputDropdownItem from '../options-input-dropdown-item';
+jest.mock('@mui/icons-material', () => ({
+    luggage: 'div',
+}));
+jest.mock('@talixo-ds/component.icons', () => ({
+    football: 'div',
+}));
+const onChangeMock = jest.fn();
+const onBlurMock = jest.fn();
+const props = {
+    item: {
+        id: 'luggage-id',
+        icon: 'luggage',
+        details: 'This is your luggage. Please, keep your attention not to lose it.',
+        min: -10,
+        max: 10,
+        quantity: 0,
+        inputQuantity: 0,
+    },
+    onBlur: onBlurMock,
+    onChange: onChangeMock,
+    index: 1,
+};
+describe('OptionsInputDropdownItem', () => {
+    let component;
+    const renderer = ShallowRenderer.createRenderer();
+    it('should match snapshot', () => {
+        renderer.render(_jsx(OptionsInputDropdownItem, { ...props }));
+        component = renderer.getRenderOutput();
+        expect(component).toMatchSnapshot();
+    });
+    describe('events', () => {
+        beforeEach(() => render(_jsx(OptionsInputDropdownItem, { ...props })));
+        it('should call onChange on text field edit', async () => {
+            const input = screen.getByTestId('dropdown-item-input');
+            await fireEvent.change(input, { target: { value: '10' } });
+            expect(onChangeMock).toHaveBeenCalledWith('luggage-id', '10');
+        });
+        it('should call onChange on increment button click', () => {
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[0]);
+            expect(onChangeMock).toHaveBeenCalledWith('luggage-id', 1);
+        });
+        it('should call onChange on decrement button click', () => {
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[1]);
+            expect(onChangeMock).toHaveBeenCalledWith('luggage-id', -1);
+        });
+        it('should expand details content', () => {
+            expect(screen.getByTestId('option-details')).toHaveTextContent(props.item.details.slice(0, 15));
+            const optionDetailsContainer = screen.getByTestId('option-details-container');
+            fireEvent.mouseEnter(optionDetailsContainer);
+            expect(screen.getByTestId('option-details')).toHaveTextContent(props.item.details);
+        });
+    });
+});
+//# sourceMappingURL=options-input-dropdown-item.spec.js.map

package/dist/components/tests/options-input-dropdown-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input-dropdown-item.spec.js","sourceRoot":"","sources":["../../../components/tests/options-input-dropdown-item.spec.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionsInput } from './options-input';
+export type { OptionsInputProps } from './options-input';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { OptionsInput } from './options-input';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/options-input.composition.d.ts

@@ -0,0 +1,4 @@
+export declare const BasicOptionsInput: () => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsInputWithDefaultValues: () => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsInputWithPersistentOptions: () => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsInputDisabled: () => import("react/jsx-runtime").JSX.Element;

package/dist/options-input.composition.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from '@mui/material/styles';
+import { NextBookingTheme } from "@talixo-ds/component.next-booking-theme";
+import { NextDashboardTheme } from "@talixo-ds/component.next-dashboard-theme";
+import { OptionsInput } from './options-input';
+const options = [
+    {
+        id: 'abc',
+        icon: 'Abc',
+        label: 'ABC',
+        details: 'This label is longer so it should be hidden.',
+        min: 3,
+        max: 100
+    },
+    {
+        id: 'add',
+        icon: 'This icon does not exist',
+        label: 'Add',
+        details: 'Add new products',
+        max: 10
+    },
+    {
+        id: 'golf',
+        icon: 'GolfSticks',
+        label: 'Golf'
+    },
+    {
+        id: 'pets',
+        icon: 'Pets',
+        details: 'Long pet details to display.'
+    }
+];
+const defaultValue = {
+    abc: 2,
+    adb: 1
+};
+const persistentOptions = ['add'];
+export const BasicOptionsInput = () => _jsx(OptionsInput, { options: options });
+export const OptionsInputWithDefaultValues = () => (_jsx(ThemeProvider, { theme: NextDashboardTheme, children: _jsx(OptionsInput, { options: options, defaultValue: defaultValue }) }));
+export const OptionsInputWithPersistentOptions = () => (_jsx(ThemeProvider, { theme: NextBookingTheme, children: _jsx(OptionsInput, { options: options, persistentOptions: persistentOptions, itemsGap: 5 }) }));
+export const OptionsInputDisabled = () => (_jsx(ThemeProvider, { theme: NextBookingTheme, children: _jsx(OptionsInput, { options: options, defaultValue: defaultValue, disabled: true }) }));
+//# sourceMappingURL=options-input.composition.js.map

package/dist/options-input.composition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input.composition.js","sourceRoot":"","sources":["../options-input.composition.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,GAAG;IACZ;QACE,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,8CAA8C;QACvD,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;KACT;IACH;QACE,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,0BAA0B;QAChC,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,kBAAkB;QAC3B,GAAG,EAAE,EAAE;KACR;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,8BAA8B;KACxC;CACF,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,CAAC;CACP,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,CAAC;AAE1E,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE,CAAC,CAC/C,KAAC,aAAa,IAAC,KAAK,EAAE,kBAAkB,YAC1C,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,GAAI,GAC5C,CACnB,CAAA;AAED,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,KAAC,aAAa,IAAC,KAAK,EAAE,gBAAgB,YACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,GAAI,GACvE,CACjB,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,KAAC,aAAa,IAAC,KAAK,EAAE,gBAAgB,YACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,SAAG,GACzD,CACnB,CAAA"}

package/dist/options-input.d.ts

@@ -0,0 +1,36 @@
+import type { SxProps } from '@mui/material';
+import { OptionsInputOption, OptionsInputValue } from './types';
+import './styles.scss';
+import '@emotion/react';
+import '@emotion/styled';
+export type OptionsInputProps = {
+    /** Array of objects representing options available to choose from */
+    options: OptionsInputOption[];
+    /** Object with default values of some options */
+    defaultValue?: OptionsInputValue;
+    /** Array with ids of options which should remain displayed even if value is 0 */
+    persistentOptions?: string[];
+    /** Boolean to determine if input is disabled */
+    disabled?: boolean;
+    /** Boolean to determine if input is readOnly */
+    readOnly?: boolean;
+    /** Boolean to determine if min and max input values should be displayed */
+    displayMinMax?: boolean;
+    /** Function which handles options input value change */
+    onChange?: (OptionsInputValue: any) => void;
+    /** Function which handles options input focus event */
+    onFocus?: (OptionsInputValue: any) => void;
+    /** Function which handles options input blur event */
+    onBlur?: (OptionsInputValue: any) => void;
+    /** className attached to an input container */
+    className?: string;
+    /** id attached to an input container */
+    id?: string;
+    /** data test id attached to an input container */
+    'data-testid'?: string;
+    /** Gap between input items */
+    itemsGap?: string | number;
+    /** Custom styles for container */
+    containerSx?: SxProps;
+};
+export declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, ...rest }: OptionsInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/options-input.docs.mdx

@@ -0,0 +1,157 @@
+---
+description: OptionsInput component.
+---
+
+## Props examples
+
+#### options (required)
+Props options is an array of objects defining which options should be available in the input.
+
+```js
+
+const options = [
+    {
+        id: 'android', // required
+        icon: 'android', // required
+        label: 'Android', //required
+        details: 'This is android option', // optional
+        min: 0, // optional
+        max: 15, // optional
+    },
+    {
+        id: 'luggage',
+        icon: 'bag',
+        label: 'Luggage',
+        details: 'Luggage for the client',
+        min: 0,
+        max: 5,
+    }
+];
+
+```
+
+#### defaultValue (optional)
+Props defaultValue is an object with keys representing options ids and value representing input value for them.
+
+```js
+
+const defaultValue = { android: 1, luggage: 4 };
+
+```
+
+#### persistentOptions (optional)
+Props persistentOptions is an array of ids of options which should be displayed in input even if their value is 0.
+
+```js
+
+const persistentOptions = ['luggage', 'android'];
+
+```
+
+#### disabled (optional)
+Props disabled is a boolean which determines if input is disabled.
+
+```js
+
+const disabled = false;
+
+```
+
+#### readOnly (optional)
+Props readOnly is a boolean which determines if input is readOnly.
+
+```js
+
+const readOnly = false;
+
+```
+
+#### displayMinMax (optional)
+Props displayMinMax is a boolean which determines if min and max value for option is displayed in tooltip and dropdown.
+
+```js
+
+const displayMinMax = true;
+
+```
+
+#### id (optional)
+Props id allows to attach custom id to input container.
+
+```js
+
+const id = 'input-id';
+
+```
+
+#### className (optional)
+Props className allows to attach custom class to input container.
+
+```js
+
+const className = 'input-class';
+
+```
+
+#### data-testid (optional)
+Props data-testid allows to attach custom data-testid to input container for testing purposes.
+
+```js
+
+const dataTestId = 'input-data-testid';
+
+```
+
+#### onChange (optional)
+Props onChange is a function which allows to add a custom handling of input option value change. It takes object with option ids as keys and their respective quantities as values as an argument.
+
+```js
+
+const onChange = (inputValues) => {
+ // ...handler body
+}
+
+```
+
+#### onBlur (optional)
+Props onBlur is a function which allows to add a custom handling for input container blur event. It takes the same object as onChange handler as an argument.
+
+```js
+
+const onBlur = (inputValues) => {
+ // ...handler body
+}
+
+```
+
+#### onFocus (optional)
+Props onFocus is a function which allows to add a custom handling for input container blur event. It takes the same object as onChange handler as an argument.
+
+```js
+
+const onFocus = (inputValues) => {
+ // ...handler body
+}
+
+```
+
+#### itemsGap (optional)
+Props itemsGap is a number or string which allows user to customize gap between items in the input.
+
+```js
+
+const itemsGap = '2px'
+
+```
+
+## Example component usage
+
+```js
+import { OptionsInput } from '@talixo-ds/component.options-input';
+
+// ...
+
+export const OptionsInputExample = () => (
+  <OptionsInput options={options} persistentOptions={persistentOptions} />
+);
+```

package/dist/options-input.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import Popper from '@mui/material/Popper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import * as MuiIcons from '@mui/icons-material';
+import * as DesignSystemIcons from '@talixo-ds/icons';
+import OptionsInputContentItem from './components/options-input-content-item';
+import OptionsInputDropdownItem from './components/options-input-dropdown-item';
+import './styles.scss';
+import '@emotion/react';
+import '@emotion/styled';
+export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOptions = [], defaultValue, displayMinMax = false, disabled = false, readOnly = false, id, className, itemsGap = 1, containerSx = [], ...rest }) => {
+    const [currentOptions, setCurrentOptions] = useState([]);
+    const [anchorEl, setAnchorEl] = useState();
+    const open = !!anchorEl;
+    useEffect(() => setCurrentOptions(options.map((option) => {
+        const defaultQuantity = defaultValue?.[option.id] ?? 0;
+        const minQuantity = defaultQuantity < option?.min ? option?.min : defaultQuantity;
+        const quantity = minQuantity > option?.max ? option?.max : minQuantity;
+        return {
+            ...option,
+            quantity,
+            inputQuantity: quantity,
+        };
+    })), [options, defaultValue]);
+    const toggleInput = (event) => {
+        const { currentTarget } = event;
+        if (!disabled && !readOnly) {
+            setTimeout(() => {
+                setAnchorEl(anchorEl ? undefined : currentTarget);
+            }, 0);
+        }
+    };
+    const onInputFocus = () => {
+        if (onFocus) {
+            onFocus(currentOptions.reduce((currentValues, currentOption) => ({
+                ...currentValues,
+                [currentOption.id]: currentOption.quantity,
+            }), {}));
+        }
+    };
+    const onInputBlur = () => {
+        if (onBlur) {
+            onBlur(currentOptions.reduce((currentValues, currentOption) => ({
+                ...currentValues,
+                [currentOption.id]: currentOption.quantity,
+            }), {}));
+        }
+    };
+    const onValueChange = (optionId, newValue) => {
+        const newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);
+        const newCurrentOptions = currentOptions.map((option) => {
+            const maxQuantity = newQuantity > (option.max || Infinity) ? option.max : newQuantity;
+            return {
+                ...option,
+                ...(optionId === option.id && {
+                    quantity: newQuantity < (option.min || -Infinity) ? option.min : maxQuantity,
+                    inputQuantity: newValue,
+                }),
+            };
+        });
+        if (onChange) {
+            onChange(newCurrentOptions.reduce((currentValues, currentOption) => ({
+                ...currentValues,
+                [currentOption.id]: currentOption.quantity,
+            }), {}));
+        }
+        setCurrentOptions(newCurrentOptions);
+    };
+    const onDropdownItemBlur = (optionId) => () => setCurrentOptions(currentOptions.map((option) => {
+        if (optionId !== option.id)
+            return option;
+        const finalQuantity = Number.isNaN(Number(option.inputQuantity))
+            ? 0
+            : Number(option.inputQuantity);
+        const maxQuantity = finalQuantity > (option.max || Infinity) ? option.max : finalQuantity;
+        return {
+            ...option,
+            inputQuantity: finalQuantity < (option.min || -Infinity)
+                ? option.min
+                : maxQuantity,
+        };
+    }));
+    return (_jsxs(_Fragment, {
+        children: [_jsxs(Box, {
+            id: id, onClick: toggleInput, onBlur: onInputBlur, onFocus: onInputFocus, className: classNames('options-input__container', {
+                'options-input__container--open': open,
+                'options-input__container--disabled': disabled,
+                'options-input__container--read-only': readOnly,
+                [className]: !!className,
+            }), sx: [
+                { '&:hover': { borderColor: '#d3d3d3' } },
+                ...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+                open && {
+                    borderColor: (theme) => theme.palette.primary.main,
+                    '&:hover': { borderColor: (theme) => theme.palette.primary.main },
+                },
+            ], "data-testid": rest['data-testid'] || 'options-input-container', tabIndex: 0, children: [_jsx(Box, {
+                display: "flex", gap: itemsGap, children: currentOptions
+                    .filter(({ quantity, id: optionId, icon }) => !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon]) &&
+                        (quantity !== 0 || persistentOptions.includes(optionId)))
+                    .map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax }, option.id)))
+            }), !readOnly &&
+            (open ? (_jsx(KeyboardArrowUpIcon, { color: "primary" })) : (_jsx(KeyboardArrowDownIcon, {
+                sx: {
+                    color: (theme) => disabled
+                        ? theme.palette.grey[400]
+                        : theme.palette.action.focus,
+                }
+            })))]
+        }), _jsx(ClickAwayListener, {
+            onClickAway: () => open && setAnchorEl(undefined), children: _jsx(Popper, {
+                open: open, placement: "bottom-start", anchorEl: anchorEl, sx: (theme) => ({ zIndex: theme.zIndex.modal }), children: _jsx(List, {
+                    disablePadding: true, "data-testid": "options-dropdown-list", className: "options-input__dropdown-items-list", sx: {
+                        bgcolor: 'Background',
+                        border: (theme) => `thin solid ${theme.palette.primary.main}`,
+                    }, children: currentOptions
+                        .filter(({ icon }) => !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon]))
+                        .map((option, index) => (_jsx(OptionsInputDropdownItem, { item: option, onBlur: onDropdownItemBlur(option.id), onChange: onValueChange, index: index, displayMinMax: displayMinMax }, option.id)))
+                })
+            })
+        })]
+    }));
+};
+//# sourceMappingURL=options-input.js.map

package/dist/options-input.js.map

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

package/dist/options-input.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';