@nolwenture/formik-jsonschema-form 0.18.0 → 0.19.0

package/dist/fields/SearchableSelectField.js

@@ -9,11 +9,11 @@ export const SearchableSelectField = (props) => {
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, } = useExtractUiSchema(uiSchema);
-    const [_, __, { setValue }] = useField(name);
+    const [{ value }, __, { setValue }] = useField(name);
     const enums = useMemo(() => getEnums(props), [props]);
     const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
     const [showOptions, setShowOptions] = useState(false);
-    const [searchTerm, setSearchTerm] = useState("");
+    const [searchTerm, setSearchTerm] = useState(() => { var _a, _b; return (_b = (_a = options.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ""; });
     const [displayedItems, setDisplayedItems] = useState([]);
     const [itemsToShow, setItemsToShow] = useState(10);
     const moreRef = useRef(null);
@@ -53,5 +53,5 @@ export const SearchableSelectField = (props) => {
     const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
     const showMoreOption = displayedItems.length < filteredOptions.length &&
         displayedItems.length >= 10;
-    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "X" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
 };

package/dist/sampleData/completeSchema.js

@@ -318,7 +318,7 @@ export const completeUiSchema = {
         "ui:field": "SearchableSelectField",
         "ui:options": {
             placeholder: "Search...",
-            clearButtonText: "Clear",
+            clearButtonText: "X",
             expandText: "More results",
             emptySearchMessage: "...no matching results found",
         },

package/dist/styledComponents.d.ts

@@ -167,6 +167,7 @@ export declare const RadioButtonField: {
 };
 export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const MultiSelectSearchContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const MultiSelectInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>, "ref"> & {
@@ -184,6 +185,7 @@ export declare const SearchableMultiTagSelectField: {
     ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
     styles: {
         MultiSelectContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        MultiSelectSearchContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
         MultiSelectInputStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
             ref?: unknown;
         }, never>, "ref"> & {
@@ -236,6 +238,6 @@ export declare const SearchInput: import("styled-components").IStyledComponent<"
 }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
-export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
 export declare const SearchInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

package/dist/styledComponents.js

@@ -293,7 +293,14 @@ export const MultiSelectContainer = styled.div `
   display: flex;
   flex-direction: column;
 `;
-export const MultiSelectInput = styled(FieldInput) ``;
+export const MultiSelectSearchContainer = styled.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+export const MultiSelectInput = styled(FieldInput) `
+  width: 100%;
+`;
 export const MultiSelectBadgeContainer = styled.div `
   margin: 0.3em 0;
   display: inline-flex;
@@ -313,13 +320,15 @@ export const MultiSelectBadgeCloseElement = styled.span `
   font-family: sans-serif;
 `;
 export const MultiSelectOptionList = styled.ul `
+  width: 100%;
   padding: unset;
   margin: unset;
   border: 1px solid gray;
   border-radius: 0.2em;
   position: absolute;
   background: white;
-  margin: 1.3em 0;
+  top: 100%;
+  z-index: 1000;
 `;
 export const MultiSelectOptionListItem = styled.li `
   cursor: pointer;
@@ -345,22 +354,23 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
     };
     return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
-            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
-                            setSearch(e.currentTarget.value);
-                        }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ id: className, type: "hidden" }, field)), _jsxs(MultiSelectSearchContainer, { children: [_jsx(MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                    setSearch(e.currentTarget.value);
+                                }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                        var _a;
+                                        setFieldValue(name, [
+                                            ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                        ]);
+                                        setSearch("");
+                                    }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) }))] }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
                             return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
-                        }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
-                                var _a;
-                                setFieldValue(name, [
-                                    ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                ]);
-                                setSearch("");
-                            }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
+                        }) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
         } }));
 };
 SearchableMultiTagSelectField.styles = {
     MultiSelectContainerStyle: MultiSelectContainer,
+    MultiSelectSearchContainerStyle: MultiSelectSearchContainer,
     MultiSelectInputStyle: MultiSelectInput,
     MultiSelectBadgeContainerStyle: MultiSelectBadgeContainer,
     MultiSelectBadgeStyle: MultiSelectBadge,
@@ -402,11 +412,10 @@ export const Icon = styled.div `
 export const CollapsibleChildWrapper = styled.div ``;
 export const CollapsibleObjectFieldWrapper = ObjectFieldWrapper;
 export const CollapsibleObjectFieldTitle = ObjectFieldTitle;
-export const SearchableSelectContainer = styled(MultiSelectContainer) ``;
+export const SearchableSelectContainer = styled(MultiSelectSearchContainer) ``;
 export const SearchDropdownContainer = styled(MultiSelectOptionList) `
   overflow-y: auto;
   overflow-x: auto;
-  max-width: 16rem;
   max-height: 6rem;
   white-space: nowrap;
 `;
@@ -426,7 +435,24 @@ export const SearchNotFound = styled(MultiSelectOptionListItem) `
   }
 `;
 export const SearchInput = styled(FieldInput) `
+  width: 100%;
+  padding-right: 1.5em;
   text-overflow: ellipsis;
 `;
-export const SearchClearButton = styled.button ``;
-export const SearchInputContainer = styled.div ``;
+export const SearchClearButton = styled.span `
+  cursor: pointer;
+  position: absolute;
+  right: 0.3em;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-color: #ccc;
+  border-radius: 50%;
+  line-height: 1em;
+  min-width: 1em;
+  height: 1em;
+  text-align: center;
+`;
+export const SearchInputContainer = styled.div `
+  display: flex;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [