@dtdot/lego 2.0.0-11 → 2.0.0-13

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ControlLineProps {
+    children: React.ReactNode;
+    variant?: 'action' | 'spaced';
+}
+declare const ControlLine: ({ children, variant }: ControlLineProps) => JSX.Element | null;
+export default ControlLine;

package/build/components/ControlLine/ControlLine.component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+const ActionContainer = styled.div `
+  display: flex;
+  width: 100%;
+
+  > :first-child {
+    flex-grow: 1;
+    padding-right: 3px;
+  }
+`;
+const SpacedContainer = styled.div `
+  display: flex;
+
+  > * {
+    flex-grow: 1;
+    padding-right: 3px;
+  }
+
+  > *:last-child {
+    padding-right: 0;
+  }
+`;
+const ControlLine = ({ children, variant = 'action' }) => {
+    if (variant === 'action') {
+        return React.createElement(ActionContainer, null, children);
+    }
+    if (variant === 'spaced') {
+        return React.createElement(SpacedContainer, null, children);
+    }
+    return null;
+};
+export default ControlLine;

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

@@ -10,7 +10,7 @@ import { ControlStyles } from '../../shared/ControlStyles';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
 const InputContainer = styled.div `
   position: relative;
-  margin: 2px 0;
+  border-radius: 2px;
 
   background-color: ${(props) => props.theme.colours.controlBackground};
 `;

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

@@ -1,5 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
@@ -37,7 +39,7 @@ const ValueText = styled.div `
 `;
 const OptionsContainer = styled.div `
   width: 100%;
-  position: absolute;
+  /* position: absolute; */
   background-color: ${(props) => props.theme.colours.controlBackground};
   z-index: 10000;
 
@@ -55,8 +57,11 @@ const Option = styled(motion.div) `
 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) => {
@@ -69,16 +74,29 @@ const Select = (props) => {
         }
     };
     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, null,
+        React.createElement(ControlOuter, { ref: setReferenceElement },
             React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
                 React.createElement(TextContainer, null,
                     !value && placeholder && React.createElement(PlaceholderText, null, placeholder),
                     value && React.createElement(ValueText, null, valueLabel)),
                 React.createElement(IconContainer, null,
                     React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
-            isOpen && (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)))))),
+            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,
             index !== 0 && React.createElement("br", null),
             line)))))));

package/build/index.d.ts

@@ -12,6 +12,7 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

package/build/index.js

@@ -12,6 +12,7 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

package/build/shared/ControlStyles.js

@@ -16,7 +16,7 @@ export const ControlStyles = css `
   color: ${(props) => getThemeControlColours(props.theme).font};
   background-color: ${(props) => getThemeControlColours(props.theme).background};
 
-  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
+  border: 1px solid ${(props) => getThemeControlColours(props.theme).background};
   border-radius: 2px;
 
   &:hover {

package/build/theme/dark.theme.js

@@ -35,9 +35,11 @@ const darkTheme = {
         faintBorder: '#cccccc1f',
         controlBackground: '#5e6167',
         controlBackgroundDisabled: '#47494d',
-        controlBorder: '#565656',
+        controlBorder: '#595b5e',
+        // controlBorder: '#565656',
         controlBorderFocus: '#4289de',
-        controlBorderHover: '#4a4949',
+        controlBorderHover: '#686c74',
+        // controlBorderHover: '#4a4949',
         controlPlaceholder: '#949494',
         controlDescriptionColour: '#cbcbcb',
         uploadBackground: '#5e6167',

package/package.json

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