@dtdot/lego 2.0.0-13 → 2.0.0-14

package/build/components/Input/Input.component.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SelectOption } from '../common/Options.component';
 export interface IInputProps {
     'name'?: string;
     'label'?: string;
@@ -13,6 +14,7 @@ export interface IInputProps {
     'onFocus'?: () => void;
     'onBlur'?: () => void;
     'data-cy'?: string;
+    'suggestions'?: SelectOption[];
 }
 declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/build/components/Input/Input.component.js

@@ -8,6 +8,7 @@ import ControlDescription from '../../shared/ControlDescription';
 import ControlLabel from '../../shared/ControlLabel';
 import { ControlStyles } from '../../shared/ControlStyles';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
+import { OptionsPopper } from '../common/Options.component';
 const InputContainer = styled.div `
   position: relative;
   border-radius: 2px;
@@ -62,11 +63,22 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, } = props;
+    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, suggestions, } = props;
+    const [isOpen, setIsOpen] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
+    const [referenceElement, setReferenceElement] = useState();
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const error = contextError || propsError;
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
+    const handleSetSuggestion = (value) => {
+        setIsOpen(false);
+        if (onChange) {
+            onChange(value);
+        }
+        if (contextOnChange) {
+            contextOnChange(value);
+        }
+    };
     const handleChange = (e) => {
         if (onChange) {
             onChange(e.target.value);
@@ -87,17 +99,22 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
             onBlur();
         }
     };
+    const handleClick = () => {
+        setIsOpen(true);
+    };
     const animationVariant = error ? (isFocused ? 'errorFocus' : 'error') : undefined;
+    const filteredOptions = suggestions?.filter((option) => !value || option.label.toLowerCase().includes(value.toLowerCase()));
     return (React.createElement("div", null,
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
-        React.createElement(InputContainer, { "data-cy": dataCy },
-            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, disabled: disabled, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": 'input' }),
+        React.createElement(InputContainer, { "data-cy": dataCy, ref: setReferenceElement },
+            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, disabled: disabled, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, autoFocus: autoFocus, "data-cy": 'input' }),
             React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
                 React.createElement(ErrorInner, null,
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),
             error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-message' }, error))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),
-            line)))))));
+            line))))),
+        filteredOptions && isOpen && (React.createElement(OptionsPopper, { referenceElement: referenceElement, options: filteredOptions, onSelect: handleSetSuggestion, onClose: () => setIsOpen(false) }))));
 });
 export default Input;

package/build/components/Select/Select.component.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
-export type SelectOption = {
-    value: string;
-    label: string;
-};
+import { SelectOption } from '../common/Options.component';
 export interface ISelectProps {
     'name'?: string;
     'label'?: string;

package/build/components/Select/Select.component.js

@@ -1,15 +1,13 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useCallback, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { usePopper } from 'react-popper';
+import React, { Fragment, useState } from 'react';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { motion } from 'framer-motion';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import ControlDescription from '../../shared/ControlDescription';
 import ControlLabel from '../../shared/ControlLabel';
 import { ControlStyles } from '../../shared/ControlStyles';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
+import { OptionsPopper } from '../common/Options.component';
 const ControlOuter = styled.div `
   position: relative;
 `;
@@ -37,54 +35,23 @@ const PlaceholderText = styled.div `
 const ValueText = styled.div `
   color: ${(props) => getThemeControlColours(props.theme).font};
 `;
-const OptionsContainer = styled.div `
-  width: 100%;
-  /* position: absolute; */
-  background-color: ${(props) => props.theme.colours.controlBackground};
-  z-index: 10000;
-
-  box-shadow: ${(props) => props.theme.shadows.small};
-`;
-const Option = styled(motion.div) `
-  color: ${(props) => getThemeControlColours(props.theme).font};
-  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
-  height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  cursor: pointer;
-`;
 const Select = (props) => {
-    const theme = useTheme();
     const [isOpen, setIsOpen] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
-    const [popperElement, setPopperElement] = useState();
     const { label, name, description, placeholder, 'value': propsValue, 'data-cy': dataCy, options } = props;
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom-start' });
     const value = getValue(propsValue, contextValue);
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
-    const selectValue = (option) => {
+    const handleSelect = (value) => {
         setIsOpen(false);
         if (contextOnChange) {
-            contextOnChange(option.value);
+            contextOnChange(value);
         }
         if (props.onChange) {
-            props.onChange(option.value);
+            props.onChange(value);
         }
     };
     const valueLabel = value && options.find((o) => o.value === value)?.label;
-    const handleGlobalClick = useCallback((event) => {
-        if (!popperElement?.contains(event.target)) {
-            setIsOpen(false);
-        }
-    }, [setIsOpen, popperElement]);
-    useEffect(() => {
-        document.addEventListener('mouseup', handleGlobalClick);
-        return () => {
-            document.removeEventListener('mouseup', handleGlobalClick);
-        };
-    }, [handleGlobalClick, popperElement]);
     return (React.createElement("div", null,
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
         React.createElement(ControlOuter, { ref: setReferenceElement },
@@ -94,10 +61,8 @@ const Select = (props) => {
                     value && React.createElement(ValueText, null, valueLabel)),
                 React.createElement(IconContainer, null,
                     React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
-            isOpen &&
-                ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 999, width: referenceElement?.offsetWidth }, ...attributes.popper },
-                    React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => selectValue(option) }, option.label))))), document.querySelector('body'))),
-        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
+            isOpen && (React.createElement(OptionsPopper, { referenceElement: referenceElement, options: options, onSelect: handleSelect, onClose: () => setIsOpen(false) }))),
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(Fragment, { key: index },
             index !== 0 && React.createElement("br", null),
             line)))))));
 };

package/build/components/common/Options.component.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Option: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export interface SelectOptionsProps {
+    options: SelectOption[];
+    onSelect: (value: string) => void;
+}
+export declare const SelectOptions: ({ options, onSelect }: SelectOptionsProps) => JSX.Element;
+export interface SelectOptionsPopperProps {
+    referenceElement: any;
+    options: SelectOption[];
+    onSelect: (value: string) => void;
+    onClose: () => void;
+}
+export declare const OptionsPopper: ({ referenceElement, options, onSelect, onClose }: SelectOptionsPopperProps) => React.ReactPortal;

package/build/components/common/Options.component.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import { motion } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+export const OptionsContainer = styled.div `
+  width: 100%;
+  background-color: ${(props) => props.theme.colours.controlBackground};
+  z-index: 10000;
+
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+export const Option = styled(motion.div) `
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
+  height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  cursor: pointer;
+`;
+export const SelectOptions = ({ options, onSelect }) => {
+    const theme = useTheme();
+    return (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => onSelect(option.value) }, option.label)))));
+};
+export const OptionsPopper = ({ referenceElement, options, onSelect, onClose }) => {
+    const [popperElement, setPopperElement] = useState();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom-start' });
+    const handleGlobalClick = useCallback((event) => {
+        if (!popperElement?.contains(event.target)) {
+            onClose();
+        }
+    }, [onClose, popperElement]);
+    useEffect(() => {
+        document.addEventListener('mouseup', handleGlobalClick);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, popperElement]);
+    return ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 999, width: referenceElement?.offsetWidth }, ...attributes.popper },
+        React.createElement(SelectOptions, { options: options, onSelect: onSelect })), document.querySelector('body'));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "2.0.0-13",
+  "version": "2.0.0-14",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {