@mrshmllw/smores-react 2.7.2 → 2.8.0

package/dist/SearchInput/Container.js

@@ -31,6 +31,6 @@ const list = [
     },
 ];
 export const Container = ({ outlined, showIcon }) => {
-    return (React.createElement(SearchInput, { id: "days", label: "Days", placeholder: "Search days", searchList: list, onFound: () => console.log('found'), outlined: outlined, showIcon: showIcon }));
+    return (React.createElement(SearchInput, { id: "days", label: "Days", placeholder: "Search days", searchList: list, onFound: (val) => console.log('found', val), outlined: outlined, showIcon: showIcon }));
 };
 //# sourceMappingURL=Container.js.map

package/dist/SearchInput/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/SearchInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,OAAO,CACL,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,aAAa,EACzB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/SearchInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,OAAO,CACL,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,aAAa,EACzB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,EAC3C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/SearchInput/SearchInput.d.ts

@@ -13,5 +13,6 @@ export interface SearchInputProps extends CommonFieldProps {
     showIcon?: boolean;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     outlined?: boolean;
+    value?: string;
 }
 export declare const SearchInput: FC<SearchInputProps>;

package/dist/SearchInput/SearchInput.js

@@ -9,50 +9,65 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
 import { theme } from '../theme';
 import { Icon } from '../Icon';
 import { Field } from '../fields/Field';
 import { useUniqueId } from '../utils/id';
+import { useControllableState } from '../utils/useControlledState';
+import { SearchOptions } from './SearchOptions';
 export const SearchInput = (_a) => {
-    var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, onBlur } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle", "onBlur"]);
+    var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, onBlur, value } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle", "onBlur", "value"]);
     const id = useUniqueId(idProp);
-    const [active, setActive] = useState(false);
-    const [list, setList] = useState([]);
-    const [selectedResult, setSelectedResult] = useState('');
-    const [selected, setSelected] = useState(false);
-    const search = (e) => {
-        const value = e.currentTarget.value;
-        if (value) {
-            if (value.length >= 2) {
-                const filteredList = searchList.filter((el) => el.label.toLowerCase().includes(value.toLocaleLowerCase()));
-                setActive(true);
-                setList(filteredList);
-            }
+    const [showOptions, setShowOptions] = useState(false);
+    const [selectedValue, setSelectedValue] = useControllableState({
+        initialState: null,
+        stateProp: value,
+    });
+    const [searchQuery, setSearchQuery] = useState(null);
+    const filteredList = useMemo(() => {
+        if (searchQuery === null || searchQuery === '') {
+            return searchList;
+        }
+        return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
+    }, [searchQuery]);
+    const getDisplayedInputText = () => {
+        var _a;
+        if (searchQuery !== null) {
+            return searchQuery;
+        }
+        if (selectedValue !== null) {
+            return (((_a = searchList.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) || '');
+        }
+        return '';
+    };
+    const isSelected = selectedValue !== null;
+    const displayedInputText = getDisplayedInputText();
+    const updateSearchQuery = (query) => {
+        setSearchQuery(query);
+        if (query === null) {
+            setShowOptions(false);
         }
         else {
-            setActive(false);
+            setShowOptions(2 <= query.length);
         }
     };
-    const updateInputState = (e) => {
-        const value = e.currentTarget.value;
-        setSelectedResult(value);
+    const handleInputChange = (event) => {
+        const nextValue = event.currentTarget.value;
+        updateSearchQuery(nextValue);
     };
-    const select = (selectedItem) => {
-        setActive(false);
-        setSelectedResult(selectedItem.label);
-        onFound(selectedItem.value);
-        setSelected(true);
+    const handleSelect = (nextValue) => {
+        updateSearchQuery(null);
+        setSelectedValue(nextValue);
+        onFound(nextValue);
     };
     return (React.createElement(Field, Object.assign({ className: className, renderAsTitle: renderAsTitle, id: id, outlined: outlined }, otherProps),
-        React.createElement(React.Fragment, null,
-            React.createElement(StyledInputBox, { outlined: outlined, selected: selected },
-                showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
-                React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: selectedResult, onKeyUp: search, onChange: updateInputState, outlined: outlined, selected: selected, onBlur: onBlur })),
-            React.createElement(StyledResultsContainer, { show: active, absolutePosition: !resultsRelativePosition, outlined: outlined },
-                React.createElement(ResultsList, { outlined: outlined }, list.length ? (list.map((el, i) => (React.createElement("li", { key: i, onClick: () => select(el) }, el.label)))) : (React.createElement("li", null, "No results")))))));
+        React.createElement(StyledInputBox, { outlined: outlined, selected: isSelected },
+            showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
+            React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, outlined: outlined, selected: isSelected, onBlur: onBlur })),
+        showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, outlined: outlined, positionRelative: resultsRelativePosition }))));
 };
 const StyledInputBox = styled.div `
   display: flex;
@@ -96,47 +111,6 @@ const StyledInput = styled.input `
     height: auto;
   `}
 `;
