@embeddable.com/remarkable-ui 0.1.7 → 0.1.9

package/dist/remarkable-ui/editors/InputField/InputField.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_react_1 = require("@tabler/icons-react");
+const InputField_module_css_1 = __importDefault(require("./InputField.module.css"));
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const Typography_1 = require("../../shared/Typography/Typography");
+exports.InputField = (0, react_1.forwardRef)(({ value = '', disabled, placeholder = 'Enter text', role, startIcon: StartIcon, endIcon: EndIcon, onChange, className, clearable = false, type = 'text', required = false, ...props }, ref) => {
+    const showClearButton = value && clearable;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: InputField_module_css_1.default.inputContainer, children: [required && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { as: "span", className: InputField_module_css_1.default.requiredText, children: "Required" })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(InputField_module_css_1.default.input, className), children: [StartIcon && (0, jsx_runtime_1.jsx)(StartIcon, {}), (0, jsx_runtime_1.jsx)("input", { type: type, role: role, value: value, disabled: disabled, placeholder: placeholder, onChange: (e) => onChange(e.target.value), ref: ref, ...props }), (0, jsx_runtime_1.jsxs)("div", { children: [showClearButton && (0, jsx_runtime_1.jsx)(icons_react_1.IconX, { className: InputField_module_css_1.default.clearIcon, onClick: () => onChange('') }), EndIcon && (0, jsx_runtime_1.jsx)(EndIcon, {})] })] })] }));
+});
+exports.InputField.displayName = 'InputField';
+//# sourceMappingURL=InputField.js.map

package/dist/remarkable-ui/editors/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/remarkable-ui/editors/InputField/InputField.tsx"],"names":[],"mappings":";;;;;;;AAAA,qDAAwD;AACxD,oFAA6C;AAC7C,gDAAwB;AACxB,iCAAmC;AACnC,mEAAgE;AAWnD,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,KAAK,IAAI,SAAS,CAAC;IAC3C,OAAO,CACL,iCAAK,SAAS,EAAE,+BAAM,CAAC,cAAc,aAClC,QAAQ,IAAI,CACX,uBAAC,uBAAU,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,+BAAM,CAAC,YAAY,yBAEvC,CACd,EACD,iCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,+BAAM,CAAC,KAAK,EAAE,SAAS,CAAC,aAC1C,SAAS,IAAI,uBAAC,SAAS,KAAG,EAC3B,kCACE,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,EACF,4CACG,eAAe,IAAI,uBAAC,mBAAK,IAAC,SAAS,EAAE,+BAAM,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAI,EAEtF,OAAO,IAAI,uBAAC,OAAO,KAAG,IACnB,IACF,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/remarkable-ui/editors/NumberField/NumberField.d.ts

@@ -1,9 +1,9 @@
 import { InputFieldProps } from '../InputField/InputField';
-export declare const NumberField: import('react').ForwardRefExoticComponent<Omit<InputFieldProps, "onChange" | "value"> & {
+export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "onChange" | "value"> & {
     value?: number | null;
     step?: number;
     min?: number;
     max?: number;
     onChange?: (value: number | null) => void;
-} & import('react').RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=NumberField.d.ts.map

package/dist/remarkable-ui/editors/NumberField/NumberField.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InputField_1 = require("../InputField/InputField");
+const react_1 = require("react");
+exports.NumberField = (0, react_1.forwardRef)(({ value = null, placeholder = 'Enter number', onChange, ...props }, ref) => {
+    const handleChange = (value) => {
+        if (value === '') {
+            onChange?.(null);
+            return;
+        }
+        const numericValue = Number(value);
+        if (!isNaN(numericValue) && isFinite(numericValue)) {
+            onChange?.(numericValue);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...props, value: value?.toString() || '', placeholder: placeholder, onChange: handleChange, type: "number", clearable: false, ref: ref }));
+});
+exports.NumberField.displayName = 'NumberField';
+//# sourceMappingURL=NumberField.js.map

package/dist/remarkable-ui/editors/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/remarkable-ui/editors/NumberField/NumberField.tsx"],"names":[],"mappings":";;;;AAAA,yDAAuE;AACvE,iCAAmC;AAUtB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE,WAAW,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACjB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;YACnD,QAAQ,EAAE,CAAC,YAAY,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,uBAAU,OACL,KAAK,EACT,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAC9B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,KAAK,EAChB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/remarkable-ui/editors/NumberField/NumberField.stories.d.ts

@@ -1,12 +1,12 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
-    component: import('react').ForwardRefExoticComponent<Omit<import('../InputField/InputField').InputFieldProps, "onChange" | "value"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("../InputField/InputField").InputFieldProps, "onChange" | "value"> & {
         value?: number | null;
         step?: number;
         min?: number;
         max?: number;
         onChange?: (value: number | null) => void;
-    } & import('react').RefAttributes<HTMLInputElement>>;
+    } & import("react").RefAttributes<HTMLInputElement>>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/remarkable-ui/editors/NumberField/NumberField.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithStartIcon = exports.WithStep = exports.WithMinMax = exports.Disabled = exports.Filled = exports.Empty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NumberField_1 = require("./NumberField");
+const icons_react_1 = require("@tabler/icons-react");
+const preview_api_1 = require("storybook/internal/preview-api");
+const meta = {
+    component: NumberField_1.NumberField,
+};
+exports.default = meta;
+exports.Empty = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        value: null,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Filled = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        value: 42,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Disabled = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        disabled: true,
+        value: 10,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithMinMax = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        value: 5,
+        min: 0,
+        max: 10,
+        step: 1,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithStep = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        value: 0,
+        step: 0.5,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithStartIcon = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        startIcon: icons_react_1.IconBoltFilled,
+        value: 25,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+//# sourceMappingURL=NumberField.stories.js.map

package/dist/remarkable-ui/editors/NumberField/NumberField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.stories.js","sourceRoot":"","sources":["../../../../src/remarkable-ui/editors/NumberField/NumberField.stories.tsx"],"names":[],"mappings":"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"}

package/dist/remarkable-ui/editors/TextField/TextField.d.ts

@@ -1,9 +1,9 @@
-export declare const TextField: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     value?: string;
     placeholder?: string;
-    startIcon?: import('@tabler/icons-react').TablerIcon;
-    endIcon?: import('@tabler/icons-react').TablerIcon;
+    startIcon?: import("@tabler/icons-react").TablerIcon;
+    endIcon?: import("@tabler/icons-react").TablerIcon;
     onChange: (value: string) => void;
     clearable?: boolean;
-} & import('react').RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/remarkable-ui/editors/TextField/TextField.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputField_1 = require("../InputField/InputField");
+const TextField_module_css_1 = __importDefault(require("./TextField.module.css"));
+const Typography_1 = require("../../shared/Typography/Typography");
+exports.TextField = (0, react_1.forwardRef)(({ value = '', placeholder = 'Enter text', maxLength, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_module_css_1.default.textField, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { value: value, placeholder: placeholder, ref: ref, maxLength: maxLength, clearable: true, ...props }), maxLength && ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { as: "span", className: TextField_module_css_1.default.characterCount, children: [value?.length, "/", maxLength, " Characters"] }))] }));
+});
+exports.TextField.displayName = 'TextField';
+//# sourceMappingURL=TextField.js.map

package/dist/remarkable-ui/editors/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/remarkable-ui/editors/TextField/TextField.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmC;AACnC,yDAAsD;AACtD,kFAA4C;AAC5C,mEAAgE;AAGnD,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvE,OAAO,CACL,iCAAK,SAAS,EAAE,8BAAM,CAAC,SAAS,aAC9B,uBAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,WACL,KAAK,GACT,EACD,SAAS,IAAI,CACZ,wBAAC,uBAAU,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,8BAAM,CAAC,cAAc,aACnD,KAAK,EAAE,MAAM,OAAG,SAAS,mBACf,CACd,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/remarkable-ui/editors/TextField/TextField.stories.d.ts

@@ -1,13 +1,13 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
-    component: import('react').ForwardRefExoticComponent<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
         value?: string;
         placeholder?: string;
-        startIcon?: import('@tabler/icons-react').TablerIcon;
-        endIcon?: import('@tabler/icons-react').TablerIcon;
+        startIcon?: import("@tabler/icons-react").TablerIcon;
+        endIcon?: import("@tabler/icons-react").TablerIcon;
         onChange: (value: string) => void;
         clearable?: boolean;
-    } & import('react').RefAttributes<HTMLInputElement>>;
+    } & import("react").RefAttributes<HTMLInputElement>>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/remarkable-ui/editors/TextField/TextField.stories.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequiredWithMaxLength = exports.Required = exports.WithMaxLengthMaxed = exports.WithMaxLength = exports.WithState = exports.Icons = exports.Disabled = exports.Filled = exports.Empty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("./TextField");
+const icons_react_1 = require("@tabler/icons-react");
+const preview_api_1 = require("storybook/internal/preview-api");
+const meta = {
+    component: TextField_1.TextField,
+};
+exports.default = meta;
+exports.Empty = {
+    args: {
+        required: true,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Filled = {
+    args: { value: 'Filled text field', onChange: (value) => console.log('onChange', value) },
+};
+exports.Disabled = {
+    args: {
+        disabled: true,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Icons = {
+    args: {
+        startIcon: icons_react_1.IconBoltFilled,
+        endIcon: icons_react_1.IconBoltFilled,
+        value: 'Filled text field',
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithState = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        startIcon: icons_react_1.IconBoltFilled,
+        endIcon: icons_react_1.IconBoltFilled,
+        disabled: false,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithMaxLength = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        maxLength: 50,
+        placeholder: 'Enter text with character limit',
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithMaxLengthMaxed = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        maxLength: 25,
+        value: 'This text is at the limit',
+        placeholder: 'Enter text with character limit',
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Required = {
+    args: {
+        required: true,
+        placeholder: 'This field is required',
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.RequiredWithMaxLength = {
+    render: (args) => {
+        const [{ value }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...args, value: value, onChange: (newValue) => updateArgs({ value: newValue }) }));
+    },
+    args: {
+        required: true,
+        maxLength: 30,
+        placeholder: 'Required field with character limit',
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+//# sourceMappingURL=TextField.stories.js.map

package/dist/remarkable-ui/editors/TextField/TextField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../../../src/remarkable-ui/editors/TextField/TextField.stories.tsx"],"names":[],"mappings":"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"}

package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SelectListOption_1 = require("../shared/SelectList/SelectListOptions/SelectListOption/SelectListOption");
+const debounce_utils_1 = require("../../../utils/debounce.utils");
+const Dropdown_1 = require("../../../shared/Dropdown/Dropdown");
+const SelectButton_1 = require("../shared/SelectButton/SelectButton");
+const SelectList_1 = require("../shared/SelectList/SelectList");
+const TextField_1 = require("../../TextField/TextField");
+const SelectListOptions_1 = require("../shared/SelectList/SelectListOptions/SelectListOptions");
+const icons_react_1 = require("@tabler/icons-react");
+const Button_1 = require("../../../shared/Button/Button");
+const MultiSelectField_module_css_1 = __importDefault(require("./MultiSelectField.module.css"));
+const useSelectSearchFocus_hook_1 = require("../shared/useSelectSearchFocus.hook");
+const MultiSelectField = ({ disabled, isClearable, isLoading, isSearchable, noOptionsMessage, options, placeholder, submitLabel = 'Apply', values = [], onChange, onSearch, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [preValues, setPreValues] = (0, react_1.useState)(values);
+    const [selectedLabel, setSelectedLabel] = (0, react_1.useState)('');
+    const searchFieldRef = (0, react_1.useRef)(null);
+    (0, useSelectSearchFocus_hook_1.useSelectSearchFocus)(isOpen, searchFieldRef);
+    (0, react_1.useEffect)(() => {
+        setPreValues(values);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(values)]);
+    (0, react_1.useEffect)(() => {
+        if (isLoading) {
+            return;
+        }
+        if (!values || values.length === 0) {
+            setSelectedLabel('');
+            return;
+        }
+        const selectedOptions = values.map((value) => options.find((o) => o.value === value)?.label ?? value);
+        if (selectedOptions.length > 0) {
+            const newLabel = selectedOptions.join(', ');
+            setSelectedLabel(`(${selectedOptions.length}) ${newLabel}`);
+        }
+    }, [values, options, isLoading]);
+    const debouncedSearch = (0, react_1.useMemo)(() => (onSearch ? (0, debounce_utils_1.debounce)(onSearch) : undefined), [onSearch]);
+    const displayOptions = isSearchable && !onSearch
+        ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))
+        : options;
+    const isSubmitDisabled = preValues.every((preValue) => values.includes(preValue)) &&
+        values.every((value) => preValues.includes(value));
+    const handleSelectOption = (e, newValue) => {
+        e.preventDefault();
+        if (!newValue)
+            return;
+        if (preValues.includes(newValue)) {
+            setPreValues(preValues.filter((v) => v !== newValue));
+        }
+        else {
+            setPreValues([...preValues, newValue]);
+        }
+    };
+    const handleSearch = (newSearch) => {
+        setSearchValue(newSearch);
+        debouncedSearch?.(newSearch);
+    };
+    const handleSave = (newValues) => {
+        onChange(newValues);
+        setIsOpen(false);
+        setSearchValue('');
+        onSearch?.('');
+    };
+    const handleClearAll = () => {
+        setSearchValue('');
+        onSearch?.('');
+        onChange([]);
+    };
+    return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { open: isOpen, onOpenChange: setIsOpen, disabled: disabled, triggerComponent: (0, jsx_runtime_1.jsx)(SelectButton_1.SelectButton, { "aria-label": "Select options", placeholder: placeholder, disabled: disabled, valueLabel: selectedLabel, onClear: handleClearAll, isClearable: isClearable, isLoading: isLoading }), children: (0, jsx_runtime_1.jsxs)(SelectList_1.SelectList, { children: [isSearchable && ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ref: searchFieldRef, startIcon: icons_react_1.IconSearch, "aria-label": "Search options", placeholder: "Search\u2026", role: "searchbox", value: searchValue, onKeyDown: (e) => e.stopPropagation(), onChange: handleSearch })), (0, jsx_runtime_1.jsxs)(SelectListOptions_1.SelectListOptions, { disabled: isLoading, children: [displayOptions.map((option) => ((0, jsx_runtime_1.jsx)(SelectListOption_1.SelectListOption, { onClick: (e) => handleSelectOption(e, option.value), startIcon: preValues.includes(option.value) ? (0, jsx_runtime_1.jsx)(icons_react_1.IconSquareCheckFilled, {}) : (0, jsx_runtime_1.jsx)(icons_react_1.IconSquare, {}), ...option }, option?.value ?? option.label))), noOptionsMessage && (0, jsx_runtime_1.jsx)(SelectListOption_1.SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: MultiSelectField_module_css_1.default.submitButton, disabled: isSubmitDisabled || isLoading, variant: "primary", size: "medium", onClick: () => handleSave(preValues), role: "button", children: submitLabel })] }) }));
+};
+exports.MultiSelectField = MultiSelectField;
+//# sourceMappingURL=MultiSelectField.js.map

package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../../../../src/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.tsx"],"names":[],"mappings":"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"}

package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
-    component: import('react').FC<import('./MultiSelectField').MultiSelectFieldProps>;
+    component: import("react").FC<import("./MultiSelectField").MultiSelectFieldProps>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithState = exports.Disabled = exports.Filled = exports.Empty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const preview_api_1 = require("storybook/internal/preview-api");
+const MultiSelectField_1 = require("./MultiSelectField");
+const meta = {
+    component: MultiSelectField_1.MultiSelectField,
+};
+exports.default = meta;
+const mockOptions = [
+    { value: 'red', label: 'Red' },
+    { value: 'green', label: 'Green' },
+    { value: 'blue', label: 'Blue' },
+    { value: 'yellow', label: 'Yellow' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'purple', label: 'Purple' },
+    { value: 'pink', label: 'Pink' },
+    { value: 'brown', label: 'Brown' },
+    { value: 'gray', label: 'Gray' },
+    { value: 'black', label: 'Black' },
+];
+exports.Empty = {
+    args: {
+        values: [],
+        isSearchable: true,
+        options: mockOptions,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Filled = {
+    args: {
+        values: [mockOptions[0].value],
+        options: mockOptions,
+        isSearchable: true,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.Disabled = {
+    args: {
+        disabled: true,
+        values: [],
+        options: mockOptions,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+exports.WithState = {
+    render: (args) => {
+        const [{ values }, updateArgs] = (0, preview_api_1.useArgs)();
+        return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, { ...args, values: values, onChange: (newValues) => updateArgs({ values: newValues }) }));
+    },
+    args: {
+        values: [],
+        isClearable: true,
+        isSearchable: true,
+        options: mockOptions,
+        onChange: (value) => console.log('onChange', value),
+    },
+};
+//# sourceMappingURL=MultiSelectField.stories.js.map

package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectField.stories.js","sourceRoot":"","sources":["../../../../../src/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.tsx"],"names":[],"mappings":";;;;AACA,gEAAyD;AACzD,yDAAsD;AAGtD,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,mCAAgB;CACY,CAAC;AAE1C,kBAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAA4B;IAC3C,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,WAAW;QACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC;KACpD;CACF,CAAC;AAEW,QAAA,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,WAAW,CAAC,CAAC,CAAE,CAAC,KAAM,CAAC;QAChC,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC;KACpD;CACF,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,WAAW;QACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC;KACpD;CACF,CAAC;AAEW,QAAA,SAAS,GAAU;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU,CAAC,GAAG,IAAA,qBAAO,GAAE,CAAC;QAE3C,OAAO,CACL,uBAAC,mCAAgB,OACX,IAAI,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAC1D,CACH,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,WAAW;QACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC;KACpD;CACF,CAAC"}

package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleSelectField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextField_1 = require("../../TextField/TextField");
+const SelectButton_1 = require("../shared/SelectButton/SelectButton");
+const Dropdown_1 = require("../../../shared/Dropdown/Dropdown");
+const SelectList_1 = require("../shared/SelectList/SelectList");
+const SelectListOptions_1 = require("../shared/SelectList/SelectListOptions/SelectListOptions");
+const SelectListOption_1 = require("../shared/SelectList/SelectListOptions/SelectListOption/SelectListOption");
+const debounce_utils_1 = require("../../../utils/debounce.utils");
+const icons_react_1 = require("@tabler/icons-react");
+const useSelectSearchFocus_hook_1 = require("../shared/useSelectSearchFocus.hook");
+const SingleSelectField = ({ value = '', startIcon, options, disabled, placeholder, isSearchable, isClearable, isLoading, noOptionsMessage = 'No options available', onChange, onSearch, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [selectedLabel, setSelectedLabel] = (0, react_1.useState)(value);
+    const searchFieldRef = (0, react_1.useRef)(null);
+    (0, useSelectSearchFocus_hook_1.useSelectSearchFocus)(isOpen, searchFieldRef);
+    (0, react_1.useEffect)(() => {
+        if (!value) {
+            setSelectedLabel('');
+            return;
+        }
+        const option = options.find((opt) => opt.value === value);
+        if (option) {
+            setSelectedLabel(option.label);
+        }
+    }, [value, options]);
+    const debouncedSearch = (0, react_1.useMemo)(() => (onSearch ? (0, debounce_utils_1.debounce)(onSearch) : undefined), [onSearch]);
+    const displayOptions = isSearchable && !onSearch
+        ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))
+        : options;
+    const handleChange = (newValue) => {
+        setSearchValue('');
+        onChange(newValue ?? '');
+        onSearch?.('');
+        if (newValue === '') {
+            setSelectedLabel('');
+        }
+        else {
+            const option = options.find((opt) => opt.value === newValue);
+            if (option)
+                setSelectedLabel(option.label);
+        }
+    };
+    const handleSearch = (newSearch) => {
+        setSearchValue(newSearch);
+        debouncedSearch?.(newSearch);
+    };
+    return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { open: isOpen, onOpenChange: setIsOpen, disabled: disabled, triggerComponent: (0, jsx_runtime_1.jsx)(SelectButton_1.SelectButton, { startIcon: startIcon, "aria-label": "Select option", placeholder: placeholder, disabled: disabled, valueLabel: selectedLabel, onClear: () => handleChange(''), isClearable: isClearable, isLoading: isLoading }), children: (0, jsx_runtime_1.jsxs)(SelectList_1.SelectList, { children: [isSearchable && ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ref: searchFieldRef, startIcon: icons_react_1.IconSearch, "aria-label": "Search options", placeholder: "Search\u2026", role: "searchbox", value: searchValue, onKeyDown: (e) => e.stopPropagation(), onChange: handleSearch })), (0, jsx_runtime_1.jsxs)(SelectListOptions_1.SelectListOptions, { disabled: isLoading, children: [displayOptions.map((option) => ((0, jsx_runtime_1.jsx)(SelectListOption_1.SelectListOption, { onClick: () => handleChange(option?.value), isSelected: option.value === value, ...option }, option?.value ?? option.label))), options.length === 0 && ((0, jsx_runtime_1.jsx)(SelectListOption_1.SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage }))] })] }) }));
+};
+exports.SingleSelectField = SingleSelectField;
+//# sourceMappingURL=SingleSelectField.js.map

package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectField.js","sourceRoot":"","sources":["../../../../../src/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.tsx"],"names":[],"mappings":"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"}

package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
-    component: import('react').FC<import('./SingleSelectField').SingleSelectFieldProps>;
+    component: import("react").FC<import("./SingleSelectField").SingleSelectFieldProps>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;