@dtdot/lego 0.17.1 → 0.17.5

package/build/components/ImageUpload/ImageUpload.component.js

@@ -72,7 +72,7 @@ const ImageUpload = ({ name, value, onChange, onSearch }) => {
                 onChange(url);
             }
             if (contextOnChange) {
-                contextOnChange({ target: { value: url } });
+                contextOnChange(url);
             }
         }
     };

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

@@ -28,6 +28,7 @@ export const InputStyles = css `
   width: 100%;
   height: ${INPUT_HEIGHT}px;
   padding: 0 12px;
+  scroll-margin-bottom: 100px;
 
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};

package/build/components/LiveList/LiveList.component.js

@@ -46,7 +46,7 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
         }
     }, [propsOnChange, contextOnChange]);
     useEffect(() => {
-        if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        if (!value?.length) {
             wrappedOnChange([{ id: uuidv4(), value: '' }]);
         }
     }, [value, wrappedOnChange]);
@@ -65,10 +65,13 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
             return;
         }
         const focusedValue = value.find((val) => val.id === focusedId);
-        if (focusedValue === null || focusedValue === void 0 ? void 0 : focusedValue.value) {
+        if (focusedValue?.value) {
             return;
         }
         const focusedIndex = value.findIndex((val) => val.id === focusedId);
+        if (focusedIndex === 0) {
+            return;
+        }
         const prevId = focusedIndex > 0 ? value[focusedIndex - 1].id : undefined;
         wrappedOnChange(value.filter((val) => val.id !== focusedId));
         if (prevId) {
@@ -94,7 +97,7 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
         const newItem = { id: uuidv4(), value: '' };
         wrappedOnChange([...value, newItem]);
     };
-    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+    if (!value?.length) {
         return null;
     }
     return (React.createElement("div", null,

package/build/components/LiveList/LiveList.stories.d.ts

@@ -3,5 +3,6 @@ import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
 export declare const InForm: () => JSX.Element;
 export declare const WithValidation: () => JSX.Element;
+export declare const EmptyList: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/LiveList/LiveList.stories.js

@@ -44,6 +44,13 @@ export const WithValidation = () => {
             React.createElement(Button, { onClick: clear }, "Clear"),
             React.createElement(Button, { onClick: validate }, "Set Errors"))));
 };
+export const EmptyList = () => {
+    const [value, setValue] = useState({});
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading.FormHeading, null, "Ingredients"),
+        React.createElement(Spacer, { size: '1x' }),
+        React.createElement(LiveList, { value: value, onChange: setValue })));
+};
 export default {
     title: 'Components/LiveList',
     component: LiveList,

package/build/components/LiveList/_LiveListRow.js

@@ -60,7 +60,7 @@ const LiveListRow = ({ id, value, error, onChange, onRemove }) => {
         onBlur(id);
     };
     return (React.createElement(InputContainer, { whileHover: 'hover' },
-        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value, error: error, onChange: handleChange }),
+        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value || '', error: error, onChange: handleChange }),
         React.createElement(RemoveContainer, { animate: isFocused ? 'focus' : undefined, style: { opacity: 0 }, variants: removeVariants, transition: { type: 'spring', duration: 0.3 } },
             React.createElement(RemoveInner, { onClick: onRemove },
                 React.createElement(FontAwesomeIcon, { icon: faTimes })))));

package/build/components/ProfileImage/ProfileImage.component.js

@@ -30,7 +30,7 @@ const Identicon = ({ value }) => {
     const hexColours = [colours.red, colours.green, colours.blue, colours.yellow];
     const convertedColours = hexColours.map((hex) => {
         const rgb = hexToRgb(hex);
-        return [rgb === null || rgb === void 0 ? void 0 : rgb.r, rgb === null || rgb === void 0 ? void 0 : rgb.g, rgb === null || rgb === void 0 ? void 0 : rgb.b, 255];
+        return [rgb?.r, rgb?.g, rgb?.b, 255];
     });
     const hash = SparkMD5.hash(value || 'unknown user');
     const colourIndex = Math.floor(Math.random() * 4);

package/build/components/QrCode/QrCode.component.js

@@ -45,7 +45,7 @@ const QrCode = ({ value }) => {
         if (hintTimeoutRef.current) {
             window.clearTimeout(hintTimeoutRef.current);
         }
-        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+        if (inputRef?.current) {
             inputRef.current.select();
             document.execCommand('copy');
         }

package/build/hooks/useKeyPress.js

@@ -4,14 +4,13 @@ const useKeypress = (key, handler) => {
     useEffect(() => {
         eventListenerRef.current = (event) => {
             if (key === event.key) {
-                handler === null || handler === void 0 ? void 0 : handler();
+                handler?.();
             }
         };
     }, [key, handler]);
     useEffect(() => {
         const eventListener = (event) => {
-            var _a;
-            (_a = eventListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(eventListenerRef, event);
+            eventListenerRef.current?.(event);
         };
         window.addEventListener('keydown', eventListener);
         return () => {

package/package.json

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