@sydsoft/base 1.32.0 → 1.34.0

package/dist/esm/_lib/baseFunctions.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const isDev: boolean;
+export declare const isServerReq: (context: any) => boolean;
 export declare function tumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
 export declare function tumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
 export declare function seoCevirFunction(e: React.ChangeEvent<HTMLInputElement>): void;

package/dist/esm/_lib/baseFunctions.js

@@ -1,4 +1,5 @@
 export var isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+export var isServerReq = function (context) { var _a, _b; return !((_b = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.url) === null || _b === void 0 ? void 0 : _b.startsWith('/_next')); };
 export function tumuBuyukCevir(e) {
     var _a;
     if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
@@ -38,11 +39,11 @@ export function seoCevirFunction(e) {
 }
 export function getDomain(context) {
     if (context === void 0) { context = null; }
-    var url = "";
+    var url = '';
     if (context) {
         url = context.req.headers.host;
     }
-    else if (typeof window !== "undefined") {
+    else if (typeof window !== 'undefined') {
         url = window.location.hostname;
     }
     if (url.length) {
@@ -52,11 +53,11 @@ export function getDomain(context) {
             // see if the second level domain is a common SLD.
             if (parts[1].match(/^(com|edu|gov|net|mil|org|nom|co|name|info|biz)$/i)) {
                 var domain_1 = parts[2] + '.' + parts[1] + '.' + parts[0];
-                return domain_1.split(":")[0];
+                return domain_1.split(':')[0];
             }
         }
         var domain = parts[1] + '.' + parts[0];
-        return domain.split(":")[0];
+        return domain.split(':')[0];
     }
     return url;
 }

package/dist/esm/form/Input.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 type maskSettingsTranslation = {
     [key: string]: {
         pattern: any;

package/dist/esm/form/Input.js

@@ -1,11 +1,11 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from "../_lib/baseFunctions";
-import { Dialog } from "./Dialog";
-import { alert_add } from "../alert";
-import { applyInputMask } from "../_lib/inputMask";
-import styles from "./styles/Input.module.css";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from '../_lib/baseFunctions';
+import { applyInputMask } from '../_lib/inputMask';
+import { alert_add } from '../alert';
+import { Dialog } from './Dialog';
+import styles from './styles/Input.module.css';
 export var Input = function (_a) {
     var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, disabled = _a.disabled, required = _a.required, loading = _a.loading, autoFocus = _a.autoFocus, select = _a.select, _b = _a.valueKey, valueKey = _b === void 0 ? 'value' : _b, _c = _a.labelKey, labelKey = _c === void 0 ? 'label' : _c, ilkSec = _a.ilkSec, multiline = _a.multiline, rows = _a.rows, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _d = _a.mask, mask = _d === void 0 ? '' : _d, _e = _a.maskSettings, maskSettings = _e === void 0 ? {
         clearIfNotMatch: true,
@@ -38,7 +38,7 @@ export var Input = function (_a) {
     }, [value]);
     useEffect(function () {
         // if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
-        if (select && ilkSec && value.toString().length === 0) {
+        if (select && ilkSec && (value === '' || !value)) {
             if (select.length) {
                 var ilkItem = select[0][valueKey] ? select[0][valueKey] : '';
                 onChange && onChange({ target: { name: name, value: ilkItem } });

package/dist/esm/form/SearchableInput.d.ts

@@ -6,21 +6,21 @@ type typeList = {
     [key: string | number]: any;
 }[];
 interface Props extends PropsInput {
-    autoCompleteList?: typeList | any;
-    onChange?: Function;
+    autoCompleteList?: typeList;
+    onChange?: (e: any) => void;
     value: string | number | undefined;
     valueKey?: string;
     labelKey?: string;
     itemComponent?: any;
-    api?: boolean;
-    onText?: Function;
-    onSelect?: Function;
-    onLoad?: Function;
+    isDataFromApi?: boolean;
+    onText?: (text: string) => void;
+    onSelect?: (item: any) => void;
+    onLoad?: (value: string | number) => void;
     newCreate?: boolean;
     refModal?: any;
     style?: React.CSSProperties;
     disabled?: boolean;
-    parentInputValue?: any;
+    parentInputValue?: string | number | undefined;
     listPositionRelative?: boolean;
 }
 type handle = {

package/dist/esm/form/SearchableInput.js

@@ -1,30 +1,23 @@
 import { __assign, __rest, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "./Input";
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "./Button";
 import { Icon } from "../icon";
 import { isDev } from "../_lib/baseFunctions";
 import styles from "./styles/SearchableInput.module.css";
 var Component = function (_a, forwardedRef) {
-    var _b = _a.api, api = _b === void 0 ? false : _b, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, _c = _a.newCreate, newCreate = _c === void 0 ? false : _c, name = _a.name, value = _a.value, _d = _a.autoCompleteList, autoCompleteList = _d === void 0 ? [] : _d, itemComponent = _a.itemComponent, onChange = _a.onChange, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ? "value" : _e, _f = _a.labelKey, labelKey = _f === void 0 ? "label" : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, refModal = _a.refModal, style = _a.style, disabled = _a.disabled, parentInputValue = _a.parentInputValue, listPositionRelative = _a.listPositionRelative, other = __rest(_a, ["api", "onText", "onSelect", "onLoad", "newCreate", "name", "value", "autoCompleteList", "itemComponent", "onChange", "inputRef", "valueKey", "labelKey", "placeholder", "endAdornment", "refModal", "style", "disabled", "parentInputValue", "listPositionRelative"]);
+    var _b = _a.autoCompleteList, autoCompleteList = _b === void 0 ? [] : _b, _c = _a.isDataFromApi, isDataFromApi = _c === void 0 ? false : _c, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, onChange = _a.onChange, _d = _a.newCreate, newCreate = _d === void 0 ? false : _d, name = _a.name, value = _a.value, itemComponent = _a.itemComponent, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ? "value" : _e, _f = _a.labelKey, labelKey = _f === void 0 ? "label" : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, refModal = _a.refModal, style = _a.style, disabled = _a.disabled, parentInputValue = _a.parentInputValue, listPositionRelative = _a.listPositionRelative, other = __rest(_a, ["autoCompleteList", "isDataFromApi", "onText", "onSelect", "onLoad", "onChange", "newCreate", "name", "value", "itemComponent", "inputRef", "valueKey", "labelKey", "placeholder", "endAdornment", "refModal", "style", "disabled", "parentInputValue", "listPositionRelative"]);
     var refMain = useRef(null);
     var refInput = useRef(null);
-    useEffect(function () {
-        if (inputRef)
-            inputRef.current = refInput.current;
-    }, [refInput.current]);
-    var refComponentInput = useRef();
-    var refList = useRef();
+    var refComponentInput = useRef(null);
+    var refList = useRef(null);
     var _g = useState(autoCompleteList), data = _g[0], setData = _g[1];
     var _h = useState(""), text = _h[0], setText = _h[1]; //Inputta görünen
     var _j = useState(""), filter = _j[0], setFilter = _j[1]; // Filtrelemeye tabi tutulan
     var _k = useState(false), open = _k[0], setOpen = _k[1];
-    var _l = useState(api), loading = _l[0], setLoading = _l[1];
-    useEffect(function () {
-        if (onLoad)
-            onLoad(value !== null && value !== void 0 ? value : "");
-    }, []);
+    var _l = useState(isDataFromApi), loading = _l[0], setLoading = _l[1];
+    var _m = useState({ created: false }), newItemCreate = _m[0], setNewItemCreate = _m[1];
     useImperativeHandle(forwardedRef, function () { return ({
         open: function () { return setOpen(true); },
         close: function () { return setOpen(false); },
@@ -44,26 +37,39 @@ var Component = function (_a, forwardedRef) {
             if (openList === void 0) { openList = false; }
             if (focusInput === void 0) { focusInput = false; }
             return clear(openList, focusInput);
-        }
+        },
     }); });
     useEffect(function () {
-        if (parentInputValue) {
+        if (onLoad)
+            onLoad(value !== null && value !== void 0 ? value : "");
+    }, []);
+    useEffect(function () {
+        if (inputRef)
+            inputRef.current = refInput.current;
+    }, [refInput.current]);
+    useEffect(function () {
+        if (parentInputValue)
             clear(false);
-        }
     }, [parentInputValue]);
+    // autoCompleteList prop'u değiştiğinde data state'ini güncelle
+    useEffect(function () {
+        if (autoCompleteList && Array.isArray(autoCompleteList)) {
+            setData(autoCompleteList);
+            isDev && console.log("autoCompleteList =>", name, autoCompleteList);
+        }
+    }, [autoCompleteList]);
     useEffect(function () {
-        if (!api && Object.keys(data).length > 0)
+        if (!isDataFromApi && data.length > 0)
             checkByValue(value, open);
-        // if (Object.keys(data).length > 0) checkByValue(value, open);
-        isDev && console.log("useDeepCompareEffect =>", name, "data");
+        // if (data.length > 0) checkByValue(value, open);
     }, [data]);
     useEffect(function () {
-        if (Object.keys(data).length > 0) {
+        if (data.length > 0) {
             if (value && value.toString().length > 0) {
                 checkByValue(value, open);
             }
             else {
-                if (!api)
+                if (!isDataFromApi)
                     clear(false);
             }
         }
@@ -82,13 +88,6 @@ var Component = function (_a, forwardedRef) {
         window.addEventListener("mousedown", checkHideBackDrop);
         if (refMain.current)
             refMain.current.addEventListener("keydown", checkESC);
-        return function () {
-            window.removeEventListener("mousedown", checkHideBackDrop);
-            if (refMain.current)
-                refMain.current.removeEventListener("keydown", checkESC);
-        };
-    }, [data, open]);
-    useEffect(function () {
         if (refModal && refModal.current) {
             if (open) {
                 refModal.current.style.overflow = "visible";
@@ -103,12 +102,17 @@ var Component = function (_a, forwardedRef) {
                 refModal.current.scrollTop = refMain.current.offsetTop + 300;
             }
         }
+        return function () {
+            window.removeEventListener("mousedown", checkHideBackDrop);
+            if (refMain.current)
+                refMain.current.removeEventListener("keydown", checkESC);
+        };
     }, [open]);
     var cevirTumuKucuk = function (text) {
         if (text === void 0) { text = ""; }
         return text.toString().toLocaleLowerCase("tr-TR");
     };
-    var convertForSearch = function (value) {
+    var convertForSearch = useCallback(function (value) {
         var data = cevirTumuKucuk(value);
         data = data.replace(/ö/g, "o");
         data = data.replace(/ç/g, "c");
@@ -119,35 +123,31 @@ var Component = function (_a, forwardedRef) {
         data = data.replace(/[^a-z\d]/g, ""); // %_- are allowed
         data = data.replace(/^\s+|\s+$/g, "");
         return data;
-    };
+    }, [cevirTumuKucuk]);
     var filteredData = useMemo(function () {
         var _a;
         var list;
         if (filter.length > 0) {
-            list = Object.values(data).filter(function (item) {
-                return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter;
-            });
+            list = data.filter(function (item) { return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter; });
         }
         else {
             list = data;
         }
         if (newCreate && text.length > 0) {
-            var filterText = Object.values(data).find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
+            var filterText = data.find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
             if (!filterText) {
-                list = __spreadArray([(_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a)], list, true);
+                var newItem = (_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a);
+                list = __spreadArray([newItem], list, true);
+                setNewItemCreate(newItem);
+            }
+            else {
+                if (newItemCreate.create)
+                    setNewItemCreate({ create: false });
             }
         }
         return list;
-    }, [data, filter]);
-    var Change = function (e) {
-        setValue(false, true);
-        setText(e.target.value);
-        setFilter(e.target.value);
-        setOpen(true);
-        if (onText)
-            onText(e.target.value);
-    };
-    var setValue = function (result, openList) {
+    }, [data, filter, newCreate, text, valueKey, labelKey]);
+    var setValue = useCallback(function (result, openList) {
         setOpen(openList);
         var newValue = result && result[valueKey] ? result[valueKey] : "";
         if (result) {
@@ -156,41 +156,49 @@ var Component = function (_a, forwardedRef) {
         }
         setFilter("");
         if (onChange && newValue != value) {
-            isDev && console.log("onChange =>", name, "yeni:" + newValue, "eski:" + value);
             onChange({
                 target: {
                     name: name,
-                    value: newValue
-                }
+                    value: newValue,
+                },
             });
         }
         if (onSelect)
             onSelect(result);
-    };
-    var checkByValue = function (value, openList, list) {
+    }, [onChange, onSelect, name, value, valueKey, labelKey]);
+    var Change = useCallback(function (e) {
+        setValue(false, true);
+        setText(e.target.value);
+        setFilter(e.target.value.trim());
+        setOpen(true);
+        if (onText)
+            onText(e.target.value);
+    }, [setValue, onText]);
+    var checkByValue = useCallback(function (value, openList, list) {
         if (openList === void 0) { openList = false; }
         if (list === void 0) { list = []; }
         var targetList = list.length > 0 ? list : data;
         var find = Object.values(targetList).find(function (item) { return cevirTumuKucuk(item[valueKey]) === cevirTumuKucuk(value); });
+        if (!find && newCreate && newItemCreate.create) {
+            find = newItemCreate;
+        }
         setValue(find, openList);
-    };
-    var checkByInput = function () {
-        isDev && console.log("checkByInput =>", name, refInput.current.value, data);
-        var findByLabel = Object.values(data).find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
+    }, [data, valueKey, newCreate, newItemCreate, setValue]);
+    var checkByInput = useCallback(function () {
+        var findByLabel = data.find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
         if (findByLabel && value == findByLabel[valueKey]) {
             setOpen(false);
-            isDev && console.log("findByLabel - Zaten Aynı =>", name, findByLabel);
             return;
         }
         setValue(findByLabel, false);
         if (!findByLabel)
             setText("");
-        if (api && !findByLabel && Object.keys(data).length === 0) {
+        if (isDataFromApi && !findByLabel && data.length === 0) {
             if (onText)
                 onText("");
         }
-    };
-    var clear = function (openList, focusInput) {
+    }, [data, labelKey, value, valueKey, isDataFromApi, onText, setValue]);
+    var clear = useCallback(function (openList, focusInput) {
         var _a;
         if (openList === void 0) { openList = true; }
         if (focusInput === void 0) { focusInput = false; }
@@ -201,8 +209,7 @@ var Component = function (_a, forwardedRef) {
             onText("");
         if (focusInput)
             (_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
-        isDev && console.log("clear");
-    };
+    }, [setValue, onText]);
     function setScrollPosition() {
         if (refList.current) {
             var position = 0;
@@ -304,10 +311,10 @@ var Component = function (_a, forwardedRef) {
         }
         setScrollPosition();
     };
-    return (_jsxs("div", { ref: refMain, className: styles.component, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { name: name, value: text, inputRef: refInput, componentRef: refComponentInput, onFocus: function () { return setOpen(true); }, onChange: Change, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: "Temizle", tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: "close", style: { color: "#444" } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(Object.keys(data).length > 0), onClick: function () { return setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? "keyboard_arrow_up" : "keyboard_arrow_down", style: { color: "#444" } }) })] })), placeholder: loading ? "Lütfen bekleyiniz..." : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: "off" }) })), _jsx("div", { className: styles.listDiv, "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "".concat(styles.list, " ").concat(open ? styles.open : ""), children: [(Object.keys(filteredData).length === 0 || loading) && (_jsx("div", { className: "".concat(styles.message, " ").concat(loading ? styles.loading : ""), children: loading ? "Lütfen bekleyiniz..." : "Kayıt bulunamadı..." })), Object.values(filteredData).map(function (item, key) {
+    return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { name: name, value: text, inputRef: refInput, componentRef: refComponentInput, onFocus: function () { return setOpen(true); }, onChange: Change, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: "Temizle", tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: "close", style: { color: "#444" } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(data.length > 0), onClick: function () { return setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? "keyboard_arrow_up" : "keyboard_arrow_down", style: { color: "#444" } }) })] })), placeholder: loading ? "Lütfen bekleyiniz..." : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: "off" }) })), _jsx("div", { className: "listDiv", "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "list ".concat(open ? "open" : ""), children: [(filteredData.length === 0 || loading) && _jsx("div", { className: "message ".concat(loading ? "loading" : ""), children: loading ? "Lütfen bekleyiniz..." : "Kayıt bulunamadı..." }), filteredData.map(function (item, key) {
                             var itemValue = item[valueKey];
                             var itemLabel = item[labelKey];
-                            return (_jsxs("li", { className: "".concat(styles.listItem, " ").concat(itemValue === value ? styles.active : ""), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: styles.newCreate, children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
+                            return (_jsxs("li", { className: "item ".concat(itemValue === value ? "active" : ""), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: "newCreate", children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
                         })] }) })] }));
 };
 export var SearchableInput = React.forwardRef(Component);

package/dist/esm/form/styles/SearchableInput.module.css

@@ -1,79 +1,80 @@
-.component {
+.searchableInputComponent {
+  cursor: unset;
 }
-.component input {
-    padding: 9px 9px 9px 14px;
+.searchableInputComponent input {
+  padding: 12px 14px;
 }
 
-.listDiv {
-    position: relative;
-    margin-top: -4px;
-    z-index: 1000;
+.searchableInputComponent :global(.listDiv) {
+  position: relative;
+  margin-top: -4px;
+  z-index: 1000;
 }
 
-.listDiv[data-relative="true"] {
-    z-index: 1 !important;
+.searchableInputComponent :global(.listDiv[data-relative="true"]) {
+  z-index: 1 !important;
 }
-.listDiv[data-relative="true"] > ul {
-    position: relative !important;
+.searchableInputComponent :global(.listDiv[data-relative="true"]) > ul {
+  position: relative !important;
 }
 
-.list {
-    position: absolute;
-    top: 3px;
-    left: 1%;
-    width: 98%;
-    height: 0;
-    overflow: hidden;
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+.searchableInputComponent :global(.list) {
+  position: absolute;
+  top: 3px;
+  left: 1%;
+  width: 98%;
+  height: 0;
+  overflow: hidden;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.list.open {
-    height: auto;
-    max-height: 300px;
-    overflow-x: hidden;
-    overflow-y: visible;
-    padding: 5px 0;
-    border: 1px #ced4da solid;
-    background: #fff;
+.searchableInputComponent :global(.list.open) {
+  height: auto;
+  max-height: 300px;
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding: 5px 0;
+  border: 1px #ced4da solid;
+  background: #fff;
 }
 
-.listItem {
-    cursor: pointer;
-    display: block;
-    padding: 8px 10px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+.searchableInputComponent :global(.list li) {
+  cursor: pointer;
+  display: block;
+  padding: 8px 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.listItem:hover,
-.listItem.selected {
-    background: #d9e0e3;
+.searchableInputComponent :global(.list li:hover),
+.searchableInputComponent :global(.list li.selected) {
+  background: #d9e0e3;
 }
 
-.listItem.active {
-    background: #cbe2ef;
-    font-weight: 500;
+.searchableInputComponent :global(.list li.active) {
+  background: #cbe2ef;
+  font-weight: 500;
 }
 
-.newCreate {
-    margin-right: 5px;
-    font-style: italic;
+.searchableInputComponent :global(.newCreate) {
+  margin-right: 5px;
+  font-style: italic;
 }
 
-.message {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: block;
-    padding: 15px 10px;
-    cursor: default;
+.searchableInputComponent :global(.message) {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: block;
+  padding: 15px 10px;
+  cursor: default;
 }
-.loading {
-    padding: 5px 10px;
-    background-color: #ced4da38;
-    text-align: center;
+.searchableInputComponent :global(.loading) {
+  padding: 5px 10px;
+  background-color: #ced4da38;
+  text-align: center;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.32.0",
+    "version": "1.34.0",
     "description": "",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",