-const StyledResultsContainer = styled.div `
-  box-sizing: border-box;
-  overflow-y: hidden;
-  ${({ absolutePosition }) => absolutePosition && 'position: absolute;'}
-  width: 100%;
-  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
-  ${({ outlined }) => outlined && 'left: 0px; top: 90%;'};
-
-  ul {
-    max-height: ${({ show }) => (show ? '192px' : '0px')};
-  }
-`;
-const ResultsList = styled.ul `
-  position: relative;
-  list-style: none;
-  overflow-y: auto;
-  padding: 0;
-  margin: 0;
-  background-color: ${theme.colors.white};
-  border: 1px solid ${theme.colors.outline};
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  z-index: 1000;
-
-  ${({ outlined }) => outlined &&
-    `
-    border: 2px solid ${theme.colors.outline};
-  `}
-
-  li {
-    padding: 16px 14px;
-    box-sizing: border-box;
-    font-size: 16px;
-    color: ${theme.colors.secondary};
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${theme.colors.background};
-    }
-  }
-`;
 const SearchIcon = styled(Icon) `
   margin-right: 8px;
 `;

package/dist/SearchInput/SearchInput.js.map

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

package/dist/SearchInput/SearchOptions.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+declare type Option = {
+    label: string;
+    value: string;
+};
+declare type SearchOptionsProps = {
+    displayedList: Array<Option>;
+    onSelect: (option: string) => void;
+    positionRelative: boolean;
+    outlined: boolean;
+};
+export declare const SearchOptions: FC<SearchOptionsProps>;
+export {};

package/dist/SearchInput/SearchOptions.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+export const SearchOptions = ({ displayedList, onSelect, outlined, positionRelative, }) => {
+    return (React.createElement(StyledResultsContainer, { positionRelative: positionRelative, outlined: outlined },
+        React.createElement(ResultsList, { outlined: outlined }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el.value) }, el.label)))) : (React.createElement("li", null, "No results")))));
+};
+const StyledResultsContainer = styled.div `
+  box-sizing: border-box;
+  overflow-y: hidden;
+  ${({ positionRelative }) => !positionRelative && 'position: absolute;'}
+  width: 100%;
+  ${({ outlined }) => outlined && 'left: 0px; top: 90%;'};
+
+  ul {
+    max-height: 192px;
+  }
+`;
+const ResultsList = styled.ul `
+  position: relative;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
+  background-color: ${theme.colors.white};
+  border: 1px solid ${theme.colors.outline};
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  z-index: 1000;
+
+  ${({ outlined }) => outlined &&
+    `
+    border: 2px solid ${theme.colors.outline};
+  `}
+
+  li {
+    padding: 16px 14px;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: ${theme.colors.secondary};
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.colors.background};
+    }
+  }
+`;
+//# sourceMappingURL=SearchOptions.js.map

package/dist/SearchInput/SearchOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,gBAAgB,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,sBAAsB,IACrB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ;QAElB,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,IAC5B,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,IAC1C,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6CAAmB,CACpB,CACW,CACS,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,IAAI,qBAAqB;;IAEpE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,sBAAsB;;;;;CAKvD,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAsC;;;;;;sBAM7C,KAAK,CAAC,MAAM,CAAC,KAAK;sBAClB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;IAKtC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;wBACoB,KAAK,CAAC,MAAM,CAAC,OAAO;GACzC;;;;;;aAMU,KAAK,CAAC,MAAM,CAAC,SAAS;;;;0BAIT,KAAK,CAAC,MAAM,CAAC,UAAU;;;CAGhD,CAAA"}

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export * from './Textarea';
 export * from './TextInput';
 export * from './theme';
 export * from './Toggle';
+export * from './fields/Field';
 export * from './fields/Fieldset';
 export * from './fontStyle';
 export { MarginProps, PaddingProps } from './utils/space';

package/dist/index.js

@@ -31,6 +31,7 @@ export * from './Textarea';
 export * from './TextInput';
 export * from './theme';
 export * from './Toggle';
+export * from './fields/Field';
 export * from './fields/Fieldset';
 export * from './fontStyle';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}

package/dist/utils/useControlledState.d.ts

@@ -0,0 +1,5 @@
+import type { SetStateAction } from 'react';
+export declare const useControllableState: <StateType>({ initialState, stateProp, }: {
+    initialState: StateType;
+    stateProp: StateType | undefined;
+}) => readonly [StateType, (state: SetStateAction<StateType>) => void];

package/dist/utils/useControlledState.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+export const useControllableState = ({ initialState, stateProp, }) => {
+    const [state, setState] = useState(initialState);
+    const returnedState = stateProp !== undefined ? stateProp : state;
+    const returnedSetState = useCallback((nextState) => {
+        if (stateProp !== undefined) {
+            return;
+        }
+        setState(nextState);
+    }, [state, stateProp]);
+    return [returnedState, returnedSetState];
+};
+//# sourceMappingURL=useControlledState.js.map

package/dist/utils/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sourceRoot":"","sources":["../../src/utils/useControlledState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAY,EAC9C,YAAY,EACZ,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAEhD,MAAM,aAAa,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;IACjE,MAAM,gBAAgB,GAAG,WAAW,CAGlC,CAAC,SAAS,EAAE,EAAE;QACZ,IAAI,SAAS,KAAK,SAAS,EAAE;YAC3B,OAAM;SACP;QAED,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EACD,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAA;IAED,OAAO,CAAC,aAAa,EAAE,gBAAgB,CAAU,CAAA;AACnD,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [